chore: release v1.16.0 (#308)

- 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

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -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:

.github/skills/medassist-ui-consistency/SKILL.md

@@ -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.

.gitignore

@@ -79,6 +79,7 @@ Thumbs.db
 .turbo/
 .roo/
 .roomodes
+.claude/
 AGENTS.md
 docs/TECH_STACK.md
 doku

README.md

@@ -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/Backend_Tests-569%2F569-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/Frontend_Tests-771%2F771-brightgreen?logo=vitest" alt="Frontend Tests 611/611" />
 </p>
 
 ### 🤖 AI-Generated Code

backend/package-lock.json

@@ -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",
+        "@biomejs/biome": "^2.4.4",
-        "@types/node": "^25.2.3",
+        "@types/node": "^25.3.0",
-        "@types/nodemailer": "^7.0.10",
+        "@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",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.4.tgz",
-      "integrity": "sha512-8c5DZQl1hfpLRlTZ21W5Ef2R314E4UJUEtkMbo303ElTVe6fYtapwldv7tZlgwm+9YP0Mhk7dUSTkOY8nQ2/2w==",
+      "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-arm64": "2.4.4",
-        "@biomejs/cli-darwin-x64": "2.4.1",
+        "@biomejs/cli-darwin-x64": "2.4.4",
-        "@biomejs/cli-linux-arm64": "2.4.1",
+        "@biomejs/cli-linux-arm64": "2.4.4",
-        "@biomejs/cli-linux-arm64-musl": "2.4.1",
+        "@biomejs/cli-linux-arm64-musl": "2.4.4",
-        "@biomejs/cli-linux-x64": "2.4.1",
+        "@biomejs/cli-linux-x64": "2.4.4",
-        "@biomejs/cli-linux-x64-musl": "2.4.1",
+        "@biomejs/cli-linux-x64-musl": "2.4.4",
-        "@biomejs/cli-win32-arm64": "2.4.1",
+        "@biomejs/cli-win32-arm64": "2.4.4",
-        "@biomejs/cli-win32-x64": "2.4.1"
+        "@biomejs/cli-win32-x64": "2.4.4"
       }
     },
     "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.4.tgz",
-      "integrity": "sha512-wKiX2znbgFRaivRplSbu53hiREp1ohlGRuWqOL90IPetLi5E32tkiMYu8uSLXVzDgbIVM58WsesPaczIVtJkOQ==",
+      "integrity": "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A==",
       "cpu": [
         "arm64"
       ],
@@ -143,9 +144,9 @@
       }
     },
     "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.4.tgz",
-      "integrity": "sha512-rxLYVg3skeXh9K0om7JdkKcCdvtqrF9ECZ7dsmLuYObboK7DZ1J0z6xc2NGKSXw+cEQo3ie6NQgWBcdGJ16yQg==",
+      "integrity": "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg==",
       "cpu": [
         "x64"
       ],
@@ -160,9 +161,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.4.tgz",
-      "integrity": "sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==",
+      "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",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.4.tgz",
-      "integrity": "sha512-Brwh/QL3wfX5UyZcyEamS1Q+EF8Q7ud+MS5mq/9BWX2ArfxQlgsqlukwK92xrGpXWcspXkSG9U0CoxvCZZkTKQ==",
+      "integrity": "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ==",
       "cpu": [
         "arm64"
       ],
@@ -194,9 +195,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.4.tgz",
-      "integrity": "sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==",
+      "integrity": "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg==",
       "cpu": [
         "x64"
       ],
@@ -211,9 +212,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.4.tgz",
-      "integrity": "sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==",
+      "integrity": "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g==",
       "cpu": [
         "x64"
       ],
@@ -228,9 +229,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.4.tgz",
-      "integrity": "sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==",
+      "integrity": "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q==",
       "cpu": [
         "arm64"
       ],
