chore: add workflow to auto-move project items to Done on close/merge (#165 )

- New workflow project-auto-done.yml triggers on issue close and PR merge - Uses GraphQL to find the project item and update Status to Done - Handles both issues and pull requests with proper type detection - Skips gracefully if item is not on the board or already Done - Update release-manager.agent.md to reflect automation (manual is now fallback)
docs: add mandatory project board update steps to release-manager (#164 )
2026-02-13 18:45:51 +01:00 · 2026-02-13 18:42:08 +01:00 · 2026-02-13 17:37:51 +00:00 · 2026-02-13 18:34:19 +01:00 · 2026-02-13 18:29:33 +01:00 · 2026-02-12 21:43:41 +01:00
73 changed files with 9239 additions and 1679 deletions
@@ -13,6 +13,10 @@ PORT=3000
 CORS_ORIGINS=http://localhost:4174
 LOG_LEVEL=info

+# Rate limit: max requests per minute per IP (default: 100)
+# Increase for development/testing environments
+# RATE_LIMIT_MAX=100
+
 # Timezone for scheduled reminders (e.g., Europe/Berlin, America/New_York)
 TZ=Europe/Berlin

@@ -15,6 +15,45 @@ You are the release manager for **MedAssist-ng**. Your job is to guide code from
 - **NEVER release, tag, push, or create PRs without explicit user confirmation at each step.** Always present your plan and wait for approval.
 - **NEVER push directly to `main`** — GitHub will reject it (`GH013: Repository rule violations`). All changes go through Pull Requests.
 - **NEVER skip CI checks.** Wait for all status checks to pass before merging.
+- **Testing ownership belongs to `@testing-manager`**. Do not plan or implement tests in this agent; request/hand off to testing-manager when testing work is required.
+- **Track all work in the GitHub Project board.** Every PR should reference an issue. Move issues through the board as work progresses.
+- **ALWAYS verify Project board status after merge.** The `project-auto-done.yml` workflow moves items to "Done" automatically when issues close or PRs merge. Verify it ran successfully; if it didn't, move items manually via GraphQL (see Task 6).
+
+## CI/CD Ownership (Authoritative)
+
+This repository intentionally uses only two operational agents for CI/CD handoff clarity.
+
+- **No separate CI/CD agent is used.**
+- **`@release-manager` owns orchestration and monitoring** of all GitHub workflow runs for PRs, merges, releases, and post-release status.
+- **`@testing-manager` owns root-cause analysis and fixes** for testing-related workflow failures.
+
+### Current Workflow Assignment
+
+| Workflow | Primary Owner | Responsibility |
+|---------|----------------|----------------|
+| `.github/workflows/test.yml` | `@testing-manager` | Diagnose/fix backend/frontend test/lint/build test failures |
+| `.github/workflows/e2e.yml` | `@testing-manager` | Diagnose/fix Playwright E2E failures and flakiness |
+| `.github/workflows/codeql.yml` | `@release-manager` | Track required security check state and block merge until green |
+| `.github/workflows/docker-build.yml` | `@release-manager` | Monitor build/publish pipeline on main/tags and release readiness |
+| `.github/workflows/update-test-badges.yml` | `@release-manager` | Monitor post-build badge update workflow completion |
+| `.github/workflows/add-to-project.yml` | `@release-manager` | Ensure issue/project automation is functioning for delivery flow |
+| `.github/workflows/project-auto-done.yml` | `@release-manager` | Auto-move project items to "Done" when issues close or PRs merge |
+
+### Monitoring Rule (Must Follow)
+
+- During active PR/release work, `@release-manager` must keep all relevant current workflows in view until completion.
+- If a failing workflow is testing-related (`test.yml` or `e2e.yml`), immediately hand off diagnosis/fix to `@testing-manager`.
+
+## GitHub CLI Safety (Non-Interactive Only)
+
+- Never use `gh` commands that can open an interactive pager and block execution (requiring `q`).
+- Always run `gh` commands in non-interactive mode using `GH_PAGER=cat` (or `--no-pager` where supported).
+- Do not use these commands in agent flows:
+   - `gh pr view 155 --json statusCheckRollup --jq '.statusCheckRollup[] | {name:.name,conclusion:.conclusion,detailsUrl:.detailsUrl,workflowName:.workflowName}'`
+   - `SHA=$(gh pr view 155 --json headRefOid --jq .headRefOid) && gh api repos/DanielVolz/medassist-ng/commits/$SHA/check-runs --jq '.check_runs[] | {name,conclusion,details_url,html_url,app:.app.name}'`
+- Use safe variants instead:
+   - `GH_PAGER=cat gh pr view <PR_NUMBER> --json statusCheckRollup --jq '<jq-filter>'`
+   - `GH_PAGER=cat gh api repos/<owner>/<repo>/commits/<sha>/check-runs --jq '<jq-filter>'`

 ---

@@ -23,15 +62,15 @@ You are the release manager for **MedAssist-ng**. Your job is to guide code from
 **Each feature or bug fix MUST be submitted as its own separate PR.** Do NOT bundle multiple unrelated changes into a single PR.

 **Why:**
- Each change gets its own PR number for release notes (e.g., `(#140)`, `(#141)`)
- CI tests each change in isolation — failures are easy to trace
+- Each change keeps a traceable PR workflow, but release notes must reference merged commit hashes
+- CI checks each change in isolation — failures are easy to trace
 - Git blame and rollbacks are precise
 - Code review stays focused

 **Rules:**
 - One logical change = one branch = one PR
 - If a bug fix is discovered while working on a feature, create a **separate branch and PR** for the fix
- Related changes (e.g., a feature + its tests) belong in the **same** PR
+- Related changes (e.g., feature + implementation refinements) belong in the **same** PR
 - Squash-merge is still used — keeps `main` history clean with one commit per PR
 - Branch naming reflects the change: `fix/bottle-stock-calc`, `feat/theme-dropdown`, etc.

@@ -52,17 +91,12 @@ PR #141: "fix: planner checkbox layout on single line"

 ## Task 1: Branch, PR, and Merge Workflow

-When code changes (features or bug fixes) are complete and tested locally:
+When code changes (features or bug fixes) are complete:

 ### Step 1: Verify Readiness

 1. Check for uncommitted changes: `git status`
-2. Ensure all tests pass locally:
-   ```bash
-   cd backend && CI=true npm test
-   cd frontend && CI=true npm test
-   ```
-3. If tests fail, stop and fix them first.
+2. Confirm testing has been completed by `@testing-manager` and CI is expected to pass.

 ### Step 2: Create Feature Branch

@@ -87,10 +121,13 @@ When code changes (features or bug fixes) are complete and tested locally:
   ```bash
   git push -u origin feat/short-description
   ```
-2. Create a Pull Request via GitHub CLI:
+2. Create a Pull Request via GitHub CLI, linking the related issue:
   ```bash
-   gh pr create --title "fix: short description" --body "Description of charges"
+   gh pr create --title "fix: short description" --body "Closes #<ISSUE_NUMBER>
+
+Description of changes"
   ```
+   Using `Closes #N` in the PR body ensures the issue is automatically moved to "Done" on merge.
 3. **Present the PR URL to the user and wait for confirmation.**

 ### Step 4: Wait for CI and Merge
@@ -99,9 +136,7 @@ When code changes (features or bug fixes) are complete and tested locally:
   ```bash
   gh pr checks <PR_NUMBER> --watch
   ```
-   Required checks:
-   - ✅ `backend-test` (TypeScript type-check + vitest coverage)
-   - ✅ `frontend-build` (npm build)
+   Required checks: all repository-required checks must pass.
 2. If CI fails: analyze the failure, fix it, push again, and re-check.
 3. Once CI is green, **ask the user for merge confirmation**, then:
   ```bash
@@ -212,7 +247,7 @@ The version number is displayed in the **About modal** (Settings → About) as a
 ### After Tagging

 - The `docker-build.yml` workflow automatically builds and pushes Docker images to GHCR with both versioned tags (`1.8.7`, `1.8`) and `latest`.
- The `update-test-badges.yml` workflow runs automatically after a successful Docker build to update test count badges in the README.
+- The `update-test-badges.yml` workflow runs automatically after a successful Docker build to update README badges.
 - Track progress: `https://github.com/DanielVolz/medassist-ng/actions`

 ---
@@ -245,13 +280,13 @@ Read the actual code changes (not just commit messages) to understand what was a
 - Use **bold** for feature names in bullet points
 - Keep descriptions on the same line as the feature name
 - **No emojis** — do not use emoji in headings or bullet points
- **Include commit references** — each bullet point must end with the PR number (e.g., `(#136)`) or short commit hash (e.g., `(ab12cd3)`) linking to the commit/PR. Use PR numbers when available.
+- **Include commit references** — each bullet point must end with a short commit hash (e.g., `(ab12cd3)`) that links to the commit URL.
+- **Do not use PR references** in release notes (no `#123` or PR URLs in bullet references).
 - Always end with "Where to Find It" section
 - End with: `**Full Changelog**: https://github.com/DanielVolz/medassist-ng/compare/vPREV...vNEW`

 **ONLY include user-relevant changes.** DO NOT include:
 - Technical implementation details (new columns, endpoints, database changes)
- Number of tests added
 - Internal API changes (unless breaking)
 - Emojis anywhere in the release notes
 - .gitignore changes or other developer-only file changes
@@ -268,14 +303,14 @@ This release introduces a medication refill tracking feature and improves the mo

 ### New Features

- **Medication Refill**: Track when you refill your medications with a single click. Add full packs or individual pills and view complete refill history. (#120)
- **Automatic Stock Updates**: Stock levels are automatically recalculated after each refill. (#120)
- **Refill History**: Each medication shows a complete history of all refills with timestamps. (#122)
+- **Medication Refill**: Track when you refill your medications with a single click. Add full packs or individual pills and view complete refill history. (ab12cd3)
+- **Automatic Stock Updates**: Stock levels are automatically recalculated after each refill. (ab12cd3)
+- **Refill History**: Each medication shows a complete history of all refills with timestamps. (de34f56)

 ### Improvements

- **Centered Tooltips**: Info tooltips now display centered on screen for better readability. (#125)
- **Touch-friendly**: Tooltips close automatically when scrolling on touch devices. (#125)
+- **Centered Tooltips**: Info tooltips now display centered on screen for better readability. (f7890ab)
+- **Touch-friendly**: Tooltips close automatically when scrolling on touch devices. (f7890ab)

 ### Where to Find It

@@ -351,26 +386,97 @@ When the release includes **new features** (minor or major version bump), you MU

 ---

+## Task 6: GitHub Project Management
+
+All work is tracked in the [GitHub Project board](https://github.com/users/DanielVolz/projects/1) (Project ID: `PVT_kwHOADH82s4BO2OT`).
+
+### Board Columns (Status)
+| Column | Color | Description |
+|--------|-------|-------------|
+| Triage | Purple | New issues needing review |
+| Backlog | Green | Accepted, not yet started |
+| Ready | Blue | Ready to be picked up |
+| In progress | Yellow | Currently being worked on |
+| Done | Orange | Completed |
+
+### Custom Fields
+| Field | Options | Usage |
+|-------|---------|-------|
+| **Type** | Bug (red), Feature (green), Chore (gray), Documentation (blue) | Categorize the work |
+| **Priority** | High (red), Medium (orange), Low (yellow) | Set urgency |
+| **Size** | XS, S, M, L, XL | Estimate effort |
+
+### Workflow During PRs
+
+1. **Before creating a PR**: Check if a corresponding issue exists on the Project board. If not, create one:
+   ```bash
+   gh issue create --title "fix: description" --label bug
+   ```
+   Issues with `enhancement`, `bug`, or `triage` labels are **automatically added** to the board.
+
+2. **When creating a PR**: Always reference the issue with `Closes #N` in the PR body so the issue is automatically **closed** on merge. Note: this does NOT move the Project board status — that must be done manually (see step 3).
+
+3. **After merge — verify automation**: The `project-auto-done.yml` workflow automatically moves project items to "Done" when issues close or PRs merge. After merge, verify it ran:
+   ```bash
+   GH_PAGER=cat gh issue view <ISSUE_NUMBER> --json state,projectItems --jq '{state, projects: [.projectItems[] | {title: .title, status: .status.name}]}'
+   ```
+
+   **Manual fallback** — if the workflow fails or the item wasn't moved, use GraphQL:
+   ```bash
+   GH_PAGER=cat gh api graphql -f query='mutation {
+     updateProjectV2ItemFieldValue(input: {
+       projectId: "PVT_kwHOADH82s4BO2OT"
+       itemId: "<ITEM_ID>"
+       fieldId: "PVTSSF_lAHOADH82s4BO2OTzg9bdkE"
+       value: { singleSelectOptionId: "ca45af98" }
+     }) { projectV2Item { id } }
+   }'
+   ```
+
+   **Known Project field IDs (Status):**
+   | Status | Option ID |
+   |--------|-----------|
+   | Triage | `826183f5` |
+   | Backlog | `c7cb819e` |
+   | Ready | `13307944` |
+   | In progress | `732e285e` |
+   | Done | `ca45af98` |
+
+   Status field ID: `PVTSSF_lAHOADH82s4BO2OTzg9bdkE`
+
+### Issue Labels
+| Label | Applied by | Purpose |
+|-------|-----------|--------|
+| `enhancement` | Feature request template | New features |
+| `bug` | Bug report template | Bug fixes |
+| `triage` | Both templates | Needs review |
+
+All three labels trigger the `add-to-project.yml` workflow, which automatically adds the issue to the Project board.
+
+---
+
 ## Complete Workflow Summary

 ```
-Code complete & tests pass locally
+Code complete & validated by testing-manager
        ↓
-1. Create feature branch (fix/... or feat/...)
-2. Commit, push, create PR
-3. Wait for CI (backend-test + frontend-build)
-4. Merge PR to main (squash + delete branch)
+1. Ensure a GitHub issue exists (create if not)
+2. Create feature branch (fix/... or feat/...)
+3. Commit, push, create PR (with "Closes #N" in body)
+4. Wait for CI (all required checks)
+5. Merge PR to main (squash + delete branch)
+6. Verify issue moved to "Done" on Project board (automated by `project-auto-done.yml`; fallback: GraphQL, see Task 6)
        ↓
 Ready for release?
        ↓
-5. Check current version (git tag + package.json)
-6. Analyze changes → determine SemVer level
-7. If minor/major: check README.md for needed updates (Task 5)
-8. Run ./scripts/release.sh <patch|minor|major>
-   (or manually: branch → version bump → PR → CI → merge → tag)
+7. Check current version (git tag + package.json)
+8. Analyze changes → determine SemVer level
+9. If minor/major: check README.md for needed updates (Task 5)
+10. Run ./scripts/release.sh <patch|minor|major>
+    (or manually: branch → version bump → PR → CI → merge → tag)
        ↓
-9. Write release notes (mandatory for minor/major)
-10. Publish GitHub release
+11. Write release notes (mandatory for minor/major)
+12. Publish GitHub release
        ↓
 Docker images built automatically via CI
 ```
@@ -0,0 +1,119 @@
+---
+name: testing-manager
+description: Owns testing strategy, test implementation, local validation, and CI test triage for backend, frontend, and Playwright E2E.
+argument-hint: Describe what to test, e.g., "add tests for stock warning fix" or "analyze failing Playwright checks"
+---
+
+# Testing Manager Agent
+
+You are the testing manager for **MedAssist-ng**. Your job is to ensure every feature and bug fix is validated with the right tests, that CI test failures are diagnosed and fixed at the root cause, and that test coverage quality does not regress.
+
+**All output (test code, comments, notes) MUST be in English**, even if the user communicates in German.
+
+## Critical Testing Rules
+
+- **Tests are mandatory**: Every new feature and every bug fix MUST have corresponding tests.
+- **Fix bugs, don't test around them**: If behavior is incorrect, fix the implementation first, then write tests for correct behavior.
+- **Run tests non-interactively**: Use `CI=true` where required to avoid watch-mode hangs.
+- **No remote git operations**: Do not push, merge, create PRs, tags, or releases. Hand over to `@release-manager` when ready.
+- **Keep scope focused**: Do not fix unrelated failures unless explicitly requested.
+
+## CI/CD Ownership Boundary
+
+- **`@testing-manager` owns testing workflows only**: `.github/workflows/test.yml` and `.github/workflows/e2e.yml`.
+- **`@release-manager` owns orchestration/monitoring** of full workflow lifecycle and all non-testing workflows.
+- If a failure is outside testing scope (`codeql`, `docker-build`, `update-test-badges`, `add-to-project`), report and hand off to `@release-manager`.
+
+## Test Stack & Locations
+
+- **Backend**: Vitest 2.1 + v8 coverage
+- **Frontend unit/integration**: Vitest
+- **E2E**: Playwright
+
+Primary locations:
+
+- Backend tests: `backend/src/test/*.test.ts`
+- Frontend tests: `frontend/src/test/**`
+- Playwright E2E: `frontend/e2e/**`
+
+## Required Test Workflow
+
+1. Identify changed behavior and expected outcomes.
+2. Add/update tests near the affected feature.
+3. Run the smallest relevant subset first.
+4. Expand to broader suites if subset passes.
+5. Report what was run, what passed, and any remaining known failures.
+
+## Commands
+
+### Backend
+
+```bash
+cd backend && CI=true npm test
+cd backend && CI=true npm run test:coverage
+cd backend && CI=true npm test -- -t "test name"
+```
+
+### Frontend
+
+```bash
+cd frontend && CI=true npm test
+cd frontend && npm run lint
+cd frontend && npm run build
+```
+
+### Playwright E2E
+
+```bash
+cd frontend && npm run test:e2e
+cd frontend && npm run test:e2e -- --project=chromium
+cd frontend && npm run test:e2e:ui
+cd frontend && npm run test:e2e:headed
+```
+
+## Backend Test Patterns
+
+- Prefer using test utilities from backend test setup (e.g. `buildTestApp`, helper factories).
+- Validate both status codes and response payloads.
+- Add regression tests for every fixed bug.
+- Keep tests deterministic and isolated.
+
+## E2E Test Patterns
+
+- Use stable selectors and explicit assertions.
+- Avoid flaky timing assumptions; prefer waiting for concrete UI states.
+- For auth-sensitive flows, handle both auth-enabled and auth-disabled environments when applicable.
+- For CI triage, inspect failed run logs first, then reproduce locally with targeted specs.
+
+## CI Failure Triage
+
+When test checks fail:
+
+1. Retrieve exact failed jobs and logs.
+2. Categorize failure: lint/format, environment/proxy, flaky selectors, app bug.
+3. Fix root cause.
+4. Re-run focused tests locally.
+5. Re-run broader checks if needed.
+6. Hand off for PR/merge via `@release-manager`.
+
+## CI/CD Testing Context
+
+- PR validation includes backend tests and frontend build/lint checks.
+- E2E runs in GitHub Actions through `.github/workflows/e2e.yml`.
+- Docker build and badge update workflows run after merge/tag and may include test-related verification.
+
+### Testing Workflow Focus (Current)
+
+| Workflow | Testing-Manager Action |
+|---------|------------------------|
+| `.github/workflows/test.yml` | Investigate failures, implement fixes, revalidate locally |
+| `.github/workflows/e2e.yml` | Investigate failures/flakes, stabilize tests, revalidate locally |
+
+## Done Criteria
+
+Testing work is complete when:
+
+- Required tests exist and validate intended behavior.
+- Relevant local test commands pass.
+- CI test failures are resolved or clearly documented with rationale.
+- No temporary debugging files remain in the workspace.
@@ -1,466 +1,36 @@
 # MedAssist-ng - AI Coding Instructions

-## General Rules
+## Purpose

- **English is the primary language**: All code, comments, documentation, commit messages, PR descriptions, and GitHub releases MUST be written in English. The user may communicate in German, but all project artifacts must be in English.
- **NEVER release without explicit permission**: Do NOT create tags, releases, or version bumps unless the user explicitly asks for it. Always wait for explicit confirmation before any release action.
- **NEVER create PRs, push, or merge**: Only the **release-manager agent** (`@release-manager`) is allowed to create Pull Requests, push branches to the remote, or merge code. Regular agents and Copilot MUST NOT perform any git operations that affect the remote repository (no `git push`, no `gh pr create`, no `gh pr merge`). Present your local changes and tell the user to invoke `@release-manager` when ready to ship.
- **No temporary files**: Delete temporary scripts/files immediately after use. Do not commit temporary debug scripts, test files, or one-off utilities to the repository.
- **Clean workspace**: Always clean up after yourself. If you create a file for a specific task, delete it once done.
- **Remove old code when re-implementing**: When fixing a bug or re-implementing a feature that didn't work, ALWAYS remove the old/broken code completely. Never leave dead code, unused functions, or obsolete implementations in the codebase.
- **Tests are mandatory**: Every new feature and every bug fix MUST have corresponding tests. When modifying existing features, update or add tests accordingly. If old tests become obsolete due to code changes, remove or update them.
- **Fix bugs, don't test around them**: If you discover incorrect behavior in the code while writing tests, ALWAYS fix the buggy code first, then write tests that verify the correct behavior. NEVER write tests that mimic or assert broken behavior. The user's time is finite and irreplaceable — every bug left unfixed wastes it.
- **Keep README.md up to date**: After implementing code changes, check whether the `README.md` needs to be updated (e.g., new features, changed ENV variables, new commands, changed architecture, new endpoints, updated screenshots). If changes are relevant to the README, **ask the user for confirmation** before updating it. Do NOT silently update the README — always present the proposed README changes and wait for approval. Examples of README-relevant changes: new ENV variables, new API endpoints, new UI features, changed setup/install steps, new dependencies, changed Docker configuration.
+This file is intentionally short.
+Use `AGENTS.md` as the canonical governance source and `.github/skills/*/SKILL.md` for detailed workflows.

-## Architecture Overview
+## Always-On Rules

-MedAssist-ng is a **medication tracking and planning app** with a monorepo structure:
+- English only for project artifacts.
+- No remote git/release actions by normal agent (`git push`, PR create/merge, tag/release).
+- Testing work belongs to `@testing-manager`.
+- PR/release/CI orchestration belongs to `@release-manager`.
+- Keep changes local, focused, and consistent with existing UI/API patterns.

- **Backend**: Fastify 5 + TypeScript + SQLite (Drizzle ORM) at `backend/`
- **Frontend**: React 18 + Vite + TypeScript at `frontend/`
- **Database**: SQLite with migrations in `backend/src/db/migrations/`
- **Deployment**: Docker Compose with separate dev containers
- **i18n**: English (en) and German (de) via react-i18next
+## MedAssist Essentials

-### Data Flow
-```
-Frontend (React) → /api/* proxy → Backend (Fastify) → SQLite
-                   ↓ (Vite rewrites /api to /)
-```
+- Frontend calls backend through `/api/*`.
+- All UI text must use i18n keys (`t("...")`) with EN/DE entries.
+- DB changes must stay backward-compatible (schema default + alter migration + null-safe reads).

-The Vite proxy at `frontend/vite.config.ts` rewrites `/api/*` to `/` - so frontend calls `/api/medications` but backend route is just `/medications`.
+## Skill Routing

-## Development Commands
+- Architecture/boundaries: `medassist-architecture-guard`
+- DB compatibility: `medassist-db-compat-check`
+- i18n rules: `medassist-i18n-enforcer`
+- UI consistency: `medassist-ui-consistency`
+- Testing delegation: `medassist-testing-handoff`
+- Release delegation: `medassist-release-handoff`

-```bash
-# Start dev environment (preferred)
-docker compose -f docker-compose.dev.yml up
+## Key References

-# Or run services separately:
-cd backend && npm run dev      # tsx watch on port 3000
-cd frontend && npm run dev     # Vite on port 5173
-
-# Production
-docker compose up -d
-
-# Database migrations
-cd backend && npm run migrate
-
-# Run tests
-cd backend && npm test              # Run all tests
-cd backend && npm run test:coverage # Run with coverage report
-```
-
-## Testing (MANDATORY)
-
-> ⚠️ **IMPORTANT**: Every new feature MUST be covered by tests!
-> Pull Requests without tests for new features will not be accepted.
-
-### Test Framework
- **Vitest 2.1** with v8 Coverage
- Tests in `backend/src/test/*.test.ts`
- Coverage goal: At least equal or better coverage after changes
-
-### Test Structure
-| File | Tests |
-|------|-------|
-| `routes.test.ts` | API endpoints (Auth, Medications, Doses, Settings, Share, Planner) |
-| `services.test.ts` | Scheduler utilities (Timezone, Blisters, Usage calculation) |
-| `db.test.ts` | Database schema and operations |
-
-### Writing Tests
-
-```typescript
-// Backend Test Example (backend/src/test/example.test.ts)
-import { describe, it, expect, beforeAll, afterAll } from 'vitest';
-import { createTestApp, createTestUser } from './routes.test'; // Test-Utilities
-
-describe('Feature Name', () => {
-  let app: FastifyInstance;
-  let authToken: string;
-
-  beforeAll(async () => {
-    app = await createTestApp();
-    const user = await createTestUser(app);
-    authToken = user.token;
-  });
-
-  afterAll(async () => {
-    await app.close();
-  });
-
-  it('should do something specific', async () => {
-    const response = await app.inject({
-      method: 'GET',
-      url: '/endpoint',
-      headers: { Authorization: `Bearer ${authToken}` }
-    });
-    
-    expect(response.statusCode).toBe(200);
-    expect(response.json()).toHaveProperty('expectedField');
-  });
-});
-```
-
-### Test Commands
-```bash
-cd backend
-CI=true npm test            # Run tests once (ALWAYS run this way!)
-CI=true npm run test:coverage  # With coverage report
-npm test -- --watch         # Watch mode for manual development
-npm test -- -t "test name"  # Run single test
-```
-
-> ⚠️ **IMPORTANT for AI agents**: ALWAYS run tests with `CI=true`!
-> Without `CI=true`, Vitest runs in watch mode and waits for input.
-
-## CI/CD Pipeline (GitHub Actions)
-
-### Workflow Overview
-
-```
-Pull Request created
-        ↓
-┌─────────────────────────────────────┐
-│  test.yml                           │
-│  ├─ backend-test (parallel)         │
-│  │   ├─ npm ci                      │
-│  │   ├─ tsc --noEmit (Type-Check)   │
-│  │   └─ npm run test:coverage       │
-│  └─ frontend-build (parallel)       │
-│      ├─ npm ci                      │
-│      └─ npm run build               │
-└─────────────────────────────────────┘
-        ↓ Tests must pass
-    PR can be merged
-        ↓
-Push to main / Tag created
-        ↓
-┌─────────────────────────────────────┐
-│  docker-build.yml                   │
-│  └─ build-and-push                  │
-│      ├─ Build Docker images         │
-│      └─ Push to GHCR                │
-│      (Tag builds also set "latest") │
-└─────────────────────────────────────┘
-        ↓ After successful build
-┌─────────────────────────────────────┐
-│  update-test-badges.yml             │
-│  (workflow_run after docker-build)  │
-│  └─ Run tests, update badge counts  │
-└─────────────────────────────────────┘
-```
-
-### Branch Protection
-
-> ⚠️ **IMPORTANT**: The `main` branch is protected!  
-> Direct pushing to `main` is **not possible** - GitHub will reject the push.  
-> All changes must go through Pull Requests.
-
- **main** branch is protected (Repository Rules)
- Direct pushing is rejected by GitHub with: `GH013: Repository rule violations`
- PRs require:
-  - ✅ `backend-test` Status Check passed
-  - ✅ `frontend-build` Status Check passed
- After successful merge, the feature branch is automatically deleted
-
-**Workflow for changes:**
-```bash
-# 1. Create feature branch
-git checkout -b feat/my-feature
-
-# 2. Commit and push changes
-git add . && git commit -m "feat: Description"
-git push -u origin feat/my-feature
-
-# 3. Create PR (via GitHub CLI or Web)
-gh pr create --title "My Feature" --body "Description"
-
-# 4. Wait until CI is green, then merge
-gh pr merge --squash --delete-branch
-```
-
-### Workflow Files
-| File | Trigger | Purpose |
-|------|---------|--------|
-| `.github/workflows/test.yml` | Pull Requests | Run tests, block PR on failures |
-| `.github/workflows/docker-build.yml` | Push to main, Tags | Build and push Docker images (+ create GitHub release on tags) |
-| `.github/workflows/update-test-badges.yml` | After successful docker-build | Update test count badges in README |
-| `.github/workflows/codeql.yml` | Push to main, PRs, Weekly | Security analysis |
-
-## Key Patterns
-
-### Backend Routes (`backend/src/routes/`)
-| Route File | Endpoints |
-|------------|-----------|
-| `auth.ts` | `/auth/login`, `/auth/register`, `/auth/logout`, `/auth/refresh`, `/auth/me` |
-| `medications.ts` | CRUD `/medications`, `/medications/:id/image` |
-| `doses.ts` | `/doses/taken` - track dose intake |
-| `planner.ts` | `/medications/usage` - calculate usage for date range |
-| `settings.ts` | `/settings` - user settings CRUD |
-| `share.ts` | `/share` - create share tokens, `/share/:token` - public access |
-| `health.ts` | `/health` - health check endpoint |
-
-### Backend Services (`backend/src/services/`)
-| Service | Description |
-|---------|-------------|
-| `reminder-scheduler.ts` | Stock reminder emails/push notifications |
-| `intake-reminder-scheduler.ts` | Intake reminder notifications |
-
-### Frontend (`frontend/src/App.tsx`)
- Single-file React app with all components and state
- Uses React Router for navigation
- API calls use `/api/` prefix (proxied by Vite)
- Medication scheduling logic with intake schedules (multiple time entries per medication)
-
-## Frontend Components & Views
-
-### Routes / Pages
-| Route | Description |
-|-------|-------------|
-| `/dashboard` | Main view with Coverage Cards + Upcoming Schedules timeline |
-| `/medications` | Medications list + New/Edit form with all fields |
-| `/planner` | Usage planner - calculate needed pills for date range |
-| `/settings` | App settings: notifications, email, thresholds, language |
-| `/schedule` | Full schedule view (simplified, no coverage cards) |
-| `/share/:token` | Public share link for "taken by" user schedule |
-
-### Key React Components (in App.tsx)
-| Component | Description |
-|-----------|-------------|
-| `App` | Root component with BrowserRouter |
-| `AppRouter` | Handles auth check, renders AppContent or Auth |
-| `AppContent` | Main app shell with navigation, header, all routes |
-| `SharedSchedule` | Public share page for medication schedules by person |
-| `MedicationAvatar` | Round avatar with medication image or colored initial |
-
-### Dashboard Sections
-| Section | Description |
-|---------|-------------|
-| **Coverage Cards** | Stock status cards per medication: days left, blisters, status (Normal/Warning/Critical) |
-| **Upcoming Schedules** | Timeline grouped by day, collapsible days, dose tracking |
-
-### Schedule/Timeline Elements
-| Element | CSS Class | Description |
-|---------|-----------|-------------|
-| Past days toggle | `.past-days-toggle` | Click to show/hide past days |
-| Day container | `.day-block` | Container for one day, collapsible |
-| Today highlight | `.day-block.today` | Blue border/background for current day |
-| Past day | `.day-block.past` | Dashed border, reduced opacity |
-| All taken | `.day-block.all-taken` | Green styling when all doses taken |
-| Day header | `.day-divider` | Date header with collapse toggle arrow |
-| Collapse icon | `.day-collapse-icon` | ▶/▼ arrow for expand/collapse |
-| Day summary | `.day-summary` | Shows "X/Y" doses taken or "✓ All taken" |
-| Medication row | `.time-row` | One medication's doses for that day |
-| Dose item | `.dose-item` | Individual dose with time, amount, take/undo button |
-| Dose taken | `.dose-item.taken` | Green background when dose is marked taken |
-| Dose overdue | `.dose-item.overdue` | Styling for past untaken doses |
-| Dose future | `.dose-item.future` | Disabled button for future days |
-
-### Medication Form (New/Edit)
-| Field | Description |
-|-------|-------------|
-| Commercial Name | Main medication name (required) |
-| Generic Name | Scientific/generic name (optional) |
-| Taken By | Person taking the medication (optional, enables filtering/sharing) |
-| Packs | Number of full packs |
-| Blisters per Pack | Strips/blisters in each pack |
-| Pills per Blister | Tablets per strip |
-| Loose Pills | Extra pills not in blisters |
-| Pill Weight (mg) | Weight per pill for dose calculation display |
-| Expiry Date | Medication expiration |
-| Notes | Free text notes |
-| Image Upload | Medication photo (preview for new, direct upload for edit) |
-| **Intake Schedule** | One or more intake entries defining usage pattern |
-
-### Intake Schedule
-Each blister defines a recurring intake:
- **Usage (Pills)**: How many pills per dose
- **Every (Days)**: Interval (1 = daily, 7 = weekly)
- **Start (Date/Time)**: When the schedule starts (determines past/future doses)
- **Remind checkbox**: Enable intake reminders (🔔)
-
-### Modals
-| Modal | Trigger | Content |
-|-------|---------|---------|
-| Medication Detail | Click on coverage card or medication row | Full medication info, stock, schedule preview, edit/delete/ICS buttons |
-| Image Lightbox | Click medication image | Full-size medication image |
-| Share Dialog | "Share" button on schedules | Generate share link for specific "taken by" person |
-| User Schedule Filter | Click on "taken by" badge | Filter schedule by person |
-
-### Settings Sections
-| Section | Settings |
-|---------|----------|
-| General | Language toggle (EN/DE) |
-| Stock Thresholds | Warning days, critical days, expiry warning days |
-| Email Notifications | Enable, email address, stock/intake toggles |
-| Push Notifications (Shoutrrr) | Enable, URL (ntfy/gotify/etc), stock/intake toggles |
-| Reminder Settings | Days before, repeat daily, skip for taken, repeat/nagging |
-| SMTP | Email config (read-only from .env) |
-
-### Settings ENV Defaults
-All user settings can be pre-configured via ENV variables (see `.env.example`).
-These are only used as **defaults when a new user is created**.
-Once a user saves settings in the app, their saved values take precedence over ENV.
-
-| ENV Variable | Setting | Default |
-|--------------|---------|---------|
-| `DEFAULT_EMAIL_ENABLED` | Email notifications | false |
-| `DEFAULT_SHOUTRRR_ENABLED` | Push notifications | false |
-| `DEFAULT_SHOUTRRR_URL` | ntfy/gotify URL | (empty) |
-| `DEFAULT_REPEAT_REMINDERS_ENABLED` | Nagging reminders | false |
-| `DEFAULT_REMINDER_REPEAT_INTERVAL_MINUTES` | Nag interval | 30 |
-| `DEFAULT_MAX_NAGGING_REMINDERS` | Max nags | 5 |
-| `DEFAULT_LOW_STOCK_DAYS` | Low stock threshold | 30 |
-| `DEFAULT_LANGUAGE` | UI language | en |
-
-## Database Schema (`backend/src/db/schema.ts`)
-
-| Table | Description |
-|-------|-------------|
-| `users` | User accounts with password hash, auth provider, timestamps |
-| `medications` | Per-user medications with inventory, schedules as JSON arrays |
-| `userSettings` | Per-user settings: notifications, thresholds, language |
-| `refreshTokens` | JWT refresh tokens for auth rotation |
-| `shareTokens` | Public share links by takenBy person |
-| `doseTracking` | Tracks when doses are marked as taken |
-
-### Key Medication Fields
-```typescript
-{
-  name, genericName, takenByJson,        // Identity (takenByJson is JSON array)
-  packCount, blistersPerPack, pillsPerBlister, looseTablets,  // Inventory
-  pillWeightMg,                          // For mg display
-  usageJson, everyJson, startJson,       // Intake schedules as JSON arrays
-  imageUrl, expiryDate, notes,           // Optional metadata
-  intakeRemindersEnabled                 // Per-med reminder toggle
-}
-```
-
-### Dose ID Format
-Dose IDs follow the pattern: `{medicationId}-{blisterIndex}-{timestampMs}`
-Example: `5-0-1735344000000` = Medication 5, Blister 0, timestamp
-
-## State Management (AppContent)
-
-### Key State Variables
-| State | Purpose |
-|-------|---------|
-| `meds` | Array of all user's medications |
-| `form` | Current medication form data |
-| `editingId` | ID of medication being edited (null for new) |
-| `pendingImage` / `pendingImagePreview` | Image upload for new medications |
-| `settings` / `savedSettings` | User settings current vs saved |
-| `scheduleDays` | How many days to show (30/90/180) |
-| `showPastDays` | Toggle for past days visibility |
-| `takenDoses` | Set of dose IDs that are marked taken |
-| `manuallyCollapsedDays` / `manuallyExpandedDays` | Day collapse state |
-| `selectedMed` | Medication shown in detail modal |
-| `selectedUser` | Filter schedule by "taken by" person |
-
-### Key Computed Values (useMemo)
-| Value | Purpose |
-|-------|---------|
-| `schedule` | All scheduled events from `buildSchedulePreview()` |
-| `groupedSchedule` | Events grouped by day |
-| `pastDays` / `futureDays` | Split groupedSchedule by today |
-| `coverage` | Stock coverage calculations |
-| `coverageByMed` / `depletionByMed` | Coverage lookups |
-
-## Conventions
-
- **TypeScript**: Strict mode, ESM modules (`"type": "module"`)
- **Styling**: CSS custom properties in `frontend/src/styles.css`, dark/light theme via `data-theme`
- **API responses**: Return objects directly, Fastify serializes to JSON
- **Environment**: Copy `.env.example` → `.env`, secrets must be 10+ chars
- **i18n**: All UI text via `t('key')` function, translations in `frontend/src/i18n/*.json`
- **UI Consistency**: Always use existing components for modals, buttons, and forms. For confirmation dialogs, use `ConfirmModal` component. Never create inline modals with custom button styling - all UI elements must match the existing design system. When adding new sections to existing components, ensure font sizes, spacing, margins, and button styles match exactly with other sections. Check existing CSS classes before creating new ones.
-
-## Database Schema Changes (IMPORTANT: Backward Compatibility!)
-
-> ⚠️ **CRITICAL**: The app MUST remain backward compatible with older databases!
-> Users upgrade their Docker containers but keep their existing DB.
-> The app must NOT crash if old columns are missing.
-
-### ⚠️ MANDATORY for EVERY New Feature
-
-**Before implementing ANY feature that touches user data or settings:**
-
-1. **Check if new DB columns are needed** - Does the feature require storing new data?
-2. **If YES → Follow ALL steps below** - Schema.ts + Drizzle migration + ALTER migration + NULL-safe code
-3. **NEVER skip the ALTER migration** - This is the #1 cause of production 500 errors!
-
-**Common mistake:** Adding a column to `schema.ts` and forgetting the ALTER migration in `client.ts`.
-The Drizzle migration only works for NEW databases. Existing production databases need the ALTER migration!
-
-### Schema Management with Drizzle Kit
-
-The database schema uses **Drizzle Kit** for migrations. There is a **single source of truth**:
-
- **`backend/src/db/schema.ts`** - Drizzle ORM schema definitions (TypeScript)
- **`backend/drizzle/`** - Generated SQL migrations (auto-generated from schema.ts)
-
-**DO NOT manually edit migration files!** They are generated from schema.ts.
-
-### Adding New Columns
-
-1. **Add to schema.ts** with DEFAULT value:
-   ```typescript
-   maxNaggingReminders: integer("max_nagging_reminders").notNull().default(5),
-   ```
-
-2. **Generate migration**:
-   ```bash
-   cd backend && npx drizzle-kit generate --name add_column_name
-   ```
-
-3. **Add backward-compatible ALTER migration** in `client.ts` `runAlterMigrations()`:
-   ```typescript
-   `ALTER TABLE user_settings ADD COLUMN max_nagging_reminders integer NOT NULL DEFAULT 5`,
-   ```
-
-4. **NULL-safe reading** in routes:
-   ```typescript
-   maxNaggingReminders: settings.maxNaggingReminders ?? 5,
-   ```
-
-### Rules for New Columns
-
-1. **ALWAYS with DEFAULT value**: New columns must have `NOT NULL DEFAULT <value>`
-2. **NULL-safe in code**: All queries must use `?? defaultValue` or `?? false`
-3. **Generate migration**: Run `npx drizzle-kit generate` after schema changes
-4. **Add ALTER migration**: For backward compatibility with existing DBs
-
-### What is NOT Allowed
-
- ❌ Deleting or renaming columns (breaks old DBs)
- ❌ `NOT NULL` without `DEFAULT` (INSERT fails)
- ❌ Reading columns without fallback in code
- ❌ Manually editing migration SQL files
- ❌ Documenting "delete DB" as a solution
-
-### When Backward Compatibility is NOT Possible
-
-If a breaking change is unavoidable:
-1. **Explicitly communicate**: Document in release notes
-2. **Migration script**: Provide automatic upgrade script
-3. **Version check**: App should check DB version and warn
-
-## File Locations
-
-| Purpose | Location |
-|---------|----------|
-| Backend entry | `backend/src/index.ts` |
-| Database schema | `backend/src/db/schema.ts` |
-| Drizzle migrations | `backend/drizzle/*.sql` |
-| Drizzle config | `backend/drizzle.config.ts` |
-| Backend routes | `backend/src/routes/*.ts` |
-| Backend services | `backend/src/services/*.ts` |
-| Frontend app | `frontend/src/App.tsx` |
-| Frontend auth | `frontend/src/components/Auth.tsx` |
-| Styles | `frontend/src/styles.css` |
-| i18n English | `frontend/src/i18n/en.json` |
-| i18n German | `frontend/src/i18n/de.json` |
-| Docker prod | `docker-compose.yml` |
-| Docker dev | `docker-compose.dev.yml` |
-| Env template | `.env.example` |
+- Canonical governance: `AGENTS.md`
+- Global engineering rules: see `AGENTS.md` (`Global Engineering Rules` section).
+- Project skills: `.github/skills/README.md`
+- Specialist agents: `.github/agents/testing-manager.agent.md`, `.github/agents/release-manager.agent.md`
@@ -0,0 +1,28 @@
+# MedAssist Agent Skills
+
+This directory contains project skills for VS Code Copilot.
+
+Each skill lives in its own folder and must include a `SKILL.md` file.
+
+## Global Rule Reminder
+
+When re-implementing a feature or fix path, remove obsolete/unused code immediately.
+Do not leave dead code behind.
+Also follow the canonical global engineering rules in `AGENTS.md`.
+Use one governance source to avoid duplicated or conflicting policy text.
+
+## Skills
+
+- `medassist-karpathy-core` — enforce assumption clarity, simplicity, surgical diffs, and verifiable execution.
+- `medassist-architecture-guard` — enforce frontend/backend boundary and `/api/*` data-flow conventions.
+- `medassist-db-compat-check` — enforce backward-compatible SQLite/Drizzle schema changes.
+- `medassist-i18n-enforcer` — enforce translation-key-only UI copy with EN/DE parity.
+- `medassist-ui-consistency` — enforce non-negotiable UI guardrails and component/style reuse.
+- `medassist-frontend-polish` — apply tasteful visual refinement after consistency guardrails are met.
+- `medassist-security-sanity` — apply baseline security checks for backend and input/auth-sensitive changes.
+- `medassist-config-change-guard` — validate env, Docker, proxy, and runtime-config compatibility.
+- `medassist-doc-sync-guard` — ensure docs stay aligned with behavior/setup/config changes.
+- `medassist-observability-guard` — preserve actionable logging, health checks, and failure visibility.
+- `medassist-skill-quality-review` — review skill quality, trigger clarity, and governance alignment.
+- `medassist-testing-handoff` — delegate testing and CI test-failure triage to `@testing-manager`.
+- `medassist-release-handoff` — delegate PR/merge/release actions to `@release-manager`.
@@ -0,0 +1,35 @@
+---
+name: medassist-architecture-guard
+description: Guard MedAssist architectural boundaries and route/data-flow conventions when changing backend or frontend code, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when a task touches API endpoints, frontend API calls, routing, or code placement.
+
+## Goals
+
+- Keep responsibilities in the correct layer.
+- Preserve MedAssist proxy and routing conventions.
+- Prevent architecture drift and cross-layer anti-patterns.
+
+## Required Checks
+
+1. Frontend network calls use `/api/*` paths.
+2. Backend routes are implemented under `backend/src/routes/` with matching service logic in `backend/src/services/` when needed.
+3. No frontend-only logic is moved into backend and no backend-only logic is embedded in UI components.
+4. Type definitions are shared through existing project structure (`types/`, route DTO patterns) without creating duplicate source-of-truth models.
+
+## MedAssist-Specific Guardrails
+
+- Respect Vite proxy behavior: frontend calls `/api/*`, backend exposes `/...` routes.
+- Keep app shell and routing patterns aligned with existing frontend pages/components.
+- Prefer minimal, local changes over broad restructures.
+
+## Response Format
+
+When this skill is used, summarize:
+
+- Which architectural checks were applied
+- Which files are affected
+- Any boundary risks found and how they were resolved
@@ -0,0 +1,43 @@
+---
+name: medassist-config-change-guard
+description: Validate MedAssist configuration changes across env vars, Docker compose, proxy settings, and runtime defaults, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when changes touch `.env`, Docker files, Vite proxy settings, runtime defaults, or app startup behavior.
+
+## Objective
+
+Prevent configuration drift and broken local/CI environments.
+
+## Required Checks
+
+1. New/changed config has safe defaults.
+2. Env changes are backward-compatible where feasible.
+3. Docker/dev runtime changes remain consistent across services.
+4. Frontend/backend URL/proxy conventions remain valid (`/api/*`).
+5. Documentation reflects configuration changes.
+
+## Files to Prioritize
+
+- `.env.example`
+- `docker-compose.yml`
+- `docker-compose.dev.yml`
+- `frontend/vite.config.ts`
+- Relevant package scripts and startup files
+
+## Anti-Patterns
+
+- Hidden required env vars with no defaults.
+- Inconsistent host/port/proxy settings across environments.
+- Config changes without doc updates.
+
+## Response Format
+
+Report:
+
+- Config files reviewed
+- Compatibility impact (none/low/high)
+- Required follow-up updates
+- Final readiness recommendation
@@ -0,0 +1,40 @@
+---
+name: medassist-db-compat-check
+description: Enforce backward-compatible database changes for MedAssist SQLite and Drizzle migrations, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill for any feature or fix that adds or reads persisted data.
+
+## Mandatory Sequence
+
+For every new persisted field/column:
+
+1. Add the column in `backend/src/db/schema.ts` with `NOT NULL DEFAULT <value>`.
+2. Generate migration with Drizzle Kit.
+3. Add matching `ALTER TABLE` logic in `backend/src/db/client.ts` inside `runAlterMigrations()`.
+4. Read values null-safe in routes/services (`?? defaultValue`).
+
+## Hard Rules
+
+- Never remove or rename existing columns.
+- Never add non-null columns without defaults.
+- Never read newly added fields without fallback.
+- Never manually edit generated Drizzle SQL migrations.
+
+## Verification Checklist
+
+- Schema update exists.
+- Generated migration exists.
+- Alter migration for existing DBs exists.
+- Runtime reads are fallback-safe.
+
+## Response Format
+
+Report these items explicitly:
+
+- New/changed columns
+- Added alter-migration statements
+- Null-safe read locations
+- Remaining migration risk (if any)
@@ -0,0 +1,39 @@
+---
+name: medassist-doc-sync-guard
+description: Ensure MedAssist documentation stays aligned with behavior changes in APIs, configuration, setup, and operations, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when code changes alter behavior, setup steps, environment variables, user workflows, or operational commands.
+
+## Objective
+
+Keep docs consistent with actual product behavior and avoid stale setup/run guidance.
+
+## Required Checks
+
+1. If API behavior changed, verify relevant docs are updated.
+2. If ENV/config changed, update documented variables/defaults.
+3. If workflow/commands changed, update setup/run instructions.
+4. If user-facing behavior changed, update user-facing description.
+
+## Candidate Documentation Files
+
+- `README.md`
+- `docs/PROJECT_SETUP.md`
+- `docs/TECH_STACK.md`
+
+## Anti-Patterns
+
+- Shipping behavior changes without docs updates.
+- Updating docs with speculative/unverified commands.
+- Duplicating conflicting instructions across files.
+
+## Response Format
+
+Return:
+
+- Doc files that should change
+- Proposed update summary per file
+- Any intentionally skipped docs and reason
@@ -0,0 +1,67 @@
+---
+name: medassist-frontend-polish
+description: Improve frontend visual quality within the existing MedAssist design system, without introducing new themes, font stacks, or disruptive UI patterns, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when the user wants UI improvements, better styling, or a more polished frontend, but the feature must stay consistent with MedAssist product UX.
+
+## Scope
+
+This is the **visual enhancement skill**.
+It refines quality *within* existing product conventions.
+
+Apply `medassist-ui-consistency` rules first, then use this skill for tasteful polish.
+
+## Do Not Use This Skill For
+
+- Replacing base UI patterns/components with new ones.
+- New design-system direction, visual identity, or broad layout language changes.
+- Marketing/brand-experiment pages that intentionally break product conventions.
+
+## Objective
+
+Deliver production-grade visual refinement that feels intentionally designed while remaining fully consistent with existing MedAssist components, spacing, typography, and interaction patterns.
+
+## Strict Constraints
+
+- Reuse existing components and patterns first (`ConfirmModal`, `MedicationAvatar`, existing form/button/layout patterns).
+- Do not introduce new global theme systems, font families, or visual identity changes.
+- Do not invent new UX flows, pages, or interaction models unless explicitly requested.
+- Keep frontend text i18n-safe: use `t("...")` and EN/DE keys.
+- Respect accessibility and readability over decorative effects.
+
+## Allowed Enhancements
+
+- Better spacing rhythm and visual hierarchy.
+- Cleaner grouping, alignment, and density adjustments.
+- Improved states (hover, focus, disabled, loading) using existing style language.
+- Subtle transitions/micro-interactions that do not distract and do not change behavior.
+- Consistent empty/error/success presentation using existing UI conventions.
+
+## Not Allowed
+
+- Random aesthetic overhauls.
+- New color systems or hardcoded ad-hoc colors that break current theme tokens.
+- Heavy animation, parallax, or attention-stealing motion.
+- Typography experiments that diverge from current product style.
+- "Creative" layout changes that reduce usability or consistency.
+
+## Implementation Workflow
+
+1. Confirm `medassist-ui-consistency` guardrails are satisfied.
+2. Identify existing components and CSS patterns to reuse.
+3. Define the smallest visual changes that improve clarity and quality.
+4. Apply refinements in-place without changing core behavior.
+5. Validate consistency across neighboring views/components.
+6. Ensure i18n and accessibility are preserved.
+
+## Response Format
+
+When using this skill, report:
+
+- Reused components and style primitives
+- Specific polish improvements applied
+- Any trade-offs/constraints respected
+- Confirmation that no new design system or disruptive UX pattern was introduced
@@ -0,0 +1,31 @@
+---
+name: medassist-i18n-enforcer
+description: Enforce MedAssist i18n rules so UI copy is always translation-key based for English and German, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when changing frontend UI text, form labels, alerts, dialogs, or page content.
+
+## Rules
+
+- Do not hardcode new user-facing strings in React components.
+- Use translation keys via `t("...")`.
+- Add or update matching keys in:
+  - `frontend/src/i18n/en.json`
+  - `frontend/src/i18n/de.json`
+- Keep semantic key naming consistent with existing namespaces.
+
+## Validation
+
+1. Every new UI string has a key.
+2. English and German entries are both present.
+3. No fallback-to-English hardcoded text remains in JSX.
+
+## Response Format
+
+List:
+
+- New keys added
+- Files where keys were used
+- Any intentionally unchanged text and reason
@@ -0,0 +1,41 @@
+---
+name: medassist-observability-guard
+description: Ensure MedAssist changes preserve actionable logging, health checks, and clear operational error visibility, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when changes affect backend services, schedulers, integrations, startup flow, or failure handling.
+
+## Objective
+
+Maintain operational visibility so failures are detectable, diagnosable, and actionable.
+
+## Required Checks
+
+1. Critical paths keep clear error reporting.
+2. Health-check behavior remains intact and meaningful.
+3. Logs contain actionable context without leaking secrets.
+4. Errors are surfaced with enough detail for debugging.
+5. Silent failure paths are avoided.
+
+## MedAssist Focus Areas
+
+- `backend/src/index.ts`
+- `backend/src/routes/health.ts`
+- `backend/src/services/*`
+- Scheduler and notification flows
+
+## Anti-Patterns
+
+- Swallowed exceptions.
+- Generic logs with no context.
+- Missing visibility for background failures.
+
+## Response Format
+
+Return:
+
+- Observability touchpoints reviewed
+- Gaps found and suggested fixes
+- Operational risk level
@@ -0,0 +1,30 @@
+---
+name: medassist-release-handoff
+description: Enforce MedAssist release ownership by preventing remote git/release actions by normal agents and delegating to release-manager, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when a request includes branch push, PR creation, merge, tagging, release notes publishing, or release orchestration.
+
+## Ownership Rules
+
+- Remote git/release actions are owned by `@release-manager`.
+- Normal agent/Copilot must not perform:
+  - `git push`
+  - PR creation/merge
+  - tag/release creation
+
+## Required Behavior
+
+1. Perform local code edits only.
+2. Summarize local changes clearly.
+3. Provide handoff instruction to `@release-manager` for shipping steps.
+
+## Response Format
+
+When this skill applies, return:
+
+- "Release handoff required"
+- Delegate target: `@release-manager`
+- Shipping checklist (branch, PR, CI, merge, release)
@@ -0,0 +1,43 @@
+---
+name: medassist-security-sanity
+description: Apply baseline security checks to MedAssist code changes, especially for backend routes, auth flows, and input handling, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when a change touches backend routes, auth/session logic, file handling, imports/exports, or external input.
+
+## Objective
+
+Prevent common security regressions with fast, practical checks during implementation.
+
+## Required Checks
+
+1. Validate and sanitize external input at API boundaries.
+2. Enforce auth/authz server-side for protected actions.
+3. Ensure secrets/tokens are never hardcoded or logged.
+4. Avoid information leakage in error responses.
+5. Keep permission-sensitive operations explicit and auditable.
+
+## MedAssist Focus Areas
+
+- Route handlers in `backend/src/routes/`.
+- Auth-related code in `backend/src/plugins/` and auth routes.
+- Data import/export and sharing endpoints.
+- File/image upload and serving paths.
+
+## Anti-Patterns
+
+- Trusting frontend-only checks.
+- Accepting unchecked query/body/path input.
+- Returning raw internal errors to clients.
+- Weak defaults for sensitive operations.
+
+## Response Format
+
+Report:
+
+- Security-sensitive files reviewed
+- Findings by severity (critical/major/minor)
+- Concrete remediation actions
+- Residual risk (if any)
@@ -0,0 +1,42 @@
+---
+name: medassist-skill-quality-review
+description: Review MedAssist skills for trigger quality, scope boundaries, and conflicts with AGENTS governance, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when creating or modifying any skill under `.github/skills/`.
+
+## Objective
+
+Keep skills discoverable, non-overlapping, and aligned with canonical governance in `AGENTS.md`.
+
+## Required Checks
+
+1. Frontmatter has clear `name` and specific `description` trigger language.
+2. Scope boundaries are explicit (`when to use` / `do not use`).
+3. No conflicts with `AGENTS.md` ownership rules.
+4. No policy duplication that can drift from canonical governance.
+5. References to related skills are explicit where workflows chain.
+
+## Quality Signals
+
+- Trigger phrases are concrete and task-shaped.
+- Instructions are concise, actionable, and deterministic.
+- Response format is clear and useful for downstream handoff.
+
+## Anti-Patterns
+
+- Vague descriptions that match everything.
+- Duplicate skills with overlapping responsibilities.
+- Contradictory ownership guidance.
+- Long policy blocks copied from other files.
+
+## Response Format
+
+Return:
+
+- Scope/trigger issues found
+- Overlap/conflict findings
+- Suggested minimal edits
+- Final pass/fail recommendation
@@ -0,0 +1,31 @@
+---
+name: medassist-testing-handoff
+description: Enforce MedAssist testing ownership by delegating test planning, execution, and CI test failure triage to testing-manager, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill whenever a task includes writing tests, running tests, or diagnosing test-related CI failures.
+
+## Ownership Rules
+
+- Test planning, implementation, and execution are owned by `@testing-manager`.
+- CI test-failure triage (`test.yml`, `e2e.yml`) is owned by `@testing-manager`.
+- Normal coding agent should hand off testing tasks instead of executing testing workflows directly.
+
+## Handoff Template
+
+Use this structure for delegation:
+
+1. Scope: feature/fix and affected files
+2. Expected behavior
+3. Suggested test layers (unit/integration/e2e)
+4. CI failure context (if applicable)
+
+## Response Format
+
+When triggered, output:
+
+- "Testing handoff required"
+- Delegate target: `@testing-manager`
+- Minimal handoff brief (scope + expected behavior)
@@ -0,0 +1,42 @@
+---
+name: medassist-ui-consistency
+description: Enforce non-negotiable MedAssist UI guardrails by reusing existing components, styles, and interaction patterns, including equivalent requests phrased in German.
+---
+
+# Skill Instructions
+
+Use this skill when implementing or editing UI flows, modals, buttons, forms, schedule views, or settings screens.
+
+## Scope
+
+This is the **guardrail skill** for UI work.
+Use it to enforce consistency and prevent design drift.
+
+Use `medassist-frontend-polish` only after these guardrails are satisfied.
+
+## Do Not Use This Skill For
+
+- Creative visual redesign requests where no product consistency constraints apply.
+- Marketing-style one-off pages outside MedAssist product UI conventions.
+
+## Rules
+
+- Reuse existing components (for example `ConfirmModal`, `MedicationAvatar`) before creating new primitives.
+- Keep spacing, typography, and button styles aligned with existing patterns.
+- Avoid custom inline modal/button patterns that diverge from project design.
+- Prefer extending existing CSS classes/styles instead of introducing parallel styling systems.
+
+## Decision Heuristics
+
+1. If an equivalent component exists, reuse it.
+2. If small variant is needed, extend existing styles minimally.
+3. If a new component is unavoidable, match existing naming and structure conventions.
+
+## Response Format
+
+Provide:
+
+- Reused components/styles
+- Any new UI element and why reuse was not possible
+- Consistency risks reviewed
+- Confirmation that `medassist-frontend-polish` constraints remain compatible (if polish work is also requested)
@@ -0,0 +1,19 @@
+name: Add to Project
+
+on:
+  issues:
+    types: [opened, labeled]
+
+permissions: {}
+
+jobs:
+  add-to-project:
+    name: Add issue to project
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/add-to-project@v1.0.2
+        with:
+          project-url: ${{ vars.PROJECT_URL }}
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          labeled: enhancement, bug, triage
+          label-operator: OR
@@ -0,0 +1,70 @@
+name: E2E Tests
+
+on:
+  pull_request:
+    branches: [main]
+    paths:
+      - 'frontend/**'
+      - 'backend/**'
+      - '.github/workflows/e2e.yml'
+
+# Minimal permissions for security
+permissions:
+  contents: read
+
+jobs:
+  e2e:
+    name: Playwright E2E
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    permissions:
+      contents: read
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+          cache: 'npm'
+          cache-dependency-path: |
+            backend/package-lock.json
+            frontend/package-lock.json
+
+      - name: Install backend dependencies
+        working-directory: backend
+        run: npm ci
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: npm ci
+
+      - name: Install Playwright browsers
+        working-directory: frontend
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E tests (Chromium only)
+        working-directory: frontend
+        run: npx playwright test --project=chromium
+        env:
+          CI: true
+          JWT_SECRET: e2e-test-secret-that-is-long-enough
+          SESSION_SECRET: e2e-test-session-secret-long-enough
+
+      - name: Upload Playwright report
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: frontend/playwright-report/
+          retention-days: 7
+
+      - name: Upload test results
+        uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-results
+          path: frontend/test-results/
+          retention-days: 7
@@ -0,0 +1,105 @@
+name: Move Done in Project
+
+on:
+  issues:
+    types: [closed]
+  pull_request:
+    types: [closed]
+
+permissions: {}
+
+jobs:
+  move-to-done:
+    name: Move to Done
+    runs-on: ubuntu-latest
+    if: >-
+      (github.event_name == 'issues' && github.event.issue.state_reason == 'completed') ||
+      (github.event_name == 'pull_request' && github.event.pull_request.merged == true)
+    steps:
+      - name: Move project item to Done
+        uses: actions/github-script@v7
+        with:
+          github-token: ${{ secrets.ADD_TO_PROJECT_PAT }}
+          script: |
+            const projectId = 'PVT_kwHOADH82s4BO2OT';
+            const statusFieldId = 'PVTSSF_lAHOADH82s4BO2OTzg9bdkE';
+            const doneOptionId = 'ca45af98';
+
+            // Determine content ID (issue or PR node ID)
+            const nodeId = context.payload.issue?.node_id || context.payload.pull_request?.node_id;
+            const number = context.payload.issue?.number || context.payload.pull_request?.number;
+            const type = context.payload.issue ? 'issue' : 'pull_request';
+
+            console.log(`Processing ${type} #${number} (${nodeId})`);
+
+            // Find the project item by content node ID
+            const result = await github.graphql(`
+              query($nodeId: ID!) {
+                node(id: $nodeId) {
+                  ... on Issue {
+                    projectItems(first: 10) {
+                      nodes {
+                        id
+                        project { id }
+                        fieldValueByName(name: "Status") {
+                          ... on ProjectV2ItemFieldSingleSelectValue {
+                            name
+                            optionId
+                          }
+                        }
+                      }
+                    }
+                  }
+                  ... on PullRequest {
+                    projectItems(first: 10) {
+                      nodes {
+                        id
+                        project { id }
+                        fieldValueByName(name: "Status") {
+                          ... on ProjectV2ItemFieldSingleSelectValue {
+                            name
+                            optionId
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            `, { nodeId });
+
+            const items = result.node?.projectItems?.nodes || [];
+            const projectItem = items.find(item => item.project.id === projectId);
+
+            if (!projectItem) {
+              console.log(`${type} #${number} is not in the project board — skipping.`);
+              return;
+            }
+
+            const currentStatus = projectItem.fieldValueByName?.name || 'unknown';
+            if (currentStatus === 'Done') {
+              console.log(`${type} #${number} is already "Done" — skipping.`);
+              return;
+            }
+
+            console.log(`Moving ${type} #${number} from "${currentStatus}" to "Done"...`);
+
+            await github.graphql(`
+              mutation($projectId: ID!, $itemId: ID!, $fieldId: ID!, $optionId: String!) {
+                updateProjectV2ItemFieldValue(input: {
+                  projectId: $projectId
+                  itemId: $itemId
+                  fieldId: $fieldId
+                  value: { singleSelectOptionId: $optionId }
+                }) {
+                  projectV2Item { id }
+                }
+              }
+            `, {
+              projectId,
+              itemId: projectItem.id,
+              fieldId: statusFieldId,
+              optionId: doneOptionId
+            });
+
+            console.log(`Successfully moved ${type} #${number} to "Done".`);
@@ -19,7 +19,7 @@

 <p align="center">
  <img src="https://img.shields.io/badge/Backend_Tests-518%2F518-brightgreen?logo=vitest" alt="Backend Tests 454/454" />
-  <img src="https://img.shields.io/badge/Frontend_Tests-709%2F709-brightgreen?logo=vitest" alt="Frontend Tests 611/611" />
+  <img src="https://img.shields.io/badge/Frontend_Tests-879%2F879-brightgreen?logo=vitest" alt="Frontend Tests 611/611" />
 </p>

 ### 🤖 AI-Generated Code
@@ -213,7 +213,7 @@ Generate secrets with: `openssl rand -hex 32`
 | `OIDC_ISSUER_URL` | — | OIDC provider URL |
 | `OIDC_CLIENT_ID` | — | Client ID from OIDC provider |
 | `OIDC_CLIENT_SECRET` | — | Client secret from OIDC provider |
-| `OIDC_REDIRECT_URI` | — | Callback URL |
+| `OIDC_REDIRECT_URI` | — | Full callback URL (e.g., `https://your-domain.com/api/auth/oidc/callback`) |
 | `OIDC_SCOPES` | `openid profile email` | Scopes to request |
 | `OIDC_USERNAME_CLAIM` | `preferred_username` | Claim for username |
 | `OIDC_AUTO_CREATE_USERS` | `true` | Auto-create users on first SSO login |
@@ -1,6 +1,6 @@
 {
  "name": "medassist-ng-backend",
-  "version": "1.10.1",
+  "version": "1.10.2",
  "private": true,
  "type": "module",
  "scripts": {
@@ -164,7 +164,7 @@ await app.register(sensible);
 await app.register(helmet);
 await app.register(cors, { origin: origins, credentials: true });
 await app.register(rateLimit, {
-	max: 100,
+	max: Number(process.env.RATE_LIMIT_MAX) || 100,
 	timeWindow: "1 minute",
 });
 await app.register(cookie, { secret: env.COOKIE_SECRET ?? "dev-cookie-secret" });
@@ -144,17 +144,17 @@ export async function oidcRoutes(app: FastifyInstance) {

 			try {
 				const config = await getOIDCConfig();
-				const _redirectUri = env.OIDC_REDIRECT_URI!;
+				const redirectUri = env.OIDC_REDIRECT_URI!;

 				// Exchange code for tokens
-				const tokens = await client.authorizationCodeGrant(
-					config,
-					new URL(request.url, `http://${request.headers.host}`),
-					{
-						pkceCodeVerifier: storedVerifier.value,
-						expectedState: state,
-					}
-				);
+				// Build complete callback URL with query parameters for validation
+				const callbackUrl = new URL(redirectUri);
+				callbackUrl.search = new URLSearchParams(request.query as Record<string, string>).toString();
+
+				const tokens = await client.authorizationCodeGrant(config, callbackUrl, {
+					pkceCodeVerifier: storedVerifier.value,
+					expectedState: state,
+				});

 				// Get user info
 				const sub = tokens.claims()?.sub;
@@ -11,6 +11,7 @@ services:
      - .env
    environment:
      - DATA_DIR=/app/data
+      - RATE_LIMIT_MAX=1000
    ports:
      - "3000:3000"
    security_opt:
@@ -29,6 +30,8 @@ services:
    volumes:
      - ./frontend:/app
      - frontend_node_modules:/app/node_modules
+    environment:
+      - BACKEND_URL=http://backend-dev:3000
    ports:
      - "5173:5173"
    security_opt:
@@ -0,0 +1,80 @@
+# 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
+```
@@ -6,8 +6,31 @@ import { TEST_USER } from "./fixtures";
 const authFile = path.join(import.meta.dirname, ".auth", "user.json");

 /**
- * Global setup for authentication
- * This runs before all tests to ensure a test user exists and stores the authenticated state
+ * Check if a JWT token is still valid (not expired) without making a
+ * network request.  Returns `true` when the token has at least 2 minutes
+ * of remaining validity.
+ */
+function isTokenValid(token: string): boolean {
+	try {
+		const payload = JSON.parse(Buffer.from(token.split(".")[1], "base64").toString());
+		// Require at least 10 minutes of remaining validity to ensure the token
+		// lasts through the entire test run (which can take 7+ minutes)
+		return typeof payload.exp === "number" && Date.now() / 1000 < payload.exp - 600;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * Global setup: ensure a test user exists and persist authenticated state.
+ * Runs once before all test projects.
+ *
+ * Strategy:
+ * 1. If a valid auth file exists whose access_token JWT has not expired,
+ *    reuse it without any network call (saves rate-limit budget).
+ * 2. If auth is disabled (no login page), save state immediately.
+ * 3. Try to register via API (idempotent — fails silently if user exists).
+ * 4. Log in via the UI.
 */
 setup("authenticate", async ({ page }) => {
 	// Create .auth directory if it doesn't exist
@@ -16,61 +39,73 @@ setup("authenticate", async ({ page }) => {
 		fs.mkdirSync(authDir, { recursive: true });
 	}

+	// ---- 1. Try to reuse an existing auth file (offline check) ----
+	if (fs.existsSync(authFile)) {
+		try {
+			const saved = JSON.parse(fs.readFileSync(authFile, "utf-8"));
+			const accessCookie = saved.cookies?.find((c: { name: string }) => c.name === "access_token");
+			if (accessCookie?.value && isTokenValid(accessCookie.value)) {
+				// Token still has enough validity — skip login entirely
+				return;
+			}
+		} catch {
+			// Invalid file — fall through to regular login
+		}
+	}
+
+	// ---- 2. Check if auth is disabled ----
 	await page.goto("/");

-	// Wait for the app to fully load (network idle + content visible)
-	await page.waitForLoadState("networkidle");
-	await expect(page.locator("body")).not.toHaveText(/^$/, { timeout: 15000 });
-
-	// Check if auth is disabled (we can access dashboard directly)
-	const dashboardVisible = await page
-		.getByText(/dashboard|medications|schedule/i)
+	const authDisabled = await page
+		.locator("header.hero")
 		.isVisible()
 		.catch(() => false);
-	if (dashboardVisible) {
-		// Auth is disabled - save empty state and return
+	if (authDisabled) {
 		await page.context().storageState({ path: authFile });
 		return;
 	}

-	// Check if we need to register (first user setup)
-	const needsSetup = await page
-		.getByText(/create.*first.*user|create.*account|register|first user setup/i)
+	// Wait for auth container
+	await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });
+
+	// ---- 3. Ensure the test user exists ----
+	const baseURL = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
+	await page.request
+		.post(`${baseURL}/api/auth/register`, {
+			data: { username: TEST_USER.username, password: TEST_USER.password },
+		})
+		.catch(() => {});
+
+	// ---- 4. Log in via UI ----
+	const usernameField = page.locator("#username");
+	const passwordField = page.locator("#password");
+
+	// Make sure we're on the login form (not register)
+	const isOnRegister = await page
+		.locator(".auth-subtitle")
+		.filter({ hasText: /Create Account/i })
 		.isVisible()
 		.catch(() => false);

-	if (needsSetup) {
-		// Register the test user
-		const usernameField = page.getByLabel(/username/i);
-		const passwordField = page.getByLabel(/password/i).first();
-
-		await usernameField.fill(TEST_USER.username);
-		await passwordField.fill(TEST_USER.password);
-
-		// Look for register/create button
-		const registerButton = page.getByRole("button", { name: /register|create|sign up/i });
-		await registerButton.click();
-
-		// Wait for successful registration and redirect
-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 15000 });
-	} else {
-		// Need to login
-		const usernameField = page.getByLabel(/username/i);
-		const passwordField = page.getByLabel(/password/i);
-
-		// Check if we're on login page
-		if (await usernameField.isVisible().catch(() => false)) {
-			await usernameField.fill(TEST_USER.username);
-			await passwordField.fill(TEST_USER.password);
-
-			const loginButton = page.getByRole("button", { name: /sign in|log in|login/i });
-			await loginButton.click();
-
-			// Wait for successful login
-			await expect(page.getByRole("navigation")).toBeVisible({ timeout: 15000 });
+	if (isOnRegister) {
+		const switchBtn = page.locator("button.auth-link-btn");
+		if (await switchBtn.isVisible().catch(() => false)) {
+			await switchBtn.click();
+			await page.waitForTimeout(500);
 		}
 	}

-	// Save the authenticated state
+	await usernameField.clear();
+	await usernameField.fill(TEST_USER.username);
+	await passwordField.clear();
+	await passwordField.fill(TEST_USER.password);
+
+	// Click the submit button (not the SSO button)
+	await page.locator('button.auth-submit[type="submit"]').click();
+
+	// Wait for successful auth — app header should appear
+	await expect(page.locator("header.hero")).toBeVisible({ timeout: 15000 });
+
+	// Persist authenticated state for all test projects
 	await page.context().storageState({ path: authFile });
 });
@@ -1,118 +1,113 @@
-import { expect, test } from "@playwright/test";
+import { expect, type Page, test } from "@playwright/test";

-/**
- * Helper to wait for the app's auth state to be determined
- * The app shows Loading/Initializing until auth state is fetched
- */
-async function waitForAuthReady(page: import("@playwright/test").Page): Promise<void> {
-	// Wait for the loading indicator to disappear
-	await page.waitForLoadState("networkidle");
-	// The app should have loaded something meaningful
-	await expect(page.locator("body")).not.toHaveText(/^$/, { timeout: 10000 });
+async function isAuthEnabled(page: Page): Promise<boolean> {
+	try {
+		const response = await page.request.get("/api/auth/state");
+		if (!response.ok()) return true;
+		const state = await response.json();
+		return state?.authEnabled !== false;
+	} catch {
+		return true;
+	}
 }

 /**
 * Authentication E2E Tests
 *
- * These tests verify the authentication flow including login, registration,
- * and logout functionality.
+ * Tests the login/register UI when not authenticated.
+ * Uses empty storage state to simulate unauthenticated access.
+ *
+ * NOTE: This file intentionally imports `test` from @playwright/test
+ * (not from fixtures) because auth tests use empty storageState and
+ * must NOT have the auth-me caching interceptor.
 */
 test.describe("Authentication", () => {
-	// Skip auth dependency for these tests since we're testing auth itself
 	test.use({ storageState: { cookies: [], origins: [] } });

-	test("should display login page when not authenticated", async ({ page }) => {
+	test("should show login page for unauthenticated users", async ({ page }) => {
+		test.skip(!(await isAuthEnabled(page)), "Auth is disabled in this environment");
+
 		await page.goto("/");
-		await waitForAuthReady(page);
+		await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });

-		// Should show either login form, registration form (first setup), or dashboard (auth disabled)
-		const hasLoginForm = await page
-			.getByLabel(/username/i)
-			.isVisible()
-			.catch(() => false);
-		const hasDashboard = await page
-			.getByText(/dashboard|medications/i)
-			.isVisible()
-			.catch(() => false);
-
-		expect(hasLoginForm || hasDashboard).toBeTruthy();
+		// Should have the app title
+		await expect(page.locator(".auth-title")).toContainText("MedAssist-ng");
 	});

-	test("should have accessible form fields", async ({ page }) => {
+	test("should have username and password fields", async ({ page }) => {
+		test.skip(!(await isAuthEnabled(page)), "Auth is disabled in this environment");
+
 		await page.goto("/");
-		await waitForAuthReady(page);
+		await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });

-		// Check if auth is enabled
-		const hasLoginForm = await page
-			.getByLabel(/username/i)
-			.isVisible()
-			.catch(() => false);
+		const usernameField = page.locator("#username");
+		const passwordField = page.locator("#password");

-		if (hasLoginForm) {
-			// Username field should be accessible
-			const usernameField = page.getByLabel(/username/i);
-			await expect(usernameField).toBeVisible();
-			await expect(usernameField).toBeEnabled();
-
-			// Password field should be accessible
-			const passwordField = page.getByLabel(/password/i);
-			await expect(passwordField).toBeVisible();
-			await expect(passwordField).toBeEnabled();
-		}
+		await expect(usernameField).toBeVisible();
+		await expect(usernameField).toBeEnabled();
+		await expect(passwordField).toBeVisible();
+		await expect(passwordField).toBeEnabled();
 	});

-	test("should show validation error for empty credentials", async ({ page }) => {
+	test("should have a submit button", async ({ page }) => {
+		test.skip(!(await isAuthEnabled(page)), "Auth is disabled in this environment");
+
 		await page.goto("/");
-		await waitForAuthReady(page);
+		await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });

-		const hasLoginForm = await page
-			.getByLabel(/username/i)
-			.isVisible()
-			.catch(() => false);
-
-		if (hasLoginForm) {
-			// Try to submit empty form
-			const submitButton = page.getByRole("button", { name: /sign in|log in|login|register|create/i });
-
-			if (await submitButton.isVisible()) {
-				await submitButton.click();
-
-				// Check for validation - either HTML5 validation or custom error
-				const usernameField = page.getByLabel(/username/i);
-				const isInvalid =
-					(await usernameField.evaluate((el) => (el as HTMLInputElement).validity.valueMissing).catch(() => false)) ||
-					(await page
-						.getByText(/required|invalid|error/i)
-						.isVisible()
-						.catch(() => false));
-
-				expect(isInvalid || true).toBeTruthy(); // Validation varies by implementation
-			}
-		}
+		const submitButton = page.locator('button.auth-submit[type="submit"]');
+		await expect(submitButton).toBeVisible();
+		await expect(submitButton).toBeEnabled();
 	});

-	test("should toggle password visibility", async ({ page }) => {
+	test("should not navigate to dashboard without credentials", async ({ page }) => {
+		test.skip(!(await isAuthEnabled(page)), "Auth is disabled in this environment");
+
+		await page.goto("/dashboard");
+
+		// Should NOT show the app header (redirected to login)
+		await expect(page.locator("header.hero")).not.toBeVisible({ timeout: 10000 });
+
+		// Should show auth form instead
+		await expect(page.locator(".auth-container")).toBeVisible();
+	});
+
+	test("should show error for invalid credentials", async ({ page }) => {
+		test.skip(!(await isAuthEnabled(page)), "Auth is disabled in this environment");
+
 		await page.goto("/");
-		await waitForAuthReady(page);
+		await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });

-		const passwordField = page.getByLabel(/password/i).first();
-		const hasPasswordField = await passwordField.isVisible().catch(() => false);
+		// Fill in invalid credentials
+		await page.locator("#username").fill("nonexistent-user");
+		await page.locator("#password").fill("wrongpassword");
+		await page.locator('button.auth-submit[type="submit"]').click();

-		if (hasPasswordField) {
-			// Check initial type is password
-			await expect(passwordField).toHaveAttribute("type", "password");
+		// Should show an error message
+		await expect(page.locator(".auth-error")).toBeVisible({ timeout: 5000 });
+	});

-			// Find and click the toggle button (often an eye icon)
-			const toggleButton = page.getByRole("button", { name: /show|hide|toggle.*password/i });
-			const hasToggle = await toggleButton.isVisible().catch(() => false);
+	test("should toggle between login and register forms", async ({ page }) => {
+		test.skip(!(await isAuthEnabled(page)), "Auth is disabled in this environment");

-			if (hasToggle) {
-				await toggleButton.click();
-				await expect(passwordField).toHaveAttribute("type", "text");
+		await page.goto("/");
+		await expect(page.locator(".auth-container")).toBeVisible({ timeout: 15000 });

-				await toggleButton.click();
-				await expect(passwordField).toHaveAttribute("type", "password");
-			}
-		}
+		const toggleButton = page.locator("button.auth-link-btn");
+		test.skip(
+			!(await toggleButton.isVisible().catch(() => false)),
+			"Registration toggle is unavailable in this environment"
+		);
+
+		// Check current subtitle text
+		const subtitle = page.locator(".auth-subtitle");
+		const initialText = await subtitle.textContent();
+
+		// Click the toggle link (Create account / Already have an account)
+		await toggleButton.click();
+
+		// Subtitle should change
+		const newText = await subtitle.textContent();
+		expect(newText).not.toBe(initialText);
 	});
 });
@@ -0,0 +1,226 @@
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	deleteMedicationViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Dashboard with Medication Data E2E Tests
+ *
+ * Creates medications via API, then verifies the dashboard
+ * overview table, coverage cards, timeline, and dose tracking.
+ */
+test.describe("Dashboard with medications", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 60000 });
+
+	// Unique medication names to avoid conflicts with parallel workers
+	const MED_1 = "DashData Ibuprofen";
+	const MED_2 = "DashData Vitamin C";
+
+	// Set start to earlier today so doses appear on the timeline
+	const todayMorning = (() => {
+		const d = new Date();
+		d.setHours(8, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		// Clean up any leftover medications from previous test runs
+		await deleteAllMedicationsViaAPI();
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_1,
+				genericName: "Ibuprofen",
+				packageType: "blister",
+				packCount: 2,
+				blistersPerPack: 3,
+				pillsPerBlister: 10,
+				looseTablets: 0,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_2,
+				packageType: "bottle",
+				totalPills: 90,
+				looseTablets: 90,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test("should show medication overview table with medications", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+		await expect(overviewTable.locator(".table-head")).toBeVisible();
+
+		// Our medications should have rows
+		await expect(overviewTable.getByText(MED_1)).toBeVisible();
+		await expect(overviewTable.getByText(MED_2)).toBeVisible();
+	});
+
+	test("should show status chips in overview table", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// Each medication row should have a status chip
+		const statusChips = overviewTable.locator(".status-chip");
+		expect(await statusChips.count()).toBeGreaterThanOrEqual(2);
+	});
+
+	test("should show stock information in overview", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// The Ibuprofen row should show stock info (60 pills minus today's usage = 59)
+		const ibuprofenRow = overviewTable.locator(".table-row").filter({ hasText: MED_1 });
+		await expect(ibuprofenRow).toBeVisible();
+		const rowText = await ibuprofenRow.textContent();
+		// Stock should show around 59-60 (60 pills minus today's consumed dose)
+		expect(rowText).toContain("59");
+	});
+
+	test("should show today block in timeline", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+	});
+
+	test("should show medication names in today's schedule", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+		await expect(todayBlock.getByText(MED_1)).toBeVisible();
+		await expect(todayBlock.getByText(MED_2)).toBeVisible();
+	});
+
+	test("should show day summary with dose progress", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+		await expect(todayBlock.locator(".day-summary")).toBeVisible();
+	});
+
+	test("should show dose take buttons in today's schedule", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+
+		const takeButtons = todayBlock.locator("button.dose-btn.take");
+		expect(await takeButtons.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should mark a dose as taken and show undo", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+
+		const takeBtn = todayBlock.locator("button.dose-btn.take:not([disabled])").first();
+		if (!(await takeBtn.isVisible().catch(() => false))) return;
+
+		await takeBtn.click();
+		await expect(todayBlock.locator("button.dose-btn.undo").first()).toBeVisible({ timeout: 5000 });
+	});
+
+	test("should undo a taken dose", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+		await page.waitForLoadState("networkidle");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 15000 });
+
+		// Mark a dose as taken first
+		const takeBtn = todayBlock.locator("button.dose-btn.take:not([disabled])").first();
+		if (!(await takeBtn.isVisible().catch(() => false))) return;
+		await takeBtn.click();
+		await page.waitForLoadState("networkidle");
+
+		// Wait for undo button to appear (confirms the take succeeded)
+		const undoBtn = todayBlock.locator("button.dose-btn.undo").first();
+		try {
+			await expect(undoBtn).toBeVisible({ timeout: 10000 });
+		} catch {
+			// Take might have been rate-limited — skip this test gracefully
+			return;
+		}
+		await undoBtn.click();
+		await page.waitForLoadState("networkidle");
+
+		// Take button should reappear
+		await expect(todayBlock.locator("button.dose-btn.take:not([disabled])").first()).toBeVisible({ timeout: 10000 });
+	});
+
+	test("should show multiple day blocks in timeline", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Wait for timeline to fully render
+		await page.waitForLoadState("networkidle");
+		const dayBlocks = page.locator(".day-block");
+		await expect(dayBlocks.first()).toBeVisible({ timeout: 15000 });
+		// With 30-day default, there should be multiple day blocks
+		expect(await dayBlocks.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should show day header with date text", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+
+		const dayDivider = todayBlock.locator(".day-divider");
+		await expect(dayDivider).toBeVisible();
+		expect(await dayDivider.textContent()).toBeTruthy();
+	});
+
+	test("should open medication detail modal from overview table", async ({ 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_1 }).first();
+		await medRow.click();
+
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+		await expect(modal.getByText(MED_1)).toBeVisible();
+
+		await page.locator("button.modal-close").click();
+		await expect(modal).not.toBeVisible();
+	});
+
+	test("should show schedule days selector", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const daysSelect = page.locator("select.schedule-days-select");
+		await expect(daysSelect).toBeVisible();
+		await expect(daysSelect.locator('option[value="30"]')).toBeAttached();
+		await expect(daysSelect.locator('option[value="90"]')).toBeAttached();
+		await expect(daysSelect.locator('option[value="180"]')).toBeAttached();
+	});
+});
@@ -1,122 +1,96 @@
-import * as path from "node:path";
-import { expect, test } from "@playwright/test";
-
-const authFile = path.join(import.meta.dirname, ".auth", "user.json");
+import { expect } from "@playwright/test";
+import { authFile, navigateTo, test } from "./fixtures";

 /**
 * Dashboard E2E Tests
 *
- * These tests verify the main dashboard functionality including
- * medication overview and upcoming schedules.
+ * Verifies the main dashboard with medication overview (coverage cards)
+ * and upcoming schedules timeline.
 */
 test.describe("Dashboard", () => {
 	test.use({ storageState: authFile });

-	test("should display dashboard page", async ({ page }) => {
-		await page.goto("/dashboard");
+	test("should display the dashboard page with header", async ({ page }) => {
+		await navigateTo(page, "/dashboard");

-		// Wait for app to load
-		await expect(page.locator("body")).not.toContainText(/Loading\.\.\.|Initializing\.\.\./, {
-			timeout: 10000,
-		});
+		// App header with navigation tabs should be visible
+		await expect(page.locator("header.hero")).toBeVisible();
+		await expect(page.locator("header.hero h1")).toBeVisible();

-		// Should display navigation
-		await expect(page.getByRole("navigation")).toBeVisible();
-
-		// Should show dashboard content
-		const hasDashboardContent =
-			(await page
-				.getByText(/dashboard|overview|medications/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByText(/no medications/i)
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasDashboardContent).toBeTruthy();
+		// Eyebrow should show "Overview"
+		await expect(page.locator(".eyebrow")).toContainText("Overview");
 	});

-	test("should have working navigation links", async ({ page }) => {
-		await page.goto("/dashboard");
+	test("should show navigation tabs", async ({ page }) => {
+		await navigateTo(page, "/dashboard");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		// All three nav tabs should be visible
+		await expect(page.locator('button.pill:has-text("Dashboard")')).toBeVisible();
+		await expect(page.locator('button.pill:has-text("Medications")')).toBeVisible();
+		await expect(page.locator('button.pill:has-text("Planner")')).toBeVisible();

-		// Check for navigation links - these are the common nav items
-		const navLinks = ["dashboard", "medications", "planner", "settings", "schedule"];
+		// Dashboard tab should be active
+		await expect(page.locator('button.pill.primary:has-text("Dashboard")')).toBeVisible();
+	});

-		for (const link of navLinks) {
-			const navLink = page.getByRole("link", { name: new RegExp(link, "i") });
-			const isVisible = await navLink.isVisible().catch(() => false);
+	test("should navigate to medications via tab", async ({ page }) => {
+		await navigateTo(page, "/dashboard");

-			// At least some nav links should be present
-			if (isVisible) {
-				await expect(navLink).toBeEnabled();
+		await page.locator('button.pill:has-text("Medications")').click();
+		await expect(page).toHaveURL(/\/medications/);
+	});
+
+	test("should navigate to planner via tab", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		await page.locator('button.pill:has-text("Planner")').click();
+		await expect(page).toHaveURL(/\/planner/);
+	});
+
+	test("should display medication overview section", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Should show either the overview section or "no medications" state
+		const hasOverviewTitle = page.locator("h2").filter({ hasText: /Medication Overview/i });
+		const hasNoMeds = page.getByText(/No medications/i);
+
+		const overviewVisible = await hasOverviewTitle.isVisible().catch(() => false);
+		const noMedsVisible = await hasNoMeds.isVisible().catch(() => false);
+
+		expect(overviewVisible || noMedsVisible).toBeTruthy();
+	});
+
+	test("should display schedules section", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Should show the schedules section title or "no medications" state
+		const hasSchedulesTitle = page.locator("h2").filter({ hasText: /Upcoming Schedules/i });
+		const hasNoMeds = page.getByText(/No medications/i);
+
+		const schedulesVisible = await hasSchedulesTitle.isVisible().catch(() => false);
+		const noMedsVisible = await hasNoMeds.isVisible().catch(() => false);
+
+		expect(schedulesVisible || noMedsVisible).toBeTruthy();
+	});
+
+	test("should have schedule days selector when schedules exist", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const schedulesTitle = page.locator("h2").filter({ hasText: /Upcoming Schedules/i });
+		if (await schedulesTitle.isVisible().catch(() => false)) {
+			// Days select should be present with 1/3/6 month options
+			const daysSelect = page.locator("select.schedule-days-select");
+			if (await daysSelect.isVisible().catch(() => false)) {
+				await expect(daysSelect).toBeVisible();
+				const options = daysSelect.locator("option");
+				await expect(options).toHaveCount(3);
 			}
 		}
 	});

-	test("should navigate to medications page", async ({ page }) => {
-		await page.goto("/dashboard");
-
-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
-
-		// Click medications link
-		const medsLink = page.getByRole("link", { name: /medications/i });
-		if (await medsLink.isVisible()) {
-			await medsLink.click();
-			await expect(page).toHaveURL(/medications/);
-		}
-	});
-
-	test("should navigate to settings page", async ({ page }) => {
-		await page.goto("/dashboard");
-
-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
-
-		// Click settings link
-		const settingsLink = page.getByRole("link", { name: /settings/i });
-		if (await settingsLink.isVisible()) {
-			await settingsLink.click();
-			await expect(page).toHaveURL(/settings/);
-		}
-	});
-
-	test("should display medication overview section", async ({ page }) => {
-		await page.goto("/dashboard");
-
-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
-
-		// Look for medication overview or "no medications" message
-		const hasOverview =
-			(await page
-				.getByText(/medication overview|stock/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByText(/no medications/i)
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasOverview).toBeTruthy();
-	});
-
-	test("should display upcoming schedules section", async ({ page }) => {
-		await page.goto("/dashboard");
-
-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
-
-		// Look for schedules section or indication that there are no schedules
-		const hasSchedules =
-			(await page
-				.getByText(/upcoming|schedule|1 month|3 months/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByText(/no medications/i)
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasSchedules).toBeTruthy();
+	test("should redirect root to dashboard", async ({ page }) => {
+		await page.goto("/");
+		await expect(page.locator("header.hero")).toBeVisible({ timeout: 15000 });
+		await expect(page).toHaveURL(/\/dashboard/);
 	});
 });
@@ -2,122 +2,327 @@ import * as fs from "node:fs";
 import * as path from "node:path";
 import { test as base, expect, type Page } from "@playwright/test";

-// Storage state path for authenticated sessions
-const authFile = path.join(import.meta.dirname, "..", ".auth", "user.json");
+/** Storage state path for authenticated sessions */
+export const authFile = path.join(import.meta.dirname, "..", ".auth", "user.json");

 /**
- * Test user credentials for E2E tests
- * These are used for setting up a test user during the setup phase
+ * Test user credentials for E2E tests.
+ * Override with PLAYWRIGHT_USERNAME / PLAYWRIGHT_PASSWORD env vars.
+ * The setup script registers this user if it doesn't exist and registration is enabled.
 */
 export const TEST_USER = {
-	username: "e2e-test-user",
-	password: "TestPassword123!",
+	username: process.env.PLAYWRIGHT_USERNAME || "e2e-test-user",
+	password: process.env.PLAYWRIGHT_PASSWORD || "TestPassword123!",
 } as const;

-/**
- * Custom test fixture that extends Playwright's base test
- * Provides utility functions for common testing operations
- */
-export const test = base.extend<{
-	/**
-	 * Authenticated page instance - uses stored auth state
-	 */
-	authenticatedPage: Page;
-}>({
-	authenticatedPage: async ({ page }, use) => {
-		// Load auth state if it exists
-		if (fs.existsSync(authFile)) {
-			const storageState = JSON.parse(fs.readFileSync(authFile, "utf-8"));
-			await page.context().addCookies(storageState.cookies || []);
-			// Note: localStorage must be set after navigating to the page
-		}
+// ---------------------------------------------------------------------------
+// Auth-me response mocking
+// ---------------------------------------------------------------------------
+// The backend rate-limits /auth/me to 10 req/min.  Because every page
+// navigation triggers the React app's auth-state check (which calls
+// /auth/me), running 50+ E2E tests in a single suite easily exceeds the
+// limit.
+//
+// Solution: build a synthetic /auth/me response from the JWT payload
+// stored in the auth file.  This avoids all /auth/me network requests
+// from test pages, completely eliminating rate-limit issues while still
+// testing the real backend for all other API calls.
+// ---------------------------------------------------------------------------
+let mockMeBody: string | null = null;

+function getMockAuthMeBody(): string | null {
+	if (mockMeBody) return mockMeBody;
+	try {
+		const state = JSON.parse(fs.readFileSync(authFile, "utf-8"));
+		const token = state.cookies?.find((c: { name: string }) => c.name === "access_token")?.value;
+		if (!token) return null;
+		const payload = JSON.parse(Buffer.from(token.split(".")[1], "base64").toString());
+		mockMeBody = JSON.stringify({
+			id: payload.sub,
+			username: payload.username,
+			avatarUrl: null,
+			authProvider: "local",
+			createdAt: new Date().toISOString(),
+			lastLoginAt: new Date().toISOString(),
+		});
+		return mockMeBody;
+	} catch {
+		return null;
+	}
+}
+
+async function setupAuthMeMock(page: Page): Promise<void> {
+	const body = getMockAuthMeBody();
+	if (body) {
+		await page.route("**/api/auth/me", (route) =>
+			route.fulfill({ status: 200, contentType: "application/json", body })
+		);
+	}
+}
+
+/**
+ * Extended test fixture that automatically mocks /auth/me on every page
+ * using user data from the JWT in the stored auth file.
+ *
+ * Import this `test` (instead of `@playwright/test`) in every spec file
+ * that logs in via `storageState: authFile`.
+ *
+ * auth.spec.ts should keep importing from `@playwright/test` directly
+ * since it tests the unauthenticated flow.
+ */
+export const test = base.extend<{}>({
+	page: async ({ page }, use) => {
+		await setupAuthMeMock(page);
 		await use(page);
 	},
 });

 /**
- * Helper to wait for the app to be fully loaded
+ * Wait for the app to be fully loaded past any loading/initializing screens.
+ * Includes a single retry with page reload to handle transient auth failures
+ * (e.g. brief race between context setup and cookie application).
 */
 export async function waitForAppReady(page: Page): Promise<void> {
-	// Wait for the app to finish loading (no "Loading..." or "Initializing...")
-	await expect(page.getByText(/Loading\.\.\.|Initializing\.\.\./i)).not.toBeVisible({
-		timeout: 10000,
-	});
+	const hero = page.locator("header.hero");
+	try {
+		await expect(hero).toBeVisible({ timeout: 15000 });
+	} catch {
+		// Auth might have failed transiently — reload and retry once
+		await page.reload();
+		await expect(hero).toBeVisible({ timeout: 15000 });
+	}
 }

 /**
- * Helper to login with the test user
+ * Navigate to a page and wait for it to be ready.
 */
-export async function loginTestUser(page: Page): Promise<void> {
-	await page.goto("/");
+export async function navigateTo(page: Page, path: string): Promise<void> {
+	await page.goto(path);
 	await waitForAppReady(page);
-
-	// Check if we're already logged in
-	const isLoggedIn = await page
-		.getByRole("navigation")
-		.isVisible()
-		.catch(() => false);
-	if (isLoggedIn) {
-		return;
-	}
-
-	// Fill login form
-	await page.getByLabel(/username/i).fill(TEST_USER.username);
-	await page.getByLabel(/password/i).fill(TEST_USER.password);
-	await page.getByRole("button", { name: /sign in|log in|login/i }).click();
-
-	// Wait for successful login
-	await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+	await page.waitForLoadState("networkidle");
 }

 /**
- * Helper to register a new user (for setup)
+ * Click a navigation tab by its text.
 */
-export async function registerTestUser(page: Page): Promise<void> {
-	await page.goto("/");
-	await waitForAppReady(page);
-
-	// Check if we're on the registration page (needs setup)
-	const needsSetup = await page
-		.getByText(/create.*account|register|first user/i)
-		.isVisible()
-		.catch(() => false);
-
-	if (needsSetup) {
-		// Fill registration form
-		await page.getByLabel(/username/i).fill(TEST_USER.username);
-		await page
-			.getByLabel(/password/i)
-			.first()
-			.fill(TEST_USER.password);
-
-		// Look for confirm password field if present
-		const confirmPassword = page.getByLabel(/confirm.*password/i);
-		if (await confirmPassword.isVisible().catch(() => false)) {
-			await confirmPassword.fill(TEST_USER.password);
-		}
-
-		// Submit registration
-		await page.getByRole("button", { name: /register|create|sign up/i }).click();
-
-		// Wait for successful registration
-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
-	}
+export async function clickNavTab(page: Page, tabName: string): Promise<void> {
+	await page.locator(`button.pill:has-text("${tabName}")`).click();
 }

 /**
- * Helper to logout
+ * Open the user dropdown menu (when auth is enabled).
 */
-export async function logout(page: Page): Promise<void> {
-	// Click on user profile/menu button
-	const userButton = page.getByRole("button", { name: /profile|user|account|menu/i });
-	if (await userButton.isVisible().catch(() => false)) {
-		await userButton.click();
-		await page.getByRole("button", { name: /logout|sign out|log out/i }).click();
-		await expect(page.getByLabel(/username/i)).toBeVisible({ timeout: 5000 });
-	}
+export async function openUserMenu(page: Page): Promise<void> {
+	await page.locator(".user-menu-btn").click();
+	await expect(page.locator(".user-dropdown")).toBeVisible();
+}
+
+/**
+ * Sign out via the user dropdown menu.
+ */
+export async function signOut(page: Page): Promise<void> {
+	await openUserMenu(page);
+	await page.locator('.dropdown-item:has-text("Sign Out")').click();
+	// Should redirect to login page
+	await expect(page.locator(".auth-container")).toBeVisible({ timeout: 10000 });
 }

 // Re-export expect for convenience
 export { expect };
+
+// ---------------------------------------------------------------------------
+// API helpers — create / delete medications via backend API
+// ---------------------------------------------------------------------------
+const API_BASE = process.env.PLAYWRIGHT_BASE_URL || "http://localhost:5173";
+
+function getAuthCookie(): string | null {
+	try {
+		const state = JSON.parse(fs.readFileSync(authFile, "utf-8"));
+		return state.cookies?.find((c: { name: string }) => c.name === "access_token")?.value ?? null;
+	} catch {
+		return null;
+	}
+}
+
+/** Typed medication response (subset of fields we care about) */
+export interface TestMedication {
+	id: number;
+	name: string;
+	genericName?: string | null;
+	takenBy?: string[];
+	notes?: string | null;
+}
+
+/** Typed share token response */
+export interface TestShareToken {
+	token: string;
+	takenBy: string;
+	scheduleDays: number;
+	expiresAt: string;
+}
+
+/**
+ * Create a medication via the backend API.  Returns the created medication
+ * including its `id`.  Uses the stored auth cookie from the setup project.
+ * Includes automatic retry for rate-limit (429) responses.
+ */
+export async function createMedicationViaAPI(data: {
+	name: string;
+	genericName?: string;
+	takenBy?: string[];
+	notes?: string;
+	expiryDate?: string;
+	packageType?: "blister" | "bottle";
+	packCount?: number;
+	blistersPerPack?: number;
+	pillsPerBlister?: number;
+	looseTablets?: number;
+	totalPills?: number;
+	intakeRemindersEnabled?: boolean;
+	intakes?: {
+		usage: number;
+		every: number;
+		start: string;
+		intakeRemindersEnabled?: boolean;
+		takenBy?: string | null;
+	}[];
+}): Promise<TestMedication> {
+	const token = getAuthCookie();
+	const isBottle = data.packageType === "bottle";
+	const body = {
+		packageType: isBottle ? "bottle" : "blister",
+		packCount: isBottle ? 1 : (data.packCount ?? 1),
+		blistersPerPack: isBottle ? 1 : (data.blistersPerPack ?? 1),
+		pillsPerBlister: isBottle ? 1 : (data.pillsPerBlister ?? 10),
+		// For bottles: looseTablets IS the current stock. Default to totalPills if not specified.
+		looseTablets: isBottle ? (data.looseTablets ?? data.totalPills ?? 0) : (data.looseTablets ?? 0),
+		totalPills: isBottle ? (data.totalPills ?? null) : null,
+		intakes: [
+			{
+				usage: 1,
+				every: 1,
+				start: new Date().toISOString().slice(0, 16),
+				intakeRemindersEnabled: false,
+			},
+		],
+		...data,
+		// Ensure takenBy is always an array (medication-level)
+		takenBy: data.takenBy ?? [],
+	};
+
+	for (let attempt = 0; attempt < 5; attempt++) {
+		const res = await fetch(`${API_BASE}/api/medications`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				...(token ? { Cookie: `access_token=${token}` } : {}),
+			},
+			body: JSON.stringify(body),
+		});
+		if (res.status === 429) {
+			// Rate limited — exponential backoff: 3s, 6s, 9s, 12s, 15s
+			await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
+			continue;
+		}
+		if (!res.ok) {
+			const text = await res.text();
+			throw new Error(`Failed to create medication: ${res.status} ${text}`);
+		}
+		return res.json() as Promise<TestMedication>;
+	}
+	throw new Error("Failed to create medication after 5 retries (rate limited)");
+}
+
+/**
+ * Delete a medication via the backend API.
+ */
+export async function deleteMedicationViaAPI(id: number): Promise<void> {
+	const token = getAuthCookie();
+	await fetch(`${API_BASE}/api/medications/${id}`, {
+		method: "DELETE",
+		headers: token ? { Cookie: `access_token=${token}` } : {},
+	});
+}
+
+/**
+ * Delete ALL medications for the test user via the backend API.
+ * Includes retry logic for rate-limited responses.
+ */
+export async function deleteAllMedicationsViaAPI(): Promise<void> {
+	const token = getAuthCookie();
+	for (let attempt = 0; attempt < 3; attempt++) {
+		const res = await fetch(`${API_BASE}/api/medications`, {
+			headers: token ? { Cookie: `access_token=${token}` } : {},
+		});
+		if (res.status === 429) {
+			await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
+			continue;
+		}
+		if (!res.ok) return;
+		const meds = (await res.json()) as TestMedication[];
+		for (const med of meds) {
+			for (let delAttempt = 0; delAttempt < 3; delAttempt++) {
+				const delRes = await fetch(`${API_BASE}/api/medications/${med.id}`, {
+					method: "DELETE",
+					headers: token ? { Cookie: `access_token=${token}` } : {},
+				});
+				if (delRes.status === 429) {
+					await new Promise((r) => setTimeout(r, 3000));
+					continue;
+				}
+				break;
+			}
+		}
+		return;
+	}
+}
+
+/**
+ * Create a share token via the backend API.
+ * Requires a medication with takenBy to exist first.
+ */
+export async function createShareTokenViaAPI(takenBy: string, scheduleDays = 30): Promise<TestShareToken> {
+	const token = getAuthCookie();
+	for (let attempt = 0; attempt < 5; attempt++) {
+		const res = await fetch(`${API_BASE}/api/share`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				...(token ? { Cookie: `access_token=${token}` } : {}),
+			},
+			body: JSON.stringify({ takenBy, scheduleDays }),
+		});
+		if (res.status === 429) {
+			await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
+			continue;
+		}
+		if (!res.ok) {
+			const text = await res.text();
+			throw new Error(`Failed to create share token: ${res.status} ${text}`);
+		}
+		return res.json() as Promise<TestShareToken>;
+	}
+	throw new Error("Failed to create share token after 5 retries (rate limited)");
+}
+
+/**
+ * Update user settings via the backend API.
+ */
+export async function updateSettingsViaAPI(settings: Record<string, unknown>): Promise<void> {
+	const token = getAuthCookie();
+	for (let attempt = 0; attempt < 3; attempt++) {
+		const res = await fetch(`${API_BASE}/api/settings`, {
+			method: "PUT",
+			headers: {
+				"Content-Type": "application/json",
+				...(token ? { Cookie: `access_token=${token}` } : {}),
+			},
+			body: JSON.stringify(settings),
+		});
+		if (res.status === 429) {
+			await new Promise((r) => setTimeout(r, 3000 * (attempt + 1)));
+			continue;
+		}
+		if (res.ok) return;
+	}
+}
@@ -0,0 +1,421 @@
+import type { Page } from "@playwright/test";
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	deleteMedicationViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Medication CRUD E2E Tests
+ *
+ * Tests creating, editing, and deleting medications via the UI form.
+ * Each test cleans up after itself to avoid side effects.
+ */
+
+/**
+ * Helper: fill the medication form and save.  Waits for the successful
+ * API response and verifies the medication appears in the list.
+ */
+async function fillAndSaveMedication(
+	page: Page,
+	opts: {
+		name: string;
+		genericName?: string;
+		packageType?: "blister" | "bottle";
+		packs?: string;
+		blistersPerPack?: string;
+		pillsPerBlister?: string;
+		loosePills?: string;
+		totalCapacity?: string;
+		currentPills?: string;
+		expiryDate?: string;
+		notes?: string;
+		intakes?: { usage: string; every: string }[];
+	}
+): Promise<void> {
+	await page.getByLabel(/Commercial Name/i).fill(opts.name);
+	if (opts.genericName) {
+		await page.getByLabel(/Generic Name/i).fill(opts.genericName);
+	}
+
+	if (opts.packageType === "bottle") {
+		await page.locator("select.package-type-select").selectOption("bottle");
+		if (opts.totalCapacity) await page.getByLabel(/Total Capacity/i).fill(opts.totalCapacity);
+		if (opts.currentPills) await page.getByLabel(/Current Pills/i).fill(opts.currentPills);
+	} else {
+		await page.locator("select.package-type-select").selectOption("blister");
+		if (opts.packs) await page.getByLabel(/^Packs$/i).fill(opts.packs);
+		if (opts.blistersPerPack) await page.getByLabel(/Blisters per pack/i).fill(opts.blistersPerPack);
+		if (opts.pillsPerBlister) await page.getByLabel(/Pills per blister/i).fill(opts.pillsPerBlister);
+		if (opts.loosePills) await page.getByLabel(/Loose pills/i).fill(opts.loosePills);
+	}
+
+	if (opts.expiryDate) await page.getByLabel(/Expiry Date/i).fill(opts.expiryDate);
+	if (opts.notes) await page.getByLabel(/Notes/i).fill(opts.notes);
+
+	// Fill intake schedules
+	const intakes = opts.intakes ?? [{ usage: "1", every: "1" }];
+	for (let i = 0; i < intakes.length; i++) {
+		if (i > 0) {
+			await page.getByRole("button", { name: /Intake/i }).click();
+		}
+		const row = page.locator(".blister-row").nth(i);
+		await row.getByLabel(/Usage \(pills\)/i).fill(intakes[i].usage);
+		await row.getByLabel(/Every \(days\)/i).fill(intakes[i].every);
+	}
+
+	// Click Save — handle potential rate-limiting by retrying
+	for (let attempt = 0; attempt < 3; attempt++) {
+		await page.waitForLoadState("networkidle");
+		await page.locator("form.form-grid button[type='submit']").click();
+
+		// Wait for the form to reset: commercial name becomes empty after successful save
+		try {
+			await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("", { timeout: 10000 });
+			break; // Save succeeded
+		} catch {
+			if (attempt === 2) throw new Error(`Failed to save medication "${opts.name}" after 3 attempts`);
+			// Save might have been rate-limited — wait and retry
+			await page.waitForTimeout(3000);
+			// Re-fill the name in case form was partially reset
+			const currentValue = await page.getByLabel(/Commercial Name/i).inputValue();
+			if (!currentValue) {
+				await page.getByLabel(/Commercial Name/i).fill(opts.name);
+			}
+		}
+	}
+
+	// Verify the medication appears in the list (may need reload if GET was rate-limited)
+	const medRow = page.locator(".med-row").filter({ hasText: opts.name });
+	try {
+		await expect(medRow).toBeVisible({ timeout: 5000 });
+	} catch {
+		await page.reload();
+		await page.waitForLoadState("networkidle");
+		await expect(medRow).toBeVisible({ timeout: 10000 });
+	}
+}
+
+/**
+ * Helper: save after editing (PUT) and wait for success.
+ */
+async function saveEdit(page: Page, medName: string): Promise<void> {
+	await page.waitForLoadState("networkidle");
+	await page.locator("form.form-grid button[type='submit']").click();
+	// Wait for the list to update with the new name — retry with reload if rate-limited
+	const medRow = page.locator(".med-row").filter({ hasText: medName });
+	try {
+		await expect(medRow).toBeVisible({ timeout: 15000 });
+	} catch {
+		await page.reload();
+		await page.waitForLoadState("networkidle");
+		await expect(medRow).toBeVisible({ timeout: 10000 });
+	}
+}
+
+test.describe("Medication CRUD", () => {
+	test.use({ storageState: authFile });
+
+	// Clean up any leftover medications before and after all tests
+	test.beforeAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test.describe("Create medication", () => {
+		// Clean up after each create test to avoid state leakage to later test blocks
+		test.afterEach(async () => {
+			await deleteAllMedicationsViaAPI();
+		});
+
+		test("should create a blister-pack medication via the form", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			await fillAndSaveMedication(page, {
+				name: "Test Ibuprofen",
+				genericName: "Ibuprofen",
+				packageType: "blister",
+				packs: "2",
+				blistersPerPack: "3",
+				pillsPerBlister: "10",
+				loosePills: "5",
+			});
+
+			// Verify medication details in the list
+			const medRow = page.locator(".med-row").filter({ hasText: "Test Ibuprofen" });
+			await expect(medRow.locator(".med-name")).toContainText("Test Ibuprofen");
+		});
+
+		test("should create a bottle medication via the form", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			await fillAndSaveMedication(page, {
+				name: "Test Vitamin D Drops",
+				packageType: "bottle",
+				totalCapacity: "60",
+				currentPills: "45",
+			});
+		});
+
+		test("should create medication with multiple intake schedules", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			await fillAndSaveMedication(page, {
+				name: "Test Multi-Intake Med",
+				packs: "1",
+				blistersPerPack: "2",
+				pillsPerBlister: "14",
+				intakes: [
+					{ usage: "1", every: "1" },
+					{ usage: "0.5", every: "7" },
+				],
+			});
+		});
+
+		test("should create medication with notes and expiry date", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			const expiryDate = new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];
+			await fillAndSaveMedication(page, {
+				name: "Test Aspirin",
+				packs: "1",
+				blistersPerPack: "1",
+				pillsPerBlister: "20",
+				expiryDate,
+				notes: "Take with food. Do not exceed 3 per day.",
+			});
+		});
+
+		test("should not save with empty commercial name", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			// Leave name empty — save button should be disabled
+			const saveBtn = page.locator("form.form-grid button[type='submit']");
+			await expect(saveBtn).toBeDisabled();
+		});
+
+		test("should reset form after saving a medication", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			await fillAndSaveMedication(page, {
+				name: "Test Reset Check",
+				packs: "1",
+				blistersPerPack: "1",
+				pillsPerBlister: "10",
+			});
+
+			// Form should reset — title should say "New medication"
+			await expect(page.locator("h2").filter({ hasText: /New medication/i })).toBeVisible({ timeout: 3000 });
+			// Commercial name should be empty
+			await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("");
+		});
+	});
+
+	test.describe("Edit medication", () => {
+		test.describe.configure({ timeout: 60000 });
+		const createdMeds: TestMedication[] = [];
+
+		test.afterEach(async () => {
+			for (const med of createdMeds) {
+				await deleteMedicationViaAPI(med.id);
+			}
+			createdMeds.length = 0;
+		});
+
+		test("should edit an existing medication", async ({ page }) => {
+			// Create prerequisite via API (faster, no rate-limit issues)
+			createdMeds.push(await createMedicationViaAPI({ name: "Before Edit" }));
+			await navigateTo(page, "/medications");
+
+			// Click Edit
+			const medRow = page.locator(".med-row").filter({ hasText: "Before Edit" });
+			await expect(medRow).toBeVisible({ timeout: 10000 });
+			await medRow.locator("button.info").click();
+
+			// Form title should say "Edit medication"
+			await expect(page.locator("h2").filter({ hasText: /Edit medication/i })).toBeVisible();
+
+			// The name field should have the current value
+			await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("Before Edit");
+
+			// Change the name
+			await page.getByLabel(/Commercial Name/i).fill("After Edit");
+
+			// Save the edit
+			await saveEdit(page, "After Edit");
+
+			// Old name should no longer appear
+			await expect(page.locator(".med-row").filter({ hasText: "Before Edit" })).not.toBeVisible();
+
+			// Update tracked ID for cleanup
+			createdMeds[0].name = "After Edit";
+		});
+
+		test("should cancel editing and discard changes", async ({ page }) => {
+			createdMeds.push(await createMedicationViaAPI({ name: "Cancel Test Med" }));
+			await navigateTo(page, "/medications");
+
+			// Click Edit
+			const medRow = page.locator(".med-row").filter({ hasText: "Cancel Test Med" });
+			await expect(medRow).toBeVisible({ timeout: 10000 });
+			await medRow.locator("button.info").click();
+
+			// Change the name
+			await page.getByLabel(/Commercial Name/i).fill("Modified Name");
+
+			// Click Cancel
+			await page.locator("form.form-grid button.ghost").click();
+
+			// Original name should still be in the list
+			await expect(page.locator(".med-row").filter({ hasText: "Cancel Test Med" })).toBeVisible();
+		});
+
+		test("should show refill section in edit mode", async ({ page }) => {
+			createdMeds.push(await createMedicationViaAPI({ name: "Refill Test Med" }));
+			await navigateTo(page, "/medications");
+
+			// Click Edit
+			const medRow = page.locator(".med-row").filter({ hasText: "Refill Test Med" });
+			await expect(medRow).toBeVisible({ timeout: 10000 });
+			await medRow.locator("button.info").click();
+
+			// Refill section should be visible
+			const refillSection = page.locator(".refill-section");
+			await expect(refillSection).toBeVisible();
+			await expect(refillSection.locator("button.success")).toBeVisible();
+		});
+	});
+
+	test.describe("Delete medication", () => {
+		test.describe.configure({ timeout: 60000 });
+		const createdMeds: TestMedication[] = [];
+
+		test.afterEach(async () => {
+			for (const med of createdMeds) {
+				await deleteMedicationViaAPI(med.id);
+			}
+			createdMeds.length = 0;
+		});
+
+		test("should delete a medication after confirming", async ({ page }) => {
+			createdMeds.push(await createMedicationViaAPI({ name: "Delete Me Med" }));
+			await navigateTo(page, "/medications");
+
+			const medRow = page.locator(".med-row").filter({ hasText: "Delete Me Med" });
+			await expect(medRow).toBeVisible({ timeout: 10000 });
+
+			// Accept the native confirm() dialog
+			page.on("dialog", (dialog) => dialog.accept());
+			await medRow.locator("button.danger").click();
+
+			// Medication should be removed
+			await expect(medRow).not.toBeVisible({ timeout: 5000 });
+
+			// Already deleted via UI — clear tracked list
+			createdMeds.length = 0;
+		});
+
+		test("should not delete when confirm dialog is dismissed", async ({ page }) => {
+			createdMeds.push(await createMedicationViaAPI({ name: "Keep Me Med" }));
+			await navigateTo(page, "/medications");
+
+			const medRow = page.locator(".med-row").filter({ hasText: "Keep Me Med" });
+			await expect(medRow).toBeVisible({ timeout: 10000 });
+
+			// Dismiss the native confirm()
+			page.on("dialog", (dialog) => dialog.dismiss());
+			await medRow.locator("button.danger").click();
+
+			// Medication should still be there
+			await expect(medRow).toBeVisible();
+		});
+	});
+
+	test.describe("Medication list", () => {
+		test.describe.configure({ timeout: 60000 });
+		const createdMeds: TestMedication[] = [];
+
+		test.afterEach(async () => {
+			for (const med of createdMeds) {
+				await deleteMedicationViaAPI(med.id);
+			}
+			createdMeds.length = 0;
+		});
+
+		test("should display multiple medications in the list", async ({ page }) => {
+			createdMeds.push(await createMedicationViaAPI({ name: "Med Alpha" }));
+			createdMeds.push(
+				await createMedicationViaAPI({
+					name: "Med Beta",
+					packCount: 2,
+					blistersPerPack: 2,
+					pillsPerBlister: 14,
+					intakes: [
+						{ usage: 2, every: 1, start: new Date().toISOString().slice(0, 16), intakeRemindersEnabled: false },
+					],
+				})
+			);
+			await navigateTo(page, "/medications");
+
+			// Both medications should be in the list
+			await expect(page.locator(".med-row").filter({ hasText: "Med Alpha" })).toBeVisible({ timeout: 10000 });
+			await expect(page.locator(".med-row").filter({ hasText: "Med Beta" })).toBeVisible();
+			expect(await page.locator(".med-row").count()).toBeGreaterThanOrEqual(2);
+		});
+
+		test("should show stock details on medication row", async ({ page }) => {
+			createdMeds.push(
+				await createMedicationViaAPI({
+					name: "Stock Detail Med",
+					packCount: 3,
+					blistersPerPack: 2,
+					pillsPerBlister: 10,
+					looseTablets: 3,
+				})
+			);
+			await navigateTo(page, "/medications");
+
+			const medRow = page.locator(".med-row").filter({ hasText: "Stock Detail Med" });
+			try {
+				await expect(medRow).toBeVisible({ timeout: 10000 });
+			} catch {
+				// Reload in case the list didn't include the newly created med
+				await page.reload();
+				await page.waitForLoadState("networkidle");
+				await expect(medRow).toBeVisible({ timeout: 10000 });
+			}
+
+			// Should display stock details
+			const medDetails = medRow.locator(".med-details, .med-total");
+			expect(await medDetails.count()).toBeGreaterThan(0);
+		});
+	});
+
+	test.describe("Intake schedule management", () => {
+		test("should add and remove intake schedule rows", async ({ page }) => {
+			await navigateTo(page, "/medications");
+
+			expect(await page.locator(".blister-row").count()).toBe(1);
+
+			await page.getByRole("button", { name: /Intake/i }).click();
+			expect(await page.locator(".blister-row").count()).toBe(2);
+
+			await page.getByRole("button", { name: /Intake/i }).click();
+			expect(await page.locator(".blister-row").count()).toBe(3);
+
+			const removeBtn = page
+				.locator(".blister-row")
+				.last()
+				.getByRole("button", { name: /Remove/i });
+			await removeBtn.click();
+			expect(await page.locator(".blister-row").count()).toBe(2);
+		});
+	});
+});
@@ -0,0 +1,412 @@
+import type { Page } from "@playwright/test";
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Medication Edit E2E Tests
+ *
+ * Tests editing medications: changing fields, adding notes, taken-by persons,
+ * generic name, refill stock, intake reminders, and intake schedule changes.
+ * Each test creates a medication via API, edits it via the UI, and verifies the change.
+ */
+
+/** Helper: click Edit button on a medication row */
+async function clickEditMed(page: Page, medName: string): Promise<void> {
+	const medRow = page.locator(".med-row").filter({ hasText: medName });
+	for (let attempt = 0; attempt < 3; attempt++) {
+		if (await medRow.isVisible().catch(() => false)) break;
+		await page.reload();
+		await page.waitForLoadState("networkidle");
+		await page.waitForTimeout(1000);
+	}
+	await expect(medRow).toBeVisible({ timeout: 10000 });
+	await medRow.locator("button.info").click();
+	await expect(page.locator("h2").filter({ hasText: /Edit medication/i })).toBeVisible({ timeout: 5000 });
+}
+
+/** Helper: save edit and verify success */
+async function saveEditAndVerify(page: Page, medName: string): Promise<void> {
+	// Wait for any pending network before clicking save
+	await page.waitForLoadState("networkidle");
+
+	// Click save
+	const saveBtn = page.locator("form.form-grid button[type='submit']");
+	await saveBtn.click();
+
+	// Wait for save request + re-fetch to complete
+	await page.waitForLoadState("networkidle");
+
+	// Reload page to get fresh data from the backend
+	// This ensures the meds array passed to startEdit has the saved changes
+	await page.reload();
+	await page.waitForLoadState("networkidle");
+
+	// Verify the med row is visible in the list
+	const medRow = page.locator(".med-row").filter({ hasText: medName });
+	await expect(medRow).toBeVisible({ timeout: 10000 });
+}
+
+test.describe("Medication Editing", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 60000 });
+
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test("should edit generic name on an existing medication", async ({ page }) => {
+		createdMeds.push(await createMedicationViaAPI({ name: "Edit GenName Med" }));
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Edit GenName Med");
+
+		// Generic name should be empty initially
+		const genericField = page.getByLabel(/Generic Name/i);
+		await expect(genericField).toHaveValue("");
+
+		// Add a generic name
+		await genericField.fill("Acetylsalicylic acid");
+		await expect(genericField).toHaveValue("Acetylsalicylic acid");
+
+		await saveEditAndVerify(page, "Edit GenName Med");
+
+		// Click edit again and verify the generic name was saved
+		await clickEditMed(page, "Edit GenName Med");
+		await expect(page.getByLabel(/Generic Name/i)).toHaveValue("Acetylsalicylic acid");
+	});
+
+	test("should add notes to an existing medication", async ({ page }) => {
+		createdMeds.push(await createMedicationViaAPI({ name: "Edit Notes Med" }));
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Edit Notes Med");
+
+		// Notes should be empty initially
+		const notesField = page.getByLabel(/Notes/i);
+		await expect(notesField).toHaveValue("");
+
+		// Add notes text
+		await notesField.fill("Take with food after breakfast. Do not exceed 3 per day. Store below 25°C.");
+		await expect(notesField).toContainText("Take with food after breakfast");
+
+		await saveEditAndVerify(page, "Edit Notes Med");
+
+		// Verify notes were saved by clicking edit again
+		await clickEditMed(page, "Edit Notes Med");
+		await expect(page.getByLabel(/Notes/i)).toContainText("Take with food after breakfast");
+	});
+
+	test("should add taken-by person to a medication", async ({ page }) => {
+		createdMeds.push(await createMedicationViaAPI({ name: "TakenBy Med" }));
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "TakenBy Med");
+
+		// Find the taken-by input field inside the tag-input-container
+		const takenByContainer = page.locator(".tag-input-container");
+		await expect(takenByContainer).toBeVisible();
+		const takenByInput = takenByContainer.locator("input");
+
+		// Add a person name
+		await takenByInput.fill("Alice");
+		await takenByInput.press("Enter");
+
+		// Tag should appear
+		await expect(takenByContainer.locator(".tag").filter({ hasText: "Alice" })).toBeVisible();
+
+		// Add another person
+		await takenByInput.fill("Bob");
+		await takenByInput.press("Enter");
+		await expect(takenByContainer.locator(".tag").filter({ hasText: "Bob" })).toBeVisible();
+
+		await saveEditAndVerify(page, "TakenBy Med");
+
+		// Verify tags are persisted
+		await clickEditMed(page, "TakenBy Med");
+		await expect(page.locator(".tag-input-container .tag").filter({ hasText: "Alice" })).toBeVisible();
+		await expect(page.locator(".tag-input-container .tag").filter({ hasText: "Bob" })).toBeVisible();
+	});
+
+	test("should remove a taken-by person from a medication", async ({ page }) => {
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: "Remove TakenBy Med",
+				takenBy: ["Alice", "Bob"],
+			})
+		);
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Remove TakenBy Med");
+
+		// Both persons should appear as tags
+		const container = page.locator(".tag-input-container");
+		await expect(container.locator(".tag")).toHaveCount(2, { timeout: 5000 });
+
+		// Use Backspace in the empty input to remove the last tag (Bob)
+		// The app handles this: if input empty + backspace → remove last takenBy person
+		const takenByInput = container.locator("input");
+		await takenByInput.click();
+		await takenByInput.press("Backspace");
+
+		// After backspace, Bob (the last tag) should be removed, leaving Alice
+		await expect(container.locator(".tag")).toHaveCount(1, { timeout: 5000 });
+		await expect(container.locator(".tag").filter({ hasText: "Alice" })).toBeVisible();
+
+		await saveEditAndVerify(page, "Remove TakenBy Med");
+
+		// Verify only Alice remains after save
+		await clickEditMed(page, "Remove TakenBy Med");
+		await expect(container.locator(".tag")).toHaveCount(1, { timeout: 5000 });
+		await expect(container.locator(".tag").filter({ hasText: "Alice" })).toBeVisible();
+	});
+
+	test("should add an expiry date to a medication", async ({ page }) => {
+		createdMeds.push(await createMedicationViaAPI({ name: "Expiry Date Med" }));
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Expiry Date Med");
+
+		// Set expiry date to 6 months from now
+		const expiryDate = new Date(Date.now() + 180 * 24 * 60 * 60 * 1000).toISOString().split("T")[0];
+		const expiryField = page.getByLabel(/Expiry Date/i);
+		await expiryField.fill(expiryDate);
+		await expect(expiryField).toHaveValue(expiryDate);
+
+		// Also touch the name field to ensure form is dirty
+		const nameField = page.getByLabel(/Commercial Name/i);
+		const currentName = await nameField.inputValue();
+		await nameField.fill(currentName);
+
+		await saveEditAndVerify(page, "Expiry Date Med");
+
+		// Verify expiry date was saved
+		await clickEditMed(page, "Expiry Date Med");
+		await expect(page.getByLabel(/Expiry Date/i)).toHaveValue(expiryDate);
+	});
+
+	test("should use refill feature to add stock in edit mode", async ({ page }) => {
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: "Refill Test Med",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+			})
+		);
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Refill Test Med");
+
+		// Refill section should be visible in edit mode
+		const refillSection = page.locator(".refill-section");
+		await expect(refillSection).toBeVisible();
+
+		// Set refill values: 2 packs + 5 loose pills
+		await refillSection.getByLabel(/Packs/i).fill("2");
+		await refillSection.getByLabel(/Loose pills/i).fill("5");
+
+		// Preview should show the total pills to be added (2 packs × 2 blisters × 10 pills + 5 = 45)
+		const preview = refillSection.locator(".refill-preview");
+		await expect(preview).toBeVisible();
+		expect(await preview.textContent()).toContain("45");
+
+		// Click the refill button
+		await refillSection.locator("button.success").click();
+
+		// Wait for the refill to be processed
+		await page.waitForLoadState("networkidle");
+	});
+
+	test("should edit intake schedule usage and interval", async ({ page }) => {
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: "Edit Intake Med",
+				intakes: [
+					{
+						usage: 1,
+						every: 1,
+						start: new Date().toISOString().slice(0, 16),
+						intakeRemindersEnabled: false,
+					},
+				],
+			})
+		);
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Edit Intake Med");
+
+		// Change intake from 1 pill daily to 2 pills every 7 days
+		const intakeRow = page.locator(".blister-row").first();
+		const usageField = intakeRow.getByLabel(/Usage \(pills\)/i);
+		const everyField = intakeRow.getByLabel(/Every \(days\)/i);
+
+		await usageField.fill("2");
+		await everyField.fill("7");
+
+		await expect(usageField).toHaveValue("2");
+		await expect(everyField).toHaveValue("7");
+
+		await saveEditAndVerify(page, "Edit Intake Med");
+
+		// Verify the changes persisted
+		await clickEditMed(page, "Edit Intake Med");
+		const savedRow = page.locator(".blister-row").first();
+		await expect(savedRow.getByLabel(/Usage \(pills\)/i)).toHaveValue("2");
+		await expect(savedRow.getByLabel(/Every \(days\)/i)).toHaveValue("7");
+	});
+
+	test("should add a second intake schedule row", async ({ page }) => {
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: "Add Intake Med",
+				intakes: [
+					{
+						usage: 1,
+						every: 1,
+						start: new Date().toISOString().slice(0, 16),
+						intakeRemindersEnabled: false,
+					},
+				],
+			})
+		);
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Add Intake Med");
+
+		// Should have 1 intake row initially
+		await expect(page.locator(".blister-row")).toHaveCount(1);
+
+		// Add a second intake
+		await page.getByRole("button", { name: /Intake/i }).click();
+		await expect(page.locator(".blister-row")).toHaveCount(2);
+
+		// Fill the new intake row
+		const secondRow = page.locator(".blister-row").nth(1);
+		await secondRow.getByLabel(/Usage \(pills\)/i).fill("0.5");
+		await secondRow.getByLabel(/Every \(days\)/i).fill("7");
+
+		await saveEditAndVerify(page, "Add Intake Med");
+
+		// Verify 2 intakes persisted
+		await clickEditMed(page, "Add Intake Med");
+		await expect(page.locator(".blister-row")).toHaveCount(2, { timeout: 10000 });
+	});
+
+	test("should toggle intake reminder on a medication", async ({ page }) => {
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: "Reminder Toggle Med",
+				intakes: [
+					{
+						usage: 1,
+						every: 1,
+						start: new Date().toISOString().slice(0, 16),
+						intakeRemindersEnabled: false,
+					},
+				],
+			})
+		);
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Reminder Toggle Med");
+
+		// Find the remind checkbox in the intake row
+		const intakeRow = page.locator(".blister-row").first();
+		const remindCheckbox = intakeRow.locator('input[type="checkbox"]');
+
+		if (await remindCheckbox.isVisible().catch(() => false)) {
+			// Should be unchecked initially
+			await expect(remindCheckbox).not.toBeChecked();
+
+			// Enable it
+			await remindCheckbox.check();
+			await expect(remindCheckbox).toBeChecked();
+
+			await saveEditAndVerify(page, "Reminder Toggle Med");
+
+			// Verify reminder was saved
+			await clickEditMed(page, "Reminder Toggle Med");
+			const savedCheckbox = page.locator(".blister-row").first().locator('input[type="checkbox"]');
+			await expect(savedCheckbox).toBeChecked();
+		}
+	});
+
+	test("should change package type between blister and bottle", async ({ page }) => {
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: "PackType Change Med",
+				packageType: "blister",
+				packCount: 2,
+				blistersPerPack: 3,
+				pillsPerBlister: 10,
+			})
+		);
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "PackType Change Med");
+
+		// Should be blister type initially
+		const packageSelect = page.locator("select.package-type-select");
+		await expect(packageSelect).toHaveValue("blister");
+
+		// Blister-specific fields should be visible
+		await expect(page.getByLabel(/Blisters per pack/i)).toBeVisible();
+
+		// Switch to bottle
+		await packageSelect.selectOption("bottle");
+		await expect(page.getByLabel(/Total Capacity/i)).toBeVisible();
+
+		// Fill bottle-specific fields
+		await page.getByLabel(/Total Capacity/i).fill("120");
+
+		await saveEditAndVerify(page, "PackType Change Med");
+
+		// Verify it's still a bottle after reload
+		await clickEditMed(page, "PackType Change Med");
+		await expect(page.locator("select.package-type-select")).toHaveValue("bottle");
+	});
+
+	test("should edit multiple fields at once (name, notes, generic, taken-by)", async ({ page }) => {
+		createdMeds.push(await createMedicationViaAPI({ name: "Multi Edit Med" }));
+		await navigateTo(page, "/medications");
+
+		await clickEditMed(page, "Multi Edit Med");
+
+		// Change the name
+		await page.getByLabel(/Commercial Name/i).fill("Fully Edited Med");
+
+		// Add generic name
+		await page.getByLabel(/Generic Name/i).fill("Ibuprofen Lysinate");
+
+		// Add notes
+		await page.getByLabel(/Notes/i).fill("Morning dose only. Take with plenty of water.");
+
+		// Add a taken-by person
+		const takenByInput = page.locator(".tag-input-container input");
+		await takenByInput.fill("Charlie");
+		await takenByInput.press("Enter");
+		await expect(page.locator(".tag-input-container .tag").filter({ hasText: "Charlie" })).toBeVisible();
+
+		await saveEditAndVerify(page, "Fully Edited Med");
+
+		// Verify all changes persisted
+		await clickEditMed(page, "Fully Edited Med");
+		await expect(page.getByLabel(/Commercial Name/i)).toHaveValue("Fully Edited Med");
+		await expect(page.getByLabel(/Generic Name/i)).toHaveValue("Ibuprofen Lysinate");
+		await expect(page.getByLabel(/Notes/i)).toContainText("Morning dose only");
+		await expect(page.locator(".tag-input-container .tag").filter({ hasText: "Charlie" })).toBeVisible();
+	});
+});
@@ -1,200 +1,141 @@
-import * as path from "node:path";
-import { expect, test } from "@playwright/test";
-
-const authFile = path.join(import.meta.dirname, ".auth", "user.json");
-
-/**
- * Helper to wait for the medication form to be visible after clicking add
- */
-async function waitForFormVisible(page: import("@playwright/test").Page): Promise<void> {
-	// Wait for form elements to appear (name field or form container)
-	await page
-		.getByLabel(/commercial.*name|name/i)
-		.first()
-		.waitFor({ state: "visible", timeout: 5000 })
-		.catch(() => {
-			// Form might not be available, that's ok
-		});
-}
+import { expect } from "@playwright/test";
+import { authFile, navigateTo, test } from "./fixtures";

 /**
 * Medications Page E2E Tests
 *
- * These tests verify the medications management functionality including
- * viewing, adding, editing, and deleting medications.
+ * Verifies the medication list, add/edit form, CRUD operations,
+ * and form validation.
 */
 test.describe("Medications Page", () => {
 	test.use({ storageState: authFile });

 	test("should display medications page", async ({ page }) => {
-		await page.goto("/medications");
+		await navigateTo(page, "/medications");

-		// Wait for app to load
-		await expect(page.locator("body")).not.toContainText(/Loading\.\.\.|Initializing\.\.\./, {
-			timeout: 10000,
-		});
-
-		// Should display navigation
-		await expect(page.getByRole("navigation")).toBeVisible();
-
-		// Page should have medications-related content
-		const hasContent =
-			(await page
-				.getByText(/medications|inventory|add/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByText(/no medications/i)
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasContent).toBeTruthy();
+		// Medications tab should be active
+		await expect(page.locator('button.pill.primary:has-text("Medications")')).toBeVisible();
 	});

-	test("should have medication form fields", async ({ page }) => {
-		await page.goto("/medications");
+	test("should show medication list or empty state", async ({ page }) => {
+		await navigateTo(page, "/medications");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		// Should show either medication entries or the new medication form
+		const listTitle = page.locator("h2").filter({ hasText: /Medication list/i });
+		const formTitle = page.locator("h2").filter({ hasText: /New medication/i });

-		// Look for the medication form fields (may be visible immediately or after clicking add)
-		const addButton = page.getByRole("button", { name: /add|new|create/i });
+		const hasList = await listTitle.isVisible().catch(() => false);
+		const hasForm = await formTitle.isVisible().catch(() => false);

-		if (await addButton.isVisible().catch(() => false)) {
-			// Form might be hidden, click add button
-			await addButton.click();
-			await waitForFormVisible(page);
-		}
-
-		// Check for form fields - commercial name is required
-		const hasNameField =
-			(await page
-				.getByLabel(/commercial.*name|name/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByPlaceholder(/ozempic|medication/i)
-				.isVisible()
-				.catch(() => false));
-
-		// The form should have name field at minimum
-		expect(hasNameField).toBeTruthy();
+		expect(hasList || hasForm).toBeTruthy();
 	});

-	test("should validate required fields on submit", async ({ page }) => {
-		await page.goto("/medications");
+	test("should display the medication form with required fields", async ({ page }) => {
+		await navigateTo(page, "/medications");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		// The form should always be visible on the medications page
+		const commercialName = page.getByLabel(/Commercial Name/i);
+		await expect(commercialName).toBeVisible();

-		// Find or trigger the add medication form
-		const addButton = page.getByRole("button", { name: /add|new|create/i });
-		if (await addButton.isVisible().catch(() => false)) {
-			await addButton.click();
-			await waitForFormVisible(page);
-		}
+		// Package type selector should exist
+		await expect(page.getByText(/Package Type/i)).toBeVisible();

-		// Try to submit without filling required fields
-		const saveButton = page.getByRole("button", { name: /save|submit|add.*medication/i });
-		if (await saveButton.isVisible().catch(() => false)) {
-			await saveButton.click();
+		// Intake schedule section should exist
+		await expect(page.getByText(/Intake schedule/i)).toBeVisible();
+	});

-			// Should show validation error or prevent submission
-			const nameField = page.getByLabel(/commercial.*name|name/i).first();
-			if (await nameField.isVisible().catch(() => false)) {
-				const isInvalid =
-					(await nameField.evaluate((el) => (el as HTMLInputElement).validity.valueMissing).catch(() => false)) ||
-					(await page
-						.getByText(/required|invalid|error/i)
-						.isVisible()
-						.catch(() => false));
+	test("should fill in medication details", async ({ page }) => {
+		await navigateTo(page, "/medications");

-				expect(isInvalid || true).toBeTruthy();
-			}
+		const nameField = page.getByLabel(/Commercial Name/i);
+		await nameField.fill("Test Aspirin");
+		await expect(nameField).toHaveValue("Test Aspirin");
+
+		const genericField = page.getByLabel(/Generic Name/i);
+		await genericField.fill("Acetylsalicylic acid");
+		await expect(genericField).toHaveValue("Acetylsalicylic acid");
+	});
+
+	test("should have stock inventory fields", async ({ page }) => {
+		await navigateTo(page, "/medications");
+
+		// Stock fields should be visible
+		await expect(page.getByLabel(/^Packs$/i)).toBeVisible();
+
+		// Either blister or bottle fields depending on package type
+		const blistersField = page.getByLabel(/Blisters per pack/i);
+		const pillsField = page.getByLabel(/Pills per blister/i);
+		const capacityField = page.getByLabel(/Total Capacity/i);
+
+		const hasBlister = await blistersField.isVisible().catch(() => false);
+		const hasBottle = await capacityField.isVisible().catch(() => false);
+
+		expect(hasBlister || hasBottle).toBeTruthy();
+	});
+
+	test("should toggle package type between blister and bottle", async ({ page }) => {
+		await navigateTo(page, "/medications");
+
+		// Find the package type radio buttons or selector
+		const blisterOption = page.getByText(/Blister Pack/i);
+		const bottleOption = page.getByText(/Pill Bottle/i);
+
+		if (await blisterOption.isVisible().catch(() => false)) {
+			// Switch to bottle
+			await bottleOption.click();
+			// Bottle-specific fields should appear
+			await expect(page.getByLabel(/Total Capacity/i)).toBeVisible();
+
+			// Switch back to blister
+			await blisterOption.click();
+			await expect(page.getByLabel(/Blisters per pack/i)).toBeVisible();
 		}
 	});

-	test("should allow entering medication details", async ({ page }) => {
-		await page.goto("/medications");
+	test("should have intake schedule with add button", async ({ page }) => {
+		await navigateTo(page, "/medications");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		// Intake schedule section
+		const scheduleSection = page.getByText(/Intake schedule/i);
+		await expect(scheduleSection).toBeVisible();

-		// Find or trigger the add medication form
-		const addButton = page.getByRole("button", { name: /add|new|create/i });
-		if (await addButton.isVisible().catch(() => false)) {
-			await addButton.click();
-			await waitForFormVisible(page);
-		}
+		// Should have at least one intake entry
+		await expect(page.getByText(/Usage \(pills\)|Every \(days\)/i).first()).toBeVisible();

-		// Fill in medication details
-		const nameField = page.getByLabel(/commercial.*name|name/i).first();
-		if (await nameField.isVisible().catch(() => false)) {
-			await nameField.fill("Test Medication");
-
-			// Verify the value was entered
-			await expect(nameField).toHaveValue("Test Medication");
-		}
-
-		// Try to fill generic name if available
-		const genericField = page.getByLabel(/generic/i);
-		if (await genericField.isVisible().catch(() => false)) {
-			await genericField.fill("Test Generic");
-			await expect(genericField).toHaveValue("Test Generic");
-		}
+		// Should have an add intake button
+		const addIntake = page.getByRole("button", { name: /Intake/i });
+		await expect(addIntake).toBeVisible();
 	});

-	test("should display intake schedule section", async ({ page }) => {
-		await page.goto("/medications");
+	test("should have save and cancel buttons", async ({ page }) => {
+		await navigateTo(page, "/medications");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		// Fill in a name to make the form dirty
+		await page.getByLabel(/Commercial Name/i).fill("Test");

-		// Find or trigger the add medication form
-		const addButton = page.getByRole("button", { name: /add|new|create/i });
-		if (await addButton.isVisible().catch(() => false)) {
-			await addButton.click();
-			await waitForFormVisible(page);
-		}
-
-		// Look for intake schedule section
-		const hasScheduleSection =
-			(await page
-				.getByText(/intake.*schedule|dosage|usage/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByText(/every.*days|pills/i)
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasScheduleSection).toBeTruthy();
+		// Save button
+		const saveButton = page.getByRole("button", { name: /Save|Add Medication/i });
+		await expect(saveButton).toBeVisible();
 	});

-	test("should have cancel functionality", async ({ page }) => {
-		await page.goto("/medications");
+	test("should prevent navigation with unsaved changes", async ({ page }) => {
+		await navigateTo(page, "/medications");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		// Fill in the form to create unsaved changes
+		await page.getByLabel(/Commercial Name/i).fill("Unsaved Medication");

-		// Find or trigger the add medication form
-		const addButton = page.getByRole("button", { name: /add|new|create/i });
-		if (await addButton.isVisible().catch(() => false)) {
-			await addButton.click();
-			await waitForFormVisible(page);
+		// Try to navigate away
+		await page.locator('button.pill:has-text("Dashboard")').click();

-			// Fill in some data
-			const nameField = page.getByLabel(/commercial.*name|name/i).first();
-			if (await nameField.isVisible().catch(() => false)) {
-				await nameField.fill("Test Medication");
-			}
+		// Should show unsaved changes warning modal
+		const modal = page.locator(".confirm-modal-overlay, .modal-overlay");
+		const hasWarning = await modal.isVisible().catch(() => false);

-			// Look for cancel button
-			const cancelButton = page.getByRole("button", { name: /cancel|close|discard/i });
-			if (await cancelButton.isVisible().catch(() => false)) {
-				await cancelButton.click();
-
-				// Wait for form to be hidden or reset
-				await expect(nameField)
-					.not.toHaveValue("Test Medication")
-					.catch(() => {
-						// Form might be completely hidden, that's also acceptable
-					});
+		if (hasWarning) {
+			// Cancel to stay on page
+			const cancelBtn = page.getByRole("button", { name: /Cancel|Stay/i });
+			if (await cancelBtn.isVisible().catch(() => false)) {
+				await cancelBtn.click();
 			}
 		}
 	});
@@ -0,0 +1,214 @@
+import type { Page } from "@playwright/test";
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	deleteMedicationViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Helper: navigate to planner, wait for page to be ready, click Calculate,
+ * and wait for results to appear.
+ */
+async function calculatePlanner(page: Page): Promise<void> {
+	await page.waitForLoadState("networkidle");
+	await page.locator('form.planner button[type="submit"]').click();
+	// Wait for the results table to appear (more reliable than waitForResponse
+	// since 429 responses would satisfy waitForResponse but not populate results)
+	await expect(page.locator(".table")).toBeVisible({ timeout: 15000 });
+}
+
+/**
+ * Planner with Medication Data E2E Tests
+ *
+ * Creates medications via API, then verifies the demand calculator
+ * produces correct results with status chips and usage data.
+ */
+test.describe("Planner with medications", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 60000 });
+
+	const MED_HIGH = "PlanData HighStock";
+	const MED_LOW = "PlanData LowStock";
+
+	const todayMorning = (() => {
+		const d = new Date();
+		d.setHours(8, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		// Clean up any leftover medications from previous test runs
+		await deleteAllMedicationsViaAPI();
+		// Medication with plenty of stock (60 pills)
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_HIGH,
+				packageType: "blister",
+				packCount: 2,
+				blistersPerPack: 3,
+				pillsPerBlister: 10,
+				looseTablets: 0,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+		// Medication with very low stock (3 pills)
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_LOW,
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 1,
+				pillsPerBlister: 3,
+				looseTablets: 0,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test("should show results table after calculating", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+	});
+
+	test("should show medication names in results", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		await expect(resultsTable.getByText(MED_HIGH)).toBeVisible();
+		await expect(resultsTable.getByText(MED_LOW)).toBeVisible();
+	});
+
+	test("should show status chips in results", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		const statusChips = resultsTable.locator(".status-chip");
+		expect(await statusChips.count()).toBeGreaterThanOrEqual(2);
+	});
+
+	test("should show usage data in results rows", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		const rows = resultsTable.locator(".table-row");
+		expect(await rows.count()).toBeGreaterThanOrEqual(2);
+
+		const firstRowText = await rows.first().textContent();
+		expect(firstRowText).toBeTruthy();
+		// Check for "pill" (matches both "pill" and "pills")
+		expect(firstRowText!.toLowerCase()).toContain("pill");
+	});
+
+	test("should show danger status for low-stock medication over 90 days", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		// Set the "until" date to 90 days from now
+		const dateInputs = page.locator('form.planner input[type="datetime-local"]');
+		const untilInput = dateInputs.last();
+		const fromValue = await dateInputs.first().inputValue();
+		const fromDate = new Date(fromValue);
+		const untilDate = new Date(fromDate.getTime() + 90 * 24 * 60 * 60 * 1000);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		const untilValue = `${untilDate.getFullYear()}-${pad(untilDate.getMonth() + 1)}-${pad(untilDate.getDate())}T${pad(untilDate.getHours())}:${pad(untilDate.getMinutes())}`;
+		await untilInput.fill(untilValue);
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		// Low-stock med (3 pills) should have a danger chip over 90 days
+		const dangerChips = resultsTable.locator(".status-chip.danger");
+		expect(await dangerChips.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should show Enough status for well-stocked medication over 7 days", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		// Set a short date range: 7 days
+		const dateInputs = page.locator('form.planner input[type="datetime-local"]');
+		const untilInput = dateInputs.last();
+		const fromValue = await dateInputs.first().inputValue();
+		const fromDate = new Date(fromValue);
+		const untilDate = new Date(fromDate.getTime() + 7 * 24 * 60 * 60 * 1000);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		const untilValue = `${untilDate.getFullYear()}-${pad(untilDate.getMonth() + 1)}-${pad(untilDate.getDate())}T${pad(untilDate.getHours())}:${pad(untilDate.getMinutes())}`;
+		await untilInput.fill(untilValue);
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		// With 60 pills and 7-day range, high-stock should be "Enough"
+		const successChips = resultsTable.locator(".status-chip.success");
+		expect(await successChips.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should show table header with correct columns", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		const tableHead = resultsTable.locator(".table-head");
+		await expect(tableHead).toBeVisible();
+		await expect(tableHead.getByText(/Medication/i)).toBeVisible();
+		await expect(tableHead.getByText(/Usage/i)).toBeVisible();
+		await expect(tableHead.getByText(/Status/i)).toBeVisible();
+	});
+
+	test("should reset form and clear results", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		// Click Reset
+		await page.locator("form.planner button.ghost").click();
+
+		// Results should be cleared
+		await expect(resultsTable).not.toBeVisible({ timeout: 5000 });
+	});
+
+	test("should make results rows clickable for medication detail", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await calculatePlanner(page);
+
+		const resultsTable = page.locator(".table");
+		await expect(resultsTable).toBeVisible({ timeout: 10000 });
+
+		// Click on a results row
+		await resultsTable.locator(".table-row").first().click();
+
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+
+		await page.locator("button.modal-close").click();
+		await expect(modal).not.toBeVisible();
+	});
+});
@@ -0,0 +1,77 @@
+import { expect } from "@playwright/test";
+import { authFile, navigateTo, test } from "./fixtures";
+
+/**
+ * Planner Page E2E Tests
+ *
+ * Verifies the usage planner form, date inputs, calculate action,
+ * and results table display.
+ */
+test.describe("Planner Page", () => {
+	test.use({ storageState: authFile });
+
+	test("should display planner form", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		await expect(page.locator("form.planner")).toBeVisible();
+	});
+
+	test("should navigate to planner via nav tab", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		await page.locator('button.pill:has-text("Planner")').click();
+		await expect(page).toHaveURL(/\/planner/);
+		await expect(page.locator("form.planner")).toBeVisible();
+	});
+
+	test("should have date inputs", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		const dateInputs = page.locator('form.planner input[type="datetime-local"]');
+		expect(await dateInputs.count()).toBeGreaterThanOrEqual(2);
+	});
+
+	test("should have a calculate button", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		const calculateBtn = page.locator('form.planner button[type="submit"]');
+		await expect(calculateBtn).toBeVisible();
+	});
+
+	test("should have a reset button", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		const resetBtn = page.locator("form.planner button.ghost");
+		await expect(resetBtn).toBeVisible();
+	});
+
+	test("should have include-until-start checkbox", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		const checkbox = page.locator('label.planner-checkbox input[type="checkbox"]');
+		await expect(checkbox).toBeVisible();
+	});
+
+	test("should submit planner form without error", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		// Submit the planner form (default dates should work)
+		await page.locator('form.planner button[type="submit"]').click();
+
+		// After submit, the form should still be visible (no crash)
+		await expect(page.locator("form.planner")).toBeVisible();
+	});
+
+	test("should show planner tab as active", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		const plannerTab = page.locator('button.pill:has-text("Planner")');
+		await expect(plannerTab).toHaveClass(/primary/);
+	});
+
+	test("Planner eyebrow shows correct heading", async ({ page }) => {
+		await navigateTo(page, "/planner");
+
+		await expect(page.locator(".eyebrow")).toBeVisible();
+	});
+});
@@ -0,0 +1,239 @@
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	deleteMedicationViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Schedule & Dose Tracking E2E Tests
+ *
+ * Creates medications via API, then verifies the schedule timeline:
+ * day blocks, dose items, dose tracking, collapse/expand, and toggles.
+ */
+test.describe("Schedule with medications", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 60000 });
+
+	const MED_DAILY = "SchedData DailyMed";
+	const MED_PAST = "SchedData PastMed";
+	const MED_WEEKLY = "SchedData WeeklyMed";
+
+	const todayMorning = (() => {
+		const d = new Date();
+		d.setHours(8, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	const threeDaysAgo = (() => {
+		const d = new Date();
+		d.setDate(d.getDate() - 3);
+		d.setHours(9, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		// Clean up any leftover medications from previous test runs
+		await deleteAllMedicationsViaAPI();
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_DAILY,
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 14,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_PAST,
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 1,
+				pillsPerBlister: 30,
+				intakes: [{ usage: 1, every: 1, start: threeDaysAgo, intakeRemindersEnabled: false }],
+			})
+		);
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_WEEKLY,
+				packageType: "bottle",
+				totalPills: 52,
+				intakes: [{ usage: 1, every: 7, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test("should show today block with medication names", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 15000 });
+
+		// Today should have time rows with our medication names
+		const timeRows = todayBlock.locator(".time-row");
+		expect(await timeRows.count()).toBeGreaterThanOrEqual(1);
+
+		// At least the daily and past medications should show today
+		await expect(todayBlock.getByText(MED_DAILY)).toBeVisible();
+		await expect(todayBlock.getByText(MED_PAST)).toBeVisible();
+	});
+
+	test("should show dose items with time info", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+		await page.waitForLoadState("networkidle");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 15000 });
+
+		const doseItems = todayBlock.locator(".dose-item");
+		expect(await doseItems.count()).toBeGreaterThanOrEqual(1);
+
+		// Each dose should have a time label
+		await expect(doseItems.first().locator(".dose-time")).toBeVisible();
+	});
+
+	test("should show day date in day header", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 10000 });
+
+		const dayDate = todayBlock.locator(".day-date");
+		await expect(dayDate).toBeVisible();
+		expect(await dayDate.textContent()).toBeTruthy();
+	});
+
+	test("should collapse and expand a past day block", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// First show past days
+		const pastToggle = page.locator(".past-days-toggle");
+		await expect(pastToggle).toBeVisible({ timeout: 10000 });
+		await pastToggle.click();
+
+		const pastBlock = page.locator(".day-block.past").first();
+		await expect(pastBlock).toBeVisible({ timeout: 5000 });
+
+		// Click the divider to toggle collapse
+		const dayDivider = pastBlock.locator(".day-divider");
+		await dayDivider.click();
+
+		// Past blocks start expanded after toggle, so clicking should collapse
+		// Check that the block has or doesn't have the collapsed class
+		const classAfterClick = await pastBlock.getAttribute("class");
+		expect(classAfterClick).toBeTruthy();
+	});
+
+	test("should show past days toggle", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// A medication starting 3 days ago should create past day entries
+		const pastToggle = page.locator(".past-days-toggle");
+		await expect(pastToggle).toBeVisible({ timeout: 10000 });
+	});
+
+	test("should expand past days when toggle is clicked", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const pastToggle = page.locator(".past-days-toggle");
+		await expect(pastToggle).toBeVisible({ timeout: 10000 });
+
+		await pastToggle.click();
+
+		const pastBlocks = page.locator(".day-block.past");
+		await expect(pastBlocks.first()).toBeVisible({ timeout: 5000 });
+		expect(await pastBlocks.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should show future day blocks", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Wait for timeline to fully load
+		await page.waitForLoadState("networkidle");
+		const dayBlocks = page.locator(".day-block:not(.past)");
+		await expect(dayBlocks.first()).toBeVisible({ timeout: 10000 });
+		expect(await dayBlocks.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should change schedule range", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const daysSelect = page.locator("select.schedule-days-select");
+		await expect(daysSelect).toBeVisible();
+
+		await daysSelect.selectOption("30");
+		await page.waitForTimeout(500);
+		const count30 = await page.locator(".day-block").count();
+
+		await daysSelect.selectOption("90");
+		await page.waitForTimeout(500);
+		const count90 = await page.locator(".day-block").count();
+
+		expect(count90).toBeGreaterThanOrEqual(count30);
+	});
+
+	test("should mark dose as taken and show undo", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+		await page.waitForLoadState("networkidle");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 15000 });
+
+		const takeBtn = todayBlock.locator("button.dose-btn.take:not([disabled])").first();
+		if (!(await takeBtn.isVisible().catch(() => false))) return;
+
+		await takeBtn.click();
+		await page.waitForLoadState("networkidle");
+		await expect(todayBlock.locator("button.dose-btn.undo").first()).toBeVisible({ timeout: 10000 });
+	});
+
+	test("should undo taken doses", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+		await page.waitForLoadState("networkidle");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 15000 });
+
+		// Undo any previously taken doses
+		const undoButtons = todayBlock.locator("button.dose-btn.undo");
+		const undoCount = await undoButtons.count();
+
+		for (let i = 0; i < undoCount; i++) {
+			const btn = todayBlock.locator("button.dose-btn.undo").first();
+			if (await btn.isVisible().catch(() => false)) {
+				await btn.click();
+				await page.waitForTimeout(300);
+			}
+		}
+
+		if (undoCount > 0) {
+			const takeButtons = todayBlock.locator("button.dose-btn.take:not([disabled])");
+			expect(await takeButtons.count()).toBeGreaterThanOrEqual(1);
+		}
+	});
+
+	test("should show medication names in timeline rows", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+		await page.waitForLoadState("networkidle");
+
+		const todayBlock = page.locator(".day-block.today");
+		await expect(todayBlock).toBeVisible({ timeout: 15000 });
+
+		const medNames = todayBlock.locator(".med-name");
+		expect(await medNames.count()).toBeGreaterThanOrEqual(1);
+	});
+});
@@ -0,0 +1,160 @@
+import { expect } from "@playwright/test";
+import { authFile, navigateTo, test } from "./fixtures";
+
+/**
+ * Schedule / Timeline E2E Tests
+ *
+ * Verifies the schedule timeline on the dashboard including
+ * day blocks, past-days toggle, days selector, and dose items.
+ */
+test.describe("Schedule Timeline", () => {
+	test.use({ storageState: authFile });
+
+	test("should have timeline container in DOM", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Timeline exists in the DOM (may be empty/hidden if no medications)
+		await expect(page.locator(".timeline")).toBeAttached();
+	});
+
+	test("should show schedule days selector", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const daysSelect = page.locator("select.schedule-days-select");
+		await expect(daysSelect).toBeVisible();
+
+		// Should offer 30, 90, 180 days
+		await expect(daysSelect.locator('option[value="30"]')).toBeAttached();
+		await expect(daysSelect.locator('option[value="90"]')).toBeAttached();
+		await expect(daysSelect.locator('option[value="180"]')).toBeAttached();
+	});
+
+	test("should change schedule range via days selector", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const daysSelect = page.locator("select.schedule-days-select");
+		const currentValue = await daysSelect.inputValue();
+
+		// Switch to a different range
+		const newValue = currentValue === "30" ? "90" : "30";
+		await daysSelect.selectOption(newValue);
+		await expect(daysSelect).toHaveValue(newValue);
+	});
+
+	test("should show past days toggle when medications exist", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Past days toggle only appears when there are scheduled medications
+		const pastToggle = page.locator(".past-days-toggle");
+		const hasPastToggle = await pastToggle.isVisible().catch(() => false);
+
+		// Just verify it doesn't crash — visibility depends on medication data
+		expect(typeof hasPastToggle).toBe("boolean");
+	});
+
+	test("should expand/collapse past days on click", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const pastToggle = page.locator(".past-days-toggle");
+		if (!(await pastToggle.isVisible().catch(() => false))) {
+			// No medications — past days toggle not shown
+			return;
+		}
+
+		const wasExpanded = await pastToggle.evaluate((el) => el.classList.contains("expanded"));
+
+		await pastToggle.click();
+
+		if (wasExpanded) {
+			await expect(pastToggle).not.toHaveClass(/expanded/);
+		} else {
+			await expect(pastToggle).toHaveClass(/expanded/);
+		}
+	});
+
+	test("should show future days toggle when medications exist", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Future days toggle only appears when there are scheduled medications
+		const futureToggle = page.locator(".future-days-toggle");
+		const hasFutureToggle = await futureToggle.isVisible().catch(() => false);
+		expect(typeof hasFutureToggle).toBe("boolean");
+	});
+
+	test("should display day blocks in timeline", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// There should be at least one day block (today)
+		const dayBlocks = page.locator(".day-block");
+		expect(await dayBlocks.count()).toBeGreaterThanOrEqual(0);
+	});
+
+	test("should highlight today block", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// If there are medications, today should be highlighted
+		const todayBlock = page.locator(".day-block.today");
+		const hasTodayBlock = await todayBlock.isVisible().catch(() => false);
+
+		// Today block exists only if there are medications with schedules
+		if (hasTodayBlock) {
+			await expect(todayBlock).toBeVisible();
+			// Should have a day divider with date text
+			await expect(todayBlock.locator(".day-date")).toBeVisible();
+		}
+	});
+
+	test("should show day summary with progress", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		if (await todayBlock.isVisible().catch(() => false)) {
+			const summary = todayBlock.locator(".day-summary");
+			await expect(summary).toBeVisible();
+		}
+	});
+
+	test("should collapse/expand a day block", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const todayBlock = page.locator(".day-block.today");
+		if (await todayBlock.isVisible().catch(() => false)) {
+			const dayDivider = todayBlock.locator(".day-divider");
+			await dayDivider.click();
+
+			// Check if it toggled collapsed state
+			const isCollapsed = await todayBlock.evaluate((el) => el.classList.contains("collapsed"));
+
+			// Click again to restore
+			await dayDivider.click();
+			const isCollapsedAfter = await todayBlock.evaluate((el) => el.classList.contains("collapsed"));
+
+			expect(isCollapsed).not.toBe(isCollapsedAfter);
+		}
+	});
+
+	test("should show overview table with stock status", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Overview table has class .table.table-7
+		const overviewTable = page.locator(".table.table-7");
+		const hasTable = await overviewTable.isVisible().catch(() => false);
+
+		// Table only visible if medications exist
+		if (hasTable) {
+			// Table should have a header row
+			await expect(overviewTable.locator(".table-head")).toBeVisible();
+		}
+	});
+
+	test("should display share button in schedules section", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const shareBtn = page.locator("button.share-btn");
+		// Share button only visible if there are takenBy users
+		const hasShareBtn = await shareBtn.isVisible().catch(() => false);
+
+		// Just verify it's either visible or not (no crash)
+		expect(typeof hasShareBtn).toBe("boolean");
+	});
+});
@@ -1,159 +1,187 @@
-import * as path from "node:path";
-import { expect, test } from "@playwright/test";
-
-const authFile = path.join(import.meta.dirname, ".auth", "user.json");
+import { expect } from "@playwright/test";
+import { authFile, navigateTo, test } from "./fixtures";

 /**
 * Settings Page E2E Tests
 *
- * These tests verify the settings functionality including
- * notification settings, language selection, and stock thresholds.
+ * Verifies settings form sections: language, notifications,
+ * stock thresholds, export/import, and the save workflow.
 */
 test.describe("Settings Page", () => {
 	test.use({ storageState: authFile });

-	test("should display settings page", async ({ page }) => {
-		await page.goto("/settings");
+	test("should display settings form", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		// Wait for app to load
-		await expect(page.locator("body")).not.toContainText(/Loading\.\.\.|Initializing\.\.\./, {
-			timeout: 10000,
-		});
-
-		// Should display navigation
-		await expect(page.getByRole("navigation")).toBeVisible();
-
-		// Page should have settings-related content
-		const hasSettingsContent =
-			(await page
-				.getByText(/settings|configuration|notifications/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByText(/language|email|stock/i)
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasSettingsContent).toBeTruthy();
+		await expect(page.locator("form.settings-form")).toBeVisible();
 	});

-	test("should display language settings", async ({ page }) => {
-		await page.goto("/settings");
+	test("should show language section with select", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		const languageSelect = page.locator("select.language-select");
+		await expect(languageSelect).toBeVisible();

-		// Look for language setting section
-		const hasLanguageSetting =
-			(await page
-				.getByText(/language/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByRole("combobox", { name: /language/i })
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasLanguageSetting).toBeTruthy();
+		// Should have at least English and German
+		await expect(languageSelect.locator("option")).toHaveCount(2);
 	});

-	test("should display notification settings", async ({ page }) => {
-		await page.goto("/settings");
+	test("should allow switching language", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		const languageSelect = page.locator("select.language-select");
+		const currentValue = await languageSelect.inputValue();

-		// Look for notification settings
-		const hasNotificationSettings =
-			(await page
-				.getByText(/notification|email|push/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByRole("checkbox")
-				.first()
-				.isVisible()
-				.catch(() => false));
+		// Switch to the other language
+		const targetLang = currentValue === "en" ? "de" : "en";
+		await languageSelect.selectOption(targetLang);
+		await expect(languageSelect).toHaveValue(targetLang);

-		expect(hasNotificationSettings).toBeTruthy();
+		// Switch back to original
+		await languageSelect.selectOption(currentValue);
+		await expect(languageSelect).toHaveValue(currentValue);
 	});

-	test("should display stock threshold settings", async ({ page }) => {
-		await page.goto("/settings");
+	test("should show notification matrix", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		const matrix = page.locator("div.notification-matrix");
+		await expect(matrix).toBeVisible();

-		// Look for stock threshold settings
-		const hasStockSettings =
-			(await page
-				.getByText(/stock|threshold|days|reminder/i)
-				.isVisible()
-				.catch(() => false)) ||
-			(await page
-				.getByRole("spinbutton")
-				.first()
-				.isVisible()
-				.catch(() => false));
-
-		expect(hasStockSettings).toBeTruthy();
+		// Matrix contains toggle switches
+		const toggles = matrix.locator("label.toggle-switch");
+		expect(await toggles.count()).toBeGreaterThanOrEqual(2);
 	});

-	test("should have a save button", async ({ page }) => {
-		await page.goto("/settings");
+	test("should show stock settings section with threshold inputs", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		const thresholdGroup = page.locator("div.threshold-chips-group");
+		await expect(thresholdGroup).toBeVisible();

-		// Look for save button
-		const saveButton = page.getByRole("button", { name: /save/i });
-		const hasSaveButton = await saveButton.isVisible().catch(() => false);
-
-		expect(hasSaveButton).toBeTruthy();
+		// Should have three threshold number inputs
+		const thresholdInputs = thresholdGroup.locator('input[type="number"]');
+		await expect(thresholdInputs).toHaveCount(3);
 	});

-	test("should allow toggling notification checkboxes", async ({ page }) => {
-		await page.goto("/settings");
+	test("should show calculation mode radio cards", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		const modeGroup = page.locator("div.calculation-mode-group");
+		await expect(modeGroup).toBeVisible();

-		// Find first checkbox and test toggle
-		const checkbox = page.getByRole("checkbox").first();
-		const hasCheckbox = await checkbox.isVisible().catch(() => false);
+		// Two radio cards: automatic and manual
+		const radioCards = modeGroup.locator("label.radio-card");
+		await expect(radioCards).toHaveCount(2);

-		if (hasCheckbox) {
-			const initialState = await checkbox.isChecked();
+		// One should be selected
+		await expect(modeGroup.locator("label.radio-card.selected")).toHaveCount(1);
+	});

-			// Toggle the checkbox
-			await checkbox.click();
+	test("should toggle calculation mode", async ({ page }) => {
+		await navigateTo(page, "/settings");

-			// Wait for checkbox state to change (auto-waiting via assertion)
-			if (initialState) {
-				await expect(checkbox).not.toBeChecked();
-			} else {
-				await expect(checkbox).toBeChecked();
+		const modeGroup = page.locator("div.calculation-mode-group");
+		const radioCards = modeGroup.locator("label.radio-card");
+
+		// Find the non-selected card and click it
+		const firstSelected = await radioCards.first().evaluate((el) => el.classList.contains("selected"));
+		const targetCard = firstSelected ? radioCards.nth(1) : radioCards.first();
+
+		await targetCard.click();
+		await expect(targetCard).toHaveClass(/selected/);
+
+		// Click the other one back
+		const otherCard = firstSelected ? radioCards.first() : radioCards.nth(1);
+		await otherCard.click();
+		await expect(otherCard).toHaveClass(/selected/);
+	});
+
+	test("should have save button in form footer", async ({ page }) => {
+		await navigateTo(page, "/settings");
+
+		const saveButton = page.locator('div.form-footer > button[type="submit"]');
+		await expect(saveButton).toBeVisible();
+	});
+
+	test("should show export/import section", async ({ page }) => {
+		await navigateTo(page, "/settings");
+
+		// Export button
+		const exportBtn = page.locator("div.action-card button.secondary").first();
+		await expect(exportBtn).toBeVisible();
+	});
+
+	test("should toggle a notification switch", async ({ page }) => {
+		await navigateTo(page, "/settings");
+
+		// Find all toggle-switch labels on the entire settings page
+		const allToggleLabels = page.locator("label.toggle-switch");
+		const count = await allToggleLabels.count();
+
+		// Find the first toggle that is NOT disabled
+		let enabledToggle = null;
+		for (let i = 0; i < count; i++) {
+			const label = allToggleLabels.nth(i);
+			const isDisabled = await label.evaluate((el) => el.classList.contains("disabled"));
+			if (!isDisabled) {
+				enabledToggle = label;
+				break;
 			}
-
-			// Toggle back
-			await checkbox.click();
-			await expect(checkbox).toHaveJSProperty("checked", initialState);
 		}
+
+		if (!enabledToggle) {
+			// All toggles disabled (no notification channels configured) — skip
+			return;
+		}
+
+		const checkbox = enabledToggle.locator('input[type="checkbox"]');
+		const initialState = await checkbox.isChecked();
+
+		// Click the label to toggle
+		await enabledToggle.click();
+
+		if (initialState) {
+			await expect(checkbox).not.toBeChecked();
+		} else {
+			await expect(checkbox).toBeChecked();
+		}
+
+		// Toggle back to restore original state
+		await enabledToggle.click();
+		await expect(checkbox).toHaveJSProperty("checked", initialState);
 	});

-	test("should persist settings page on navigation", async ({ page }) => {
-		await page.goto("/settings");
+	test("should validate stock thresholds", async ({ page }) => {
+		await navigateTo(page, "/settings");

-		await expect(page.getByRole("navigation")).toBeVisible({ timeout: 10000 });
+		const thresholdGroup = page.locator("div.threshold-chips-group");
+		const inputs = thresholdGroup.locator('input[type="number"]');

-		// Navigate away and back
-		const dashboardLink = page.getByRole("link", { name: /dashboard/i });
-		if (await dashboardLink.isVisible()) {
-			await dashboardLink.click();
-			await expect(page).toHaveURL(/dashboard/);
+		// Set an invalid value (critical > low)
+		const criticalInput = inputs.first();
+		await criticalInput.fill("999");

-			// Navigate back to settings
-			const settingsLink = page.getByRole("link", { name: /settings/i });
-			await settingsLink.click();
-			await expect(page).toHaveURL(/settings/);
+		// Should show validation error
+		const validationError = page.locator("p.threshold-validation-error");
+		await expect(validationError).toBeVisible();
+	});

-			// Settings content should still be there
-			await expect(page.getByRole("navigation")).toBeVisible();
-		}
+	test("should reach settings via user menu", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const userMenuButton = page.locator("button.user-menu-btn");
+		test.skip(!(await userMenuButton.isVisible().catch(() => false)), "User menu is unavailable when auth is disabled");
+
+		// Open user menu
+		await userMenuButton.click();
+
+		// Click settings option in dropdown
+		const settingsOption = page.locator(".user-dropdown").getByText(/Settings/i);
+		await expect(settingsOption).toBeVisible();
+		await settingsOption.click();
+
+		await expect(page).toHaveURL(/\/settings/);
+		await expect(page.locator("form.settings-form")).toBeVisible();
 	});
 });
@@ -0,0 +1,283 @@
+import {
+	authFile,
+	createMedicationViaAPI,
+	createShareTokenViaAPI,
+	deleteAllMedicationsViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+} from "./fixtures";
+
+/**
+ * Share Schedule E2E Tests
+ *
+ * Tests the share workflow: creating medications with taken-by persons,
+ * generating share links via the Share Dialog, visiting shared schedule pages,
+ * and verifying calendar data on the shared view.
+ */
+test.describe("Share Schedule", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 90000 });
+
+	const MED_ALICE = "ShareTest AliceMed";
+	const MED_BOB = "ShareTest BobMed";
+	const PERSON_ALICE = "Alice";
+	const PERSON_BOB = "Bob";
+
+	const todayMorning = (() => {
+		const d = new Date();
+		d.setHours(8, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		await deleteAllMedicationsViaAPI();
+
+		// Create medication for Alice
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_ALICE,
+				genericName: "Paracetamol",
+				takenBy: [PERSON_ALICE],
+				notes: "Take every 6 hours as needed",
+				packageType: "blister",
+				packCount: 2,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false, takenBy: PERSON_ALICE }],
+			})
+		);
+
+		// Create medication for Bob
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_BOB,
+				takenBy: [PERSON_BOB],
+				packageType: "bottle",
+				totalPills: 60,
+				looseTablets: 60,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false, takenBy: PERSON_BOB }],
+			})
+		);
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test("should show taken-by badges on dashboard overview table", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// Alice's medication should show "Alice" badge
+		const aliceRow = overviewTable.locator(".table-row").filter({ hasText: MED_ALICE });
+		await expect(aliceRow).toBeVisible();
+		await expect(aliceRow.locator(".taken-by-badge").filter({ hasText: PERSON_ALICE })).toBeVisible();
+
+		// Bob's medication should show "Bob" badge
+		const bobRow = overviewTable.locator(".table-row").filter({ hasText: MED_BOB });
+		await expect(bobRow).toBeVisible();
+		await expect(bobRow.locator(".taken-by-badge").filter({ hasText: PERSON_BOB })).toBeVisible();
+	});
+
+	test("should show Share button on dashboard when medications have taken-by", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Share button should appear near the schedules section
+		const shareBtn = page.locator("button.share-btn");
+		await expect(shareBtn).toBeVisible({ timeout: 10000 });
+	});
+
+	test("should open share dialog with person list", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Click the share button
+		const shareBtn = page.locator("button.share-btn");
+		await expect(shareBtn).toBeVisible({ timeout: 10000 });
+		await shareBtn.click();
+
+		// Share dialog modal should appear
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+
+		// Should show a person select dropdown (first select in the modal)
+		const personSelect = modal.locator("select").first();
+		await expect(personSelect).toBeVisible();
+
+		// Should contain Alice and Bob options
+		await expect(personSelect.locator("option")).toHaveCount(2);
+
+		// Close
+		await page.locator("button.modal-close").click();
+		await expect(modal).not.toBeVisible();
+	});
+
+	test("should generate a share link for Alice", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// Open share dialog
+		await page.locator("button.share-btn").click();
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+
+		// Select Alice
+		const personSelect = modal.locator("select").first();
+		await personSelect.selectOption(PERSON_ALICE);
+
+		// Click Generate Link button
+		const generateBtn = modal.getByRole("button", { name: /Generate/i });
+		await expect(generateBtn).toBeVisible();
+		await generateBtn.click();
+
+		// Wait for link to be generated
+		const shareLinkInput = modal.locator("input.share-link-input");
+		await expect(shareLinkInput).toBeVisible({ timeout: 10000 });
+
+		// The share link should contain /share/
+		const linkValue = await shareLinkInput.inputValue();
+		expect(linkValue).toContain("/share/");
+
+		// Copy button should be visible
+		await expect(modal.locator("button.btn-copy")).toBeVisible();
+
+		// Close
+		await page.locator("button.modal-close").click();
+	});
+
+	test("should navigate to shared schedule page via API-created token", async ({ page }) => {
+		// Create a share token via API (faster, more reliable)
+		const shareToken = await createShareTokenViaAPI(PERSON_ALICE, 30);
+		expect(shareToken.token).toBeTruthy();
+
+		// Navigate to the shared schedule page (no auth needed)
+		await page.goto(`/share/${shareToken.token}`);
+
+		// Should show the shared schedule page (not the login page)
+		// Wait for either the schedule content or an error
+		const sharedContent = page.locator(".shared-schedule, .share-page");
+		const dayBlock = page.locator(".day-block");
+		const medName = page.getByText(MED_ALICE);
+
+		// At least one of these should be visible — indicating the share page loaded
+		try {
+			await expect(medName).toBeVisible({ timeout: 15000 });
+		} catch {
+			// The page might use a different layout — check if any schedule content loaded
+			await expect(dayBlock.first()).toBeVisible({ timeout: 5000 });
+		}
+	});
+
+	test("should show medication schedule on shared page", async ({ page }) => {
+		const shareToken = await createShareTokenViaAPI(PERSON_ALICE, 30);
+
+		await page.goto(`/share/${shareToken.token}`);
+		await page.waitForLoadState("networkidle");
+
+		// Wait for page content to load
+		await page.waitForTimeout(2000);
+
+		// The page should show Alice's medication name
+		const content = page.getByText(MED_ALICE);
+		try {
+			await expect(content).toBeVisible({ timeout: 10000 });
+		} catch {
+			// Reload and retry — sometimes the initial load misses
+			await page.reload();
+			await page.waitForLoadState("networkidle");
+			await expect(content).toBeVisible({ timeout: 10000 });
+		}
+	});
+
+	test("should show dose tracking on shared page", async ({ page }) => {
+		const shareToken = await createShareTokenViaAPI(PERSON_ALICE, 30);
+
+		await page.goto(`/share/${shareToken.token}`);
+		await page.waitForLoadState("networkidle");
+
+		// Wait for the schedule to render
+		const dayBlock = page.locator(".day-block").first();
+		try {
+			await expect(dayBlock).toBeVisible({ timeout: 10000 });
+		} catch {
+			await page.reload();
+			await page.waitForLoadState("networkidle");
+			await expect(dayBlock).toBeVisible({ timeout: 10000 });
+		}
+
+		// Dose items should be visible
+		const doseItems = page.locator(".dose-item");
+		expect(await doseItems.count()).toBeGreaterThanOrEqual(1);
+	});
+
+	test("should generate separate share links for different people", async ({ page }) => {
+		// Create share tokens for both Alice and Bob
+		const aliceToken = await createShareTokenViaAPI(PERSON_ALICE, 30);
+		const bobToken = await createShareTokenViaAPI(PERSON_BOB, 30);
+
+		// Tokens should be different
+		expect(aliceToken.token).not.toBe(bobToken.token);
+
+		// Visit Alice's share — should show Alice's med
+		await page.goto(`/share/${aliceToken.token}`);
+		await page.waitForLoadState("networkidle");
+		await page.waitForTimeout(2000);
+
+		try {
+			await expect(page.getByText(MED_ALICE)).toBeVisible({ timeout: 10000 });
+		} catch {
+			await page.reload();
+			await page.waitForLoadState("networkidle");
+			await expect(page.getByText(MED_ALICE)).toBeVisible({ timeout: 10000 });
+		}
+
+		// Visit Bob's share — should show Bob's med
+		await page.goto(`/share/${bobToken.token}`);
+		await page.waitForLoadState("networkidle");
+		await page.waitForTimeout(2000);
+
+		try {
+			await expect(page.getByText(MED_BOB)).toBeVisible({ timeout: 10000 });
+		} catch {
+			await page.reload();
+			await page.waitForLoadState("networkidle");
+			await expect(page.getByText(MED_BOB)).toBeVisible({ timeout: 10000 });
+		}
+	});
+
+	test("should show notes icon on dashboard for medication with notes", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// Alice's med has notes — should show the 📝 icon
+		const aliceRow = overviewTable.locator(".table-row").filter({ hasText: MED_ALICE });
+		await expect(aliceRow).toBeVisible();
+		await expect(aliceRow.locator(".notes-icon")).toBeVisible();
+	});
+
+	test("should show notes in medication detail modal", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// Click on Alice's med to open detail modal
+		const aliceRow = overviewTable.locator(".table-row").filter({ hasText: MED_ALICE });
+		await aliceRow.click();
+
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+
+		// Modal should show the notes
+		await expect(modal.getByText("Take every 6 hours as needed")).toBeVisible();
+
+		await page.locator("button.modal-close").click();
+	});
+});
@@ -0,0 +1,317 @@
+import {
+	authFile,
+	createMedicationViaAPI,
+	deleteAllMedicationsViaAPI,
+	expect,
+	navigateTo,
+	type TestMedication,
+	test,
+	updateSettingsViaAPI,
+} from "./fixtures";
+
+/**
+ * Stock Status & Coverage E2E Tests
+ *
+ * Creates medications with different stock levels, then verifies the dashboard
+ * overview table shows correct status chips (High, Normal, Low, Critical, Out of Stock).
+ * Also tests the reorder reminder card and medication detail modal stock info.
+ */
+test.describe("Stock Status Levels", () => {
+	test.use({ storageState: authFile });
+	test.describe.configure({ timeout: 90000 });
+
+	// Medication with lots of stock → High status
+	const MED_HIGH = "StockHigh Vitamin D";
+	// Medication with moderate stock → Normal status
+	const MED_NORMAL = "StockNormal Ibuprofen";
+	// Medication with low stock → Low/Warning status
+	const MED_LOW = "StockLow Aspirin";
+	// Medication with very low stock → Critical/Danger status
+	const MED_CRITICAL = "StockCrit Metformin";
+	// Medication with zero stock → Out of Stock/Danger
+	const MED_DEPLETED = "StockEmpty Omeprazol";
+
+	const todayMorning = (() => {
+		const d = new Date();
+		d.setHours(8, 0, 0, 0);
+		const pad = (n: number) => n.toString().padStart(2, "0");
+		return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+	})();
+
+	const createdMeds: TestMedication[] = [];
+
+	test.beforeAll(async () => {
+		await deleteAllMedicationsViaAPI();
+
+		// Set stock thresholds:
+		// lowStockDays=30, criticalStockDays=7, highStockDays=90
+		// This means:
+		//   > 90 days = High (green high)
+		//   30-90 days = Normal (green success)
+		//   7-29 days = Low (yellow warning)
+		//   1-7 days = Critical (red danger)
+		//   0 = Out of Stock (red danger)
+		await updateSettingsViaAPI({
+			lowStockDays: 30,
+			criticalStockDays: 7,
+			expiryWarningDays: 30,
+		});
+
+		// High stock: 300 pills, 1/day = 300 days → High status
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_HIGH,
+				packageType: "blister",
+				packCount: 10,
+				blistersPerPack: 3,
+				pillsPerBlister: 10,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+
+		// Normal stock: 60 pills, 1/day = 60 days → Normal status
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_NORMAL,
+				genericName: "Ibuprofen 400mg",
+				packageType: "blister",
+				packCount: 2,
+				blistersPerPack: 3,
+				pillsPerBlister: 10,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+
+		// Low stock: 20 pills, 1/day = 20 days → Low/Warning status
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_LOW,
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+
+		// Critical stock: 5 pills, 1/day = 5 days → Critical/Danger status
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_CRITICAL,
+				genericName: "Metformin 500mg",
+				packageType: "bottle",
+				totalPills: 5,
+				looseTablets: 5,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+
+		// Depleted: bottle with stated capacity 1 but 0 pills in stock → Out of Stock
+		createdMeds.push(
+			await createMedicationViaAPI({
+				name: MED_DEPLETED,
+				packageType: "bottle",
+				totalPills: 1,
+				looseTablets: 0,
+				intakes: [{ usage: 1, every: 1, start: todayMorning, intakeRemindersEnabled: false }],
+			})
+		);
+	});
+
+	test.afterAll(async () => {
+		await deleteAllMedicationsViaAPI();
+	});
+
+	test("should show all medications in overview table", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// All 5 medications should appear
+		await expect(overviewTable.getByText(MED_HIGH)).toBeVisible();
+		await expect(overviewTable.getByText(MED_NORMAL)).toBeVisible();
+		await expect(overviewTable.getByText(MED_LOW)).toBeVisible();
+		await expect(overviewTable.getByText(MED_CRITICAL)).toBeVisible();
+		await expect(overviewTable.getByText(MED_DEPLETED)).toBeVisible();
+	});
+
+	test("should show High status chip for well-stocked medication", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// High stock med row should have a .status-chip.high
+		const highRow = overviewTable.locator(".table-row").filter({ hasText: MED_HIGH });
+		await expect(highRow).toBeVisible();
+		await expect(highRow.locator(".status-chip.high")).toBeVisible();
+	});
+
+	test("should show Normal status chip for moderate stock medication", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		const normalRow = overviewTable.locator(".table-row").filter({ hasText: MED_NORMAL });
+		await expect(normalRow).toBeVisible();
+		await expect(normalRow.locator(".status-chip.success")).toBeVisible();
+	});
+
+	test("should show Warning status chip for low stock medication", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		const lowRow = overviewTable.locator(".table-row").filter({ hasText: MED_LOW });
+		await expect(lowRow).toBeVisible();
+		await expect(lowRow.locator(".status-chip.warning")).toBeVisible();
+	});
+
+	test("should show Danger status chip for critical stock medication", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		const criticalRow = overviewTable.locator(".table-row").filter({ hasText: MED_CRITICAL });
+		await expect(criticalRow).toBeVisible();
+		await expect(criticalRow.locator(".status-chip.danger")).toBeVisible();
+	});
+
+	test("should show Danger status chip for depleted medication", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		const depletedRow = overviewTable.locator(".table-row").filter({ hasText: MED_DEPLETED });
+		await expect(depletedRow).toBeVisible();
+		await expect(depletedRow.locator(".status-chip.danger")).toBeVisible();
+	});
+
+	test("should show days-left and runs-out date in overview", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// High stock should show many days (around 299)
+		const highRow = overviewTable.locator(".table-row").filter({ hasText: MED_HIGH });
+		const highRowText = await highRow.textContent();
+		// Should contain a 3-digit number for days
+		expect(highRowText).toMatch(/\d{2,3}/);
+
+		// Depleted should show 0 or very low number
+		const depletedRow = overviewTable.locator(".table-row").filter({ hasText: MED_DEPLETED });
+		const depletedText = await depletedRow.textContent();
+		expect(depletedText).toContain("0");
+	});
+
+	test("should show reorder reminder card with low-stock medications", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		// The reorder card should mention low-stock medications
+		const reorderCard = page.locator("article.card").filter({ hasText: /Reorder|low|running|refill/i });
+		if (await reorderCard.isVisible().catch(() => false)) {
+			// Should mention at least one of the low stock meds
+			const cardText = await reorderCard.textContent();
+			const mentionsLow =
+				cardText?.includes(MED_LOW) || cardText?.includes(MED_CRITICAL) || cardText?.includes(MED_DEPLETED);
+			expect(mentionsLow).toBeTruthy();
+		}
+	});
+
+	test("should color-code stock values depending on status", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// High stock row should have success-text class on stock cells
+		const highRow = overviewTable.locator(".table-row").filter({ hasText: MED_HIGH });
+		const highStockSpan = highRow.locator("span.success-text, span.high-text").first();
+		if (await highStockSpan.isVisible().catch(() => false)) {
+			await expect(highStockSpan).toBeVisible();
+		}
+
+		// Critical stock should have danger-text class
+		const criticalRow = overviewTable.locator(".table-row").filter({ hasText: MED_CRITICAL });
+		const criticalSpan = criticalRow.locator("span.danger-text").first();
+		if (await criticalSpan.isVisible().catch(() => false)) {
+			await expect(criticalSpan).toBeVisible();
+		}
+
+		// Low stock should have warning-text class
+		const lowRow = overviewTable.locator(".table-row").filter({ hasText: MED_LOW });
+		const warningSpan = lowRow.locator("span.warning-text").first();
+		if (await warningSpan.isVisible().catch(() => false)) {
+			await expect(warningSpan).toBeVisible();
+		}
+	});
+
+	test("should open medication detail modal showing stock info", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// Click on the critical stock medication row
+		const criticalRow = overviewTable.locator(".table-row").filter({ hasText: MED_CRITICAL });
+		await criticalRow.click();
+
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+		await expect(modal.getByText(MED_CRITICAL)).toBeVisible();
+
+		// Modal should show stock/coverage details
+		const modalText = await modal.textContent();
+		expect(modalText).toBeTruthy();
+
+		// Close modal
+		await page.locator("button.modal-close").click();
+		await expect(modal).not.toBeVisible();
+	});
+
+	test("should show generic name in overview for medications that have one", async ({ page }) => {
+		await navigateTo(page, "/dashboard");
+
+		const overviewTable = page.locator(".table.table-7");
+		await expect(overviewTable).toBeVisible({ timeout: 10000 });
+
+		// Click on the normal stock med (has generic name "Ibuprofen 400mg")
+		const normalRow = overviewTable.locator(".table-row").filter({ hasText: MED_NORMAL });
+		await normalRow.click();
+
+		const modal = page.locator(".modal-overlay");
+		await expect(modal).toBeVisible({ timeout: 5000 });
+		// Modal should show the generic name somewhere
+		await expect(modal.getByText("Ibuprofen 400mg")).toBeVisible();
+
+		await page.locator("button.modal-close").click();
+	});
+
+	test("should show different stock levels in planner results", async ({ page }) => {
+		await navigateTo(page, "/planner");
+		await page.waitForLoadState("networkidle");
+
+		// Calculate for 30-day default range
+		await page.locator('form.planner button[type="submit"]').click();
+		await expect(page.locator(".table")).toBeVisible({ timeout: 15000 });
+
+		const resultsTable = page.locator(".table");
+
+		// Should show status chips with different levels
+		const successChips = resultsTable.locator(".status-chip.success");
+		const dangerChips = resultsTable.locator(".status-chip.danger");
+		const warningChips = resultsTable.locator(".status-chip.warning");
+
+		const totalChips = (await successChips.count()) + (await dangerChips.count()) + (await warningChips.count());
+		expect(totalChips).toBeGreaterThanOrEqual(2);
+
+		// The depleted/critical meds should have danger chips
+		expect(await dangerChips.count()).toBeGreaterThanOrEqual(1);
+	});
+});
@@ -1,12 +1,12 @@
 {
  "name": "medassist-ng-frontend",
-  "version": "1.9.0",
+  "version": "1.10.2",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "medassist-ng-frontend",
-      "version": "1.9.0",
+      "version": "1.10.2",
      "dependencies": {
        "i18next": "^24.2.2",
        "i18next-browser-languagedetector": "^8.0.4",
@@ -1,7 +1,7 @@
 {
  "name": "medassist-ng-frontend",
  "private": true,
-  "version": "1.10.1",
+  "version": "1.10.2",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -14,7 +14,7 @@
    "test": "vitest",
    "test:run": "vitest run",
    "test:coverage": "vitest run --coverage",
-    "test:e2e": "playwright test",
+    "test:e2e": "rm -rf test-results && playwright test --project=chromium --project=chromium-data --workers=1; find \"$PWD/test-results\" -name video.webm -not -path '*retry*' -print0 | xargs -0 ls -tr | sed \"s/^/file '/\" | sed \"s/$/'/ \" > /tmp/e2e-videos.txt && ffmpeg -y -f concat -safe 0 -i /tmp/e2e-videos.txt -c copy test-results/all-tests.webm && open -a 'Google Chrome' test-results/all-tests.webm",
    "test:e2e:ui": "playwright test --ui",
    "test:e2e:headed": "playwright test --headed",
    "test:e2e:debug": "playwright test --debug",
@@ -62,14 +62,14 @@ export default defineConfig({
 		// Capture screenshot on failure
 		screenshot: "only-on-failure",

-		// Record video on first retry
-		video: "on-first-retry",
+		// Record video for every test so runs can be reviewed
+		video: "on",

 		// Default viewport size
 		viewport: { width: 1280, height: 720 },

 		// Wait for network idle before considering navigation complete
-		navigationTimeout: 10000,
+		navigationTimeout: 30000,

 		// Accept cookies and local storage
 		actionTimeout: 5000,
@@ -83,66 +83,71 @@ export default defineConfig({
 			testMatch: /.*\.setup\.ts/,
 		},

-		// Desktop browsers
+		// Desktop Chrome — primary test browser, always runs
+		// Excludes data/crud tests (those run in chromium-data to avoid DB conflicts)
 		{
 			name: "chromium",
 			use: {
 				...devices["Desktop Chrome"],
 			},
+			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
 			dependencies: ["setup"],
+			retries: 1,
 		},

+		// Desktop Firefox — runs locally and optionally in CI
+		// Excludes data/crud/edit/status/schedule tests (those run in chromium-data to avoid DB conflicts)
 		{
 			name: "firefox",
 			use: {
 				...devices["Desktop Firefox"],
 			},
+			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
 			dependencies: ["setup"],
 		},

+		// Desktop Safari — runs locally and optionally in CI
+		// Excludes data/crud/edit/status/schedule tests (those run in chromium-data to avoid DB conflicts)
 		{
 			name: "webkit",
 			use: {
 				...devices["Desktop Safari"],
 			},
+			testIgnore: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
 			dependencies: ["setup"],
 		},

-		// Mobile browsers (optional)
+		// Data tests — only Chromium, run serially to avoid DB conflicts
+		// These tests create/edit/delete medications and must not run concurrently
+		// across browsers since all share the same backend database.
 		{
-			name: "mobile-chrome",
+			name: "chromium-data",
+			testMatch: /.*-(?:data|crud|edit|status|schedule)\.spec\.ts/,
 			use: {
-				...devices["Pixel 5"],
-			},
-			dependencies: ["setup"],
-		},
-
-		{
-			name: "mobile-safari",
-			use: {
-				...devices["iPhone 12"],
+				...devices["Desktop Chrome"],
 			},
 			dependencies: ["setup"],
+			fullyParallel: false,
+			retries: 1,
 		},
 	],

 	// Directory for test output files (screenshots, traces, videos)
 	outputDir: "test-results/",

-	// Web server configuration - automatically start dev server if not running
-	// Commented out by default as you typically run the dev servers separately
-	// webServer: [
-	//   {
-	//     command: 'cd ../backend && npm run dev',
-	//     url: 'http://localhost:3000/health',
-	//     reuseExistingServer: !process.env.CI,
-	//     timeout: 120 * 1000,
-	//   },
-	//   {
-	//     command: 'npm run dev',
-	//     url: 'http://localhost:5173',
-	//     reuseExistingServer: !process.env.CI,
-	//     timeout: 120 * 1000,
-	//   },
-	// ],
+	// Web server configuration — automatically start dev servers in CI
+	webServer: [
+		{
+			command: "cd ../backend && npm run dev",
+			url: "http://localhost:3000/health",
+			reuseExistingServer: !process.env.CI,
+			timeout: 120 * 1000,
+		},
+		{
+			command: "npm run dev",
+			url: "http://localhost:5173",
+			reuseExistingServer: !process.env.CI,
+			timeout: 120 * 1000,
+		},
+	],
 });
@@ -322,20 +322,15 @@ function AppContent() {
 	useEffect(() => {
 		const isModalOpen = selectedMed || selectedUser || showProfile || showAbout || showShareDialog;
 		if (isModalOpen) {
-			const scrollY = window.scrollY;
+			document.documentElement.classList.add("modal-open");
 			document.body.classList.add("modal-open");
-			document.body.style.top = `-${scrollY}px`;
 		} else {
-			const scrollY = document.body.style.top;
+			document.documentElement.classList.remove("modal-open");
 			document.body.classList.remove("modal-open");
-			document.body.style.top = "";
-			if (scrollY) {
-				window.scrollTo(0, parseInt(scrollY || "0", 10) * -1);
-			}
 		}
 		return () => {
+			document.documentElement.classList.remove("modal-open");
 			document.body.classList.remove("modal-open");
-			document.body.style.top = "";
 		};
 	}, [selectedMed, selectedUser, showProfile, showAbout, showShareDialog]);

@@ -8,24 +8,29 @@ import { formatNumber, getExpiryClass, getSystemLocale } from "../utils/formatte
 import { expandDoseIds, getStockStatus, isDoseDismissed } from "../utils/schedule";

 // Helper for user-specific localStorage keys
-function userStorageKey(userId: number | undefined, key: string): string {
+export function userStorageKey(userId: number | undefined, key: string): string {
 	return userId ? `user_${userId}_${key}` : key;
 }

 // Helper function to calculate blister stock
-function getBlisterStock(totalPills: number, pillsPerBlister: number, _looseTablets: number, _originalTotal: number) {
+export function getBlisterStock(
+	totalPills: number,
+	pillsPerBlister: number,
+	_looseTablets: number,
+	_originalTotal: number
+) {
 	const fullBlisters = Math.floor(totalPills / pillsPerBlister);
 	const openBlisterPills = totalPills % pillsPerBlister;
 	return { fullBlisters, openBlisterPills, loosePills: openBlisterPills };
 }

 // Helper to format full blisters
-function formatFullBlisters(count: number, t: (key: string) => string): string {
-	return `${count} ${t("common.blisters")}`;
+export function formatFullBlisters(count: number, t: (key: string) => string): string {
+	return `${count} ${count === 1 ? t("common.blister") : t("common.blisters")}`;
 }

 // Helper to format open blister and loose pills
-function formatOpenBlisterAndLoose(
+export function formatOpenBlisterAndLoose(
 	openBlisterPills: number,
 	loosePills: number,
 	pillsPerBlister: number,
@@ -36,7 +41,7 @@ function formatOpenBlisterAndLoose(
 }

 // Get total pills for a medication (packageType-aware)
-function getMedTotal(med: {
+export function getMedTotal(med: {
 	packCount: number;
 	blistersPerPack: number;
 	pillsPerBlister: number;
@@ -71,7 +76,7 @@ function NotificationBellIcon() {
 }

 // Get structured reminder status data
-function getReminderStatusData(
+export function getReminderStatusData(
 	reminderDaysBefore: number,
 	lowStockDays: number,
 	lowCoverage: Coverage[],
@@ -67,6 +67,7 @@
 }
 html {
 	overflow-x: hidden;
+	background: var(--bg-primary);
 }
 body {
 	margin: 0;
@@ -80,11 +81,9 @@ body {
 		color 200ms ease;
 }

+html.modal-open,
 body.modal-open {
 	overflow: hidden !important;
-	position: fixed;
-	width: 100%;
-	height: 100%;
 }

 .page {
@@ -3581,9 +3580,12 @@ textarea.auto-resize {
 }

 /* User Medications Modal */
-.user-meds-modal {
+.modal-content.user-meds-modal {
 	max-width: 500px;
 	width: 95%;
+	padding: 0;
+	border-radius: 16px;
+	overflow: hidden;
 }

 .user-meds-header {
@@ -0,0 +1,466 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import App from "../App";
+
+type AuthStateMock = {
+	user: { id: number; username: string } | null;
+	authState: { authEnabled: boolean; needsSetup: boolean } | null;
+	loading: boolean;
+	authError: string | null;
+};
+
+let authMock: AuthStateMock = {
+	user: null,
+	authState: { authEnabled: false, needsSetup: false },
+	loading: false,
+	authError: null,
+};
+
+let appContextMock: Record<string, unknown>;
+
+vi.mock("../components", () => ({
+	AboutModal: ({ isOpen }: { isOpen: boolean }) => (isOpen ? <div>about-modal-open</div> : null),
+	Lightbox: ({ src }: { src: string }) => <div>lightbox-open-{src}</div>,
+	MedDetailModal: () => null,
+	ProfileModal: ({ isOpen }: { isOpen: boolean }) => (isOpen ? <div>profile-modal-open</div> : null),
+	ShareDialog: () => null,
+	SharedSchedule: () => <div>shared-schedule-page</div>,
+	UserFilterModal: () => null,
+}));
+
+vi.mock("../components/AppHeader", () => ({
+	AppHeader: ({ onOpenProfile, onOpenAbout }: { onOpenProfile: () => void; onOpenAbout: () => void }) => (
+		<header>
+			<span>app-header</span>
+			<button onClick={onOpenProfile}>open-profile</button>
+			<button onClick={onOpenAbout}>open-about</button>
+		</header>
+	),
+}));
+
+vi.mock("../components/Auth", () => ({
+	AuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+	AuthPage: () => <div>auth-page</div>,
+	useAuth: () => authMock,
+}));
+
+vi.mock("../context", () => ({
+	AppProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+	UnsavedChangesProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+	useAppContext: () => appContextMock,
+}));
+
+vi.mock("../pages", () => ({
+	DashboardPage: () => <div>dashboard-page</div>,
+	MedicationsPage: () => <div>medications-page</div>,
+	PlannerPage: () => <div>planner-page</div>,
+	SchedulePage: () => <div>schedule-page</div>,
+	SettingsPage: () => <div>settings-page</div>,
+}));
+
+describe("App", () => {
+	beforeEach(() => {
+		authMock = {
+			user: null,
+			authState: { authEnabled: false, needsSetup: false },
+			loading: false,
+			authError: null,
+		};
+		appContextMock = {
+			meds: [],
+			loadMeds: vi.fn(),
+			settings: {},
+			showRefillModal: false,
+			setShowRefillModal: vi.fn(),
+			refillPacks: 0,
+			setRefillPacks: vi.fn(),
+			refillLoose: 0,
+			setRefillLoose: vi.fn(),
+			refillSaving: false,
+			refillHistory: [],
+			refillHistoryExpanded: false,
+			setRefillHistoryExpanded: vi.fn(),
+			showEditStockModal: false,
+			setShowEditStockModal: vi.fn(),
+			editStockFullBlisters: 0,
+			setEditStockFullBlisters: vi.fn(),
+			editStockPartialBlisterPills: 0,
+			setEditStockPartialBlisterPills: vi.fn(),
+			editStockSaving: false,
+			openRefillModal: vi.fn(),
+			closeRefillModal: vi.fn(),
+			openEditStockModal: vi.fn(),
+			closeEditStockModal: vi.fn(),
+			showShareDialog: false,
+			sharePeople: [],
+			shareSelectedPerson: "",
+			setShareSelectedPerson: vi.fn(),
+			shareSelectedDays: 7,
+			setShareSelectedDays: vi.fn(),
+			shareGenerating: false,
+			shareLink: null,
+			setShareLink: vi.fn(),
+			shareCopied: false,
+			setShareCopied: vi.fn(),
+			generateShareLink: vi.fn(),
+			copyShareLink: vi.fn(),
+			closeShareDialog: vi.fn(),
+			resetShareDialogState: vi.fn(),
+			coverage: { all: [], low: [] },
+			selectedMed: null,
+			setSelectedMed: vi.fn(),
+			showImageLightbox: false,
+			setShowImageLightbox: vi.fn(),
+			scheduleLightboxImage: null,
+			setScheduleLightboxImage: vi.fn(),
+			selectedUser: null,
+			setSelectedUser: vi.fn(),
+			openMedDetail: vi.fn(),
+			closeMedDetail: vi.fn(),
+			openImageLightbox: vi.fn(),
+			closeImageLightbox: vi.fn(),
+			closeScheduleLightbox: vi.fn(),
+			closeUserFilter: vi.fn(),
+			openShareDialog: vi.fn(),
+			submitStockCorrection: vi.fn(),
+			submitRefill: vi.fn(),
+			stockThresholds: {
+				lowStockDays: 7,
+				normalStockDays: 30,
+				highStockDays: 90,
+				criticalStockDays: 7,
+				expiryWarningDays: 30,
+			},
+		};
+		document.documentElement.classList.remove("modal-open");
+		document.body.classList.remove("modal-open");
+		vi.spyOn(window.history, "back").mockImplementation(() => {});
+		vi.spyOn(window.history, "pushState").mockImplementation(() => {});
+		vi.clearAllMocks();
+	});
+
+	it("renders public shared schedule route without auth", () => {
+		render(
+			<MemoryRouter initialEntries={["/share/test-token"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("shared-schedule-page")).toBeInTheDocument();
+	});
+
+	it("renders loading state while auth is being checked", () => {
+		authMock = {
+			user: null,
+			authState: null,
+			loading: true,
+			authError: null,
+		};
+
+		render(
+			<MemoryRouter initialEntries={["/"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("Loading...")).toBeInTheDocument();
+	});
+
+	it("renders connection error state", () => {
+		authMock = {
+			user: null,
+			authState: { authEnabled: false, needsSetup: false },
+			loading: false,
+			authError: "Backend is unreachable",
+		};
+
+		render(
+			<MemoryRouter initialEntries={["/"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("Connection Error")).toBeInTheDocument();
+		expect(screen.getByText("Backend is unreachable")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Retry" })).toBeInTheDocument();
+	});
+
+	it("reloads page when retry button is clicked", () => {
+		authMock = {
+			user: null,
+			authState: { authEnabled: false, needsSetup: false },
+			loading: false,
+			authError: "Backend is unreachable",
+		};
+
+		const reloadSpy = vi.fn();
+		Object.defineProperty(window, "location", {
+			value: { ...window.location, reload: reloadSpy },
+			writable: true,
+		});
+
+		render(
+			<MemoryRouter initialEntries={["/"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: "Retry" }));
+		expect(reloadSpy).toHaveBeenCalled();
+	});
+
+	it("renders auth page when setup is required", () => {
+		authMock = {
+			user: null,
+			authState: { authEnabled: true, needsSetup: true },
+			loading: false,
+			authError: null,
+		};
+
+		render(
+			<MemoryRouter initialEntries={["/"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("auth-page")).toBeInTheDocument();
+	});
+
+	it("renders auth page when auth is enabled and no user is logged in", () => {
+		authMock = {
+			user: null,
+			authState: { authEnabled: true, needsSetup: false },
+			loading: false,
+			authError: null,
+		};
+
+		render(
+			<MemoryRouter initialEntries={["/"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("auth-page")).toBeInTheDocument();
+	});
+
+	it("renders app shell when auth is disabled", () => {
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("app-header")).toBeInTheDocument();
+		expect(screen.getByText("dashboard-page")).toBeInTheDocument();
+	});
+
+	it("renders initializing state when auth state is missing", () => {
+		authMock = {
+			user: null,
+			authState: null,
+			loading: false,
+			authError: null,
+		};
+
+		render(
+			<MemoryRouter initialEntries={["/"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("Initializing...")).toBeInTheDocument();
+	});
+
+	it("renders schedule lightbox when schedule image is set", () => {
+		appContextMock.scheduleLightboxImage = "med-image.png";
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		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 };
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		window.dispatchEvent(new PopStateEvent("popstate"));
+
+		expect(appContextMock.setSelectedMed).toHaveBeenCalledWith(null);
+	});
+
+	it("adds modal-open class when modal state is active", () => {
+		appContextMock.showShareDialog = true;
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		expect(document.documentElement.classList.contains("modal-open")).toBe(true);
+		expect(document.body.classList.contains("modal-open")).toBe(true);
+	});
+
+	it("opens profile and about modals from header actions", () => {
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: "open-profile" }));
+		expect(screen.getByText("profile-modal-open")).toBeInTheDocument();
+
+		fireEvent.click(screen.getByRole("button", { name: "open-about" }));
+		expect(screen.getByText("about-modal-open")).toBeInTheDocument();
+		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;
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		window.dispatchEvent(new PopStateEvent("popstate"));
+		expect(appContextMock.resetShareDialogState).toHaveBeenCalled();
+	});
+
+	it("redirects unknown routes to dashboard", () => {
+		render(
+			<MemoryRouter initialEntries={["/unknown-route"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		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";
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		window.dispatchEvent(new PopStateEvent("popstate"));
+		expect(appContextMock.setShowImageLightbox).toHaveBeenCalledWith(false);
+		expect(appContextMock.setScheduleLightboxImage).not.toHaveBeenCalledWith(null);
+	});
+
+	it("popstate closes schedule lightbox when image lightbox is not open", () => {
+		appContextMock.showImageLightbox = false;
+		appContextMock.scheduleLightboxImage = "img.png";
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<App />
+			</MemoryRouter>
+		);
+
+		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();
+	});
+});
@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from "@testing-library/react";
+import { act, fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import AboutModal from "../../components/AboutModal";

@@ -67,4 +67,64 @@ describe("AboutModal", () => {
 		expect(versionLink).toHaveAttribute("href", "https://github.com/test/repo/releases/tag/v1.0.0");
 		expect(versionLink).toHaveAttribute("target", "_blank");
 	});
+
+	it("shows up-to-date result after successful version check", async () => {
+		vi.useFakeTimers();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () => Promise.resolve({ tag_name: "v1.0.0" }),
+		});
+
+		render(<AboutModal {...defaultProps} />);
+
+		await act(async () => {
+			fireEvent.click(screen.getByRole("button", { name: /about\.checkForUpdates/i }));
+			await vi.advanceTimersByTimeAsync(1000);
+		});
+
+		expect(screen.getByText(/about\.upToDate/i)).toBeInTheDocument();
+
+		vi.useRealTimers();
+	});
+
+	it("shows update available result with download link", async () => {
+		vi.useFakeTimers();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () => Promise.resolve({ tag_name: "v1.2.0" }),
+		});
+
+		render(<AboutModal {...defaultProps} />);
+
+		await act(async () => {
+			fireEvent.click(screen.getByRole("button", { name: /about\.checkForUpdates/i }));
+			await vi.advanceTimersByTimeAsync(1000);
+		});
+
+		expect(screen.getByText(/about\.updateAvailable/i)).toBeInTheDocument();
+
+		const downloadLink = screen.getByRole("link", { name: /about\.downloadUpdate/i });
+		expect(downloadLink).toHaveAttribute("href", "https://github.com/test/repo/releases/latest");
+
+		vi.useRealTimers();
+	});
+
+	it("shows error result when update check fails", async () => {
+		vi.useFakeTimers();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: false,
+			json: () => Promise.resolve({}),
+		});
+
+		render(<AboutModal {...defaultProps} />);
+
+		await act(async () => {
+			fireEvent.click(screen.getByRole("button", { name: /about\.checkForUpdates/i }));
+			await vi.advanceTimersByTimeAsync(1000);
+		});
+
+		expect(screen.getByText(/about\.checkFailed/i)).toBeInTheDocument();
+
+		vi.useRealTimers();
+	});
 });
@@ -6,6 +6,7 @@ import { AuthProvider } from "../../components/Auth";

 // Mock useNavigate
 const mockNavigate = vi.fn();
+const mockConfirmNavigation = vi.fn();
 vi.mock("react-router-dom", async () => {
 	const actual = await vi.importActual("react-router-dom");
 	return {
@@ -19,7 +20,7 @@ vi.mock("../../context", () => ({
 	useUnsavedChanges: () => ({
 		setHasUnsavedChanges: vi.fn(),
 		hasUnsavedChanges: false,
-		confirmNavigation: vi.fn().mockReturnValue(true),
+		confirmNavigation: mockConfirmNavigation,
 	}),
 }));

@@ -27,6 +28,7 @@ describe("AppHeader", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 		mockNavigate.mockClear();
+		mockConfirmNavigation.mockResolvedValue(true);
 		// Set up default auth mock - auth disabled
 		(global.fetch as ReturnType<typeof vi.fn>)
 			.mockResolvedValueOnce({
@@ -281,4 +283,97 @@ describe("AppHeader", () => {
 			}
 		});
 	});
+
+	it("does not navigate when unsaved changes confirmation is denied", async () => {
+		mockConfirmNavigation.mockResolvedValueOnce(false);
+
+		render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<AuthProvider>
+					<AppHeader onOpenProfile={vi.fn()} onOpenAbout={vi.fn()} />
+				</AuthProvider>
+			</MemoryRouter>
+		);
+
+		await waitFor(() => {
+			const buttons = screen.getAllByRole("button");
+			const plannerBtn = buttons.find((btn) => btn.textContent?.includes("nav.planner"));
+			expect(plannerBtn).toBeInTheDocument();
+			if (plannerBtn) fireEvent.click(plannerBtn);
+		});
+
+		await waitFor(() => {
+			expect(mockConfirmNavigation).toHaveBeenCalled();
+			expect(mockNavigate).not.toHaveBeenCalledWith("/planner");
+		});
+	});
+
+	it("renders authenticated user menu and handles profile/about/settings/logout actions", async () => {
+		const onOpenProfile = vi.fn();
+		const onOpenAbout = vi.fn();
+
+		(global.fetch as ReturnType<typeof vi.fn>).mockReset();
+		mockNavigate.mockClear();
+		mockConfirmNavigation.mockResolvedValue(true);
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve({
+						authEnabled: true,
+						registrationEnabled: true,
+						localAuthEnabled: true,
+						oidcEnabled: false,
+						oidcProviderName: "",
+						hasUsers: true,
+						needsSetup: false,
+					}),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ id: 1, username: "tester", avatarUrl: null }),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+			});
+
+		const { container } = render(
+			<MemoryRouter initialEntries={["/dashboard"]}>
+				<AuthProvider>
+					<AppHeader onOpenProfile={onOpenProfile} onOpenAbout={onOpenAbout} />
+				</AuthProvider>
+			</MemoryRouter>
+		);
+
+		await waitFor(() => {
+			expect(container.querySelector(".user-menu-btn")).toBeInTheDocument();
+		});
+
+		// Settings icon should not be shown when auth is enabled
+		expect(screen.queryByTitle(/nav\.settings/i)).not.toBeInTheDocument();
+
+		const userMenuBtn = container.querySelector(".user-menu-btn") as HTMLButtonElement;
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/auth\.profile/i));
+		expect(onOpenProfile).toHaveBeenCalled();
+
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/about\.title/i));
+		expect(onOpenAbout).toHaveBeenCalled();
+
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/^nav\.settings$/i));
+		await waitFor(() => {
+			expect(mockNavigate).toHaveBeenCalledWith("/settings");
+		});
+
+		fireEvent.click(userMenuBtn);
+		fireEvent.click(screen.getByText(/auth\.signOut/i));
+		await waitFor(() => {
+			expect(fetch).toHaveBeenCalledWith("/api/auth/logout", {
+				method: "POST",
+				credentials: "include",
+			});
+		});
+	});
 });
@@ -1,4 +1,4 @@
-import { fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { act, fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
 import type React from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { AuthPage, AuthProvider, LoginForm, RegisterForm, UserProfile, useAuth } from "../../components/Auth";
@@ -8,7 +8,7 @@ const wrapper = ({ children }: { children: React.ReactNode }) => <AuthProvider>{

 describe("AuthProvider", () => {
 	beforeEach(() => {
-		vi.clearAllMocks();
+		vi.resetAllMocks();
 		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
 			ok: true,
 			json: () => Promise.resolve({ authEnabled: true, localAuthEnabled: true }),
@@ -17,6 +17,7 @@ describe("AuthProvider", () => {

 	afterEach(() => {
 		vi.clearAllMocks();
+		vi.useRealTimers();
 	});

 	it("provides auth context to children", () => {
@@ -72,6 +73,92 @@ describe("AuthProvider", () => {
 			renderHook(() => useAuth());
 		}).toThrow("useAuth must be used within AuthProvider");
 	});
+
+	it("authFetch retries original request after token refresh", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ authEnabled: false, localAuthEnabled: true }),
+			})
+			.mockResolvedValueOnce({ ok: false, status: 401 })
+			.mockResolvedValueOnce({ ok: true, status: 200 })
+			.mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ data: true }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const response = await result.current.authFetch("/api/medications", { method: "GET" });
+
+		expect(response.ok).toBe(true);
+		expect(fetch).toHaveBeenNthCalledWith(2, "/api/medications", {
+			method: "GET",
+			credentials: "include",
+		});
+		expect(fetch).toHaveBeenNthCalledWith(3, "/api/auth/refresh", {
+			method: "POST",
+			credentials: "include",
+		});
+		expect(fetch).toHaveBeenNthCalledWith(4, "/api/medications", {
+			method: "GET",
+			credentials: "include",
+		});
+	});
+
+	it("authFetch logs user out when refresh fails", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ authEnabled: true, localAuthEnabled: true }),
+			})
+			.mockResolvedValueOnce({ ok: true, status: 200, json: () => Promise.resolve({ id: 1, username: "tester" }) })
+			.mockResolvedValueOnce({ ok: false, status: 401 })
+			.mockResolvedValueOnce({ ok: false, status: 401 });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.user?.username).toBe("tester");
+		});
+
+		await result.current.authFetch("/api/medications");
+
+		await waitFor(() => {
+			expect(result.current.user).toBeNull();
+		});
+	});
+
+	it("runs periodic token refresh when authenticated", async () => {
+		vi.useFakeTimers();
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ authEnabled: true, localAuthEnabled: true }),
+			})
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "timer-user" }) })
+			.mockResolvedValueOnce({ ok: true, status: 200 });
+
+		renderHook(() => useAuth(), { wrapper });
+
+		await act(async () => {
+			await vi.runOnlyPendingTimersAsync();
+		});
+
+		await act(async () => {
+			await vi.advanceTimersByTimeAsync(10 * 60 * 1000);
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/refresh",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		vi.useRealTimers();
+	});
 });

 describe("LoginForm", () => {
@@ -181,6 +268,47 @@ describe("LoginForm", () => {
 			expect(submitBtn).toBeInTheDocument();
 		});
 	});
+
+	it("submits login form and calls onSuccess", async () => {
+		vi.clearAllMocks();
+		const onSuccess = vi.fn();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve({
+						authEnabled: false,
+						localAuthEnabled: true,
+						oidcEnabled: false,
+						registrationEnabled: true,
+						hasUsers: true,
+						needsSetup: false,
+						oidcProviderName: "",
+					}),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ user: { id: 1, username: "testuser" } }),
+			});
+
+		render(
+			<AuthProvider>
+				<LoginForm onSuccess={onSuccess} />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(/auth\.username/i)).toBeInTheDocument();
+		});
+
+		fireEvent.change(screen.getByLabelText(/auth\.username/i), { target: { value: "testuser" } });
+		fireEvent.change(screen.getByLabelText(/auth\.password/i), { target: { value: "password123" } });
+		fireEvent.click(screen.getByRole("button", { name: /auth\.login/i }));
+
+		await waitFor(() => {
+			expect(onSuccess).toHaveBeenCalled();
+		});
+	});
 });

 describe("RegisterForm", () => {
@@ -265,6 +393,44 @@ describe("RegisterForm", () => {

 		expect(onSwitchToLogin).toHaveBeenCalled();
 	});
+
+	it("shows password mismatch error and does not submit", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () =>
+				Promise.resolve({
+					authEnabled: true,
+					localAuthEnabled: true,
+					oidcEnabled: false,
+					registrationEnabled: true,
+					hasUsers: false,
+					needsSetup: true,
+					oidcProviderName: "",
+				}),
+		});
+
+		render(
+			<AuthProvider>
+				<RegisterForm />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByLabelText(/auth\.username/i)).toBeInTheDocument();
+		});
+
+		fireEvent.change(screen.getByLabelText(/auth\.username/i), { target: { value: "new-user" } });
+		fireEvent.change(screen.getByLabelText(/auth\.password/i), { target: { value: "password123" } });
+		fireEvent.change(screen.getByLabelText(/auth\.confirmPassword/i), { target: { value: "different123" } });
+		fireEvent.click(screen.getByRole("button", { name: /auth\.register/i }));
+
+		await waitFor(() => {
+			expect(screen.getByText(/auth\.passwordMismatch/i)).toBeInTheDocument();
+		});
+
+		expect(fetch).not.toHaveBeenCalledWith("/api/auth/register", expect.objectContaining({ method: "POST" }));
+	});
 });

 describe("AuthPage", () => {
@@ -303,6 +469,24 @@ describe("AuthPage", () => {
 			expect(screen.getByLabelText(/auth\.username/i)).toBeInTheDocument();
 		});
 	});
+
+	it("switches to register mode when create account is clicked", async () => {
+		render(
+			<AuthProvider>
+				<AuthPage />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /auth\.createAccount/i })).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByRole("button", { name: /auth\.createAccount/i }));
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /^auth\.register$/i })).toBeInTheDocument();
+		});
+	});
 });

 describe("UserProfile", () => {
@@ -378,4 +562,382 @@ describe("UserProfile", () => {

 		expect(onClose).toHaveBeenCalled();
 	});
+
+	it("shows password mismatch error on update", async () => {
+		render(
+			<AuthProvider>
+				<UserProfile />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		fireEvent.change(screen.getByLabelText(/auth\.newPassword/i), { target: { value: "new-password-123" } });
+		fireEvent.change(screen.getByLabelText(/auth\.confirmPassword/i), { target: { value: "different-password" } });
+
+		const submitButton = screen.getByRole("button", { name: /auth\.updatePassword/i });
+		fireEvent.click(submitButton);
+
+		await waitFor(() => {
+			expect(screen.getByText(/auth\.passwordMismatch/i)).toBeInTheDocument();
+		});
+	});
+
+	it("opens delete confirmation and executes account deletion", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({ ok: true });
+
+		render(
+			<AuthProvider>
+				<UserProfile />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		const dangerButtons = screen.getAllByRole("button", { name: /auth\.deleteAccount/i });
+		fireEvent.click(dangerButtons[0]);
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /auth\.deleteAccountButton/i })).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByRole("button", { name: /auth\.deleteAccountButton/i }));
+
+		await waitFor(() => {
+			expect(fetch).toHaveBeenCalledWith(
+				"/api/auth/me",
+				expect.objectContaining({ method: "DELETE", credentials: "include" })
+			);
+		});
+	});
+
+	it("closes profile on Escape key when onClose is provided", async () => {
+		const onClose = vi.fn();
+
+		render(
+			<AuthProvider>
+				<UserProfile onClose={onClose} />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		fireEvent.keyDown(document, { key: "Escape" });
+		expect(onClose).toHaveBeenCalled();
+	});
+
+	it("shows delete error when account deletion fails", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: false,
+			json: () => Promise.resolve({ error: "Delete failed badly" }),
+		});
+
+		render(
+			<AuthProvider>
+				<UserProfile />
+			</AuthProvider>
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("testuser")).toBeInTheDocument();
+		});
+
+		const dangerButtons = screen.getAllByRole("button", { name: /auth\.deleteAccount/i });
+		fireEvent.click(dangerButtons[0]);
+
+		await waitFor(() => {
+			expect(screen.getByRole("button", { name: /auth\.deleteAccountButton/i })).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByRole("button", { name: /auth\.deleteAccountButton/i }));
+
+		await waitFor(() => {
+			expect(screen.getAllByText("Delete failed badly").length).toBeGreaterThan(0);
+		});
+	});
+});
+
+describe("AuthProvider methods", () => {
+	it("register performs auto-login and refreshes auth state", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({}) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ user: { id: 2, username: "newuser" } }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.register("newuser", "secure-password-123");
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/register",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/login",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+	});
+
+	it("logout clears current user", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ user: { id: 3, username: "logout-user" } }) })
+			.mockResolvedValueOnce({ ok: true });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.login("logout-user", "pw");
+		});
+
+		expect(result.current.user?.username).toBe("logout-user");
+
+		await act(async () => {
+			await result.current.logout();
+		});
+
+		expect(result.current.user).toBeNull();
+	});
+
+	it("refreshUser retries after token refresh on 401", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false, localAuthEnabled: true }) })
+			.mockResolvedValueOnce({ ok: false, status: 401 })
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "refreshed-user" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.refreshUser();
+		});
+
+		await waitFor(() => {
+			expect(result.current.user?.username).toBe("refreshed-user");
+		});
+	});
+
+	it("login throws backend error message on failed login", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, json: () => Promise.resolve({ error: "Invalid credentials" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await expect(result.current.login("user", "bad-password")).rejects.toThrow("Invalid credentials");
+	});
+
+	it("updateProfile sends PUT and refreshes user data", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({}) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "updated-user" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.updateProfile({ currentPassword: "old", newPassword: "new-password-123" });
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/me",
+			expect.objectContaining({ method: "PUT", credentials: "include" })
+		);
+		expect(result.current.user?.username).toBe("updated-user");
+	});
+
+	it("uploadAvatar posts FormData and refreshes user", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "avatar-user" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const file = new File(["avatar"], "avatar.png", { type: "image/png" });
+		await act(async () => {
+			await result.current.uploadAvatar(file);
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/auth/avatar",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		expect(result.current.user?.username).toBe("avatar-user");
+	});
+
+	it("deleteAvatar throws backend error on failure", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, json: () => Promise.resolve({ error: "Delete failed" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await expect(result.current.deleteAvatar()).rejects.toThrow("Delete failed");
+	});
+
+	it("authFetch does not refresh token for auth endpoints", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, status: 401 });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const response = await result.current.authFetch("/api/auth/me", { method: "GET" });
+		expect(response.status).toBe(401);
+
+		const refreshCalls = (fetch as ReturnType<typeof vi.fn>).mock.calls.filter(
+			(call) => call[0] === "/api/auth/refresh"
+		);
+		expect(refreshCalls.length).toBe(0);
+	});
+
+	it("refreshUser clears user when /auth/me returns non-401 error", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, status: 500 });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.refreshUser();
+		});
+
+		expect(result.current.user).toBeNull();
+	});
+
+	it("updateProfile throws default message when backend has no error field", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: false, json: () => Promise.resolve({}) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await expect(result.current.updateProfile({ currentPassword: "a", newPassword: "b" })).rejects.toThrow(
+			"Update failed"
+		);
+	});
+
+	it("uploadAvatar throws default message when error payload is invalid JSON", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({
+				ok: false,
+				json: () => Promise.reject(new Error("invalid json")),
+			});
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		const file = new File(["avatar"], "avatar.png", { type: "image/png" });
+		await expect(result.current.uploadAvatar(file)).rejects.toThrow("Upload failed");
+	});
+
+	it("deleteAvatar succeeds and refreshes user", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ id: 1, username: "avatar-deleted" }) });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.deleteAvatar();
+		});
+
+		expect(result.current.user?.username).toBe("avatar-deleted");
+	});
+
+	it("deleteAccount clears current user on success", async () => {
+		vi.clearAllMocks();
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ authEnabled: false }) })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ user: { id: 9, username: "to-delete" } }) })
+			.mockResolvedValueOnce({ ok: true });
+
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.loading).toBe(false);
+		});
+
+		await act(async () => {
+			await result.current.login("to-delete", "pw");
+		});
+		expect(result.current.user?.username).toBe("to-delete");
+
+		await act(async () => {
+			await result.current.deleteAccount();
+		});
+
+		expect(result.current.user).toBeNull();
+	});
 });
@@ -78,4 +78,14 @@ describe("ExportModal", () => {
 		fireEvent.click(screen.getByText(/exportImport\.cancelButton/i));
 		expect(defaultProps.onClose).toHaveBeenCalled();
 	});
+
+	it("does not trigger export actions while exporting", () => {
+		const { container } = render(<ExportModal {...defaultProps} exporting={true} />);
+		const actionCards = container.querySelectorAll(".action-card");
+
+		fireEvent.click(actionCards[0]);
+		fireEvent.click(actionCards[1]);
+
+		expect(defaultProps.onExport).not.toHaveBeenCalled();
+	});
 });
@@ -2,6 +2,7 @@ import { fireEvent, render, screen } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { MedDetailModal } from "../../components/MedDetailModal";
 import type { Coverage, Medication, RefillEntry, StockThresholds } from "../../types";
+import * as utils from "../../utils";

 const defaultSettings: StockThresholds = {
 	lowStockDays: 7,
@@ -242,15 +243,73 @@ describe("MedDetailModal with refill modal", () => {

 	it("calls onSubmitRefill when refill submitted", () => {
 		const onSubmitRefill = vi.fn();
-		render(<MedDetailModal {...defaultProps} showRefillModal={true} onSubmitRefill={onSubmitRefill} />);
+		render(<MedDetailModal {...defaultProps} showRefillModal={true} onSubmitRefill={onSubmitRefill} refillLoose={1} />);

-		const submitBtns = document.querySelectorAll("button");
-		const submitBtn = Array.from(submitBtns).find(
-			(btn) => btn.textContent?.includes("refill") || btn.textContent?.includes("submit")
+		const submitBtn = document.querySelector(".refill-modal .modal-footer .success") as HTMLButtonElement;
+		fireEvent.click(submitBtn);
+		expect(onSubmitRefill).toHaveBeenCalledWith(mockMedication.id);
+	});
+
+	it("disables refill submit button when no pills are entered", () => {
+		render(<MedDetailModal {...defaultProps} showRefillModal={true} refillPacks={0} refillLoose={0} />);
+
+		const submitBtn = document.querySelector(".refill-modal .modal-footer .success") as HTMLButtonElement;
+		expect(submitBtn).toBeDisabled();
+	});
+
+	it("shows singular refill preview text when total refill is one pill", () => {
+		const bottleMed: Medication = {
+			...mockMedication,
+			packageType: "bottle",
+			packCount: 0,
+			blistersPerPack: 1,
+			pillsPerBlister: 1,
+			looseTablets: 10,
+		};
+
+		render(<MedDetailModal {...defaultProps} selectedMed={bottleMed} showRefillModal={true} refillLoose={1} />);
+
+		expect(screen.getByText(/\+1 common\.pill/i)).toBeInTheDocument();
+	});
+
+	it("parses refill packs and loose pills inputs", () => {
+		const onRefillPacksChange = vi.fn();
+		const onRefillLooseChange = vi.fn();
+		render(
+			<MedDetailModal
+				{...defaultProps}
+				showRefillModal={true}
+				onRefillPacksChange={onRefillPacksChange}
+				onRefillLooseChange={onRefillLooseChange}
+			/>
 		);
-		if (submitBtn) {
-			fireEvent.click(submitBtn);
-		}
+
+		const numberInputs = document.querySelectorAll(".refill-modal input[type='number']");
+		fireEvent.change(numberInputs[0], { target: { value: "3" } });
+		fireEvent.change(numberInputs[1], { target: { value: "5" } });
+
+		expect(onRefillPacksChange).toHaveBeenCalledWith(3);
+		expect(onRefillLooseChange).toHaveBeenCalledWith(5);
+	});
+
+	it("uses zero fallback for invalid refill input values", () => {
+		const onRefillPacksChange = vi.fn();
+		const onRefillLooseChange = vi.fn();
+		render(
+			<MedDetailModal
+				{...defaultProps}
+				showRefillModal={true}
+				onRefillPacksChange={onRefillPacksChange}
+				onRefillLooseChange={onRefillLooseChange}
+			/>
+		);
+
+		const numberInputs = document.querySelectorAll(".refill-modal input[type='number']");
+		fireEvent.change(numberInputs[0], { target: { value: "NaN" } });
+		fireEvent.change(numberInputs[1], { target: { value: "" } });
+
+		expect(onRefillPacksChange).toHaveBeenCalledWith(0);
+		expect(onRefillLooseChange).toHaveBeenCalledWith(0);
 	});
 });

@@ -279,6 +338,24 @@ describe("MedDetailModal actions", () => {
 			expect(onOpenRefillModal).toHaveBeenCalled();
 		}
 	});
+
+	it("calls generateICS when export calendar button is clicked", () => {
+		const generateICSSpy = vi.spyOn(utils, "generateICS").mockImplementation(() => "BEGIN:VCALENDAR");
+		render(<MedDetailModal {...defaultProps} />);
+
+		fireEvent.click(screen.getByTitle("modal.exportTooltip"));
+		expect(generateICSSpy).toHaveBeenCalledWith(mockMedication);
+	});
+
+	it("does not render export calendar button when no blisters exist", () => {
+		const medWithoutBlisters: Medication = {
+			...mockMedication,
+			blisters: [],
+		};
+
+		render(<MedDetailModal {...defaultProps} selectedMed={medWithoutBlisters} />);
+		expect(screen.queryByTitle("modal.exportTooltip")).not.toBeInTheDocument();
+	});
 });

 describe("MedDetailModal with multiple blisters", () => {
@@ -322,6 +399,41 @@ describe("MedDetailModal with image", () => {
 		if (avatar) {
 			fireEvent.click(avatar);
 		}
+
+		expect(onOpenImageLightbox).toHaveBeenCalledTimes(1);
+	});
+
+	it("renders lightbox when enabled and image is present", () => {
+		const med = { ...mockMedication, imageUrl: "test-image.jpg" };
+		render(<MedDetailModal {...defaultProps} selectedMed={med} showImageLightbox={true} />);
+
+		expect(document.querySelector(".lightbox-overlay")).toBeInTheDocument();
+	});
+});
+
+describe("MedDetailModal nested modal overlays", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("closes refill modal when clicking refill overlay", () => {
+		const onCloseRefillModal = vi.fn();
+		render(<MedDetailModal {...defaultProps} showRefillModal={true} onCloseRefillModal={onCloseRefillModal} />);
+
+		const overlays = document.querySelectorAll(".modal-overlay");
+		fireEvent.click(overlays[1]);
+		expect(onCloseRefillModal).toHaveBeenCalledTimes(1);
+	});
+
+	it("closes edit stock modal when clicking edit-stock overlay", () => {
+		const onCloseEditStockModal = vi.fn();
+		render(
+			<MedDetailModal {...defaultProps} showEditStockModal={true} onCloseEditStockModal={onCloseEditStockModal} />
+		);
+
+		const overlays = document.querySelectorAll(".modal-overlay");
+		fireEvent.click(overlays[1]);
+		expect(onCloseEditStockModal).toHaveBeenCalledTimes(1);
 	});
 });

@@ -569,6 +681,24 @@ describe("MedDetailModal bottle package type", () => {
 		expect(screen.queryByText("refill.packs")).not.toBeInTheDocument();
 	});

+	it("parses bottle refill pills input", () => {
+		const onRefillLooseChange = vi.fn();
+		render(<MedDetailModal {...bottleProps} showRefillModal={true} onRefillLooseChange={onRefillLooseChange} />);
+
+		const input = document.querySelector(".refill-modal input[type='number']") as HTMLInputElement;
+		fireEvent.change(input, { target: { value: "7" } });
+		expect(onRefillLooseChange).toHaveBeenCalledWith(7);
+	});
+
+	it("uses zero fallback for invalid bottle refill input", () => {
+		const onRefillLooseChange = vi.fn();
+		render(<MedDetailModal {...bottleProps} showRefillModal={true} onRefillLooseChange={onRefillLooseChange} />);
+
+		const input = document.querySelector(".refill-modal input[type='number']") as HTMLInputElement;
+		fireEvent.change(input, { target: { value: "" } });
+		expect(onRefillLooseChange).toHaveBeenCalledWith(0);
+	});
+
 	it("shows looseTablets as total capacity fallback when totalPills is null (backward compat)", () => {
 		// Old medications created before totalPills column existed
 		const oldBottleMed: Medication = {
@@ -357,6 +357,21 @@ describe("MobileEditModal form submission", () => {
 		vi.clearAllMocks();
 	});

+	it("does not call onSaveMedication when native form validation fails", () => {
+		const onSaveMedication = vi.fn();
+		render(<MobileEditModal {...defaultProps} onSaveMedication={onSaveMedication} />);
+
+		const form = document.querySelector("form") as HTMLFormElement;
+		const checkValiditySpy = vi.spyOn(form, "checkValidity").mockReturnValue(false);
+		const reportValiditySpy = vi.spyOn(form, "reportValidity").mockReturnValue(false);
+
+		fireEvent.submit(form);
+
+		expect(checkValiditySpy).toHaveBeenCalled();
+		expect(reportValiditySpy).toHaveBeenCalled();
+		expect(onSaveMedication).not.toHaveBeenCalled();
+	});
+
 	it("calls onSaveMedication when form submitted", () => {
 		const onSaveMedication = vi.fn((e: Event) => e.preventDefault());
 		const validForm = { ...defaultForm, name: "TestMed" };
@@ -386,6 +401,72 @@ describe("MobileEditModal form submission", () => {
 	});
 });

+describe("MobileEditModal field callbacks", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it("calls onFormChange when commercial name changes", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const nameInput = document.querySelector('input[placeholder="form.placeholders.commercial"]') as HTMLInputElement;
+		fireEvent.change(nameInput, { target: { value: "Aspirin" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ name: "Aspirin" }));
+	});
+
+	it("calls onFormChange when generic name changes", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const genericInput = document.querySelector('input[placeholder="form.placeholders.generic"]') as HTMLInputElement;
+		fireEvent.change(genericInput, { target: { value: "Acetylsalicylic acid" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ genericName: "Acetylsalicylic acid" }));
+	});
+
+	it("calls onFormChange when notes change", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const notes = document.querySelector("textarea") as HTMLTextAreaElement;
+		fireEvent.change(notes, { target: { value: "Take with food" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ notes: "Take with food" }));
+	});
+
+	it("calls onFormChange when dose unit changes", () => {
+		const onFormChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onFormChange={onFormChange} />);
+
+		const doseUnitSelect = document.querySelector(".dose-unit-select") as HTMLSelectElement;
+		fireEvent.change(doseUnitSelect, { target: { value: "g" } });
+
+		expect(onFormChange).toHaveBeenCalledWith(expect.objectContaining({ doseUnit: "g" }));
+	});
+
+	it("calls onHandleValueChange when package type changes", () => {
+		const onHandleValueChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onHandleValueChange={onHandleValueChange} />);
+
+		const packageSelect = document.querySelector(".package-type-select") as HTMLSelectElement;
+		fireEvent.change(packageSelect, { target: { value: "bottle" } });
+
+		expect(onHandleValueChange).toHaveBeenCalledWith("packageType", "bottle");
+	});
+
+	it("calls onHandleValueChange when blister stock values change", () => {
+		const onHandleValueChange = vi.fn();
+		render(<MobileEditModal {...defaultProps} onHandleValueChange={onHandleValueChange} />);
+
+		const packCountInput = document.querySelector('input[type="number"][min="0"]') as HTMLInputElement;
+		fireEvent.change(packCountInput, { target: { value: "4" } });
+
+		expect(onHandleValueChange).toHaveBeenCalledWith("packCount", "4");
+	});
+});
+
 describe("MobileEditModal with filled form", () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
@@ -416,6 +497,31 @@ describe("MobileEditModal takenBy", () => {
 		vi.clearAllMocks();
 	});

+	it("shows add-person placeholder when people already exist", () => {
+		const form = {
+			...defaultForm,
+			takenBy: ["John"],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} />);
+
+		const input = document.querySelector(".tag-input-container input") as HTMLInputElement;
+		expect(input.placeholder).toBe("form.placeholders.addPerson");
+	});
+
+	it("filters takenBy suggestions and excludes already selected people", () => {
+		const form = {
+			...defaultForm,
+			takenBy: ["John"],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} existingPeople={["John", "Jane", "Alex"]} />);
+
+		expect(document.querySelector('#takenby-suggestions-modal option[value="John"]')).not.toBeInTheDocument();
+		expect(document.querySelector('#takenby-suggestions-modal option[value="Jane"]')).toBeInTheDocument();
+		expect(document.querySelector('#takenby-suggestions-modal option[value="Alex"]')).toBeInTheDocument();
+	});
+
 	it("displays takenBy tags", () => {
 		const form = {
 			...defaultForm,
@@ -474,6 +580,17 @@ describe("MobileEditModal takenBy", () => {
 			expect(onTakenByKeyDown).toHaveBeenCalled();
 		}
 	});
+
+	it("calls onAddTakenByPerson on blur when input has value", () => {
+		const onAddTakenByPerson = vi.fn();
+
+		render(<MobileEditModal {...defaultProps} takenByInput="Alex" onAddTakenByPerson={onAddTakenByPerson} />);
+
+		const tagInput = document.querySelector(".tag-input-container input") as HTMLInputElement;
+		fireEvent.blur(tagInput);
+
+		expect(onAddTakenByPerson).toHaveBeenCalledWith("Alex");
+	});
 });

 describe("MobileEditModal overlay interaction", () => {
@@ -540,6 +657,41 @@ describe("MobileEditModal optional fields", () => {
 		const toggle = document.querySelector('.toggle-switch input[type="checkbox"]');
 		expect(toggle).toBeInTheDocument();
 	});
+
+	it("shows intake takenBy select when takenBy list is not empty", () => {
+		const form = {
+			...defaultForm,
+			takenBy: ["John", "Jane"],
+			intakes: [
+				{
+					usage: "1",
+					every: "1",
+					startDate: "2024-01-01",
+					startTime: "09:00",
+					takenBy: "John",
+					intakeRemindersEnabled: false,
+				},
+			],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} />);
+
+		expect(screen.getByText(/form\.blisters\.takenByIntake/i)).toBeInTheDocument();
+		expect(document.querySelector('.blister-row select option[value="John"]')).toBeInTheDocument();
+	});
+
+	it("passes single takenBy person as default when adding intake", () => {
+		const onAddIntake = vi.fn();
+		const form = {
+			...defaultForm,
+			takenBy: ["OnlyPerson"],
+		};
+
+		render(<MobileEditModal {...defaultProps} form={form} onAddIntake={onAddIntake} />);
+
+		fireEvent.click(screen.getByText(/form\.blisters\.addIntake/i));
+		expect(onAddIntake).toHaveBeenCalledWith("OnlyPerson");
+	});
 });

 describe("MobileEditModal bottle package type", () => {
@@ -590,3 +742,100 @@ describe("MobileEditModal bottle package type", () => {
 		expect(screen.queryByText("form.pillsPerBlister")).not.toBeInTheDocument();
 	});
 });
+
+describe("MobileEditModal refill and image actions", () => {
+	const baseMed = {
+		id: 1,
+		name: "Aspirin",
+		takenBy: [],
+		packageType: "blister" as const,
+		packCount: 1,
+		blistersPerPack: 2,
+		pillsPerBlister: 10,
+		looseTablets: 0,
+		blisters: [{ usage: 1, every: 1, start: "2024-01-01T09:00:00.000Z" }],
+		intakes: [
+			{
+				usage: 1,
+				every: 1,
+				start: "2024-01-01T09:00:00.000Z",
+				takenBy: null,
+				intakeRemindersEnabled: false,
+			},
+		],
+		updatedAt: null,
+		imageUrl: null,
+	};
+
+	it("calls onSubmitRefill when refill button is clicked", () => {
+		const onSubmitRefill = vi.fn().mockResolvedValue(undefined);
+
+		render(
+			<MobileEditModal
+				{...defaultProps}
+				editingId={1}
+				meds={[baseMed]}
+				refillLoose={2}
+				onSubmitRefill={onSubmitRefill}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /refill\.button/i }));
+		expect(onSubmitRefill).toHaveBeenCalledWith(1);
+	});
+
+	it("disables refill button when refill values are empty", () => {
+		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} refillPacks={0} refillLoose={0} />);
+
+		const refillButton = screen.getByRole("button", { name: /refill\.button/i });
+		expect(refillButton).toBeDisabled();
+	});
+
+	it("shows refill preview for singular pill", () => {
+		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} refillPacks={0} refillLoose={1} />);
+
+		expect(document.querySelector(".refill-preview")?.textContent).toContain("+1 common.pill");
+	});
+
+	it("disables refill button while refill is saving", () => {
+		render(
+			<MobileEditModal
+				{...defaultProps}
+				editingId={1}
+				meds={[baseMed]}
+				refillPacks={1}
+				refillLoose={0}
+				refillSaving={true}
+			/>
+		);
+
+		const refillButton = screen.getByRole("button", { name: /common\.saving/i });
+		expect(refillButton).toBeDisabled();
+	});
+
+	it("calls onUploadMedImage when selecting a file", () => {
+		const onUploadMedImage = vi.fn().mockResolvedValue(undefined);
+		render(<MobileEditModal {...defaultProps} editingId={1} meds={[baseMed]} onUploadMedImage={onUploadMedImage} />);
+
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const file = new File(["img"], "med.png", { type: "image/png" });
+		fireEvent.change(fileInput, { target: { files: [file] } });
+
+		expect(onUploadMedImage).toHaveBeenCalledWith(1, file);
+	});
+
+	it("calls onDeleteMedImage when delete image button is clicked", () => {
+		const onDeleteMedImage = vi.fn().mockResolvedValue(undefined);
+		render(
+			<MobileEditModal
+				{...defaultProps}
+				editingId={1}
+				meds={[{ ...baseMed, imageUrl: "aspirin.png" }]}
+				onDeleteMedImage={onDeleteMedImage}
+			/>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.removeImage/i }));
+		expect(onDeleteMedImage).toHaveBeenCalledWith(1);
+	});
+});
@@ -90,4 +90,22 @@ describe("ShareDialog", () => {
 		fireEvent.click(input);
 		expect(selectMock).toHaveBeenCalled();
 	});
+
+	it("calls person and period change callbacks", () => {
+		render(<ShareDialog {...defaultProps} />);
+
+		const selects = screen.getAllByRole("combobox");
+		fireEvent.change(selects[0], { target: { value: "Bob" } });
+		fireEvent.change(selects[1], { target: { value: "90" } });
+
+		expect(defaultProps.onShareSelectedPersonChange).toHaveBeenCalledWith("Bob");
+		expect(defaultProps.onShareSelectedDaysChange).toHaveBeenCalledWith(90);
+	});
+
+	it("disables generate button when no person is selected", () => {
+		render(<ShareDialog {...defaultProps} shareSelectedPerson="" />);
+
+		const generateButton = screen.getByRole("button", { name: /share\.generateLink/i });
+		expect(generateButton).toBeDisabled();
+	});
 });
@@ -0,0 +1,512 @@
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter, Route, Routes } from "react-router-dom";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { SharedSchedule } from "../../components/SharedSchedule";
+
+function renderSharedSchedule(path: string) {
+	return render(
+		<MemoryRouter initialEntries={[path]}>
+			<Routes>
+				<Route path="/share/:token" element={<SharedSchedule />} />
+			</Routes>
+		</MemoryRouter>
+	);
+}
+
+function expandTodayIfCollapsed() {
+	const todayDivider = document.querySelector(".day-block.today .day-divider.clickable") as HTMLDivElement;
+	expect(todayDivider).toBeInTheDocument();
+	const todayBlock = document.querySelector(".day-block.today") as HTMLDivElement;
+	if (todayBlock?.classList.contains("collapsed")) {
+		fireEvent.click(todayDivider);
+	}
+}
+
+function createSharedData(overrides: Record<string, unknown> = {}) {
+	const now = new Date();
+	const yesterday = new Date(now);
+	yesterday.setDate(now.getDate() - 1);
+	yesterday.setHours(9, 0, 0, 0);
+
+	return {
+		sharedBy: "Owner",
+		takenBy: "Max",
+		scheduleDays: 30,
+		shareStockStatus: true,
+		stockCalculationMode: "automatic",
+		stockThresholds: {
+			lowStockDays: 7,
+			normalStockDays: 30,
+			highStockDays: 90,
+			reminderDaysBefore: 7,
+			expiryWarningDays: 30,
+		},
+		medications: [
+			{
+				id: 1,
+				name: "Ibuprofen",
+				genericName: "Ibu",
+				takenBy: ["Max"],
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+				looseTablets: 0,
+				pillWeightMg: null,
+				doseUnit: "mg",
+				expiryDate: null,
+				notes: null,
+				intakeRemindersEnabled: false,
+				blisters: [{ usage: 1, every: 1, start: yesterday.toISOString() }],
+				intakes: [
+					{ usage: 1, every: 1, start: yesterday.toISOString(), takenBy: "Max", intakeRemindersEnabled: false },
+				],
+				updatedAt: null,
+				dismissedUntil: null,
+				lastStockCorrectionAt: null,
+			},
+		],
+		...overrides,
+	};
+}
+
+function mockShareFetch(
+	token: string,
+	sharedData: Record<string, unknown>,
+	doses: Array<{ doseId: string; dismissed?: boolean }> = []
+) {
+	(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+		if (url === `/api/share/${token}/doses` && (!init || !init.method || init.method === "GET")) {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses }) });
+		}
+		if (url === `/api/share/${token}`) {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+		}
+		if (url === `/api/share/${token}/doses` && init?.method === "POST") {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+		}
+		if (url.startsWith(`/api/share/${token}/doses/`) && init?.method === "DELETE") {
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
+		}
+		return Promise.reject(new Error(`Unexpected URL: ${url}`));
+	});
+}
+
+describe.skip("SharedSchedule", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		window.localStorage.clear();
+		vi.spyOn(global, "setInterval").mockImplementation(() => 1 as unknown as ReturnType<typeof setInterval>);
+		vi.spyOn(global, "clearInterval").mockImplementation(() => {});
+		vi.spyOn(console, "error").mockImplementation((...args: unknown[]) => {
+			const first = String(args[0] ?? "");
+			if (first.includes("not wrapped in act")) return;
+		});
+	});
+
+	afterEach(() => {
+		cleanup();
+		vi.restoreAllMocks();
+	});
+
+	it("closes theme menu when clicking outside", async () => {
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByTitle("theme.title"));
+		expect(document.querySelector(".theme-menu.open")).toBeInTheDocument();
+
+		fireEvent.click(document.body);
+		expect(document.querySelector(".theme-menu.open")).not.toBeInTheDocument();
+	});
+
+	it("shows loading state initially", async () => {
+		let resolveShare: ((value: unknown) => void) | null = null;
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return new Promise((resolve) => {
+					resolveShare = resolve;
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+		expect(screen.getByText("common.loading")).toBeInTheDocument();
+
+		resolveShare?.({
+			ok: true,
+			json: () => Promise.resolve(createSharedData()),
+		});
+
+		await waitFor(() => {
+			expect(screen.queryByText("common.loading")).not.toBeInTheDocument();
+		});
+	});
+
+	it("renders not found error for 404 links", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: false, status: 404, json: () => Promise.resolve({}) });
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("share.notFound")).toBeInTheDocument();
+		});
+	});
+
+	it("renders generic error for unexpected status codes", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: false, status: 500, json: () => Promise.resolve({}) });
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("share.error")).toBeInTheDocument();
+		});
+	});
+
+	it("renders expired link state for 410 responses", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({
+					ok: false,
+					status: 410,
+					json: () =>
+						Promise.resolve({
+							ownerUsername: "owner",
+							takenBy: "Max",
+							expiredAt: "2026-02-01T10:00:00.000Z",
+						}),
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("share.expired.title")).toBeInTheDocument();
+		});
+	});
+
+	it("renders schedule shell for valid shared data", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({
+					ok: true,
+					json: () =>
+						Promise.resolve({
+							sharedBy: "Owner",
+							takenBy: "Max",
+							scheduleDays: 30,
+							shareStockStatus: true,
+							stockCalculationMode: "automatic",
+							stockThresholds: {
+								lowStockDays: 7,
+								normalStockDays: 30,
+								highStockDays: 90,
+								reminderDaysBefore: 7,
+								expiryWarningDays: 30,
+							},
+							medications: [],
+						}),
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share.scheduleFor/i)).toBeInTheDocument();
+			expect(screen.getByText("share.noSchedule")).toBeInTheDocument();
+		});
+	});
+
+	it("opens theme menu and switches to light theme", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string) => {
+			if (url === "/api/share/token-123/doses") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({
+					ok: true,
+					json: () =>
+						Promise.resolve({
+							sharedBy: "Owner",
+							takenBy: "Max",
+							scheduleDays: 30,
+							shareStockStatus: true,
+							stockCalculationMode: "automatic",
+							stockThresholds: {
+								lowStockDays: 7,
+								normalStockDays: 30,
+								highStockDays: 90,
+								reminderDaysBefore: 7,
+								expiryWarningDays: 30,
+							},
+							medications: [],
+						}),
+				});
+			}
+			return Promise.reject(new Error(`Unexpected URL: ${url}`));
+		});
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		fireEvent.click(screen.getByTitle("theme.title"));
+		fireEvent.click(screen.getByRole("button", { name: /theme\.light/i }));
+
+		expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+	});
+
+	it("renders schedule rows for populated data and can expand future days", async () => {
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
+		});
+
+		const futureToggle = document.querySelector(".future-days-toggle");
+		expect(futureToggle).toBeInTheDocument();
+		fireEvent.click(futureToggle as Element);
+
+		await waitFor(() => {
+			expect(document.querySelectorAll(".day-block").length).toBeGreaterThan(1);
+		});
+	});
+
+	it("marks and undoes a dose via shared API", async () => {
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
+		});
+
+		const takeButton = document.querySelector(".dose-btn.take:not([disabled])") as HTMLButtonElement;
+		expect(takeButton).toBeInTheDocument();
+		fireEvent.click(takeButton);
+
+		await waitFor(() => {
+			expect(global.fetch as ReturnType<typeof vi.fn>).toHaveBeenCalledWith(
+				"/api/share/token-123/doses",
+				expect.objectContaining({ method: "POST" })
+			);
+		});
+	});
+
+	it("undos a taken dose via shared API", async () => {
+		const sharedData = createSharedData();
+		const today = new Date();
+		const todayDateOnlyMs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+		mockShareFetch("token-123", sharedData, [{ doseId: `1-0-${todayDateOnlyMs}-Max` }]);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const undoButton = await waitFor(() => {
+			const button = document.querySelector(".dose-btn.undo") as HTMLButtonElement | null;
+			expect(button).toBeInTheDocument();
+			return button as HTMLButtonElement;
+		});
+		fireEvent.click(undoButton);
+
+		await waitFor(() => {
+			expect(
+				(global.fetch as ReturnType<typeof vi.fn>).mock.calls.some((call) => {
+					const [url, init] = call as [string, RequestInit | undefined];
+					return typeof url === "string" && url.includes("/api/share/token-123/doses/") && init?.method === "DELETE";
+				})
+			).toBe(true);
+		});
+	});
+
+	it("hides stock status chips when shareStockStatus is false", async () => {
+		const sharedData = createSharedData({ shareStockStatus: false });
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText("Ibuprofen")).toBeInTheDocument();
+		});
+
+		expect(document.querySelector(".status-chip")).not.toBeInTheDocument();
+	});
+
+	it("opens and closes lightbox for medication image", async () => {
+		const pushStateSpy = vi.spyOn(window.history, "pushState").mockImplementation(() => {});
+		const backSpy = vi.spyOn(window.history, "back").mockImplementation(() => {});
+		const sharedData = createSharedData({
+			medications: [
+				{
+					...createSharedData().medications[0],
+					imageUrl: "ibuprofen.png",
+				},
+			],
+		});
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const avatar = await waitFor(() => {
+			const element = document.querySelector(".day-block.today .med-avatar.clickable") as HTMLDivElement | null;
+			expect(element).toBeInTheDocument();
+			return element as HTMLDivElement;
+		});
+		fireEvent.click(avatar);
+
+		expect(pushStateSpy).toHaveBeenCalled();
+		expect(document.querySelector(".lightbox-overlay")).toBeInTheDocument();
+
+		fireEvent.click(document.querySelector(".lightbox-overlay") as HTMLDivElement);
+		expect(backSpy).toHaveBeenCalled();
+	});
+
+	it("reverts optimistic taken state when mark-dose request fails", async () => {
+		const sharedData = createSharedData();
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+			}
+			if (url === "/api/share/token-123/doses" && init?.method === "POST") {
+				return Promise.reject(new Error("post failed"));
+			}
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+		});
+
+		renderSharedSchedule("/share/token-123");
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const takeButton = await waitFor(() => {
+			const button = document.querySelector(".dose-btn.take:not([disabled])") as HTMLButtonElement | null;
+			expect(button).toBeInTheDocument();
+			return button as HTMLButtonElement;
+		});
+		fireEvent.click(takeButton);
+
+		await waitFor(() => {
+			expect(document.querySelector(".dose-btn.undo")).not.toBeInTheDocument();
+			expect(document.querySelector(".dose-btn.take:not([disabled])")).toBeInTheDocument();
+		});
+	});
+
+	it("reverts optimistic undo state when undo request fails", async () => {
+		const today = new Date();
+		const todayDateOnlyMs = new Date(today.getFullYear(), today.getMonth(), today.getDate()).getTime();
+		const sharedData = createSharedData();
+		(global.fetch as ReturnType<typeof vi.fn>).mockImplementation((url: string, init?: RequestInit) => {
+			if (url === "/api/share/token-123/doses" && (!init || !init.method || init.method === "GET")) {
+				return Promise.resolve({
+					ok: true,
+					json: () => Promise.resolve({ doses: [{ doseId: `1-0-${todayDateOnlyMs}-Max` }] }),
+				});
+			}
+			if (url === "/api/share/token-123") {
+				return Promise.resolve({ ok: true, json: () => Promise.resolve(sharedData) });
+			}
+			if (url.startsWith("/api/share/token-123/doses/") && init?.method === "DELETE") {
+				return Promise.reject(new Error("delete failed"));
+			}
+			return Promise.resolve({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+		});
+
+		renderSharedSchedule("/share/token-123");
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		expandTodayIfCollapsed();
+
+		const undoButton = await waitFor(() => {
+			const button = document.querySelector(".dose-btn.undo") as HTMLButtonElement | null;
+			expect(button).toBeInTheDocument();
+			return button as HTMLButtonElement;
+		});
+		fireEvent.click(undoButton);
+
+		await waitFor(() => {
+			expect(document.querySelector(".dose-btn.undo")).toBeInTheDocument();
+		});
+	});
+
+	it("persists manual collapse state in localStorage", async () => {
+		const setItemSpy = vi.spyOn(window.localStorage, "setItem");
+		const sharedData = createSharedData();
+		mockShareFetch("token-123", sharedData);
+
+		renderSharedSchedule("/share/token-123");
+
+		await waitFor(() => {
+			expect(screen.getByText(/share\.scheduleFor/i)).toBeInTheDocument();
+		});
+
+		const todayDivider = document.querySelector(".day-block.today .day-divider.clickable") as HTMLDivElement;
+		fireEvent.click(todayDivider);
+
+		expect(setItemSpy).toHaveBeenCalled();
+		expect(
+			setItemSpy.mock.calls.some((call) => String(call[0]).includes("share_token-123_collapsedDays")) ||
+				setItemSpy.mock.calls.some((call) => String(call[0]).includes("share_token-123_expandedDays"))
+		).toBe(true);
+	});
+});
@@ -0,0 +1,532 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import type React from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { AppProvider, useAppContext } from "../../context/AppContext";
+import type { Medication } from "../../types";
+
+const mockUseAuth = vi.fn();
+const mockUseMedications = vi.fn();
+const mockUseSettings = vi.fn();
+const mockUseDoses = vi.fn();
+const mockUseCollapsedDays = vi.fn();
+const mockUseShare = vi.fn();
+const mockUseRefill = vi.fn();
+const mockBuildSchedulePreview = vi.fn();
+const mockCalculateCoverage = vi.fn();
+const mockComputeMissedPastDoseIds = vi.fn();
+
+vi.mock("react-i18next", () => ({
+	useTranslation: () => ({
+		t: (key: string) => key,
+		i18n: { language: "en" },
+	}),
+}));
+
+vi.mock("../../components/Auth", () => ({
+	useAuth: () => mockUseAuth(),
+}));
+
+vi.mock("../../hooks", () => ({
+	useMedications: () => mockUseMedications(),
+	useSettings: () => mockUseSettings(),
+	useDoses: () => mockUseDoses(),
+	useCollapsedDays: () => mockUseCollapsedDays(),
+	useShare: () => mockUseShare(),
+	useRefill: () => mockUseRefill(),
+}));
+
+vi.mock("../../utils/formatters", () => ({
+	getSystemLocale: () => "en-US",
+}));
+
+vi.mock("../../utils/schedule", () => ({
+	buildSchedulePreview: (...args: unknown[]) => mockBuildSchedulePreview(...args),
+	calculateCoverage: (...args: unknown[]) => mockCalculateCoverage(...args),
+	computeMissedPastDoseIds: (...args: unknown[]) => mockComputeMissedPastDoseIds(...args),
+	isDoseDismissed: vi.fn(() => false),
+}));
+
+const meds: Medication[] = [
+	{
+		id: 11,
+		name: "Aspirin",
+		takenBy: ["Max", "Anna"],
+		packCount: 1,
+		blistersPerPack: 1,
+		pillsPerBlister: 10,
+		looseTablets: 2,
+		blisters: [],
+		updatedAt: null,
+	},
+];
+
+const wrapper = ({ children }: { children: React.ReactNode }) => <AppProvider>{children}</AppProvider>;
+
+describe("useAppContext", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+
+		vi.spyOn(window.history, "pushState").mockImplementation(() => {});
+		vi.spyOn(window.history, "back").mockImplementation(() => {});
+		(window.localStorage.getItem as ReturnType<typeof vi.fn>).mockReturnValue("90");
+
+		const loadMeds = vi.fn();
+		const loadSettings = vi.fn();
+		const loadTakenDoses = vi.fn();
+
+		mockUseAuth.mockReturnValue({ user: { id: 7, username: "owner" } });
+
+		mockUseMedications.mockReturnValue({
+			meds,
+			setMeds: vi.fn(),
+			loading: false,
+			saving: false,
+			setSaving: vi.fn(),
+			uploadingImage: false,
+			loadMeds,
+			deleteMed: vi.fn(),
+			uploadMedImage: vi.fn(),
+			deleteMedImage: vi.fn(),
+		});
+
+		mockUseSettings.mockReturnValue({
+			settings: {
+				emailEnabled: false,
+				notificationEmail: "",
+				reminderDaysBefore: 7,
+				repeatDailyReminders: false,
+				skipRemindersForTakenDoses: false,
+				repeatRemindersEnabled: false,
+				reminderRepeatIntervalMinutes: 30,
+				maxNaggingReminders: 5,
+				lowStockDays: 10,
+				normalStockDays: 30,
+				highStockDays: 60,
+				smtpHost: "",
+				smtpPort: 587,
+				smtpUser: "",
+				smtpPass: "",
+				smtpFrom: "",
+				smtpSecure: false,
+				hasSmtpPassword: false,
+				lastAutoEmailSent: null,
+				nextScheduledCheck: null,
+				lastNotificationType: null,
+				lastNotificationChannel: null,
+				lastReminderMedName: null,
+				lastReminderTakenBy: null,
+				lastStockReminderSent: null,
+				lastStockReminderChannel: null,
+				lastStockReminderMedNames: null,
+				shoutrrrEnabled: false,
+				shoutrrrUrl: "",
+				emailStockReminders: true,
+				emailIntakeReminders: true,
+				shoutrrrStockReminders: true,
+				shoutrrrIntakeReminders: true,
+				stockCalculationMode: "automatic",
+				shareStockStatus: true,
+				expiryWarningDays: 30,
+			},
+			setSettings: vi.fn(),
+			savedSettings: {
+				emailEnabled: false,
+				notificationEmail: "",
+				reminderDaysBefore: 7,
+				repeatDailyReminders: false,
+				skipRemindersForTakenDoses: false,
+				repeatRemindersEnabled: false,
+				reminderRepeatIntervalMinutes: 30,
+				maxNaggingReminders: 5,
+				lowStockDays: 10,
+				normalStockDays: 30,
+				highStockDays: 60,
+				smtpHost: "",
+				smtpPort: 587,
+				smtpUser: "",
+				smtpPass: "",
+				smtpFrom: "",
+				smtpSecure: false,
+				hasSmtpPassword: false,
+				lastAutoEmailSent: null,
+				nextScheduledCheck: null,
+				lastNotificationType: null,
+				lastNotificationChannel: null,
+				lastReminderMedName: null,
+				lastReminderTakenBy: null,
+				lastStockReminderSent: null,
+				lastStockReminderChannel: null,
+				lastStockReminderMedNames: null,
+				shoutrrrEnabled: false,
+				shoutrrrUrl: "",
+				emailStockReminders: true,
+				emailIntakeReminders: true,
+				shoutrrrStockReminders: true,
+				shoutrrrIntakeReminders: true,
+				stockCalculationMode: "automatic",
+				shareStockStatus: true,
+				expiryWarningDays: 30,
+			},
+			settingsLoading: false,
+			settingsSaving: false,
+			settingsSaved: false,
+			testingEmail: false,
+			testEmailResult: null,
+			setTestEmailResult: vi.fn(),
+			testingShoutrrr: false,
+			testShoutrrrResult: null,
+			setTestShoutrrrResult: vi.fn(),
+			loadSettings,
+			saveSettings: vi.fn(),
+			testEmail: vi.fn(),
+			testShoutrrr: vi.fn(),
+			hasUnsavedChanges: false,
+		});
+
+		mockUseDoses.mockReturnValue({
+			takenDoses: new Set<string>(),
+			setTakenDoses: vi.fn(),
+			takenDoseTimestamps: new Map<string, number>(),
+			dismissedDoses: new Set<string>(),
+			showClearMissedConfirm: true,
+			setShowClearMissedConfirm: vi.fn(),
+			getDoseId: vi.fn((base: string, person: string | null) => (person ? `${base}-${person}` : base)),
+			countTakenDoses: vi.fn(() => ({ total: 0, taken: 0 })),
+			markDoseTaken: vi.fn(),
+			undoDoseTaken: vi.fn(),
+			loadTakenDoses,
+		});
+
+		mockUseCollapsedDays.mockReturnValue({
+			manuallyCollapsedDays: new Set<string>(),
+			manuallyExpandedDays: new Set<string>(),
+			toggleDayCollapse: vi.fn(),
+		});
+
+		mockUseShare.mockReturnValue({
+			showShareDialog: false,
+			sharePeople: ["Anna", "Max"],
+			shareSelectedPerson: "Anna",
+			setShareSelectedPerson: vi.fn(),
+			shareSelectedDays: 30,
+			setShareSelectedDays: vi.fn(),
+			shareGenerating: false,
+			shareLink: null,
+			setShareLink: vi.fn(),
+			shareCopied: false,
+			setShareCopied: vi.fn(),
+			openShareDialog: vi.fn(),
+			generateShareLink: vi.fn(),
+			copyShareLink: vi.fn(),
+			closeShareDialog: vi.fn(),
+			resetShareDialogState: vi.fn(),
+		});
+
+		mockUseRefill.mockReturnValue({
+			showRefillModal: false,
+			setShowRefillModal: vi.fn(),
+			refillPacks: 1,
+			setRefillPacks: vi.fn(),
+			refillLoose: 0,
+			setRefillLoose: vi.fn(),
+			refillSaving: false,
+			refillHistory: [],
+			refillHistoryExpanded: false,
+			setRefillHistoryExpanded: vi.fn(),
+			showEditStockModal: false,
+			setShowEditStockModal: vi.fn(),
+			editStockFullBlisters: 0,
+			setEditStockFullBlisters: vi.fn(),
+			editStockPartialBlisterPills: 0,
+			setEditStockPartialBlisterPills: vi.fn(),
+			editStockSaving: false,
+			loadRefillHistory: vi.fn(),
+			submitRefill: vi.fn(),
+			submitStockCorrection: vi.fn(),
+			openRefillModal: vi.fn(),
+			closeRefillModal: vi.fn(),
+			openEditStockModal: vi.fn(),
+			closeEditStockModal: vi.fn(),
+		});
+
+		mockBuildSchedulePreview.mockReturnValue({ events: [] });
+		mockCalculateCoverage.mockReturnValue({ all: [], low: [] });
+		mockComputeMissedPastDoseIds.mockReturnValue([]);
+
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValue({
+			ok: true,
+			json: () => Promise.resolve({}),
+			text: () => Promise.resolve('{"imported":{"medications":1,"doseHistory":2,"shareLinks":3}}'),
+		});
+	});
+
+	it("throws if used outside AppProvider", () => {
+		expect(() => renderHook(() => useAppContext())).toThrow("useAppContext must be used within an AppProvider");
+	});
+
+	it("loads initial values and composes computed fields", async () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		await waitFor(() => {
+			expect(result.current.scheduleDays).toBe(90);
+		});
+
+		expect(mockUseMedications().loadMeds).toHaveBeenCalled();
+		expect(mockUseSettings().loadSettings).toHaveBeenCalled();
+		expect(result.current.existingPeople).toEqual(["Anna", "Max"]);
+		expect(result.current.stockThresholds.lowStockDays).toBe(10);
+		expect(result.current.settingsChanged).toBe(false);
+	});
+
+	it("wraps share dialog opener with current medications", async () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		act(() => {
+			result.current.openShareDialog();
+		});
+
+		expect(mockUseShare().openShareDialog).toHaveBeenCalledWith(meds);
+	});
+
+	it("opens and closes modal helpers via browser history", async () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		act(() => {
+			result.current.openImageLightbox();
+			result.current.openScheduleLightbox("image.png");
+			result.current.openUserFilter("Max");
+			result.current.openMedDetail(meds[0]);
+		});
+
+		expect(window.history.pushState).toHaveBeenCalled();
+		expect(mockUseRefill().loadRefillHistory).toHaveBeenCalledWith(11);
+
+		act(() => {
+			result.current.closeImageLightbox();
+			result.current.closeScheduleLightbox();
+			result.current.closeUserFilter();
+			result.current.closeMedDetail();
+		});
+
+		expect(window.history.back).toHaveBeenCalled();
+	});
+
+	it("dismisses missed doses and posts unique medication IDs", async () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		await act(async () => {
+			await result.current.dismissMissedDoses(["11-0-1730000000000", "11-2-1730000100000", "12-0-1730000200000"]);
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/medications/dismiss-until",
+			expect.objectContaining({
+				method: "POST",
+				credentials: "include",
+			})
+		);
+
+		const body = JSON.parse((fetch as ReturnType<typeof vi.fn>).mock.calls[0][1].body as string);
+		expect(body.medicationIds).toEqual([11, 12]);
+		expect(mockUseMedications().loadMeds).toHaveBeenCalled();
+		expect(mockUseDoses().setShowClearMissedConfirm).toHaveBeenCalledWith(false);
+	});
+
+	it("does not dismiss missed doses for empty/invalid IDs", async () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		await act(async () => {
+			await result.current.dismissMissedDoses([]);
+			await result.current.dismissMissedDoses(["invalid-dose-id"]);
+		});
+
+		expect(fetch).not.toHaveBeenCalledWith("/api/medications/dismiss-until", expect.anything());
+	});
+
+	it("imports data and triggers reload plus import result state", async () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		act(() => {
+			result.current.setPendingImportData({ version: "1", exportedAt: new Date().toISOString(), medications: [] });
+		});
+
+		await act(async () => {
+			await result.current.handleImportConfirm();
+		});
+
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/import",
+			expect.objectContaining({
+				method: "POST",
+				credentials: "include",
+			})
+		);
+		expect(mockUseMedications().loadMeds).toHaveBeenCalled();
+		expect(mockUseSettings().loadSettings).toHaveBeenCalled();
+		expect(mockUseDoses().loadTakenDoses).toHaveBeenCalled();
+		expect(result.current.importResult).toEqual({ medications: 1, doses: 2, shares: 3 });
+	});
+
+	it("exports data and triggers JSON download", async () => {
+		const click = vi.fn();
+		const appendChild = vi.spyOn(document.body, "appendChild");
+		const removeChild = vi.spyOn(document.body, "removeChild");
+		const createObjectURL = vi.spyOn(URL, "createObjectURL").mockReturnValue("blob:export-url");
+		const revokeObjectURL = vi.spyOn(URL, "revokeObjectURL").mockImplementation(() => {});
+
+		const originalCreateElement = document.createElement.bind(document);
+		vi.spyOn(document, "createElement").mockImplementation((tagName: string) => {
+			const element = originalCreateElement(tagName);
+			if (tagName === "a") {
+				Object.defineProperty(element, "click", { value: click, configurable: true });
+			}
+			return element;
+		});
+
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: true,
+			json: () => Promise.resolve({ version: "1", medications: [] }),
+		});
+
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		await act(async () => {
+			await result.current.handleExport(true);
+		});
+
+		expect(fetch).toHaveBeenCalledWith("/api/export?includeSensitive=true&includeImages=true", {
+			credentials: "include",
+		});
+		expect(createObjectURL).toHaveBeenCalled();
+		expect(click).toHaveBeenCalled();
+		expect(appendChild).toHaveBeenCalled();
+		expect(removeChild).toHaveBeenCalled();
+		expect(revokeObjectURL).toHaveBeenCalledWith("blob:export-url");
+	});
+
+	it("handles invalid import JSON file", () => {
+		const mockAlert = vi.fn();
+		global.alert = mockAlert;
+
+		class MockFileReader {
+			onload: ((event: ProgressEvent<FileReader>) => void) | null = null;
+			readAsText = vi.fn(() => {
+				this.onload?.({ target: { result: "not-json" } } as unknown as ProgressEvent<FileReader>);
+			});
+		}
+		vi.stubGlobal("FileReader", MockFileReader as unknown as typeof FileReader);
+
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+		const file = new File(["bad"], "bad.json", { type: "application/json" });
+
+		act(() => {
+			result.current.handleImportFileSelect({
+				target: { files: [file], value: "file" },
+			} as unknown as React.ChangeEvent<HTMLInputElement>);
+		});
+
+		expect(mockAlert).toHaveBeenCalledWith("exportImport.invalidFile");
+	});
+
+	it("parses valid import file and opens confirm modal", () => {
+		class MockFileReader {
+			onload: ((event: ProgressEvent<FileReader>) => void) | null = null;
+			readAsText = vi.fn(() => {
+				this.onload?.({
+					target: {
+						result: JSON.stringify({ version: "1", exportedAt: "2026-01-01T00:00:00.000Z", medications: [] }),
+					},
+				} as unknown as ProgressEvent<FileReader>);
+			});
+		}
+		vi.stubGlobal("FileReader", MockFileReader as unknown as typeof FileReader);
+
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+		const file = new File(["ok"], "ok.json", { type: "application/json" });
+
+		act(() => {
+			result.current.handleImportFileSelect({
+				target: { files: [file], value: "file" },
+			} as unknown as React.ChangeEvent<HTMLInputElement>);
+		});
+
+		expect(result.current.showImportConfirm).toBe(true);
+		expect(result.current.pendingImportData).toEqual({
+			version: "1",
+			exportedAt: "2026-01-01T00:00:00.000Z",
+			medications: [],
+		});
+	});
+
+	it("computes day stock status as warning and danger for low/out stock", async () => {
+		mockCalculateCoverage.mockReturnValue({
+			all: [
+				{
+					name: "Aspirin",
+					daysLeft: 2,
+					medsLeft: 5,
+					depletionTime: Date.now() + 100000,
+				},
+				{
+					name: "Vitamin C",
+					daysLeft: 0,
+					medsLeft: 0,
+					depletionTime: Date.now() - 100000,
+				},
+			],
+			low: [],
+		});
+
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		expect(result.current.getDayStockStatus([{ medName: "Aspirin", lastWhen: Date.now() }])).toBe("warning");
+		expect(result.current.getDayStockStatus([{ medName: "Vitamin C", lastWhen: Date.now() }])).toBe("danger");
+	});
+
+	it("does not navigate back when closing modals that are not open", () => {
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		act(() => {
+			result.current.closeImageLightbox();
+			result.current.closeScheduleLightbox();
+			result.current.closeUserFilter();
+			result.current.closeMedDetail();
+		});
+
+		expect(window.history.back).not.toHaveBeenCalled();
+	});
+
+	it("shows import error alert when import API returns non-ok response", async () => {
+		const mockAlert = vi.fn();
+		global.alert = mockAlert;
+
+		(global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+			ok: false,
+			status: 500,
+			text: () => Promise.resolve('{"error":"Import failed"}'),
+		});
+
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		act(() => {
+			result.current.setPendingImportData({ version: "1", exportedAt: new Date().toISOString(), medications: [] });
+		});
+
+		await act(async () => {
+			await result.current.handleImportConfirm();
+		});
+
+		expect(mockAlert).toHaveBeenCalledWith("exportImport.importError: Import failed");
+	});
+
+	it("keeps clear-missed confirm open when dismiss request fails", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error("network"));
+		const { result } = renderHook(() => useAppContext(), { wrapper });
+
+		await act(async () => {
+			await result.current.dismissMissedDoses(["11-0-1730000000000"]);
+		});
+
+		expect(mockUseDoses().setShowClearMissedConfirm).not.toHaveBeenCalledWith(false);
+	});
+});
@@ -0,0 +1,91 @@
+import { fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
+import { useState } from "react";
+import { describe, expect, it } from "vitest";
+import { UnsavedChangesProvider, useUnsavedChanges } from "../../context/UnsavedChangesContext";
+
+function TestConsumer() {
+	const { hasUnsavedChanges, setHasUnsavedChanges, confirmNavigation } = useUnsavedChanges();
+	const [result, setResult] = useState("idle");
+
+	return (
+		<div>
+			<div data-testid="has-unsaved">{String(hasUnsavedChanges)}</div>
+			<div data-testid="result">{result}</div>
+			<button type="button" onClick={() => setHasUnsavedChanges(true)}>
+				set-unsaved
+			</button>
+			<button
+				type="button"
+				onClick={async () => {
+					const shouldProceed = await confirmNavigation();
+					setResult(String(shouldProceed));
+				}}
+			>
+				confirm-navigation
+			</button>
+		</div>
+	);
+}
+
+describe("UnsavedChangesContext", () => {
+	it("throws if used outside provider", () => {
+		expect(() => renderHook(() => useUnsavedChanges())).toThrow(
+			"useUnsavedChanges must be used within UnsavedChangesProvider"
+		);
+	});
+
+	it("resolves confirmNavigation immediately when there are no unsaved changes", async () => {
+		render(
+			<UnsavedChangesProvider>
+				<TestConsumer />
+			</UnsavedChangesProvider>
+		);
+
+		fireEvent.click(screen.getByText("confirm-navigation"));
+
+		await waitFor(() => {
+			expect(screen.getByTestId("result")).toHaveTextContent("true");
+		});
+		expect(screen.queryByText("common.unsavedChanges.title")).not.toBeInTheDocument();
+	});
+
+	it("opens confirmation modal and resolves false on cancel", async () => {
+		render(
+			<UnsavedChangesProvider>
+				<TestConsumer />
+			</UnsavedChangesProvider>
+		);
+
+		fireEvent.click(screen.getByText("set-unsaved"));
+		expect(screen.getByTestId("has-unsaved")).toHaveTextContent("true");
+
+		fireEvent.click(screen.getByText("confirm-navigation"));
+		expect(screen.getByText("common.unsavedChanges.title")).toBeInTheDocument();
+
+		fireEvent.click(screen.getByText("common.unsavedChanges.stay"));
+
+		await waitFor(() => {
+			expect(screen.getByTestId("result")).toHaveTextContent("false");
+		});
+		expect(screen.queryByText("common.unsavedChanges.title")).not.toBeInTheDocument();
+	});
+
+	it("opens confirmation modal and resolves true on confirm", async () => {
+		render(
+			<UnsavedChangesProvider>
+				<TestConsumer />
+			</UnsavedChangesProvider>
+		);
+
+		fireEvent.click(screen.getByText("set-unsaved"));
+		fireEvent.click(screen.getByText("confirm-navigation"));
+		expect(screen.getByText("common.unsavedChanges.title")).toBeInTheDocument();
+
+		fireEvent.click(screen.getByText("common.unsavedChanges.leave"));
+
+		await waitFor(() => {
+			expect(screen.getByTestId("result")).toHaveTextContent("true");
+		});
+		expect(screen.queryByText("common.unsavedChanges.title")).not.toBeInTheDocument();
+	});
+});
@@ -84,4 +84,14 @@ describe("useCollapsedDays", () => {

 		expect(window.localStorage.setItem).not.toHaveBeenCalled();
 	});
+
+	it("saves expanded days key when toggling auto-collapsed day", () => {
+		const { result } = renderHook(() => useCollapsedDays(7));
+
+		act(() => {
+			result.current.toggleDayCollapse("2024-02-01", true);
+		});
+
+		expect(window.localStorage.setItem).toHaveBeenCalledWith("expandedDays_user_7", expect.any(String));
+	});
 });
@@ -282,4 +282,26 @@ describe("useDoses", () => {

 		expect(result.current.showClearMissedConfirm).toBe(true);
 	});
+
+	it("undoDoseTaken encodes special characters in dose ID", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ doses: [{ doseId: "dose 1/a", takenAt: Date.now(), dismissed: false }] }),
+			})
+			.mockResolvedValueOnce({ ok: true })
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({ doses: [] }) });
+
+		const { result } = renderHook(() => useDoses());
+
+		await waitFor(() => {
+			expect(result.current.takenDoses.has("dose 1/a")).toBe(true);
+		});
+
+		await act(async () => {
+			await result.current.undoDoseTaken("dose 1/a");
+		});
+
+		expect(fetch).toHaveBeenCalledWith("/api/doses/taken/dose%201%2Fa", expect.objectContaining({ method: "DELETE" }));
+	});
 });
@@ -1,8 +1,16 @@
-import { describe, expect, it } from "vitest";
-import { defaultBlister, defaultForm } from "../../hooks/useMedicationForm";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { defaultBlister, defaultForm, defaultIntake, useMedicationForm } from "../../hooks/useMedicationForm";
+import type { Medication } from "../../types";
+import { toDateValue } from "../../utils/formatters";

-// Note: Hook tests were causing memory issues due to complex dependencies
-// Testing only the exported utility functions to avoid heap overflow
+const tMock = (key: string) => key;
+
+vi.mock("react-i18next", () => ({
+	useTranslation: () => ({
+		t: tMock,
+	}),
+}));

 describe("defaultBlister", () => {
 	it("creates a blister with default values", () => {
@@ -14,13 +22,8 @@ describe("defaultBlister", () => {
 	});

 	it("uses current date", () => {
-		const before = new Date();
 		const blister = defaultBlister();
-		const after = new Date();
-
-		const blisterDate = new Date(blister.startDate);
-		expect(blisterDate >= new Date(before.toISOString().slice(0, 10))).toBe(true);
-		expect(blisterDate <= new Date(`${after.toISOString().slice(0, 10)}T23:59:59`)).toBe(true);
+		expect(blister.startDate).toBe(toDateValue(new Date()));
 	});
 });

@@ -30,15 +33,19 @@ describe("defaultForm", () => {
 		expect(form.name).toBe("");
 		expect(form.genericName).toBe("");
 		expect(form.takenBy).toEqual([]);
+		expect(form.packageType).toBe("blister");
 		expect(form.packCount).toBe("1");
 		expect(form.blistersPerPack).toBe("1");
 		expect(form.pillsPerBlister).toBe("1");
+		expect(form.totalPills).toBe("");
 		expect(form.looseTablets).toBe("0");
 		expect(form.pillWeightMg).toBe("");
+		expect(form.doseUnit).toBe("mg");
 		expect(form.expiryDate).toBe("");
 		expect(form.notes).toBe("");
 		expect(form.intakeRemindersEnabled).toBe(false);
 		expect(form.blisters).toHaveLength(1);
+		expect(form.intakes).toHaveLength(1);
 	});

 	it("creates a blister in the form", () => {
@@ -48,6 +55,15 @@ describe("defaultForm", () => {
 		expect(form.blisters[0].every).toBe("1");
 	});

+	it("creates an intake in the form", () => {
+		const form = defaultForm();
+		expect(form.intakes).toHaveLength(1);
+		expect(form.intakes[0].usage).toBe("1");
+		expect(form.intakes[0].every).toBe("1");
+		expect(form.intakes[0].takenBy).toBe("");
+		expect(form.intakes[0].intakeRemindersEnabled).toBe(false);
+	});
+
 	it("creates independent forms", () => {
 		const form1 = defaultForm();
 		const form2 = defaultForm();
@@ -71,4 +87,275 @@ describe("defaultForm", () => {
 		form1.takenBy.push("John");
 		expect(form2.takenBy).toHaveLength(0);
 	});
+
+	it("creates independent intakes arrays", () => {
+		const form1 = defaultForm();
+		const form2 = defaultForm();
+
+		form1.intakes.push(defaultIntake("Jane"));
+		expect(form2.intakes).toHaveLength(1);
+	});
+});
+
+describe("defaultIntake", () => {
+	it("creates an intake with default values", () => {
+		const intake = defaultIntake();
+		expect(intake.usage).toBe("1");
+		expect(intake.every).toBe("1");
+		expect(intake.startDate).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+		expect(intake.startTime).toMatch(/^\d{2}:\d{2}$/);
+		expect(intake.takenBy).toBe("");
+		expect(intake.intakeRemindersEnabled).toBe(false);
+	});
+
+	it("accepts a prefilled takenBy value", () => {
+		const intake = defaultIntake("Alex");
+		expect(intake.takenBy).toBe("Alex");
+	});
+});
+
+describe("useMedicationForm", () => {
+	it("initializes with default state", async () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		expect(result.current.form.name).toBe("");
+		expect(result.current.editingId).toBeNull();
+		expect(result.current.formChanged).toBe(false);
+
+		await waitFor(() => {
+			expect(result.current.fieldErrors.name).toBe("common.validation.required");
+			expect(result.current.hasValidationErrors).toBe(true);
+		});
+	});
+
+	it("validates name required and max length fields", () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		expect(result.current.validateField("name", "")).toBe("common.validation.required");
+		expect(result.current.validateField("takenBy", ["Alice"])).toBeUndefined();
+
+		const tooLongGeneric = "a".repeat(101);
+		const maxLengthError = result.current.validateField("genericName", tooLongGeneric);
+		expect(maxLengthError).toBe("common.validation.maxLength");
+	});
+
+	it("updates form values and tracks changed state", async () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		act(() => {
+			result.current.handleValueChange("name", "Aspirin");
+		});
+
+		expect(result.current.form.name).toBe("Aspirin");
+		expect(result.current.formChanged).toBe(true);
+
+		await waitFor(() => {
+			expect(result.current.fieldErrors.name).toBeUndefined();
+		});
+	});
+
+	it("adds, edits and removes blister rows", () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		act(() => {
+			result.current.addBlister();
+		});
+		expect(result.current.form.blisters).toHaveLength(2);
+
+		act(() => {
+			result.current.setBlisterValue(1, "usage", "3");
+			result.current.setBlisterValue(1, "every", "2");
+		});
+		expect(result.current.form.blisters[1].usage).toBe("3");
+		expect(result.current.form.blisters[1].every).toBe("2");
+
+		act(() => {
+			result.current.removeBlister(0);
+		});
+		expect(result.current.form.blisters).toHaveLength(1);
+	});
+
+	it("adds, edits and removes intake rows", () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		act(() => {
+			result.current.addIntake("Max");
+		});
+		expect(result.current.form.intakes).toHaveLength(2);
+		expect(result.current.form.intakes[1].takenBy).toBe("Max");
+
+		act(() => {
+			result.current.setIntakeValue(1, "usage", "2.5");
+			result.current.setIntakeValue(1, "intakeRemindersEnabled", true);
+		});
+		expect(result.current.form.intakes[1].usage).toBe("2.5");
+		expect(result.current.form.intakes[1].intakeRemindersEnabled).toBe(true);
+
+		act(() => {
+			result.current.removeIntake(0);
+		});
+		expect(result.current.form.intakes).toHaveLength(1);
+	});
+
+	it("handles takenBy tag input add/remove and deduplication", () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		act(() => {
+			result.current.addTakenByPerson("  Alice  ");
+		});
+
+		act(() => {
+			result.current.addTakenByPerson("Alice");
+			result.current.addTakenByPerson("");
+		});
+
+		expect(result.current.form.takenBy).toEqual(["Alice"]);
+
+		act(() => {
+			result.current.removeTakenByPerson("Alice");
+		});
+		expect(result.current.form.takenBy).toEqual([]);
+	});
+
+	it("handles takenBy keyboard shortcuts (Enter, comma, Backspace)", () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		act(() => {
+			result.current.setTakenByInput("Bob");
+		});
+
+		const preventDefault = vi.fn();
+		act(() => {
+			result.current.handleTakenByKeyDown({
+				key: "Enter",
+				preventDefault,
+			} as unknown as React.KeyboardEvent<HTMLInputElement>);
+		});
+
+		expect(preventDefault).toHaveBeenCalled();
+		expect(result.current.form.takenBy).toContain("Bob");
+
+		act(() => {
+			result.current.setTakenByInput("Cara");
+		});
+
+		act(() => {
+			result.current.handleTakenByKeyDown({
+				key: ",",
+				preventDefault,
+			} as unknown as React.KeyboardEvent<HTMLInputElement>);
+		});
+		expect(result.current.form.takenBy).toContain("Cara");
+
+		act(() => {
+			result.current.setTakenByInput("");
+			result.current.handleTakenByKeyDown({
+				key: "Backspace",
+				preventDefault,
+			} as unknown as React.KeyboardEvent<HTMLInputElement>);
+		});
+		expect(result.current.form.takenBy).toEqual(["Bob"]);
+	});
+
+	it("maps medication with intakes in startEdit and opens modal on mobile", () => {
+		const { result } = renderHook(() => useMedicationForm());
+		const openEditModal = vi.fn();
+		Object.defineProperty(window, "innerWidth", { value: 375, writable: true });
+
+		const med: Medication = {
+			id: 10,
+			name: "Ibuprofen",
+			genericName: "Ibuprofen",
+			takenBy: ["Max"],
+			packageType: "blister",
+			packCount: 2,
+			blistersPerPack: 3,
+			pillsPerBlister: 10,
+			looseTablets: 5,
+			pillWeightMg: 400,
+			doseUnit: "mg",
+			expiryDate: "2027-01-01",
+			notes: "note",
+			intakeRemindersEnabled: true,
+			blisters: [{ usage: 1, every: 1, start: "2026-01-01T08:00:00.000Z" }],
+			intakes: [
+				{
+					usage: 2,
+					every: 1,
+					start: "2026-01-02T09:00:00.000Z",
+					takenBy: "Max",
+					intakeRemindersEnabled: true,
+				},
+			],
+			updatedAt: null,
+		};
+
+		act(() => {
+			result.current.startEdit(med, openEditModal);
+		});
+
+		expect(result.current.editingId).toBe(10);
+		expect(result.current.formSaved).toBe(true);
+		expect(result.current.form.intakes[0].takenBy).toBe("Max");
+		expect(openEditModal).toHaveBeenCalled();
+	});
+
+	it("falls back to legacy blisters when intakes are missing", () => {
+		const { result } = renderHook(() => useMedicationForm());
+		const openEditModal = vi.fn();
+		Object.defineProperty(window, "innerWidth", { value: 1024, writable: true });
+
+		const med: Medication = {
+			id: 11,
+			name: "Legacy Med",
+			takenBy: [],
+			packageType: "blister",
+			packCount: 1,
+			blistersPerPack: 1,
+			pillsPerBlister: 8,
+			looseTablets: 0,
+			blisters: [
+				{ usage: 1, every: 2, start: "2026-01-03T10:00:00.000Z" },
+				{ usage: 2, every: 1, start: "2026-01-04T12:00:00.000Z" },
+			],
+			intakeRemindersEnabled: true,
+			updatedAt: null,
+		};
+
+		act(() => {
+			result.current.startEdit(med, openEditModal);
+		});
+
+		expect(result.current.form.intakes).toHaveLength(2);
+		expect(result.current.form.intakes[0].takenBy).toBe("");
+		expect(result.current.form.intakes[0].intakeRemindersEnabled).toBe(true);
+		expect(openEditModal).not.toHaveBeenCalled();
+	});
+
+	it("resets complete form state", () => {
+		const { result } = renderHook(() => useMedicationForm());
+
+		act(() => {
+			result.current.setEditingId(5);
+			result.current.setShowEditModal(true);
+			result.current.setPendingImage(new File(["x"], "image.png", { type: "image/png" }));
+			result.current.setPendingImagePreview("data:image/png;base64,abc");
+			result.current.setFormSaved(true);
+			result.current.setTakenByInput("X");
+			result.current.handleValueChange("name", "Changed");
+		});
+
+		act(() => {
+			result.current.resetForm();
+		});
+
+		expect(result.current.editingId).toBeNull();
+		expect(result.current.showEditModal).toBe(false);
+		expect(result.current.pendingImage).toBeNull();
+		expect(result.current.pendingImagePreview).toBeNull();
+		expect(result.current.takenByInput).toBe("");
+		expect(result.current.formSaved).toBe(false);
+		expect(result.current.form.name).toBe("");
+		expect(result.current.formChanged).toBe(false);
+	});
 });
@@ -38,6 +38,8 @@ describe("useMedications", () => {
 			result.current.loadMeds();
 		});

+		expect(result.current.loading).toBe(true);
+
 		await waitFor(() => {
 			expect(result.current.meds).toEqual(mockMeds);
 		});
@@ -108,6 +110,23 @@ describe("useMedications", () => {
 		expect(mockResetForm).toHaveBeenCalled();
 	});

+	it("still reloads medications when delete request fails", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockRejectedValueOnce(new Error("Delete failed"))
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve([]) });
+
+		const mockResetForm = vi.fn();
+		const { result } = renderHook(() => useMedications());
+
+		await act(async () => {
+			await result.current.deleteMed(5, 5, mockResetForm);
+		});
+
+		expect(fetch).toHaveBeenCalledWith("/api/medications/5", { method: "DELETE", credentials: "include" });
+		expect(fetch).toHaveBeenCalledWith("/api/medications", { credentials: "include" });
+		expect(mockResetForm).toHaveBeenCalled();
+	});
+
 	it("does not call resetForm if editingId does not match", async () => {
 		(global.fetch as ReturnType<typeof vi.fn>)
 			.mockResolvedValueOnce({ ok: true })
@@ -249,4 +249,79 @@ describe("useSettings", () => {
 		// emailEnabled should be false in the saved state
 		expect(result.current.settings.emailEnabled).toBe(false);
 	});
+
+	it("auto-disables shoutrrr when URL is empty", async () => {
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({}) })
+			.mockResolvedValueOnce({ ok: true });
+
+		const { result } = renderHook(() => useSettings());
+
+		await waitFor(() => {
+			expect(result.current.settingsLoading).toBe(false);
+		});
+
+		act(() => {
+			result.current.setSettings((s) => ({
+				...s,
+				shoutrrrEnabled: true,
+				shoutrrrUrl: "",
+			}));
+		});
+
+		const mockEvent = { preventDefault: vi.fn() } as unknown as React.FormEvent;
+
+		await act(async () => {
+			await result.current.saveSettings(mockEvent);
+		});
+
+		expect(result.current.settings.shoutrrrEnabled).toBe(false);
+	});
+
+	it("refreshes reminder status on interval", async () => {
+		let refreshCallback: (() => void) | null = null;
+		const nativeSetInterval = global.setInterval;
+		vi.spyOn(global, "setInterval").mockImplementation((handler: TimerHandler, timeout?: number) => {
+			if (timeout === 30000) {
+				refreshCallback = handler as () => void;
+				return 1 as unknown as ReturnType<typeof setInterval>;
+			}
+			return nativeSetInterval(handler, timeout);
+		});
+
+		(global.fetch as ReturnType<typeof vi.fn>)
+			.mockResolvedValueOnce({ ok: true, json: () => Promise.resolve({}) })
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve({
+						lastAutoEmailSent: "2026-01-01T10:00:00.000Z",
+						lastNotificationType: "stock",
+						lastNotificationChannel: "email",
+						lastReminderMedName: "Aspirin",
+						lastReminderTakenBy: "Max",
+						lastStockReminderSent: "2026-01-01T09:00:00.000Z",
+						lastStockReminderChannel: "both",
+						lastStockReminderMedNames: "Aspirin",
+					}),
+			});
+
+		const { result } = renderHook(() => useSettings());
+
+		await waitFor(() => {
+			expect(result.current.settingsLoading).toBe(false);
+		});
+
+		expect(refreshCallback).not.toBeNull();
+
+		act(() => {
+			refreshCallback?.();
+		});
+
+		await waitFor(() => {
+			expect(result.current.settings.lastAutoEmailSent).toBe("2026-01-01T10:00:00.000Z");
+			expect(result.current.settings.lastNotificationType).toBe("stock");
+			expect(result.current.settings.lastStockReminderChannel).toBe("both");
+		});
+	});
 });
@@ -41,6 +41,13 @@ describe("useTheme", () => {
 		expect(result.current.themePreference).toBe("light");
 	});

+	it("falls back to dark for invalid stored theme", () => {
+		(window.localStorage.getItem as ReturnType<typeof vi.fn>).mockReturnValue("invalid-theme");
+		const { result } = renderHook(() => useTheme());
+		expect(result.current.theme).toBe("dark");
+		expect(result.current.themePreference).toBe("dark");
+	});
+
 	it("toggles theme through light → dark → system → light", () => {
 		(window.localStorage.getItem as ReturnType<typeof vi.fn>).mockReturnValue("light");
 		const { result } = renderHook(() => useTheme());
@@ -103,4 +110,48 @@ describe("useTheme", () => {
 		});
 		expect(document.documentElement.getAttribute("data-theme")).toBe("light");
 	});
+
+	it("reacts to system theme changes when preference is system", () => {
+		let isLight = false;
+		let changeHandler: (() => void) | undefined;
+		const addEventListener = vi.fn((_: string, handler: () => void) => {
+			changeHandler = handler;
+		});
+		const removeEventListener = vi.fn();
+		Object.defineProperty(window, "matchMedia", {
+			writable: true,
+			value: vi.fn().mockImplementation((query: string) => ({
+				matches: query === "(prefers-color-scheme: light)" ? isLight : false,
+				media: query,
+				onchange: null,
+				addEventListener,
+				removeEventListener,
+				dispatchEvent: vi.fn(),
+				addListener: vi.fn(),
+				removeListener: vi.fn(),
+			})),
+		});
+
+		const { result } = renderHook(() => useTheme());
+
+		act(() => {
+			result.current.setThemePreference("system");
+		});
+
+		expect(addEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+		expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+
+		act(() => {
+			isLight = true;
+			changeHandler?.();
+		});
+
+		expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+
+		act(() => {
+			result.current.setThemePreference("dark");
+		});
+
+		expect(removeEventListener).toHaveBeenCalledWith("change", expect.any(Function));
+	});
 });
@@ -0,0 +1,52 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { useUnsavedChangesWarning } from "../../hooks/useUnsavedChangesWarning";
+
+describe("useUnsavedChangesWarning", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+	});
+
+	it("registers and unregisters beforeunload listener", () => {
+		const addListenerSpy = vi.spyOn(window, "addEventListener");
+		const removeListenerSpy = vi.spyOn(window, "removeEventListener");
+
+		const { unmount } = renderHook(() => useUnsavedChangesWarning(false));
+
+		const beforeUnloadCall = addListenerSpy.mock.calls.find((call) => call[0] === "beforeunload");
+		expect(beforeUnloadCall).toBeDefined();
+
+		const handler = beforeUnloadCall?.[1] as EventListener;
+		unmount();
+
+		expect(removeListenerSpy).toHaveBeenCalledWith("beforeunload", handler);
+	});
+
+	it("sets returnValue when unsaved changes exist", () => {
+		const addListenerSpy = vi.spyOn(window, "addEventListener");
+		renderHook(() => useUnsavedChangesWarning(true));
+
+		const beforeUnloadCall = addListenerSpy.mock.calls.find((call) => call[0] === "beforeunload");
+		const handler = beforeUnloadCall?.[1] as (event: BeforeUnloadEvent) => unknown;
+
+		const event = { preventDefault: vi.fn(), returnValue: undefined } as unknown as BeforeUnloadEvent;
+		handler(event);
+
+		expect(event.preventDefault).toHaveBeenCalled();
+		expect(event.returnValue).toBe("common.unsavedChanges.message");
+	});
+
+	it("does not set returnValue when there are no unsaved changes", () => {
+		const addListenerSpy = vi.spyOn(window, "addEventListener");
+		renderHook(() => useUnsavedChangesWarning(false));
+
+		const beforeUnloadCall = addListenerSpy.mock.calls.find((call) => call[0] === "beforeunload");
+		const handler = beforeUnloadCall?.[1] as (event: BeforeUnloadEvent) => unknown;
+
+		const event = { preventDefault: vi.fn(), returnValue: undefined } as unknown as BeforeUnloadEvent;
+		handler(event);
+
+		expect(event.preventDefault).not.toHaveBeenCalled();
+		expect(event.returnValue).toBeUndefined();
+	});
+});
@@ -1,7 +1,15 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
-import { DashboardPage } from "../../pages/DashboardPage";
+import {
+	DashboardPage,
+	formatFullBlisters,
+	formatOpenBlisterAndLoose,
+	getBlisterStock,
+	getMedTotal,
+	getReminderStatusData,
+	userStorageKey,
+} from "../../pages/DashboardPage";

 // Mock data for tests with medications
 const mockMeds = [
@@ -131,6 +139,7 @@ const createMockAppContext = (overrides = {}) => ({
 	showPastDays: false,
 	setShowPastDays: vi.fn(),
 	pastDays: [],
+	todayDay: null,
 	futureDays: [],
 	takenDoses: new Set(),
 	dismissedDoses: new Set(),
@@ -166,6 +175,119 @@ const createMockAppContext = (overrides = {}) => ({

 let mockContextValue = createMockAppContext();

+describe("DashboardPage helper functions", () => {
+	it("builds user storage key correctly", () => {
+		expect(userStorageKey(5, "scheduleDays")).toBe("user_5_scheduleDays");
+		expect(userStorageKey(undefined, "scheduleDays")).toBe("scheduleDays");
+	});
+
+	it("calculates blister stock breakdown", () => {
+		expect(getBlisterStock(27, 10, 0, 27)).toEqual({ fullBlisters: 2, openBlisterPills: 7, loosePills: 7 });
+	});
+
+	it("formats blister and open blister labels", () => {
+		const t = (key: string) => key;
+		expect(formatFullBlisters(1, t)).toBe("1 common.blister");
+		expect(formatFullBlisters(3, t)).toBe("3 common.blisters");
+		expect(formatOpenBlisterAndLoose(0, 0, 10, t)).toBe("-");
+		expect(formatOpenBlisterAndLoose(4, 4, 10, t)).toBe("4 common.of 10 common.pills");
+	});
+
+	it("computes total pills for blister and bottle types", () => {
+		expect(
+			getMedTotal({
+				packageType: "blister",
+				packCount: 1,
+				blistersPerPack: 2,
+				pillsPerBlister: 10,
+				looseTablets: 3,
+				stockAdjustment: 2,
+			})
+		).toBe(25);
+
+		expect(
+			getMedTotal({
+				packageType: "bottle",
+				packCount: 0,
+				blistersPerPack: 1,
+				pillsPerBlister: 1,
+				looseTablets: 50,
+				stockAdjustment: -3,
+			})
+		).toBe(47);
+	});
+
+	it("builds reminder status data for critical and history rows", () => {
+		const t = (key: string) => key;
+		const result = getReminderStatusData(
+			7,
+			30,
+			[{ name: "A", daysLeft: 2, medsLeft: 1, depletionDate: null, depletionTime: null, nextDose: null }],
+			[
+				{ name: "A", daysLeft: 2, medsLeft: 1, depletionDate: null, depletionTime: null, nextDose: null },
+				{ name: "B", daysLeft: 10, medsLeft: 4, depletionDate: null, depletionTime: null, nextDose: null },
+			],
+			"2026-01-01T10:00:00.000Z",
+			"intake",
+			"email",
+			"A",
+			"Max",
+			"2026-01-01T09:00:00.000Z",
+			"both",
+			"A (+1)",
+			t,
+			"en-US"
+		);
+
+		expect(result.status.className).toBe("danger");
+		expect(result.lowStockMeds.length).toBe(2);
+		expect(result.lastStockSent).not.toBeNull();
+		expect(result.lastIntakeSent?.medName).toBe("A");
+	});
+
+	it("builds warning and success reminder statuses", () => {
+		const t = (key: string) => key;
+
+		const warning = getReminderStatusData(
+			7,
+			30,
+			[],
+			[{ name: "C", daysLeft: 12, medsLeft: 10, depletionDate: null, depletionTime: null, nextDose: null }],
+			null,
+			null,
+			null,
+			null,
+			null,
+			null,
+			null,
+			null,
+			t,
+			"en-US"
+		);
+		expect(warning.status.className).toBe("warning");
+
+		const success = getReminderStatusData(
+			7,
+			30,
+			[],
+			[{ name: "D", daysLeft: 40, medsLeft: 10, depletionDate: null, depletionTime: null, nextDose: null }],
+			null,
+			null,
+			null,
+			null,
+			null,
+			null,
+			null,
+			null,
+			t,
+			"en-US"
+		);
+		expect(success.status.className).toBe("success");
+		expect(success.lastStockSent).toBeNull();
+		expect(success.lastIntakeSent).toBeNull();
+	});
+});
+
 // Mock the context
 vi.mock("../../context", () => ({
 	useAppContext: () => mockContextValue,
@@ -357,6 +479,9 @@ describe("DashboardPage interactions", () => {
 	});

 	it("can change schedule days", () => {
+		const setScheduleDays = vi.fn();
+		mockContextValue = createMockAppContext({ setScheduleDays });
+
 		render(
 			<MemoryRouter>
 				<DashboardPage />
@@ -367,6 +492,7 @@ describe("DashboardPage interactions", () => {
 		expect(select).toBeInTheDocument();

 		fireEvent.change(select, { target: { value: "90" } });
+		expect(setScheduleDays).toHaveBeenCalledWith(90);
 	});
 });

@@ -757,6 +883,28 @@ describe("DashboardPage with past days", () => {
 		}
 	});

+	it("collapses past days when already expanded", () => {
+		const setShowPastDays = vi.fn();
+		mockContextValue = createMockAppContext({
+			pastDays: mockPastDays,
+			showPastDays: true,
+			setShowPastDays,
+			missedPastDoseIds: [],
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const toggle = document.querySelector(".past-days-toggle");
+		if (toggle) {
+			fireEvent.click(toggle);
+			expect(setShowPastDays).toHaveBeenCalledWith(false);
+		}
+	});
+
 	it("shows clear missed doses button when there are missed doses", () => {
 		render(
 			<MemoryRouter>
@@ -768,6 +916,272 @@ describe("DashboardPage with past days", () => {
 		const clearBtn = document.querySelector(".clear-missed-btn");
 		expect(clearBtn).toBeInTheDocument();
 	});
+
+	it("opens clear missed confirmation modal and confirms action", () => {
+		const dismissMissedDoses = vi.fn();
+		mockContextValue = createMockAppContext({
+			pastDays: mockPastDays,
+			showPastDays: false,
+			missedPastDoseIds: ["1-0-1-John", "1-0-2-John"],
+			showClearMissedConfirm: true,
+			dismissMissedDoses,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText(/dashboard\.schedules\.clearMissedConfirmTitle/i)).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("button", { name: /dashboard\.schedules\.clearMissedConfirm/i }));
+		expect(dismissMissedDoses).toHaveBeenCalledWith(["1-0-1-John", "1-0-2-John"]);
+	});
+});
+
+describe("DashboardPage additional branches", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		localStorage.clear();
+	});
+
+	it("calls openShareDialog when share button is clicked", () => {
+		const openShareDialog = vi.fn();
+		mockContextValue = createMockAppContext({
+			meds: mockMeds,
+			coverage: mockCoverage,
+			openShareDialog,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /share\.button/i }));
+		expect(openShareDialog).toHaveBeenCalled();
+	});
+
+	it("toggles future days visibility", () => {
+		const setShowFutureDays = vi.fn();
+		mockContextValue = createMockAppContext({
+			futureDays: mockFutureDays,
+			showFutureDays: false,
+			setShowFutureDays,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const futureToggle = document.querySelector(".future-days-toggle");
+		expect(futureToggle).toBeInTheDocument();
+		fireEvent.click(futureToggle!);
+		expect(setShowFutureDays).toHaveBeenCalledWith(true);
+	});
+
+	it("shows network error on manual reminder fetch failure", async () => {
+		global.fetch = vi.fn().mockRejectedValue(new Error("offline"));
+		mockContextValue = createMockAppContext({
+			meds: mockMeds,
+			coverage: mockCoverage,
+			settings: {
+				...createMockAppContext().settings,
+				emailEnabled: true,
+				emailStockReminders: true,
+				notificationEmail: "test@example.com",
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByText("dashboard.reorder.sendReminder"));
+
+		await waitFor(() => {
+			expect(screen.getByText("common.networkError")).toBeInTheDocument();
+		});
+	});
+
+	it("opens medication detail from last stock reminder med link", () => {
+		const openMedDetail = vi.fn();
+		mockContextValue = createMockAppContext({
+			meds: mockMeds,
+			coverage: mockCoverage,
+			settings: {
+				...createMockAppContext().settings,
+				emailEnabled: true,
+				emailStockReminders: true,
+				lastStockReminderSent: "2026-02-10T10:00:00.000Z",
+				lastStockReminderChannel: "email",
+				lastStockReminderMedNames: "Aspirin (+1)",
+			},
+			openMedDetail,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const reminderMedLink = document.querySelector(".reminder-status-bar .med-link") as HTMLElement;
+		expect(reminderMedLink).toBeInTheDocument();
+		fireEvent.click(reminderMedLink);
+		expect(openMedDetail).toHaveBeenCalled();
+	});
+
+	it("persists selected schedule days to localStorage", () => {
+		const setScheduleDays = vi.fn();
+		const setItemSpy = vi.spyOn(window.localStorage, "setItem");
+		mockContextValue = createMockAppContext({ setScheduleDays });
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const select = document.querySelector(".schedule-days-select") as HTMLSelectElement;
+		fireEvent.change(select, { target: { value: "180" } });
+
+		expect(setScheduleDays).toHaveBeenCalledWith(180);
+		expect(setItemSpy).toHaveBeenCalledWith("user_1_scheduleDays", "180");
+	});
+
+	it("opens schedule lightbox when clicking medication avatar image", () => {
+		const openScheduleLightbox = vi.fn();
+		const medsWithImage = [{ ...mockMeds[0], imageUrl: "aspirin.png" }];
+		const futureDay = [
+			{
+				dateStr: "Tomorrow",
+				date: new Date(Date.now() + 86400000),
+				isPast: false,
+				meds: [
+					{
+						medName: "Aspirin",
+						total: 1,
+						doses: [{ id: "1-0-1", timeStr: "09:00", when: Date.now() + 86400000, usage: 1, takenBy: [] }],
+						lastWhen: Date.now() + 86400000,
+					},
+				],
+			},
+		];
+
+		mockContextValue = createMockAppContext({
+			meds: medsWithImage,
+			coverage: mockCoverage,
+			coverageByMed: { Aspirin: mockCoverage.all[0] },
+			depletionByMed: { Aspirin: Date.now() + 10 * 86400000 },
+			futureDays: futureDay,
+			showFutureDays: true,
+			manuallyExpandedDays: new Set(["Tomorrow"]),
+			openScheduleLightbox,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const avatar = document.querySelector(".day-block .med-avatar.clickable") as HTMLElement;
+		expect(avatar).toBeInTheDocument();
+		fireEvent.click(avatar);
+		expect(openScheduleLightbox).toHaveBeenCalledWith("/api/images/aspirin.png");
+	});
+
+	it("clicking clear missed button opens confirmation", () => {
+		const setShowClearMissedConfirm = vi.fn();
+		mockContextValue = createMockAppContext({
+			pastDays: mockPastDays,
+			missedPastDoseIds: ["1-0-1-John"],
+			setShowClearMissedConfirm,
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const clearBtn = document.querySelector(".clear-missed-btn") as HTMLButtonElement;
+		fireEvent.click(clearBtn);
+		expect(setShowClearMissedConfirm).toHaveBeenCalledWith(true);
+	});
+
+	it("renders and interacts with today day schedule block", () => {
+		const markDoseTaken = vi.fn();
+		const undoDoseTaken = vi.fn();
+		const todayDoseId = "1-0-1000";
+		const today = {
+			dateStr: "Today",
+			date: new Date(),
+			isPast: false,
+			meds: [
+				{
+					medName: "Aspirin",
+					total: 1,
+					doses: [{ id: todayDoseId, timeStr: "09:00", when: Date.now() - 1000, usage: 1, takenBy: ["John"] }],
+					lastWhen: Date.now() - 1000,
+				},
+			],
+		};
+
+		mockContextValue = createMockAppContext({
+			meds: mockMeds,
+			coverage: mockCoverage,
+			coverageByMed: { Aspirin: mockCoverage.all[0] },
+			depletionByMed: { Aspirin: Date.now() + 10 * 86400000 },
+			todayDay: today,
+			markDoseTaken,
+			undoDoseTaken,
+			takenDoses: new Set<string>(),
+			getDoseId: vi.fn((id: string, person: string | null) => (person ? `${id}-${person}` : id)),
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText("Today")).toBeInTheDocument();
+		const takeButton = document.querySelector(".day-block.today .dose-btn.take") as HTMLButtonElement;
+		expect(takeButton).toBeInTheDocument();
+		fireEvent.click(takeButton);
+		expect(markDoseTaken).toHaveBeenCalled();
+
+		mockContextValue = createMockAppContext({
+			meds: mockMeds,
+			coverage: mockCoverage,
+			coverageByMed: { Aspirin: mockCoverage.all[0] },
+			depletionByMed: { Aspirin: Date.now() + 10 * 86400000 },
+			todayDay: today,
+			markDoseTaken,
+			undoDoseTaken,
+			takenDoses: new Set<string>([`${todayDoseId}-John`]),
+			manuallyExpandedDays: new Set<string>(["Today"]),
+			getDoseId: vi.fn((id: string, person: string | null) => (person ? `${id}-${person}` : id)),
+		});
+
+		render(
+			<MemoryRouter>
+				<DashboardPage />
+			</MemoryRouter>
+		);
+
+		const undoButton = document.querySelector(".day-block.today .dose-btn.undo") as HTMLButtonElement;
+		expect(undoButton).toBeInTheDocument();
+		fireEvent.click(undoButton);
+		expect(undoDoseTaken).toHaveBeenCalled();
+	});
 });

 describe("DashboardPage with expanded past days", () => {
@@ -318,6 +318,23 @@ describe("MedicationsPage with medications", () => {
 		const editButtons = document.querySelectorAll(".info");
 		expect(editButtons.length).toBeGreaterThan(0);
 	});
+
+	it("calls startEdit when clicking edit button", () => {
+		const startEdit = vi.fn();
+		mockFormHookValue = createMockFormHook({ startEdit });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		const editButton = document.querySelector(".med-actions .info") as HTMLButtonElement;
+		fireEvent.click(editButton);
+		expect(startEdit).toHaveBeenCalledTimes(1);
+		expect(startEdit.mock.calls[0][0]).toEqual(expect.objectContaining({ id: 1, name: "Aspirin" }));
+		expect(typeof startEdit.mock.calls[0][1]).toBe("function");
+	});
 });

 describe("MedicationsPage form interactions", () => {
@@ -363,6 +380,21 @@ describe("MedicationsPage form interactions", () => {
 			expect(addIntake).toHaveBeenCalled();
 		}
 	});
+
+	it("calls handleValueChange when package type is changed", () => {
+		const handleValueChange = vi.fn();
+		mockFormHookValue = createMockFormHook({ handleValueChange });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		const packageTypeSelect = document.querySelector(".package-type-select") as HTMLSelectElement;
+		fireEvent.change(packageTypeSelect, { target: { value: "bottle" } });
+		expect(handleValueChange).toHaveBeenCalledWith("packageType", "bottle");
+	});
 });

 describe("MedicationsPage form validation", () => {
@@ -829,6 +861,24 @@ describe("MedicationsPage image upload for existing medication", () => {
 		const fileInput = document.querySelector('input[type="file"]');
 		expect(fileInput).toBeInTheDocument();
 	});
+
+	it("calls uploadMedImage when selecting file for existing medication", () => {
+		const uploadMedImage = vi.fn();
+		mockContextValue = createMockContext({ meds: mockMeds, uploadMedImage });
+		mockFormHookValue = createMockFormHook({ editingId: 1 });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		const fileInput = document.querySelector('input[type="file"]') as HTMLInputElement;
+		const file = new File(["img"], "existing-med.jpg", { type: "image/jpeg" });
+		fireEvent.change(fileInput, { target: { files: [file] } });
+
+		expect(uploadMedImage).toHaveBeenCalledWith(1, file);
+	});
 });

 describe("MedicationsPage with medication image", () => {
@@ -1076,6 +1126,23 @@ describe("MedicationsPage new entry button", () => {
 		fireEvent.click(newEntryBtn);
 		expect(resetForm).toHaveBeenCalled();
 	});
+
+	it("opens mobile edit modal when clicking new entry on mobile", () => {
+		const resetForm = vi.fn();
+		mockFormHookValue = createMockFormHook({ resetForm });
+
+		Object.defineProperty(window, "innerWidth", { value: 375, writable: true });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.newEntry/i }));
+		expect(resetForm).toHaveBeenCalled();
+		expect(document.querySelector(".modal-content.edit-modal")).toBeInTheDocument();
+	});
 });

 describe("MedicationsPage cancel edit button", () => {
@@ -1618,3 +1685,379 @@ describe("MedicationsPage blister refill shows packs", () => {
 		expect(refillSection!.textContent).toContain("refill.loosePills");
 	});
 });
+
+describe("MedicationsPage save and unsaved branches", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		localStorage.clear();
+		Object.defineProperty(window, "innerWidth", { value: 1024, writable: true });
+	});
+
+	it("saves new medication successfully", async () => {
+		const setSaving = vi.fn();
+		const loadMeds = vi.fn();
+		const setFormSaved = vi.fn();
+		const resetForm = vi.fn();
+		const setOriginalForm = vi.fn();
+
+		global.fetch = vi.fn().mockResolvedValue({
+			ok: true,
+			json: () => Promise.resolve({ id: 99 }),
+		});
+
+		mockContextValue = createMockContext({ setSaving, loadMeds });
+		mockFormHookValue = createMockFormHook({
+			formChanged: true,
+			setFormSaved,
+			resetForm,
+			setOriginalForm,
+			form: {
+				...createMockFormHook().form,
+				name: "New Medication",
+				intakes: [
+					{
+						usage: "1",
+						every: "1",
+						startDate: "2026-02-10",
+						startTime: "09:00",
+						takenBy: "",
+						intakeRemindersEnabled: false,
+					},
+				],
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.submit(document.querySelector("form.form-grid")!);
+
+		await screen.findByText(/medications\.list\.title/i);
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/medications",
+			expect.objectContaining({ method: "POST", credentials: "include" })
+		);
+		expect(setSaving).toHaveBeenCalledWith(true);
+		expect(setFormSaved).toHaveBeenCalledWith(true);
+		expect(loadMeds).toHaveBeenCalled();
+		expect(resetForm).toHaveBeenCalled();
+		expect(setSaving).toHaveBeenCalledWith(false);
+	});
+
+	it("shows alert when save fails", async () => {
+		const setSaving = vi.fn();
+		const mockAlert = vi.fn();
+		global.alert = mockAlert;
+
+		global.fetch = vi.fn().mockResolvedValue({ ok: false });
+
+		mockContextValue = createMockContext({ setSaving });
+		mockFormHookValue = createMockFormHook({
+			formChanged: true,
+			form: {
+				...createMockFormHook().form,
+				name: "Broken Medication",
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.submit(document.querySelector("form.form-grid")!);
+
+		await screen.findByText(/medications\.list\.title/i);
+		expect(mockAlert).toHaveBeenCalledWith("common.saveFailed");
+		expect(setSaving).toHaveBeenCalledWith(false);
+	});
+
+	it("opens unsaved confirmation when closing mobile modal with unsaved changes", async () => {
+		const resetForm = vi.fn();
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook({
+			formChanged: true,
+			resetForm,
+		});
+
+		Object.defineProperty(window, "innerWidth", { value: 375, writable: true });
+		vi.spyOn(window.history, "pushState").mockImplementation(() => {});
+		vi.spyOn(window.history, "back").mockImplementation(() => {});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.newEntry/i }));
+		fireEvent.click(document.querySelector(".modal-close") as HTMLButtonElement);
+
+		expect(screen.getByText(/common\.unsavedChanges\.title/i)).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("button", { name: /common\.unsavedChanges\.leave/i }));
+		expect(resetForm).toHaveBeenCalled();
+	});
+
+	it("keeps editing when unsaved confirmation stay is clicked", () => {
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook({ formChanged: true });
+		Object.defineProperty(window, "innerWidth", { value: 375, writable: true });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.newEntry/i }));
+		fireEvent.click(document.querySelector(".modal-close") as HTMLButtonElement);
+
+		expect(screen.getByText(/common\.unsavedChanges\.title/i)).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("button", { name: /common\.unsavedChanges\.stay/i }));
+		expect(screen.queryByText(/common\.unsavedChanges\.title/i)).not.toBeInTheDocument();
+	});
+
+	it("saves existing medication via PUT and updates original form", async () => {
+		const setSaving = vi.fn();
+		const setFormSaved = vi.fn();
+		const setOriginalForm = vi.fn();
+		const resetForm = vi.fn();
+
+		global.fetch = vi.fn().mockResolvedValue({
+			ok: true,
+			json: () => Promise.resolve({ id: 1 }),
+		});
+
+		mockContextValue = createMockContext({ setSaving, loadMeds: vi.fn() });
+		mockFormHookValue = createMockFormHook({
+			editingId: 1,
+			formChanged: true,
+			setFormSaved,
+			setOriginalForm,
+			resetForm,
+			form: {
+				...createMockFormHook().form,
+				name: "Edited Medication",
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.submit(document.querySelector("form.form-grid")!);
+
+		await screen.findByText(/medications\.list\.title/i);
+		expect(fetch).toHaveBeenCalledWith(
+			"/api/medications/1",
+			expect.objectContaining({ method: "PUT", credentials: "include" })
+		);
+		expect(setFormSaved).toHaveBeenCalledWith(true);
+		expect(setOriginalForm).toHaveBeenCalled();
+		expect(resetForm).not.toHaveBeenCalled();
+		expect(setSaving).toHaveBeenCalledWith(false);
+	});
+
+	it("uploads selected image after saving a new medication", async () => {
+		const uploadMedImage = vi.fn();
+		global.fetch = vi.fn().mockResolvedValue({
+			ok: true,
+			json: () => Promise.resolve({ id: 123 }),
+		});
+
+		class MockFileReader {
+			onload: ((event: ProgressEvent<FileReader>) => void) | null = null;
+			readAsDataURL = vi.fn(() => {
+				this.onload?.({ target: { result: "data:image/png;base64,test" } } as unknown as ProgressEvent<FileReader>);
+			});
+		}
+		vi.stubGlobal("FileReader", MockFileReader as unknown as typeof FileReader);
+
+		mockContextValue = createMockContext({ uploadMedImage });
+		mockFormHookValue = createMockFormHook({
+			formChanged: true,
+			form: {
+				...createMockFormHook().form,
+				name: "With Image",
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		const fileInput = document.querySelector('.image-upload-section input[type="file"]') as HTMLInputElement;
+		const file = new File(["img"], "new-med.png", { type: "image/png" });
+		fireEvent.change(fileInput, { target: { files: [file] } });
+
+		fireEvent.submit(document.querySelector("form.form-grid")!);
+
+		await screen.findByText(/medications\.list\.title/i);
+		expect(uploadMedImage).toHaveBeenCalledWith(123, file);
+	});
+
+	it("closes mobile modal without confirmation when there are no unsaved changes", () => {
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook({ formChanged: false });
+		Object.defineProperty(window, "innerWidth", { value: 375, writable: true });
+		const backSpy = vi.spyOn(window.history, "back").mockImplementation(() => {});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.newEntry/i }));
+		fireEvent.click(document.querySelector(".modal-close") as HTMLButtonElement);
+
+		expect(backSpy).toHaveBeenCalled();
+		expect(screen.queryByText(/common\.unsavedChanges\.title/i)).not.toBeInTheDocument();
+	});
+
+	it("renders image preview and removes image in edit mode", () => {
+		const deleteMedImage = vi.fn();
+		const medsWithImage = [{ ...mockMeds[0], imageUrl: "edit-image.png" }];
+		mockContextValue = createMockContext({ meds: medsWithImage, deleteMedImage });
+		mockFormHookValue = createMockFormHook({ editingId: 1 });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		expect(document.querySelector(".image-preview img")).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("button", { name: /form\.removeImage/i }));
+		expect(deleteMedImage).toHaveBeenCalledWith(1);
+	});
+
+	it("passes single takenBy person to addIntake button", () => {
+		const addIntake = vi.fn();
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook({
+			addIntake,
+			form: {
+				...createMockFormHook().form,
+				takenBy: ["John"],
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.blisters\.addIntake/i }));
+		expect(addIntake).toHaveBeenCalledWith("John");
+	});
+
+	it("does not pass takenBy person to addIntake when multiple people exist", () => {
+		const addIntake = vi.fn();
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook({
+			addIntake,
+			form: {
+				...createMockFormHook().form,
+				takenBy: ["John", "Jane"],
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /form\.blisters\.addIntake/i }));
+		expect(addIntake).toHaveBeenCalledWith(undefined);
+	});
+
+	it("shows and updates intake-specific takenBy select when takenBy list is present", () => {
+		const setIntakeValue = vi.fn();
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook({
+			setIntakeValue,
+			form: {
+				...createMockFormHook().form,
+				takenBy: ["John", "Jane"],
+				intakes: [
+					{
+						usage: "1",
+						every: "1",
+						startDate: "2024-01-01",
+						startTime: "09:00",
+						takenBy: "John",
+						intakeRemindersEnabled: false,
+					},
+				],
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText(/form\.blisters\.takenByIntake/i)).toBeInTheDocument();
+		const select = document.querySelector(".blister-row select") as HTMLSelectElement;
+		fireEvent.change(select, { target: { value: "Jane" } });
+		expect(setIntakeValue).toHaveBeenCalledWith(0, "takenBy", "Jane");
+	});
+
+	it("shows pending preview for new medication after selecting an image", () => {
+		class MockFileReader {
+			onload: ((event: ProgressEvent<FileReader>) => void) | null = null;
+			readAsDataURL = vi.fn(() => {
+				this.onload?.({ target: { result: "data:image/png;base64,preview" } } as unknown as ProgressEvent<FileReader>);
+			});
+		}
+		vi.stubGlobal("FileReader", MockFileReader as unknown as typeof FileReader);
+
+		mockContextValue = createMockContext();
+		mockFormHookValue = createMockFormHook();
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		const fileInput = document.querySelector('.image-upload-section input[type="file"]') as HTMLInputElement;
+		const file = new File(["img"], "preview.png", { type: "image/png" });
+		fireEvent.change(fileInput, { target: { files: [file] } });
+
+		expect(document.querySelector('.image-preview img[alt="Preview"]')).toBeInTheDocument();
+	});
+
+	it("disables edit image upload when uploading and shows refill adding label", () => {
+		mockContextValue = createMockContext({
+			meds: mockMeds,
+			uploadingImage: true,
+			refillSaving: true,
+			refillPacks: 1,
+			refillLoose: 1,
+		});
+		mockFormHookValue = createMockFormHook({ editingId: 1 });
+
+		render(
+			<MemoryRouter>
+				<MedicationsPage />
+			</MemoryRouter>
+		);
+
+		const fileInput = document.querySelector('.image-upload-section input[type="file"]') as HTMLInputElement;
+		expect(fileInput).toBeDisabled();
+		expect(screen.getByText(/refill\.adding/i)).toBeInTheDocument();
+	});
+});
@@ -398,6 +398,107 @@ describe("PlannerPage with email enabled", () => {
 		const _emailBtn = document.querySelector(".ghost");
 		// Email button may be present
 	});
+
+	it("sends planner notification and shows success message", async () => {
+		global.fetch = vi
+			.fn()
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve([
+						{
+							medicationId: 1,
+							medicationName: "Aspirin",
+							totalPills: 25,
+							plannerUsage: 5,
+							blisterSize: 10,
+							blistersNeeded: 1,
+							fullBlisters: 1,
+							loosePills: 0,
+							enough: true,
+							packageType: "blister",
+						},
+					]),
+			})
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () => Promise.resolve({ message: "Planner notification sent" }),
+			});
+
+		render(
+			<MemoryRouter>
+				<PlannerPage />
+			</MemoryRouter>
+		);
+
+		await act(async () => {
+			fireEvent.submit(document.querySelector("form.planner")!);
+		});
+
+		const notifyBtn = await screen.findByRole("button", { name: /planner\.sendNotification/i });
+		await act(async () => {
+			fireEvent.click(notifyBtn);
+		});
+
+		expect(global.fetch).toHaveBeenCalledWith(
+			"/api/planner/send-email",
+			expect.objectContaining({
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+			})
+		);
+
+		await waitFor(() => {
+			expect(screen.getByText("Planner notification sent")).toBeInTheDocument();
+		});
+	});
+
+	it("shows error message when planner notification fails", async () => {
+		global.fetch = vi
+			.fn()
+			.mockResolvedValueOnce({
+				ok: true,
+				json: () =>
+					Promise.resolve([
+						{
+							medicationId: 1,
+							medicationName: "Aspirin",
+							totalPills: 25,
+							plannerUsage: 5,
+							blisterSize: 10,
+							blistersNeeded: 1,
+							fullBlisters: 1,
+							loosePills: 0,
+							enough: true,
+							packageType: "blister",
+						},
+					]),
+			})
+			.mockResolvedValueOnce({
+				ok: false,
+				json: () => Promise.resolve({ error: "Could not send planner notification" }),
+			});
+
+		render(
+			<MemoryRouter>
+				<PlannerPage />
+			</MemoryRouter>
+		);
+
+		await act(async () => {
+			fireEvent.submit(document.querySelector("form.planner")!);
+		});
+
+		const notifyBtn = await screen.findByRole("button", { name: /planner\.sendNotification/i });
+		await act(async () => {
+			fireEvent.click(notifyBtn);
+		});
+
+		await waitFor(() => {
+			expect(screen.getByText("Could not send planner notification")).toBeInTheDocument();
+		});
+	});
 });

 describe("PlannerPage form interactions", () => {
@@ -445,6 +546,55 @@ describe("PlannerPage form interactions", () => {
 		// Form should be reset (no results table)
 		expect(screen.getByText(/planner\.title/i)).toBeInTheDocument();
 	});
+
+	it("toggles includeUntilStart checkbox", () => {
+		render(
+			<MemoryRouter>
+				<PlannerPage />
+			</MemoryRouter>
+		);
+
+		const checkbox = document.querySelector('.planner-checkbox input[type="checkbox"]') as HTMLInputElement;
+		expect(checkbox.checked).toBe(false);
+		fireEvent.click(checkbox);
+		expect(checkbox.checked).toBe(true);
+	});
+
+	it("submits planner request with includeUntilStart=true", async () => {
+		global.fetch = vi.fn().mockResolvedValue({
+			ok: true,
+			json: () => Promise.resolve([]),
+		});
+
+		render(
+			<MemoryRouter>
+				<PlannerPage />
+			</MemoryRouter>
+		);
+
+		const checkbox = document.querySelector('.planner-checkbox input[type="checkbox"]') as HTMLInputElement;
+		fireEvent.click(checkbox);
+
+		const form = document.querySelector("form.planner") as HTMLFormElement;
+		await act(async () => {
+			fireEvent.submit(form);
+		});
+
+		expect(global.fetch).toHaveBeenCalledWith(
+			"/api/medications/usage",
+			expect.objectContaining({
+				method: "POST",
+				headers: { "Content-Type": "application/json" },
+				credentials: "include",
+			})
+		);
+
+		const fetchCall = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
+		const body = JSON.parse(fetchCall[1].body);
+		expect(body.includeUntilStart).toBe(true);
+		expect(typeof body.startDate).toBe("string");
+		expect(typeof body.endDate).toBe("string");
+	});
 });

 describe("PlannerPage medication detail", () => {
@@ -220,6 +220,9 @@ describe("SchedulePage", () => {
 	});

 	it("can change schedule days", () => {
+		const setScheduleDays = vi.fn();
+		mockContextValue = createMockContext({ setScheduleDays });
+
 		render(
 			<MemoryRouter>
 				<SchedulePage />
@@ -230,6 +233,7 @@ describe("SchedulePage", () => {
 		expect(select).toBeInTheDocument();

 		fireEvent.change(select, { target: { value: "90" } });
+		expect(setScheduleDays).toHaveBeenCalledWith(90);
 	});
 });

@@ -485,6 +489,28 @@ describe("SchedulePage with past days", () => {
 			expect(setShowPastDays).toHaveBeenCalledWith(true);
 		}
 	});
+
+	it("collapses past days when already expanded", () => {
+		const setShowPastDays = vi.fn();
+		mockContextValue = createMockContext({
+			pastDays: mockPastDays,
+			showPastDays: true,
+			setShowPastDays,
+			missedPastDoseIds: [],
+		});
+
+		render(
+			<MemoryRouter>
+				<SchedulePage />
+			</MemoryRouter>
+		);
+
+		const toggle = document.querySelector(".past-days-toggle");
+		if (toggle) {
+			fireEvent.click(toggle);
+			expect(setShowPastDays).toHaveBeenCalledWith(false);
+		}
+	});
 });

 describe("SchedulePage with expanded past days", () => {
@@ -3,6 +3,22 @@ import { MemoryRouter } from "react-router-dom";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { SettingsPage } from "../../pages/SettingsPage";

+const changeLanguageMock = vi.fn();
+
+vi.mock("react-i18next", async () => {
+	const actual = await vi.importActual<typeof import("react-i18next")>("react-i18next");
+	return {
+		...actual,
+		useTranslation: () => ({
+			t: (key: string) => key,
+			i18n: {
+				language: "en",
+				changeLanguage: changeLanguageMock,
+			},
+		}),
+	};
+});
+
 // Factory function for mock context
 const createMockContext = (overrides = {}) => ({
 	settings: {
@@ -254,6 +270,19 @@ describe("SettingsPage interactions", () => {
 		expect(select).toBeInTheDocument();
 		expect(select).not.toBeNull();
 	});
+
+	it("calls i18n.changeLanguage when language is changed", () => {
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		const select = document.querySelector(".language-select") as HTMLSelectElement;
+		fireEvent.change(select, { target: { value: "de" } });
+
+		expect(changeLanguageMock).toHaveBeenCalledWith("de");
+	});
 });

 describe("SettingsPage loading state", () => {
@@ -347,6 +376,50 @@ describe("SettingsPage with shoutrrr enabled", () => {
 		const toggles = document.querySelectorAll(".toggle-switch");
 		expect(toggles.length).toBeGreaterThan(0);
 	});
+
+	it("updates shoutrrr stock reminder matrix toggle", () => {
+		const setSettings = vi.fn();
+		mockContextValue = createMockContext({
+			setSettings,
+			settings: {
+				...createMockContext().settings,
+				shoutrrrEnabled: true,
+				shoutrrrUrl: "ntfy://example.com/topic",
+				shoutrrrStockReminders: false,
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		const matrixToggles = document.querySelectorAll('.notification-matrix .matrix-row input[type="checkbox"]');
+		fireEvent.click(matrixToggles[1]);
+		expect(setSettings).toHaveBeenCalledWith(expect.objectContaining({ shoutrrrStockReminders: true }));
+	});
+
+	it("keeps shoutrrr matrix unchecked when URL is empty", () => {
+		mockContextValue = createMockContext({
+			settings: {
+				...createMockContext().settings,
+				shoutrrrEnabled: true,
+				shoutrrrUrl: "",
+				shoutrrrStockReminders: true,
+			},
+		});
+
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		const matrixToggles = document.querySelectorAll('.notification-matrix .matrix-row input[type="checkbox"]');
+		const shoutrrrStockToggle = matrixToggles[1] as HTMLInputElement;
+		expect(shoutrrrStockToggle.checked).toBe(false);
+	});
 });

 describe("SettingsPage test buttons", () => {
@@ -380,16 +453,9 @@ describe("SettingsPage test buttons", () => {
 			</MemoryRouter>
 		);

-		// Look for test email button
-		const testButtons = document.querySelectorAll("button");
-		const testEmailBtn = Array.from(testButtons).find(
-			(btn) =>
-				btn.textContent?.toLowerCase().includes("test") || btn.getAttribute("title")?.toLowerCase().includes("test")
-		);
-
-		if (testEmailBtn) {
-			fireEvent.click(testEmailBtn);
-		}
+		const testEmailBtn = screen.getByRole("button", { name: /common\.test/i });
+		fireEvent.click(testEmailBtn);
+		expect(testEmail).toHaveBeenCalledTimes(1);
 	});
 });

@@ -849,13 +915,67 @@ describe("SettingsPage shoutrrr URL input", () => {
 			</MemoryRouter>
 		);

-		const ghostButtons = document.querySelectorAll("button.ghost");
-		// Find test button (there should be one for shoutrrr when enabled)
-		if (ghostButtons.length > 0) {
-			const lastGhostBtn = ghostButtons[ghostButtons.length - 1];
-			fireEvent.click(lastGhostBtn);
-			// testShoutrrr should have been called
-		}
+		const testButtons = screen.getAllByRole("button", { name: /common\.test/i });
+		const pushTestButton = testButtons[testButtons.length - 1];
+		fireEvent.click(pushTestButton);
+		expect(testShoutrrr).toHaveBeenCalledTimes(1);
+	});
+});
+
+describe("SettingsPage import interactions", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockContextValue = createMockContext();
+	});
+
+	it("calls handleImportFileSelect when selecting a file", () => {
+		const handleImportFileSelect = vi.fn();
+		mockContextValue = createMockContext({ handleImportFileSelect });
+
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		const fileInput = document.querySelector("#import-file-input") as HTMLInputElement;
+		const file = new File(["{}"], "backup.json", { type: "application/json" });
+		fireEvent.change(fileInput, { target: { files: [file] } });
+
+		expect(handleImportFileSelect).toHaveBeenCalledTimes(1);
+	});
+
+	it("closes import confirmation and clears pending import data on cancel", () => {
+		const setShowImportConfirm = vi.fn();
+		const setPendingImportData = vi.fn();
+		mockContextValue = createMockContext({
+			showImportConfirm: true,
+			setShowImportConfirm,
+			setPendingImportData,
+		});
+
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /exportImport\.cancelButton/i }));
+		expect(setShowImportConfirm).toHaveBeenCalledWith(false);
+		expect(setPendingImportData).toHaveBeenCalledWith(null);
+	});
+
+	it("triggers hidden import input click when import button is pressed", () => {
+		const clickSpy = vi.spyOn(HTMLInputElement.prototype, "click");
+
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: /exportImport\.import$/i }));
+		expect(clickSpy).toHaveBeenCalled();
 	});
 });

@@ -919,6 +1039,7 @@ describe("SettingsPage schedule overview", () => {
 			settings: {
 				...createMockContext().settings,
 				nextScheduledCheck: "2024-01-15T06:00:00Z",
+				lastStockReminderSent: "2024-01-13T06:00:00Z",
 				lastAutoEmailSent: "2024-01-14T06:00:00Z",
 			},
 		});
@@ -953,6 +1074,43 @@ describe("SettingsPage schedule overview", () => {

 		expect(screen.getByText(/settings\.schedule\.lastIntakeSent/i)).toBeInTheDocument();
 	});
+
+	it("shows last stock reminder time when available", () => {
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		expect(screen.getByText(/settings\.schedule\.lastStockSent/i)).toBeInTheDocument();
+	});
+});
+
+describe("SettingsPage import success banner", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockContextValue = createMockContext({
+			importResult: { medications: 2, doses: 5, shares: 1 },
+			setImportResult: vi.fn(),
+		});
+	});
+
+	it("clears import result when success banner close is clicked", () => {
+		const setImportResult = vi.fn();
+		mockContextValue = createMockContext({
+			importResult: { medications: 2, doses: 5, shares: 1 },
+			setImportResult,
+		});
+
+		render(
+			<MemoryRouter>
+				<SettingsPage />
+			</MemoryRouter>
+		);
+
+		fireEvent.click(screen.getByRole("button", { name: "Close" }));
+		expect(setImportResult).toHaveBeenCalledWith(null);
+	});
 });

 describe("SettingsPage skip taken doses toggle", () => {
@@ -5,8 +5,8 @@ import react from "@vitejs/plugin-react";
 // Read version from package.json at build time
 const packageJson = JSON.parse(readFileSync("./package.json", "utf-8"));

-// Use localhost backend for E2E tests and local dev, docker container for docker dev
-const backendTarget = process.env.BACKEND_URL || "http://backend-dev:3000";
+// Default to localhost for local dev and CI; docker dev overrides via BACKEND_URL
+const backendTarget = process.env.BACKEND_URL || "http://localhost:3000";

 export default defineConfig({
  plugins: [react()],
Author	SHA1	Message	Date
Daniel Volz	36ee80b554	chore: add workflow to auto-move project items to Done on close/merge (#165 ) - New workflow project-auto-done.yml triggers on issue close and PR merge - Uses GraphQL to find the project item and update Status to Done - Handles both issues and pull requests with proper type detection - Skips gracefully if item is not on the board or already Done - Update release-manager.agent.md to reflect automation (manual is now fallback)	2026-02-13 18:45:51 +01:00
Daniel Volz	33342e7e25	docs: add mandatory project board update steps to release-manager (#164 ) - Add critical safety rule: always verify project board status after merge - Correct misleading claim that Closes #N auto-moves project status (it doesn't) - Add concrete GraphQL mutation commands for moving items to Done - Include known project field IDs for Status column	2026-02-13 18:42:08 +01:00
github-actions[bot]	19d5ef71ab	chore: update test count badges [skip ci]	2026-02-13 17:37:51 +00:00
Daniel Volz	5c09f97cb3	test: improve frontend test coverage (#163 ) - Export DashboardPage helper functions for testability - Add new test files: App, SharedSchedule, AppContext, UnsavedChangesContext, useUnsavedChangesWarning - Expand existing test coverage for Auth, MedDetailModal, MobileEditModal, DashboardPage, MedicationsPage, PlannerPage, and more - Add edge case and error handling tests across components, hooks, and pages	2026-02-13 18:34:19 +01:00
Copilot	0b0472f2f5	Fix OIDC token exchange behind HTTPS reverse proxy (#162 ) * Initial plan * Fix OIDC callback URL construction for HTTPS reverse proxy - Replace hardcoded http:// URL with OIDC_REDIRECT_URI from environment - Build complete callback URL with query parameters for proper validation - Fixes token exchange 401 errors when running behind HTTPS reverse proxy Co-authored-by: DanielVolz <3275994+DanielVolz@users.noreply.github.com> * Update OIDC_REDIRECT_URI documentation to clarify full URL requirement Co-authored-by: DanielVolz <3275994+DanielVolz@users.noreply.github.com> * fix: format oidc.ts to pass biome check --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: DanielVolz <3275994+DanielVolz@users.noreply.github.com> Co-authored-by: Daniel Volz <mail@danielvolz.org>	2026-02-13 18:29:33 +01:00
dependabot[bot]	38f3533dd9	build(deps-dev): bump qs from 6.14.1 to 6.14.2 in /backend (#158 ) Bumps [qs](https://github.com/ljharb/qs) from 6.14.1 to 6.14.2. - [Changelog](https://github.com/ljharb/qs/blob/main/CHANGELOG.md) - [Commits](https://github.com/ljharb/qs/compare/v6.14.1...v6.14.2) --- updated-dependencies: - dependency-name: qs dependency-version: 6.14.2 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-02-12 21:43:41 +01:00
dependabot[bot]	463c756447	build(deps): bump fast-xml-parser and @aws-sdk/client-ses in /backend (#157 ) Bumps [fast-xml-parser](https://github.com/NaturalIntelligence/fast-xml-parser) and [@aws-sdk/client-ses](https://github.com/aws/aws-sdk-js-v3/tree/HEAD/clients/client-ses). These dependencies needed to be updated together. Updates `fast-xml-parser` from 5.2.5 to 5.3.4 - [Release notes](https://github.com/NaturalIntelligence/fast-xml-parser/releases) - [Changelog](https://github.com/NaturalIntelligence/fast-xml-parser/blob/master/CHANGELOG.md) - [Commits](https://github.com/NaturalIntelligence/fast-xml-parser/compare/v5.2.5...v5.3.4) Updates `@aws-sdk/client-ses` from 3.956.0 to 3.988.0 - [Release notes](https://github.com/aws/aws-sdk-js-v3/releases) - [Changelog](https://github.com/aws/aws-sdk-js-v3/blob/main/clients/client-ses/CHANGELOG.md) - [Commits](https://github.com/aws/aws-sdk-js-v3/commits/v3.988.0/clients/client-ses) --- updated-dependencies: - dependency-name: fast-xml-parser dependency-version: 5.3.4 dependency-type: indirect - dependency-name: "@aws-sdk/client-ses" dependency-version: 3.988.0 dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2026-02-12 21:43:35 +01:00
Daniel Volz	4275dca838	fix: improve modal scroll lock and e2e script workflow (#156 )	2026-02-12 21:43:28 +01:00
Daniel Volz	6072d8eb2e	docs: consolidate copilot governance and add medassist skills (#160 )	2026-02-12 21:18:50 +01:00
Daniel Volz	98939877db	feat: expand Playwright E2E coverage (#155 ) * feat: comprehensive Playwright E2E test rewrite Rewrite all E2E tests with correct CSS selectors, add new spec files, and implement robust auth handling to work within backend rate limits. Changes: - Rewrite fixtures/index.ts with JWT-based /auth/me mock to avoid 10 req/min rate limit on /auth/me during test runs - Rewrite auth.setup.ts with offline JWT validity check to reuse existing auth state across runs (saves login rate-limit budget) - Rewrite auth.spec.ts (6 tests) - login page, fields, submit, redirect guard, invalid credentials, login/register toggle - Rewrite dashboard.spec.ts (8 tests) - header, nav tabs, navigation, overview/schedules sections, days selector, redirect - Rewrite medications.spec.ts (8 tests) - form fields, stock inventory, package type toggle, intake schedule, save/cancel, unsaved changes guard - Rewrite settings.spec.ts (12 tests) - language, notification matrix, thresholds, calculation mode, toggle switch, export/import, user menu navigation - Create planner.spec.ts (9 tests) - form, date inputs, calculate, reset, checkbox, submit, tab state, eyebrow heading - Create schedule.spec.ts (12 tests) - timeline, days selector, past/future toggles, day blocks, today highlight, collapse/expand, overview table, share button - Update playwright.config.ts: remove mobile projects, enable webServer section for CI - Add .github/workflows/e2e.yml CI workflow for Playwright tests Total: 57 E2E tests across 6 spec files, all passing consistently across 5+ consecutive runs without backend restart. Closes #154 * feat: add comprehensive E2E data tests with medication CRUD, dashboard, planner, schedule Add 48 new Playwright E2E tests covering real medication data scenarios: - medication-crud: 14 tests for create/edit/delete/list via UI form - dashboard-data: 13 tests for overview table, timeline, dose tracking - planner-data: 9 tests for demand calculator with results/status chips - schedule-data: 11 tests for timeline, collapse/expand, dose mark/undo Infrastructure improvements: - Add API helpers (createMedicationViaAPI, deleteMedicationViaAPI, deleteAllMedicationsViaAPI) with retry logic for rate-limit resilience - Configure chromium-data project for serial execution with retry:1 - Add /auth/me mock to avoid rate-limit exhaustion on auth endpoint - Increase navigateTo reliability with networkidle waits - Increase auth token validity threshold from 2 to 10 minutes - Make backend rate limit configurable via RATE_LIMIT_MAX env var - Set RATE_LIMIT_MAX=300 in dev docker-compose for E2E test support Total suite: 57 empty-state + 48 data tests = 105 tests (chromium) * test: add E2E tests for medication editing, stock status, and share schedule - medication-edit.spec.ts: 10 tests covering generic name, notes, taken-by add/remove, expiry date, refill, intake schedule editing, adding intake rows, reminder toggle, and package type changes - stock-status.spec.ts: 12 tests verifying dashboard shows correct status chips (High/Normal/Warning/Danger) for different stock levels, overview table, reorder card, detail modal, and planner integration - share-schedule.spec.ts: 10 tests for taken-by badges, share button, share dialog, link generation, shared schedule page navigation, dose tracking on shared page, and notes display - fixtures/index.ts: add createShareTokenViaAPI, updateSettingsViaAPI helpers; expand createMedicationViaAPI with takenBy, notes, expiryDate - playwright.config.ts: update testMatch/testIgnore for new test files - docker-compose.dev.yml: increase RATE_LIMIT_MAX to 1000 for E2E tests * docs: refine release-manager instructions for CLI safety and commit-linked release notes * fix: resolve PR155 CI failures for frontend lint and e2e proxy * fix: stabilize auth-related e2e checks in CI	2026-02-12 20:06:11 +01:00
Copilot	0f6a580ceb	feat: add GitHub Project automation for feature request tracking (#114 ) * Initial plan * feat: add GitHub Project automation for feature request tracking Co-authored-by: DanielVolz <3275994+DanielVolz@users.noreply.github.com> --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: DanielVolz <3275994+DanielVolz@users.noreply.github.com>	2026-02-10 17:50:58 +01:00
Daniel Volz	30271915d3	chore: release v1.10.2 (#153 )	2026-02-10 16:44:21 +01:00