chore: release v1.16.0 (#308 )

chore: add .claude/ to gitignore (#307 )
fix: logo optimization, deprecated meta tag, and clipboard copy fallback (#306 )
2026-02-25 00:19:56 +01:00 · 2026-02-25 00:09:20 +01:00 · 2026-02-25 00:04:35 +01:00 · 2026-02-24 23:52:59 +01:00 · 2026-02-24 21:21:34 +01:00 · 2026-02-24 21:21:30 +01:00
62 changed files with 2670 additions and 870 deletions
@@ -7,6 +7,10 @@ body:
      value: |
        Thanks for taking the time to report a bug! Please fill out the sections below.

+        Before submitting, please reproduce the issue on the latest released version.
+        Even better: verify it on the current `main` image/tag.
+        The issue may already be fixed in newer builds.
+
  - type: textarea
    id: description
    attributes:
@@ -57,6 +61,18 @@ body:
    validations:
      required: true

+  - type: textarea
+    id: version_info
+    attributes:
+      label: Version / Image Information
+      description: Provide the app version and, if using Docker, the exact image tag you are running.
+      placeholder: |
+        App version (Settings -> About): vX.Y.Z
+        Docker image tag (if applicable): latest or main
+        Tag guidance: use `latest` for the newest release, or `main` for the newest changes from the main branch (`main` is always as new as or newer than `latest`).
+    validations:
+      required: true
+
  - type: input
    id: browser
    attributes:
@@ -26,6 +26,16 @@ Use `medassist-frontend-polish` only after these guardrails are satisfied.
 - Avoid custom inline modal/button patterns that diverge from project design.
 - Prefer extending existing CSS classes/styles instead of introducing parallel styling systems.

+### Modal requirements (non-negotiable)
+
+Every modal/overlay **must** follow these rules:
+
+1. **Escape key**: Call `useEscapeKey(active, onClose)` from `hooks/useEscapeKey`. This registers a document-level `keydown` listener that works regardless of focus. **Never** rely on `onKeyDown` on an overlay div — it only fires when the overlay has focus, which almost never happens.
+2. **Scroll lock**: Call `useScrollLock(active)` from `hooks/useScrollLock` if the modal is **not** already covered by App.tsx's centralized `useScrollLock` call. Page-local modals (e.g. `ReportModal`, `ExportModal`) must call it themselves.
+3. **Click-outside close**: The overlay div gets `onClick={onClose}`, and `.modal-content` gets `onClick={(e) => e.stopPropagation()}`.
+4. **Key event containment**: `.modal-content` gets `onKeyDown={(e) => { if (e.key !== "Escape") e.stopPropagation(); }}` — this prevents non-Escape keys from leaking out while still allowing Escape to propagate to the document-level handler.
+5. **Nested sub-modals** (e.g. edit-stock inside MedDetailModal): Use `useEscapeKey` with `{ capture: true }` so the innermost modal intercepts Escape before the parent's handler fires.
+
 ## Decision Heuristics

 1. If an equivalent component exists, reuse it.
@@ -79,6 +79,7 @@ Thumbs.db
 .turbo/
 .roo/
 .roomodes
+.claude/
 AGENTS.md
 docs/TECH_STACK.md
 doku
@@ -18,8 +18,8 @@
 </p>

 <p align="center">
-  <img src="https://img.shields.io/badge/Backend_Tests-564%2F564-brightgreen?logo=vitest" alt="Backend Tests 454/454" />
-  <img src="https://img.shields.io/badge/Frontend_Tests-777%2F777-brightgreen?logo=vitest" alt="Frontend Tests 611/611" />
+  <img src="https://img.shields.io/badge/Backend_Tests-569%2F569-brightgreen?logo=vitest" alt="Backend Tests 454/454" />
+  <img src="https://img.shields.io/badge/Frontend_Tests-771%2F771-brightgreen?logo=vitest" alt="Frontend Tests 611/611" />
 </p>

 ### 🤖 AI-Generated Code
@@ -1,12 +1,12 @@
 {
  "name": "medassist-ng-backend",
-  "version": "1.12.0",
+  "version": "1.15.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "medassist-ng-backend",
-      "version": "1.12.0",
+      "version": "1.15.1",
      "dependencies": {
        "@fastify/cookie": "^11.0.2",
        "@fastify/cors": "^11.2.0",
@@ -23,12 +23,13 @@
        "fastify": "^5.7.4",
        "nodemailer": "^8.0.1",
        "openid-client": "^6.8.2",
+        "sharp": "^0.34.5",
        "zod": "^3.23.8"
      },
      "devDependencies": {
-        "@biomejs/biome": "^2.4.1",
-        "@types/node": "^25.2.3",
-        "@types/nodemailer": "^7.0.10",
+        "@biomejs/biome": "^2.4.4",
+        "@types/node": "^25.3.0",
+        "@types/nodemailer": "^7.0.11",
        "@types/supertest": "^6.0.2",
        "@vitest/coverage-v8": "^4.0.18",
        "drizzle-kit": "^0.31.9",
@@ -99,9 +100,9 @@
      }
    },
    "node_modules/@biomejs/biome": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.1.tgz",
-      "integrity": "sha512-8c5DZQl1hfpLRlTZ21W5Ef2R314E4UJUEtkMbo303ElTVe6fYtapwldv7tZlgwm+9YP0Mhk7dUSTkOY8nQ2/2w==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.4.tgz",
+      "integrity": "sha512-tigwWS5KfJf0cABVd52NVaXyAVv4qpUXOWJ1rxFL8xF1RVoeS2q/LK+FHgYoKMclJCuRoCWAPy1IXaN9/mS61Q==",
      "dev": true,
      "license": "MIT OR Apache-2.0",
      "bin": {
@@ -115,20 +116,20 @@
        "url": "https://opencollective.com/biome"
      },
      "optionalDependencies": {
-        "@biomejs/cli-darwin-arm64": "2.4.1",
-        "@biomejs/cli-darwin-x64": "2.4.1",
-        "@biomejs/cli-linux-arm64": "2.4.1",
-        "@biomejs/cli-linux-arm64-musl": "2.4.1",
-        "@biomejs/cli-linux-x64": "2.4.1",
-        "@biomejs/cli-linux-x64-musl": "2.4.1",
-        "@biomejs/cli-win32-arm64": "2.4.1",
-        "@biomejs/cli-win32-x64": "2.4.1"
+        "@biomejs/cli-darwin-arm64": "2.4.4",
+        "@biomejs/cli-darwin-x64": "2.4.4",
+        "@biomejs/cli-linux-arm64": "2.4.4",
+        "@biomejs/cli-linux-arm64-musl": "2.4.4",
+        "@biomejs/cli-linux-x64": "2.4.4",
+        "@biomejs/cli-linux-x64-musl": "2.4.4",
+        "@biomejs/cli-win32-arm64": "2.4.4",
+        "@biomejs/cli-win32-x64": "2.4.4"
      }
    },
    "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.1.tgz",
-      "integrity": "sha512-wKiX2znbgFRaivRplSbu53hiREp1ohlGRuWqOL90IPetLi5E32tkiMYu8uSLXVzDgbIVM58WsesPaczIVtJkOQ==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.4.tgz",
+      "integrity": "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A==",
      "cpu": [
        "arm64"
      ],
@@ -143,9 +144,9 @@
      }
    },
    "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.1.tgz",
-      "integrity": "sha512-rxLYVg3skeXh9K0om7JdkKcCdvtqrF9ECZ7dsmLuYObboK7DZ1J0z6xc2NGKSXw+cEQo3ie6NQgWBcdGJ16yQg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.4.tgz",
+      "integrity": "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg==",
      "cpu": [
        "x64"
      ],
@@ -160,9 +161,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.1.tgz",
-      "integrity": "sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.4.tgz",
+      "integrity": "sha512-V/NFfbWhsUU6w+m5WYbBenlEAz8eYnSqRMDMAW3K+3v0tYVkNyZn8VU0XPxk/lOqNXLSCCrV7FmV/u3SjCBShg==",
      "cpu": [
        "arm64"
      ],
@@ -177,9 +178,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-arm64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.1.tgz",
-      "integrity": "sha512-Brwh/QL3wfX5UyZcyEamS1Q+EF8Q7ud+MS5mq/9BWX2ArfxQlgsqlukwK92xrGpXWcspXkSG9U0CoxvCZZkTKQ==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.4.tgz",
+      "integrity": "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ==",
      "cpu": [
        "arm64"
      ],
@@ -194,9 +195,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.1.tgz",
-      "integrity": "sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.4.tgz",
+      "integrity": "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg==",
      "cpu": [
        "x64"
      ],
@@ -211,9 +212,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.1.tgz",
-      "integrity": "sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.4.tgz",
+      "integrity": "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g==",
      "cpu": [
        "x64"
      ],
@@ -228,9 +229,9 @@
      }
    },
    "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.1.tgz",
-      "integrity": "sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.4.tgz",
+      "integrity": "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q==",
      "cpu": [
        "arm64"
      ],
@@ -245,9 +246,9 @@
      }
    },
    "node_modules/@biomejs/cli-win32-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.1.tgz",
-      "integrity": "sha512-kfjOCzvaHC7olg8pmEuSsYzHntxdipkAGzr5nFiaEU2EPDWRE/myqUBaFDl9pHqEc8yEtQFiXF945PlTSkuOTw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.4.tgz",
+      "integrity": "sha512-gnOHKVPFAAPrpoPt2t+Q6FZ7RPry/FDV3GcpU53P3PtLNnQjBmKyN2Vh/JtqXet+H4pme8CC76rScwdjDcT1/A==",
      "cpu": [
        "x64"
      ],
@@ -268,6 +269,16 @@
      "dev": true,
      "license": "Apache-2.0"
    },
+    "node_modules/@emnapi/runtime": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
+      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "tslib": "^2.4.0"
+      }
+    },
    "node_modules/@epic-web/invariant": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
@@ -1500,6 +1511,471 @@
        "glob": "^13.0.0"
      }
    },