@@ -245,9 +246,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.4.tgz",
-      "integrity": "sha512-kfjOCzvaHC7olg8pmEuSsYzHntxdipkAGzr5nFiaEU2EPDWRE/myqUBaFDl9pHqEc8yEtQFiXF945PlTSkuOTw==",
+      "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",
+      "version": "25.3.0",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.3.0.tgz",
-      "integrity": "sha512-m0jEgYlYz+mDJZ2+F4v8D1AyQb+QzsNqRuI7xg1VQX/KlKS0qT9r1Mo16yo5F/MtifXFgaofIFsdFMox2SxIbQ==",
+      "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",
+      "version": "7.0.11",
-      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-7.0.11.tgz",
-      "integrity": "sha512-tP+9WggTFN22Zxh0XFyst7239H0qwiRCogsk7v9aQS79sYAJY+WEbTHbNYcxUMaalHKmsNpxmoTe35hBEMMd6g==",
+      "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",
+      "version": "7.18.2",
-      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
-      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
       "license": "MIT"
     },
     "node_modules/vary": {

backend/package.json

@@ -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",
+    "@biomejs/biome": "^2.4.4",
-    "@types/node": "^25.2.3",
+    "@types/node": "^25.3.0",
-    "@types/nodemailer": "^7.0.10",
+    "@types/nodemailer": "^7.0.11",
     "@types/supertest": "^6.0.2",
     "@vitest/coverage-v8": "^4.0.18",
     "drizzle-kit": "^0.31.9",

backend/src/index.ts

@@ -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);

backend/src/routes/auth.ts

@@ -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 (!ALLOWED_IMAGE_MIME_TYPES.includes(data.mimetype)) {
-			if (!allowedTypes.includes(data.mimetype)) {
+				return reply.status(400).send({ error: "Invalid file type", code: "INVALID_TYPE" });
-				return reply.status(400).send({ error: "Invalid file type. Allowed: JPEG, PNG, WebP, GIF" });
 			}
 
-			// Generate unique filename
+			let uploadBuffer: Buffer;
-			const ext = data.filename.split(".").pop() || "jpg";
+			try {
-			const filename = `avatar_${authUser.id}_${Date.now()}.${ext}`;
+				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
+			let filename: string;
-			const fs = await import("node:fs/promises");
+			try {
-			const path = await import("node:path");
+				({ filename } = await writeOptimizedImageSet(IMAGES_DIR, `avatar_${authUser.id}`, uploadBuffer));
-			const imagesDir = path.join(getDataDir(), "images");
+			} catch {
-			await fs.mkdir(imagesDir, { recursive: true });
+				return reply.status(400).send({ error: "Invalid image", code: "INVALID_IMAGE" });
-
+			}
-			const buffer = await data.toBuffer();
-			await fs.writeFile(path.join(imagesDir, filename), buffer);
 
 			// Delete old avatar if exists
 			const [user] = await db.select().from(users).where(eq(users.id, authUser.id));
 			if (user?.avatarUrl) {
-				try {
+				removeImageFiles(IMAGES_DIR, user.avatarUrl);
-					await fs.unlink(path.join(imagesDir, user.avatarUrl));
-				} catch {
-					// Ignore if file doesn't exist
-				}
 			}
 
 			// Update user
@@ -521,13 +530,7 @@ export async function authRoutes(app: FastifyInstance) {
 			}
 
 			// Delete file
-			const fs = await import("node:fs/promises");
+			removeImageFiles(IMAGES_DIR, user.avatarUrl);
-			const path = await import("node:path");
-			try {
-				await fs.unlink(path.join(getDataDir(), "images", user.avatarUrl));
-			} catch {
-				// Ignore if file doesn't exist
-			}
 
 			// 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");
+				removeImageFiles(IMAGES_DIR, user.avatarUrl);
-				const path = await import("node:path");
-				try {
-					await fs.unlink(path.join(getDataDir(), "images", user.avatarUrl));
-				} catch {
-					// Ignore if file doesn't exist
-				}
 			}
 
 			// Delete user - cascade delete handles all related data

backend/src/routes/doses.ts

@@ -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, reason } = await getActiveShareToken(token);
-		const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, 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, reason } = await getActiveShareToken(token);
-			const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, 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, reason } = await getActiveShareToken(token);
-		const [share] = await db.select().from(shareTokens).where(eq(shareTokens.token, 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 };

backend/src/routes/medications.ts

@@ -1,6 +1,4 @@
-import { createWriteStream, existsSync, unlinkSync } from "node:fs";
+import { resolve } from "node:path";
-import { extname, resolve } from "node:path";
-import { pipeline } from "node:stream/promises";
 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) {
+		if (existing.imageUrl) removeImageFiles(IMAGES_DIR, existing.imageUrl);
-			const imagePath = resolve(IMAGES_DIR, existing.imageUrl);
-			if (existsSync(imagePath)) unlinkSync(imagePath);
-		}
 
 		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 (!ALLOWED_IMAGE_MIME_TYPES.includes(data.mimetype)) {
-		if (!allowedTypes.includes(data.mimetype)) {
+			return reply.status(400).send({ error: "Invalid file type", code: "INVALID_TYPE" });
-			return reply.badRequest("Invalid file type. Allowed: JPEG, PNG, WebP, GIF");
 		}
 
-		const ext = extname(data.filename) || ".jpg";
+		let uploadBuffer: Buffer;
-		const filename = `med-${idNum}-${Date.now()}${ext}`;
+		try {
-		const filepath = resolve(IMAGES_DIR, filename);
+			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) {
+		if (existing.imageUrl) removeImageFiles(IMAGES_DIR, existing.imageUrl);
-			const oldPath = resolve(IMAGES_DIR, existing.imageUrl);
-			if (existsSync(oldPath)) unlinkSync(oldPath);
-		}
 
 		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) {
+		if (existing.imageUrl) removeImageFiles(IMAGES_DIR, existing.imageUrl);
-			const filepath = resolve(IMAGES_DIR, existing.imageUrl);
-			if (existsSync(filepath)) unlinkSync(filepath);
-		}
 
 		await db
 			.update(medications)

backend/src/routes/oidc.ts

@@ -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;
 	}
 

backend/src/routes/share.ts

@@ -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,
 			};
 		}
 	);

backend/src/services/reminder-scheduler.ts

@@ -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 it's past REMINDER_HOUR today in the configured timezone and we haven't checked today, run one catch-up.
-	if (currentHour >= REMINDER_HOUR && state.lastAutoEmailDate !== today) {
+	// This is intentionally a single current-state snapshot (no replay of missed days).
-		logger.info("[Reminder] Missed today's check, running now...");
+	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}`));
 	}
 

backend/src/test/auth.test.ts

@@ -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",

backend/src/types/fastify.d.ts

@@ -22,6 +22,7 @@ declare module "fastify" {
 
 	interface FastifyRequest {
 		user?: AuthUser | null;
+		correlationId?: string;
 	}
 }
 

backend/src/utils/image-upload.ts

@@ -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 };
+}

backend/src/utils/scheduler-utils.ts

@@ -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,

docs/PROJECT_SETUP.md

@@ -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
-```

frontend/e2e/tooltip-data.spec.ts

@@ -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);
+	});
+});

frontend/index.html

@@ -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>

frontend/nginx.conf

@@ -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;

frontend/package-lock.json

@@ -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",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.4.tgz",
-      "integrity": "sha512-8c5DZQl1hfpLRlTZ21W5Ef2R314E4UJUEtkMbo303ElTVe6fYtapwldv7tZlgwm+9YP0Mhk7dUSTkOY8nQ2/2w==",
+      "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-arm64": "2.4.4",
-        "@biomejs/cli-darwin-x64": "2.4.1",
+        "@biomejs/cli-darwin-x64": "2.4.4",
-        "@biomejs/cli-linux-arm64": "2.4.1",
+        "@biomejs/cli-linux-arm64": "2.4.4",
-        "@biomejs/cli-linux-arm64-musl": "2.4.1",
+        "@biomejs/cli-linux-arm64-musl": "2.4.4",
-        "@biomejs/cli-linux-x64": "2.4.1",
+        "@biomejs/cli-linux-x64": "2.4.4",
-        "@biomejs/cli-linux-x64-musl": "2.4.1",
+        "@biomejs/cli-linux-x64-musl": "2.4.4",
-        "@biomejs/cli-win32-arm64": "2.4.1",
+        "@biomejs/cli-win32-arm64": "2.4.4",
-        "@biomejs/cli-win32-x64": "2.4.1"
+        "@biomejs/cli-win32-x64": "2.4.4"
       }
     },
     "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.4.tgz",
-      "integrity": "sha512-wKiX2znbgFRaivRplSbu53hiREp1ohlGRuWqOL90IPetLi5E32tkiMYu8uSLXVzDgbIVM58WsesPaczIVtJkOQ==",
+      "integrity": "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A==",
       "cpu": [
         "arm64"
       ],
@@ -450,9 +450,9 @@
       }
     },
     "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.4.tgz",
-      "integrity": "sha512-rxLYVg3skeXh9K0om7JdkKcCdvtqrF9ECZ7dsmLuYObboK7DZ1J0z6xc2NGKSXw+cEQo3ie6NQgWBcdGJ16yQg==",
+      "integrity": "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg==",
       "cpu": [
         "x64"
       ],