+    "node_modules/@img/colour": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.0.0.tgz",
+      "integrity": "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@img/sharp-darwin-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.34.5.tgz",
+      "integrity": "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-darwin-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.34.5.tgz",
+      "integrity": "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-darwin-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.2.4.tgz",
+      "integrity": "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-darwin-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.2.4.tgz",
+      "integrity": "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.2.4.tgz",
+      "integrity": "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.2.4.tgz",
+      "integrity": "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-ppc64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-ppc64/-/sharp-libvips-linux-ppc64-1.2.4.tgz",
+      "integrity": "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-riscv64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-riscv64/-/sharp-libvips-linux-riscv64-1.2.4.tgz",
+      "integrity": "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-s390x": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.2.4.tgz",
+      "integrity": "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linux-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.2.4.tgz",
+      "integrity": "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-arm64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.2.4.tgz",
+      "integrity": "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-libvips-linuxmusl-x64": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.2.4.tgz",
+      "integrity": "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.34.5.tgz",
+      "integrity": "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.34.5.tgz",
+      "integrity": "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-ppc64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-ppc64/-/sharp-linux-ppc64-0.34.5.tgz",
+      "integrity": "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==",
+      "cpu": [
+        "ppc64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-ppc64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-riscv64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-riscv64/-/sharp-linux-riscv64-0.34.5.tgz",
+      "integrity": "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-riscv64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-s390x": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.34.5.tgz",
+      "integrity": "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==",
+      "cpu": [
+        "s390x"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-s390x": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linux-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.34.5.tgz",
+      "integrity": "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linux-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.34.5.tgz",
+      "integrity": "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-linuxmusl-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.34.5.tgz",
+      "integrity": "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4"
+      }
+    },
+    "node_modules/@img/sharp-wasm32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.34.5.tgz",
+      "integrity": "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==",
+      "cpu": [
+        "wasm32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/runtime": "^1.7.0"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-arm64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-arm64/-/sharp-win32-arm64-0.34.5.tgz",
+      "integrity": "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-ia32": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.34.5.tgz",
+      "integrity": "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/@img/sharp-win32-x64": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.34.5.tgz",
+      "integrity": "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "Apache-2.0 AND LGPL-3.0-or-later",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
    "node_modules/@isaacs/cliui": {
      "version": "9.0.0",
      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-9.0.0.tgz",
@@ -2148,18 +2624,18 @@
      "license": "MIT"
    },
    "node_modules/@types/node": {
-      "version": "25.2.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz",
-      "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==",
+      "version": "25.3.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz",
+      "integrity": "sha512-4K3bqJpXpqfg2XKGK9bpDTc6xO/xoUP/RBWS7AtRMug6zZFaRekiLzjVtAoZMquxoAbzBvy5nxQ7veS5eYzf8A==",
      "license": "MIT",
      "dependencies": {
-        "undici-types": "~7.16.0"
+        "undici-types": "~7.18.0"
      }
    },
    "node_modules/@types/nodemailer": {
-      "version": "7.0.10",
-      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.10.tgz",
-      "integrity": "sha512-tP+9WggTFN22Zxh0XFyst7239H0qwiRCogsk7v9aQS79sYAJY+WEbTHbNYcxUMaalHKmsNpxmoTe35hBEMMd6g==",
+      "version": "7.0.11",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.11.tgz",
+      "integrity": "sha512-E+U4RzR2dKrx+u3N4DlsmLaDC6mMZOM/TPROxA0UAPiTgI0y4CEFBmZE+coGWTjakDriRsXG368lNk1u9Q0a2g==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -4912,6 +5388,59 @@
      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
      "license": "ISC"
    },
+    "node_modules/sharp": {
+      "version": "0.34.5",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.34.5.tgz",
+      "integrity": "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@img/colour": "^1.0.0",
+        "detect-libc": "^2.1.2",
+        "semver": "^7.7.3"
+      },
+      "engines": {
+        "node": "^18.17.0 || ^20.3.0 || >=21.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      },
+      "optionalDependencies": {
+        "@img/sharp-darwin-arm64": "0.34.5",
+        "@img/sharp-darwin-x64": "0.34.5",
+        "@img/sharp-libvips-darwin-arm64": "1.2.4",
+        "@img/sharp-libvips-darwin-x64": "1.2.4",
+        "@img/sharp-libvips-linux-arm": "1.2.4",
+        "@img/sharp-libvips-linux-arm64": "1.2.4",
+        "@img/sharp-libvips-linux-ppc64": "1.2.4",
+        "@img/sharp-libvips-linux-riscv64": "1.2.4",
+        "@img/sharp-libvips-linux-s390x": "1.2.4",
+        "@img/sharp-libvips-linux-x64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-arm64": "1.2.4",
+        "@img/sharp-libvips-linuxmusl-x64": "1.2.4",
+        "@img/sharp-linux-arm": "0.34.5",
+        "@img/sharp-linux-arm64": "0.34.5",
+        "@img/sharp-linux-ppc64": "0.34.5",
+        "@img/sharp-linux-riscv64": "0.34.5",
+        "@img/sharp-linux-s390x": "0.34.5",
+        "@img/sharp-linux-x64": "0.34.5",
+        "@img/sharp-linuxmusl-arm64": "0.34.5",
+        "@img/sharp-linuxmusl-x64": "0.34.5",
+        "@img/sharp-wasm32": "0.34.5",
+        "@img/sharp-win32-arm64": "0.34.5",
+        "@img/sharp-win32-ia32": "0.34.5",
+        "@img/sharp-win32-x64": "0.34.5"
+      }
+    },
+    "node_modules/sharp/node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5240,6 +5769,13 @@
      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
      "license": "MIT"
    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD",
+      "optional": true
+    },
    "node_modules/tsx": {
      "version": "4.21.0",
      "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
@@ -5289,9 +5825,9 @@
      }
    },
    "node_modules/undici-types": {
-      "version": "7.16.0",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
      "license": "MIT"
    },
    "node_modules/vary": {
@@ -1,6 +1,6 @@
 {
  "name": "medassist-ng-backend",
-  "version": "1.14.3",
+  "version": "1.16.0",
  "private": true,
  "type": "module",
  "scripts": {
@@ -32,12 +32,13 @@
    "fastify": "^5.7.4",
    "nodemailer": "^8.0.1",
    "openid-client": "^6.8.2",
+    "sharp": "^0.34.5",
    "zod": "^3.23.8"
  },
  "devDependencies": {
-    "@biomejs/biome": "^2.4.1",
-    "@types/node": "^25.2.3",
-    "@types/nodemailer": "^7.0.10",
+    "@biomejs/biome": "^2.4.4",
+    "@types/node": "^25.3.0",
+    "@types/nodemailer": "^7.0.11",
    "@types/supertest": "^6.0.2",
    "@vitest/coverage-v8": "^4.0.18",
    "drizzle-kit": "^0.31.9",
@@ -1,4 +1,6 @@
+import { randomUUID } from "node:crypto";
 import { existsSync } from "node:fs";
+import type { IncomingHttpHeaders } from "node:http";
 import { resolve } from "node:path";
 import cookie from "@fastify/cookie";
 import cors from "@fastify/cors";
@@ -45,6 +47,16 @@ import {
 	parseCorsOrigins,
 } from "./utils/server-config.js";

+function sanitizeCorrelationId(headers: IncomingHttpHeaders): string | null {
+	const rawHeader = headers["x-correlation-id"];
+	if (typeof rawHeader !== "string") return null;
+	const trimmed = rawHeader.trim();
+	if (!trimmed) return null;
+	if (trimmed.length > 128) return null;
+	if (!/^[A-Za-z0-9._:-]+$/.test(trimmed)) return null;
+	return trimmed;
+}
+
 /** Create and configure Fastify app (without starting) */
 export async function createApp(options?: {
 	logLevel?: string;
@@ -73,6 +85,13 @@ export async function createApp(options?: {

 	const app = Fastify({
 		logger: { level: opts.logLevel },
+		genReqId: (request) => sanitizeCorrelationId(request.headers) ?? randomUUID(),
+	});
+
+	app.addHook("onRequest", (request, reply, done) => {
+		request.correlationId = request.id;
+		reply.header("x-correlation-id", request.id);
+		done();
 	});

 	// Build config
@@ -141,6 +160,13 @@ const app = Fastify({
 	logger: {
 		level: env.LOG_LEVEL,
 	},
+	genReqId: (request) => sanitizeCorrelationId(request.headers) ?? randomUUID(),
+});
+
+app.addHook("onRequest", (request, reply, done) => {
+	request.correlationId = request.id;
+	reply.header("x-correlation-id", request.id);
+	done();
 });

 const origins = parseCorsOrigins(env.CORS_ORIGINS);
@@ -1,4 +1,5 @@
 import { randomBytes } from "node:crypto";
+import { resolve } from "node:path";
 import argon2 from "argon2";
 import { eq, sql } from "drizzle-orm";
 import type { FastifyInstance } from "fastify";
@@ -8,6 +9,12 @@ import { getDataDir } from "../db/db-utils.js";
 import { refreshTokens, users } from "../db/schema.js";
 import { getAuthState, requireAuth } from "../plugins/auth.js";
 import type { AuthUser } from "../types/fastify.js";
+import {
+	ALLOWED_IMAGE_MIME_TYPES,
+	removeImageFiles,
+	streamToBuffer,
+	writeOptimizedImageSet,
+} from "../utils/image-upload.js";

 // =============================================================================
 // Argon2id Configuration - State of the Art Password Hashing
@@ -53,6 +60,7 @@ const sensitiveRateLimitConfig = {
 const registerSchema = z.object({
 	username: z
 		.string()
+		.trim()
 		.min(3, "Username must be at least 3 characters")
 		.max(50, "Username must be at most 50 characters")
 		.regex(/^[a-zA-Z0-9_-]+$/, "Username can only contain letters, numbers, underscores, and hyphens"),
@@ -63,7 +71,7 @@ const registerSchema = z.object({
 });

 const loginSchema = z.object({
-	username: z.string().min(1, "Username is required"),
+	username: z.string().trim().min(1, "Username is required"),
 	password: z.string().min(1, "Password is required"),
 	rememberMe: z.boolean().optional().default(false),
 });
@@ -81,6 +89,8 @@ const updateProfileSchema = z.object({
 // Auth Routes
 // =============================================================================
 export async function authRoutes(app: FastifyInstance) {
+	const IMAGES_DIR = resolve(getDataDir(), "images");
+
 	// Token TTLs
 	const accessTtlMinutes = 15;
 	const refreshTtlDays = 14;
@@ -461,36 +471,35 @@ export async function authRoutes(app: FastifyInstance) {

 			const data = await request.file();
 			if (!data) {
-				return reply.status(400).send({ error: "No file uploaded" });
+				return reply.status(400).send({ error: "No file uploaded", code: "NO_FILE" });
 			}

 			// Validate file type
-			const allowedTypes = ["image/jpeg", "image/png", "image/webp", "image/gif"];
-			if (!allowedTypes.includes(data.mimetype)) {
-				return reply.status(400).send({ error: "Invalid file type. Allowed: JPEG, PNG, WebP, GIF" });
+			if (!ALLOWED_IMAGE_MIME_TYPES.includes(data.mimetype)) {
+				return reply.status(400).send({ error: "Invalid file type", code: "INVALID_TYPE" });
 			}

-			// Generate unique filename
-			const ext = data.filename.split(".").pop() || "jpg";
-			const filename = `avatar_${authUser.id}_${Date.now()}.${ext}`;
+			let uploadBuffer: Buffer;
+			try {
+				uploadBuffer = await streamToBuffer(data.file);
+			} catch (error) {
+				if (error instanceof Error && error.message === "IMAGE_TOO_LARGE") {
+					return reply.status(400).send({ error: "Image too large", code: "IMAGE_TOO_LARGE" });
+				}
+				throw error;
+			}

-			// Save file
-			const fs = await import("node:fs/promises");
-			const path = await import("node:path");
-			const imagesDir = path.join(getDataDir(), "images");
-			await fs.mkdir(imagesDir, { recursive: true });
-
-			const buffer = await data.toBuffer();
-			await fs.writeFile(path.join(imagesDir, filename), buffer);
+			let filename: string;
+			try {
+				({ filename } = await writeOptimizedImageSet(IMAGES_DIR, `avatar_${authUser.id}`, uploadBuffer));
+			} catch {
+				return reply.status(400).send({ error: "Invalid image", code: "INVALID_IMAGE" });
+			}

 			// Delete old avatar if exists
 			const [user] = await db.select().from(users).where(eq(users.id, authUser.id));
 			if (user?.avatarUrl) {
-				try {
-					await fs.unlink(path.join(imagesDir, user.avatarUrl));
-				} catch {
-					// Ignore if file doesn't exist
-				}
+				removeImageFiles(IMAGES_DIR, user.avatarUrl);
 			}

 			// Update user
@@ -521,13 +530,7 @@ export async function authRoutes(app: FastifyInstance) {
 			}

 			// Delete file
-			const fs = await import("node:fs/promises");
-			const path = await import("node:path");
-			try {
-				await fs.unlink(path.join(getDataDir(), "images", user.avatarUrl));
-			} catch {
-				// Ignore if file doesn't exist
-			}
+			removeImageFiles(IMAGES_DIR, user.avatarUrl);

 			// Update user
 			await db.update(users).set({ avatarUrl: null, updatedAt: new Date() }).where(eq(users.id, authUser.id));
@@ -554,13 +557,7 @@ export async function authRoutes(app: FastifyInstance) {
 			// Delete avatar file if exists
 			const [user] = await db.select().from(users).where(eq(users.id, authUser.id));
 			if (user?.avatarUrl) {
-				const fs = await import("node:fs/promises");
-				const path = await import("node:path");
-				try {
-					await fs.unlink(path.join(getDataDir(), "images", user.avatarUrl));
-				} catch {
-					// Ignore if file doesn't exist
-				}
+				removeImageFiles(IMAGES_DIR, user.avatarUrl);
 			}

 			// Delete user - cascade delete handles all related data
@@ -2,10 +2,11 @@ import { and, eq } from "drizzle-orm";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import { z } from "zod";
 import { db } from "../db/client.js";
-import { doseTracking, shareTokens } from "../db/schema.js";
+import { doseTracking, medications, shareTokens } from "../db/schema.js";
 import { getAnonymousUserId, requireAuth } from "../plugins/auth.js";
 import { env } from "../plugins/env.js";
 import type { AuthUser } from "../types/fastify.js";
+import { parseIntakesJson, parseTakenByJson, personTakesMedication } from "../utils/scheduler-utils.js";

 // =============================================================================
 // Validation Schemas
@@ -22,6 +23,13 @@ const dismissDosesSchema = z.object({
 	doseIds: z.array(z.string().min(1)).min(1, "At least one doseId is required"),
 });

+const doseIdPattern = /^(\d+)-(\d+)-(\d+)(?:-(.+))?$/;
+
+function maskToken(token: string): string {
+	if (token.length <= 8) return token;
+	return `${token.slice(0, 4)}...${token.slice(-4)}`;
+}
+
 // Helper to get user ID from request
 // Returns anonymous user ID when auth is disabled
 async function getUserId(request: FastifyRequest, reply: FastifyReply): Promise<number> {
@@ -38,6 +46,91 @@ async function getUserId(request: FastifyRequest, reply: FastifyReply): Promise<
 	return authUser.id;
 }

+type ParsedDoseId = {
+	medicationId: number;
+	intakeIndex: number;
+	timestampMs: number;
+	personSuffix: string | null;
+};
+
+function parseDoseId(doseId: string): ParsedDoseId | null {
+	const match = doseIdPattern.exec(doseId);
+	if (!match) return null;
+
+	const medicationId = Number.parseInt(match[1], 10);
+	const intakeIndex = Number.parseInt(match[2], 10);
+	const timestampMs = Number.parseInt(match[3], 10);
+	const personSuffix = match[4] ? match[4].trim() : null;
+
+	if (Number.isNaN(medicationId) || Number.isNaN(intakeIndex) || Number.isNaN(timestampMs) || intakeIndex < 0) {
+		return null;
+	}
+
+	return {
+		medicationId,
+		intakeIndex,
+		timestampMs,
+		personSuffix,
+	};
+}
+
+async function getActiveShareToken(token: string): Promise<{
+	share: typeof shareTokens.$inferSelect | null;
+	reason: "not_found" | "expired" | "ok";
+}> {
+	const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, token));
+	if (!share) return { share: null, reason: "not_found" };
+
+	if (share.expiresAt && share.expiresAt.getTime() < Date.now()) {
+		return { share: null, reason: "expired" };
+	}
+
+	return { share, reason: "ok" };
+}
+
+async function validateShareDoseId(share: typeof shareTokens.$inferSelect, doseId: string): Promise<boolean> {
+	const parsedDose = parseDoseId(doseId);
+	if (!parsedDose) {
+		return false;
+	}
+
+	const [medication] = await db
+		.select()
+		.from(medications)
+		.where(and(eq(medications.id, parsedDose.medicationId), eq(medications.userId, share.userId)));
+
+	if (!medication) {
+		return false;
+	}
+
+	const medTakenBy = parseTakenByJson(medication.takenByJson);
+	const intakes = parseIntakesJson(
+		medication.intakesJson,
+		{ usageJson: medication.usageJson, everyJson: medication.everyJson, startJson: medication.startJson },
+		medication.intakeRemindersEnabled ?? false
+	);
+
+	if (!personTakesMedication(share.takenBy, medTakenBy, intakes)) {
+		return false;
+	}
+
+	const intake = intakes[parsedDose.intakeIndex];
+	if (!intake) {
+		return false;
+	}
+
+	const expectedPersons = intake.takenBy ? [intake.takenBy] : medTakenBy;
+	if (expectedPersons.length === 0) {
+		return parsedDose.personSuffix === null;
+	}
+
+	if (!parsedDose.personSuffix) {
+		return true;
+	}
+
+	return expectedPersons.includes(parsedDose.personSuffix);
+}
+
 // =============================================================================
 // Dose Tracking Routes
 // =============================================================================
@@ -215,9 +308,9 @@ export async function doseRoutes(app: FastifyInstance) {
 	app.get<{ Params: { token: string } }>("/share/:token/doses", async (request, reply) => {
 		const { token } = request.params;

-		// Find share token
-		const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, token));
+		const { share, reason } = await getActiveShareToken(token);
 		if (!share) {
+			request.log.warn(`[ShareDose] Rejected read for token ${maskToken(token)} (reason=${reason})`);
 			return reply.notFound("Share link not found");
 		}

@@ -252,12 +345,20 @@ export async function doseRoutes(app: FastifyInstance) {

 			const { doseId } = parsed.data;

-			// Find share token
-			const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, token));
+			const { share, reason } = await getActiveShareToken(token);
 			if (!share) {
+				request.log.warn(`[ShareDose] Rejected mark for token ${maskToken(token)} (reason=${reason})`);
 				return reply.notFound("Share link not found");
 			}

+			const isValidShareDoseId = await validateShareDoseId(share, doseId);
+			if (!isValidShareDoseId) {
+				request.log.warn(
+					`[ShareDose] Rejected invalid doseId in mark request (owner=${share.userId}, takenBy=${share.takenBy}, doseId=${doseId})`
+				);
+				return reply.status(400).send({ error: "Invalid or unauthorized doseId" });
+			}
+
 			// Check if already marked
 			const [existing] = await db
 				.select()
@@ -265,6 +366,7 @@ export async function doseRoutes(app: FastifyInstance) {
 				.where(and(eq(doseTracking.userId, share.userId), eq(doseTracking.doseId, doseId)));

 			if (existing) {
+				request.log.debug(`[ShareDose] Duplicate mark ignored (owner=${share.userId}, doseId=${doseId})`);
 				return { success: true, message: "Already marked" };
 			}

@@ -276,6 +378,10 @@ export async function doseRoutes(app: FastifyInstance) {
 				takenSource: "manual",
 			});

+			request.log.info(
+				`[ShareDose] Dose marked via share link (owner=${share.userId}, takenBy=${share.takenBy}, doseId=${doseId})`
+			);
+
 			return { success: true };
 		}
 	);
@@ -286,12 +392,20 @@ export async function doseRoutes(app: FastifyInstance) {
 	app.delete<{ Params: { token: string; doseId: string } }>("/share/:token/doses/:doseId", async (request, reply) => {
 		const { token, doseId } = request.params;

-		// Find share token
-		const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, token));
+		const { share, reason } = await getActiveShareToken(token);
 		if (!share) {
+			request.log.warn(`[ShareDose] Rejected unmark for token ${maskToken(token)} (reason=${reason})`);
 			return reply.notFound("Share link not found");
 		}

+		const isValidShareDoseId = await validateShareDoseId(share, doseId);
+		if (!isValidShareDoseId) {
+			request.log.warn(
+				`[ShareDose] Rejected invalid doseId in unmark request (owner=${share.userId}, takenBy=${share.takenBy}, doseId=${doseId})`
+			);
+			return reply.status(400).send({ error: "Invalid or unauthorized doseId" });
+		}
+
 		// Check if this dose was dismissed
 		const [existing] = await db
 			.select()
@@ -300,9 +414,13 @@ export async function doseRoutes(app: FastifyInstance) {

 		if (existing?.dismissed) {
 			// Already dismissed - keep the record as-is
+			request.log.debug(`[ShareDose] Unmark ignored for dismissed dose (owner=${share.userId}, doseId=${doseId})`);
 		} else {
 			// Not dismissed - delete the record entirely
 			await db.delete(doseTracking).where(and(eq(doseTracking.userId, share.userId), eq(doseTracking.doseId, doseId)));
+			request.log.info(
+				`[ShareDose] Dose unmarked via share link (owner=${share.userId}, takenBy=${share.takenBy}, doseId=${doseId})`
+			);
 		}

 		return { success: true };
@@ -1,6 +1,4 @@
-import { createWriteStream, existsSync, unlinkSync } from "node:fs";
-import { extname, resolve } from "node:path";
-import { pipeline } from "node:stream/promises";
+import { resolve } from "node:path";
 import { and, eq, like } from "drizzle-orm";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import { z } from "zod";
@@ -10,6 +8,12 @@ import { doseTracking, medications, userSettings } from "../db/schema.js";
 import { getAnonymousUserId, requireAuth } from "../plugins/auth.js";
 import { env } from "../plugins/env.js";
 import type { AuthUser } from "../types/fastify.js";
+import {
+	ALLOWED_IMAGE_MIME_TYPES,
+	removeImageFiles,
+	streamToBuffer,
+	writeOptimizedImageSet,
+} from "../utils/image-upload.js";
 import { type Intake, parseIntakesJson, parseLocalDateTime, parseTakenByJson } from "../utils/scheduler-utils.js";

 const IMAGES_DIR = resolve(getDataDir(), "images");
@@ -693,10 +697,7 @@ export async function medicationRoutes(app: FastifyInstance) {
 			.where(and(eq(medications.id, idNum), eq(medications.userId, userId)));
 		if (!existing) return reply.notFound();

-		if (existing.imageUrl) {
-			const imagePath = resolve(IMAGES_DIR, existing.imageUrl);
-			if (existsSync(imagePath)) unlinkSync(imagePath);
-		}
+		if (existing.imageUrl) removeImageFiles(IMAGES_DIR, existing.imageUrl);

 		const deleted = await db
 			.delete(medications)
@@ -719,24 +720,31 @@ export async function medicationRoutes(app: FastifyInstance) {
 		if (!existing) return reply.notFound();

 		const data = await req.file();
-		if (!data) return reply.badRequest("No file uploaded");
+		if (!data) return reply.status(400).send({ error: "No file uploaded", code: "NO_FILE" });

-		const allowedTypes = ["image/jpeg", "image/png", "image/webp", "image/gif"];
-		if (!allowedTypes.includes(data.mimetype)) {
-			return reply.badRequest("Invalid file type. Allowed: JPEG, PNG, WebP, GIF");
+		if (!ALLOWED_IMAGE_MIME_TYPES.includes(data.mimetype)) {
+			return reply.status(400).send({ error: "Invalid file type", code: "INVALID_TYPE" });
 		}

-		const ext = extname(data.filename) || ".jpg";
-		const filename = `med-${idNum}-${Date.now()}${ext}`;
-		const filepath = resolve(IMAGES_DIR, filename);
+		let uploadBuffer: Buffer;
+		try {
+			uploadBuffer = await streamToBuffer(data.file);
+		} catch (error) {
+			if (error instanceof Error && error.message === "IMAGE_TOO_LARGE") {
+				return reply.status(400).send({ error: "Image too large", code: "IMAGE_TOO_LARGE" });
+			}
+			throw error;
+		}

-		await pipeline(data.file, createWriteStream(filepath));
+		let filename: string;
+		try {
+			({ filename } = await writeOptimizedImageSet(IMAGES_DIR, `med-${idNum}`, uploadBuffer));
+		} catch {
+			return reply.status(400).send({ error: "Invalid image", code: "INVALID_IMAGE" });
+		}

 		// Delete old image if exists
-		if (existing.imageUrl) {
-			const oldPath = resolve(IMAGES_DIR, existing.imageUrl);
-			if (existsSync(oldPath)) unlinkSync(oldPath);
-		}
+		if (existing.imageUrl) removeImageFiles(IMAGES_DIR, existing.imageUrl);

 		await db
 			.update(medications)
@@ -758,10 +766,7 @@ export async function medicationRoutes(app: FastifyInstance) {
 			.where(and(eq(medications.id, idNum), eq(medications.userId, userId)));
 		if (!existing) return reply.notFound();

-		if (existing.imageUrl) {
-			const filepath = resolve(IMAGES_DIR, existing.imageUrl);
-			if (existsSync(filepath)) unlinkSync(filepath);
-		}
+		if (existing.imageUrl) removeImageFiles(IMAGES_DIR, existing.imageUrl);

 		await db
 			.update(medications)
@@ -63,7 +63,7 @@ export async function oidcRoutes(app: FastifyInstance) {
 	// ---------------------------------------------------------------------------
 	// GET /auth/oidc/login - Initiates OIDC flow
 	// ---------------------------------------------------------------------------
-	app.get("/auth/oidc/login", async (_request, reply) => {
+	app.get("/auth/oidc/login", async (request, reply) => {
 		try {
 			const config = await getOIDCConfig();

@@ -105,7 +105,7 @@ export async function oidcRoutes(app: FastifyInstance) {

 			return reply.redirect(authUrl.href);
 		} catch (err: unknown) {
-			console.error("[OIDC] Login error:", err);
+			request.log.error({ err }, "[OIDC] Login initialization failed");
 			return reply.redirect(`${getFrontendUrl()}/?error=oidc_init_failed`);
 		}
 	});
@@ -120,7 +120,7 @@ export async function oidcRoutes(app: FastifyInstance) {

 			// Handle OIDC provider errors
 			if (error) {
-				console.error(`[OIDC] Provider error: ${error} - ${error_description}`);
+				app.log.warn({ error, errorDescription: error_description }, "[OIDC] Provider returned error");
 				return reply.redirect(`${getFrontendUrl()}/?error=oidc_${error}`);
 			}

@@ -131,14 +131,14 @@ export async function oidcRoutes(app: FastifyInstance) {
 			// Verify state
 			const storedState = request.unsignCookie(request.cookies.oidc_state || "");
 			if (!storedState.valid || storedState.value !== state) {
-				console.error("[OIDC] State mismatch");
+				request.log.warn("[OIDC] State mismatch during callback validation");
 				return reply.redirect(`${getFrontendUrl()}/?error=oidc_state_mismatch`);
 			}

 			// Get code verifier
 			const storedVerifier = request.unsignCookie(request.cookies.oidc_code_verifier || "");
 			if (!storedVerifier.valid || !storedVerifier.value) {
-				console.error("[OIDC] Missing code verifier");
+				request.log.warn("[OIDC] Missing/invalid code verifier cookie");
 				return reply.redirect(`${getFrontendUrl()}/?error=oidc_missing_verifier`);
 			}

@@ -159,7 +159,7 @@ export async function oidcRoutes(app: FastifyInstance) {
 				// Get user info
 				const sub = tokens.claims()?.sub;
 				if (!sub) {
-					console.error("[OIDC] Missing sub claim in token");
+					request.log.error("[OIDC] Missing sub claim in token response");
 					return reply.redirect(`${getFrontendUrl()}/?error=oidc_missing_sub`);
 				}
 				const userInfo = await client.fetchUserInfo(config, tokens.access_token, sub);
@@ -174,7 +174,10 @@ export async function oidcRoutes(app: FastifyInstance) {
 				const oidcSubject = userInfo.sub;

 				if (!username || !oidcSubject) {
-					console.error("[OIDC] Missing required user info:", { username, oidcSubject });
+					request.log.error(
+						{ hasUsername: Boolean(username), hasOidcSubject: Boolean(oidcSubject) },
+						"[OIDC] Missing required user info"
+					);
 					return reply.redirect(`${getFrontendUrl()}/?error=oidc_missing_user_info`);
 				}

@@ -214,7 +217,7 @@ export async function oidcRoutes(app: FastifyInstance) {
 				const frontendUrl = env.CORS_ORIGINS.split(",")[0] || "http://localhost:5173";
 				return reply.redirect(`${frontendUrl}/dashboard`);
 			} catch (err: unknown) {
-				console.error("[OIDC] Callback error:", err);
+				request.log.error({ err }, "[OIDC] Callback processing failed");
 				return reply.redirect(`${getFrontendUrl()}/?error=oidc_callback_failed`);
 			}
 		}
@@ -255,7 +258,7 @@ async function findOrCreateOIDCUser(

 	// Check if auto-create is enabled
 	if (!env.OIDC_AUTO_CREATE_USERS) {
-		console.error(`[OIDC] User creation disabled and user not found: ${username}`);
+		// No logger is available in this helper, route-level logs already capture callback failures.
 		return null;
 	}

@@ -1,5 +1,5 @@
 import { randomBytes } from "node:crypto";
-import { eq } from "drizzle-orm";
+import { and, eq } from "drizzle-orm";
 import type { FastifyInstance, FastifyReply, FastifyRequest } from "fastify";
 import { z } from "zod";
 import { db } from "../db/client.js";
@@ -14,9 +14,6 @@ import {
 	personTakesMedication,
 } from "../utils/scheduler-utils.js";

-// Share token validity: 1 year in milliseconds
-const SHARE_TOKEN_VALIDITY_MS = 365 * 24 * 60 * 60 * 1000;
-
 // =============================================================================
 // Validation Schemas
 // =============================================================================
@@ -25,6 +22,11 @@ const createShareSchema = z.object({
 	scheduleDays: z.number().int().min(1).max(365).default(30),
 });

+function maskToken(token: string): string {
+	if (token.length <= 8) return token;
+	return `${token.slice(0, 4)}...${token.slice(-4)}`;
+}
+
 // Helper to get user ID from request
 // Returns anonymous user ID when auth is disabled
 async function getUserId(request: FastifyRequest, reply: FastifyReply): Promise<number> {
@@ -54,6 +56,7 @@ export async function shareRoutes(app: FastifyInstance) {
 		// Find share token
 		const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, token));
 		if (!share) {
+			request.log.warn(`[Share] Invalid share token requested: ${maskToken(token)}`);
 			return reply.status(404).send({
 				error: "Share link not found",
 				code: "NOT_FOUND",
@@ -62,6 +65,9 @@ export async function shareRoutes(app: FastifyInstance) {

 		// Check if token has expired
 		if (share.expiresAt && share.expiresAt.getTime() < Date.now()) {
+			request.log.warn(
+				`[Share] Expired token requested: ${maskToken(token)} (owner=${share.userId}, takenBy=${share.takenBy})`
+			);
 			// Get the username of the owner to show in the expired message
 			const [owner] = await db.select({ username: users.username }).from(users).where(eq(users.id, share.userId));
 			return reply.status(410).send({
@@ -197,25 +203,47 @@ export async function shareRoutes(app: FastifyInstance) {
 				});
 			}

-			// Generate unique token (8 bytes = 16 hex chars)
+			// Keep exactly one active share link per person/user.
+			// If a link already exists, return the same token and only update settings.
+			const [existingShare] = await db
+				.select()
+				.from(shareTokens)
+				.where(and(eq(shareTokens.userId, userId), eq(shareTokens.takenBy, takenBy)));
+
+			if (existingShare) {
+				await db.update(shareTokens).set({ scheduleDays, expiresAt: null }).where(eq(shareTokens.id, existingShare.id));
+
+				request.log.info(
+					`[Share] Reused existing share token (owner=${userId}, takenBy=${takenBy}, scheduleDays=${scheduleDays})`
+				);
+
+				return {
+					reused: true,
+					token: existingShare.token,
+					shareUrl: `/share/${existingShare.token}`,
+					expiresAt: null,
+				};
+			}
+
 			const token = randomBytes(8).toString("hex");

-			// Set expiration date (1 year from now)
-			const expiresAt = new Date(Date.now() + SHARE_TOKEN_VALIDITY_MS);
-
-			// Create share token
 			await db.insert(shareTokens).values({
-				userId: userId,
+				userId,
 				token,
 				takenBy,
 				scheduleDays,
-				expiresAt,
+				expiresAt: null,
 			});

+			request.log.info(
+				`[Share] Created new share token (owner=${userId}, takenBy=${takenBy}, scheduleDays=${scheduleDays})`
+			);
+
 			return {
+				reused: false,
 				token,
 				shareUrl: `/share/${token}`,
-				expiresAt: expiresAt.toISOString(),
+				expiresAt: null,
 			};
 		}
 	);
@@ -567,6 +567,15 @@ ${getFooterPlain(language)}${isRepeatDaily ? `\n\n${tr.stockReminder.repeatDaily
 }

 async function checkAndSendReminder(logger: ServiceLogger): Promise<void> {
+	// Track stock-scheduler daily execution separately from intake updates.
+	// This prevents intake reminders from suppressing stock catch-up after restarts.
+	const state = loadReminderState();
+	const today = getTodayInTimezone();
+	saveReminderState({
+		...state,
+		lastStockSchedulerCheckDate: today,
+	});
+
 	// Get all user settings to iterate over each user
 	const allUserSettings = await getAllUserSettings();

@@ -689,6 +698,7 @@ async function checkAndSendReminderForUser(
 						saveReminderState({
 							lastAutoEmailSent: new Date().toISOString(),
 							lastAutoEmailDate: today,
+							lastStockSchedulerCheckDate: currentState.lastStockSchedulerCheckDate,
 							notifiedMedications: [...new Set([...currentState.notifiedMedications, userStockNotifiedKey])],
 							nextScheduledCheck: currentState.nextScheduledCheck,
 							lastNotificationType: "stock",
@@ -892,6 +902,7 @@ async function checkAndSendReminderForUser(
 						saveReminderState({
 							lastAutoEmailSent: new Date().toISOString(),
 							lastAutoEmailDate: today,
+							lastStockSchedulerCheckDate: currentState.lastStockSchedulerCheckDate,
 							notifiedMedications: [...new Set([...currentState.notifiedMedications, userPrescriptionNotifiedKey])],
 							nextScheduledCheck: currentState.nextScheduledCheck,
 							lastNotificationType: "prescription",
@@ -947,9 +958,10 @@ export function startReminderScheduler(logger: ServiceLogger): void {
 	const today = getTodayInTimezone();
 	const currentHour = getCurrentHourInTimezone();

-	// If it's past REMINDER_HOUR today in the configured timezone and we haven't checked today, run immediately
-	if (currentHour >= REMINDER_HOUR && state.lastAutoEmailDate !== today) {
-		logger.info("[Reminder] Missed today's check, running now...");
+	// If it's past REMINDER_HOUR today in the configured timezone and we haven't checked today, run one catch-up.
+	// This is intentionally a single current-state snapshot (no replay of missed days).
+	if (currentHour >= REMINDER_HOUR && state.lastStockSchedulerCheckDate !== today) {
+		logger.info("[Reminder] Missed today's check, running one catch-up snapshot (no historical replay)...");
 		checkAndSendReminder(logger).catch((err) => logger.error(`[Reminder] Error: ${err}`));
 	}

@@ -245,6 +245,57 @@ describe("Auth Routes (AUTH_ENABLED=true)", () => {
 			expect(response.json().code).toBe("VALIDATION_ERROR");
 		});

+		it("should register with trimmed username when input has whitespace", async () => {
+			const response = await app.inject({
+				method: "POST",
+				url: "/auth/register",
+				payload: {
+					username: "  trimuser  ",
+					password: "TestPassword123",
+				},
+			});
+
+			expect(response.statusCode).toBe(201);
+			expect(response.json().user.username).toBe("trimuser");
+		});
+
+		it("should reject whitespace-only username on registration", async () => {
+			const response = await app.inject({
+				method: "POST",
+				url: "/auth/register",
+				payload: {
+					username: "   ",
+					password: "TestPassword123",
+				},
+			});
+
+			expect(response.statusCode).toBe(400);
+			expect(response.json().code).toBe("VALIDATION_ERROR");
+		});
+
+		it("should reject duplicate username even with surrounding whitespace", async () => {
+			await app.inject({
+				method: "POST",
+				url: "/auth/register",
+				payload: {
+					username: "spacedupe",
+					password: "TestPassword123",
+				},
+			});
+
+			const response = await app.inject({
+				method: "POST",
+				url: "/auth/register",
+				payload: {
+					username: "  spacedupe  ",
+					password: "AnotherPassword123",
+				},
+			});
+
+			expect(response.statusCode).toBe(409);
+			expect(response.json().code).toBe("USERNAME_EXISTS");
+		});
+
 		it("should reject invalid username characters", async () => {
 			const response = await app.inject({
 				method: "POST",
@@ -341,6 +392,35 @@ describe("Auth Routes (AUTH_ENABLED=true)", () => {
 			expect(response.json().code).toBe("INVALID_CREDENTIALS");
 		});

+		it("should login successfully when username has leading/trailing whitespace", async () => {
+			const response = await app.inject({
+				method: "POST",
+				url: "/auth/login",
+				payload: {
+					username: "  loginuser  ",
+					password: "TestPassword123",
+				},
+			});
+
+			expect(response.statusCode).toBe(200);
+			expect(response.json().ok).toBe(true);
+			expect(response.json().user.username).toBe("loginuser");
+		});
+
+		it("should reject whitespace-only username on login", async () => {
+			const response = await app.inject({
+				method: "POST",
+				url: "/auth/login",
+				payload: {
+					username: "   ",
+					password: "TestPassword123",
+				},
+			});
+
+			expect(response.statusCode).toBe(400);
+			expect(response.json().code).toBe("VALIDATION_ERROR");
+		});
+
 		it("should support rememberMe option", async () => {
 			const response = await app.inject({
 				method: "POST",
@@ -22,6 +22,7 @@ declare module "fastify" {

 	interface FastifyRequest {
 		user?: AuthUser | null;
+		correlationId?: string;
 	}
 }

@@ -0,0 +1,80 @@
+import { existsSync, unlinkSync } from "node:fs";
+import { writeFile } from "node:fs/promises";
+import { extname, resolve } from "node:path";
+import sharp from "sharp";
+
+export const ALLOWED_IMAGE_MIME_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"];
+export const MAX_IMAGE_UPLOAD_BYTES = 10 * 1024 * 1024;
+
+export function getThumbFilename(imageFilename: string): string {
+	const ext = extname(imageFilename);
+	const base = ext ? imageFilename.slice(0, -ext.length) : imageFilename;
+	return `${base}-thumb.webp`;
+}
+
+export function removeImageFiles(imagesDir: string, imageFilename: string): void {
+	const fullPath = resolve(imagesDir, imageFilename);
+	if (existsSync(fullPath)) unlinkSync(fullPath);
+
+	const thumbFilename = getThumbFilename(imageFilename);
+	if (thumbFilename !== imageFilename) {
+		const thumbPath = resolve(imagesDir, thumbFilename);
+		if (existsSync(thumbPath)) unlinkSync(thumbPath);
+	}
+}
+
+export async function streamToBuffer(stream: NodeJS.ReadableStream): Promise<Buffer> {
+	const chunks: Buffer[] = [];
+	let totalSize = 0;
+
+	for await (const chunk of stream) {
+		const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk);
+		totalSize += buffer.length;
+		if (totalSize > MAX_IMAGE_UPLOAD_BYTES) {
+			throw new Error("IMAGE_TOO_LARGE");
+		}
+		chunks.push(buffer);
+	}
+
+	return Buffer.concat(chunks);
+}
+
+export async function writeOptimizedImageSet(
+	imagesDir: string,
+	filePrefix: string,
+	uploadBuffer: Buffer,
+	options?: {
+		maxEdgePx?: number;
+		thumbSizePx?: number;
+		fullQuality?: number;
+		thumbQuality?: number;
+	}
+): Promise<{ filename: string; thumbFilename: string }> {
+	const maxEdgePx = options?.maxEdgePx ?? 1600;
+	const thumbSizePx = options?.thumbSizePx ?? 96;
+	const fullQuality = options?.fullQuality ?? 82;
+	const thumbQuality = options?.thumbQuality ?? 76;
+
+	const filename = `${filePrefix}-${Date.now()}.webp`;
+	const thumbFilename = getThumbFilename(filename);
+
+	const filepath = resolve(imagesDir, filename);
+	const thumbFilepath = resolve(imagesDir, thumbFilename);
+
+	const optimizedBuffer = await sharp(uploadBuffer, { failOn: "error" })
+		.rotate()
+		.resize({ width: maxEdgePx, height: maxEdgePx, fit: "inside", withoutEnlargement: true })
+		.webp({ quality: fullQuality })
+		.toBuffer();
+
+	const thumbBuffer = await sharp(uploadBuffer, { failOn: "error" })
+		.rotate()
+		.resize({ width: thumbSizePx, height: thumbSizePx, fit: "cover", position: "attention" })
+		.webp({ quality: thumbQuality })
+		.toBuffer();
+
+	await writeFile(filepath, optimizedBuffer);
+	await writeFile(thumbFilepath, thumbBuffer);
+
+	return { filename, thumbFilename };
+}
@@ -483,6 +483,7 @@ export function getUpcomingIntakes(
 export type ReminderState = {
 	lastAutoEmailSent: string | null;
 	lastAutoEmailDate: string | null;
+	lastStockSchedulerCheckDate: string | null;
 	notifiedMedications: string[];
 	nextScheduledCheck: string | null;
 	lastNotificationType: "stock" | "intake" | "prescription" | null;
@@ -505,6 +506,7 @@ export function createDefaultReminderState(): ReminderState {
 	return {
 		lastAutoEmailSent: null,
 		lastAutoEmailDate: null,
+		lastStockSchedulerCheckDate: null,
 		notifiedMedications: [],
 		nextScheduledCheck: null,
 		lastNotificationType: null,
@@ -524,6 +526,7 @@ export function parseReminderState(json: string): ReminderState {
 		return {
 			lastAutoEmailSent: saved.lastAutoEmailSent ?? null,
 			lastAutoEmailDate: saved.lastAutoEmailDate ?? null,
+			lastStockSchedulerCheckDate: saved.lastStockSchedulerCheckDate ?? null,
 			notifiedMedications: saved.notifiedMedications ?? [],
 			nextScheduledCheck: saved.nextScheduledCheck ?? null,
 			lastNotificationType: saved.lastNotificationType ?? null,
@@ -1,80 +0,0 @@
-# GitHub Project Setup
-
-This repository includes a GitHub Actions workflow that automatically adds new issues to a GitHub Project for tracking feature requests and bugs.
-
-## Setup Steps
-
-### 1. Create a GitHub Project
-
-1. Go to your GitHub profile → **Projects** → **New project**
-2. Choose the **Board** template (recommended for feature tracking)
-3. Name it e.g. **MedAssist-ng Roadmap**
-4. Configure the default columns:
-   - **Triage** – New issues land here
-   - **Backlog** – Accepted but not yet started
-   - **In Progress** – Currently being worked on
-   - **Done** – Completed
-
-### 2. Create a Personal Access Token (PAT)
-
-The workflow needs a token with project permissions. The built-in `GITHUB_TOKEN` does not support GitHub Projects.
-
-1. Go to **Settings** → **Developer settings** → **Personal access tokens** → **Fine-grained tokens**
-2. Click **Generate new token**
-3. Set:
-   - **Token name**: `add-to-project`
-   - **Expiration**: Choose an appropriate duration
-   - **Repository access**: Select **Only select repositories** → `DanielVolz/medassist-ng`
-   - **Permissions**:
-     - Repository permissions: **Issues** → Read
-     - Organization permissions (if applicable): **Projects** → Read and write
-   - For **user-owned projects**, you need a **classic** token with the `project` scope instead
-4. Copy the generated token
-
-### 3. Add Repository Secrets and Variables
-
-1. Go to the repository → **Settings** → **Secrets and variables** → **Actions**
-2. Add a **secret**:
-   - Name: `ADD_TO_PROJECT_PAT`
-   - Value: The PAT from step 2
-3. Add a **variable** (under the **Variables** tab):
-   - Name: `PROJECT_URL`
-   - Value: The full URL of your GitHub Project (e.g. `https://github.com/users/DanielVolz/projects/1`)
-
-### 4. Verify
-
-1. Create a test issue using the **✨ Feature Request** template
-2. Check the **Actions** tab to see the workflow run
-3. Verify the issue appears in your GitHub Project under **Triage**
-
-## How It Works
-
-The workflow (`.github/workflows/add-to-project.yml`) triggers when:
- A new issue is **opened**
- A label is **added** to an existing issue
-
-Issues with any of these labels are automatically added to the project:
- `enhancement` – Feature requests
- `bug` – Bug reports
- `triage` – New issues needing review
-
-Both the feature request and bug report issue templates automatically apply the `triage` label, so all new issues from templates are captured.
-
-## Customization
-
-### Adding more labels
-
-Edit `.github/workflows/add-to-project.yml` and add labels to the `labeled` field:
-
-```yaml
-labeled: enhancement, bug, triage, documentation
-```
-
-### Restricting to feature requests only
-
-Change the `labeled` field to only include `enhancement`:
-
-```yaml
-labeled: enhancement
-label-operator: OR
-```
@@ -0,0 +1,264 @@
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Tooltip Visibility Regression Tests
+ *
+ * Ensures that tooltip pseudo-elements on MedDetail footer icon buttons
+ * are not clipped by ancestor overflow or hidden behind modal overlays.
+ * This is a regression guard — tooltips have repeatedly broken due to
+ * CSS overflow/z-index changes on modal containers.
+ */
+test.describe("MedDetail footer tooltip visibility", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 60000 });
+
+	const MED_NAME = "Tooltip Test Med";
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		await deleteAllMedicationsViaAPI();
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_NAME,
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 1,
+				pillsPerBlister: 10,
+				looseTablets: 0,
+				intakes: [
+					{
+						usage: 1,
+						every: 1,
+						start: new Date().toISOString().slice(0, 16),
+						intakeRemindersEnabled: false,
+					},
+				],
+			})
+		);
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	/**
+	 * Open the MedDetail modal by clicking a medication row in the Dashboard overview table.
+	 */
+	async function openMedDetailModal(page: import("@playwright/test").Page) {
+		await navigateTo(page, "/dashboard");
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		const medRow = overviewTable.locator(".table-row").filter({ hasText: MED_NAME }).first();
+		await medRow.click();
+
+		const modal = page.locator(".modal-overlay.med-detail-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+		return modal;
+	}
+
+	test("no ancestor of footer tooltip buttons has overflow:hidden", async ({ page }) => {
+		const modal = await openMedDetailModal(page);
+
+		const footer = modal.locator(".med-detail-footer");
+		await expect(footer).toBeVisible();
+
+		// Walk up from footer through modal-content to modal-overlay and check overflow
+		const overflowHiddenAncestors = await page.evaluate(() => {
+			const footer = document.querySelector(".med-detail-footer");
+			if (!footer) return ["footer not found"];
+
+			const problems: string[] = [];
+			let el: HTMLElement | null = footer as HTMLElement;
+			while (el && !el.classList.contains("modal-overlay")) {
+				const computed = window.getComputedStyle(el);
+				const overflowX = computed.overflowX;
+				const overflowY = computed.overflowY;
+				if (overflowX === "hidden" || overflowY === "hidden") {
+					const id = el.id ? `#${el.id}` : "";
+					const cls = el.className ? `.${el.className.split(" ").join(".")}` : "";
+					problems.push(`${el.tagName.toLowerCase()}${id}${cls} has overflow: ${overflowX}/${overflowY}`);
+				}
+				el = el.parentElement;
+			}
+			return problems;
+		});
+
+		expect(
+			overflowHiddenAncestors,
+			`Tooltip ancestors must not clip with overflow:hidden: ${overflowHiddenAncestors.join("; ")}`
+		).toHaveLength(0);
+	});
+
+	test("tooltip z-index is above modal overlay", async ({ page }) => {
+		const _modal = await openMedDetailModal(page);
+
+		// Get modal overlay z-index and tooltip pseudo-element z-index from CSS
+		const { modalZIndex, tooltipZIndex, arrowZIndex } = await page.evaluate(() => {
+			const overlay = document.querySelector(".modal-overlay");
+			const overlayZ = overlay ? Number.parseInt(window.getComputedStyle(overlay).zIndex, 10) : 0;
+
+			// Read the tooltip ::after z-index from stylesheets
+			let ttZ = 0;
+			let arrZ = 0;
+			for (const sheet of document.styleSheets) {
+				try {
+					for (const rule of sheet.cssRules) {
+						const cssRule = rule as CSSStyleRule;
+						if (cssRule.selectorText?.includes("tooltip-trigger[data-tooltip]::after")) {
+							const z = Number.parseInt(cssRule.style.zIndex, 10);
+							if (z > ttZ) ttZ = z;
+						}
+						if (cssRule.selectorText?.includes("tooltip-trigger[data-tooltip]::before")) {
+							const z = Number.parseInt(cssRule.style.zIndex, 10);
+							if (z > arrZ) arrZ = z;
+						}
+					}
+				} catch {
+					// cross-origin sheets — skip
+				}
+			}
+			return { modalZIndex: overlayZ, tooltipZIndex: ttZ, arrowZIndex: arrZ };
+		});
+
+		expect(
+			tooltipZIndex,
+			`Tooltip ::after z-index (${tooltipZIndex}) must be > modal overlay z-index (${modalZIndex})`
+		).toBeGreaterThan(modalZIndex);
+		expect(
+			arrowZIndex,
+			`Tooltip ::before z-index (${arrowZIndex}) must be > modal overlay z-index (${modalZIndex})`
+		).toBeGreaterThan(modalZIndex);
+	});
+
+	test("edit button tooltip is visible on hover", async ({ page }) => {
+		const modal = await openMedDetailModal(page);
+
+		const editBtn = modal.locator(".med-detail-footer button.tooltip-trigger.info.icon-only");
+		await expect(editBtn).toBeVisible();
+
+		// Hover to activate tooltip
+		await editBtn.hover();
+		// Small wait for CSS transition
+		await page.waitForTimeout(300);
+
+		// Verify the tooltip pseudo-element is visible and within viewport
+		const isVisible = await page.evaluate(() => {
+			const btn = document.querySelector(".med-detail-footer button.tooltip-trigger.info.icon-only");
+			if (!btn) return { visible: false, reason: "button not found" };
+
+			const style = window.getComputedStyle(btn, "::after");
+			const opacity = Number.parseFloat(style.opacity);
+			const visibility = style.visibility;
+
+			if (opacity < 0.5 || visibility === "hidden") {
+				return {
+					visible: false,
+					reason: `opacity=${opacity}, visibility=${visibility}`,
+				};
+			}
+			return { visible: true, reason: "ok" };
+		});
+
+		expect(isVisible.visible, `Edit tooltip should be visible on hover: ${isVisible.reason}`).toBe(true);
+	});
+
+	test("stock correction button tooltip is visible on hover", async ({ page }) => {
+		const modal = await openMedDetailModal(page);
+
+		const stockBtn = modal.locator(".med-detail-footer button.tooltip-trigger.icon-stock-correction");
+		await expect(stockBtn).toBeVisible();
+
+		await stockBtn.hover();
+		await page.waitForTimeout(300);
+
+		const isVisible = await page.evaluate(() => {
+			const btn = document.querySelector(".med-detail-footer button.tooltip-trigger.icon-stock-correction");
+			if (!btn) return { visible: false, reason: "button not found" };
+
+			const style = window.getComputedStyle(btn, "::after");
+			const opacity = Number.parseFloat(style.opacity);
+			const visibility = style.visibility;
+
+			if (opacity < 0.5 || visibility === "hidden") {
+				return {
+					visible: false,
+					reason: `opacity=${opacity}, visibility=${visibility}`,
+				};
+			}
+			return { visible: true, reason: "ok" };
+		});
+
+		expect(isVisible.visible, `Stock correction tooltip should be visible on hover: ${isVisible.reason}`).toBe(true);
+	});
+
+	test("export button tooltip is visible on hover", async ({ page }) => {
+		const modal = await openMedDetailModal(page);
+
+		const exportBtn = modal.locator(".med-detail-footer button.tooltip-trigger.secondary.icon-only");
+		// Export button only shows when blisters exist — skip if not present
+		if (!(await exportBtn.isVisible().catch(() => false))) {
+			test.skip(true, "Export button not visible (no blisters)");
+			return;
+		}
+
+		await exportBtn.hover();
+		await page.waitForTimeout(300);
+
+		const isVisible = await page.evaluate(() => {
+			const btn = document.querySelector(".med-detail-footer button.tooltip-trigger.secondary.icon-only");
+			if (!btn) return { visible: false, reason: "button not found" };
+
+			const style = window.getComputedStyle(btn, "::after");
+			const opacity = Number.parseFloat(style.opacity);
+			const visibility = style.visibility;
+
+			if (opacity < 0.5 || visibility === "hidden") {
+				return {
+					visible: false,
+					reason: `opacity=${opacity}, visibility=${visibility}`,
+				};
+			}
+			return { visible: true, reason: "ok" };
+		});
+
+		expect(isVisible.visible, `Export tooltip should be visible on hover: ${isVisible.reason}`).toBe(true);
+	});
+
+	test("close button tooltip in header is visible on hover", async ({ page }) => {
+		const modal = await openMedDetailModal(page);
+
+		const closeBtn = modal.locator("button.modal-close.tooltip-trigger");
+		await expect(closeBtn).toBeVisible();
+
+		await closeBtn.hover();
+		await page.waitForTimeout(300);
+
+		const isVisible = await page.evaluate(() => {
+			const btn = document.querySelector(".med-detail-overlay button.modal-close.tooltip-trigger");
+			if (!btn) return { visible: false, reason: "button not found" };
+
+			const style = window.getComputedStyle(btn, "::after");
+			const opacity = Number.parseFloat(style.opacity);
+			const visibility = style.visibility;
+
+			if (opacity < 0.5 || visibility === "hidden") {
+				return {
+					visible: false,
+					reason: `opacity=${opacity}, visibility=${visibility}`,
+				};
+			}
+			return { visible: true, reason: "ok" };
+		});
+
+		expect(isVisible.visible, `Close button tooltip should be visible on hover: ${isVisible.reason}`).toBe(true);
+	});
+});
@@ -6,7 +6,6 @@
    <title>MedAssist-ng</title>
    
    <!-- Favicons -->
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
@@ -14,7 +13,7 @@
    
    <!-- Theme color -->
    <meta name="theme-color" content="#0f172a" />
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  </head>
  <body>
@@ -14,6 +14,8 @@ server {
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Content-Security-Policy "default-src 'self'; base-uri 'self'; frame-ancestors 'self'; object-src 'none'; script-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: blob:; connect-src 'self' https://api.github.com; frame-src 'self'; form-action 'self'; upgrade-insecure-requests" always;
+    add_header Permissions-Policy "camera=(), microphone=(), geolocation=(), payment=(), usb=(), accelerometer=(), gyroscope=(), magnetometer=()" always;

    # Allow larger file uploads (for medication images and data import/export)
    client_max_body_size 50M;
@@ -1,24 +1,24 @@
 {
  "name": "medassist-ng-frontend",
-  "version": "1.14.2",
+  "version": "1.15.1",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "medassist-ng-frontend",
-      "version": "1.14.2",
+      "version": "1.15.1",
      "dependencies": {
-        "i18next": "^25.8.10",
+        "i18next": "^25.8.13",
        "i18next-browser-languagedetector": "^8.2.1",
-        "lucide-react": "^0.574.0",
+        "lucide-react": "^0.575.0",
        "react": "^18.3.1",
        "react-dom": "^18.3.1",
        "react-i18next": "^15.4.1",
-        "react-router-dom": "^7.13.0",
+        "react-router-dom": "^7.13.1",
        "zod": "^4.3.6"
      },
      "devDependencies": {
-        "@biomejs/biome": "^2.4.1",
+        "@biomejs/biome": "^2.4.4",
        "@playwright/test": "^1.58.2",
        "@testing-library/jest-dom": "^6.9.1",
        "@testing-library/react": "^16.3.2",
@@ -406,9 +406,9 @@
      }
    },
    "node_modules/@biomejs/biome": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.1.tgz",
-      "integrity": "sha512-8c5DZQl1hfpLRlTZ21W5Ef2R314E4UJUEtkMbo303ElTVe6fYtapwldv7tZlgwm+9YP0Mhk7dUSTkOY8nQ2/2w==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.4.tgz",
+      "integrity": "sha512-tigwWS5KfJf0cABVd52NVaXyAVv4qpUXOWJ1rxFL8xF1RVoeS2q/LK+FHgYoKMclJCuRoCWAPy1IXaN9/mS61Q==",
      "dev": true,
      "license": "MIT OR Apache-2.0",
      "bin": {
@@ -422,20 +422,20 @@
        "url": "https://opencollective.com/biome"
      },
      "optionalDependencies": {
-        "@biomejs/cli-darwin-arm64": "2.4.1",
-        "@biomejs/cli-darwin-x64": "2.4.1",
-        "@biomejs/cli-linux-arm64": "2.4.1",
-        "@biomejs/cli-linux-arm64-musl": "2.4.1",
-        "@biomejs/cli-linux-x64": "2.4.1",
-        "@biomejs/cli-linux-x64-musl": "2.4.1",
-        "@biomejs/cli-win32-arm64": "2.4.1",
-        "@biomejs/cli-win32-x64": "2.4.1"
+        "@biomejs/cli-darwin-arm64": "2.4.4",
+        "@biomejs/cli-darwin-x64": "2.4.4",
+        "@biomejs/cli-linux-arm64": "2.4.4",
+        "@biomejs/cli-linux-arm64-musl": "2.4.4",
+        "@biomejs/cli-linux-x64": "2.4.4",
+        "@biomejs/cli-linux-x64-musl": "2.4.4",
+        "@biomejs/cli-win32-arm64": "2.4.4",
+        "@biomejs/cli-win32-x64": "2.4.4"
      }
    },
    "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.1.tgz",
-      "integrity": "sha512-wKiX2znbgFRaivRplSbu53hiREp1ohlGRuWqOL90IPetLi5E32tkiMYu8uSLXVzDgbIVM58WsesPaczIVtJkOQ==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.4.tgz",
+      "integrity": "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A==",
      "cpu": [
        "arm64"
      ],
@@ -450,9 +450,9 @@
      }
    },
    "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.1.tgz",
-      "integrity": "sha512-rxLYVg3skeXh9K0om7JdkKcCdvtqrF9ECZ7dsmLuYObboK7DZ1J0z6xc2NGKSXw+cEQo3ie6NQgWBcdGJ16yQg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.4.tgz",
+      "integrity": "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg==",
      "cpu": [
        "x64"
      ],
@@ -467,9 +467,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.1.tgz",
-      "integrity": "sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.4.tgz",
+      "integrity": "sha512-V/NFfbWhsUU6w+m5WYbBenlEAz8eYnSqRMDMAW3K+3v0tYVkNyZn8VU0XPxk/lOqNXLSCCrV7FmV/u3SjCBShg==",
      "cpu": [
        "arm64"
      ],
@@ -484,9 +484,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-arm64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.1.tgz",
-      "integrity": "sha512-Brwh/QL3wfX5UyZcyEamS1Q+EF8Q7ud+MS5mq/9BWX2ArfxQlgsqlukwK92xrGpXWcspXkSG9U0CoxvCZZkTKQ==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.4.tgz",
+      "integrity": "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ==",
      "cpu": [
        "arm64"
      ],
@@ -501,9 +501,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.1.tgz",
-      "integrity": "sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.4.tgz",
+      "integrity": "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg==",
      "cpu": [
        "x64"
      ],
@@ -518,9 +518,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.1.tgz",
-      "integrity": "sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.4.tgz",
+      "integrity": "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g==",
      "cpu": [
        "x64"
      ],
@@ -535,9 +535,9 @@
      }
    },
    "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.1.tgz",
-      "integrity": "sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.4.tgz",
+      "integrity": "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q==",
      "cpu": [
        "arm64"
      ],
@@ -552,9 +552,9 @@
      }
    },
    "node_modules/@biomejs/cli-win32-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.1.tgz",
-      "integrity": "sha512-kfjOCzvaHC7olg8pmEuSsYzHntxdipkAGzr5nFiaEU2EPDWRE/myqUBaFDl9pHqEc8yEtQFiXF945PlTSkuOTw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.4.tgz",
+      "integrity": "sha512-gnOHKVPFAAPrpoPt2t+Q6FZ7RPry/FDV3GcpU53P3PtLNnQjBmKyN2Vh/JtqXet+H4pme8CC76rScwdjDcT1/A==",
      "cpu": [
        "x64"
      ],
@@ -2460,9 +2460,9 @@
      }
    },
    "node_modules/i18next": {
-      "version": "25.8.10",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.10.tgz",
-      "integrity": "sha512-CtPJLMAz1G8sxo+mIzfBjGgLxWs7d6WqIjlmmv9BTsOat4pJIfwZ8cm07n3kFS6bP9c6YwsYutYrwsEeJVBo2g==",
+      "version": "25.8.13",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.13.tgz",
+      "integrity": "sha512-E0vzjBY1yM+nsFrtgkjLhST2NBkirkvOVoQa0MSldhsuZ3jUge7ZNpuwG0Cfc74zwo5ZwRzg3uOgT+McBn32iA==",
      "funding": [
        {
          "type": "individual",
@@ -2651,9 +2651,9 @@
      }
    },
    "node_modules/lucide-react": {
-      "version": "0.574.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.574.0.tgz",
-      "integrity": "sha512-dJ8xb5juiZVIbdSn3HTyHsjjIwUwZ4FNwV0RtYDScOyySOeie1oXZTymST6YPJ4Qwt3Po8g4quhYl4OxtACiuQ==",
+      "version": "0.575.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
+      "integrity": "sha512-VuXgKZrk0uiDlWjGGXmKV6MSk9Yy4l10qgVvzGn2AWBx1Ylt0iBexKOAoA6I7JO3m+M9oeovJd3yYENfkUbOeg==",
      "license": "ISC",
      "peerDependencies": {
        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -2994,9 +2994,9 @@
      }
    },
    "node_modules/react-router": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
-      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.1.tgz",
+      "integrity": "sha512-td+xP4X2/6BJvZoX6xw++A2DdEi++YypA69bJUV5oVvqf6/9/9nNlD70YO1e9d3MyamJEBQFEzk6mbfDYbqrSA==",
      "license": "MIT",
      "dependencies": {
        "cookie": "^1.0.1",
@@ -3016,12 +3016,12 @@
      }
    },
    "node_modules/react-router-dom": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
-      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "version": "7.13.1",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.1.tgz",
+      "integrity": "sha512-UJnV3Rxc5TgUPJt2KJpo1Jpy0OKQr0AjgbZzBFjaPJcFOb2Y8jA5H3LT8HUJAiRLlWrEXWHbF1Z4SCZaQjWDHw==",
      "license": "MIT",
      "dependencies": {
-        "react-router": "7.13.0"
+        "react-router": "7.13.1"
      },
      "engines": {
        "node": ">=20.0.0"
@@ -1,7 +1,7 @@
 {
  "name": "medassist-ng-frontend",
  "private": true,
-  "version": "1.14.3",
+  "version": "1.16.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -25,17 +25,17 @@
    "test:e2e:report": "playwright show-report"
  },
  "dependencies": {
-    "i18next": "^25.8.10",
+    "i18next": "^25.8.13",
    "i18next-browser-languagedetector": "^8.2.1",
-    "lucide-react": "^0.574.0",
+    "lucide-react": "^0.575.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-i18next": "^15.4.1",
-    "react-router-dom": "^7.13.0",
+    "react-router-dom": "^7.13.1",
    "zod": "^4.3.6"
  },
  "devDependencies": {
-    "@biomejs/biome": "^2.4.1",
+    "@biomejs/biome": "^2.4.4",
    "@playwright/test": "^1.58.2",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
-import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom";
 import {
 	AboutModal,
 	Lightbox,
@@ -12,6 +12,7 @@ import {
 import { AppHeader } from "./components/AppHeader";
 import { AuthPage, AuthProvider, useAuth } from "./components/Auth";
 import { AppProvider, UnsavedChangesProvider, useAppContext } from "./context";
+import { useScrollLock } from "./hooks/useScrollLock";
 import { DashboardPage, MedicationsPage, PlannerPage, SchedulePage, SettingsPage } from "./pages";

 // Vite injects this at build time from package.json
@@ -113,6 +114,7 @@ function AppRouter() {

 function AppContent() {
 	const navigate = useNavigate();
+	const location = useLocation();
 	// Get shared state from AppContext
 	const ctx = useAppContext();
 	const {
@@ -188,6 +190,9 @@ function AppContent() {
 	// Local-only state (not shared across components)
 	const [showProfile, setShowProfile] = useState(false);
 	const [showAbout, setShowAbout] = useState(false);
+	const [routeTransitionMaskActive, setRouteTransitionMaskActive] = useState(false);
+	const routeTransitionMinEndRef = useRef(0);
+	const routeTransitionFallbackTimerRef = useRef<number | null>(null);
 	const closeProfile = useCallback(() => {
 		if (showProfile) {
 			window.history.back();
@@ -203,55 +208,6 @@ function AppContent() {
 	// Get centralized stockThresholds from context
 	const { stockThresholds } = ctx;

-	// Close modal on Escape key
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape") {
-				// Close modals in order of priority (topmost first)
-				if (scheduleLightboxImage) {
-					closeScheduleLightbox();
-				} else if (showImageLightbox) {
-					closeImageLightbox();
-				} else if (showEditStockModal) {
-					closeEditStockModal();
-				} else if (showRefillModal) {
-					closeRefillModal();
-				} else if (showShareDialog) {
-					closeShareDialog();
-				} else if (showAbout) {
-					closeAbout();
-				} else if (showProfile) {
-					closeProfile();
-				} else if (selectedUser) {
-					closeUserFilter();
-				} else if (selectedMed) {
-					closeMedDetail();
-				}
-			}
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [
-		selectedMed,
-		showImageLightbox,
-		scheduleLightboxImage,
-		selectedUser,
-		showProfile,
-		showAbout,
-		showShareDialog,
-		showRefillModal,
-		showEditStockModal,
-		closeAbout,
-		closeEditStockModal,
-		closeImageLightbox,
-		closeMedDetail,
-		closeProfile,
-		closeRefillModal,
-		closeScheduleLightbox,
-		closeShareDialog,
-		closeUserFilter,
-	]);
-
 	// Handle browser back button to close modals (in priority order)
 	useEffect(() => {
 		const handlePopState = () => {
@@ -340,21 +296,86 @@ function AppContent() {
 		};
 	}, []);

-	// Prevent background scroll when modal is open
+	// Global Escape handling in priority order.
+	// This keeps behavior consistent even when child modals are mocked in tests.
 	useEffect(() => {
-		const isModalOpen = selectedMed || selectedUser || showProfile || showAbout || showShareDialog;
-		if (isModalOpen) {
-			document.documentElement.classList.add("modal-open");
-			document.body.classList.add("modal-open");
-		} else {
-			document.documentElement.classList.remove("modal-open");
-			document.body.classList.remove("modal-open");
-		}
-		return () => {
-			document.documentElement.classList.remove("modal-open");
-			document.body.classList.remove("modal-open");
+		const handleEscape = (e: KeyboardEvent) => {
+			if (e.key !== "Escape") return;
+
+			if (scheduleLightboxImage) {
+				closeScheduleLightbox();
+				return;
+			}
+			if (showImageLightbox) {
+				closeImageLightbox();
+				return;
+			}
+			if (showEditStockModal) {
+				closeEditStockModal();
+				return;
+			}
+			if (showRefillModal) {
+				closeRefillModal();
+				return;
+			}
+			if (showShareDialog) {
+				closeShareDialog();
+				return;
+			}
+			if (showAbout) {
+				closeAbout();
+				return;
+			}
+			if (showProfile) {
+				closeProfile();
+				return;
+			}
+			if (selectedUser) {
+				closeUserFilter();
+				return;
+			}
+			if (selectedMed) {
+				closeMedDetail();
+			}
 		};
-	}, [selectedMed, selectedUser, showProfile, showAbout, showShareDialog]);
+
+		document.addEventListener("keydown", handleEscape);
+		return () => document.removeEventListener("keydown", handleEscape);
+	}, [
+		showImageLightbox,
+		scheduleLightboxImage,
+		showEditStockModal,
+		showRefillModal,
+		showShareDialog,
+		showAbout,
+		showProfile,
+		selectedUser,
+		selectedMed,
+		closeImageLightbox,
+		closeScheduleLightbox,
+		closeEditStockModal,
+		closeRefillModal,
+		closeShareDialog,
+		closeAbout,
+		closeProfile,
+		closeUserFilter,
+		closeMedDetail,
+	]);
+
+	// Prevent background scroll when any modal is open
+	useScrollLock(
+		!!(
+			selectedMed ||
+			selectedUser ||
+			showProfile ||
+			showAbout ||
+			showShareDialog ||
+			showRefillModal ||
+			showEditStockModal ||
+			showImageLightbox ||
+			scheduleLightboxImage
+		)
+	);

 	// Update selectedMed when meds change (e.g., after refill)
 	useEffect(() => {
@@ -383,9 +404,57 @@ function AppContent() {
 		await ctx.submitRefill(medId, null, () => {}, loadMeds, usePrescription);
 	};

+	useEffect(() => {
+		if (!routeTransitionMaskActive) return;
+		if (location.pathname !== "/medications") return;
+
+		const hasEditMedIdParam = new URLSearchParams(location.search).has("editMedId");
+		if (hasEditMedIdParam) return;
+
+		const remaining = Math.max(0, routeTransitionMinEndRef.current - performance.now());
+		const timer = window.setTimeout(() => setRouteTransitionMaskActive(false), remaining);
+		return () => window.clearTimeout(timer);
+	}, [location.pathname, location.search, routeTransitionMaskActive]);
+
+	useEffect(() => {
+		const handleEditTransitionReady = () => {
+			if (!routeTransitionMaskActive) return;
+			const remaining = Math.max(0, routeTransitionMinEndRef.current - performance.now());
+			window.setTimeout(() => {
+				setRouteTransitionMaskActive(false);
+				if (routeTransitionFallbackTimerRef.current !== null) {
+					window.clearTimeout(routeTransitionFallbackTimerRef.current);
+					routeTransitionFallbackTimerRef.current = null;
+				}
+			}, remaining);
+		};
+
+		window.addEventListener("medassist:edit-transition-ready", handleEditTransitionReady);
+		return () => {
+			window.removeEventListener("medassist:edit-transition-ready", handleEditTransitionReady);
+		};
+	}, [routeTransitionMaskActive]);
+
+	useEffect(() => {
+		return () => {
+			if (routeTransitionFallbackTimerRef.current !== null) {
+				window.clearTimeout(routeTransitionFallbackTimerRef.current);
+			}
+		};
+	}, []);
+
 	const handleOpenMedicationEdit = () => {
 		if (!selectedMed) return;
 		const medId = selectedMed.id;
+		routeTransitionMinEndRef.current = performance.now() + 80;
+		setRouteTransitionMaskActive(true);
+		if (routeTransitionFallbackTimerRef.current !== null) {
+			window.clearTimeout(routeTransitionFallbackTimerRef.current);
+		}
+		routeTransitionFallbackTimerRef.current = window.setTimeout(() => {
+			setRouteTransitionMaskActive(false);
+			routeTransitionFallbackTimerRef.current = null;
+		}, 700);
 		setShowImageLightbox(false);
 		setShowRefillModal(false);
 		setShowEditStockModal(false);
@@ -508,6 +577,8 @@ function AppContent() {
 			{scheduleLightboxImage && (
 				<Lightbox src={scheduleLightboxImage} alt="Medication" onClose={closeScheduleLightbox} />
 			)}
+
+			<div className={`route-transition-mask${routeTransitionMaskActive ? " active" : ""}`} aria-hidden="true" />
 		</main>
 	);
 }
@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { FRONTEND_VERSION, GITHUB_URL } from "../App";
+import { useEscapeKey } from "../hooks/useEscapeKey";

 interface UpdateCheckResult {
 	status: "up-to-date" | "update-available" | "error";
@@ -17,6 +18,8 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
 	const [isChecking, setIsChecking] = useState(false);
 	const [updateCheckResult, setUpdateCheckResult] = useState<UpdateCheckResult | null>(null);

+	useEscapeKey(isOpen, onClose);
+
 	// Reset check result when modal opens so stale results are never shown
 	useEffect(() => {
 		if (isOpen) {
@@ -55,20 +58,22 @@ export default function AboutModal({ isOpen, onClose }: AboutModalProps) {
 			className="modal-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content about-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 			>
 				<button className="modal-close" onClick={onClose}>
 					×
 				</button>
 				<div className="about-header">
 					<div className="about-logo">
-						<img src="/favicon.svg" alt="MedAssist-ng" />
+						<img src="/app-logo.png" alt="MedAssist-ng" />
 					</div>
 					<h2>{t("about.appName", "MedAssist-ng")}</h2>
 					<p className="about-tagline">{t("about.description", "Personal medication tracking and reminder app")}</p>
@@ -73,7 +73,7 @@ export function AppHeader({ onOpenProfile, onOpenAbout }: AppHeaderProps) {
 	return (
 		<header className="hero">
 			<div className="hero-title">
-				<img src="/favicon.svg" alt="MedAssist-ng" className="hero-logo" />
+				<img src="/app-logo.png" alt="MedAssist-ng" className="hero-logo" />
 				<div>
 					<p className="eyebrow">{pageInfo.eyebrow}</p>
 					<h1>{pageInfo.title}</h1>
@@ -1,6 +1,9 @@
 /* biome-ignore-all lint/correctness/useExhaustiveDependencies: auth refresh callbacks intentionally coordinate via refs/guards */
 import { createContext, type ReactNode, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useEscapeKey } from "../hooks/useEscapeKey";
+import { withCorrelation } from "../utils/correlation";
+import { MAX_IMAGE_UPLOAD_BYTES, resolveImageUploadError } from "../utils/image-upload";
 import { log } from "../utils/logger";
 import { ConfirmModal } from "./ConfirmModal";
 import { PasswordInput } from "./PasswordInput";
@@ -61,7 +64,6 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 	const [authState, setAuthState] = useState<AuthState | null>(null);
 	const [loading, setLoading] = useState(true);
 	const [authError, setAuthError] = useState<string | null>(null);
-
 	// Track if initial fetch has been done to prevent duplicate calls
 	const initialFetchDone = useRef(false);

@@ -95,10 +97,13 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 	async function fetchAuthState(retryCount = 0) {
 		const maxRetries = 3;
 		const retryDelay = 1000; // 1 second
+		let correlationId: string | null = null;

 		try {
 			setAuthError(null);
-			const res = await fetch("/api/auth/state");
+			const correlated = withCorrelation(undefined, "fe-auth-state");
+			correlationId = correlated.correlationId;
+			const res = await fetch("/api/auth/state", correlated.init);
 			if (!res.ok) {
 				throw new Error(`Server error: ${res.status}`);
 			}
@@ -111,7 +116,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 			}
 			setLoading(false);
 		} catch (err) {
-			log.error(`Failed to fetch auth state (attempt ${retryCount + 1}/${maxRetries + 1}):`, err);
+			log.error(`Failed to fetch auth state (attempt ${retryCount + 1}/${maxRetries + 1}):`, err, {
+				correlationId,
+			});

 			// Retry on connection errors or 5xx errors (server might be restarting)
 			if (retryCount < maxRetries) {
@@ -126,27 +133,38 @@ export function AuthProvider({ children }: { children: ReactNode }) {

 	async function refreshUser() {
 		try {
-			const res = await fetch("/api/auth/me", { credentials: "include" });
+			const { correlationId, init } = withCorrelation({ credentials: "include" }, "fe-auth-me");
+			const res = await fetch("/api/auth/me", init);
 			if (res.ok) {
 				const userData = await res.json();
 				setUser(userData);
+				log.debug("[Auth] Session user loaded", { userId: userData.id, correlationId });
 			} else if (res.status === 401) {
 				// Access token expired - try to refresh it
+				log.info("[Auth] Access token invalid, attempting refresh", { correlationId });
 				const refreshed = await tryRefreshToken();
 				if (refreshed) {
 					// Retry /auth/me with new token
-					const retryRes = await fetch("/api/auth/me", { credentials: "include" });
+					const retry = withCorrelation({ credentials: "include" }, "fe-auth-me-retry");
+					const retryRes = await fetch("/api/auth/me", retry.init);
 					if (retryRes.ok) {
 						const userData = await retryRes.json();
 						setUser(userData);
+						log.info("[Auth] Session restored after token refresh", {
+							userId: userData.id,
+							correlationId: retry.correlationId,
+						});
 						return;
 					}
 				}
+				log.warn("[Auth] Session refresh failed, clearing local user state", { correlationId });
 				setUser(null);
 			} else {
+				log.warn("[Auth] Unexpected /auth/me response", { status: res.status, correlationId });
 				setUser(null);
 			}
-		} catch {
+		} catch (error) {
+			log.error("[Auth] Failed to refresh user", { error });
 			setUser(null);
 		}
 	}
@@ -154,31 +172,46 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 	// Try to refresh the access token using the refresh token
 	async function tryRefreshToken(): Promise<boolean> {
 		try {
-			const res = await fetch("/api/auth/refresh", {
-				method: "POST",
-				credentials: "include",
-			});
+			const { correlationId, init } = withCorrelation(
+				{
+					method: "POST",
+					credentials: "include",
+				},
+				"fe-auth-refresh"
+			);
+			const res = await fetch("/api/auth/refresh", init);
+			if (!res.ok) {
+				log.warn("[Auth] Token refresh rejected", { status: res.status, correlationId });
+			}
 			return res.ok;
-		} catch {
+		} catch (error) {
+			log.error("[Auth] Token refresh request failed", { error });
 			return false;
 		}
 	}

 	async function login(username: string, password: string, rememberMe: boolean = false) {
-		const res = await fetch("/api/auth/login", {
-			method: "POST",
-			headers: { "Content-Type": "application/json" },
-			credentials: "include",
-			body: JSON.stringify({ username, password, rememberMe }),
-		});
+		const { correlationId, init } = withCorrelation(
+			{
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+				body: JSON.stringify({ username, password, rememberMe }),
+			},
+			"fe-auth-login"
+		);
+		log.info("[Auth] Login requested", { username, rememberMe, correlationId });
+		const res = await fetch("/api/auth/login", init);

 		if (!res.ok) {
 			const data = await res.json();
+			log.warn("[Auth] Login failed", { username, status: res.status, code: data.code, correlationId });
 			throw new Error(data.error || "Login failed");
 		}

 		const data = await res.json();
 		setUser(data.user);
+		log.info("[Auth] Login successful", { userId: data.user?.id, username: data.user?.username, correlationId });
 	}

 	async function register(username: string, password: string) {
@@ -202,11 +235,17 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 	}

 	async function logout() {
-		await fetch("/api/auth/logout", {
-			method: "POST",
-			credentials: "include",
-		});
+		const { correlationId, init } = withCorrelation(
+			{
+				method: "POST",
+				credentials: "include",
+			},
+			"fe-auth-logout"
+		);
+		log.info("[Auth] Logout requested", { userId: user?.id ?? null, correlationId });
+		await fetch("/api/auth/logout", init);
 		setUser(null);
+		log.info("[Auth] Logout completed", { correlationId });
 	}

 	async function updateProfile(data: { currentPassword?: string; newPassword?: string }) {
@@ -237,8 +276,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 		});

 		if (!res.ok) {
-			const err = await res.json().catch(() => ({ error: "Upload failed" }));
-			throw new Error(err.error || "Upload failed");
+			let code = "UNKNOWN";
+			try {
+				const body = (await res.json()) as { code?: string };
+				if (typeof body?.code === "string" && body.code.trim().length > 0) {
+					code = body.code;
+				}
+			} catch {
+				// No JSON body
+			}
+			throw new Error(code);
 		}

 		await refreshUser();
@@ -575,34 +622,32 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {
 	const [confirmPassword, setConfirmPassword] = useState("");
 	const [error, setError] = useState("");
 	const [success, setSuccess] = useState("");
+	const [avatarError, setAvatarError] = useState("");
 	const [loading, setLoading] = useState(false);
 	const [avatarLoading, setAvatarLoading] = useState(false);
 	const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
 	const [deleteLoading, setDeleteLoading] = useState(false);
 	const fileInputRef = useRef<HTMLInputElement>(null);

-	// Close on Escape key
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && onClose) {
-				onClose();
-			}
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [onClose]);
+	useEscapeKey(!!onClose, onClose ?? (() => {}));

 	async function handleAvatarUpload(e: React.ChangeEvent<HTMLInputElement>) {
 		const file = e.target.files?.[0];
 		if (!file) return;
+		if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
+			setAvatarError(t("form.imageUploadErrors.tooLarge"));
+			if (fileInputRef.current) fileInputRef.current.value = "";
+			return;
+		}

 		setAvatarLoading(true);
-		setError("");
+		setAvatarError("");
 		try {
 			await uploadAvatar(file);
-			setSuccess(t("auth.avatarUpdated", "Avatar updated"));
+			setAvatarError("");
 		} catch (err) {
-			setError(err instanceof Error ? err.message : "Upload failed");
+			const code = err instanceof Error ? err.message : "UNKNOWN";
+			setAvatarError(resolveImageUploadError(code, t));
 		} finally {
 			setAvatarLoading(false);
 			if (fileInputRef.current) fileInputRef.current.value = "";
@@ -611,12 +656,13 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {

 	async function handleAvatarDelete() {
 		setAvatarLoading(true);
-		setError("");
+		setAvatarError("");
 		try {
 			await deleteAvatar();
-			setSuccess(t("auth.avatarRemoved", "Avatar removed"));
+			setAvatarError("");
 		} catch (err) {
-			setError(err instanceof Error ? err.message : "Delete failed");
+			const code = err instanceof Error ? err.message : "UNKNOWN";
+			setAvatarError(resolveImageUploadError(code, t));
 		} finally {
 			setAvatarLoading(false);
 		}
@@ -711,6 +757,7 @@ export function UserProfile({ onClose }: { onClose?: () => void }) {
 					</div>
 				</div>
 				<span className="profile-username">{user.username}</span>
+				{avatarError && <span className="field-error">{avatarError}</span>}
 			</div>

 			<form onSubmit={handleUpdate} className="profile-form">
@@ -2,7 +2,8 @@
 // ConfirmModal Component - Simple confirmation dialog
 // =============================================================================

-import { type ReactNode, useEffect } from "react";
+import type { ReactNode } from "react";
+import { useEscapeKey } from "../hooks/useEscapeKey";

 export interface ConfirmModalProps {
 	title: string;
@@ -27,29 +28,22 @@ export function ConfirmModal({
 	confirmVariant = "primary",
 	overlayClassName,
 }: ConfirmModalProps) {
-	// Close on Escape key
-	useEffect(() => {
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape") {
-				onCancel();
-			}
-		}
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [onCancel]);
+	useEscapeKey(true, onCancel);

 	return (
 		<div
 			className={`modal-overlay${overlayClassName ? ` ${overlayClassName}` : ""}`}
 			onClick={onCancel}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onCancel();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content confirm-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 				style={{ maxWidth: "450px" }}
 			>
 				<button className="modal-close" onClick={onCancel}>
@@ -1,4 +1,6 @@
 import { useTranslation } from "react-i18next";
+import { useEscapeKey } from "../hooks/useEscapeKey";
+import { useScrollLock } from "../hooks/useScrollLock";

 interface ExportModalProps {
 	isOpen: boolean;
@@ -10,6 +12,9 @@ interface ExportModalProps {
 export default function ExportModal({ isOpen, onClose, onExport, exporting }: ExportModalProps) {
 	const { t } = useTranslation();

+	useScrollLock(isOpen);
+	useEscapeKey(isOpen, onClose);
+
 	if (!isOpen) return null;

 	return (
@@ -17,13 +22,15 @@ export default function ExportModal({ isOpen, onClose, onExport, exporting }: Ex
 			className="modal-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 				style={{ maxWidth: "450px" }}
 			>
 				<button className="modal-close" onClick={onClose}>
@@ -0,0 +1,117 @@
+import { Minus, Plus } from "lucide-react";
+
+interface FormNumberStepperProps {
+	value: string;
+	onChange: (nextValue: string) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	allowDecimal?: boolean;
+	decrementLabel: string;
+	incrementLabel: string;
+	className?: string;
+}
+
+const DECIMAL_ROUNDING_FACTOR = 1000;
+
+function clamp(value: number, min: number, max?: number): number {
+	const clampedMin = Math.max(min, value);
+	if (max == null) return clampedMin;
+	return Math.min(max, clampedMin);
+}
+
+function normalizeDecimal(value: number): number {
+	return Math.round(value * DECIMAL_ROUNDING_FACTOR) / DECIMAL_ROUNDING_FACTOR;
+}
+
+function toDisplayValue(value: number, allowDecimal: boolean): string {
+	if (!allowDecimal) return String(Math.max(0, Math.trunc(value)));
+	const normalized = normalizeDecimal(value);
+	return normalized.toString();
+}
+
+function sanitizeRawInput(raw: string, allowDecimal: boolean): string {
+	const normalizedRaw = raw.replace(",", ".");
+	if (allowDecimal) {
+		const cleaned = normalizedRaw.replace(/[^\d.]/g, "");
+		const [integerPart = "", ...fractionalParts] = cleaned.split(".");
+		if (fractionalParts.length === 0) return integerPart;
+		return `${integerPart}.${fractionalParts.join("")}`;
+	}
+	return normalizedRaw.replace(/\D/g, "");
+}
+
+function parseInputValue(raw: string, allowDecimal: boolean): number | null {
+	if (raw.trim() === "") return null;
+	const parsed = allowDecimal ? Number.parseFloat(raw) : Number.parseInt(raw, 10);
+	if (Number.isNaN(parsed)) return null;
+	return parsed;
+}
+
+export function FormNumberStepper({
+	value,
+	onChange,
+	min = 0,
+	max,
+	step = 1,
+	allowDecimal = false,
+	decrementLabel,
+	incrementLabel,
+	className = "",
+}: FormNumberStepperProps) {
+	const parsed = parseInputValue(value, allowDecimal);
+	const baseValue = parsed ?? min;
+	const canDecrement = baseValue > min;
+	const canIncrement = max == null || baseValue < max;
+
+	const normalizedClassName = ["number-stepper", "form-number-stepper", className].filter(Boolean).join(" ");
+
+	const handleStep = (direction: -1 | 1) => {
+		const nextRaw = clamp(baseValue + direction * step, min, max);
+		onChange(toDisplayValue(nextRaw, allowDecimal));
+	};
+
+	const handleInputChange = (nextRaw: string) => {
+		onChange(sanitizeRawInput(nextRaw, allowDecimal));
+	};
+
+	const handleBlur = () => {
+		const nextParsed = parseInputValue(value, allowDecimal);
+		if (nextParsed == null) return;
+		const clamped = clamp(nextParsed, min, max);
+		onChange(toDisplayValue(clamped, allowDecimal));
+	};
+
+	return (
+		<div className={normalizedClassName}>
+			{/* Input first in DOM so <label> associates with it, not the decrement button.
+			    CSS order restores the visual layout: [−] [input] [+]. */}
+			<input
+				type="text"
+				inputMode={allowDecimal ? "decimal" : "numeric"}
+				pattern={allowDecimal ? "[0-9]*\\.?[0-9]*" : "[0-9]*"}
+				value={value}
+				onChange={(e) => handleInputChange(e.target.value)}
+				onBlur={handleBlur}
+			/>
+			<button
+				type="button"
+				className="stepper-btn decrement"
+				onClick={() => handleStep(-1)}
+				disabled={!canDecrement}
+				aria-label={decrementLabel}
+			>
+				<Minus size={16} aria-hidden="true" />
+			</button>
+			<button
+				type="button"
+				className="stepper-btn increment"
+				onClick={() => handleStep(1)}
+				disabled={!canIncrement}
+				aria-label={incrementLabel}
+			>
+				<Plus size={16} aria-hidden="true" />
+			</button>
+		</div>
+	);
+}
@@ -3,6 +3,7 @@
 // =============================================================================

 import type { MouseEvent } from "react";
+import { useEscapeKey } from "../hooks/useEscapeKey";

 export interface LightboxProps {
 	src: string;
@@ -11,6 +12,8 @@ export interface LightboxProps {
 }

 export function Lightbox({ src, alt, onClose }: LightboxProps) {
+	useEscapeKey(true, onClose);
+
 	function handleOverlayClick(e: MouseEvent) {
 		e.stopPropagation();
 		if (e.target === e.currentTarget) {
@@ -23,10 +26,7 @@ export function Lightbox({ src, alt, onClose }: LightboxProps) {
 			className="lightbox-overlay"
 			onClick={handleOverlayClick}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") {
-					e.stopPropagation();
-					onClose();
-				}
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div className="lightbox-container">
@@ -38,7 +38,9 @@ export function Lightbox({ src, alt, onClose }: LightboxProps) {
 					alt={alt}
 					className="lightbox-image"
 					onClick={(e) => e.stopPropagation()}
-					onKeyDown={(e) => e.stopPropagation()}
+					onKeyDown={(e) => {
+						if (e.key !== "Escape") e.stopPropagation();
+					}}
 				/>
 			</div>
 		</div>
@@ -13,6 +13,7 @@ import { Bell, Calendar, ClipboardList, FilePenLine, Minus, NotebookPen, Pencil,
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Lightbox, MedicationAvatar } from "../components";
+import { useEscapeKey } from "../hooks";
 import type { Coverage, Medication, RefillEntry, StockThresholds } from "../types";
 import { getMedTotal, getPackageSize } from "../types";
 import { formatNumber, generateICS, getExpiryClass, getSystemLocale } from "../utils";
@@ -155,21 +156,11 @@ export function MedDetailModal({
 		}
 	}, [showEditStockModal, editStockFullBlisters, editStockPartialBlisterPills, editStockLoosePills]);

-	useEffect(() => {
-		if (!showEditStockModal) return;
-		const handleEscape = (event: KeyboardEvent) => {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				if (typeof event.stopImmediatePropagation === "function") {
-					event.stopImmediatePropagation();
-				}
-				event.preventDefault();
-				onCloseEditStockModal();
-			}
-		};
-		document.addEventListener("keydown", handleEscape, true);
-		return () => document.removeEventListener("keydown", handleEscape, true);
-	}, [showEditStockModal, onCloseEditStockModal]);
+	// Escape key: only one handler is active at a time (sub-modal states are mutually exclusive).
+	// Lightbox has its own useEscapeKey internally.
+	useEscapeKey(!showEditStockModal && !showImageLightbox && !showRefillModal, onClose);
+	useEscapeKey(showEditStockModal, onCloseEditStockModal);
+	useEscapeKey(showRefillModal, onCloseRefillModal);

 	useEffect(() => {
 		if (showEditStockModal) return;
@@ -275,6 +266,14 @@ export function MedDetailModal({

 		return (
 			<div className="number-stepper refill-number-stepper">
+				<input
+					type="number"
+					min={min}
+					max={max}
+					value={value}
+					onChange={(e) => onChange(e.target.value)}
+					onBlur={onBlur}
+				/>
 				<button
 					type="button"
 					className="stepper-btn decrement"
@@ -284,14 +283,6 @@ export function MedDetailModal({
 				>
 					<Minus size={16} aria-hidden="true" />
 				</button>
-				<input
-					type="number"
-					min={min}
-					max={max}
-					value={value}
-					onChange={(e) => onChange(e.target.value)}
-					onBlur={onBlur}
-				/>
 				<button
 					type="button"
 					className="stepper-btn increment"
@@ -321,16 +312,7 @@ export function MedDetailModal({
 		const canIncrement = clamped < max;

 		return (
-			<div className="number-stepper">
-				<button
-					type="button"
-					className="stepper-btn decrement"
-					onClick={() => onChange(Math.max(min, clamped - 1))}
-					disabled={!canDecrement}
-					aria-label={decrementLabel}
-				>
-					<Minus size={16} aria-hidden="true" />
-				</button>
+			<div className="number-stepper refill-number-stepper">
 				<input
 					type="number"
 					min={min}
@@ -341,6 +323,15 @@ export function MedDetailModal({
 						onChange(Number.isNaN(parsed) ? min : Math.min(max, Math.max(min, parsed)));
 					}}
 				/>
+				<button
+					type="button"
+					className="stepper-btn decrement"
+					onClick={() => onChange(Math.max(min, clamped - 1))}
+					disabled={!canDecrement}
+					aria-label={decrementLabel}
+				>
+					<Minus size={16} aria-hidden="true" />
+				</button>
 				<button
 					type="button"
 					className="stepper-btn increment"
@@ -369,21 +360,15 @@ export function MedDetailModal({
 					onCloseEditStockModal();
 				}}
 				onKeyDown={(e) => {
-					e.stopPropagation();
-					if (e.key === "Escape") onCloseEditStockModal();
+					if (e.key !== "Escape") e.stopPropagation();
 				}}
 			>
 				<div
 					className="modal-content edit-stock-modal"
 					onClick={(e) => e.stopPropagation()}
-					onKeyDownCapture={(e) => {
-						if (e.key === "Escape") {
-							e.preventDefault();
-							e.stopPropagation();
-							onCloseEditStockModal();
-						}
+					onKeyDown={(e) => {
+						if (e.key !== "Escape") e.stopPropagation();
 					}}
-					onKeyDown={(e) => e.stopPropagation()}
 				>
 					<button
 						type="button"
@@ -648,11 +633,7 @@ export function MedDetailModal({
 			className="modal-overlay med-detail-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (showEditStockModal || showImageLightbox || showRefillModal) return;
-				if (e.key === "Escape") {
-					e.stopPropagation();
-					onClose();
-				}
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
@@ -660,14 +641,9 @@ export function MedDetailModal({
 				ref={detailModalRef}
 				tabIndex={-1}
 				onClick={(e) => e.stopPropagation()}
-				onKeyDownCapture={(e) => {
-					if (e.key === "Escape") {
-						e.preventDefault();
-						e.stopPropagation();
-						onClose();
-					}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
 				}}
-				onKeyDown={(e) => e.stopPropagation()}
 			>
 				<button
 					type="button"
@@ -701,8 +677,8 @@ export function MedDetailModal({
 								<span className="med-taken-by">
 									{t("modal.for")}{" "}
 									{selectedMed.takenBy.map((person, index) => (
-										<span key={person}>
-											{index > 0 && ", "}
+										<span key={person} style={{ whiteSpace: "nowrap" }}>
+											{index > 0 && (index === selectedMed.takenBy.length - 1 ? ` ${t("common.and")} ` : ", ")}
 											{person}
 											{selectedMed.intakes?.some(
 												(intake) => intake.takenBy === person && intake.intakeRemindersEnabled
@@ -1053,14 +1029,15 @@ export function MedDetailModal({
 						onCloseRefillModal();
 					}}
 					onKeyDown={(e) => {
-						e.stopPropagation();
-						if (e.key === "Escape") onCloseRefillModal();
+						if (e.key !== "Escape") e.stopPropagation();
 					}}
 				>
 					<div
 						className="modal-content refill-modal"
 						onClick={(e) => e.stopPropagation()}
-						onKeyDown={(e) => e.stopPropagation()}
+						onKeyDown={(e) => {
+							if (e.key !== "Escape") e.stopPropagation();
+						}}
 					>
 						<button
 							type="button"
@@ -2,6 +2,8 @@
 // MedicationAvatar Component
 // =============================================================================

+import { useEffect, useState } from "react";
+
 export type MedicationAvatarProps = {
 	name: string;
 	imageUrl?: string | null;
@@ -9,6 +11,12 @@ export type MedicationAvatarProps = {
 };

 export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvatarProps) {
+	const [thumbFailed, setThumbFailed] = useState(false);
+
+	useEffect(() => {
+		setThumbFailed(false);
+	}, [imageUrl]);
+
 	const initials =
 		name
 			.split(" ")
@@ -19,7 +27,26 @@ export function MedicationAvatar({ name, imageUrl, size = "sm" }: MedicationAvat
 	const sizeClass = `med-avatar med-avatar-${size}`;

 	if (imageUrl) {
-		return <img src={`/api/images/${imageUrl}`} alt={name} className={sizeClass} />;
+		const normalizedImageUrl = imageUrl.toLowerCase();
+		const shouldUseThumbFirst = normalizedImageUrl.endsWith(".webp");
+		const extIndex = imageUrl.lastIndexOf(".");
+		const baseName = extIndex > 0 ? imageUrl.slice(0, extIndex) : imageUrl;
+		const thumbSrc = `/api/images/${baseName}-thumb.webp`;
+		const fullSrc = `/api/images/${imageUrl}`;
+		const resolvedSrc = shouldUseThumbFirst && !thumbFailed ? thumbSrc : fullSrc;
+
+		return (
+			<img
+				src={resolvedSrc}
+				alt={name}
+				className={sizeClass}
+				loading="lazy"
+				decoding="async"
+				onError={() => {
+					if (shouldUseThumbFirst && !thumbFailed) setThumbFailed(true);
+				}}
+			/>
+		);
 	}
 	return <div className={`${sizeClass} med-avatar-initials`}>{initials}</div>;
 }
@@ -7,10 +7,13 @@
 import { Bell, Minus, Plus, Trash2 } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useEscapeKey } from "../hooks/useEscapeKey";
+import { useScrollLock } from "../hooks/useScrollLock";
 import type { DoseUnit, FieldErrors, FormBlister, FormIntake, FormState, Medication } from "../types";
 import { DOSE_UNITS } from "../types";
 import { deriveTotal } from "../utils";
 import { DateInput } from "./DateInput";
+import { FormNumberStepper } from "./FormNumberStepper";

 // Field limits for validation
 const FIELD_LIMITS = {
@@ -56,6 +59,7 @@ export interface MobileEditModalProps {
 	meds: Medication[];
 	onUploadMedImage: (medId: number, file: File) => Promise<void>;
 	onDeleteMedImage: (medId: number) => Promise<void>;
+	imageUploadError: string | null;
 	// Actions
 	onClose: () => void;
 	onResetForm: () => void;
@@ -102,11 +106,14 @@ export function MobileEditModal({
 	meds,
 	onUploadMedImage,
 	onDeleteMedImage,
+	imageUploadError,
 	onClose,
 	_onResetForm,
 	onSaveMedication,
 }: MobileEditModalProps) {
 	const { t } = useTranslation();
+	const decrementValueLabel = t("editStock.decreaseValue");
+	const incrementValueLabel = t("editStock.increaseValue");
 	const [activeTab, setActiveTab] = useState<MobileTab>("general");
 	const fieldsetRef = useRef<HTMLFieldSetElement | null>(null);
 	const tabStripRef = useRef<HTMLDivElement | null>(null);
@@ -115,74 +122,27 @@ export function MobileEditModal({
 	const swipeAxisRef = useRef<"x" | "y" | null>(null);
 	const [swipeDeltaX, setSwipeDeltaX] = useState(0);
 	const [isHorizontalSwiping, setIsHorizontalSwiping] = useState(false);
+	const [showNameValidation, setShowNameValidation] = useState(false);
 	const activeTabIndexRef = useRef(0);

 	// Reset tab when modal opens
 	useEffect(() => {
-		if (show) setActiveTab("general");
+		if (show) {
+			setActiveTab("general");
+			setShowNameValidation(false);
+		}
 	}, [show]);

-	// Close on Escape key
 	useEffect(() => {
-		if (!show) return;
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape") {
-				onClose();
-			}
+		if (show && (hasValidationErrors || !!fieldErrors.name)) {
+			setShowNameValidation(true);
 		}
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [show, onClose]);
+	}, [show, hasValidationErrors, fieldErrors.name]);
+
+	useEscapeKey(show, onClose);

 	// Lock background scroll while modal is open.
-	useEffect(() => {
-		if (!show) return;
-		const html = document.documentElement;
-		const body = document.body;
-		const scrollY = window.scrollY;
-
-		const hadHtmlModalClass = html.classList.contains("modal-open");
-		const hadBodyModalClass = body.classList.contains("modal-open");
-
-		const previousHtmlOverflow = html.style.overflow;
-		const previousHtmlOverscrollBehavior = html.style.overscrollBehavior;
-		const previousBodyOverflow = body.style.overflow;
-		const previousBodyPosition = body.style.position;
-		const previousBodyTop = body.style.top;
-		const previousBodyLeft = body.style.left;
-		const previousBodyRight = body.style.right;
-		const previousBodyWidth = body.style.width;
-		const previousBodyOverscrollBehavior = body.style.overscrollBehavior;
-
-		html.classList.add("modal-open");
-		body.classList.add("modal-open");
-		html.style.overflow = "hidden";
-		html.style.overscrollBehavior = "none";
-		body.style.overflow = "hidden";
-		body.style.position = "fixed";
-		body.style.top = `-${scrollY}px`;
-		body.style.left = "0";
-		body.style.right = "0";
-		body.style.width = "100%";
-		body.style.overscrollBehavior = "none";
-
-		return () => {
-			if (!hadHtmlModalClass) html.classList.remove("modal-open");
-			if (!hadBodyModalClass) body.classList.remove("modal-open");
-
-			html.style.overflow = previousHtmlOverflow;
-			html.style.overscrollBehavior = previousHtmlOverscrollBehavior;
-			body.style.overflow = previousBodyOverflow;
-			body.style.position = previousBodyPosition;
-			body.style.top = previousBodyTop;
-			body.style.left = previousBodyLeft;
-			body.style.right = previousBodyRight;
-			body.style.width = previousBodyWidth;
-			body.style.overscrollBehavior = previousBodyOverscrollBehavior;
-
-			window.scrollTo(0, scrollY);
-		};
-	}, [show]);
+	useScrollLock(show);

 	// Keep activeTabIndex ref in sync for native listeners
 	const activeTabIndex = MOBILE_TAB_ORDER.indexOf(activeTab);
@@ -303,13 +263,15 @@ export function MobileEditModal({
 			className="modal-overlay mobile-edit-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content edit-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 			>
 				<div className="edit-modal-header">
 					<button type="button" className="ghost small btn-nav" onClick={onClose}>
@@ -386,16 +348,24 @@ export function MobileEditModal({
 								<div className={`form-tab-panel${activeTab === "general" ? " active" : ""}`}>
 									<div className="full form-category">
 										<h4 className="form-category-title">{t("form.sections.general")}</h4>
-										<label className={`full ${!readOnlyMode && fieldErrors.name ? "has-error" : ""}`}>
+										<label
+											className={`full ${!readOnlyMode && showNameValidation && fieldErrors.name ? "has-error" : ""}`}
+										>
 											{t("form.commercialName")}
 											<input
 												value={form.name}
-												onChange={(e) => onFormChange({ ...form, name: e.target.value })}
+												onChange={(e) => {
+													setShowNameValidation(true);
+													onFormChange({ ...form, name: e.target.value });
+												}}
+												onBlur={() => setShowNameValidation(true)}
 												placeholder={t("form.placeholders.commercial")}
 												maxLength={FIELD_LIMITS.name.max}
 												required={!readOnlyMode}
 											/>
-											{!readOnlyMode && fieldErrors.name && <span className="field-error">{fieldErrors.name}</span>}
+											{!readOnlyMode && showNameValidation && fieldErrors.name && (
+												<span className="field-error">{fieldErrors.name}</span>
+											)}
 										</label>
 										<label className={`full ${fieldErrors.genericName ? "has-error" : ""}`}>
 											{t("form.genericName")}
@@ -486,9 +456,14 @@ export function MobileEditModal({
 												<input
 													type="file"
 													accept="image/*"
-													onChange={(e) => e.target.files?.[0] && onUploadMedImage(editingId, e.target.files[0])}
+													onChange={(e) => {
+														const file = e.target.files?.[0];
+														e.target.value = "";
+														if (file) void onUploadMedImage(editingId, file);
+													}}
 												/>
 											)}
+											{imageUploadError && <span className="field-error">{imageUploadError}</span>}
 										</div>
 									)}
 								</div>
@@ -499,32 +474,32 @@ export function MobileEditModal({
 											<>
 												<label>
 													{t("form.packs")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.packCount}
-														onChange={(e) => onHandleValueChange("packCount", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("packCount", nextValue)}
+														min={0}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label>
 													{t("form.blistersPerPack")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.blistersPerPack}
-														onChange={(e) => onHandleValueChange("blistersPerPack", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("blistersPerPack", nextValue)}
+														min={1}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label>
 													{t("form.pillsPerBlister")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.pillsPerBlister}
-														onChange={(e) => onHandleValueChange("pillsPerBlister", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("pillsPerBlister", nextValue)}
+														min={1}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label>
@@ -536,22 +511,22 @@ export function MobileEditModal({
 											<>
 												<label>
 													{t("form.totalCapacity")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.totalPills}
-														onChange={(e) => onHandleValueChange("totalPills", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("totalPills", nextValue)}
+														min={0}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label>
 													{t("form.currentPills")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.looseTablets}
-														onChange={(e) => onHandleValueChange("looseTablets", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("looseTablets", nextValue)}
+														min={0}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 											</>
@@ -646,22 +621,24 @@ export function MobileEditModal({
 											>
 												<label className="compact">
 													<span>{t("form.blisters.usage")}</span>
-													<input
-														type="text"
-														inputMode="decimal"
-														pattern="[0-9]*\.?[0-9]*"
+													<FormNumberStepper
 														value={intake.usage}
-														onChange={(e) => onSetIntakeValue(idx, "usage", e.target.value)}
+														onChange={(nextValue) => onSetIntakeValue(idx, "usage", nextValue)}
+														min={0.5}
+														step={0.5}
+														allowDecimal={true}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label className="compact">
 													<span>{t("form.blisters.everyDays")}</span>
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={intake.every}
-														onChange={(e) => onSetIntakeValue(idx, "every", e.target.value)}
+														onChange={(nextValue) => onSetIntakeValue(idx, "every", nextValue)}
+														min={1}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label className="compact full-row">
@@ -740,32 +717,32 @@ export function MobileEditModal({
 											<>
 												<label className="prescription-field">
 													{t("prescription.authorizedRefills")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.prescriptionAuthorizedRefills}
-														onChange={(e) => onHandleValueChange("prescriptionAuthorizedRefills", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("prescriptionAuthorizedRefills", nextValue)}
+														min={0}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label className="prescription-field">
 													{t("prescription.remainingRefills")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.prescriptionRemainingRefills}
-														onChange={(e) => onHandleValueChange("prescriptionRemainingRefills", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("prescriptionRemainingRefills", nextValue)}
+														min={0}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label className="prescription-field">
 													{t("prescription.lowThreshold")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={form.prescriptionLowRefillThreshold}
-														onChange={(e) => onHandleValueChange("prescriptionLowRefillThreshold", e.target.value)}
+														onChange={(nextValue) => onHandleValueChange("prescriptionLowRefillThreshold", nextValue)}
+														min={0}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label className="prescription-field">
@@ -1,3 +1,4 @@
+import { useEscapeKey } from "../hooks/useEscapeKey";
 import { UserProfile } from "./Auth";

 interface ProfileModalProps {
@@ -6,6 +7,8 @@ interface ProfileModalProps {
 }

 export default function ProfileModal({ isOpen, onClose }: ProfileModalProps) {
+	useEscapeKey(isOpen, onClose);
+
 	if (!isOpen) return null;

 	return (
@@ -13,13 +16,15 @@ export default function ProfileModal({ isOpen, onClose }: ProfileModalProps) {
 			className="modal-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content profile-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 			>
 				<button className="modal-close" onClick={onClose}>
 					×
@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
+import { useEscapeKey } from "../hooks/useEscapeKey";
+import { useScrollLock } from "../hooks/useScrollLock";
 import type { Medication } from "../types";
 import { getPackageSize } from "../types";
 import { MedicationAvatar } from "./MedicationAvatar";
@@ -31,6 +33,9 @@ export function ReportModal({ isOpen, onClose, medications }: ReportModalProps)
 	const [generating, setGenerating] = useState(false);
 	const [takenByFilter, setTakenByFilter] = useState<Set<string>>(new Set());

+	useScrollLock(isOpen);
+	useEscapeKey(isOpen, onClose);
+
 	// Collect all unique "taken by" people across all medications
 	const allPeople = useMemo(() => {
 		const people = new Set<string>();
@@ -138,13 +143,15 @@ export function ReportModal({ isOpen, onClose, medications }: ReportModalProps)
 			className="modal-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content report-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 			>
 				<button className="modal-close" onClick={onClose}>
 					×
@@ -5,6 +5,7 @@

 import { Check, Copy, Link2, X } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { useEscapeKey } from "../hooks/useEscapeKey";

 export interface ShareDialogProps {
 	show: boolean;
@@ -43,6 +44,8 @@ export function ShareDialog({
 	const closeLabel = t("common.close");
 	const copyLabel = shareCopied ? t("share.copied") : t("share.copyLink");

+	useEscapeKey(show, onClose);
+
 	if (!show) return null;

 	return (
@@ -50,13 +53,15 @@ export function ShareDialog({
 			className="modal-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content share-dialog-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 			>
 				<button
 					type="button"
@@ -7,6 +7,7 @@
 import { useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useParams } from "react-router-dom";
+import { useEscapeKey } from "../hooks";
 import type { ExpiredLinkData, SharedScheduleData } from "../types";
 import { getMedTotal } from "../types";
 import { getSystemLocale } from "../utils/formatters";
@@ -151,15 +152,7 @@ export function SharedSchedule() {
 	}

 	// Close lightbox on Escape key
-	useEffect(() => {
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape" && lightboxImage) {
-				closeLightbox();
-			}
-		}
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [lightboxImage, closeLightbox]);
+	useEscapeKey(!!lightboxImage, closeLightbox);

 	// Handle browser back button to close lightbox
 	useEffect(() => {
@@ -1283,7 +1276,7 @@ export function SharedSchedule() {
 					className="lightbox-overlay"
 					onClick={closeLightbox}
 					onKeyDown={(e) => {
-						if (e.key === "Escape") closeLightbox();
+						if (e.key !== "Escape") e.stopPropagation();
 					}}
 				>
 					<button className="lightbox-close" onClick={closeLightbox}>
@@ -1294,7 +1287,9 @@ export function SharedSchedule() {
 						alt={lightboxImage.name}
 						className="lightbox-image"
 						onClick={(e) => e.stopPropagation()}
-						onKeyDown={(e) => e.stopPropagation()}
+						onKeyDown={(e) => {
+							if (e.key !== "Escape") e.stopPropagation();
+						}}
 					/>
 				</div>
 			)}
@@ -4,6 +4,7 @@
 */
 import { useTranslation } from "react-i18next";
 import { MedicationAvatar } from "../components";
+import { useEscapeKey } from "../hooks/useEscapeKey";
 import type { Coverage, Medication, StockThresholds } from "../types";
 import { getMedTotal, getPackageSize } from "../types";
 import { formatNumber } from "../utils";
@@ -31,6 +32,8 @@ export function UserFilterModal({
 }: UserFilterModalProps) {
 	const { t, i18n } = useTranslation();

+	useEscapeKey(!!selectedUser, onClose);
+
 	if (!selectedUser) return null;

 	const userMeds = meds.filter((m) => !m.isObsolete && (m.takenBy || []).includes(selectedUser));
@@ -40,13 +43,15 @@ export function UserFilterModal({
 			className="modal-overlay"
 			onClick={onClose}
 			onKeyDown={(e) => {
-				if (e.key === "Escape") onClose();
+				if (e.key !== "Escape") e.stopPropagation();
 			}}
 		>
 			<div
 				className="modal-content user-meds-modal"
 				onClick={(e) => e.stopPropagation()}
-				onKeyDown={(e) => e.stopPropagation()}
+				onKeyDown={(e) => {
+					if (e.key !== "Escape") e.stopPropagation();
+				}}
 			>
 				<button className="modal-close" onClick={onClose}>
 					×
@@ -6,6 +6,7 @@ export { ConfirmModal } from "./ConfirmModal";
 export { DateInput } from "./DateInput";
 export { DateTimeInput } from "./DateTimeInput";
 export { default as ExportModal } from "./ExportModal";
+export { FormNumberStepper } from "./FormNumberStepper";
 export type { LightboxProps } from "./Lightbox";

 export { Lightbox } from "./Lightbox";
@@ -4,6 +4,7 @@ export type { UseCollapsedDaysReturn } from "./useCollapsedDays";
 export { useCollapsedDays } from "./useCollapsedDays";
 export type { UseDosesReturn } from "./useDoses";
 export { useDoses } from "./useDoses";
+export { useEscapeKey } from "./useEscapeKey";
 export type { UseMedicationFormReturn } from "./useMedicationForm";
 export { defaultBlister, defaultForm, useMedicationForm } from "./useMedicationForm";
 export type { UseMedicationsReturn } from "./useMedications";
@@ -11,6 +12,7 @@ export { useMedications } from "./useMedications";
 export { useModalHistory } from "./useModalHistory";
 export type { UseRefillReturn } from "./useRefill";
 export { useRefill } from "./useRefill";
+export { useScrollLock } from "./useScrollLock";
 export type { Settings, UseSettingsReturn } from "./useSettings";
 export { useSettings } from "./useSettings";
 export type { UseShareReturn } from "./useShare";
@@ -0,0 +1,36 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Close a modal/overlay when the user presses Escape.
+ *
+ * Registers a document-level `keydown` listener so it works regardless
+ * of which element has focus. Every modal **must** use this hook —
+ * relying on `onKeyDown` on overlay divs is unreliable because those
+ * handlers only fire when the overlay itself (or a descendant) has focus.
+ *
+ * @param active  – whether the modal is currently open
+ * @param onClose – callback to close the modal
+ * @param options.capture – use capture phase (default: false).
+ *   Set to `true` for nested sub-modals that must intercept Escape
+ *   before a parent's handler fires.
+ */
+export function useEscapeKey(active: boolean, onClose: () => void, options?: { capture?: boolean }): void {
+	const capture = options?.capture ?? false;
+	const activeRef = useRef(active);
+	const onCloseRef = useRef(onClose);
+
+	// Keep refs in sync without re-registering the listener
+	activeRef.current = active;
+	onCloseRef.current = onClose;
+
+	useEffect(() => {
+		if (!active) return;
+		const handleKeyDown = (e: KeyboardEvent) => {
+			if (e.key === "Escape" && activeRef.current) {
+				onCloseRef.current();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown, capture);
+		return () => document.removeEventListener("keydown", handleKeyDown, capture);
+	}, [active, capture]);
+}
@@ -50,13 +50,33 @@ export function useMedications(): UseMedicationsReturn {
 					body: formData,
 					credentials: "include",
 				});
-				if (res.ok) {
-					loadMeds();
+				if (!res.ok) {
+					let code = "UNKNOWN";
+					try {
+						const errorBody = (await res.json()) as { code?: string };
+						if (typeof errorBody?.code === "string" && errorBody.code.trim().length > 0) {
+							code = errorBody.code;
+						}
+					} catch {
+						// Keep fallback code when backend response has no JSON body.
+					}
+					throw new Error(code);
 				}
-			} catch {
-				// ignore
+
+				loadMeds();
+			} catch (error) {
+				if (error instanceof Error) {
+					// Network failures (fetch itself throws) produce browser-specific messages.
+					// Normalise to NETWORK_ERROR code so the UI can map to a translated string.
+					if (error.message === "Failed to fetch" || error.message.startsWith("NetworkError")) {
+						throw new Error("NETWORK_ERROR");
+					}
+					throw error;
+				}
+				throw new Error("UNKNOWN");
+			} finally {
+				setUploadingImage(false);
 			}
-			setUploadingImage(false);
 		},
 		[loadMeds]
 	);
@@ -0,0 +1,81 @@
+import { useEffect, useRef } from "react";
+
+/**
+ * Lock background scrolling when a modal/overlay is visible.
+ *
+ * Uses the `position: fixed` technique to prevent scroll on iOS Safari
+ * and other browsers where `overflow: hidden` alone is insufficient.
+ * Saves and restores the scroll position on cleanup so users don't
+ * lose their place.
+ *
+ * Supports nesting: a scroll-lock counter prevents premature unlock
+ * when multiple modals stack (e.g. MedDetail → RefillModal).
+ */
+
+let lockCount = 0;
+let savedScrollY = 0;
+
+export function useScrollLock(active: boolean): void {
+	const wasActive = useRef(false);
+
+	useEffect(() => {
+		if (active && !wasActive.current) {
+			wasActive.current = true;
+			const html = document.documentElement;
+			const body = document.body;
+
+			if (lockCount === 0) {
+				savedScrollY = window.scrollY;
+				html.classList.add("modal-open");
+				html.style.overflow = "hidden";
+				html.style.overscrollBehavior = "none";
+				body.classList.add("modal-open");
+				body.style.overflow = "hidden";
+				body.style.position = "fixed";
+				body.style.top = `-${savedScrollY}px`;
+				body.style.left = "0";
+				body.style.right = "0";
+				body.style.width = "100%";
+				body.style.overscrollBehavior = "none";
+			}
+			lockCount++;
+		}
+
+		if (!active && wasActive.current) {
+			wasActive.current = false;
+			lockCount--;
+			if (lockCount <= 0) {
+				lockCount = 0;
+				unlock();
+			}
+		}
+
+		return () => {
+			if (wasActive.current) {
+				wasActive.current = false;
+				lockCount--;
+				if (lockCount <= 0) {
+					lockCount = 0;
+					unlock();
+				}
+			}
+		};
+	}, [active]);
+}
+
+function unlock(): void {
+	const html = document.documentElement;
+	const body = document.body;
+	html.classList.remove("modal-open");
+	html.style.overflow = "";
+	html.style.overscrollBehavior = "";
+	body.classList.remove("modal-open");
+	body.style.overflow = "";
+	body.style.position = "";
+	body.style.top = "";
+	body.style.left = "";
+	body.style.right = "";
+	body.style.width = "";
+	body.style.overscrollBehavior = "";
+	window.scrollTo(0, savedScrollY);
+}
@@ -4,6 +4,8 @@

 import { useCallback, useState } from "react";
 import type { Medication } from "../types";
+import { withCorrelation } from "../utils/correlation";
+import { log } from "../utils/logger";

 export interface UseShareReturn {
 	showShareDialog: boolean;
@@ -45,36 +47,57 @@ export function useShare(): UseShareReturn {
 		const allPeople = meds.flatMap((m) => m.takenBy || []);
 		const uniquePeople = [...new Set(allPeople)].filter(Boolean).sort();
 		setSharePeople(uniquePeople);
+		log.info("[ShareDialog] Opened", { medicationCount: meds.length, personCount: uniquePeople.length });
 		if (uniquePeople.length > 0) {
 			setShareSelectedPerson(uniquePeople[0]);
 		}
 	}, []);

 	const generateShareLink = useCallback(async () => {
-		if (!shareSelectedPerson) return;
+		if (!shareSelectedPerson) {
+			log.warn("[ShareDialog] Attempted to generate link without selected person");
+			return;
+		}
 		setShareGenerating(true);
 		setShareCopied(false);

 		try {
-			const res = await fetch("/api/share", {
-				method: "POST",
-				headers: { "Content-Type": "application/json" },
-				credentials: "include",
-				body: JSON.stringify({
-					takenBy: shareSelectedPerson,
-					scheduleDays: shareSelectedDays,
-				}),
-			});
+			const { correlationId, init } = withCorrelation(
+				{
+					method: "POST",
+					headers: { "Content-Type": "application/json" },
+					credentials: "include",
+					body: JSON.stringify({
+						takenBy: shareSelectedPerson,
+						scheduleDays: shareSelectedDays,
+					}),
+				},
+				"fe-share"
+			);
+			const res = await fetch("/api/share", init);

 			if (res.ok) {
 				const data = await res.json();
 				const fullUrl = `${window.location.origin}/share/${data.token}`;
 				setShareLink(fullUrl);
+				log.info("[ShareDialog] Share link ready", {
+					person: shareSelectedPerson,
+					days: shareSelectedDays,
+					reused: Boolean(data.reused),
+					correlationId,
+				});
 			} else {
 				const err = await res.json();
+				log.error("[ShareDialog] Failed to generate share link", {
+					status: res.status,
+					person: shareSelectedPerson,
+					error: err.error,
+					correlationId,
+				});
 				alert(err.error || "Failed to generate share link");
 			}
-		} catch {
+		} catch (error) {
+			log.error("[ShareDialog] Share link request threw error", { person: shareSelectedPerson, error });
 			alert("Failed to generate share link");
 		} finally {
 			setShareGenerating(false);
@@ -83,20 +106,53 @@ export function useShare(): UseShareReturn {

 	const copyShareLink = useCallback(() => {
 		if (shareLink) {
-			navigator.clipboard.writeText(shareLink);
-			setShareCopied(true);
-			setTimeout(() => setShareCopied(false), 2000);
+			if (navigator.clipboard?.writeText) {
+				navigator.clipboard.writeText(shareLink).then(
+					() => {
+						setShareCopied(true);
+						log.debug("[ShareDialog] Share link copied to clipboard");
+						setTimeout(() => setShareCopied(false), 2000);
+					},
+					() => {
+						// Clipboard API blocked (non-secure context / permissions)
+						fallbackCopyToClipboard(shareLink);
+					}
+				);
+			} else {
+				fallbackCopyToClipboard(shareLink);
+			}
+		}
+
+		function fallbackCopyToClipboard(text: string) {
+			const textarea = document.createElement("textarea");
+			textarea.value = text;
+			textarea.style.position = "fixed";
+			textarea.style.opacity = "0";
+			document.body.appendChild(textarea);
+			textarea.select();
+			try {
+				document.execCommand("copy");
+				setShareCopied(true);
+				log.debug("[ShareDialog] Share link copied via fallback");
+				setTimeout(() => setShareCopied(false), 2000);
+			} catch {
+				log.warn("[ShareDialog] Clipboard copy failed — not in secure context");
+			} finally {
+				document.body.removeChild(textarea);
+			}
 		}
 	}, [shareLink]);

 	const closeShareDialog = useCallback(() => {
 		if (showShareDialog) {
+			log.debug("[ShareDialog] Closing dialog");
 			window.history.back();
 		}
 	}, [showShareDialog]);

 	// Internal function to reset share dialog state (called by popstate handler)
 	const resetShareDialogState = useCallback(() => {
+		log.debug("[ShareDialog] Reset dialog state");
 		setShowShareDialog(false);
 		setShareLink(null);
 		setShareCopied(false);
@@ -183,6 +183,13 @@
    "notes": "Notizen",
    "medicationImage": "Medikamentenbild",
    "removeImage": "Bild entfernen",
+    "imageUploadErrors": {
+      "tooLarge": "Das Bild ist zu groß. Die maximale Upload-Größe beträgt 10 MB.",
+      "invalidType": "Ungültiger Dateityp. Erlaubte Formate: JPEG, PNG, WebP, GIF.",
+      "invalidImage": "Ungültige oder nicht unterstützte Bilddatei.",
+      "noFile": "Es wurde keine Datei zum Hochladen ausgewählt.",
+      "generic": "Bild-Upload fehlgeschlagen. Bitte versuche es erneut."
+    },
    "placeholders": {
      "commercial": "z.B. Ozempic",
      "generic": "z.B. Semaglutid (optional)",
@@ -353,6 +360,7 @@
    "intakeReminders": "Einnahme-Erinnerungen aktiviert",
    "automaticTaken": "Automatisch eingenommen",
    "hasNotes": "Hat Notizen",
+    "hasPrescription": "Rezeptverfolgung aktiviert",
    "stockExceedsCapacity": "Bestand überschreitet Packungskapazität — Packungsanzahl anpassen",
    "lightMode": "Zum hellen Modus wechseln",
    "darkMode": "Zum dunklen Modus wechseln"
@@ -452,6 +460,7 @@
    "loose": "lose",
    "none": "Kein",
    "daily": "täglich",
+    "and": "und",
    "everyNDays": "alle {{count}} Tage",
    "day": "Tag",
    "days": "Tage",
@@ -183,6 +183,13 @@
    "notes": "Notes",
    "medicationImage": "Medication Image",
    "removeImage": "Remove Image",
+    "imageUploadErrors": {
+      "tooLarge": "Image is too large. Maximum upload size is 10 MB.",
+      "invalidType": "Invalid file type. Allowed formats: JPEG, PNG, WebP, GIF.",
+      "invalidImage": "Invalid or unsupported image file.",
+      "noFile": "No file was selected for upload.",
+      "generic": "Image upload failed. Please try again."
+    },
    "placeholders": {
      "commercial": "e.g. Ozempic",
      "generic": "e.g. Semaglutide (optional)",
@@ -353,6 +360,7 @@
    "intakeReminders": "Intake reminders enabled",
    "automaticTaken": "Automatically taken",
    "hasNotes": "Has notes",
+    "hasPrescription": "Prescription tracking enabled",
    "stockExceedsCapacity": "Stock exceeds package capacity — consider updating pack count",
    "lightMode": "Switch to light mode",
    "darkMode": "Switch to dark mode"
@@ -452,6 +460,7 @@
    "loose": "loose",
    "none": "None",
    "daily": "daily",
+    "and": "and",
    "everyNDays": "every {{count}} days",
    "day": "day",
    "days": "days",
@@ -1,5 +1,5 @@
 /* biome-ignore-all lint/style/noNestedTernary: timeline rendering uses explicit UI-state branching */
-import { Bell, NotebookPen, Share2 } from "lucide-react";
+import { Bell, ClipboardList, NotebookPen, Share2 } from "lucide-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ConfirmModal, MedicationAvatar } from "../components";
@@ -538,6 +538,17 @@ export function DashboardPage() {
 																</span>
 															</>
 														)}
+														{med?.prescriptionEnabled && (
+															<>
+																{" "}
+																<span
+																	className="prescription-icon info-tooltip"
+																	data-tooltip={t("tooltips.hasPrescription")}
+																>
+																	<ClipboardList size={13} aria-hidden="true" />
+																</span>
+															</>
+														)}
 													</span>
 													{med?.takenBy && med.takenBy.length > 0 && (
 														<span className="med-taken-by-line">
@@ -5,13 +5,22 @@ import { Bell, Eye, Minus, Pencil, Plus, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
-import { ConfirmModal, DateInput, Lightbox, MedicationAvatar, MobileEditModal, ReportModal } from "../components";
+import {
+	ConfirmModal,
+	DateInput,
+	FormNumberStepper,
+	Lightbox,
+	MedicationAvatar,
+	MobileEditModal,
+	ReportModal,
+} from "../components";
 import { useAuth } from "../components/Auth";
 import { useAppContext, useUnsavedChanges } from "../context";
 import { useMedicationForm, useModalHistory, useUnsavedChangesWarning } from "../hooks";
 import type { DoseUnit, Medication } from "../types";
 import { DOSE_UNITS, FIELD_LIMITS, getPackageSize } from "../types";
 import { combineDateAndTime, formatDate, formatDateTime, formatNumber } from "../utils/formatters";
+import { MAX_IMAGE_UPLOAD_BYTES, resolveImageUploadError } from "../utils/image-upload";
 import { log } from "../utils/logger";

 function userStorageKey(userId: number | undefined, key: string): string {
@@ -43,6 +52,7 @@ export function MedicationsPage() {
 		setForm,
 		setOriginalForm,
 		editingId,
+		setEditingId,
 		formSaved,
 		setFormSaved,
 		formChanged,
@@ -68,12 +78,14 @@ export function MedicationsPage() {
 	useUnsavedChangesWarning(formChanged);

 	// View mode: grid (default) or form (edit/new)
-	const [viewMode, setViewMode] = useState<"grid" | "form">("grid");
+	// If navigating in with editMedId, suppress rendering until the edit form is ready
+	const [pendingEditTransition, setPendingEditTransition] = useState(() => searchParams.has("editMedId"));
+	const [viewMode, setViewMode] = useState<"grid" | "form">(pendingEditTransition ? "form" : "grid");
 	const [lightboxImage, setLightboxImage] = useState<{ src: string; alt: string } | null>(null);
 	const [activeTab, setActiveTab] = useState<"general" | "stock" | "prescription" | "schedule">("general");

 	// Mobile modal state (declared early because it's used in useEffect below)
-	const [showEditModal, setShowEditModal] = useState(false);
+	const [showEditModal, setShowEditModal] = useState(pendingEditTransition && window.innerWidth <= 768);
 	const showEditModalRef = useRef(false);
 	useEffect(() => {
 		showEditModalRef.current = showEditModal;
@@ -128,6 +140,32 @@ export function MedicationsPage() {
 	const [showObsoleteConfirm, setShowObsoleteConfirm] = useState(false);
 	const [obsoleteCandidate, setObsoleteCandidate] = useState<Medication | null>(null);
 	const [allMeds, setAllMeds] = useState<Medication[]>(meds);
+	const [imageUploadError, setImageUploadError] = useState<string | null>(null);
+
+	const handlePendingMedicationImageSelection = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			const file = event.target.files?.[0];
+			event.target.value = "";
+			if (!file) return;
+			if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
+				setImageUploadError(t("form.imageUploadErrors.tooLarge"));
+				setPendingImage(null);
+				setPendingImagePreview(null);
+				return;
+			}
+
+			setImageUploadError(null);
+			setPendingImage(file);
+			const reader = new FileReader();
+			reader.onload = (ev) => setPendingImagePreview(ev.target?.result as string);
+			reader.readAsDataURL(file);
+		},
+		[t]
+	);
+
+	useEffect(() => {
+		setImageUploadError(null);
+	}, [editingId]);
 	const [showObsolete, setShowObsolete] = useState(true);
 	const [readOnlyView, setReadOnlyView] = useState(false);
 	const [showReportModal, setShowReportModal] = useState(false);
@@ -163,6 +201,42 @@ export function MedicationsPage() {
 		void loadAllMeds();
 	}, [loadAllMeds]);

+	const tryUploadMedImage = useCallback(
+		async (medId: number, file: File) => {
+			setImageUploadError(null);
+			if (file.size > MAX_IMAGE_UPLOAD_BYTES) {
+				setImageUploadError(t("form.imageUploadErrors.tooLarge"));
+				return false;
+			}
+			try {
+				await uploadMedImage(medId, file);
+				void loadAllMeds();
+				setImageUploadError(null);
+				return true;
+			} catch (error) {
+				const code = error instanceof Error ? error.message : "UNKNOWN";
+				setImageUploadError(resolveImageUploadError(code, t));
+				return false;
+			}
+		},
+		[t, uploadMedImage, loadAllMeds]
+	);
+
+	const handleUploadMedImage = useCallback(
+		async (medId: number, file: File) => {
+			await tryUploadMedImage(medId, file);
+		},
+		[tryUploadMedImage]
+	);
+
+	const handleDeleteMedImage = useCallback(
+		async (medId: number) => {
+			await deleteMedImage(medId);
+			void loadAllMeds();
+		},
+		[deleteMedImage, loadAllMeds]
+	);
+
 	// Calculate total tablets
 	const totalTablets = useMemo(() => {
 		if (form.packageType === "bottle") {
@@ -175,6 +249,8 @@ export function MedicationsPage() {
 		const pillsPerBlister = Number(form.pillsPerBlister) || 1;
 		return packCount * blistersPerPack * pillsPerBlister;
 	}, [form.packageType, form.packCount, form.blistersPerPack, form.pillsPerBlister, form.looseTablets]);
+	const decrementValueLabel = t("editStock.decreaseValue");
+	const incrementValueLabel = t("editStock.increaseValue");

 	const dateConsistencyError = useMemo(() => {
 		const medicationStartDate = form.medicationStartDate;
@@ -455,7 +531,19 @@ export function MedicationsPage() {

 			// Upload image if pending (for new medications)
 			if (!editingId && pendingImage && saved.id) {
-				await uploadMedImage(saved.id, pendingImage);
+				const uploaded = await tryUploadMedImage(saved.id, pendingImage);
+				if (!uploaded) {
+					// Keep user in edit mode so upload error stays visible and retry is immediate.
+					setEditingId(saved.id);
+					setFormSaved(true);
+					setOriginalForm(form);
+					setPendingImage(null);
+					setPendingImagePreview(null);
+					loadMeds();
+					void loadAllMeds();
+					setSaving(false);
+					return;
+				}
 				setPendingImage(null);
 				setPendingImagePreview(null);
 			}
@@ -596,6 +684,13 @@ export function MedicationsPage() {
 		return () => document.removeEventListener("keydown", handleEscape);
 	}, [showEditModal, closeEditModal]);

+	function scrollToTopForDesktopEdit() {
+		if (window.innerWidth <= 768) return;
+		window.requestAnimationFrame(() => {
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		});
+	}
+
 	function handleEditClick(med: Medication) {
 		if (formChanged) {
 			pendingActionRef.current = () => {
@@ -603,6 +698,7 @@ export function MedicationsPage() {
 				setReadOnlyView(false);
 				startEdit(med, openEditModal);
 				setViewMode("form");
+				scrollToTopForDesktopEdit();
 			};
 			setUnsavedConfirmSource(showEditModal ? "mobile-edit" : "desktop-form");
 			setShowUnsavedConfirm(true);
@@ -613,6 +709,7 @@ export function MedicationsPage() {
 		setActiveTab("general");
 		startEdit(med, openEditModal);
 		setViewMode("form");
+		scrollToTopForDesktopEdit();
 	}

 	function handleViewClick(med: Medication) {
@@ -695,6 +792,8 @@ export function MedicationsPage() {
 		setActiveTab("general");
 		startEdit(medicationToEdit, openEditModal);
 		setViewMode("form");
+		setPendingEditTransition(false);
+		window.dispatchEvent(new Event("medassist:edit-transition-ready"));

 		const nextParams = new URLSearchParams(searchParams);
 		nextParams.delete("editMedId");
@@ -706,6 +805,11 @@ export function MedicationsPage() {
 		return allMeds.find((med) => med.id === editingId) ?? null;
 	}, [allMeds, editingId]);

+	// While navigating from detail modal to edit, render nothing until form is populated
+	if (pendingEditTransition) {
+		return null;
+	}
+
 	return (
 		<section className={`med-grid-wrapper${viewMode === "form" ? " desktop-edit-open" : ""}`}>
 			{/* ── Grid View: always visible medication cards ── */}
@@ -828,8 +932,10 @@ export function MedicationsPage() {
 												{s.usage} {s.usage === 1 ? t("common.pill") : t("common.pills")} ·{" "}
 												{s.every === 1 ? t("common.daily") : t("common.everyNDays", { count: s.every })} ·{" "}
 												{t("form.blisters.from")} {formatDateTime(s.start)}
-												{"takenBy" in s && s.takenBy && <span className="blister-taken-by"> · {s.takenBy}</span>}
-												{"intakeRemindersEnabled" in s && s.intakeRemindersEnabled && (
+												{"takenBy" in s && (s as import("../types").Intake).takenBy && (
+													<span className="blister-taken-by"> · {(s as import("../types").Intake).takenBy}</span>
+												)}
+												{"intakeRemindersEnabled" in s && (s as import("../types").Intake).intakeRemindersEnabled && (
 													<span className="blister-reminder-icon" title={t("form.blisters.remindTooltip")}>
 														{" "}
 														<Bell size={12} aria-hidden="true" />
@@ -966,15 +1072,6 @@ export function MedicationsPage() {
 							>
 								{t("form.sections.stock")}
 							</button>
-							<button
-								type="button"
-								role="tab"
-								aria-selected={activeTab === "prescription"}
-								className={`form-tab${activeTab === "prescription" ? " active" : ""}`}
-								onClick={() => setActiveTab("prescription")}
-							>
-								{t("form.sections.prescription")}
-							</button>
 							<button
 								type="button"
 								role="tab"
@@ -984,6 +1081,15 @@ export function MedicationsPage() {
 							>
 								{t("form.sections.schedule")}
 							</button>
+							<button
+								type="button"
+								role="tab"
+								aria-selected={activeTab === "prescription"}
+								className={`form-tab${activeTab === "prescription" ? " active" : ""}`}
+								onClick={() => setActiveTab("prescription")}
+							>
+								{t("form.sections.prescription")}
+							</button>
 						</div>
 						<fieldset className="readonly-fieldset" disabled={readOnlyView}>
 							<div className={`form-tab-panel${activeTab === "general" ? " active" : ""}`}>
@@ -1031,7 +1137,9 @@ export function MedicationsPage() {
 										<select
 											className="package-type-select"
 											value={form.packageType}
-											onChange={(e) => handleValueChange("packageType", e.target.value)}
+											onChange={(e) =>
+												handleValueChange("packageType", e.target.value as import("../types").PackageType)
+											}
 										>
 											<option value="blister">{t("form.packageTypeBlister")}</option>
 											<option value="bottle">{t("form.packageTypeBottle")}</option>
@@ -1093,7 +1201,7 @@ export function MedicationsPage() {
 														<button
 															type="button"
 															className="danger icon-only tooltip-trigger"
-															onClick={() => deleteMedImage(editingId)}
+															onClick={() => handleDeleteMedImage(editingId)}
 															aria-label={t("form.removeImage")}
 															data-tooltip={t("form.removeImage")}
 														>
@@ -1106,7 +1214,11 @@ export function MedicationsPage() {
 												<input
 													type="file"
 													accept="image/jpeg,image/png,image/webp,image/gif"
-													onChange={(e) => e.target.files?.[0] && uploadMedImage(editingId, e.target.files[0])}
+													onChange={(e) => {
+														const file = e.target.files?.[0];
+														e.target.value = "";
+														if (file) void tryUploadMedImage(editingId, file);
+													}}
 													disabled={uploadingImage}
 												/>
 											);
@@ -1134,18 +1246,11 @@ export function MedicationsPage() {
 											<input
 												type="file"
 												accept="image/jpeg,image/png,image/webp,image/gif"
-												onChange={(e) => {
-													const file = e.target.files?.[0];
-													if (file) {
-														setPendingImage(file);
-														const reader = new FileReader();
-														reader.onload = (ev) => setPendingImagePreview(ev.target?.result as string);
-														reader.readAsDataURL(file);
-													}
-												}}
+												onChange={handlePendingMedicationImageSelection}
 											/>
 										);
 									})()}
+									{imageUploadError && <span className="field-error">{imageUploadError}</span>}
 								</div>
 							</div>
 							{/* end general tab */}
@@ -1157,32 +1262,32 @@ export function MedicationsPage() {
 										<>
 											<label>
 												{t("form.packs")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.packCount}
-													onChange={(e) => handleValueChange("packCount", e.target.value)}
+													onChange={(nextValue) => handleValueChange("packCount", nextValue)}
+													min={0}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label>
 												{t("form.blistersPerPack")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.blistersPerPack}
-													onChange={(e) => handleValueChange("blistersPerPack", e.target.value)}
+													onChange={(nextValue) => handleValueChange("blistersPerPack", nextValue)}
+													min={1}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label>
 												{t("form.pillsPerBlister")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.pillsPerBlister}
-													onChange={(e) => handleValueChange("pillsPerBlister", e.target.value)}
+													onChange={(nextValue) => handleValueChange("pillsPerBlister", nextValue)}
+													min={1}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label>
@@ -1194,22 +1299,22 @@ export function MedicationsPage() {
 										<>
 											<label>
 												{t("form.totalCapacity")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.totalPills}
-													onChange={(e) => handleValueChange("totalPills", e.target.value)}
+													onChange={(nextValue) => handleValueChange("totalPills", nextValue)}
+													min={0}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label>
 												{t("form.currentPills")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.looseTablets}
-													onChange={(e) => handleValueChange("looseTablets", e.target.value)}
+													onChange={(nextValue) => handleValueChange("looseTablets", nextValue)}
+													min={0}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 										</>
@@ -1300,32 +1405,32 @@ export function MedicationsPage() {
 										<>
 											<label className="prescription-field">
 												{t("prescription.authorizedRefills")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.prescriptionAuthorizedRefills}
-													onChange={(e) => handleValueChange("prescriptionAuthorizedRefills", e.target.value)}
+													onChange={(nextValue) => handleValueChange("prescriptionAuthorizedRefills", nextValue)}
+													min={0}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label className="prescription-field">
 												{t("prescription.remainingRefills")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.prescriptionRemainingRefills}
-													onChange={(e) => handleValueChange("prescriptionRemainingRefills", e.target.value)}
+													onChange={(nextValue) => handleValueChange("prescriptionRemainingRefills", nextValue)}
+													min={0}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label className="prescription-field">
 												{t("prescription.lowThreshold")}
-												<input
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
+												<FormNumberStepper
 													value={form.prescriptionLowRefillThreshold}
-													onChange={(e) => handleValueChange("prescriptionLowRefillThreshold", e.target.value)}
+													onChange={(nextValue) => handleValueChange("prescriptionLowRefillThreshold", nextValue)}
+													min={0}
+													decrementLabel={decrementValueLabel}
+													incrementLabel={incrementValueLabel}
 												/>
 											</label>
 											<label className="prescription-field">
@@ -1362,22 +1467,24 @@ export function MedicationsPage() {
 											<div className="blister-inputs">
 												<label>
 													{t("form.blisters.usage")}
-													<input
-														type="text"
-														inputMode="decimal"
-														pattern="[0-9]*\.?[0-9]*"
+													<FormNumberStepper
 														value={intake.usage}
-														onChange={(e) => setIntakeValue(idx, "usage", e.target.value)}
+														onChange={(nextValue) => setIntakeValue(idx, "usage", nextValue)}
+														min={0.5}
+														step={0.5}
+														allowDecimal={true}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label>
 													{t("form.blisters.everyDays")}
-													<input
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
+													<FormNumberStepper
 														value={intake.every}
-														onChange={(e) => setIntakeValue(idx, "every", e.target.value)}
+														onChange={(nextValue) => setIntakeValue(idx, "every", nextValue)}
+														min={1}
+														decrementLabel={decrementValueLabel}
+														incrementLabel={incrementValueLabel}
 													/>
 												</label>
 												<label>
@@ -1486,8 +1593,9 @@ export function MedicationsPage() {
 				onRemoveIntake={removeIntake}
 				onHandleValueChange={handleValueChange}
 				meds={allMeds}
-				onUploadMedImage={uploadMedImage}
-				onDeleteMedImage={deleteMedImage}
+				onUploadMedImage={handleUploadMedImage}
+				onDeleteMedImage={handleDeleteMedImage}
+				imageUploadError={imageUploadError}
 				onClose={() => {
 					closeEditModal();
 				}}
@@ -108,6 +108,22 @@ body.modal-open {
 	overflow-x: hidden;
 }

+.route-transition-mask {
+	position: fixed;
+	inset: 0;
+	background: var(--bg-primary);
+	opacity: 0;
+	pointer-events: none;
+	transition: opacity 140ms ease-out;
+	z-index: 1500;
+}
+
+.route-transition-mask.active {
+	transition: none;
+	opacity: 1;
+	pointer-events: auto;
+}
+
 .hero {
 	background: linear-gradient(135deg, rgba(67, 106, 255, 0.08), rgba(115, 195, 255, 0.06));
 	border: 1px solid var(--border-primary);
@@ -1127,11 +1143,15 @@ body.modal-open {
 }
 .blister-row .blister-inputs {
 	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr;
+	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(10.75rem, 1fr) minmax(7.25rem, 0.8fr);
 	gap: 0.75rem;
 	align-items: end;
 }

+.blister-row .blister-inputs > label {
+	min-width: 0;
+}
+
 .blister-row .blister-inputs label.taken-by-field {
 	grid-column: span 2;
 }
@@ -1154,6 +1174,17 @@ body.modal-open {
 	}
 }

+/* Desktop edit sidebar can be narrow; avoid clipping right-side controls. */
+@media (min-width: 769px) {
+	.edit-sidebar .blister-row .blister-inputs {
+		grid-template-columns: 1fr 1fr;
+	}
+
+	.edit-sidebar .blister-row .blister-inputs label.taken-by-field {
+		grid-column: 1 / -1;
+	}
+}
+
 .gap {
 	gap: 0.6rem;
 }
@@ -3376,7 +3407,7 @@ button.has-validation-error {
 	transition:
 		opacity 0.15s,
 		visibility 0.15s;
-	z-index: 100;
+	z-index: 1100;
 	pointer-events: none;
 }

@@ -3394,7 +3425,7 @@ button.has-validation-error {
 	transition:
 		opacity 0.15s,
 		visibility 0.15s;
-	z-index: 101;
+	z-index: 1101;
 }

 /* Tooltip aligned to left edge of icon (prevents clipping inside modals) */
@@ -4335,7 +4366,7 @@ button.has-validation-error {
 	overscroll-behavior: contain;
 	display: flex;
 	flex-direction: column;
-	overflow: hidden;
+	overflow: visible;
 }

 .med-detail-modal .med-detail-body {
@@ -4382,6 +4413,7 @@ button.has-validation-error {
 	color: white;
 	font-weight: 600;
 	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+	text-align: center;
 }

 .taken-by-badge {
@@ -4534,7 +4566,7 @@ button.has-validation-error {
 }

 .med-detail-body {
-	padding: 1.5rem 2rem 0;
+	padding: 1.5rem 2rem 2rem;
 	background: var(--bg-primary);
 }

@@ -4701,7 +4733,7 @@ button.has-validation-error {
 	background: var(--bg-primary);
 	border-radius: 0 0 12px 12px;
 	flex-shrink: 0;
-	overflow: hidden;
+	overflow: visible;
 	position: relative;
 	z-index: 1;
 	padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
@@ -4997,7 +5029,8 @@ button.has-validation-error {

 /* Reminder icon indicator */
 .reminder-icon.info-tooltip,
-.notes-icon.info-tooltip {
+.notes-icon.info-tooltip,
+.prescription-icon.info-tooltip {
 	width: auto;
 	height: auto;
 	margin: 0 !important;
@@ -5012,6 +5045,10 @@ button.has-validation-error {
 	vertical-align: baseline;
 }

+.prescription-icon.info-tooltip {
+	color: var(--success);
+}
+
 .reminder-icon.info-tooltip,
 .blister-reminder-icon {
 	color: var(--warning);
@@ -5026,8 +5063,13 @@ button.has-validation-error {
 	color: #1d4ed8; /* darker blue — strong contrast on light backgrounds */
 }

+[data-theme="light"] .prescription-icon.info-tooltip {
+	color: #047857; /* dark emerald — strong contrast on light backgrounds */
+}
+
 .reminder-icon.info-tooltip:hover,
-.notes-icon.info-tooltip:hover {
+.notes-icon.info-tooltip:hover,
+.prescription-icon.info-tooltip:hover {
 	opacity: 1;
 }

@@ -446,7 +446,7 @@
 }

 .refill-number-stepper input {
-	order: initial;
+	order: 0;
 	text-align: center;
 	padding: 0.75rem 0.5rem;
 }
@@ -460,21 +460,29 @@
 }

 .refill-number-stepper .stepper-btn.decrement {
-	order: initial;
+	order: -1;
+	background: color-mix(in srgb, var(--danger) 22%, var(--bg-tertiary));
 	color: var(--danger);
 }

 .refill-number-stepper .stepper-btn.increment {
-	order: initial;
+	order: 1;
 	border-right: none;
 	border-left: 1px solid var(--border-primary);
-	background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
+	background: color-mix(in srgb, var(--success) 22%, var(--bg-tertiary));
 	color: var(--success);
 }

 .refill-number-stepper .stepper-btn:hover:not(:disabled) {
 	filter: none;
-	background: color-mix(in srgb, var(--accent) 14%, var(--bg-tertiary));
+}
+
+.refill-number-stepper .stepper-btn.decrement:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--danger) 36%, var(--bg-tertiary));
+}
+
+.refill-number-stepper .stepper-btn.increment:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--success) 36%, var(--bg-tertiary));
 }

@media (min-width: 641px) {
@@ -488,12 +496,12 @@
 	}

 	[data-theme="light"] .refill-number-stepper .stepper-btn.decrement {
-		background: color-mix(in srgb, var(--bg-tertiary) 90%, transparent);
+		background: color-mix(in srgb, #dc2626 18%, white);
 		color: #b91c1c;
 	}

 	[data-theme="light"] .refill-number-stepper .stepper-btn.increment {
-		background: color-mix(in srgb, var(--bg-tertiary) 90%, transparent);
+		background: color-mix(in srgb, #0f766e 18%, white);
 		color: #0f766e;
 	}
 }
@@ -504,6 +512,111 @@
 	}
 }

+/* Form stepper keeps symmetric - value + layout in all contexts (desktop/mobile). */
+.form-number-stepper {
+	display: grid;
+	grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+}
+
+.form-number-stepper input {
+	order: 0;
+	text-align: center;
+	padding: 0.75rem 0.5rem;
+	min-width: 0;
+	width: 100%;
+	color: var(--text-primary);
+}
+
+.form-number-stepper .stepper-btn {
+	flex: 0 0 auto;
+	border-right: 1px solid var(--border-primary);
+	border-left: none;
+	background: color-mix(in srgb, var(--bg-tertiary) 85%, transparent);
+	color: var(--text-secondary);
+}
+
+.form-number-stepper .stepper-btn.decrement {
+	order: -1;
+	background: color-mix(in srgb, var(--danger) 22%, var(--bg-tertiary));
+	color: var(--danger);
+}
+
+.form-number-stepper .stepper-btn.increment {
+	order: 1;
+	border-right: none;
+	border-left: 1px solid var(--border-primary);
+	background: color-mix(in srgb, var(--success) 22%, var(--bg-tertiary));
+	color: var(--success);
+}
+
+.form-number-stepper .stepper-btn:hover:not(:disabled) {
+	filter: none;
+}
+
+.form-number-stepper .stepper-btn.decrement:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--danger) 36%, var(--bg-tertiary));
+}
+
+.form-number-stepper .stepper-btn.increment:hover:not(:disabled) {
+	background: color-mix(in srgb, var(--success) 36%, var(--bg-tertiary));
+}
+
+/* Highlight both controls when the center value field is focused (keyboard/click). */
+.form-number-stepper:has(input:focus) .stepper-btn.decrement:not(:disabled),
+.form-number-stepper:has(input:focus-visible) .stepper-btn.decrement:not(:disabled) {
+	background: color-mix(in srgb, var(--danger) 36%, var(--bg-tertiary));
+}
+
+.form-number-stepper:has(input:focus) .stepper-btn.increment:not(:disabled),
+.form-number-stepper:has(input:focus-visible) .stepper-btn.increment:not(:disabled) {
+	background: color-mix(in srgb, var(--success) 36%, var(--bg-tertiary));
+}
+
+/* Dense schedule grids need a compact variant so the middle value stays visible. */
+.blister-inputs .form-number-stepper,
+.mobile-edit-form .blister-row .form-number-stepper {
+	grid-template-columns: 2.35rem minmax(2rem, 1fr) 2.35rem;
+}
+
+.blister-inputs .form-number-stepper input,
+.mobile-edit-form .blister-row .form-number-stepper input {
+	min-height: 2.35rem;
+	padding: 0.5rem 0.35rem;
+}
+
+.blister-inputs .form-number-stepper .stepper-btn,
+.mobile-edit-form .blister-row .form-number-stepper .stepper-btn {
+	min-width: 2.35rem;
+	min-height: 2.35rem;
+}
+
+@media (min-width: 641px) {
+	.form-number-stepper {
+		display: grid;
+		grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+	}
+
+	.form-number-stepper input {
+		padding-left: 0.5rem;
+	}
+
+	[data-theme="light"] .form-number-stepper .stepper-btn.decrement {
+		background: color-mix(in srgb, #dc2626 18%, white);
+		color: #b91c1c;
+	}
+
+	[data-theme="light"] .form-number-stepper .stepper-btn.increment {
+		background: color-mix(in srgb, #0f766e 18%, white);
+		color: #0f766e;
+	}
+}
+
+@media (max-width: 640px) {
+	.form-number-stepper {
+		grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
+	}
+}
+
 .edit-stock-summary {
 	display: flex;
 	gap: 0.5rem;
@@ -284,24 +284,6 @@ describe("App", () => {
 		expect(screen.getByText("lightbox-open-med-image.png")).toBeInTheDocument();
 	});

-	it("handles Escape key with modal priority", () => {
-		appContextMock.scheduleLightboxImage = "med-image.png";
-		appContextMock.showImageLightbox = true;
-		appContextMock.showShareDialog = true;
-
-		render(
-			<MemoryRouter initialEntries={["/dashboard"]}>
-				<App />
-			</MemoryRouter>
-		);
-
-		document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-
-		expect(appContextMock.closeScheduleLightbox).toHaveBeenCalled();
-		expect(appContextMock.closeImageLightbox).not.toHaveBeenCalled();
-		expect(appContextMock.closeShareDialog).not.toHaveBeenCalled();
-	});
-
 	it("handles popstate by closing selected medication", () => {
 		appContextMock.selectedMed = { id: 1, packCount: 1, looseTablets: 0, updatedAt: null };

@@ -344,20 +326,6 @@ describe("App", () => {
 		expect(window.history.pushState).toHaveBeenCalled();
 	});

-	it("Escape key closes about modal via history back", () => {
-		render(
-			<MemoryRouter initialEntries={["/dashboard"]}>
-				<App />
-			</MemoryRouter>
-		);
-
-		fireEvent.click(screen.getByRole("button", { name: "open-about" }));
-		expect(screen.getByText("about-modal-open")).toBeInTheDocument();
-
-		document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-		expect(window.history.back).toHaveBeenCalled();
-	});
-
 	it("handles popstate by resetting share dialog state", () => {
 		appContextMock.showShareDialog = true;

@@ -381,47 +349,6 @@ describe("App", () => {
 		expect(screen.getByText("dashboard-page")).toBeInTheDocument();
 	});

-	it("Escape closes refill modal when it is topmost", () => {
-		appContextMock.showRefillModal = true;
-
-		render(
-			<MemoryRouter initialEntries={["/dashboard"]}>
-				<App />
-			</MemoryRouter>
-		);
-
-		document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-		expect(appContextMock.closeRefillModal).toHaveBeenCalled();
-	});
-
-	it("Escape closes edit stock modal when it is topmost", () => {
-		appContextMock.showEditStockModal = true;
-
-		render(
-			<MemoryRouter initialEntries={["/dashboard"]}>
-				<App />
-			</MemoryRouter>
-		);
-
-		document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-		expect(appContextMock.closeEditStockModal).toHaveBeenCalled();
-	});
-
-	it("Escape closes user filter and medication detail in lower priority", () => {
-		appContextMock.selectedUser = "Max";
-		appContextMock.selectedMed = { id: 1, packCount: 1, looseTablets: 0, updatedAt: null };
-
-		render(
-			<MemoryRouter initialEntries={["/dashboard"]}>
-				<App />
-			</MemoryRouter>
-		);
-
-		document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-		expect(appContextMock.closeUserFilter).toHaveBeenCalled();
-		expect(appContextMock.closeMedDetail).not.toHaveBeenCalled();
-	});
-
 	it("popstate closes image lightbox before other modals", () => {
 		appContextMock.showImageLightbox = true;
 		appContextMock.scheduleLightboxImage = "img.png";
@@ -450,17 +377,4 @@ describe("App", () => {
 		window.dispatchEvent(new PopStateEvent("popstate"));
 		expect(appContextMock.setScheduleLightboxImage).toHaveBeenCalledWith(null);
 	});
-
-	it("Escape closes medication detail when no higher-priority modal is open", () => {
-		appContextMock.selectedMed = { id: 1, packCount: 1, looseTablets: 0, updatedAt: null };
-
-		render(
-			<MemoryRouter initialEntries={["/dashboard"]}>
-				<App />
-			</MemoryRouter>
-		);
-
-		document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
-		expect(appContextMock.closeMedDetail).toHaveBeenCalled();
-	});
 });
@@ -370,10 +370,13 @@ describe("AppHeader", () => {
 		fireEvent.click(userMenuBtn);
 		fireEvent.click(screen.getByText(/auth\.signOut/i));
 		await waitFor(() => {
-			expect(fetch).toHaveBeenCalledWith("/api/auth/logout", {
-				method: "POST",
-				credentials: "include",
-			});
+			expect(fetch).toHaveBeenCalledWith(
+				"/api/auth/logout",
+				expect.objectContaining({
+					method: "POST",
+					credentials: "include",
+				})
+			);
 		});
 	});
 });
@@ -39,7 +39,7 @@ describe("AuthProvider", () => {
 		renderHook(() => useAuth(), { wrapper });

 		await waitFor(() => {
-			expect(fetch).toHaveBeenCalledWith("/api/auth/state");
+			expect(fetch).toHaveBeenCalledWith("/api/auth/state", expect.anything());
 		});
 	});

@@ -55,7 +55,7 @@ describe("AuthProvider", () => {

 		// Wait for the initial fetch to complete
 		await waitFor(() => {
-			expect(fetch).toHaveBeenCalledWith("/api/auth/state");
+			expect(fetch).toHaveBeenCalledWith("/api/auth/state", expect.anything());
 		});

 		// Wait a bit more to ensure no additional calls happen
@@ -94,18 +94,21 @@ describe("AuthProvider", () => {
 		const response = await result.current.authFetch("/api/medications", { method: "GET" });

 		expect(response.ok).toBe(true);
-		expect(fetch).toHaveBeenNthCalledWith(2, "/api/medications", {
-			method: "GET",
-			credentials: "include",
-		});
-		expect(fetch).toHaveBeenNthCalledWith(3, "/api/auth/refresh", {
-			method: "POST",
-			credentials: "include",
-		});
-		expect(fetch).toHaveBeenNthCalledWith(4, "/api/medications", {
-			method: "GET",
-			credentials: "include",
-		});
+		expect(fetch).toHaveBeenNthCalledWith(
+			2,
+			"/api/medications",
+			expect.objectContaining({ method: "GET", credentials: "include" })
+		);
+		expect(fetch).toHaveBeenNthCalledWith(
+			3,
+			"/api/auth/refresh",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		expect(fetch).toHaveBeenNthCalledWith(
+			4,
+			"/api/medications",
+			expect.objectContaining({ method: "GET", credentials: "include" })
+		);
 	});

 	it("authFetch logs user out when refresh fails", async () => {
@@ -893,7 +896,7 @@ describe("AuthProvider methods", () => {
 		});

 		const file = new File(["avatar"], "avatar.png", { type: "image/png" });
-		await expect(result.current.uploadAvatar(file)).rejects.toThrow("Upload failed");
+		await expect(result.current.uploadAvatar(file)).rejects.toThrow("UNKNOWN");
 	});

 	it("deleteAvatar succeeds and refreshes user", async () => {
@@ -170,9 +170,11 @@ describe("useMedications", () => {
 		const { result } = renderHook(() => useMedications());
 		const file = new File(["test"], "test.jpg", { type: "image/jpeg" });

-		await act(async () => {
-			await result.current.uploadMedImage(1, file);
-		});
+		await expect(
+			act(async () => {
+				await result.current.uploadMedImage(1, file);
+			})
+		).rejects.toThrow("Upload failed");

 		expect(result.current.uploadingImage).toBe(false);
 	});
@@ -14,7 +14,7 @@ describe("useShare", () => {
 		mockAlert = vi.fn();
 		global.alert = mockAlert;

-		mockClipboard = { writeText: vi.fn() };
+		mockClipboard = { writeText: vi.fn().mockResolvedValue(undefined) };
 		Object.defineProperty(navigator, "clipboard", {
 			value: mockClipboard,
 			writable: true,
@@ -237,7 +237,7 @@ describe("useShare", () => {
 			result.current.setShareLink("http://localhost:5173/share/test-token");
 		});

-		act(() => {
+		await act(async () => {
 			result.current.copyShareLink();
 		});

@@ -0,0 +1,20 @@
+export function createCorrelationId(prefix: string = "fe"): string {
+	const randomPart = Math.random().toString(36).slice(2, 10);
+	return `${prefix}-${Date.now().toString(36)}-${randomPart}`;
+}
+
+export function withCorrelation(
+	init?: RequestInit,
+	prefix: string = "fe"
+): { correlationId: string; init: RequestInit } {
+	const correlationId = createCorrelationId(prefix);
+	const headers = new Headers(init?.headers ?? {});
+	headers.set("x-correlation-id", correlationId);
+	return {
+		correlationId,
+		init: {
+			...init,
+			headers,
+		},
+	};
+}
@@ -0,0 +1,30 @@
+import type { TFunction } from "i18next";
+
+export const MAX_IMAGE_UPLOAD_BYTES = 10 * 1024 * 1024;
+
+/** Error codes returned by the backend image upload endpoints. */
+const IMAGE_ERROR_CODE_MAP: Record<string, string> = {
+	IMAGE_TOO_LARGE: "form.imageUploadErrors.tooLarge",
+	INVALID_TYPE: "form.imageUploadErrors.invalidType",
+	INVALID_IMAGE: "form.imageUploadErrors.invalidImage",
+	NO_FILE: "form.imageUploadErrors.noFile",
+	NETWORK_ERROR: "common.networkError",
+};
+
+/**
+ * Maps a backend image-upload error code to a translated user-facing message.
+ * Falls back to a generic error when the code is unknown.
+ */
+export function resolveImageUploadError(code: string, t: TFunction): string {
+	const normalized = normalizeErrorCode(code);
+	const key = IMAGE_ERROR_CODE_MAP[normalized];
+	return key ? t(key) : t("form.imageUploadErrors.generic");
+}
+
+/** Browser network errors are not error codes — normalise them. */
+function normalizeErrorCode(code: string): string {
+	if (code === "Failed to fetch" || code.startsWith("NetworkError")) {
+		return "NETWORK_ERROR";
+	}
+	return code;
+}
@@ -6,7 +6,7 @@
    "": {
      "name": "medassist-ng",
      "devDependencies": {
-        "@biomejs/biome": "^2.4.1",
+        "@biomejs/biome": "^2.4.4",
        "husky": "^9.1.0",
        "lint-staged": "^16.2.7"
      }
@@ -76,9 +76,9 @@
      }
    },
    "node_modules/@biomejs/biome": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.1.tgz",
-      "integrity": "sha512-8c5DZQl1hfpLRlTZ21W5Ef2R314E4UJUEtkMbo303ElTVe6fYtapwldv7tZlgwm+9YP0Mhk7dUSTkOY8nQ2/2w==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.4.tgz",
+      "integrity": "sha512-tigwWS5KfJf0cABVd52NVaXyAVv4qpUXOWJ1rxFL8xF1RVoeS2q/LK+FHgYoKMclJCuRoCWAPy1IXaN9/mS61Q==",
      "dev": true,
      "license": "MIT OR Apache-2.0",
      "bin": {
@@ -92,20 +92,20 @@
        "url": "https://opencollective.com/biome"
      },
      "optionalDependencies": {
-        "@biomejs/cli-darwin-arm64": "2.4.1",
-        "@biomejs/cli-darwin-x64": "2.4.1",
-        "@biomejs/cli-linux-arm64": "2.4.1",
-        "@biomejs/cli-linux-arm64-musl": "2.4.1",
-        "@biomejs/cli-linux-x64": "2.4.1",
-        "@biomejs/cli-linux-x64-musl": "2.4.1",
-        "@biomejs/cli-win32-arm64": "2.4.1",
-        "@biomejs/cli-win32-x64": "2.4.1"
+        "@biomejs/cli-darwin-arm64": "2.4.4",
+        "@biomejs/cli-darwin-x64": "2.4.4",
+        "@biomejs/cli-linux-arm64": "2.4.4",
+        "@biomejs/cli-linux-arm64-musl": "2.4.4",
+        "@biomejs/cli-linux-x64": "2.4.4",
+        "@biomejs/cli-linux-x64-musl": "2.4.4",
+        "@biomejs/cli-win32-arm64": "2.4.4",
+        "@biomejs/cli-win32-x64": "2.4.4"
      }
    },
    "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.1.tgz",
-      "integrity": "sha512-wKiX2znbgFRaivRplSbu53hiREp1ohlGRuWqOL90IPetLi5E32tkiMYu8uSLXVzDgbIVM58WsesPaczIVtJkOQ==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.4.tgz",
+      "integrity": "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A==",
      "cpu": [
        "arm64"
      ],
@@ -120,9 +120,9 @@
      }
    },
    "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.1.tgz",
-      "integrity": "sha512-rxLYVg3skeXh9K0om7JdkKcCdvtqrF9ECZ7dsmLuYObboK7DZ1J0z6xc2NGKSXw+cEQo3ie6NQgWBcdGJ16yQg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.4.tgz",
+      "integrity": "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg==",
      "cpu": [
        "x64"
      ],
@@ -137,9 +137,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.1.tgz",
-      "integrity": "sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.4.tgz",
+      "integrity": "sha512-V/NFfbWhsUU6w+m5WYbBenlEAz8eYnSqRMDMAW3K+3v0tYVkNyZn8VU0XPxk/lOqNXLSCCrV7FmV/u3SjCBShg==",
      "cpu": [
        "arm64"
      ],
@@ -154,9 +154,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-arm64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.1.tgz",
-      "integrity": "sha512-Brwh/QL3wfX5UyZcyEamS1Q+EF8Q7ud+MS5mq/9BWX2ArfxQlgsqlukwK92xrGpXWcspXkSG9U0CoxvCZZkTKQ==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.4.tgz",
+      "integrity": "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ==",
      "cpu": [
        "arm64"
      ],
@@ -171,9 +171,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.1.tgz",
-      "integrity": "sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.4.tgz",
+      "integrity": "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg==",
      "cpu": [
        "x64"
      ],
@@ -188,9 +188,9 @@
      }
    },
    "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.1.tgz",
-      "integrity": "sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.4.tgz",
+      "integrity": "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g==",
      "cpu": [
        "x64"
      ],
@@ -205,9 +205,9 @@
      }
    },
    "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.1.tgz",
-      "integrity": "sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.4.tgz",
+      "integrity": "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q==",
      "cpu": [
        "arm64"
      ],
@@ -222,9 +222,9 @@
      }
    },
    "node_modules/@biomejs/cli-win32-x64": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.1.tgz",
-      "integrity": "sha512-kfjOCzvaHC7olg8pmEuSsYzHntxdipkAGzr5nFiaEU2EPDWRE/myqUBaFDl9pHqEc8yEtQFiXF945PlTSkuOTw==",
+      "version": "2.4.4",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.4.tgz",
+      "integrity": "sha512-gnOHKVPFAAPrpoPt2t+Q6FZ7RPry/FDV3GcpU53P3PtLNnQjBmKyN2Vh/JtqXet+H4pme8CC76rScwdjDcT1/A==",
      "cpu": [
        "x64"
      ],
@@ -7,7 +7,7 @@
    "lint:fix": "cd backend && npm run lint:fix && cd ../frontend && npm run lint:fix"
  },
  "devDependencies": {
-    "@biomejs/biome": "^2.4.1",
+    "@biomejs/biome": "^2.4.4",
    "husky": "^9.1.0",
    "lint-staged": "^16.2.7"
  },
Author	SHA1	Message	Date
Daniel Volz	0fded0d42f	chore: release v1.16.0 (#308 )	2026-02-25 00:19:56 +01:00
Daniel Volz	badee6067c	chore: add .claude/ to gitignore (#307 )	2026-02-25 00:09:20 +01:00
Daniel Volz	6161c14a7b	fix: logo optimization, deprecated meta tag, and clipboard copy fallback (#306 ) - Replace 2 MB favicon.svg (base64-PNG-in-SVG) with optimized 43 KB app-logo.png (256x256) - Update AppHeader and AboutModal references to use new logo - Remove SVG favicon link from index.html (PNG/ICO favicons remain) - Fix deprecated apple-mobile-web-app-capable → mobile-web-app-capable meta tag - Add clipboard copy fallback for non-secure contexts (LAN IP over HTTP) Closes #303	2026-02-25 00:04:35 +01:00
Daniel Volz	96b2a0c96f	feat: image upload optimization with sharp, thumbnails, and structured error codes (#304 ) - Add sharp for server-side image processing (WebP conversion + thumbnails) - New shared backend utility for image upload, optimization, and cleanup - Return structured error codes from upload endpoints (IMAGE_TOO_LARGE, INVALID_TYPE, etc.) - Frontend error code mapping with i18n support (EN + DE) - MedicationAvatar tries thumbnail first, falls back to full image - Error display in MedicationsPage, MobileEditModal, and Auth avatar upload Closes #302	2026-02-24 23:52:59 +01:00
Daniel Volz	7a32b2045e	fix: run one stock reminder catch-up after restart (#300 ) * fix: run one stock reminder catch-up after restart * fix(backend): persist scheduler stock-check timestamp in reminder state	2026-02-24 21:21:34 +01:00
Daniel Volz	26475fd3d0	feat: add correlation ids and tighten frontend security headers (#299 ) * feat: add correlation ids and tighten frontend security headers * docs: remove obsolete project setup guide * fix: restore health config flags for compatibility * test(frontend): align auth fetch assertions with correlation headers	2026-02-24 21:21:30 +01:00
Daniel Volz	63cd9ef19b	fix: harden share link dose operations and token reuse (#298 ) * fix: harden share link dose operations and token reuse * fix: restore share dose compatibility and add correlation helper	2026-02-24 21:12:43 +01:00
github-actions[bot]	f15c2dd79f	chore: update test count badges [skip ci]	2026-02-23 18:58:48 +00:00
Daniel Volz	b0c5d48095	chore: update bug template guidance and include app test changes (#293 )	2026-02-23 19:54:18 +01:00
dependabot[bot]	05226cc500	build(deps): bump the minor-and-patch group in /frontend with 4 updates (#291 ) Bumps the minor-and-patch group in /frontend with 4 updates: [i18next](https://github.com/i18next/i18next), [lucide-react](https://github.com/lucide-icons/lucide/tree/HEAD/packages/lucide-react), [react-router-dom](https://github.com/remix-run/react-router/tree/HEAD/packages/react-router-dom) and [@biomejs/biome](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome). Updates `i18next` from 25.8.10 to 25.8.13 - [Release notes](https://github.com/i18next/i18next/releases) - [Changelog](https://github.com/i18next/i18next/blob/master/CHANGELOG.md) - [Commits](https://github.com/i18next/i18next/compare/v25.8.10...v25.8.13) Updates `lucide-react` from 0.574.0 to 0.575.0 - [Release notes](https://github.com/lucide-icons/lucide/releases) - [Commits](https://github.com/lucide-icons/lucide/commits/0.575.0/packages/lucide-react) Updates `react-router-dom` from 7.13.0 to 7.13.1 - [Release notes](https://github.com/remix-run/react-router/releases) - [Changelog](https://github.com/remix-run/react-router/blob/main/packages/react-router-dom/CHANGELOG.md) - [Commits](https://github.com/remix-run/react-router/commits/react-router-dom@7.13.1/packages/react-router-dom) Updates `@biomejs/biome` from 2.4.1 to 2.4.4 - [Release notes](https://github.com/biomejs/biome/releases) - [Changelog](https://github.com/biomejs/biome/blob/main/packages/@biomejs/biome/CHANGELOG.md) - [Commits](https://github.com/biomejs/biome/commits/@biomejs/biome@2.4.4/packages/@biomejs/biome) --- updated-dependencies: - dependency-name: i18next dependency-version: 25.8.13 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: minor-and-patch - dependency-name: lucide-react dependency-version: 0.575.0 dependency-type: direct:production update-type: version-update:semver-minor dependency-group: minor-and-patch - dependency-name: react-router-dom dependency-version: 7.13.1 dependency-type: direct:production update-type: version-update:semver-patch dependency-group: minor-and-patch - dependency-name: "@biomejs/biome" dependency-version: 2.4.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: minor-and-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-02-23 19:25:28 +01:00
dependabot[bot]	3e4f1440a9	build(deps-dev): bump the minor-and-patch group (#290 ) Bumps the minor-and-patch group in /backend with 3 updates: [@biomejs/biome](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome), [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node) and [@types/nodemailer](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/nodemailer). Updates `@biomejs/biome` from 2.4.1 to 2.4.4 - [Release notes](https://github.com/biomejs/biome/releases) - [Changelog](https://github.com/biomejs/biome/blob/main/packages/@biomejs/biome/CHANGELOG.md) - [Commits](https://github.com/biomejs/biome/commits/@biomejs/biome@2.4.4/packages/@biomejs/biome) Updates `@types/node` from 25.2.3 to 25.3.0 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `@types/nodemailer` from 7.0.10 to 7.0.11 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/nodemailer) --- updated-dependencies: - dependency-name: "@biomejs/biome" dependency-version: 2.4.4 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: minor-and-patch - dependency-name: "@types/node" dependency-version: 25.3.0 dependency-type: direct:development update-type: version-update:semver-minor dependency-group: minor-and-patch - dependency-name: "@types/nodemailer" dependency-version: 7.0.11 dependency-type: direct:development update-type: version-update:semver-patch dependency-group: minor-and-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-02-23 19:25:24 +01:00
dependabot[bot]	d64a833bda	build(deps-dev): bump @biomejs/biome from 2.4.1 to 2.4.4 (#289 ) Bumps [@biomejs/biome](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome) from 2.4.1 to 2.4.4. - [Release notes](https://github.com/biomejs/biome/releases) - [Changelog](https://github.com/biomejs/biome/blob/main/packages/@biomejs/biome/CHANGELOG.md) - [Commits](https://github.com/biomejs/biome/commits/@biomejs/biome@2.4.4/packages/@biomejs/biome) --- updated-dependencies: - dependency-name: "@biomejs/biome" dependency-version: 2.4.4 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-02-23 19:25:19 +01:00
Daniel Volz	ba36f67371	fix: smooth mobile edit transition and align modal validation behavior (#286 ) * fix: reliable Escape key close for all modals via useEscapeKey hook - Add useEscapeKey hook (document-level keydown listener) - Retrofit all 12 modal/overlay components to use it - Remove redundant overlay onKeyDown Escape handlers - Simplify modal-content onKeyDown to plain stopPropagation - Replace MedDetailModal's capture-phase useEffect with 3 useEscapeKey calls - Replace SharedSchedule's inline useEffect with useEscapeKey - Add mandatory modal rules to UI Consistency skill - All 777 frontend + 569 backend tests pass * fix: smooth mobile edit transition and align modal validation behavior * fix: keep overlay keydown non-closing for Enter key * fix: show mobile name error when validation already exists * fix: restore app-level escape priority handling * fix: prioritize schedule lightbox on Escape	2026-02-23 06:42:06 +01:00
Daniel Volz	2aa6b1f406	fix: prevent background scroll when any modal is open (#284 ) Replace CSS-only modal-open class toggle with a shared useScrollLock hook that uses position:fixed + scroll position save/restore. This reliably prevents background scrolling on all browsers including iOS Safari. The hook supports nesting (lock counter) so stacked modals (e.g. MedDetail → RefillModal) work correctly. Also adds missing modal states to the scroll lock: showRefillModal, showEditStockModal, showImageLightbox, scheduleLightboxImage. Replaces the inline 40-line scroll lock in MobileEditModal with the shared hook.	2026-02-22 18:40:39 +01:00
Daniel Volz	3238a22fd6	test: add E2E regression tests for MedDetail tooltip visibility (#282 ) Guard against tooltip pseudo-elements being clipped by ancestor overflow:hidden or hidden behind modal overlays. Covers edit, stock correction, export, and close button tooltips.	2026-02-22 18:07:58 +01:00
Daniel Volz	b139660241	chore: release v1.15.1 (#280 )	2026-02-22 18:02:32 +01:00
Daniel Volz	259f00e7a0	fix: unify number stepper layout and detail modal padding (#279 ) Reorder stepper DOM elements (input first) and apply refill-number-stepper class to both steppers for consistent CSS order-based layout. Fix missing bottom padding on .med-detail-body.	2026-02-22 17:57:36 +01:00
github-actions[bot]	e9f2760815	chore: update test count badges [skip ci]	2026-02-22 16:55:21 +00:00
Daniel Volz	d0e2ee0783	fix: trim whitespace from username on login and registration (#277 ) Add .trim() to both loginSchema and registerSchema Zod validators so leading/trailing spaces are stripped before validation and DB lookup. Includes 5 new test cases covering trim behavior for both endpoints.	2026-02-22 17:51:41 +01:00
Daniel Volz	c620146c4b	chore: release v1.15.0 (#275 )	2026-02-22 16:54:49 +01:00
Daniel Volz	33c1095e77	feat: add FormNumberStepper to medication edit forms (#274 ) Replace plain numeric inputs with a reusable +/− stepper component in both desktop (MedicationsPage) and mobile (MobileEditModal) edit forms. Applied to Stock, Schedule, and Prescription tab fields. Reorder tabs so Schedule appears before Prescription. Add responsive grid overrides for narrow sidebar and compact schedule rows. Fix label-hover ghost activation by placing <input> first in DOM (CSS order restores visual [−] [value] [+] layout). Closes #273	2026-02-22 16:49:51 +01:00
Daniel Volz	5d657558f7	chore: release v1.14.4 (#272 )	2026-02-22 14:00:02 +01:00