@@ -467,9 +467,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.4.tgz",
-      "integrity": "sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==",
+      "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",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.4.tgz",
-      "integrity": "sha512-Brwh/QL3wfX5UyZcyEamS1Q+EF8Q7ud+MS5mq/9BWX2ArfxQlgsqlukwK92xrGpXWcspXkSG9U0CoxvCZZkTKQ==",
+      "integrity": "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ==",
       "cpu": [
         "arm64"
       ],
@@ -501,9 +501,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.4.tgz",
-      "integrity": "sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==",
+      "integrity": "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg==",
       "cpu": [
         "x64"
       ],
@@ -518,9 +518,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.4.tgz",
-      "integrity": "sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==",
+      "integrity": "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g==",
       "cpu": [
         "x64"
       ],
@@ -535,9 +535,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.4.tgz",
-      "integrity": "sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==",
+      "integrity": "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q==",
       "cpu": [
         "arm64"
       ],
@@ -552,9 +552,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.4.tgz",
-      "integrity": "sha512-kfjOCzvaHC7olg8pmEuSsYzHntxdipkAGzr5nFiaEU2EPDWRE/myqUBaFDl9pHqEc8yEtQFiXF945PlTSkuOTw==",
+      "integrity": "sha512-gnOHKVPFAAPrpoPt2t+Q6FZ7RPry/FDV3GcpU53P3PtLNnQjBmKyN2Vh/JtqXet+H4pme8CC76rScwdjDcT1/A==",
       "cpu": [
         "x64"
       ],
@@ -2460,9 +2460,9 @@
       }
     },
     "node_modules/i18next": {
-      "version": "25.8.10",
+      "version": "25.8.13",
-      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.10.tgz",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.8.13.tgz",
-      "integrity": "sha512-CtPJLMAz1G8sxo+mIzfBjGgLxWs7d6WqIjlmmv9BTsOat4pJIfwZ8cm07n3kFS6bP9c6YwsYutYrwsEeJVBo2g==",
+      "integrity": "sha512-E0vzjBY1yM+nsFrtgkjLhST2NBkirkvOVoQa0MSldhsuZ3jUge7ZNpuwG0Cfc74zwo5ZwRzg3uOgT+McBn32iA==",
       "funding": [
         {
           "type": "individual",
@@ -2651,9 +2651,9 @@
       }
     },
     "node_modules/lucide-react": {
-      "version": "0.574.0",
+      "version": "0.575.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.574.0.tgz",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.575.0.tgz",
-      "integrity": "sha512-dJ8xb5juiZVIbdSn3HTyHsjjIwUwZ4FNwV0RtYDScOyySOeie1oXZTymST6YPJ4Qwt3Po8g4quhYl4OxtACiuQ==",
+      "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",
+      "version": "7.13.1",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.1.tgz",
-      "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
+      "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",
+      "version": "7.13.1",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.1.tgz",
-      "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
+      "integrity": "sha512-UJnV3Rxc5TgUPJt2KJpo1Jpy0OKQr0AjgbZzBFjaPJcFOb2Y8jA5H3LT8HUJAiRLlWrEXWHbF1Z4SCZaQjWDHw==",
       "license": "MIT",
       "dependencies": {
-        "react-router": "7.13.0"
+        "react-router": "7.13.1"
       },
       "engines": {
         "node": ">=20.0.0"

frontend/package.json

@@ -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",

frontend/src/App.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
-import { Navigate, Route, Routes, useNavigate } from "react-router-dom";
+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;
+		const handleEscape = (e: KeyboardEvent) => {
-		if (isModalOpen) {
+			if (e.key !== "Escape") return;
-			document.documentElement.classList.add("modal-open");
+
-			document.body.classList.add("modal-open");
+			if (scheduleLightboxImage) {
-		} else {
+				closeScheduleLightbox();
-			document.documentElement.classList.remove("modal-open");
+				return;
-			document.body.classList.remove("modal-open");
+			}
-		}
+			if (showImageLightbox) {
-		return () => {
+				closeImageLightbox();
-			document.documentElement.classList.remove("modal-open");
+				return;
-			document.body.classList.remove("modal-open");
+			}
+			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>
 	);
 }

frontend/src/components/AboutModal.tsx

@@ -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>

frontend/src/components/AppHeader.tsx

@@ -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>

frontend/src/components/Auth.tsx

@@ -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", {
+			const { correlationId, init } = withCorrelation(
-				method: "POST",
+				{
-				credentials: "include",
+					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", {
+		const { correlationId, init } = withCorrelation(
-			method: "POST",
+			{
-			headers: { "Content-Type": "application/json" },
+				method: "POST",
-			credentials: "include",
+				headers: { "Content-Type": "application/json" },
-			body: JSON.stringify({ username, password, rememberMe }),
+				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", {
+		const { correlationId, init } = withCorrelation(
-			method: "POST",
+			{
-			credentials: "include",
+				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" }));
+			let code = "UNKNOWN";
-			throw new Error(err.error || "Upload failed");
+			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
+	useEscapeKey(!!onClose, onClose ?? (() => {}));
-	useEffect(() => {
-		const handleEscape = (e: KeyboardEvent) => {
-			if (e.key === "Escape" && onClose) {
-				onClose();
-			}
-		};
-		document.addEventListener("keydown", handleEscape);
-		return () => document.removeEventListener("keydown", handleEscape);
-	}, [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">

frontend/src/components/ConfirmModal.tsx

@@ -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
+	useEscapeKey(true, onCancel);
-	useEffect(() => {
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape") {
-				onCancel();
-			}
-		}
-		document.addEventListener("keydown", handleKeyDown);
-		return () => document.removeEventListener("keydown", handleKeyDown);
-	}, [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}>

frontend/src/components/ExportModal.tsx

@@ -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}>

frontend/src/components/FormNumberStepper.tsx

@@ -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>
+	);
+}

frontend/src/components/Lightbox.tsx

@@ -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") {
+				if (e.key !== "Escape") e.stopPropagation();
-					e.stopPropagation();
-					onClose();
-				}
 			}}
 		>
 			<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>

frontend/src/components/MedDetailModal.tsx

@@ -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(() => {
+	// Escape key: only one handler is active at a time (sub-modal states are mutually exclusive).
-		if (!showEditStockModal) return;
+	// Lightbox has its own useEscapeKey internally.
-		const handleEscape = (event: KeyboardEvent) => {
+	useEscapeKey(!showEditStockModal && !showImageLightbox && !showRefillModal, onClose);
-			if (event.key === "Escape") {
+	useEscapeKey(showEditStockModal, onCloseEditStockModal);
-				event.stopPropagation();
+	useEscapeKey(showRefillModal, onCloseRefillModal);
-				if (typeof event.stopImmediatePropagation === "function") {
-					event.stopImmediatePropagation();
-				}
-				event.preventDefault();
-				onCloseEditStockModal();
-			}
-		};
-		document.addEventListener("keydown", handleEscape, true);
-		return () => document.removeEventListener("keydown", handleEscape, true);
-	}, [showEditStockModal, onCloseEditStockModal]);
 
 	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">
+			<div className="number-stepper refill-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>
 				<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") e.stopPropagation();
-					if (e.key === "Escape") onCloseEditStockModal();
 				}}
 			>
 				<div
 					className="modal-content edit-stock-modal"
 					onClick={(e) => e.stopPropagation()}
-					onKeyDownCapture={(e) => {
+					onKeyDown={(e) => {
-						if (e.key === "Escape") {
+						if (e.key !== "Escape") e.stopPropagation();
-							e.preventDefault();
-							e.stopPropagation();
-							onCloseEditStockModal();
-						}
 					}}
-					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();
-				if (e.key === "Escape") {
-					e.stopPropagation();
-					onClose();
-				}
 			}}
 		>
 			<div
@@ -660,14 +641,9 @@ export function MedDetailModal({
 				ref={detailModalRef}
 				tabIndex={-1}
 				onClick={(e) => e.stopPropagation()}
-				onKeyDownCapture={(e) => {
+				onKeyDown={(e) => {
-					if (e.key === "Escape") {
+					if (e.key !== "Escape") e.stopPropagation();
-						e.preventDefault();
-						e.stopPropagation();
-						onClose();
-					}
 				}}
-				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}>
+										<span key={person} style={{ whiteSpace: "nowrap" }}>
-											{index > 0 && ", "}
+											{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") e.stopPropagation();
-						if (e.key === "Escape") onCloseRefillModal();
 					}}
 				>
 					<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"

frontend/src/components/MedicationAvatar.tsx

@@ -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>;
 }

frontend/src/components/MobileEditModal.tsx

@@ -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;
+		if (show && (hasValidationErrors || !!fieldErrors.name)) {
-		function handleKeyDown(e: KeyboardEvent) {
+			setShowNameValidation(true);
-			if (e.key === "Escape") {
-				onClose();
-			}
 		}
-		document.addEventListener("keydown", handleKeyDown);
+	}, [show, hasValidationErrors, fieldErrors.name]);
-		return () => document.removeEventListener("keydown", handleKeyDown);
+
-	}, [show, onClose]);
+	useEscapeKey(show, onClose);
 
 	// Lock background scroll while modal is open.
-	useEffect(() => {
+	useScrollLock(show);
-		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]);
 
 	// 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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="decimal"
-														pattern="[0-9]*\.?[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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">

frontend/src/components/ProfileModal.tsx

@@ -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}>
 					×

frontend/src/components/ReportModal.tsx

@@ -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}>
 					×

frontend/src/components/ShareDialog.tsx

@@ -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"

frontend/src/components/SharedSchedule.tsx

@@ -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(() => {
+	useEscapeKey(!!lightboxImage, closeLightbox);
-		function handleKeyDown(e: KeyboardEvent) {
-			if (e.key === "Escape" && lightboxImage) {
-				closeLightbox();
-			}
-		}
-		window.addEventListener("keydown", handleKeyDown);
-		return () => window.removeEventListener("keydown", handleKeyDown);
-	}, [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>
 			)}

frontend/src/components/UserFilterModal.tsx

@@ -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}>
 					×

frontend/src/components/index.ts

@@ -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";

frontend/src/hooks/index.ts

@@ -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";

frontend/src/hooks/useEscapeKey.ts

@@ -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]);
+}

frontend/src/hooks/useMedications.ts

@@ -50,13 +50,33 @@ export function useMedications(): UseMedicationsReturn {
 					body: formData,
 					credentials: "include",
 				});
-				if (res.ok) {
+				if (!res.ok) {
-					loadMeds();
+					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]
 	);

frontend/src/hooks/useScrollLock.ts

@@ -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);
+}

frontend/src/hooks/useShare.ts

@@ -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", {
+			const { correlationId, init } = withCorrelation(
-				method: "POST",
+				{
-				headers: { "Content-Type": "application/json" },
+					method: "POST",
-				credentials: "include",
+					headers: { "Content-Type": "application/json" },
-				body: JSON.stringify({
+					credentials: "include",
-					takenBy: shareSelectedPerson,
+					body: JSON.stringify({
-					scheduleDays: shareSelectedDays,
+						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);
+			if (navigator.clipboard?.writeText) {
-			setShareCopied(true);
+				navigator.clipboard.writeText(shareLink).then(
-			setTimeout(() => setShareCopied(false), 2000);
+					() => {
+						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);

frontend/src/i18n/de.json

@@ -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",

frontend/src/i18n/en.json

@@ -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",

frontend/src/pages/DashboardPage.tsx

@@ -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">

frontend/src/pages/MedicationsPage.tsx

@@ -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>}
+												{"takenBy" in s && (s as import("../types").Intake).takenBy && (
-												{"intakeRemindersEnabled" in s && s.intakeRemindersEnabled && (
+													<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) => {
+												onChange={handlePendingMedicationImageSelection}
-													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);
-													}
-												}}
 											/>
 										);
 									})()}
+									{imageUploadError && <span className="field-error">{imageUploadError}</span>}
 								</div>
 							</div>
 							{/* end general tab */}
@@ -1157,32 +1262,32 @@ export function MedicationsPage() {
 										<>
 											<label>
 												{t("form.packs")}
-												<input
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+												<FormNumberStepper
-													type="text"
-													inputMode="numeric"
-													pattern="[0-9]*"
 													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
+													<FormNumberStepper
-														type="text"
-														inputMode="decimal"
-														pattern="[0-9]*\.?[0-9]*"
 														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
+													<FormNumberStepper
-														type="text"
-														inputMode="numeric"
-														pattern="[0-9]*"
 														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}
+				onUploadMedImage={handleUploadMedImage}
-				onDeleteMedImage={deleteMedImage}
+				onDeleteMedImage={handleDeleteMedImage}
+				imageUploadError={imageUploadError}
 				onClose={() => {
 					closeEditModal();
 				}}

frontend/src/styles.css

@@ -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;
 }
 

frontend/src/styles/medication-workflows.css

@@ -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;

frontend/src/test/App.test.tsx

@@ -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();
-	});
 });

frontend/src/test/components/AppHeader.test.tsx

@@ -370,10 +370,13 @@ describe("AppHeader", () => {
 		fireEvent.click(userMenuBtn);
 		fireEvent.click(screen.getByText(/auth\.signOut/i));
 		await waitFor(() => {
-			expect(fetch).toHaveBeenCalledWith("/api/auth/logout", {
+			expect(fetch).toHaveBeenCalledWith(
-				method: "POST",
+				"/api/auth/logout",
-				credentials: "include",
+				expect.objectContaining({
-			});
+					method: "POST",
+					credentials: "include",
+				})
+			);
 		});
 	});
 });

frontend/src/test/components/Auth.test.tsx

@@ -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", {
+		expect(fetch).toHaveBeenNthCalledWith(
-			method: "GET",
+			2,
-			credentials: "include",
+			"/api/medications",
-		});
+			expect.objectContaining({ method: "GET", credentials: "include" })
-		expect(fetch).toHaveBeenNthCalledWith(3, "/api/auth/refresh", {
+		);
-			method: "POST",
+		expect(fetch).toHaveBeenNthCalledWith(
-			credentials: "include",
+			3,
-		});
+			"/api/auth/refresh",
-		expect(fetch).toHaveBeenNthCalledWith(4, "/api/medications", {
+			expect.objectContaining({ method: "POST", credentials: "include" })
-			method: "GET",
+		);
-			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 () => {

frontend/src/test/hooks/useMedications.test.ts

@@ -170,9 +170,11 @@ describe("useMedications", () => {
 		const { result } = renderHook(() => useMedications());
 		const file = new File(["test"], "test.jpg", { type: "image/jpeg" });
 
-		await act(async () => {
+		await expect(
-			await result.current.uploadMedImage(1, file);
+			act(async () => {
-		});
+				await result.current.uploadMedImage(1, file);
+			})
+		).rejects.toThrow("Upload failed");
 
 		expect(result.current.uploadingImage).toBe(false);
 	});

frontend/src/test/hooks/useShare.test.ts

@@ -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();
 		});
 

frontend/src/utils/correlation.ts

@@ -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,
+		},
+	};
+}

frontend/src/utils/image-upload.ts

@@ -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;
+}

package-lock.json

@@ -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",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/biome/-/biome-2.4.4.tgz",
-      "integrity": "sha512-8c5DZQl1hfpLRlTZ21W5Ef2R314E4UJUEtkMbo303ElTVe6fYtapwldv7tZlgwm+9YP0Mhk7dUSTkOY8nQ2/2w==",
+      "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-arm64": "2.4.4",
-        "@biomejs/cli-darwin-x64": "2.4.1",
+        "@biomejs/cli-darwin-x64": "2.4.4",
-        "@biomejs/cli-linux-arm64": "2.4.1",
+        "@biomejs/cli-linux-arm64": "2.4.4",
-        "@biomejs/cli-linux-arm64-musl": "2.4.1",
+        "@biomejs/cli-linux-arm64-musl": "2.4.4",
-        "@biomejs/cli-linux-x64": "2.4.1",
+        "@biomejs/cli-linux-x64": "2.4.4",
-        "@biomejs/cli-linux-x64-musl": "2.4.1",
+        "@biomejs/cli-linux-x64-musl": "2.4.4",
-        "@biomejs/cli-win32-arm64": "2.4.1",
+        "@biomejs/cli-win32-arm64": "2.4.4",
-        "@biomejs/cli-win32-x64": "2.4.1"
+        "@biomejs/cli-win32-x64": "2.4.4"
       }
     },
     "node_modules/@biomejs/cli-darwin-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-arm64/-/cli-darwin-arm64-2.4.4.tgz",
-      "integrity": "sha512-wKiX2znbgFRaivRplSbu53hiREp1ohlGRuWqOL90IPetLi5E32tkiMYu8uSLXVzDgbIVM58WsesPaczIVtJkOQ==",
+      "integrity": "sha512-jZ+Xc6qvD6tTH5jM6eKX44dcbyNqJHssfl2nnwT6vma6B1sj7ZLTGIk6N5QwVBs5xGN52r3trk5fgd3sQ9We9A==",
       "cpu": [
         "arm64"
       ],
@@ -120,9 +120,9 @@
       }
     },
     "node_modules/@biomejs/cli-darwin-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-darwin-x64/-/cli-darwin-x64-2.4.4.tgz",
-      "integrity": "sha512-rxLYVg3skeXh9K0om7JdkKcCdvtqrF9ECZ7dsmLuYObboK7DZ1J0z6xc2NGKSXw+cEQo3ie6NQgWBcdGJ16yQg==",
+      "integrity": "sha512-Dh1a/+W+SUCXhEdL7TiX3ArPTFCQKJTI1mGncZNWfO+6suk+gYA4lNyJcBB+pwvF49uw0pEbUS49BgYOY4hzUg==",
       "cpu": [
         "x64"
       ],
@@ -137,9 +137,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64/-/cli-linux-arm64-2.4.4.tgz",
-      "integrity": "sha512-nlGO5KzoEKhGj2i3QXyyNCeFk8SVwyes0wo0/X9w943darnlAHfi8MYYunPf8lsz5C0JaH6pJYB6D9HnDwUPQA==",
+      "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",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.4.4.tgz",
-      "integrity": "sha512-Brwh/QL3wfX5UyZcyEamS1Q+EF8Q7ud+MS5mq/9BWX2ArfxQlgsqlukwK92xrGpXWcspXkSG9U0CoxvCZZkTKQ==",
+      "integrity": "sha512-+sPAXq3bxmFwhVFJnSwkSF5Rw2ZAJMH3MF6C9IveAEOdSpgajPhoQhbbAK12SehN9j2QrHpk4J/cHsa/HqWaYQ==",
       "cpu": [
         "arm64"
       ],
@@ -171,9 +171,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64/-/cli-linux-x64-2.4.4.tgz",
-      "integrity": "sha512-Rmhm/mQ/3pejy1WtWLKurV1fN6zvCrqKz/ART2ZzgqY4ozL07uys5R9jA0A+yLjA79JTkcpIe85ygXv0FnSPRg==",
+      "integrity": "sha512-R4+ZCDtG9kHArasyBO+UBD6jr/FcFCTH8QkNTOCu0pRJzCWyWC4EtZa2AmUZB5h3e0jD7bRV2KvrENcf8rndBg==",
       "cpu": [
         "x64"
       ],
@@ -188,9 +188,9 @@
       }
     },
     "node_modules/@biomejs/cli-linux-x64-musl": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-linux-x64-musl/-/cli-linux-x64-musl-2.4.4.tgz",
-      "integrity": "sha512-kz1QpA+PXouNyWw2VzeoMlzMn99hlyOC/El2uSy+DS8gcb6tOsKEeZ5e2onnFIfZKe9AeKMFbTowDNLXwjwGjw==",
+      "integrity": "sha512-gGvFTGpOIQDb5CQ2VC0n9Z2UEqlP46c4aNgHmAMytYieTGEcfqhfCFnhs6xjt0S3igE6q5GLuIXtdQt3Izok+g==",
       "cpu": [
         "x64"
       ],
@@ -205,9 +205,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-arm64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-arm64/-/cli-win32-arm64-2.4.4.tgz",
-      "integrity": "sha512-e+PrlbQ/tez7W9EAzzCGUH1ovq31kR5r8sfCDzasrmoADLnDafet8pA8LdXnt0GwkeOem5Hz6WHCVZPRmaXiXw==",
+      "integrity": "sha512-trzCqM7x+Gn832zZHgr28JoYagQNX4CZkUZhMUac2YxvvyDRLJDrb5m9IA7CaZLlX6lTQmADVfLEKP1et1Ma4Q==",
       "cpu": [
         "arm64"
       ],
@@ -222,9 +222,9 @@
       }
     },
     "node_modules/@biomejs/cli-win32-x64": {
-      "version": "2.4.1",
+      "version": "2.4.4",
-      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/@biomejs/cli-win32-x64/-/cli-win32-x64-2.4.4.tgz",
-      "integrity": "sha512-kfjOCzvaHC7olg8pmEuSsYzHntxdipkAGzr5nFiaEU2EPDWRE/myqUBaFDl9pHqEc8yEtQFiXF945PlTSkuOTw==",
+      "integrity": "sha512-gnOHKVPFAAPrpoPt2t+Q6FZ7RPry/FDV3GcpU53P3PtLNnQjBmKyN2Vh/JtqXet+H4pme8CC76rScwdjDcT1/A==",
       "cpu": [
         "x64"
       ],

package.json

@@ -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"
   },