fix(ntfy): improve admin ntfy UX and add clear token button

- Add missing admin.ntfy.hint translation key in all 15 languages
- Add admin ntfy server hint clarifying it is the default for users
- Expose admin_ntfy_server via PreferencesMatrix so user settings
  placeholder reflects the admin-configured default
- Add clear token button to admin ntfy panel (same pattern as user settings)
- Extract common.clear from settings.ntfyUrl.clearToken across all 15 languages

.gitattributes

@@ -0,0 +1,29 @@
+# Normalize line endings to LF on commit
+* text=auto eol=lf
+
+# Explicitly enforce LF for source files
+*.ts   text eol=lf
+*.tsx  text eol=lf
+*.js   text eol=lf
+*.jsx  text eol=lf
+*.json text eol=lf
+*.css  text eol=lf
+*.html text eol=lf
+*.md   text eol=lf
+*.yml  text eol=lf
+*.yaml text eol=lf
+*.py   text eol=lf
+*.sh   text eol=lf
+
+# Binary files — no line ending conversion
+*.png  binary
+*.jpg  binary
+*.jpeg binary
+*.gif  binary
+*.ico  binary
+*.woff binary
+*.woff2 binary
+*.ttf  binary
+*.eot  binary
+*.pdf  binary
+*.zip  binary

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,21 @@
+## Description
+<!-- What does this PR do? Why? -->
+
+## Related Issue or Discussion
+<!-- This project requires an issue or an approved feature request before submitting a PR. -->
+<!-- For bug fixes: Closes #ISSUE_NUMBER -->
+<!-- For features: Addresses discussion #DISCUSSION_NUMBER -->
+
+## Type of Change
+- [ ] Bug fix
+- [ ] New feature
+- [ ] Breaking change
+- [ ] Documentation update
+
+## Checklist
+- [ ] I have read the [Contributing Guidelines](https://github.com/mauriceboe/TREK/wiki/Contributing)
+- [ ] My branch is [up to date with `dev`](https://github.com/mauriceboe/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date)
+- [ ] This PR targets the `dev` branch, not `main`
+- [ ] I have tested my changes locally
+- [ ] I have added/updated tests that prove my fix is effective or that my feature works
+- [ ] I have updated documentation if needed

.github/workflows/close-stale-invalid-titles.yml

@@ -0,0 +1,71 @@
+name: Close issues with unchanged bad titles
+
+on:
+  schedule:
+    - cron: '0 */6 * * *' # Every 6 hours
+
+permissions:
+  issues: write
+
+jobs:
+  close-stale:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close stale invalid-title issues
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const badTitles = [
+              "[bug]", "bug report", "bug", "issue",
+              "help", "question", "test", "...", "untitled"
+            ];
+
+            const { data: issues } = await github.rest.issues.listForRepo({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: 'invalid-title',
+              state: 'open',
+              per_page: 100,
+            });
+
+            const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
+
+            for (const issue of issues) {
+              const createdAt = new Date(issue.created_at);
+              if (createdAt > twentyFourHoursAgo) continue; // grace period not over yet
+
+              const titleLower = issue.title.trim().toLowerCase();
+
+              if (!badTitles.includes(titleLower)) {
+                // Title was fixed — remove the label and move on
+                await github.rest.issues.removeLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: issue.number,
+                  name: 'invalid-title',
+                });
+                continue;
+              }
+
+              // Still a bad title after 24h — close it
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issue.number,
+                body: [
+                  '## Issue closed',
+                  '',
+                  'This issue has been automatically closed because the title was not updated within 24 hours.',
+                  '',
+                  'Feel free to open a new issue with a descriptive title that summarizes the problem.',
+                ].join('\n'),
+              });
+
+              await github.rest.issues.update({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: issue.number,
+                state: 'closed',
+                state_reason: 'not_planned',
+              });
+            }

.github/workflows/close-stale-wrong-branch.yml

@@ -0,0 +1,66 @@
+name: Close PRs with unchanged wrong base branch
+
+on:
+  schedule:
+    - cron: '0 */6 * * *' # Every 6 hours
+
+permissions:
+  pull-requests: write
+  issues: write
+
+jobs:
+  close-stale:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Close stale wrong-base-branch PRs
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const { data: pulls } = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open',
+              per_page: 100,
+            });
+
+            const twentyFourHoursAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
+
+            for (const pull of pulls) {
+              const hasLabel = pull.labels.some(l => l.name === 'wrong-base-branch');
+              if (!hasLabel) continue;
+
+              const createdAt = new Date(pull.created_at);
+              if (createdAt > twentyFourHoursAgo) continue; // grace period not over yet
+
+              // Base was fixed — remove label and move on
+              if (pull.base.ref !== 'main') {
+                await github.rest.issues.removeLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: pull.number,
+                  name: 'wrong-base-branch',
+                });
+                continue;
+              }
+
+              // Still targeting main after 24h — close it
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pull.number,
+                body: [
+                  '## PR closed',
+                  '',
+                  'This PR has been automatically closed because the base branch was not updated to `dev` within 24 hours.',
+                  '',
+                  'Feel free to open a new PR targeting `dev`.',
+                ].join('\n'),
+              });
+
+              await github.rest.pulls.update({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                pull_number: pull.number,
+                state: 'closed',
+              });
+            }

.github/workflows/close-untitled-issues.yml

@@ -1,4 +1,4 @@
-name: Close untitled issues
+name: Flag issues with bad titles
 
 on:
   issues:
@@ -10,58 +10,83 @@ permissions:
 jobs:
   check-title:
     runs-on: ubuntu-latest
-    permissions:
-      issues: write
     steps:
-      - name: Close if title is empty or generic
+      - name: Flag or redirect issue
         uses: actions/github-script@v7
         with:
           script: |
             const title = context.payload.issue.title.trim();
-            const badTitles = [
-              "[bug]",
-              "bug report",
-              "bug",
-              "issue",
-            ];
-            
-            const featureRequestTitles = [
-              "feature request",
-              "[feature]",
-              "[feature request]",
-              "[enhancement]"
-            ]
-
             const titleLower = title.toLowerCase();
 
+            const badTitles = [
+              "[bug]", "bug report", "bug", "issue",
+              "help", "question", "test", "...", "untitled"
+            ];
+
+            const featureRequestTitles = [
+              "feature request", "[feature]", "[feature request]", "[enhancement]"
+            ];
+
             if (badTitles.includes(titleLower)) {
+              // Ensure the label exists
+              try {
+                await github.rest.issues.getLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  name: 'invalid-title',
+                });
+              } catch {
+                await github.rest.issues.createLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  name: 'invalid-title',
+                  color: 'e4e669',
+                  description: 'Issue title does not meet quality standards',
+                });
+              }
+
+              await github.rest.issues.addLabels({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.issue.number,
+                labels: ['invalid-title'],
+              });
+
               await github.rest.issues.createComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 issue_number: context.payload.issue.number,
-                body: "This issue was closed because no title was provided. Please re-open with a descriptive title that summarizes the problem."
+                body: [
+                  '## Invalid title',
+                  '',
+                  `Your issue title \`${title}\` is too generic to be actionable.`,
+                  '',
+                  'Please edit the title to something descriptive that summarizes the problem — for example:',
+                  '> _Map view crashes when zooming in on Safari 17_',
+                  '',
+                  '**This issue will be automatically closed in 24 hours if the title has not been updated.**',
+                ].join('\n'),
               });
 
-              await github.rest.issues.update({
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                issue_number: context.payload.issue.number,
-                state: "closed",
-                state_reason: "not_planned"
-              });
             } else if (featureRequestTitles.some(t => titleLower.startsWith(t))) {
               await github.rest.issues.createComment({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 issue_number: context.payload.issue.number,
-                body: "Feature requests should be made in the [Discussions](https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests) — not as issues. This issue has been closed."
+                body: [
+                  '## Wrong place for feature requests',
+                  '',
+                  'Feature requests should be submitted in [Discussions](https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests), not as issues.',
+                  '',
+                  'This issue has been closed. Feel free to re-submit your idea in the right place!',
+                ].join('\n'),
               });
 
               await github.rest.issues.update({
                 owner: context.repo.owner,
                 repo: context.repo.repo,
                 issue_number: context.payload.issue.number,
-                state: "closed",
-                state_reason: "not_planned"
+                state: 'closed',
+                state_reason: 'not_planned',
               });
-            }
+            }

.github/workflows/docker-dev.yml

@@ -0,0 +1,188 @@
+name: Build & Push Docker Image (Prerelease)
+
+on:
+  push:
+    branches: [dev]
+    paths-ignore:
+      - 'docs/**'
+      - '**/*.md'
+  workflow_dispatch:
+    inputs:
+      bump:
+        description: 'Bump line for next prerelease (auto detects in-flight major)'
+        type: choice
+        options: [auto, minor, major]
+        default: auto
+
+permissions:
+  contents: write
+
+concurrency:
+  group: prerelease-build
+  cancel-in-progress: false
+
+jobs:
+  version-bump:
+    runs-on: ubuntu-latest
+    outputs:
+      version: ${{ steps.bump.outputs.VERSION }}
+      sha: ${{ steps.bump.outputs.SHA }}
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Determine prerelease version
+        id: bump
+        run: |
+          git fetch --tags
+
+          # Capture the exact commit we're building so build/merge jobs are pinned to it
+          echo "SHA=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
+
+          # Get latest stable tag (exclude prerelease tags)
+          STABLE_TAG=$(git tag -l 'v[0-9]*.[0-9]*.[0-9]*' | grep -v '\-pre\.' | sort -V | tail -1)
+          STABLE="${STABLE_TAG#v}"
+          STABLE="${STABLE:-0.0.0}"
+          echo "Latest stable: $STABLE"
+
+          IFS='.' read -r MAJOR MINOR PATCH <<< "$STABLE"
+
+          # Detect any in-flight major prerelease (v(MAJOR+1).0.0-pre.*). Stay on that line if found.
+          NEXT_MAJOR="$((MAJOR + 1)).0.0"
+          MAJOR_PRE_EXISTS=$(git tag -l "v${NEXT_MAJOR}-pre.*" | head -1)
+
+          BUMP_INPUT="${{ github.event.inputs.bump || 'auto' }}"
+
+          if [ "$BUMP_INPUT" = "major" ] || { [ "$BUMP_INPUT" = "auto" ] && [ -n "$MAJOR_PRE_EXISTS" ]; }; then
+            TARGET="$NEXT_MAJOR"
+          else
+            TARGET="${MAJOR}.$((MINOR + 1)).0"
+          fi
+          echo "Target: $TARGET"
+
+          # Find the highest existing prerelease N for this target and increment
+          LAST_N=$(git tag -l "v${TARGET}-pre.*" | sed 's/.*-pre\.//' | sort -n | tail -1)
+          N=$(( ${LAST_N:-0} + 1 ))
+
+          NEW_VERSION="${TARGET}-pre.${N}"
+          echo "VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
+          echo "$STABLE → $NEW_VERSION"
+
+  build:
+    runs-on: ${{ matrix.runner }}
+    needs: version-bump
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - platform: linux/amd64
+            runner: ubuntu-latest
+          - platform: linux/arm64
+            runner: ubuntu-24.04-arm
+    steps:
+      - name: Prepare platform tag-safe name
+        run: echo "PLATFORM_PAIR=$(echo ${{ matrix.platform }} | sed 's|/|-|g')" >> $GITHUB_ENV
+
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ needs.version-bump.outputs.sha }}
+
+      - uses: docker/setup-buildx-action@v3
+
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Build and push by digest
+        id: build
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          platforms: ${{ matrix.platform }}
+          outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
+          no-cache: true
+          build-args: |
+            APP_VERSION=${{ needs.version-bump.outputs.version }}
+
+      - name: Export digest
+        run: |
+          mkdir -p /tmp/digests
+          digest="${{ steps.build.outputs.digest }}"
+          touch "/tmp/digests/${digest#sha256:}"
+
+      - name: Upload digest artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: digests-${{ env.PLATFORM_PAIR }}
+          path: /tmp/digests/*
+          if-no-files-found: error
+          retention-days: 1
+
+  merge:
+    runs-on: ubuntu-latest
+    needs: [version-bump, build]
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ needs.version-bump.outputs.sha }}
+          fetch-depth: 0
+          token: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Download build digests
+        uses: actions/download-artifact@v4
+        with:
+          path: /tmp/digests
+          pattern: digests-*
+          merge-multiple: true
+
+      - uses: docker/setup-buildx-action@v3
+
+      - uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Create and push multi-arch manifest
+        working-directory: /tmp/digests
+        run: |
+          VERSION="${{ needs.version-bump.outputs.version }}"
+          mapfile -t digests < <(printf 'mauriceboe/trek@sha256:%s\n' *)
+          MAJOR_TAG="$(echo "$VERSION" | cut -d. -f1)-pre"
+          docker buildx imagetools create \
+            -t "mauriceboe/trek:latest-pre" \
+            -t "mauriceboe/trek:$MAJOR_TAG" \
+            -t "mauriceboe/trek:$VERSION" \
+            "${digests[@]}"
+
+      - name: Inspect manifest
+        run: docker buildx imagetools inspect mauriceboe/trek:latest-pre
+
+      - name: Push git tag
+        run: |
+          VERSION="${{ needs.version-bump.outputs.version }}"
+          git config user.name "github-actions[bot]"
+          git config user.email "github-actions[bot]@users.noreply.github.com"
+          git tag "v$VERSION"
+          git push origin "v$VERSION"
+
+      - name: Clean up old prerelease tags
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          KEEP=20
+          VERSION="${{ needs.version-bump.outputs.version }}"
+          BASE_VERSION="$(echo "$VERSION" | sed 's/-pre\..*//')"
+          git fetch --tags
+          # Sort by numeric prerelease N (field after -pre.) to get correct ascending order
+          mapfile -t ALL_TAGS < <(git tag -l "v${BASE_VERSION}-pre.*" | awk -F'-pre\\.' '{print $2" "$0}' | sort -n | awk '{print $2}')
+          TOTAL=${#ALL_TAGS[@]}
+          DELETE_COUNT=$((TOTAL - KEEP))
+          if [ "$DELETE_COUNT" -gt 0 ]; then
+            for TAG in "${ALL_TAGS[@]:0:$DELETE_COUNT}"; do
+              echo "Deleting old prerelease tag: $TAG"
+              git push origin --delete "$TAG"
+            done
+          fi

.github/workflows/docker.yml

@@ -7,10 +7,24 @@ on:
       - 'docs/**'
       - '**/*.md'
   workflow_dispatch:
+    inputs:
+      bump:
+        description: 'Force bump line (auto = patch/finalize as today)'
+        type: choice
+        options: [auto, patch, minor, major]
+        default: auto
+      confirm_major:
+        description: "Type MAJOR (all caps) to confirm a major release"
+        type: string
+        default: ''
 
 permissions:
   contents: write
 
+concurrency:
+  group: stable-build
+  cancel-in-progress: false
+
 jobs:
   version-bump:
     runs-on: ubuntu-latest
@@ -20,48 +34,79 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
+          fetch-tags: true
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Determine bump type and update version
         id: bump
         run: |
-          # Check if this push is a merge commit from dev branch
-          COMMIT_MSG=$(git log -1 --pretty=%s)
-          PARENT_COUNT=$(git log -1 --pretty=%p | wc -w)
+          git fetch --tags
 
-          if echo "$COMMIT_MSG" | grep -qiE "^Merge (pull request|branch).*dev"; then
+          # Derive version from git tags — no package.json dependency
+          STABLE_TAG=$(git tag -l 'v[0-9]*.[0-9]*.[0-9]*' | grep -v '\-pre\.' | sort -V | tail -1)
+          STABLE="${STABLE_TAG#v}"
+          STABLE="${STABLE:-0.0.0}"
+
+          PRE_TAG=$(git tag -l 'v*-pre.*' | sort -V | tail -1)
+
+          BUMP_INPUT="${{ github.event.inputs.bump || 'auto' }}"
+          IFS='.' read -r MAJOR MINOR PATCH <<< "$STABLE"
+
+          if [ "$BUMP_INPUT" = "major" ]; then
+            if [ "${{ github.event.inputs.confirm_major }}" != "MAJOR" ]; then
+              echo "::error::confirm_major must equal 'MAJOR' to cut a major release"
+              exit 1
+            fi
+            NEW_VERSION="$((MAJOR + 1)).0.0"
+            BUMP="major"
+          elif [ "$BUMP_INPUT" = "minor" ]; then
+            NEW_VERSION="${MAJOR}.$((MINOR + 1)).0"
             BUMP="minor"
-          elif [ "$PARENT_COUNT" -gt 1 ] && git log -1 --pretty=%P | xargs -n1 git branch -r --contains 2>/dev/null | grep -q "origin/dev"; then
-            BUMP="minor"
-          else
+          elif [ "$BUMP_INPUT" = "patch" ]; then
+            NEW_VERSION="${MAJOR}.${MINOR}.$((PATCH + 1))"
             BUMP="patch"
+          else
+            # auto: finalize in-flight prerelease if one exists, else patch
+            if [ -n "$PRE_TAG" ]; then
+              PRE_BASE="${PRE_TAG#v}"
+              PRE_BASE="${PRE_BASE%-pre.*}"
+              PRE_MAJOR="$(echo "$PRE_BASE" | cut -d. -f1)"
+              # Refuse to auto-finalize a major bump — it bypasses confirm_major
+              if [ "$PRE_MAJOR" -gt "$MAJOR" ]; then
+                echo "::error::In-flight prerelease $PRE_TAG is a major bump ($STABLE → $PRE_BASE). Use bump=major with confirm_major=MAJOR to finalize."
+                exit 1
+              fi
+              # If prerelease base is strictly greater than stable, finalize it
+              HIGHEST=$(printf '%s\n' "$PRE_BASE" "$STABLE" | sort -V | tail -1)
+              if [ "$HIGHEST" = "$PRE_BASE" ] && [ "$PRE_BASE" != "$STABLE" ]; then
+                NEW_VERSION="$PRE_BASE"
+                BUMP="finalize"
+              else
+                PATCH=$((PATCH + 1))
+                NEW_VERSION="${MAJOR}.${MINOR}.${PATCH}"
+                BUMP="patch"
+              fi
+            else
+              PATCH=$((PATCH + 1))
+              NEW_VERSION="${MAJOR}.${MINOR}.${PATCH}"
+              BUMP="patch"
+            fi
           fi
 
           echo "Bump type: $BUMP"
-
-          # Read current version
-          CURRENT=$(node -p "require('./server/package.json').version")
-          IFS='.' read -r MAJOR MINOR PATCH <<< "$CURRENT"
-
-          if [ "$BUMP" = "minor" ]; then
-            MINOR=$((MINOR + 1))
-            PATCH=0
-          else
-            PATCH=$((PATCH + 1))
-          fi
-
-          NEW_VERSION="${MAJOR}.${MINOR}.${PATCH}"
           echo "VERSION=$NEW_VERSION" >> $GITHUB_OUTPUT
-          echo "$CURRENT → $NEW_VERSION ($BUMP)"
+          echo "$STABLE → $NEW_VERSION ($BUMP)"
 
-          # Update both package.json files
+          # Update package.json files and Helm chart
           cd server && npm version "$NEW_VERSION" --no-git-tag-version && cd ..
           cd client && npm version "$NEW_VERSION" --no-git-tag-version && cd ..
+          sed -i "s/^version: .*/version: $NEW_VERSION/" charts/trek/Chart.yaml
+          sed -i "s/^appVersion: .*/appVersion: \"$NEW_VERSION\"/" charts/trek/Chart.yaml
 
           # Commit and tag
           git config user.name "github-actions[bot]"
           git config user.email "github-actions[bot]@users.noreply.github.com"
-          git add server/package.json server/package-lock.json client/package.json client/package-lock.json
+          git add server/package.json server/package-lock.json client/package.json client/package-lock.json charts/trek/Chart.yaml
           git commit -m "chore: bump version to $NEW_VERSION [skip ci]"
           git tag "v$NEW_VERSION"
           git push origin main --follow-tags
@@ -100,6 +145,8 @@ jobs:
           platforms: ${{ matrix.platform }}
           outputs: type=image,name=mauriceboe/trek,push-by-digest=true,name-canonical=true,push=true
           no-cache: true
+          build-args: |
+            APP_VERSION=${{ needs.version-bump.outputs.version }}
 
       - name: Export digest
         run: |
@@ -140,14 +187,29 @@ jobs:
       - name: Create and push multi-arch manifest
         working-directory: /tmp/digests
         run: |
-          VERSION=${{ needs.version-bump.outputs.version }}
+          VERSION="${{ needs.version-bump.outputs.version }}"
           mapfile -t digests < <(printf 'mauriceboe/trek@sha256:%s\n' *)
+          MAJOR_TAG="$(echo "$VERSION" | cut -d. -f1)"
           docker buildx imagetools create \
-            -t mauriceboe/trek:latest \
-            -t mauriceboe/trek:$VERSION \
-            -t mauriceboe/nomad:latest \
-            -t mauriceboe/nomad:$VERSION \
+            -t "mauriceboe/trek:latest" \
+            -t "mauriceboe/trek:$MAJOR_TAG" \
+            -t "mauriceboe/trek:$VERSION" \
             "${digests[@]}"
 
       - name: Inspect manifest
         run: docker buildx imagetools inspect mauriceboe/trek:latest
+
+  release-helm:
+    runs-on: ubuntu-latest
+    needs: version-bump
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          ref: main
+
+      - name: Publish Helm chart
+        uses: stefanprodan/helm-gh-pages@v1.7.0
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          charts_dir: charts

.github/workflows/enforce-target-branch.yml

@@ -0,0 +1,104 @@
+name: Enforce PR Target Branch
+
+on:
+  pull_request_target:
+    types: [opened, reopened, edited, synchronize]
+
+jobs:
+  check-target:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+      contents: read
+
+    steps:
+      - name: Flag or clear wrong base branch
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const base = context.payload.pull_request.base.ref;
+            const labels = context.payload.pull_request.labels.map(l => l.name);
+            const prNumber = context.payload.pull_request.number;
+
+            // If the base was fixed, remove the label and let it through
+            if (base !== 'main') {
+              if (labels.includes('wrong-base-branch')) {
+                await github.rest.issues.removeLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: prNumber,
+                  name: 'wrong-base-branch',
+                });
+              }
+              return;
+            }
+
+            // Base is main — check if this user is a maintainer
+            let permission = 'none';
+            try {
+              const { data } = await github.rest.repos.getCollaboratorPermissionLevel({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                username: context.payload.pull_request.user.login,
+              });
+              permission = data.permission;
+            } catch (_) {
+              // User is not a collaborator — treat as 'none'
+            }
+
+            if (['admin', 'write'].includes(permission)) {
+              console.log(`User has '${permission}' permission, skipping.`);
+              return;
+            }
+
+            // Already labeled — avoid spamming on every push
+            if (labels.includes('wrong-base-branch')) {
+              core.setFailed("PR must target `dev`, not `main`.");
+              return;
+            }
+
+            // Ensure the label exists
+            try {
+              await github.rest.issues.getLabel({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: 'wrong-base-branch',
+              });
+            } catch (err) {
+              if (err.status === 404) {
+                await github.rest.issues.createLabel({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  name: 'wrong-base-branch',
+                  color: 'd73a4a',
+                  description: 'PR is targeting the wrong base branch',
+                });
+              }
+            }
+
+            await github.rest.issues.addLabels({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+              labels: ['wrong-base-branch'],
+            });
+
+            await github.rest.issues.createComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+              body: [
+                '## Wrong target branch',
+                '',
+                'This PR targets `main`, but contributions must go through `dev` first.',
+                '',
+                'To fix this, click **Edit** next to the PR title and change the base branch to `dev`.',
+                '',
+                '**This PR will be automatically closed in 24 hours if the base branch has not been updated.**',
+                '',
+                '> _If you need to merge directly to `main`, contact a maintainer._',
+              ].join('\n'),
+            });
+
+            core.setFailed("PR must target `dev`, not `main`.");

.github/workflows/test.yml

@@ -4,16 +4,12 @@ permissions:
   contents: read
 
 on:
-  push:
-    branches: [main, dev]
-    paths:
-      - 'server/**'
-      - '.github/workflows/test.yml'
   pull_request:
     branches: [main, dev]
     paths:
       - 'server/**'
       - '.github/workflows/test.yml'
+      - 'client/**'
 
 jobs:
   server-tests:
@@ -39,6 +35,33 @@ jobs:
         if: success()
         uses: actions/upload-artifact@v6
         with:
-          name: coverage
+          name: backend-coverage
           path: server/coverage/
           retention-days: 7
+
+  client-tests:
+    name: Client Tests
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: actions/setup-node@v6
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: client/package-lock.json
+
+      - name: Install dependencies
+        run: cd client && npm ci
+
+      - name: Run tests
+        run: cd client && npm run test:coverage
+
+      - name: Upload coverage
+        if: success()
+        uses: actions/upload-artifact@v6
+        with:
+          name: frontend-coverage
+          path: client/coverage/
+          retention-days: 7

.gitignore

@@ -57,4 +57,5 @@ coverage
 *.tsbuildinfo
 *.tgz
 
-.scannerwork
+.scannerwork
+test-data

CONTRIBUTING.md

@@ -9,6 +9,8 @@ Thanks for your interest in contributing! Please read these guidelines before op
 3. **No breaking changes** — Backwards compatibility is non-negotiable
 4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`
 5. **Match the existing style** — No reformatting, no linter config changes, no "while I'm here" cleanups
+6. **Tests** — Your changes must include tests. The project maintains 80%+ coverage; PRs that drop it will be closed
+7. **Branch up to date** — Your branch must be [up to date with `dev`](https://github.com/mauriceboe/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date) before submitting a PR
 
 ## Pull Requests
 
@@ -35,22 +37,9 @@ fix(maps): correct zoom level on Safari
 feat(budget): add CSV export for expenses
 ```
 
-## Development Setup
+## Development Environment
 
-```bash
-git clone https://github.com/mauriceboe/TREK.git
-cd TREK
-
-# Server
-cd server && npm install && npm run dev
-
-# Client (separate terminal)
-cd client && npm install && npm run dev
-```
-
-Server: `http://localhost:3001` | Client: `http://localhost:5173`
-
-On first run, check the server logs for the auto-generated admin credentials.
+See the [Developer Environment page](https://github.com/mauriceboe/TREK/wiki/Development-environment) for more information on setting up your development environment.
 
 ## More Details
 

Dockerfile

@@ -27,6 +27,8 @@ RUN mkdir -p /app/data/logs /app/uploads/files /app/uploads/covers /app/uploads/
 
 ENV NODE_ENV=production
 ENV PORT=3000
+ARG APP_VERSION=dev
+ENV APP_VERSION=${APP_VERSION}
 
 EXPOSE 3000
 

MCP.md

@@ -9,9 +9,14 @@ structured API.
 ## Table of Contents
 
 - [Setup](#setup)
+  - [Option A: OAuth 2.1 (recommended)](#option-a-oauth-21-recommended)
+  - [Option B: Static API Token (deprecated)](#option-b-static-api-token-deprecated)
+- [Authentication](#authentication)
+- [OAuth Scopes](#oauth-scopes)
 - [Limitations & Important Notes](#limitations--important-notes)
 - [Resources (read-only)](#resources-read-only)
 - [Tools (read-write)](#tools-read-write)
+- [Prompts](#prompts)
 - [Example](#example)
 
 ---
@@ -21,22 +26,51 @@ structured API.
 ### 1. Enable the MCP addon (admin)
 
 An administrator must first enable the MCP addon from the **Admin Panel > Addons** page. Until enabled, the `/mcp`
-endpoint returns `403 Forbidden` and the MCP section does not appear in user settings.
+endpoint returns `404` and the MCP section does not appear in user settings.
 
-### 2. Create an API token
+### 2. Connect your MCP client
 
-Once MCP is enabled, go to **Settings > MCP Configuration** and create an API token:
+#### Option A: OAuth 2.1 (recommended)
 
-1. Click **Create New Token**
-2. Give it a descriptive name (e.g. "Claude Desktop", "Work laptop")
-3. **Copy the token immediately** — it is shown only once and cannot be recovered
+MCP clients that support OAuth 2.1 (such as Claude Desktop via `mcp-remote`) authenticate automatically. No token
+management required — just provide the server URL:
 
-Each user can create up to **10 tokens**.
+```json
+{
+  "mcpServers": {
+    "trek": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://your-trek-instance.com/mcp"
+      ]
+    }
+  }
+}
+```
 
-### 3. Configure your MCP client
+> The path to `npx` may need to be adjusted for your system (e.g. `C:\PROGRA~1\nodejs\npx.cmd` on Windows).
 
-The Settings page shows a ready-to-copy client configuration snippet. For **Claude Desktop**, add the following to your
-`claude_desktop_config.json`:
+**What happens automatically:**
+1. The client fetches `/.well-known/oauth-authorization-server` to discover the TREK authorization server.
+2. The client registers itself via [Dynamic Client Registration (RFC 7591)](https://www.rfc-editor.org/rfc/rfc7591).
+3. Your browser opens TREK's consent screen, where you choose which scopes (permissions) to grant.
+4. The client receives a short-lived access token and a rotating refresh token — no re-authorization needed.
+
+> **Requirement:** The `APP_URL` environment variable must be set to your TREK instance's public URL for OAuth
+> discovery to work correctly.
+
+**For more control over scopes or to use confidential client mode**, pre-create an OAuth client in
+**Settings > Integrations > MCP > OAuth Clients** before connecting. Clients created there have a client secret
+(`trekcs_` prefix) and fixed scopes that you define up front.
+
+#### Option B: Static API Token (deprecated)
+
+> **Deprecated:** Static API tokens will stop working in a future version. Migrate to OAuth 2.1 above.
+
+1. Go to **Settings > Integrations > MCP** and create an API token.
+2. Click **Create New Token**, give it a name, and **copy the token immediately** — it is shown only once.
+3. Add it to your `claude_desktop_config.json`:
 
 ```json
 {
@@ -54,7 +88,65 @@ The Settings page shows a ready-to-copy client configuration snippet. For **Clau
 }
 ```
 
-> The path to `npx` may need to be adjusted for your system (e.g. `C:\PROGRA~1\nodejs\npx.cmd` on Windows).
+Static tokens grant full access to all tools and resources (no scope restrictions). Sessions authenticated with a
+static token will receive deprecation warnings in the AI client via server instructions and tool results.
+
+Each user can create up to **10 static tokens**.
+
+---
+
+## Authentication
+
+TREK's MCP server supports three authentication methods. OAuth 2.1 is the recommended path for all external clients.
+
+| Method | Token prefix | Access level | TTL | Notes |
+|--------|-------------|-------------|-----|-------|
+| **OAuth 2.1** | `trekoa_` | Scoped (per-consent) | 1 hour | Recommended. Automatically refreshed via 30-day rolling refresh tokens (`trekrf_` prefix). Replay-detected rotation — replayed tokens cascade-revoke the entire chain. |
+| **Static API token** | `trek_` | Full access | No expiry | **Deprecated.** Triggers deprecation warnings in AI clients. Will be removed in a future release. |
+| **Web session JWT** | — | Full access | Session-based | Used internally by the TREK web UI. Not intended for external clients. |
+
+All methods require the `Authorization: Bearer <token>` header (strict scheme enforcement — `Bearer` required).
+
+---
+
+## OAuth Scopes
+
+When connecting via OAuth 2.1, you grant specific scopes during the consent step. TREK registers only the MCP tools
+that match your granted scopes for that session.
+
+| Scope | Permission | Group |
+|-------|-----------|-------|
+| `trips:read` | View trips & itineraries | Trips |
+| `trips:write` | Edit trips & itineraries | Trips |
+| `trips:delete` | Delete trips (irreversible) | Trips |
+| `trips:share` | Manage share links | Trips |
+| `places:read` | View places & map data | Places |
+| `places:write` | Manage places | Places |
+| `atlas:read` | View Atlas | Atlas |
+| `atlas:write` | Manage Atlas | Atlas |
+| `packing:read` | View packing lists | Packing |
+| `packing:write` | Manage packing lists | Packing |
+| `todos:read` | View to-do lists | To-dos |
+| `todos:write` | Manage to-do lists | To-dos |
+| `budget:read` | View budget | Budget |
+| `budget:write` | Manage budget | Budget |
+| `reservations:read` | View reservations | Reservations |
+| `reservations:write` | Manage reservations | Reservations |
+| `collab:read` | View collaboration | Collaboration |
+| `collab:write` | Manage collaboration | Collaboration |
+| `notifications:read` | View notifications | Notifications |
+| `notifications:write` | Manage notifications | Notifications |
+| `vacay:read` | View vacation plans | Vacation |
+| `vacay:write` | Manage vacation plans | Vacation |
+| `geo:read` | Maps & geocoding | Geo |
+| `weather:read` | Weather forecasts | Weather |
+
+**Scope rules:**
+- A `:write` scope implies `:read` access for the same group (e.g. `budget:write` also grants budget read access).
+- Any `trips:*` scope (`trips:read`, `trips:write`, `trips:delete`, or `trips:share`) grants trip read access.
+- `list_trips` and `get_trip_summary` are **always available** regardless of scopes — they are navigation tools.
+- Static tokens and web session JWTs have full access to all tools (equivalent to all scopes).
+- Addon-gated tools (Atlas Extended, Collab, Vacay) require both the relevant scope **and** the addon to be enabled.
 
 ---
 
@@ -67,11 +159,15 @@ The Settings page shows a ready-to-copy client configuration snippet. For **Clau
 | **No image uploads**                    | Cover images cannot be set through MCP. Use the web UI to upload trip covers.                                                                    |
 | **Reservations are created as pending** | When the AI creates a reservation, it starts with `pending` status. You must confirm it manually or ask the AI to set the status to `confirmed`. |
 | **Demo mode restrictions**              | If TREK is running in demo mode, all write operations through MCP are blocked.                                                                   |
-| **Rate limiting**                       | 60 requests per minute per user. Exceeding this returns a `429` error.                                                                           |
-| **Session limits**                      | Maximum 5 concurrent MCP sessions per user. Sessions expire after 1 hour of inactivity.                                                          |
-| **Token limits**                        | Maximum 10 API tokens per user.                                                                                                                  |
-| **Token revocation**                    | Deleting a token immediately terminates all active MCP sessions for that user.                                                                   |
+| **Rate limiting**                       | 300 requests per minute per user (configurable via `MCP_RATE_LIMIT`). Exceeding this returns a `429` error.                                     |
+| **Per-client rate limiting**            | Rate limits are tracked per user-client pair, so each OAuth client has its own independent rate limit window.                                    |
+| **Session limits**                      | Maximum 20 concurrent MCP sessions per user (configurable via `MCP_MAX_SESSION_PER_USER`). Sessions expire after 1 hour of inactivity.          |
+| **Token limits**                        | Maximum 10 static API tokens per user. Maximum 10 OAuth clients per user.                                                                        |
+| **Token revocation**                    | Deleting a static token or revoking an OAuth session immediately terminates all active MCP sessions for that token/client.                       |
+| **OAuth scope enforcement**             | Only tools matching your granted OAuth scopes are registered in the session. Calling an out-of-scope tool returns an error.                      |
+| **Addon toggle invalidation**           | When an admin enables or disables an addon, all active MCP sessions are invalidated and must be re-established.                                  |
 | **Real-time sync**                      | Changes made through MCP are broadcast to all connected clients in real-time via WebSocket, just like changes made through the web UI.           |
+| **Addon-gated features**                | Some resources and tools are only available when the corresponding addon (Atlas, Collab, Vacay) is enabled by an admin.                          |
 
 ---
 
@@ -80,62 +176,108 @@ The Settings page shows a ready-to-copy client configuration snippet. For **Clau
 Resources provide read-only access to your TREK data. MCP clients can read these to understand the current state before
 making changes.
 
-| Resource          | URI                                        | Description                                               |
-|-------------------|--------------------------------------------|-----------------------------------------------------------|
-| Trips             | `trek://trips`                             | All trips you own or are a member of                      |
-| Trip Detail       | `trek://trips/{tripId}`                    | Single trip with metadata and member count                |
-| Days              | `trek://trips/{tripId}/days`               | Days of a trip with their assigned places                 |
-| Places            | `trek://trips/{tripId}/places`             | All places/POIs saved in a trip                           |
-| Budget            | `trek://trips/{tripId}/budget`             | Budget and expense items                                  |
-| Packing           | `trek://trips/{tripId}/packing`            | Packing checklist                                         |
-| Reservations      | `trek://trips/{tripId}/reservations`       | Flights, hotels, restaurants, etc.                        |
-| Day Notes         | `trek://trips/{tripId}/days/{dayId}/notes` | Notes for a specific day                                  |
-| Accommodations    | `trek://trips/{tripId}/accommodations`     | Hotels/rentals with check-in/out details                  |
-| Members           | `trek://trips/{tripId}/members`            | Owner and collaborators                                   |
-| Collab Notes      | `trek://trips/{tripId}/collab-notes`       | Shared collaborative notes                                |
-| Categories        | `trek://categories`                        | Available place categories (for use when creating places) |
-| Bucket List       | `trek://bucket-list`                       | Your personal travel bucket list                          |
-| Visited Countries | `trek://visited-countries`                 | Countries marked as visited in Atlas                      |
+### Core Resources
+
+| Resource              | URI                                             | Description                                                                           |
+|-----------------------|-------------------------------------------------|---------------------------------------------------------------------------------------|
+| Trips                 | `trek://trips`                                  | All trips you own or are a member of                                                  |
+| Trip Detail           | `trek://trips/{tripId}`                         | Single trip with metadata and member count                                            |
+| Days                  | `trek://trips/{tripId}/days`                    | Days of a trip with their assigned places                                             |
+| Places                | `trek://trips/{tripId}/places`                  | All places/POIs saved in a trip. Supports `?assignment=all\|unassigned\|assigned`     |
+| Budget                | `trek://trips/{tripId}/budget`                  | Budget and expense items                                                              |
+| Budget Per-Person     | `trek://trips/{tripId}/budget/per-person`       | Per-person totals and split breakdown                                                 |
+| Budget Settlement     | `trek://trips/{tripId}/budget/settlement`       | Suggested transactions to settle who owes whom                                        |
+| Packing               | `trek://trips/{tripId}/packing`                 | Packing checklist                                                                     |
+| Packing Bags          | `trek://trips/{tripId}/packing/bags`            | Packing bags with their assigned members                                              |
+| Reservations          | `trek://trips/{tripId}/reservations`            | Flights, hotels, restaurants, etc.                                                    |
+| Day Notes             | `trek://trips/{tripId}/days/{dayId}/notes`      | Notes for a specific day                                                              |
+| Accommodations        | `trek://trips/{tripId}/accommodations`          | Hotels/rentals with check-in/out details                                              |
+| Members               | `trek://trips/{tripId}/members`                 | Owner and collaborators                                                               |
+| Collab Notes          | `trek://trips/{tripId}/collab-notes`            | Shared collaborative notes                                                            |
+| Files                 | `trek://trips/{tripId}/files`                   | Files attached to a trip (excludes trashed files)                                     |
+| To-Dos                | `trek://trips/{tripId}/todos`                   | To-do items ordered by position                                                       |
+| Categories            | `trek://categories`                             | Available place categories (for use when creating places)                             |
+| Bucket List           | `trek://bucket-list`                            | Your personal travel bucket list                                                      |
+| Visited Countries     | `trek://visited-countries`                      | Countries marked as visited in Atlas                                                  |
+| Notifications         | `trek://notifications/in-app`                   | Your in-app notifications (most recent 50, unread first)                              |
+
+### Addon-Gated Resources
+
+These resources are only available when the corresponding addon is enabled by an admin.
+
+| Resource              | URI                                             | Addon    | Description                                                         |
+|-----------------------|-------------------------------------------------|----------|---------------------------------------------------------------------|
+| Atlas Stats           | `trek://atlas/stats`                            | Atlas    | Visited country counts and continent breakdown                      |
+| Atlas Regions         | `trek://atlas/regions`                          | Atlas    | Manually visited sub-country regions                                |
+| Collab Polls          | `trek://trips/{tripId}/collab/polls`            | Collab   | All polls for a trip with vote counts per option                    |
+| Collab Messages       | `trek://trips/{tripId}/collab/messages`         | Collab   | Most recent 100 chat messages for a trip                            |
+| Vacay Plan            | `trek://vacay/plan`                             | Vacay    | Full snapshot of your active vacation plan (members, years, config) |
+| Vacay Entries         | `trek://vacay/entries/{year}`                   | Vacay    | All vacation day entries for the active plan and a specific year    |
+| Vacay Holidays        | `trek://vacay/holidays/{year}`                  | Vacay    | Public holidays for the plan's configured region and year           |
 
 ---
 
 ## Tools (read-write)
 
-TREK exposes **34 tools** organized by feature area. Use `get_trip_summary` as a starting point — it returns everything
-about a trip in a single call.
+TREK exposes tools organized by feature area. Use `get_trip_summary` as a starting point — it returns everything about a
+trip in a single call.
 
 ### Trip Summary
 
-| Tool               | Description                                                                                                                                                                                              |
-|--------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| `get_trip_summary` | Full denormalized snapshot of a trip: metadata, members, days with assignments and notes, accommodations, budget totals, packing stats, reservations, and collab notes. Use this as your context loader. |
+| Tool               | Description                                                                                                                                                                                                           |
+|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `get_trip_summary` | Full denormalized snapshot of a trip: metadata, members, days with assignments and notes, accommodations, budget, packing, reservations, collab notes, to-dos, files, and poll/message counts. Use this as your context loader. |
 
 ### Trips
 
-| Tool          | Description                                                                                 |
-|---------------|---------------------------------------------------------------------------------------------|
-| `list_trips`  | List all trips you own or are a member of. Supports `include_archived` flag.                |
-| `create_trip` | Create a new trip with title, dates, currency. Days are auto-generated from the date range. |
-| `update_trip` | Update a trip's title, description, dates, or currency.                                     |
-| `delete_trip` | Delete a trip. **Owner only.**                                                              |
+| Tool                 | Description                                                                                 |
+|----------------------|---------------------------------------------------------------------------------------------|
+| `list_trips`         | List all trips you own or are a member of. Supports `include_archived` flag.                |
+| `create_trip`        | Create a new trip with title, dates, currency. Days are auto-generated from the date range. |
+| `update_trip`        | Update a trip's title, description, dates, or currency.                                     |
+| `delete_trip`        | Delete a trip. **Owner only.**                                                              |
+| `list_trip_members`  | List the owner and all collaborators of a trip.                                             |
+| `add_trip_member`    | Add a user to a trip by username or email. **Owner only.**                                  |
+| `remove_trip_member` | Remove a collaborator from a trip. **Owner only.**                                          |
+| `copy_trip`          | Duplicate a trip (days, places, itinerary, packing, budget, reservations). Packing items are reset to unchecked. |
+| `export_trip_ics`    | Export the trip itinerary and reservations as iCalendar (`.ics`) text for calendar apps.   |
+| `get_share_link`     | Get the current public share link for a trip and its permission flags.                      |
+| `create_share_link`  | Create or update the public share link with configurable visibility flags (map, bookings, packing, budget, collab). |
+| `delete_share_link`  | Revoke the public share link for a trip.                                                    |
 
 ### Places
 
-| Tool           | Description                                                                       |
-|----------------|-----------------------------------------------------------------------------------|
-| `create_place` | Add a place/POI with name, coordinates, address, category, notes, website, phone. |
-| `update_place` | Update any field of an existing place.                                            |
-| `delete_place` | Remove a place from a trip.                                                       |
+| Tool             | Description                                                                                      |
+|------------------|--------------------------------------------------------------------------------------------------|
+| `list_places`    | List places/POIs in a trip, optionally filtered by assignment status, category, tag, or search.  |
+| `create_place`   | Add a place/POI with name, coordinates, address, category, notes, website, phone, and optional `google_place_id` / `osm_id` for opening hours. |
+| `update_place`   | Update any field of an existing place including transport mode, timing, and price.               |
+| `delete_place`   | Remove a place from a trip.                                                                      |
+| `list_categories`| List all available place categories with id, name, icon and color.                              |
+| `search_place`   | Search for a real-world place by name or address. Returns `osm_id` and `google_place_id` for use in `create_place`. |
 
 ### Day Planning
 
-| Tool                      | Description                                                                   |
-|---------------------------|-------------------------------------------------------------------------------|
-| `assign_place_to_day`     | Pin a place to a specific day in the itinerary.                               |
-| `unassign_place`          | Remove a place assignment from a day.                                         |
-| `reorder_day_assignments` | Reorder places within a day by providing assignment IDs in the desired order. |
-| `update_assignment_time`  | Set start/end times for a place assignment (e.g. "09:00" – "11:30").          |
-| `update_day`              | Set or clear a day's title (e.g. "Arrival in Paris", "Free day").             |
+| Tool                        | Description                                                                          |
+|-----------------------------|--------------------------------------------------------------------------------------|
+| `update_day`                | Set or clear a day's title (e.g. "Arrival in Paris", "Free day").                   |
+| `create_day`                | Add a new day to a trip with optional date and notes.                                |
+| `delete_day`                | Delete a day from a trip.                                                            |
+| `assign_place_to_day`       | Pin a place to a specific day in the itinerary.                                      |
+| `unassign_place`            | Remove a place assignment from a day.                                                |
+| `reorder_day_assignments`   | Reorder places within a day by providing assignment IDs in the desired order.        |
+| `update_assignment_time`    | Set start/end times for a place assignment (e.g. "09:00" – "11:30"). Pass `null` to clear. |
+| `move_assignment`           | Move a place assignment to a different day.                                          |
+| `get_assignment_participants`| Get the list of users participating in a specific place assignment.                 |
+| `set_assignment_participants`| Set participants for a place assignment (replaces current list).                   |
+
+### Accommodations
+
+| Tool                   | Description                                                                              |
+|------------------------|------------------------------------------------------------------------------------------|
+| `create_accommodation` | Add an accommodation (hotel, Airbnb, etc.) linked to a place and a check-in/out date range. |
+| `update_accommodation` | Update fields on an existing accommodation (dates, times, confirmation, notes).          |
+| `delete_accommodation` | Delete an accommodation record from a trip.                                              |
 
 ### Reservations
 
@@ -144,32 +286,89 @@ about a trip in a single call.
 | `create_reservation`       | Create a pending reservation. Supports flights, hotels, restaurants, trains, cars, cruises, events, tours, activities, and other types. Hotels can be linked to places and check-in/out days. |
 | `update_reservation`       | Update any field including status (`pending` / `confirmed` / `cancelled`).                                                                                                                    |
 | `delete_reservation`       | Delete a reservation and its linked accommodation record if applicable.                                                                                                                       |
+| `reorder_reservations`     | Update the display order of reservations within a day.                                                                                                                                        |
 | `link_hotel_accommodation` | Set or update a hotel reservation's check-in/out day links and associated place.                                                                                                              |
 
 ### Budget
 
-| Tool                 | Description                                                  |
-|----------------------|--------------------------------------------------------------|
-| `create_budget_item` | Add an expense with name, category, and price.               |
-| `update_budget_item` | Update an expense's details, split (persons/days), or notes. |
-| `delete_budget_item` | Remove a budget item.                                        |
+| Tool                       | Description                                                                           |
+|----------------------------|---------------------------------------------------------------------------------------|
+| `create_budget_item`       | Add an expense with name, category, and price.                                        |
+| `update_budget_item`       | Update an expense's details, split (persons/days), or notes.                          |
+| `delete_budget_item`       | Remove a budget item.                                                                 |
+| `set_budget_item_members`  | Set which trip members are splitting a budget item (replaces current member list).    |
+| `toggle_budget_member_paid`| Mark or unmark a member as having paid their share of a budget item.                  |
 
 ### Packing
 
-| Tool                  | Description                                                  |
-|-----------------------|--------------------------------------------------------------|
-| `create_packing_item` | Add an item to the packing checklist with optional category. |
-| `update_packing_item` | Rename an item or change its category.                       |
-| `toggle_packing_item` | Check or uncheck a packing item.                             |
-| `delete_packing_item` | Remove a packing item.                                       |
+| Tool                          | Description                                                                       |
+|-------------------------------|-----------------------------------------------------------------------------------|
+| `create_packing_item`         | Add an item to the packing checklist with optional category.                      |
+| `update_packing_item`         | Rename an item or change its category.                                            |
+| `toggle_packing_item`         | Check or uncheck a packing item.                                                  |
+| `delete_packing_item`         | Remove a packing item.                                                            |
+| `reorder_packing_items`       | Set the display order of packing items within a trip.                             |
+| `bulk_import_packing`         | Import multiple packing items at once from a list (with optional quantity).       |
+| `apply_packing_template`      | Apply a saved packing template to a trip (adds items from the template).          |
+| `save_packing_template`       | Save the current packing list as a reusable template.                             |
+| `list_packing_bags`           | List all packing bags for a trip.                                                 |
+| `create_packing_bag`          | Create a new packing bag (e.g. "Carry-on", "Checked bag").                        |
+| `update_packing_bag`          | Rename or recolor a packing bag.                                                  |
+| `delete_packing_bag`          | Delete a packing bag (items are unassigned, not deleted).                         |
+| `set_bag_members`             | Assign trip members to a packing bag.                                             |
+| `get_packing_category_assignees` | Get which trip members are assigned to each packing category.                 |
+| `set_packing_category_assignees` | Assign trip members to a packing category.                                    |
 
 ### Day Notes
 
-| Tool              | Description                                                           |
-|-------------------|-----------------------------------------------------------------------|
-| `create_day_note` | Add a note to a specific day with optional time label and emoji icon. |
-| `update_day_note` | Edit a day note's text, time, or icon.                                |
-| `delete_day_note` | Remove a note from a day.                                             |
+| Tool              | Description                                                            |
+|-------------------|------------------------------------------------------------------------|
+| `create_day_note` | Add a note to a specific day with optional time label and emoji icon.  |
+| `update_day_note` | Edit a day note's text, time, or icon.                                 |
+| `delete_day_note` | Remove a note from a day.                                              |
+
+### To-Dos
+
+| Tool                          | Description                                                                                       |
+|-------------------------------|---------------------------------------------------------------------------------------------------|
+| `list_todos`                  | List all to-do items for a trip, ordered by position.                                             |
+| `create_todo`                 | Create a to-do item with name, category, due date, description, assignee, and priority.           |
+| `update_todo`                 | Update an existing to-do item. Pass `null` to clear nullable fields.                              |
+| `toggle_todo`                 | Mark a to-do item as done or undone.                                                              |
+| `delete_todo`                 | Delete a to-do item.                                                                              |
+| `reorder_todos`               | Reorder to-do items within a trip by providing a new ordered list of IDs.                         |
+| `get_todo_category_assignees` | Get the default assignees configured per to-do category for a trip.                               |
+| `set_todo_category_assignees` | Set default assignees for a to-do category. Pass an empty array to clear.                         |
+
+### Tags
+
+| Tool         | Description                                                              |
+|--------------|--------------------------------------------------------------------------|
+| `list_tags`  | List all tags belonging to the current user.                             |
+| `create_tag` | Create a new tag (user-scoped label for places) with optional hex color. |
+| `update_tag` | Update the name or color of an existing tag.                             |
+| `delete_tag` | Delete a tag (removes it from all places it was attached to).            |
+
+### Notifications
+
+| Tool                            | Description                                          |
+|---------------------------------|------------------------------------------------------|
+| `list_notifications`            | List in-app notifications with pagination and unread filter. |
+| `get_unread_notification_count` | Get the count of unread in-app notifications.        |
+| `mark_notification_read`        | Mark a single notification as read.                  |
+| `mark_notification_unread`      | Mark a single notification as unread.                |
+| `mark_all_notifications_read`   | Mark all notifications as read.                      |
+
+### Maps & Weather
+
+| Tool                  | Description                                                                                         |
+|-----------------------|-----------------------------------------------------------------------------------------------------|
+| `search_place`        | Search for a real-world place by name/address and get coordinates, `osm_id`, and `google_place_id`. |
+| `get_place_details`   | Fetch detailed information (hours, photos, ratings) about a place by its Google Place ID.           |
+| `reverse_geocode`     | Get a human-readable address for given coordinates.                                                 |
+| `resolve_maps_url`    | Resolve a Google Maps share URL to coordinates and place name.                                      |
+| `get_weather`         | Get weather forecast for a location and date.                                                       |
+| `get_detailed_weather`| Get hourly/detailed weather forecast for a location and date.                                       |
 
 ### Collab Notes
 
@@ -177,7 +376,21 @@ about a trip in a single call.
 |----------------------|-------------------------------------------------------------------------------------------------|
 | `create_collab_note` | Create a shared note visible to all trip members. Supports title, content, category, and color. |
 | `update_collab_note` | Edit a collab note's content, category, color, or pin status.                                   |
-| `delete_collab_note` | Delete a collab note and its associated files.                                                  |
+| `delete_collab_note` | Delete a collab note.                                                                           |
+
+### Collab Polls & Chat _(Collab addon required)_
+
+| Tool                  | Description                                                                              |
+|-----------------------|------------------------------------------------------------------------------------------|
+| `list_collab_polls`   | List all polls for a trip.                                                               |
+| `create_collab_poll`  | Create a new poll with a question, options, optional multiple choice, and deadline.      |
+| `vote_collab_poll`    | Vote on a poll option (or remove vote if already voted).                                 |
+| `close_collab_poll`   | Close a poll so no more votes can be cast.                                               |
+| `delete_collab_poll`  | Delete a poll and all its votes.                                                         |
+| `list_collab_messages`| List chat messages for a trip (most recent 100, supports pagination via `before`).       |
+| `send_collab_message` | Send a chat message to a trip's collab channel, with optional reply threading.           |
+| `delete_collab_message`| Delete a chat message (own messages only).                                              |
+| `react_collab_message`| Toggle a reaction emoji on a chat message.                                               |
 
 ### Bucket List
 
@@ -188,10 +401,61 @@ about a trip in a single call.
 
 ### Atlas
 
-| Tool                     | Description                                                                    |
-|--------------------------|--------------------------------------------------------------------------------|
+| Tool                     | Description                                                                     |
+|--------------------------|---------------------------------------------------------------------------------|
 | `mark_country_visited`   | Mark a country as visited using its ISO 3166-1 alpha-2 code (e.g. "FR", "JP"). |
-| `unmark_country_visited` | Remove a country from your visited list.                                       |
+| `unmark_country_visited` | Remove a country from your visited list.                                        |
+
+### Atlas Extended _(Atlas addon required)_
+
+| Tool                       | Description                                                                  |
+|----------------------------|------------------------------------------------------------------------------|
+| `get_atlas_stats`          | Get atlas statistics — visited country counts, region counts, continent breakdown. |
+| `list_visited_regions`     | List all manually visited sub-country regions for the current user.          |
+| `mark_region_visited`      | Mark a sub-country region as visited (e.g. ISO code "US-CA").                |
+| `unmark_region_visited`    | Remove a region from the visited list.                                       |
+| `get_country_atlas_places` | Get places saved in the user's atlas for a specific country.                 |
+| `update_bucket_list_item`  | Update a bucket list item (name, notes, coordinates, target date).           |
+
+### Vacay _(Vacay addon required)_
+
+| Tool                       | Description                                                                           |
+|----------------------------|---------------------------------------------------------------------------------------|
+| `get_vacay_plan`           | Get the current user's active vacation plan (own or joined).                          |
+| `update_vacay_plan`        | Update vacation plan settings (weekend blocking, holidays, carry-over).               |
+| `set_vacay_color`          | Set the current user's color in the vacation plan calendar.                           |
+| `get_available_vacay_users`| List users who can be invited to the current vacation plan.                           |
+| `send_vacay_invite`        | Invite a user to join the vacation plan by their user ID.                             |
+| `accept_vacay_invite`      | Accept a pending invitation to join another user's vacation plan.                     |
+| `decline_vacay_invite`     | Decline a pending vacation plan invitation.                                           |
+| `cancel_vacay_invite`      | Cancel an outgoing invitation (owner cancels an invite they sent).                    |
+| `dissolve_vacay_plan`      | Dissolve the shared plan — all members return to their own individual plan.           |
+| `list_vacay_years`         | List calendar years tracked in the current vacation plan.                             |
+| `add_vacay_year`           | Add a calendar year to the vacation plan.                                             |
+| `delete_vacay_year`        | Remove a calendar year from the vacation plan.                                        |
+| `get_vacay_entries`        | Get all vacation day entries for the active plan and a specific year.                 |
+| `toggle_vacay_entry`       | Toggle a day on or off as a vacation day for the current user.                        |
+| `toggle_company_holiday`   | Toggle a date as a company holiday for the whole plan.                                |
+| `get_vacay_stats`          | Get vacation statistics for a specific year (days used, remaining, carried over).     |
+| `update_vacay_stats`       | Update the vacation day allowance for a specific user and year.                       |
+| `add_holiday_calendar`     | Add a public holiday calendar (by region code) to the vacation plan.                  |
+| `update_holiday_calendar`  | Update label or color for a holiday calendar.                                         |
+| `delete_holiday_calendar`  | Remove a holiday calendar from the vacation plan.                                     |
+| `list_holiday_countries`   | List countries available for public holiday calendars.                                |
+| `list_holidays`            | List public holidays for a country and year.                                          |
+
+---
+
+## Prompts
+
+MCP prompts are pre-built context loaders your AI client can invoke to get a structured starting point for common tasks.
+
+| Prompt               | Description                                                                     |
+|----------------------|---------------------------------------------------------------------------------|
+| `trip-summary`       | Load a formatted summary of a trip (dates, members, days, budget, packing, reservations) before planning or modifying it. |
+| `packing-list`       | Get a formatted packing checklist for a trip, grouped by category.              |
+| `budget-overview`    | Get a formatted budget summary with totals by category and per-person cost.     |
+| `token_auth_notice`  | Static token deprecation notice and migration guide. Only available in sessions authenticated with a legacy `trek_` token. |
 
 ---
 
@@ -231,4 +495,4 @@ of everything that was added.
 
 PDF of the generated trip: [./docs/TREK-Generated-by-MCP.pdf](./docs/TREK-Generated-by-MCP.pdf)
 
-![trip](./docs/screenshot-trip-mcp.png)
+![trip](./docs/screenshot-trip-mcp.png)

README.md

@@ -9,7 +9,7 @@
 </p>
 
 <p align="center">
-  <a href="https://discord.gg/J27gr9GH"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Discord" /></a>
+  <a href="https://discord.gg/NhZBDSd4qW"><img src="https://img.shields.io/badge/Discord-Join%20Community-5865F2?logo=discord&logoColor=white" alt="Discord" /></a>
   <a href="LICENSE"><img src="https://img.shields.io/badge/License-AGPL_v3-blue.svg" alt="License: AGPL v3" /></a>
   <a href="https://hub.docker.com/r/mauriceboe/trek"><img src="https://img.shields.io/docker/pulls/mauriceboe/trek" alt="Docker Pulls" /></a>
   <a href="https://github.com/mauriceboe/TREK"><img src="https://img.shields.io/github/stars/mauriceboe/TREK" alt="GitHub Stars" /></a>
@@ -32,7 +32,7 @@
 |---|---|
 | ![Plan Detail](docs/screenshot-plan-detail.png) | ![Bookings](docs/screenshot-bookings.png) |
 | ![Budget](docs/screenshot-budget.png) | ![Packing List](docs/screenshot-packing.png) |
-| ![Files](docs/screenshot-files.png) | |
+| ![Collab](docs/screenshot-collab.png) | |
 
 </details>
 
@@ -76,10 +76,17 @@
 - **Collab** — Chat with your group, share notes, create polls, and track who's signed up for each day's activities
 - **Dashboard Widgets** — Currency converter and timezone clock, toggleable per user
 
+### AI / MCP Integration
+- **MCP Server** — Built-in [Model Context Protocol](MCP.md) server with OAuth 2.1 authentication exposes 80+ tools and 27 resources so AI assistants (Claude, Cursor, etc.) can read and modify your trips
+- **Granular Scopes** — 24 OAuth scopes across 13 permission groups let you control exactly what data your AI client can access
+- **Full Trip Automation** — AI can create trips, plan itineraries, build packing lists, manage budgets, send collab messages, mark countries visited, and more in a single conversation
+- **Prompts** — Pre-built `trip-summary`, `packing-list`, and `budget-overview` prompts give AI clients instant structured context
+- **Addon-Aware** — Atlas, Collab, and Vacay features are exposed automatically when those addons are enabled
+
 ### Customization & Admin
 - **Dashboard Views** — Toggle between card grid and compact list view on the My Trips page
 - **Dark Mode** — Full light and dark theme with dynamic status bar color matching
-- **Multilingual** — English, German, Spanish, French, Russian, Chinese (Simplified), Dutch, Arabic (with RTL support)
+- **Multilingual** — English, German, Spanish, French, Russian, Chinese (Simplified), Dutch, Indonesian, Arabic (with RTL support)
 - **Admin Panel** — User management, invite links, packing templates, global categories, addon management, API keys, backups, and GitHub release history
 - **Auto-Backups** — Scheduled backups with configurable interval and retention
 - **Customizable** — Temperature units, time format (12h/24h), map tile sources, default coordinates
@@ -91,11 +98,23 @@
 - **PWA**: vite-plugin-pwa + Workbox
 - **Real-Time**: WebSocket (`ws`)
 - **State**: Zustand
-- **Auth**: JWT + OIDC + TOTP (MFA)
+- **Auth**: JWT + OAuth 2.1 + OIDC + TOTP (MFA)
 - **Maps**: Leaflet + react-leaflet-cluster + Google Places API (optional)
 - **Weather**: Open-Meteo API (free, no key required)
 - **Icons**: lucide-react
 
+## Helm (Kubernetes)
+
+A hosted Helm repository is available:
+
+```sh
+helm repo add trek https://mauriceboe.github.io/TREK
+helm repo update
+helm install trek trek/trek
+```
+
+See [`charts/README.md`](charts/README.md) for configuration options.
+
 ## Quick Start
 
 ```bash
@@ -142,17 +161,18 @@ services:
       - ENCRYPTION_KEY=${ENCRYPTION_KEY:-} # Recommended. Generate with: openssl rand -hex 32. If unset, falls back to data/.jwt_secret (existing installs) or auto-generates a key (fresh installs).
       - TZ=${TZ:-UTC} # Timezone for logs, reminders and scheduled tasks (e.g. Europe/Berlin)
       - LOG_LEVEL=${LOG_LEVEL:-info} # info = concise user actions; debug = verbose admin-level details
+      # - DEFAULT_LANGUAGE=en # Default language on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback. Supported: de, en, es, fr, hu, nl, br, cs, pl, ru, zh, zh-TW, it, ar
       - ALLOWED_ORIGINS=${ALLOWED_ORIGINS:-} # Comma-separated origins for CORS and email notification links
-      - FORCE_HTTPS=true # Redirect HTTP to HTTPS when behind a TLS-terminating proxy
-      # - COOKIE_SECURE=false # Uncomment if accessing over plain HTTP (no HTTPS). Not recommended for production.
-      - TRUST_PROXY=1 # Number of trusted proxies for X-Forwarded-For
+      # - FORCE_HTTPS=true # Optional. Enables HTTPS redirect, HSTS, CSP upgrade-insecure-requests, and secure cookies behind a TLS proxy
+      # - COOKIE_SECURE=false # Escape hatch: force session cookies over plain HTTP even in production. Not recommended.
+      # - TRUST_PROXY=1 # Trusted proxy count for X-Forwarded-For / X-Forwarded-Proto. Required for FORCE_HTTPS to work.
       # - ALLOW_INTERNAL_NETWORK=true # Uncomment if Immich or other services are on your local network (RFC-1918 IPs)
       - APP_URL=${APP_URL:-} # Base URL of this instance — required when OIDC is enabled; must match the redirect URI registered with your IdP; Also used as the base URL for email notifications and other external links
       # - OIDC_ISSUER=https://auth.example.com # OpenID Connect provider URL
       # - OIDC_CLIENT_ID=trek # OpenID Connect client ID
       # - OIDC_CLIENT_SECRET=supersecret # OpenID Connect client secret
       # - OIDC_DISPLAY_NAME=SSO # Label shown on the SSO login button
-      # - OIDC_ONLY=false # Set to true to disable local password auth entirely (SSO only)
+      # - OIDC_ONLY=false # Set to true to force SSO-only login (disables password login and registration). Equivalent to toggling those off in Admin > Settings, but takes priority over any DB setting and cannot be changed at runtime.
       # - OIDC_ADMIN_CLAIM=groups # OIDC claim used to identify admin users
       # - OIDC_ADMIN_VALUE=app-trek-admins # Value of the OIDC claim that grants admin role
       # - OIDC_SCOPE=openid email profile # Fully overrides the default. Add extra scopes as needed (e.g. add groups if using OIDC_ADMIN_CLAIM)
@@ -160,7 +180,8 @@ services:
       # - DEMO_MODE=false # Enable demo mode (resets data hourly)
       # - ADMIN_EMAIL=admin@trek.local # Initial admin e-mail — only used on first boot when no users exist
       # - ADMIN_PASSWORD=changeme      # Initial admin password — only used on first boot when no users exist
-      # - MCP_RATE_LIMIT=60 # Max MCP API requests per user per minute (default: 60)
+      # - MCP_RATE_LIMIT=300 # Max MCP API requests per user per minute (default: 300)
+      # - MCP_MAX_SESSION_PER_USER=20 # Max concurrent MCP sessions per user (default: 20)
     volumes:
       - ./data:/app/data
       - ./uploads:/app/uploads
@@ -173,6 +194,14 @@ services:
       start_period: 15s
 ```
 
+This example is aimed at reverse-proxy deployments where nginx, Caddy, Traefik, or a similar proxy terminates TLS in front of TREK. The three HTTPS-related variables work together:
+
+- **`FORCE_HTTPS`** is 100% optional. When set to `true` it does four things: adds an HTTP-to-HTTPS 301 redirect, sends an HSTS header (`max-age=31536000`), adds the CSP `upgrade-insecure-requests` directive, and forces the session cookie `secure` flag on. It only makes sense behind a TLS-terminating proxy.
+- **`TRUST_PROXY`** tells Express how many proxies sit in front of TREK so it can read the real client IP from `X-Forwarded-For` and the protocol from `X-Forwarded-Proto`. Without it, `FORCE_HTTPS` redirects will loop because Express never sees the request as secure. In production (`NODE_ENV=production`) this defaults to `1` automatically; in development it is off unless explicitly set.
+- **`COOKIE_SECURE`** is normally auto-derived — the session cookie is marked `secure` whenever `NODE_ENV=production` or `FORCE_HTTPS=true`. Setting `COOKIE_SECURE=false` is an escape hatch that disables the `secure` flag even in production (e.g. testing over plain HTTP on a LAN). Do not disable it in real deployments.
+
+If you access TREK directly on `http://<host>:3000` with no reverse proxy, leave `FORCE_HTTPS` unset (or remove it) and remove `TRUST_PROXY` to avoid redirect loops to a non-existent HTTPS endpoint.
+
 ```bash
 docker compose up -d
 ```
@@ -244,6 +273,9 @@ server {
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_read_timeout 86400;
+        # File uploads are capped at 50 MB; backup restore ZIPs can include the full
+        # uploads directory and may exceed that — raise this value if restores fail.
+        client_max_body_size 500m;
     }
 
     location / {
@@ -281,10 +313,11 @@ trek.yourdomain.com {
 | `ENCRYPTION_KEY` | At-rest encryption key for stored secrets (API keys, MFA, SMTP, OIDC). Recommended: generate with `openssl rand -hex 32`. If unset, falls back to `data/.jwt_secret` (existing installs) or auto-generates a key (fresh installs). | Auto |
 | `TZ` | Timezone for logs, reminders and cron jobs (e.g. `Europe/Berlin`) | `UTC` |
 | `LOG_LEVEL` | `info` = concise user actions, `debug` = verbose details | `info` |
+| `DEFAULT_LANGUAGE` | Default language shown on the login page for users with no saved preference. Browser/OS language is auto-detected first; this is the fallback when no match is found. Supported values: `de`, `en`, `es`, `fr`, `hu`, `nl`, `br`, `cs`, `pl`, `ru`, `zh`, `zh-TW`, `it`, `ar` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
-| `FORCE_HTTPS` | Redirect HTTP to HTTPS behind a TLS-terminating proxy | `false` |
-| `COOKIE_SECURE` | Set to `false` to allow session cookies over plain HTTP (e.g. accessing via IP without HTTPS). Defaults to `true` in production. **Not recommended to disable in production.** | `true` |
-| `TRUST_PROXY` | Number of trusted reverse proxies for `X-Forwarded-For` | `1` |
+| `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS (`max-age=31536000`), adds CSP `upgrade-insecure-requests`, and forces the session cookie `secure` flag. Only useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY` to be set so Express can detect the forwarded protocol. | `false` |
+| `COOKIE_SECURE` | Controls the `secure` flag on the `trek_session` cookie. Auto-derived: secure is on when `NODE_ENV=production` **or** `FORCE_HTTPS=true`. Set to `false` as an escape hatch to allow session cookies over plain HTTP (e.g. LAN testing without TLS). **Not recommended to disable in production.** | auto (`true` in production) |
+| `TRUST_PROXY` | Number of trusted reverse proxies. Tells Express to read client IP from `X-Forwarded-For` and protocol from `X-Forwarded-Proto`. Activates automatically in production (defaults to `1`); off in development unless explicitly set. Must be set for `FORCE_HTTPS` redirects to work correctly. | `1` (when active) |
 | `ALLOW_INTERNAL_NETWORK` | Allow outbound requests to private/RFC-1918 IP addresses. Set to `true` if Immich or other integrated services are hosted on your local network. Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) are always blocked regardless of this setting. | `false` |
 | `APP_URL` | Public base URL of this instance (e.g. `https://trek.example.com`). Required when OIDC is enabled — must match the redirect URI registered with your IdP. Also used as the base URL for external links in email notifications. | — |
 | **OIDC / SSO** | | |
@@ -292,7 +325,7 @@ trek.yourdomain.com {
 | `OIDC_CLIENT_ID` | OIDC client ID | — |
 | `OIDC_CLIENT_SECRET` | OIDC client secret | — |
 | `OIDC_DISPLAY_NAME` | Label shown on the SSO login button | `SSO` |
-| `OIDC_ONLY` | Disable local password auth entirely (first SSO login becomes admin) | `false` |
+| `OIDC_ONLY` | Force SSO-only mode: disables password login and password registration, regardless of the granular toggles in Admin > Settings. The first SSO login becomes admin. Use when you want this enforced at the infrastructure level and not overridable via the UI. | `false` |
 | `OIDC_ADMIN_CLAIM` | OIDC claim used to identify admin users | — |
 | `OIDC_ADMIN_VALUE` | Value of the OIDC claim that grants admin role | — |
 | `OIDC_SCOPE` | Space-separated OIDC scopes to request. **Fully replaces** the default — always include `openid email profile` plus any extra scopes you need (e.g. add `groups` when using `OIDC_ADMIN_CLAIM`) | `openid email profile` |
@@ -302,7 +335,8 @@ trek.yourdomain.com {
 | `ADMIN_PASSWORD` | Password for the first admin account created on initial boot. Must be set together with `ADMIN_EMAIL`. | random |
 | **Other** | | |
 | `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
-| `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `60` |
+| `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `300` |
+| `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user | `20` |
 
 ## Optional API Keys
 

charts/README.md

@@ -10,8 +10,20 @@ This is a minimal Helm chart for deploying the TREK app.
 - Optional generic Ingress support
 - Health checks on `/api/health`
 
+## Helm Repository
+
+A hosted Helm repository is available:
+
+```sh
+helm repo add trek https://mauriceboe.github.io/TREK
+helm repo update
+helm install trek trek/trek
+```
+
 ## Usage
 
+Or install directly from the local chart:
+
 ```sh
 helm install trek ./chart \
   --set ingress.enabled=true \
@@ -32,5 +44,7 @@ See `values.yaml` for more options.
 - `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
 - If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
 - Set `env.ALLOW_INTERNAL_NETWORK: "true"` if Immich or other integrated services are hosted on a private/RFC-1918 address (e.g. a pod on the same cluster or a NAS on your LAN). Loopback (`127.x`) and link-local/metadata addresses (`169.254.x`) remain blocked regardless.
-- Set `env.COOKIE_SECURE: "false"` only if your deployment has no TLS (e.g. during local testing without ingress). Session cookies require HTTPS in all other cases.
+- `FORCE_HTTPS` is optional. Set `env.FORCE_HTTPS: "true"` only when ingress (or another proxy) terminates TLS. It enables HTTPS redirects, HSTS, CSP `upgrade-insecure-requests`, and forces the session cookie `secure` flag. Requires `TRUST_PROXY` to be set.
+- Set `env.TRUST_PROXY: "1"` (or the number of proxy hops) when running behind ingress or a load balancer. Required for `FORCE_HTTPS` to detect the forwarded protocol correctly. In production it defaults to `1` automatically.
+- `COOKIE_SECURE` is auto-derived (on when `NODE_ENV=production` or `FORCE_HTTPS=true`). Set `env.COOKIE_SECURE: "false"` only during local testing without TLS. **Not recommended for production.**
 - Set `env.OIDC_DISCOVERY_URL` to override the auto-constructed OIDC discovery endpoint. Required for providers (e.g. Authentik) that expose it at a non-standard path.

charts/trek/Chart.yaml

@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 0.1.0
+version: 2.9.14
 description: Minimal Helm chart for TREK app
-appVersion: "latest"
+appVersion: "2.9.14"

charts/trek/templates/deployment.yaml

@@ -27,7 +27,7 @@ spec:
         fsGroup: 1000
       containers:
         - name: trek
-          image: "{{ .Values.image.repository }}:{{ .Values.image.tag }}"
+          image: "{{ .Values.image.repository }}:{{ .Values.image.tag | default .Chart.AppVersion }}"
           imagePullPolicy: {{ .Values.image.pullPolicy }}
           {{- with .Values.resources }}
           resources:

charts/trek/values.yaml

@@ -1,7 +1,7 @@
 
 image:
   repository: mauriceboe/trek
-  tag: latest
+  # tag: latest
   pullPolicy: IfNotPresent
 
 # Optional image pull secrets for private registries
@@ -19,17 +19,21 @@ env:
   # Timezone for logs, reminders, and cron jobs (e.g. Europe/Berlin).
   # LOG_LEVEL: "info"
   # "info" = concise user actions, "debug" = verbose details.
+  # DEFAULT_LANGUAGE: "en"
+  # Default language on the login page for users with no saved preference.
+  # Browser/OS language is auto-detected first; this is the fallback when no match is found.
+  # Supported: de, en, es, fr, hu, nl, br, cs, pl, ru, zh, zh-TW, it, ar
   # ALLOWED_ORIGINS: ""
   # NOTE: If using ingress, ensure env.ALLOWED_ORIGINS matches the domains in ingress.hosts for proper CORS configuration.
   # APP_URL: "https://trek.example.com"
   # Public base URL of this instance. Required when OIDC is enabled — must match the redirect URI registered with your IdP.
   # Also used as the base URL for links in email notifications and other external links.
   # FORCE_HTTPS: "false"
-  # Set to "true" to redirect HTTP to HTTPS behind a TLS-terminating proxy.
+  # Optional. When "true": HTTPS redirect, HSTS, CSP upgrade-insecure-requests, secure cookies. Only behind a TLS proxy. Requires TRUST_PROXY.
   # COOKIE_SECURE: "true"
-  # Set to "false" to allow session cookies over plain HTTP (e.g. no ingress TLS). Not recommended for production.
+  # Auto-derived (true in production or when FORCE_HTTPS=true). Set "false" to force cookies over plain HTTP. Not recommended for production.
   # TRUST_PROXY: "1"
-  # Number of trusted reverse proxies for X-Forwarded-For header parsing.
+  # Trusted proxy hops for X-Forwarded-For/X-Forwarded-Proto. Defaults to 1 in production. Must be set for FORCE_HTTPS to work.
   # ALLOW_INTERNAL_NETWORK: "false"
   # Set to "true" if Immich or other integrated services are hosted on a private/RFC-1918 network address.
   # Loopback (127.x) and link-local/metadata addresses (169.254.x) are always blocked.
@@ -40,7 +44,9 @@ env:
   # OIDC_DISPLAY_NAME: "SSO"
   # Label shown on the SSO login button.
   # OIDC_ONLY: "false"
-  # Set to "true" to disable local password auth entirely (first SSO login becomes admin).
+  # Set to "true" to force SSO-only mode: disables password login and password registration.
+  # Overrides the granular toggles in Admin > Settings and cannot be changed at runtime.
+  # First SSO login becomes admin on a fresh instance.
   # OIDC_ADMIN_CLAIM: ""
   # OIDC claim used to identify admin users.
   # OIDC_ADMIN_VALUE: ""
@@ -51,8 +57,10 @@ env:
   # Override the OIDC discovery endpoint for providers with non-standard paths (e.g. Authentik).
   # DEMO_MODE: "false"
   # Enable demo mode (hourly data resets).
-  # MCP_RATE_LIMIT: "60"
-  # Max MCP API requests per user per minute. Defaults to 60.
+  # MCP_RATE_LIMIT: "300"
+  # Max MCP API requests per user per minute. Defaults to 300.
+  # MCP_MAX_SESSION_PER_USER: "20"
+  # Max concurrent MCP sessions per user. Defaults to 20.
 
 
 # Secret environment variables stored in a Kubernetes Secret.

client/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
     <title>TREK</title>
 
     <!-- PWA / iOS -->

client/package.json

@@ -1,19 +1,26 @@
 {
   "name": "trek-client",
-  "version": "2.8.3",
+  "version": "2.9.14",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vite",
     "prebuild": "node scripts/generate-icons.mjs",
     "build": "vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest run",
+    "test:unit": "vitest run tests/unit",
+    "test:integration": "vitest run tests/integration src/**/*.test.{ts,tsx}",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@react-pdf/renderer": "^4.3.2",
     "axios": "^1.6.7",
+    "dexie": "^4.4.2",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
+    "marked": "^18.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.4.1",
@@ -22,22 +29,31 @@
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.22.2",
     "react-window": "^2.2.7",
+    "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "topojson-client": "^3.1.0",
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/leaflet": "^1.9.8",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.18",
+    "fake-indexeddb": "^6.2.5",
+    "jsdom": "^29.0.1",
+    "msw": "^2.13.0",
     "postcss": "^8.4.35",
     "sharp": "^0.33.0",
     "tailwindcss": "^3.4.1",
     "typescript": "^6.0.2",
     "vite": "^5.1.4",
-    "vite-plugin-pwa": "^0.21.0"
+    "vite-plugin-pwa": "^0.21.0",
+    "vitest": "^3.2.4"
   }
 }

client/src/App.test.tsx

@@ -0,0 +1,322 @@
+import React from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { server } from '../tests/helpers/msw/server'
+import { useAuthStore } from './store/authStore'
+import { useSettingsStore } from './store/settingsStore'
+import { resetAllStores } from '../tests/helpers/store'
+import { buildUser, buildSettings } from '../tests/helpers/factories'
+import App from './App'
+
+// ── Mock page components ───────────────────────────────────────────────────────
+vi.mock('./pages/LoginPage', () => ({ default: () => <div>Login</div> }))
+vi.mock('./pages/DashboardPage', () => ({ default: () => <div>Dashboard</div> }))
+vi.mock('./pages/TripPlannerPage', () => ({ default: () => <div>TripPlanner</div> }))
+vi.mock('./pages/FilesPage', () => ({ default: () => <div>Files</div> }))
+vi.mock('./pages/AdminPage', () => ({ default: () => <div>Admin</div> }))
+vi.mock('./pages/SettingsPage', () => ({ default: () => <div>Settings</div> }))
+vi.mock('./pages/VacayPage', () => ({ default: () => <div>Vacay</div> }))
+vi.mock('./pages/AtlasPage', () => ({ default: () => <div>Atlas</div> }))
+vi.mock('./pages/SharedTripPage', () => ({ default: () => <div>SharedTrip</div> }))
+vi.mock('./pages/InAppNotificationsPage.tsx', () => ({ default: () => <div>Notifications</div> }))
+
+// Prevent WebSocket side effects from the notification listener
+vi.mock('./hooks/useInAppNotificationListener.ts', () => ({
+  useInAppNotificationListener: vi.fn(),
+}))
+
+// ── Helpers ────────────────────────────────────────────────────────────────────
+
+function renderApp(initialPath = '/') {
+  return render(
+    <MemoryRouter initialEntries={[initialPath]}>
+      <App />
+    </MemoryRouter>
+  )
+}
+
+/**
+ * Seeds authStore with sensible defaults for a test, replacing loadUser with a
+ * no-op spy so the MSW /api/auth/me response does not overwrite the seeded state.
+ */
+function seedAuth(overrides: Record<string, unknown> = {}) {
+  useAuthStore.setState({
+    isLoading: false,
+    isAuthenticated: false,
+    user: null,
+    appRequireMfa: false,
+    loadUser: vi.fn().mockResolvedValue(undefined),
+    ...overrides,
+  })
+}
+
+beforeEach(() => {
+  resetAllStores()
+  vi.clearAllMocks()
+  document.documentElement.classList.remove('dark')
+})
+
+// ── RootRedirect ───────────────────────────────────────────────────────────────
+
+describe('RootRedirect', () => {
+  it('FE-COMP-APP-001: / redirects to /login when not authenticated', async () => {
+    seedAuth({ isAuthenticated: false })
+    renderApp('/')
+    await waitFor(() => expect(screen.getByText('Login')).toBeInTheDocument())
+  })
+
+  it('FE-COMP-APP-002: / redirects to /dashboard when authenticated', async () => {
+    seedAuth({ isAuthenticated: true, user: buildUser() })
+    renderApp('/')
+    await waitFor(() => expect(screen.getByText('Dashboard')).toBeInTheDocument())
+  })
+
+  it('FE-COMP-APP-003: / shows loading spinner while auth is loading', () => {
+    seedAuth({ isLoading: true, isAuthenticated: false })
+    renderApp('/')
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument()
+    expect(screen.queryByText('Login')).not.toBeInTheDocument()
+  })
+})
+
+// ── ProtectedRoute — unauthenticated ──────────────────────────────────────────
+
+describe('ProtectedRoute — unauthenticated', () => {
+  it('FE-COMP-APP-004: /dashboard redirects to /login with redirect param when not authenticated', async () => {
+    seedAuth({ isAuthenticated: false })
+    renderApp('/dashboard')
+    await waitFor(() => expect(screen.getByText('Login')).toBeInTheDocument())
+  })
+
+  it('FE-COMP-APP-005: /trips/42 redirects to /login when not authenticated', async () => {
+    seedAuth({ isAuthenticated: false })
+    renderApp('/trips/42')
+    await waitFor(() => expect(screen.getByText('Login')).toBeInTheDocument())
+  })
+})
+
+// ── ProtectedRoute — loading ───────────────────────────────────────────────────
+
+describe('ProtectedRoute — loading state', () => {
+  it('FE-COMP-APP-006: protected route shows loading spinner while isLoading is true', () => {
+    seedAuth({ isLoading: true, isAuthenticated: false })
+    renderApp('/dashboard')
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument()
+    expect(screen.queryByText('Dashboard')).not.toBeInTheDocument()
+  })
+})
+
+// ── ProtectedRoute — MFA enforcement ──────────────────────────────────────────
+
+describe('ProtectedRoute — MFA enforcement', () => {
+  it('FE-COMP-APP-007: redirects to /settings?mfa=required when appRequireMfa is true and MFA is disabled', async () => {
+    seedAuth({
+      isAuthenticated: true,
+      appRequireMfa: true,
+      user: buildUser({ mfa_enabled: false }),
+    })
+    renderApp('/dashboard')
+    await waitFor(() => expect(screen.getByText('Settings')).toBeInTheDocument())
+  })
+
+  it('FE-COMP-APP-008: does NOT redirect when already on /settings even with MFA required', async () => {
+    seedAuth({
+      isAuthenticated: true,
+      appRequireMfa: true,
+      user: buildUser({ mfa_enabled: false }),
+    })
+    renderApp('/settings')
+    await waitFor(() => expect(screen.getByText('Settings')).toBeInTheDocument())
+    expect(screen.queryByText('Login')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-APP-009: does NOT redirect when user has MFA enabled', async () => {
+    seedAuth({
+      isAuthenticated: true,
+      appRequireMfa: true,
+      user: buildUser({ mfa_enabled: true }),
+    })
+    renderApp('/dashboard')
+    await waitFor(() => expect(screen.getByText('Dashboard')).toBeInTheDocument())
+  })
+})
+
+// ── ProtectedRoute — admin role ────────────────────────────────────────────────
+
+describe('ProtectedRoute — admin role check', () => {
+  it('FE-COMP-APP-010: /admin redirects to /dashboard for non-admin user', async () => {
+    seedAuth({
+      isAuthenticated: true,
+      user: buildUser({ role: 'user' }),
+    })
+    renderApp('/admin')
+    await waitFor(() => expect(screen.getByText('Dashboard')).toBeInTheDocument())
+    expect(screen.queryByText('Admin')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-APP-011: /admin is accessible for admin user', async () => {
+    seedAuth({
+      isAuthenticated: true,
+      user: buildUser({ role: 'admin' }),
+    })
+    renderApp('/admin')
+    await waitFor(() => expect(screen.getByText('Admin')).toBeInTheDocument())
+  })
+})
+
+// ── Public routes ──────────────────────────────────────────────────────────────
+
+describe('Public routes', () => {
+  it('FE-COMP-APP-012: /login is accessible without authentication', async () => {
+    seedAuth({ isAuthenticated: false })
+    renderApp('/login')
+    expect(screen.getByText('Login')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-APP-013: /shared/:token is accessible without authentication', async () => {
+    seedAuth({ isAuthenticated: false })
+    renderApp('/shared/sometoken')
+    expect(screen.getByText('SharedTrip')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-APP-014: unknown routes redirect to / which then redirects to /login', async () => {
+    seedAuth({ isAuthenticated: false })
+    renderApp('/does-not-exist')
+    await waitFor(() => expect(screen.getByText('Login')).toBeInTheDocument())
+  })
+})
+
+// ── App — on-mount effects ─────────────────────────────────────────────────────
+
+describe('App — on-mount effects', () => {
+  it('FE-COMP-APP-015: loadUser is called on mount for non-shared paths', async () => {
+    const loadUser = vi.fn().mockResolvedValue(undefined)
+    useAuthStore.setState({ isLoading: false, isAuthenticated: false, loadUser })
+    renderApp('/dashboard')
+    expect(loadUser).toHaveBeenCalled()
+  })
+
+  it('FE-COMP-APP-016: loadUser is NOT called on /shared/ paths', async () => {
+    const loadUser = vi.fn().mockResolvedValue(undefined)
+    useAuthStore.setState({ isLoading: false, isAuthenticated: false, loadUser })
+    renderApp('/shared/token123')
+    expect(loadUser).not.toHaveBeenCalled()
+  })
+
+  it('FE-COMP-APP-017: GET /api/auth/app-config is called on mount', async () => {
+    let configCalled = false
+    server.use(
+      http.get('/api/auth/app-config', () => {
+        configCalled = true
+        return HttpResponse.json({})
+      })
+    )
+    seedAuth()
+    renderApp('/')
+    await waitFor(() => expect(configCalled).toBe(true))
+  })
+
+  it('FE-COMP-APP-018: setDemoMode(true) is called when config returns demo_mode: true', async () => {
+    server.use(
+      http.get('/api/auth/app-config', () => HttpResponse.json({ demo_mode: true }))
+    )
+    const setDemoMode = vi.fn()
+    useAuthStore.setState({
+      isLoading: false,
+      isAuthenticated: false,
+      loadUser: vi.fn().mockResolvedValue(undefined),
+      setDemoMode,
+    })
+    renderApp('/')
+    await waitFor(() => expect(setDemoMode).toHaveBeenCalledWith(true))
+  })
+
+  it('FE-COMP-APP-019: loadSettings is called once the user is authenticated', async () => {
+    const loadSettings = vi.fn().mockResolvedValue(undefined)
+    seedAuth({ isAuthenticated: true, user: buildUser() })
+    useSettingsStore.setState({ loadSettings })
+    renderApp('/dashboard')
+    await waitFor(() => expect(loadSettings).toHaveBeenCalled())
+  })
+})
+
+// ── Dark mode effects ──────────────────────────────────────────────────────────
+
+describe('Dark mode effects', () => {
+  it('FE-COMP-APP-020: adds dark class to documentElement when dark_mode is true', async () => {
+    seedAuth({ isAuthenticated: true, user: buildUser() })
+    useSettingsStore.setState({ settings: buildSettings({ dark_mode: true }) })
+    renderApp('/dashboard')
+    await waitFor(() =>
+      expect(document.documentElement.classList.contains('dark')).toBe(true)
+    )
+  })
+
+  it('FE-COMP-APP-021: removes dark class when dark_mode is false', async () => {
+    document.documentElement.classList.add('dark')
+    seedAuth({ isAuthenticated: true, user: buildUser() })
+    useSettingsStore.setState({ settings: buildSettings({ dark_mode: false }) })
+    renderApp('/dashboard')
+    await waitFor(() =>
+      expect(document.documentElement.classList.contains('dark')).toBe(false)
+    )
+  })
+
+  it('FE-COMP-APP-022: forces light mode on /shared/ path even when dark_mode is true', async () => {
+    document.documentElement.classList.add('dark')
+    useSettingsStore.setState({ settings: buildSettings({ dark_mode: true }) })
+    seedAuth({ isAuthenticated: false, loadUser: vi.fn().mockResolvedValue(undefined) })
+    renderApp('/shared/tok')
+    await waitFor(() =>
+      expect(document.documentElement.classList.contains('dark')).toBe(false)
+    )
+  })
+
+  it('FE-COMP-APP-023: auto mode applies dark based on matchMedia result', async () => {
+    // matchMedia stub returns matches: false by default (from setup.ts)
+    seedAuth({ isAuthenticated: true, user: buildUser() })
+    useSettingsStore.setState({ settings: buildSettings({ dark_mode: 'auto' as any }) })
+    renderApp('/dashboard')
+    // With matches: false, dark should NOT be added
+    await waitFor(() =>
+      expect(document.documentElement.classList.contains('dark')).toBe(false)
+    )
+  })
+})
+
+// ── Version cache-busting ──────────────────────────────────────────────────────
+
+describe('Version cache-busting', () => {
+  it('FE-COMP-APP-024: stores version in localStorage when config returns a version', async () => {
+    server.use(
+      http.get('/api/auth/app-config', () =>
+        HttpResponse.json({ version: '2.9.10' })
+      )
+    )
+    seedAuth()
+    renderApp('/')
+    await waitFor(() =>
+      expect(localStorage.getItem('trek_app_version')).toBe('2.9.10')
+    )
+  })
+
+  it('FE-COMP-APP-025: calls window.location.reload() when version changes', async () => {
+    localStorage.setItem('trek_app_version', '2.9.9')
+    const reload = vi.fn()
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { ...window.location, reload },
+    })
+
+    server.use(
+      http.get('/api/auth/app-config', () =>
+        HttpResponse.json({ version: '2.9.10' })
+      )
+    )
+    seedAuth()
+    renderApp('/')
+    await waitFor(() => expect(reload).toHaveBeenCalled())
+  })
+})

client/src/App.tsx

@@ -10,13 +10,20 @@ import AdminPage from './pages/AdminPage'
 import SettingsPage from './pages/SettingsPage'
 import VacayPage from './pages/VacayPage'
 import AtlasPage from './pages/AtlasPage'
+import JourneyPage from './pages/JourneyPage'
+import JourneyDetailPage from './pages/JourneyDetailPage'
+import JourneyPublicPage from './pages/JourneyPublicPage'
 import SharedTripPage from './pages/SharedTripPage'
 import InAppNotificationsPage from './pages/InAppNotificationsPage.tsx'
+import OAuthAuthorizePage from './pages/OAuthAuthorizePage'
 import { ToastContainer } from './components/shared/Toast'
+import BottomNav from './components/Layout/BottomNav'
 import { TranslationProvider, useTranslation } from './i18n'
 import { authApi } from './api/client'
 import { usePermissionsStore, PermissionLevel } from './store/permissionsStore'
 import { useInAppNotificationListener } from './hooks/useInAppNotificationListener.ts'
+import { registerSyncTriggers, unregisterSyncTriggers } from './sync/syncTriggers'
+import OfflineBanner from './components/Layout/OfflineBanner'
 
 interface ProtectedRouteProps {
   children: ReactNode
@@ -43,7 +50,8 @@ function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps
   }
 
   if (!isAuthenticated) {
-    return <Navigate to="/login" replace />
+    const redirectParam = encodeURIComponent(location.pathname + location.search)
+    return <Navigate to={`/login?redirect=${redirectParam}`} replace />
   }
 
   if (
@@ -59,7 +67,12 @@ function ProtectedRoute({ children, adminRequired = false }: ProtectedRouteProps
     return <Navigate to="/dashboard" replace />
   }
 
-  return <>{children}</>
+  return (
+    <div className="flex flex-col h-screen md:block md:h-auto">
+      <div className="flex-1 overflow-y-auto md:overflow-visible">{children}</div>
+      <BottomNav />
+    </div>
+  )
 }
 
 function RootRedirect() {
@@ -77,16 +90,26 @@ function RootRedirect() {
 }
 
 export default function App() {
-  const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled } = useAuthStore()
+  const { loadUser, isAuthenticated, demoMode, setDemoMode, setDevMode, setIsPrerelease, setAppVersion, setHasMapsKey, setServerTimezone, setAppRequireMfa, setTripRemindersEnabled } = useAuthStore()
   const { loadSettings } = useSettingsStore()
 
   useEffect(() => {
-    if (!location.pathname.startsWith('/shared/')) {
-      loadUser()
+    if (!location.pathname.startsWith('/shared/') && !location.pathname.startsWith('/public/') && !location.pathname.startsWith('/login')) {
+      // If the persist snapshot already has an authenticated user, validate
+      // silently so the PWA shell renders immediately without a spinner.
+      const alreadyAuthenticated = useAuthStore.getState().isAuthenticated
+      if (alreadyAuthenticated) {
+        useAuthStore.setState({ isLoading: false })
+        loadUser({ silent: true })
+      } else {
+        loadUser()
+      }
     }
-    authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
+    authApi.getAppConfig().then(async (config: { demo_mode?: boolean; dev_mode?: boolean; is_prerelease?: boolean; has_maps_key?: boolean; version?: string; timezone?: string; require_mfa?: boolean; trip_reminders_enabled?: boolean; permissions?: Record<string, PermissionLevel> }) => {
       if (config?.demo_mode) setDemoMode(true)
       if (config?.dev_mode) setDevMode(true)
+      if (config?.is_prerelease !== undefined) setIsPrerelease(config.is_prerelease)
+      if (config?.version) setAppVersion(config.version)
       if (config?.has_maps_key !== undefined) setHasMapsKey(config.has_maps_key)
       if (config?.timezone) setServerTimezone(config.timezone)
       if (config?.require_mfa !== undefined) setAppRequireMfa(!!config.require_mfa)
@@ -125,6 +148,11 @@ export default function App() {
     }
   }, [isAuthenticated])
 
+  useEffect(() => {
+    registerSyncTriggers()
+    return () => unregisterSyncTriggers()
+  }, [])
+
   const location = useLocation()
   const isSharedPage = location.pathname.startsWith('/shared/')
 
@@ -157,11 +185,15 @@ export default function App() {
   return (
     <TranslationProvider>
       <ToastContainer />
+      <OfflineBanner />
       <Routes>
         <Route path="/" element={<RootRedirect />} />
         <Route path="/login" element={<LoginPage />} />
         <Route path="/shared/:token" element={<SharedTripPage />} />
+        <Route path="/public/journey/:token" element={<JourneyPublicPage />} />
         <Route path="/register" element={<LoginPage />} />
+        {/* OAuth 2.1 consent page — intentionally outside ProtectedRoute */}
+        <Route path="/oauth/authorize" element={<OAuthAuthorizePage />} />
         <Route
           path="/dashboard"
           element={
@@ -218,6 +250,22 @@ export default function App() {
             </ProtectedRoute>
           }
         />
+        <Route
+          path="/journey"
+          element={
+            <ProtectedRoute>
+              <JourneyPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path="/journey/:id"
+          element={
+            <ProtectedRoute>
+              <JourneyDetailPage />
+            </ProtectedRoute>
+          }
+        />
         <Route
           path="/notifications"
           element={

client/src/api/authUrl.ts

@@ -1,4 +1,4 @@
-export async function getAuthUrl(url: string, purpose: 'download' | 'immich'): Promise<string> {
+export async function getAuthUrl(url: string, purpose: 'download'): Promise<string> {
   if (!url) return url
   try {
     const resp = await fetch('/api/auth/resource-token', {

client/src/api/client.ts

@@ -1,7 +1,36 @@
 import axios, { AxiosInstance } from 'axios'
 import { getSocketId } from './websocket'
+import en from '../i18n/translations/en'
+import br from '../i18n/translations/br'
+import de from '../i18n/translations/de'
+import es from '../i18n/translations/es'
+import fr from '../i18n/translations/fr'
+import it from '../i18n/translations/it'
+import nl from '../i18n/translations/nl'
+import pl from '../i18n/translations/pl'
+import cs from '../i18n/translations/cs'
+import hu from '../i18n/translations/hu'
+import ru from '../i18n/translations/ru'
+import zh from '../i18n/translations/zh'
+import zhTw from '../i18n/translations/zhTw'
+import ar from '../i18n/translations/ar'
 
-const apiClient: AxiosInstance = axios.create({
+const rateLimitTranslations: Record<string, Record<string, string | unknown>> = {
+  en, br, de, es, fr, it, nl, pl, cs, hu, ru, zh, 'zh-TW': zhTw, ar,
+}
+
+function translateRateLimit(): string {
+  const fallback = 'Too many attempts. Please try again later.'
+  try {
+    const lang = localStorage.getItem('app_language') || 'en'
+    const table = rateLimitTranslations[lang] || rateLimitTranslations.en
+    return (table['common.tooManyAttempts'] as string) || (rateLimitTranslations.en['common.tooManyAttempts'] as string) || fallback
+  } catch {
+    return fallback
+  }
+}
+
+export const apiClient: AxiosInstance = axios.create({
   baseURL: '/api',
   withCredentials: true,
   headers: {
@@ -9,25 +38,38 @@ const apiClient: AxiosInstance = axios.create({
   },
 })
 
-// Request interceptor - add socket ID
+const MUTATING_METHODS = new Set(['post', 'put', 'patch', 'delete'])
+
+// Request interceptor - add socket ID + idempotency key for mutating requests
 apiClient.interceptors.request.use(
   (config) => {
     const sid = getSocketId()
     if (sid) {
       config.headers['X-Socket-Id'] = sid
     }
+    // Attach a per-request idempotency key to all write operations so the
+    // server can deduplicate retried requests (e.g. network blips).
+    // The mutation queue sets its own pre-generated key; skip if already set.
+    const method = (config.method ?? '').toLowerCase()
+    if (MUTATING_METHODS.has(method) && !config.headers['X-Idempotency-Key']) {
+      const key = typeof crypto !== 'undefined' && crypto.randomUUID
+        ? crypto.randomUUID()
+        : Math.random().toString(36).slice(2)
+      config.headers['X-Idempotency-Key'] = key
+    }
     return config
   },
   (error) => Promise.reject(error)
 )
 
-// Response interceptor - handle 401
+// Response interceptor - handle 401, 403 MFA, 429 rate limit
 apiClient.interceptors.response.use(
   (response) => response,
   (error) => {
     if (error.response?.status === 401 && (error.response?.data as { code?: string } | undefined)?.code === 'AUTH_REQUIRED') {
-      if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/')) {
-        window.location.href = '/login'
+      if (!window.location.pathname.includes('/login') && !window.location.pathname.includes('/register') && !window.location.pathname.startsWith('/shared/') && !window.location.pathname.startsWith('/public/')) {
+        const currentPath = window.location.pathname + window.location.search
+        window.location.href = '/login?redirect=' + encodeURIComponent(currentPath)
       }
     }
     if (
@@ -37,6 +79,16 @@ apiClient.interceptors.response.use(
     ) {
       window.location.href = '/settings?mfa=required'
     }
+    if (error.response?.status === 429) {
+      const translated = translateRateLimit()
+      const data = error.response.data as { error?: string } | undefined
+      if (data && typeof data === 'object') {
+        data.error = translated
+      } else {
+        error.response.data = { error: translated }
+      }
+      error.message = translated
+    }
     return Promise.reject(error)
   }
 )
@@ -71,6 +123,43 @@ export const authApi = {
   },
 }
 
+export const oauthApi = {
+  /** Validate OAuth authorize params — called by consent page on load */
+  validate: (params: {
+    response_type: string
+    client_id: string
+    redirect_uri: string
+    scope: string
+    state?: string
+    code_challenge: string
+    code_challenge_method: string
+  }) => apiClient.get('/oauth/authorize/validate', { params }).then(r => r.data),
+
+  /** Submit user consent (approve or deny) */
+  authorize: (body: {
+    client_id: string
+    redirect_uri: string
+    scope: string
+    state?: string
+    code_challenge: string
+    code_challenge_method: string
+    approved: boolean
+  }) => apiClient.post('/oauth/authorize', body).then(r => r.data),
+
+  clients: {
+    list: () => apiClient.get('/oauth/clients').then(r => r.data),
+    create: (data: { name: string; redirect_uris: string[]; allowed_scopes: string[] }) =>
+      apiClient.post('/oauth/clients', data).then(r => r.data),
+    rotate: (id: string) => apiClient.post(`/oauth/clients/${id}/rotate`).then(r => r.data),
+    delete: (id: string) => apiClient.delete(`/oauth/clients/${id}`).then(r => r.data),
+  },
+
+  sessions: {
+    list: () => apiClient.get('/oauth/sessions').then(r => r.data),
+    revoke: (id: number) => apiClient.delete(`/oauth/sessions/${id}`).then(r => r.data),
+  },
+}
+
 export const tripsApi = {
   list: (params?: Record<string, unknown>) => apiClient.get('/trips', { params }).then(r => r.data),
   create: (data: Record<string, unknown>) => apiClient.post('/trips', data).then(r => r.data),
@@ -84,6 +173,7 @@ export const tripsApi = {
   addMember: (id: number | string, identifier: string) => apiClient.post(`/trips/${id}/members`, { identifier }).then(r => r.data),
   removeMember: (id: number | string, userId: number) => apiClient.delete(`/trips/${id}/members/${userId}`).then(r => r.data),
   copy: (id: number | string, data?: { title?: string }) => apiClient.post(`/trips/${id}/copy`, data || {}).then(r => r.data),
+  bundle: (id: number | string) => apiClient.get(`/trips/${id}/bundle`).then(r => r.data),
 }
 
 export const daysApi = {
@@ -104,8 +194,14 @@ export const placesApi = {
     const fd = new FormData(); fd.append('file', file)
     return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
+  importMapFile: (tripId: number | string, file: File) => {
+    const fd = new FormData(); fd.append('file', file)
+    return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+  },
   importGoogleList: (tripId: number | string, url: string) =>
     apiClient.post(`/trips/${tripId}/places/import/google-list`, { url }).then(r => r.data),
+  importNaverList: (tripId: number | string, url: string) =>
+    apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
 }
 
 export const assignmentsApi = {
@@ -130,12 +226,24 @@ export const packingApi = {
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
   setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
+  saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
+  setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds }).then(r => r.data),
   listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
   createBag: (tripId: number | string, data: { name: string; color?: string }) => apiClient.post(`/trips/${tripId}/packing/bags`, data).then(r => r.data),
   updateBag: (tripId: number | string, bagId: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}`, data).then(r => r.data),
   deleteBag: (tripId: number | string, bagId: number) => apiClient.delete(`/trips/${tripId}/packing/bags/${bagId}`).then(r => r.data),
 }
 
+export const todoApi = {
+  list: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo`).then(r => r.data),
+  create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/todo`, data).then(r => r.data),
+  update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/todo/${id}`, data).then(r => r.data),
+  delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/todo/${id}`).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/todo/reorder`, { orderedIds }).then(r => r.data),
+  getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/todo/category-assignees`).then(r => r.data),
+  setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/todo/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds }).then(r => r.data),
+}
+
 export const tagsApi = {
   list: () => apiClient.get('/tags').then(r => r.data),
   create: (data: Record<string, unknown>) => apiClient.post('/tags', data).then(r => r.data),
@@ -182,19 +290,71 @@ export const adminApi = {
     apiClient.get('/admin/audit-log', { params }).then(r => r.data),
   mcpTokens: () => apiClient.get('/admin/mcp-tokens').then(r => r.data),
   deleteMcpToken: (id: number) => apiClient.delete(`/admin/mcp-tokens/${id}`).then(r => r.data),
+  oauthSessions: () => apiClient.get('/admin/oauth-sessions').then(r => r.data),
+  revokeOAuthSession: (id: number) => apiClient.delete(`/admin/oauth-sessions/${id}`).then(r => r.data),
   getPermissions: () => apiClient.get('/admin/permissions').then(r => r.data),
   updatePermissions: (permissions: Record<string, string>) => apiClient.put('/admin/permissions', { permissions }).then(r => r.data),
   rotateJwtSecret: () => apiClient.post('/admin/rotate-jwt-secret').then(r => r.data),
   sendTestNotification: (data: Record<string, unknown>) =>
     apiClient.post('/admin/dev/test-notification', data).then(r => r.data),
+  getNotificationPreferences: () => apiClient.get('/admin/notification-preferences').then(r => r.data),
+  updateNotificationPreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/admin/notification-preferences', prefs).then(r => r.data),
 }
 
 export const addonsApi = {
   enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
+export const journeyApi = {
+  list: () => apiClient.get('/journeys').then(r => r.data),
+  create: (data: { title: string; subtitle?: string; trip_ids?: number[] }) => apiClient.post('/journeys', data).then(r => r.data),
+  get: (id: number) => apiClient.get(`/journeys/${id}`).then(r => r.data),
+  update: (id: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/${id}`, data).then(r => r.data),
+  delete: (id: number) => apiClient.delete(`/journeys/${id}`).then(r => r.data),
+
+  suggestions: () => apiClient.get('/journeys/suggestions').then(r => r.data),
+  availableTrips: () => apiClient.get('/journeys/available-trips').then(r => r.data),
+
+  // Trips (sync sources)
+  addTrip: (id: number, tripId: number) => apiClient.post(`/journeys/${id}/trips`, { trip_id: tripId }).then(r => r.data),
+  removeTrip: (id: number, tripId: number) => apiClient.delete(`/journeys/${id}/trips/${tripId}`).then(r => r.data),
+
+  // Entries
+  listEntries: (id: number) => apiClient.get(`/journeys/${id}/entries`).then(r => r.data),
+  createEntry: (id: number, data: Record<string, unknown>) => apiClient.post(`/journeys/${id}/entries`, data).then(r => r.data),
+  updateEntry: (entryId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/entries/${entryId}`, data).then(r => r.data),
+  deleteEntry: (entryId: number) => apiClient.delete(`/journeys/entries/${entryId}`).then(r => r.data),
+
+  // Photos
+  uploadPhotos: (entryId: number, formData: FormData) => apiClient.post(`/journeys/entries/${entryId}/photos`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+  addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption }).then(r => r.data),
+  addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption }).then(r => r.data),
+  linkPhoto: (entryId: number, photoId: number) => apiClient.post(`/journeys/entries/${entryId}/link-photo`, { photo_id: photoId }).then(r => r.data),
+  updatePhoto: (photoId: number, data: Record<string, unknown>) => apiClient.patch(`/journeys/photos/${photoId}`, data).then(r => r.data),
+  deletePhoto: (photoId: number) => apiClient.delete(`/journeys/photos/${photoId}`).then(r => r.data),
+
+  // Cover
+  uploadCover: (id: number, formData: FormData) => apiClient.post(`/journeys/${id}/cover`, formData, { headers: { 'Content-Type': undefined as any } }).then(r => r.data),
+
+  // Contributors
+  addContributor: (id: number, userId: number, role: string) => apiClient.post(`/journeys/${id}/contributors`, { user_id: userId, role }).then(r => r.data),
+  updateContributor: (id: number, userId: number, role: string) => apiClient.patch(`/journeys/${id}/contributors/${userId}`, { role }).then(r => r.data),
+  removeContributor: (id: number, userId: number) => apiClient.delete(`/journeys/${id}/contributors/${userId}`).then(r => r.data),
+
+  // Preferences
+  updatePreferences: (id: number, data: { hide_skeletons?: boolean }) => apiClient.patch(`/journeys/${id}/preferences`, data).then(r => r.data),
+
+  // Share
+  getShareLink: (id: number) => apiClient.get(`/journeys/${id}/share-link`).then(r => r.data),
+  createShareLink: (id: number, perms: { share_timeline?: boolean; share_gallery?: boolean; share_map?: boolean }) => apiClient.post(`/journeys/${id}/share-link`, perms).then(r => r.data),
+  deleteShareLink: (id: number) => apiClient.delete(`/journeys/${id}/share-link`).then(r => r.data),
+  getPublicJourney: (token: string) => apiClient.get(`/public/journey/${token}`).then(r => r.data),
+}
+
 export const mapsApi = {
   search: (query: string, lang?: string) => apiClient.post(`/maps/search?lang=${lang || 'en'}`, { query }).then(r => r.data),
+  autocomplete: (input: string, lang?: string, locationBias?: { low: { lat: number; lng: number }; high: { lat: number; lng: number } }, signal?: AbortSignal) =>
+    apiClient.post('/maps/autocomplete', { input, lang, locationBias }, { signal }).then(r => r.data),
   details: (placeId: string, lang?: string) => apiClient.get(`/maps/details/${encodeURIComponent(placeId)}`, { params: { lang } }).then(r => r.data),
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => r.data),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => r.data),
@@ -210,6 +370,8 @@ export const budgetApi = {
   togglePaid: (tripId: number | string, id: number, userId: number, paid: boolean) => apiClient.put(`/trips/${tripId}/budget/${id}/members/${userId}/paid`, { paid }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
   settlement: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/settlement`).then(r => r.data),
+  reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
+  reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories }).then(r => r.data),
 }
 
 export const filesApi = {
@@ -233,7 +395,7 @@ export const reservationsApi = {
   create: (tripId: number | string, data: Record<string, unknown>) => apiClient.post(`/trips/${tripId}/reservations`, data).then(r => r.data),
   update: (tripId: number | string, id: number, data: Record<string, unknown>) => apiClient.put(`/trips/${tripId}/reservations/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/reservations/${id}`).then(r => r.data),
-  updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[]) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions }).then(r => r.data),
+  updatePositions: (tripId: number | string, positions: { id: number; day_plan_position: number }[], dayId?: number) => apiClient.put(`/trips/${tripId}/reservations/positions`, { positions, day_id: dayId }).then(r => r.data),
 }
 
 export const weatherApi = {
@@ -241,6 +403,11 @@ export const weatherApi = {
   getDetailed: (lat: number, lng: number, date: string, lang?: string) => apiClient.get('/weather/detailed', { params: { lat, lng, date, lang } }).then(r => r.data),
 }
 
+export const configApi = {
+  getPublicConfig: (): Promise<{ defaultLanguage: string }> =>
+    apiClient.get('/config').then(r => r.data),
+}
+
 export const settingsApi = {
   get: () => apiClient.get('/settings').then(r => r.data),
   set: (key: string, value: unknown) => apiClient.put('/settings', { key, value }).then(r => r.data),
@@ -316,9 +483,10 @@ export const shareApi = {
 
 export const notificationsApi = {
   getPreferences: () => apiClient.get('/notifications/preferences').then(r => r.data),
-  updatePreferences: (prefs: Record<string, boolean>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
+  updatePreferences: (prefs: Record<string, Record<string, boolean>>) => apiClient.put('/notifications/preferences', prefs).then(r => r.data),
   testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => r.data),
-  testWebhook: () => apiClient.post('/notifications/test-webhook').then(r => r.data),
+  testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => r.data),
+  testNtfy: (payload: { topic?: string; server?: string | null; token?: string | null }) => apiClient.post('/notifications/test-ntfy', payload).then(r => r.data),
 }
 
 export const inAppNotificationsApi = {

client/src/api/oauthScopes.test.ts

@@ -0,0 +1,102 @@
+// FE-OAUTH-SCOPES-001 to FE-OAUTH-SCOPES-010
+import { describe, it, expect } from 'vitest'
+import { SCOPE_GROUPS, ALL_SCOPES, SCOPE_GROUP_NAMES, getScopesByGroup } from './oauthScopes'
+
+describe('SCOPE_GROUPS', () => {
+  it('FE-OAUTH-SCOPES-001: contains all expected scope keys', () => {
+    const expected = [
+      'trips:read', 'trips:write', 'trips:delete', 'trips:share',
+      'places:read', 'places:write',
+      'atlas:read', 'atlas:write',
+      'packing:read', 'packing:write',
+      'todos:read', 'todos:write',
+      'budget:read', 'budget:write',
+      'reservations:read', 'reservations:write',
+      'collab:read', 'collab:write',
+      'notifications:read', 'notifications:write',
+      'vacay:read', 'vacay:write',
+      'geo:read', 'weather:read',
+    ]
+    for (const scope of expected) {
+      expect(SCOPE_GROUPS).toHaveProperty(scope)
+    }
+  })
+
+  it('FE-OAUTH-SCOPES-002: each scope entry has labelKey, descriptionKey, groupKey', () => {
+    for (const [scope, keys] of Object.entries(SCOPE_GROUPS)) {
+      expect(keys.labelKey, `${scope} missing labelKey`).toBeTruthy()
+      expect(keys.descriptionKey, `${scope} missing descriptionKey`).toBeTruthy()
+      expect(keys.groupKey, `${scope} missing groupKey`).toBeTruthy()
+    }
+  })
+})
+
+describe('ALL_SCOPES', () => {
+  it('FE-OAUTH-SCOPES-003: contains exactly 24 scopes', () => {
+    expect(ALL_SCOPES).toHaveLength(24)
+  })
+
+  it('FE-OAUTH-SCOPES-004: matches Object.keys(SCOPE_GROUPS)', () => {
+    expect(ALL_SCOPES).toEqual(Object.keys(SCOPE_GROUPS))
+  })
+})
+
+describe('SCOPE_GROUP_NAMES', () => {
+  it('FE-OAUTH-SCOPES-005: contains no duplicate group names', () => {
+    expect(SCOPE_GROUP_NAMES).toHaveLength(new Set(SCOPE_GROUP_NAMES).size)
+  })
+
+  it('FE-OAUTH-SCOPES-006: contains expected groups', () => {
+    const expected = [
+      'oauth.scope.group.trips',
+      'oauth.scope.group.places',
+      'oauth.scope.group.packing',
+      'oauth.scope.group.budget',
+    ]
+    for (const g of expected) {
+      expect(SCOPE_GROUP_NAMES).toContain(g)
+    }
+  })
+})
+
+describe('getScopesByGroup', () => {
+  const identity = (key: string) => key
+
+  it('FE-OAUTH-SCOPES-007: groups all scopes under the correct group key', () => {
+    const groups = getScopesByGroup(identity)
+    // Every scope must appear exactly once across all groups
+    const allScopesInGroups = Object.values(groups).flat().map(s => s.scope)
+    expect(allScopesInGroups).toHaveLength(ALL_SCOPES.length)
+    for (const scope of ALL_SCOPES) {
+      expect(allScopesInGroups).toContain(scope)
+    }
+  })
+
+  it('FE-OAUTH-SCOPES-008: each item has scope, label, description, group', () => {
+    const groups = getScopesByGroup(identity)
+    for (const items of Object.values(groups)) {
+      for (const item of items) {
+        expect(item.scope).toBeTruthy()
+        expect(item.label).toBeTruthy()
+        expect(item.description).toBeTruthy()
+        expect(item.group).toBeTruthy()
+      }
+    }
+  })
+
+  it('FE-OAUTH-SCOPES-009: trips group contains trips:read and trips:write', () => {
+    const groups = getScopesByGroup(identity)
+    const tripsGroup = groups['oauth.scope.group.trips']
+    expect(tripsGroup).toBeDefined()
+    const scopeNames = tripsGroup.map(s => s.scope)
+    expect(scopeNames).toContain('trips:read')
+    expect(scopeNames).toContain('trips:write')
+  })
+
+  it('FE-OAUTH-SCOPES-010: uses translated group name as key', () => {
+    const t = (key: string) => key === 'oauth.scope.group.trips' ? 'Trips' : key
+    const groups = getScopesByGroup(t)
+    expect(groups['Trips']).toBeDefined()
+    expect(groups['oauth.scope.group.trips']).toBeUndefined()
+  })
+})

client/src/api/oauthScopes.ts

@@ -0,0 +1,56 @@
+// Human-readable scope definitions for the OAuth consent page.
+// Must stay in sync with server/src/mcp/scopes.ts
+
+export interface ScopeInfo {
+  label: string
+  description: string
+  group: string
+}
+
+export interface ScopeKeys {
+  labelKey: string
+  descriptionKey: string
+  groupKey: string
+}
+
+export const SCOPE_GROUPS: Record<string, ScopeKeys> = {
+  'trips:read':          { labelKey: 'oauth.scope.trips:read.label',          descriptionKey: 'oauth.scope.trips:read.description',          groupKey: 'oauth.scope.group.trips' },
+  'trips:write':         { labelKey: 'oauth.scope.trips:write.label',         descriptionKey: 'oauth.scope.trips:write.description',         groupKey: 'oauth.scope.group.trips' },
+  'trips:delete':        { labelKey: 'oauth.scope.trips:delete.label',        descriptionKey: 'oauth.scope.trips:delete.description',        groupKey: 'oauth.scope.group.trips' },
+  'trips:share':         { labelKey: 'oauth.scope.trips:share.label',         descriptionKey: 'oauth.scope.trips:share.description',         groupKey: 'oauth.scope.group.trips' },
+  'places:read':         { labelKey: 'oauth.scope.places:read.label',         descriptionKey: 'oauth.scope.places:read.description',         groupKey: 'oauth.scope.group.places' },
+  'places:write':        { labelKey: 'oauth.scope.places:write.label',        descriptionKey: 'oauth.scope.places:write.description',        groupKey: 'oauth.scope.group.places' },
+  'atlas:read':          { labelKey: 'oauth.scope.atlas:read.label',          descriptionKey: 'oauth.scope.atlas:read.description',          groupKey: 'oauth.scope.group.atlas' },
+  'atlas:write':         { labelKey: 'oauth.scope.atlas:write.label',         descriptionKey: 'oauth.scope.atlas:write.description',         groupKey: 'oauth.scope.group.atlas' },
+  'packing:read':        { labelKey: 'oauth.scope.packing:read.label',        descriptionKey: 'oauth.scope.packing:read.description',        groupKey: 'oauth.scope.group.packing' },
+  'packing:write':       { labelKey: 'oauth.scope.packing:write.label',       descriptionKey: 'oauth.scope.packing:write.description',       groupKey: 'oauth.scope.group.packing' },
+  'todos:read':          { labelKey: 'oauth.scope.todos:read.label',          descriptionKey: 'oauth.scope.todos:read.description',          groupKey: 'oauth.scope.group.todos' },
+  'todos:write':         { labelKey: 'oauth.scope.todos:write.label',         descriptionKey: 'oauth.scope.todos:write.description',         groupKey: 'oauth.scope.group.todos' },
+  'budget:read':         { labelKey: 'oauth.scope.budget:read.label',         descriptionKey: 'oauth.scope.budget:read.description',         groupKey: 'oauth.scope.group.budget' },
+  'budget:write':        { labelKey: 'oauth.scope.budget:write.label',        descriptionKey: 'oauth.scope.budget:write.description',        groupKey: 'oauth.scope.group.budget' },
+  'reservations:read':   { labelKey: 'oauth.scope.reservations:read.label',   descriptionKey: 'oauth.scope.reservations:read.description',   groupKey: 'oauth.scope.group.reservations' },
+  'reservations:write':  { labelKey: 'oauth.scope.reservations:write.label',  descriptionKey: 'oauth.scope.reservations:write.description',  groupKey: 'oauth.scope.group.reservations' },
+  'collab:read':         { labelKey: 'oauth.scope.collab:read.label',         descriptionKey: 'oauth.scope.collab:read.description',         groupKey: 'oauth.scope.group.collab' },
+  'collab:write':        { labelKey: 'oauth.scope.collab:write.label',        descriptionKey: 'oauth.scope.collab:write.description',        groupKey: 'oauth.scope.group.collab' },
+  'notifications:read':  { labelKey: 'oauth.scope.notifications:read.label',  descriptionKey: 'oauth.scope.notifications:read.description',  groupKey: 'oauth.scope.group.notifications' },
+  'notifications:write': { labelKey: 'oauth.scope.notifications:write.label', descriptionKey: 'oauth.scope.notifications:write.description', groupKey: 'oauth.scope.group.notifications' },
+  'vacay:read':          { labelKey: 'oauth.scope.vacay:read.label',          descriptionKey: 'oauth.scope.vacay:read.description',          groupKey: 'oauth.scope.group.vacay' },
+  'vacay:write':         { labelKey: 'oauth.scope.vacay:write.label',         descriptionKey: 'oauth.scope.vacay:write.description',         groupKey: 'oauth.scope.group.vacay' },
+  'geo:read':            { labelKey: 'oauth.scope.geo:read.label',            descriptionKey: 'oauth.scope.geo:read.description',            groupKey: 'oauth.scope.group.geo' },
+  'weather:read':        { labelKey: 'oauth.scope.weather:read.label',        descriptionKey: 'oauth.scope.weather:read.description',        groupKey: 'oauth.scope.group.weather' },
+}
+
+export const ALL_SCOPES = Object.keys(SCOPE_GROUPS)
+
+// Group all scopes for the client registration form
+export const SCOPE_GROUP_NAMES = [...new Set(Object.values(SCOPE_GROUPS).map(s => s.groupKey))]
+
+export function getScopesByGroup(t: (key: string) => string): Record<string, Array<{ scope: string } & ScopeInfo>> {
+  const groups: Record<string, Array<{ scope: string } & ScopeInfo>> = {}
+  for (const [scope, keys] of Object.entries(SCOPE_GROUPS)) {
+    const group = t(keys.groupKey)
+    if (!groups[group]) groups[group] = []
+    groups[group].push({ scope, label: t(keys.labelKey), description: t(keys.descriptionKey), group })
+  }
+  return groups
+}

client/src/api/websocket.ts

@@ -13,6 +13,8 @@ let shouldReconnect = false
 let refetchCallback: RefetchCallback | null = null
 let mySocketId: string | null = null
 let connecting = false
+/** Hook run before refetchCallback on reconnect. Awaited so mutations land first. */
+let preReconnectHook: (() => Promise<void>) | null = null
 
 export function getSocketId(): string | null {
   return mySocketId
@@ -22,6 +24,16 @@ export function setRefetchCallback(fn: RefetchCallback | null): void {
   refetchCallback = fn
 }
 
+/**
+ * Register a hook that runs (and is awaited) before the refetch callback
+ * fires on WS reconnect.  Use this to flush the mutation queue so queued
+ * local writes reach the server before the app reads back canonical state.
+ * Pass null to clear.
+ */
+export function setPreReconnectHook(fn: (() => Promise<void>) | null): void {
+  preReconnectHook = fn
+}
+
 function getWsUrl(wsToken: string): string {
   const protocol = location.protocol === 'https:' ? 'wss' : 'ws'
   return `${protocol}://${location.host}/ws?token=${wsToken}`
@@ -99,11 +111,20 @@ async function connectInternal(_isReconnect = false): Promise<void> {
         }
       })
       if (refetchCallback) {
-        activeTrips.forEach(tripId => {
-          try { refetchCallback!(tripId) } catch (err: unknown) {
-            console.error('Failed to refetch trip data on reconnect:', err)
-          }
-        })
+        const doRefetch = () => {
+          activeTrips.forEach(tripId => {
+            try { refetchCallback!(tripId) } catch (err: unknown) {
+              console.error('Failed to refetch trip data on reconnect:', err)
+            }
+          })
+        }
+        // Flush queued mutations first so local writes land before server read-back.
+        // If the hook fails, still refetch to keep the UI correct.
+        if (preReconnectHook) {
+          preReconnectHook().catch(console.error).then(doRefetch)
+        } else {
+          doRefetch()
+        }
       }
     }
   }

client/src/components/Admin/AddonManager.test.tsx

@@ -0,0 +1,232 @@
+// FE-ADMIN-ADDON-001 to FE-ADMIN-ADDON-011
+import { render, screen, waitFor, within } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useSettingsStore } from '../../store/settingsStore';
+import { useAddonStore } from '../../store/addonStore';
+import { ToastContainer } from '../shared/Toast';
+import AddonManager from './AddonManager';
+
+function buildAddon(overrides = {}) {
+  return {
+    id: 'todo',
+    name: 'Todo List',
+    description: 'Track tasks',
+    icon: 'ListChecks',
+    type: 'trip',
+    enabled: false,
+    ...overrides,
+  };
+}
+
+beforeAll(() => {
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn(() => ({
+      matches: false,
+      addEventListener: vi.fn(),
+      removeEventListener: vi.fn(),
+    })),
+  });
+});
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useSettingsStore, { settings: { dark_mode: false } });
+  vi.spyOn(useAddonStore.getState(), 'loadAddons').mockResolvedValue(undefined);
+  server.use(
+    http.get('/api/admin/addons', () => HttpResponse.json({ addons: [] }))
+  );
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('AddonManager', () => {
+  it('FE-ADMIN-ADDON-001: loading spinner shown while fetching', async () => {
+    server.use(
+      http.get('/api/admin/addons', async () => {
+        await new Promise(resolve => setTimeout(resolve, 200));
+        return HttpResponse.json({ addons: [] });
+      })
+    );
+    render(<AddonManager />);
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-002: empty state when addons list is empty', async () => {
+    render(<AddonManager />);
+    await screen.findByText('No addons available');
+  });
+
+  it('FE-ADMIN-ADDON-003: trip addons section renders with correct section header', async () => {
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({ addons: [buildAddon({ id: 'todo', name: 'Todo List', type: 'trip' })] })
+      )
+    );
+    render(<AddonManager />);
+    await screen.findByText('Todo List');
+    // Section header contains "Trip" and "Available as a tab within each trip"
+    expect(screen.getAllByText(/Trip/).length).toBeGreaterThan(0);
+    expect(screen.getByText(/Available as a tab within each trip/)).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-004: global and integration sections render when present', async () => {
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({
+          addons: [
+            buildAddon({ id: 'global1', name: 'Global Feature', type: 'global' }),
+            buildAddon({ id: 'int1', name: 'Integration Feature', type: 'integration' }),
+          ],
+        })
+      )
+    );
+    render(<AddonManager />);
+    await screen.findByText('Global Feature');
+    expect(screen.getAllByText(/Global/).length).toBeGreaterThan(0);
+    expect(screen.getAllByText(/Integration/).length).toBeGreaterThan(0);
+  });
+
+  it('FE-ADMIN-ADDON-005: toggle enables a disabled addon (optimistic update)', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({ addons: [buildAddon({ id: 'todo', enabled: false })] })
+      ),
+      http.put('/api/admin/addons/todo', () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<><ToastContainer /><AddonManager /></>);
+    await screen.findByText('Todo List');
+
+    // Get toggle button - use getAllByRole since there might be multiple buttons
+    const buttons = screen.getAllByRole('button');
+    const toggleBtn = buttons.find(b => b.classList.contains('rounded-full'));
+    expect(toggleBtn).toBeInTheDocument();
+
+    // Before click - disabled state (border-primary bg)
+    await user.click(toggleBtn!);
+
+    // After click - success toast
+    await screen.findByText('Addon updated');
+  });
+
+  it('FE-ADMIN-ADDON-006: toggle rolls back on API failure', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({ addons: [buildAddon({ id: 'todo', enabled: false })] })
+      ),
+      http.put('/api/admin/addons/todo', () =>
+        HttpResponse.error()
+      )
+    );
+    render(<><ToastContainer /><AddonManager /></>);
+    await screen.findByText('Todo List');
+
+    const buttons = screen.getAllByRole('button');
+    const toggleBtn = buttons.find(b => b.classList.contains('rounded-full'));
+    await user.click(toggleBtn!);
+
+    // Error toast appears
+    await screen.findByText('Failed to update addon');
+
+    // The disabled text should be back after rollback
+    await waitFor(() => {
+      const disabledTexts = screen.getAllByText('Disabled');
+      expect(disabledTexts.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('FE-ADMIN-ADDON-007: bag tracking sub-toggle renders when packing addon is enabled', async () => {
+    const user = userEvent.setup();
+    const mockToggle = vi.fn();
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({ addons: [buildAddon({ id: 'packing', enabled: true })] })
+      )
+    );
+    render(
+      <AddonManager bagTrackingEnabled={false} onToggleBagTracking={mockToggle} />
+    );
+    await screen.findByText('Bag Tracking');
+    const bagTrackingToggle = screen.getAllByRole('button').find(b =>
+      b.closest('[style*="paddingLeft: 70"]') !== null || b.closest('div')?.textContent?.includes('Bag Tracking')
+    );
+    // Click the bag tracking toggle button (the h-6 w-11 button near "Bag Tracking")
+    const allBtns = screen.getAllByRole('button').filter(b => b.classList.contains('rounded-full'));
+    // There should be two toggle buttons: one for the addon, one for bag tracking
+    await user.click(allBtns[allBtns.length - 1]);
+    expect(mockToggle).toHaveBeenCalled();
+  });
+
+  it('FE-ADMIN-ADDON-008: bag tracking hidden when packing addon is disabled', async () => {
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({ addons: [buildAddon({ id: 'packing', enabled: false })] })
+      )
+    );
+    render(
+      <AddonManager bagTrackingEnabled={false} onToggleBagTracking={vi.fn()} />
+    );
+    await screen.findByText('Lists');
+    expect(screen.queryByText('Bag Tracking')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-009: bag tracking hidden when onToggleBagTracking prop not provided', async () => {
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({ addons: [buildAddon({ id: 'packing', enabled: true })] })
+      )
+    );
+    render(<AddonManager bagTrackingEnabled={false} />);
+    await screen.findByText('Lists');
+    expect(screen.queryByText('Bag Tracking')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-ADDON-010: photo provider sub-toggles shown under Journey addon', async () => {
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({
+          addons: [
+            buildAddon({ id: 'journey', name: 'Journey', type: 'global', icon: 'Compass', enabled: true }),
+            buildAddon({ id: 'photos', name: 'Memories', type: 'trip', icon: 'Image', enabled: false }),
+            buildAddon({ id: 'unsplash', name: 'Unsplash', type: 'photo_provider', enabled: true }),
+            buildAddon({ id: 'pexels', name: 'Pexels', type: 'photo_provider', enabled: false }),
+          ],
+        })
+      )
+    );
+    render(<AddonManager />);
+
+    // Provider sub-rows are visible under Journey addon
+    await screen.findByText('Unsplash');
+    expect(screen.getByText('Pexels')).toBeInTheDocument();
+
+    // Journey addon is rendered
+    expect(screen.getByText('Journey')).toBeInTheDocument();
+
+    // Toggle buttons: journey toggle + 2 provider toggles
+    const toggleBtns = screen.getAllByRole('button').filter(b => b.classList.contains('rounded-full'));
+    expect(toggleBtns.length).toBe(3);
+  });
+
+  it('FE-ADMIN-ADDON-011: icon falls back to Puzzle when icon name unknown', async () => {
+    server.use(
+      http.get('/api/admin/addons', () =>
+        HttpResponse.json({
+          addons: [buildAddon({ id: 'mystery', name: 'Mystery Addon', icon: 'NonExistentIcon', type: 'trip' })],
+        })
+      )
+    );
+    // Should not throw; Puzzle icon is used as fallback
+    expect(() => render(<AddonManager />)).not.toThrow();
+    await screen.findByText('Mystery Addon');
+  });
+});

client/src/components/Admin/AddonManager.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2 } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen } from 'lucide-react'
 
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen,
 }
 
 interface Addon {
@@ -15,7 +15,17 @@ interface Addon {
   name: string
   description: string
   icon: string
+  type: string
   enabled: boolean
+  config?: Record<string, unknown>
+}
+
+interface ProviderOption {
+  key: string
+  label: string
+  description: string
+  enabled: boolean
+  toggle: () => Promise<void>
 }
 
 interface AddonIconProps {
@@ -34,7 +44,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
   const dark = dm === true || dm === 'dark' || (dm === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
   const toast = useToast()
   const refreshGlobalAddons = useAddonStore(s => s.loadAddons)
-  const [addons, setAddons] = useState([])
+  const [addons, setAddons] = useState<Addon[]>([])
   const [loading, setLoading] = useState(true)
 
   useEffect(() => {
@@ -53,7 +63,7 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
     }
   }
 
-  const handleToggle = async (addon) => {
+  const handleToggle = async (addon: Addon) => {
     const newEnabled = !addon.enabled
     // Optimistic update
     setAddons(prev => prev.map(a => a.id === addon.id ? { ...a, enabled: newEnabled } : a))
@@ -68,9 +78,44 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
     }
   }
 
-  const tripAddons = addons.filter(a => a.type === 'trip')
+  const isPhotoProviderAddon = (addon: Addon) => {
+    return addon.type === 'photo_provider'
+  }
+
+  const isPhotosAddon = (addon: Addon) => {
+    const haystack = `${addon.id} ${addon.name} ${addon.description}`.toLowerCase()
+    return addon.type === 'trip' && (addon.icon === 'Image' || haystack.includes('photo') || haystack.includes('memories'))
+  }
+
+  const handleTogglePhotoProvider = async (providerAddon: Addon) => {
+    const enableProvider = !providerAddon.enabled
+    const prev = addons
+
+    setAddons(current => current.map(a => a.id === providerAddon.id ? { ...a, enabled: enableProvider } : a))
+
+    try {
+      await adminApi.updateAddon(providerAddon.id, { enabled: enableProvider })
+      refreshGlobalAddons()
+      toast.success(t('admin.addons.toast.updated'))
+    } catch {
+      setAddons(prev)
+      toast.error(t('admin.addons.toast.error'))
+    }
+  }
+
+  const photoProviderAddons = addons.filter(isPhotoProviderAddon)
+  const photosAddon = addons.filter(a => a.type === 'trip').find(isPhotosAddon)
+  const tripAddons = addons.filter(a => a.type === 'trip' && !isPhotosAddon(a))
   const globalAddons = addons.filter(a => a.type === 'global')
   const integrationAddons = addons.filter(a => a.type === 'integration')
+  const providerOptions: ProviderOption[] = photoProviderAddons.map((provider) => ({
+      key: provider.id,
+      label: provider.name,
+      description: provider.description,
+      enabled: provider.enabled,
+      toggle: () => handleTogglePhotoProvider(provider),
+    }))
+  const photosDerivedEnabled = providerOptions.some(p => p.enabled)
 
   if (loading) {
     return (
@@ -143,7 +188,37 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
                   </span>
                 </div>
                 {globalAddons.map(addon => (
-                  <AddonRow key={addon.id} addon={addon} onToggle={handleToggle} t={t} />
+                  <div key={addon.id}>
+                    <AddonRow addon={addon} onToggle={handleToggle} t={t} />
+                    {/* Memories providers as sub-items under Journey addon */}
+                    {addon.id === 'journey' && providerOptions.length > 0 && (
+                      <div className="px-6 py-3 border-b" style={{ borderColor: 'var(--border-secondary)', background: 'var(--bg-secondary)', paddingLeft: 70 }}>
+                        <div className="space-y-2">
+                          {providerOptions.map(provider => (
+                            <div key={provider.key} className="flex items-center gap-4" style={{ minHeight: 32 }}>
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                                <div className="text-sm font-medium" style={{ color: 'var(--text-secondary)' }}>{provider.label}</div>
+                                <div className="text-xs mt-0.5" style={{ color: 'var(--text-faint)' }}>{provider.description}</div>
+                              </div>
+                              <div className="flex items-center gap-2 shrink-0">
+                                <span className="hidden sm:inline text-xs font-medium" style={{ color: provider.enabled ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+                                  {provider.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+                                </span>
+                                <button
+                                  onClick={provider.toggle}
+                                  className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+                                  style={{ background: provider.enabled ? 'var(--text-primary)' : 'var(--border-primary)' }}
+                                >
+                                  <span className="absolute left-0.5 h-5 w-5 rounded-full bg-white transition-transform duration-200"
+                                    style={{ transform: provider.enabled ? 'translateX(20px)' : 'translateX(0)' }} />
+                                </button>
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
                 ))}
               </div>
             )}
@@ -171,8 +246,10 @@ export default function AddonManager({ bagTrackingEnabled, onToggleBagTracking }
 
 interface AddonRowProps {
   addon: Addon
-  onToggle: (addonId: string) => void
+  onToggle: (addon: Addon) => void
   t: (key: string) => string
+  statusOverride?: boolean
+  hideToggle?: boolean
 }
 
 function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string; description: string } {
@@ -187,9 +264,12 @@ function getAddonLabel(t: (key: string) => string, addon: Addon): { name: string
   }
 }
 
-function AddonRow({ addon, onToggle, t }: AddonRowProps) {
+function AddonRow({ addon, onToggle, t, nameOverride, descriptionOverride, statusOverride, hideToggle }: AddonRowProps & { nameOverride?: string; descriptionOverride?: string }) {
   const isComingSoon = false
   const label = getAddonLabel(t, addon)
+  const displayName = nameOverride || label.name
+  const displayDescription = descriptionOverride || label.description
+  const enabledState = statusOverride ?? addon.enabled
   return (
     <div className="flex items-center gap-4 px-6 py-4 border-b transition-colors hover:opacity-95" style={{ borderColor: 'var(--border-secondary)', opacity: isComingSoon ? 0.5 : 1, pointerEvents: isComingSoon ? 'none' : 'auto' }}>
       {/* Icon */}
@@ -200,7 +280,7 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
       {/* Info */}
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{label.name}</span>
+          <span className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{displayName}</span>
           {isComingSoon && (
             <span className="text-[9px] font-semibold px-2 py-0.5 rounded-full" style={{ background: 'var(--bg-tertiary)', color: 'var(--text-faint)' }}>
               Coming Soon
@@ -210,28 +290,30 @@ function AddonRow({ addon, onToggle, t }: AddonRowProps) {
             {addon.type === 'global' ? t('admin.addons.type.global') : addon.type === 'integration' ? t('admin.addons.type.integration') : t('admin.addons.type.trip')}
           </span>
         </div>
-        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{label.description}</p>
+        <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{displayDescription}</p>
       </div>
 
       {/* Toggle */}
       <div className="flex items-center gap-2 shrink-0">
-        <span className="hidden sm:inline text-xs font-medium" style={{ color: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
-          {isComingSoon ? t('admin.addons.disabled') : addon.enabled ? t('admin.addons.enabled') : t('admin.addons.disabled')}
+        <span className="hidden sm:inline text-xs font-medium" style={{ color: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--text-faint)' }}>
+          {isComingSoon ? t('admin.addons.disabled') : enabledState ? t('admin.addons.enabled') : t('admin.addons.disabled')}
         </span>
-        <button
-          onClick={() => !isComingSoon && onToggle(addon)}
-          disabled={isComingSoon}
-          className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
-          style={{ background: (addon.enabled && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
-        >
-          <span
-            className="inline-block h-4 w-4 transform rounded-full transition-transform"
-            style={{
-              background: 'var(--bg-card)',
-              transform: (addon.enabled && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
-            }}
-          />
-        </button>
+        {!hideToggle && (
+          <button
+            onClick={() => !isComingSoon && onToggle(addon)}
+            disabled={isComingSoon}
+            className="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
+            style={{ background: (enabledState && !isComingSoon) ? 'var(--text-primary)' : 'var(--border-primary)', cursor: isComingSoon ? 'not-allowed' : 'pointer' }}
+          >
+            <span
+              className="inline-block h-4 w-4 transform rounded-full transition-transform"
+              style={{
+                background: 'var(--bg-card)',
+                transform: (enabledState && !isComingSoon) ? 'translateX(22px)' : 'translateX(4px)',
+              }}
+            />
+          </button>
+        )}
       </div>
     </div>
   )

client/src/components/Admin/AdminMcpTokensPanel.test.tsx

@@ -0,0 +1,323 @@
+// FE-ADMIN-MCP-001 to FE-ADMIN-MCP-016
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { resetAllStores } from '../../../tests/helpers/store';
+import { ToastContainer } from '../shared/Toast';
+import AdminMcpTokensPanel from './AdminMcpTokensPanel';
+
+const TOKEN_1 = {
+  id: 1,
+  name: 'CI Token',
+  token_prefix: 'trek_abc',
+  created_at: '2025-01-15T00:00:00Z',
+  last_used_at: null,
+  user_id: 10,
+  username: 'alice',
+};
+
+const TOKEN_2 = {
+  id: 2,
+  name: 'Ops Token',
+  token_prefix: 'trek_xyz',
+  created_at: '2025-03-01T00:00:00Z',
+  last_used_at: '2025-04-01T00:00:00Z',
+  user_id: 11,
+  username: 'bob',
+};
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+describe('AdminMcpTokensPanel', () => {
+  it('FE-ADMIN-MCP-001: loading spinner shown on mount', async () => {
+    server.use(
+      http.get('/api/admin/mcp-tokens', async () => {
+        await new Promise(resolve => setTimeout(resolve, 200));
+        return HttpResponse.json({ tokens: [] });
+      })
+    );
+    render(<AdminMcpTokensPanel />);
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-002: empty state rendered when no tokens', async () => {
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('No MCP tokens have been created yet');
+  });
+
+  it('FE-ADMIN-MCP-003: token list renders correctly', async () => {
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('CI Token');
+    expect(screen.getByText('Ops Token')).toBeInTheDocument();
+    expect(screen.getByText('alice')).toBeInTheDocument();
+    expect(screen.getByText('bob')).toBeInTheDocument();
+    // token_prefix is rendered as `{token.token_prefix}...` — two adjacent text nodes
+    expect(screen.getByText(/trek_abc/)).toBeInTheDocument();
+    expect(screen.getByText(/trek_xyz/)).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-004: "Never" shown when last_used_at is null', async () => {
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('CI Token');
+    expect(screen.getByText('Never')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-005: delete confirmation dialog opens', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('CI Token');
+
+    const deleteButtons = screen.getAllByTitle('Delete');
+    await user.click(deleteButtons[0]);
+
+    expect(screen.getByText('Delete Token')).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    // Dialog Delete button has visible text "Delete"; trash icon buttons have no text content
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-006: cancel closes confirmation dialog without deleting', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('CI Token');
+
+    const deleteButtons = screen.getAllByTitle('Delete');
+    await user.click(deleteButtons[0]);
+    expect(screen.getByText('Delete Token')).toBeInTheDocument();
+
+    await user.click(screen.getByText('Cancel'));
+
+    expect(screen.queryByText('Delete Token')).not.toBeInTheDocument();
+    expect(screen.getByText('CI Token')).toBeInTheDocument();
+    expect(screen.getByText('Ops Token')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-007: backdrop click closes dialog', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('CI Token');
+
+    const deleteButtons = screen.getAllByTitle('Delete');
+    await user.click(deleteButtons[0]);
+    expect(screen.getByText('Delete Token')).toBeInTheDocument();
+
+    const backdrop = document.querySelector('.fixed.inset-0');
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop!);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Token')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-ADMIN-MCP-008: successful delete removes token from list', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      ),
+      http.delete('/api/admin/mcp-tokens/:id', () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<><ToastContainer /><AdminMcpTokensPanel /></>);
+    await screen.findByText('CI Token');
+
+    const deleteButtons = screen.getAllByTitle('Delete');
+    await user.click(deleteButtons[0]);
+    await user.click(screen.getByText('Delete'));
+
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Token')).not.toBeInTheDocument();
+    });
+    expect(screen.queryByText('CI Token')).not.toBeInTheDocument();
+    expect(screen.getByText('Ops Token')).toBeInTheDocument();
+    await screen.findByText('Token deleted');
+  });
+
+  it('FE-ADMIN-MCP-009: failed delete shows error toast and keeps list unchanged', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ tokens: [TOKEN_1, TOKEN_2] })
+      ),
+      http.delete('/api/admin/mcp-tokens/:id', () =>
+        HttpResponse.json({ error: 'forbidden' }, { status: 403 })
+      )
+    );
+    render(<><ToastContainer /><AdminMcpTokensPanel /></>);
+    await screen.findByText('CI Token');
+
+    const deleteButtons = screen.getAllByTitle('Delete');
+    await user.click(deleteButtons[0]);
+    await user.click(screen.getByText('Delete'));
+
+    await screen.findByText('Failed to delete token');
+    expect(screen.getByText('CI Token')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-010: load failure shows error toast', async () => {
+    server.use(
+      http.get('/api/admin/mcp-tokens', () =>
+        HttpResponse.json({ error: 'server error' }, { status: 500 })
+      )
+    );
+    render(<><ToastContainer /><AdminMcpTokensPanel /></>);
+    await screen.findByText('Failed to load tokens');
+  });
+
+  it('FE-ADMIN-MCP-011: OAuth sessions loading spinner shown on mount', async () => {
+    server.use(
+      http.get('/api/admin/oauth-sessions', async () => {
+        await new Promise(resolve => setTimeout(resolve, 200));
+        return HttpResponse.json({ sessions: [] });
+      })
+    );
+    render(<AdminMcpTokensPanel />);
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-012: OAuth sessions empty state rendered when no sessions', async () => {
+    server.use(
+      http.get('/api/admin/oauth-sessions', () =>
+        HttpResponse.json({ sessions: [] })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('No active OAuth sessions');
+  });
+
+  it('FE-ADMIN-MCP-013: OAuth sessions list renders with scopes', async () => {
+    server.use(
+      http.get('/api/admin/oauth-sessions', () =>
+        HttpResponse.json({
+          sessions: [
+            {
+              id: 1,
+              client_name: 'Claude Desktop',
+              username: 'alice',
+              scopes: ['trips:read', 'budget:read'],
+              created_at: '2025-01-01T00:00:00Z',
+            },
+          ],
+        })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('Claude Desktop');
+    expect(screen.getByText('alice')).toBeInTheDocument();
+    expect(screen.getByText('trips:read')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-014: scope expand/collapse toggle shows hidden scopes', async () => {
+    const user = userEvent.setup();
+    // 7 scopes — more than SCOPES_PREVIEW=6, so "+1 more" button appears
+    const scopes = ['trips:read', 'trips:write', 'places:read', 'places:write', 'budget:read', 'budget:write', 'packing:read'];
+    server.use(
+      http.get('/api/admin/oauth-sessions', () =>
+        HttpResponse.json({
+          sessions: [
+            { id: 1, client_name: 'App', username: 'bob', scopes, created_at: '2025-01-01T00:00:00Z' },
+          ],
+        })
+      )
+    );
+    render(<AdminMcpTokensPanel />);
+    await screen.findByText('App');
+    // "+1 more" button should appear
+    const moreBtn = await screen.findByText(/\+1 more/);
+    expect(moreBtn).toBeInTheDocument();
+    await user.click(moreBtn);
+    // After expand, "show less" appears
+    expect(await screen.findByText('show less')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-MCP-015: revoke session confirmation and successful revoke', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/oauth-sessions', () =>
+        HttpResponse.json({
+          sessions: [
+            { id: 5, client_name: 'Revoke Me', username: 'carol', scopes: ['trips:read'], created_at: '2025-01-01T00:00:00Z' },
+          ],
+        })
+      ),
+      http.delete('/api/admin/oauth-sessions/5', () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<><ToastContainer /><AdminMcpTokensPanel /></>);
+    await screen.findByText('Revoke Me');
+
+    // Click the revoke (trash) button next to the session
+    const deleteBtn = screen.getAllByTitle('Delete')[0];
+    await user.click(deleteBtn);
+
+    // Confirmation modal opens
+    expect(screen.getByText('Revoke Session')).toBeInTheDocument();
+    // Confirm — find the modal's Delete button (has no title, unlike the trash icon)
+    const deleteBtns = screen.getAllByRole('button', { name: 'Delete' });
+    const confirmBtn = deleteBtns.find(b => !b.title);
+    await user.click(confirmBtn ?? deleteBtns[deleteBtns.length - 1]);
+    await waitFor(() => {
+      expect(screen.queryByText('Revoke Me')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-ADMIN-MCP-016: revoke session error shows toast', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/oauth-sessions', () =>
+        HttpResponse.json({
+          sessions: [
+            { id: 6, client_name: 'Error Session', username: 'dave', scopes: ['trips:read'], created_at: '2025-01-01T00:00:00Z' },
+          ],
+        })
+      ),
+      http.delete('/api/admin/oauth-sessions/6', () =>
+        HttpResponse.json({ error: 'forbidden' }, { status: 403 })
+      )
+    );
+    render(<><ToastContainer /><AdminMcpTokensPanel /></>);
+    await screen.findByText('Error Session');
+
+    const deleteBtn = screen.getAllByTitle('Delete')[0];
+    await user.click(deleteBtn);
+    const deleteBtns = screen.getAllByRole('button', { name: 'Delete' });
+    const confirmBtn = deleteBtns.find(b => !b.title);
+    await user.click(confirmBtn ?? deleteBtns[deleteBtns.length - 1]);
+    await screen.findByText('Failed to revoke session');
+  });
+});

client/src/components/Admin/AdminMcpTokensPanel.tsx

@@ -1,9 +1,21 @@
 import { useState, useEffect } from 'react'
 import { adminApi } from '../../api/client'
 import { useToast } from '../shared/Toast'
-import { Key, Trash2, User, Loader2 } from 'lucide-react'
+import { Key, Trash2, User, Loader2, Shield } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 
+interface AdminOAuthSession {
+  id: number
+  client_id: string
+  client_name: string
+  user_id: number
+  username: string
+  scopes: string[]
+  access_token_expires_at: string
+  refresh_token_expires_at: string
+  created_at: string
+}
+
 interface AdminMcpToken {
   id: number
   name: string
@@ -14,21 +26,49 @@ interface AdminMcpToken {
   username: string
 }
 
+const SCOPES_PREVIEW = 6
+
 export default function AdminMcpTokensPanel() {
+  const [sessions, setSessions] = useState<AdminOAuthSession[]>([])
+  const [sessionsLoading, setSessionsLoading] = useState(true)
   const [tokens, setTokens] = useState<AdminMcpToken[]>([])
-  const [isLoading, setIsLoading] = useState(true)
+  const [tokensLoading, setTokensLoading] = useState(true)
+  const [expandedScopes, setExpandedScopes] = useState<Set<number>>(new Set())
+  const [revokeConfirmId, setRevokeConfirmId] = useState<number | null>(null)
   const [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null)
+
+  const toggleScopes = (id: number) =>
+    setExpandedScopes(prev => {
+      const next = new Set(prev)
+      next.has(id) ? next.delete(id) : next.add(id)
+      return next
+    })
   const toast = useToast()
   const { t, locale } = useTranslation()
 
   useEffect(() => {
-    setIsLoading(true)
+    adminApi.oauthSessions()
+      .then(d => setSessions(d.sessions || []))
+      .catch(() => toast.error(t('admin.oauthSessions.loadError')))
+      .finally(() => setSessionsLoading(false))
+
     adminApi.mcpTokens()
       .then(d => setTokens(d.tokens || []))
       .catch(() => toast.error(t('admin.mcpTokens.loadError')))
-      .finally(() => setIsLoading(false))
+      .finally(() => setTokensLoading(false))
   }, [])
 
+  const handleRevoke = async (id: number) => {
+    try {
+      await adminApi.revokeOAuthSession(id)
+      setSessions(prev => prev.filter(s => s.id !== id))
+      setRevokeConfirmId(null)
+      toast.success(t('admin.oauthSessions.revokeSuccess'))
+    } catch {
+      toast.error(t('admin.oauthSessions.revokeError'))
+    }
+  }
+
   const handleDelete = async (id: number) => {
     try {
       await adminApi.deleteMcpToken(id)
@@ -47,55 +87,156 @@ export default function AdminMcpTokensPanel() {
         <p className="text-sm mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.subtitle')}</p>
       </div>
 
-      <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
-        {isLoading ? (
-          <div className="flex items-center justify-center py-12">
-            <Loader2 className="w-5 h-5 animate-spin" style={{ color: 'var(--text-tertiary)' }} />
-          </div>
-        ) : tokens.length === 0 ? (
-          <div className="flex flex-col items-center justify-center py-12 gap-2">
-            <Key className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
-            <p className="text-sm" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.empty')}</p>
-          </div>
-        ) : (
-          <>
-            <div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-x-4 px-4 py-2.5 text-xs font-medium border-b"
-              style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)' }}>
-              <span>{t('admin.mcpTokens.tokenName')}</span>
-              <span>{t('admin.mcpTokens.owner')}</span>
-              <span className="text-right">{t('admin.mcpTokens.created')}</span>
-              <span className="text-right">{t('admin.mcpTokens.lastUsed')}</span>
-              <span></span>
+      {/* OAuth Sessions */}
+      <div>
+        <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--text-secondary)' }}>{t('admin.oauthSessions.sectionTitle')}</h3>
+        <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
+          {sessionsLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="w-5 h-5 animate-spin" style={{ color: 'var(--text-tertiary)' }} />
             </div>
-            {tokens.map((token, i) => (
-              <div key={token.id}
-                className="grid grid-cols-[1fr_auto_auto_auto_auto] items-center gap-x-4 px-4 py-3"
-                style={{ borderBottom: i < tokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
-                  <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{token.token_prefix}...</p>
-                </div>
-                <div className="flex items-center gap-1.5 text-sm" style={{ color: 'var(--text-secondary)' }}>
-                  <User className="w-3.5 h-3.5 flex-shrink-0" />
-                  <span className="whitespace-nowrap">{token.username}</span>
-                </div>
-                <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
-                  {new Date(token.created_at).toLocaleDateString(locale)}
-                </span>
-                <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
-                  {token.last_used_at ? new Date(token.last_used_at).toLocaleDateString(locale) : t('admin.mcpTokens.never')}
-                </span>
-                <button onClick={() => setDeleteConfirmId(token.id)}
-                  className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
-                  style={{ color: 'var(--text-tertiary)' }} title={t('common.delete')}>
-                  <Trash2 className="w-4 h-4" />
-                </button>
+          ) : sessions.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 gap-2">
+              <Shield className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
+              <p className="text-sm" style={{ color: 'var(--text-tertiary)' }}>{t('admin.oauthSessions.empty')}</p>
+            </div>
+          ) : (
+            <>
+              <div className="grid grid-cols-[1fr_auto_auto_auto] gap-x-6 px-4 py-2.5 text-xs font-medium border-b"
+                style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)' }}>
+                <span>{t('admin.oauthSessions.clientName')}</span>
+                <span>{t('admin.oauthSessions.owner')}</span>
+                <span className="text-right">{t('admin.oauthSessions.created')}</span>
+                <span></span>
               </div>
-            ))}
-          </>
-        )}
+              {sessions.map((session, i) => {
+                const expanded = expandedScopes.has(session.id)
+                const visible = expanded ? session.scopes : session.scopes.slice(0, SCOPES_PREVIEW)
+                const hidden = session.scopes.length - SCOPES_PREVIEW
+                return (
+                  <div key={session.id}
+                    className="grid grid-cols-[1fr_auto_auto_auto] items-start gap-x-6 px-4 py-3"
+                    style={{ borderBottom: i < sessions.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                    <div className="min-w-0">
+                      <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{session.client_name}</p>
+                      <div className="flex flex-wrap gap-1 mt-1.5">
+                        {visible.map(scope => (
+                          <span key={scope} className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-mono"
+                            style={{ background: 'var(--bg-secondary)', color: 'var(--text-tertiary)', border: '1px solid var(--border-primary)' }}>
+                            {scope}
+                          </span>
+                        ))}
+                        {!expanded && hidden > 0 && (
+                          <button onClick={() => toggleScopes(session.id)}
+                            className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium transition-colors hover:opacity-80"
+                            style={{ background: 'var(--bg-secondary)', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)' }}>
+                            +{hidden} more
+                          </button>
+                        )}
+                        {expanded && hidden > 0 && (
+                          <button onClick={() => toggleScopes(session.id)}
+                            className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium transition-colors hover:opacity-80"
+                            style={{ background: 'var(--bg-secondary)', color: 'var(--text-secondary)', border: '1px solid var(--border-primary)' }}>
+                            show less
+                          </button>
+                        )}
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-1.5 text-sm pt-0.5" style={{ color: 'var(--text-secondary)' }}>
+                      <User className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span className="whitespace-nowrap">{session.username}</span>
+                    </div>
+                    <span className="text-xs whitespace-nowrap text-right pt-0.5" style={{ color: 'var(--text-tertiary)' }}>
+                      {new Date(session.created_at).toLocaleDateString(locale)}
+                    </span>
+                    <button onClick={() => setRevokeConfirmId(session.id)}
+                      className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                      style={{ color: 'var(--text-tertiary)' }} title={t('common.delete')}>
+                      <Trash2 className="w-4 h-4" />
+                    </button>
+                  </div>
+                )
+              })}
+            </>
+          )}
+        </div>
       </div>
 
+      {/* MCP Tokens */}
+      <div>
+        <h3 className="text-sm font-semibold mb-2" style={{ color: 'var(--text-secondary)' }}>{t('admin.mcpTokens.sectionTitle')}</h3>
+        <div className="rounded-xl border overflow-hidden" style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}>
+          {tokensLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="w-5 h-5 animate-spin" style={{ color: 'var(--text-tertiary)' }} />
+            </div>
+          ) : tokens.length === 0 ? (
+            <div className="flex flex-col items-center justify-center py-12 gap-2">
+              <Key className="w-8 h-8" style={{ color: 'var(--text-tertiary)' }} />
+              <p className="text-sm" style={{ color: 'var(--text-tertiary)' }}>{t('admin.mcpTokens.empty')}</p>
+            </div>
+          ) : (
+            <>
+              <div className="grid grid-cols-[1fr_auto_auto_auto_auto] gap-x-4 px-4 py-2.5 text-xs font-medium border-b"
+                style={{ color: 'var(--text-tertiary)', borderColor: 'var(--border-primary)', background: 'var(--bg-secondary)' }}>
+                <span>{t('admin.mcpTokens.tokenName')}</span>
+                <span>{t('admin.mcpTokens.owner')}</span>
+                <span className="text-right">{t('admin.mcpTokens.created')}</span>
+                <span className="text-right">{t('admin.mcpTokens.lastUsed')}</span>
+                <span></span>
+              </div>
+              {tokens.map((token, i) => (
+                <div key={token.id}
+                  className="grid grid-cols-[1fr_auto_auto_auto_auto] items-center gap-x-4 px-4 py-3"
+                  style={{ borderBottom: i < tokens.length - 1 ? '1px solid var(--border-primary)' : undefined }}>
+                  <div className="min-w-0">
+                    <p className="text-sm font-medium truncate" style={{ color: 'var(--text-primary)' }}>{token.name}</p>
+                    <p className="text-xs font-mono mt-0.5" style={{ color: 'var(--text-tertiary)' }}>{token.token_prefix}...</p>
+                  </div>
+                  <div className="flex items-center gap-1.5 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                    <User className="w-3.5 h-3.5 flex-shrink-0" />
+                    <span className="whitespace-nowrap">{token.username}</span>
+                  </div>
+                  <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
+                    {new Date(token.created_at).toLocaleDateString(locale)}
+                  </span>
+                  <span className="text-xs whitespace-nowrap text-right" style={{ color: 'var(--text-tertiary)' }}>
+                    {token.last_used_at ? new Date(token.last_used_at).toLocaleDateString(locale) : t('admin.mcpTokens.never')}
+                  </span>
+                  <button onClick={() => setDeleteConfirmId(token.id)}
+                    className="p-1.5 rounded-lg transition-colors hover:bg-red-50 hover:text-red-600 dark:hover:bg-red-900/20"
+                    style={{ color: 'var(--text-tertiary)' }} title={t('common.delete')}>
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </>
+          )}
+        </div>
+      </div>
+
+      {/* Revoke OAuth session modal */}
+      {revokeConfirmId !== null && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
+          onClick={e => { if (e.target === e.currentTarget) setRevokeConfirmId(null) }}>
+          <div className="rounded-xl shadow-xl w-full max-w-sm p-6 space-y-4" style={{ background: 'var(--bg-card)' }}>
+            <h3 className="text-base font-semibold" style={{ color: 'var(--text-primary)' }}>{t('admin.oauthSessions.revokeTitle')}</h3>
+            <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>{t('admin.oauthSessions.revokeMessage')}</p>
+            <div className="flex gap-2 justify-end">
+              <button onClick={() => setRevokeConfirmId(null)}
+                className="px-4 py-2 rounded-lg text-sm border" style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+                {t('common.cancel')}
+              </button>
+              <button onClick={() => handleRevoke(revokeConfirmId)}
+                className="px-4 py-2 rounded-lg text-sm font-medium text-white bg-red-600 hover:bg-red-700">
+                {t('common.delete')}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Delete MCP token modal */}
       {deleteConfirmId !== null && (
         <div className="fixed inset-0 z-50 flex items-center justify-center p-4" style={{ background: 'rgba(0,0,0,0.5)' }}
           onClick={e => { if (e.target === e.currentTarget) setDeleteConfirmId(null) }}>

client/src/components/Admin/AuditLogPanel.test.tsx

@@ -0,0 +1,223 @@
+// FE-ADMIN-AUDIT-001 to FE-ADMIN-AUDIT-010
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { resetAllStores } from '../../../tests/helpers/store';
+import AuditLogPanel from './AuditLogPanel';
+
+const ENTRY_1 = {
+  id: 1,
+  created_at: '2025-06-01T10:30:00Z',
+  user_id: 5,
+  username: 'alice',
+  user_email: 'alice@example.com',
+  action: 'trip.create',
+  resource: '/trips/42',
+  details: { title: 'Test' },
+  ip: '127.0.0.1',
+};
+
+const ENTRY_2 = {
+  id: 2,
+  created_at: '2025-06-02T11:00:00Z',
+  user_id: 6,
+  username: 'bob',
+  user_email: 'bob@example.com',
+  action: 'trip.delete',
+  resource: '/trips/43',
+  details: null,
+  ip: '10.0.0.1',
+};
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+describe('AuditLogPanel', () => {
+  it('FE-ADMIN-AUDIT-001: loading state shown on mount', async () => {
+    server.use(
+      http.get('/api/admin/audit-log', async () => {
+        await new Promise(() => {}); // never resolves
+        return HttpResponse.json({ entries: [], total: 0 });
+      }),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+    expect(document.querySelector('table')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-002: empty state shown when no entries', async () => {
+    server.use(
+      http.get('/api/admin/audit-log', () =>
+        HttpResponse.json({ entries: [], total: 0 }),
+      ),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('No audit entries yet.');
+    expect(document.querySelector('table')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-003: table renders all columns with data', async () => {
+    server.use(
+      http.get('/api/admin/audit-log', () =>
+        HttpResponse.json({ entries: [ENTRY_1], total: 1 }),
+      ),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('trip.create');
+    expect(screen.getByText('Time')).toBeInTheDocument();
+    expect(screen.getByText('User')).toBeInTheDocument();
+    expect(screen.getByText('Action')).toBeInTheDocument();
+    expect(screen.getByText('Resource')).toBeInTheDocument();
+    expect(screen.getByText('IP')).toBeInTheDocument();
+    expect(screen.getByText('Details')).toBeInTheDocument();
+    expect(screen.getByText('alice')).toBeInTheDocument();
+    expect(screen.getByText('/trips/42')).toBeInTheDocument();
+    expect(screen.getByText('127.0.0.1')).toBeInTheDocument();
+    expect(screen.getByText('{"title":"Test"}')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-004: userLabel fallback chain', async () => {
+    const entries = [
+      { ...ENTRY_1, id: 10, username: 'alice', user_email: null, user_id: 5, action: 'a.username' },
+      { ...ENTRY_1, id: 11, username: null, user_email: 'bob@example.com', user_id: 6, action: 'a.email' },
+      { ...ENTRY_1, id: 12, username: null, user_email: null, user_id: 7, action: 'a.id' },
+      { ...ENTRY_1, id: 13, username: null, user_email: null, user_id: null, action: 'a.none' },
+    ];
+    server.use(
+      http.get('/api/admin/audit-log', () =>
+        HttpResponse.json({ entries, total: 4 }),
+      ),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('a.username');
+    expect(screen.getByText('alice')).toBeInTheDocument();
+    expect(screen.getByText('bob@example.com')).toBeInTheDocument();
+    expect(screen.getByText('#7')).toBeInTheDocument();
+    // '—' appears multiple times (null resource, null ip for some, null user) — just check it exists
+    expect(screen.getAllByText('—').length).toBeGreaterThan(0);
+  });
+
+  it('FE-ADMIN-AUDIT-005: dash shown for null resource, ip, and details', async () => {
+    const entry = {
+      ...ENTRY_1,
+      id: 20,
+      action: 'a.nulls',
+      resource: null,
+      ip: null,
+      details: null,
+    };
+    const entryEmptyDetails = {
+      ...ENTRY_1,
+      id: 21,
+      action: 'a.emptyobj',
+      resource: '/ok',
+      ip: '1.2.3.4',
+      details: {},
+    };
+    server.use(
+      http.get('/api/admin/audit-log', () =>
+        HttpResponse.json({ entries: [entry, entryEmptyDetails], total: 2 }),
+      ),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('a.nulls');
+    // null resource, null ip, null details → three '—' for entry; empty obj details → another '—'
+    const dashes = screen.getAllByText('—');
+    expect(dashes.length).toBeGreaterThanOrEqual(4);
+  });
+
+  it('FE-ADMIN-AUDIT-006: showing count text reflects count and total', async () => {
+    server.use(
+      http.get('/api/admin/audit-log', () =>
+        HttpResponse.json({ entries: [ENTRY_1], total: 50 }),
+      ),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('trip.create');
+    expect(screen.getByText('1 loaded · 50 total')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-007: "Load more" appends entries', async () => {
+    let callCount = 0;
+    server.use(
+      http.get('/api/admin/audit-log', () => {
+        callCount++;
+        if (callCount === 1) {
+          return HttpResponse.json({ entries: [ENTRY_1], total: 2 });
+        }
+        return HttpResponse.json({ entries: [ENTRY_2], total: 2 });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('trip.create');
+    const loadMoreBtn = screen.getByText('Load more');
+    expect(loadMoreBtn).toBeInTheDocument();
+    await user.click(loadMoreBtn);
+    await screen.findByText('trip.delete');
+    expect(screen.getByText('trip.create')).toBeInTheDocument();
+    expect(screen.queryByText('Load more')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-008: "Load more" hidden when all entries loaded', async () => {
+    server.use(
+      http.get('/api/admin/audit-log', () =>
+        HttpResponse.json({ entries: [ENTRY_1, ENTRY_2], total: 2 }),
+      ),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    await screen.findByText('trip.create');
+    expect(screen.queryByText('Load more')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-009: Refresh resets list to page 1', async () => {
+    const PAGE1_ENTRY = { ...ENTRY_1, id: 100, action: 'phase1.action' };
+    const PAGE2_ENTRY = { ...ENTRY_2, id: 101, action: 'phase2.action' };
+    const REFRESH_ENTRY = { ...ENTRY_2, id: 102, action: 'phase3.refresh' };
+    let callCount = 0;
+    server.use(
+      http.get('/api/admin/audit-log', () => {
+        callCount++;
+        if (callCount === 1) {
+          return HttpResponse.json({ entries: [PAGE1_ENTRY], total: 2 });
+        }
+        if (callCount === 2) {
+          return HttpResponse.json({ entries: [PAGE2_ENTRY], total: 2 });
+        }
+        return HttpResponse.json({ entries: [REFRESH_ENTRY], total: 1 });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    // Initial load: PAGE1_ENTRY visible, load more
+    await screen.findByText('phase1.action');
+    const loadMoreBtn = screen.getByText('Load more');
+    await user.click(loadMoreBtn);
+    await screen.findByText('phase2.action');
+    // Now refresh
+    const refreshBtn = screen.getByText('Refresh');
+    await user.click(refreshBtn);
+    // After refresh, only REFRESH_ENTRY should be visible
+    await screen.findByText('phase3.refresh');
+    await waitFor(() => expect(screen.queryByText('phase1.action')).not.toBeInTheDocument());
+    expect(screen.queryByText('phase2.action')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-AUDIT-010: Refresh button is disabled while loading', async () => {
+    server.use(
+      http.get('/api/admin/audit-log', async () => {
+        await new Promise(() => {}); // never resolves
+        return HttpResponse.json({ entries: [], total: 0 });
+      }),
+    );
+    render(<AuditLogPanel serverTimezone="UTC" />);
+    const refreshBtn = screen.getByText('Refresh');
+    expect(refreshBtn.closest('button')).toBeDisabled();
+  });
+});

client/src/components/Admin/BackupPanel.test.tsx

@@ -0,0 +1,313 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, waitFor, within, fireEvent } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { useSettingsStore } from '../../store/settingsStore'
+import { server } from '../../../tests/helpers/msw/server'
+import { http, HttpResponse } from 'msw'
+import BackupPanel from './BackupPanel'
+import { ToastContainer } from '../shared/Toast'
+
+const manualBackup = {
+  filename: 'backup-2025-01-15.zip',
+  created_at: '2025-01-15T10:00:00Z',
+  size: 2048000,
+}
+const autoBackup = {
+  filename: 'auto-backup-2025-02-01.zip',
+  created_at: '2025-02-01T02:00:00Z',
+  size: 1024000,
+}
+
+function defaultBackupHandlers() {
+  return [
+    http.get('/api/backup/list', () => HttpResponse.json({ backups: [manualBackup] })),
+    http.get('/api/backup/auto-settings', () =>
+      HttpResponse.json({
+        settings: { enabled: false, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
+        timezone: 'UTC',
+      }),
+    ),
+  ]
+}
+
+function getToggleButton() {
+  // The enable toggle is a <button> inside a <label> that contains "Enable auto-backup"
+  const label = screen.getByText('Enable auto-backup').closest('label') as HTMLElement
+  return label.querySelector('button') as HTMLElement
+}
+
+describe('BackupPanel', () => {
+  beforeEach(() => {
+    resetAllStores()
+    seedStore(useSettingsStore, { settings: { time_format: '24h' } } as any)
+    vi.spyOn(window, 'confirm').mockReturnValue(true)
+    server.use(...defaultBackupHandlers())
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+    vi.useRealTimers()
+    server.resetHandlers()
+  })
+
+  // BKP-001: Loading state
+  it('FE-ADMIN-BKP-001: shows loading spinner while fetching backups', async () => {
+    server.use(
+      http.get('/api/backup/list', async () => {
+        await new Promise(resolve => setTimeout(resolve, 300))
+        return HttpResponse.json({ backups: [] })
+      }),
+    )
+    render(<BackupPanel />)
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument()
+  })
+
+  // BKP-002: Empty state
+  it('FE-ADMIN-BKP-002: shows empty state when no backups exist', async () => {
+    server.use(
+      http.get('/api/backup/list', () => HttpResponse.json({ backups: [] })),
+    )
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('No backups yet')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Create first backup')).toBeInTheDocument()
+  })
+
+  // BKP-003: Backup list renders filename, size, and date
+  it('FE-ADMIN-BKP-003: renders filename, formatted size, and date for a backup', async () => {
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+    expect(screen.getByText('2.0 MB')).toBeInTheDocument()
+  })
+
+  // BKP-004: Auto-backup badge shown for auto-backup filenames
+  it('FE-ADMIN-BKP-004: shows Auto badge for auto-backup filenames', async () => {
+    server.use(
+      http.get('/api/backup/list', () => HttpResponse.json({ backups: [autoBackup] })),
+    )
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('auto-backup-2025-02-01.zip')).toBeInTheDocument()
+    })
+    expect(screen.getByText('Auto')).toBeInTheDocument()
+  })
+
+  // BKP-005: Create backup success
+  it('FE-ADMIN-BKP-005: creates backup and shows success toast', async () => {
+    const user = userEvent.setup()
+    server.use(
+      http.post('/api/backup/create', () => HttpResponse.json({ success: true })),
+      http.get('/api/backup/list', () => HttpResponse.json({ backups: [manualBackup] })),
+    )
+    render(<><ToastContainer /><BackupPanel /></>)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+    await user.click(screen.getByTitle('Create Backup'))
+    await waitFor(() => {
+      expect(screen.getByText('Backup created successfully')).toBeInTheDocument()
+    })
+  })
+
+  // BKP-006: Restore opens confirmation modal
+  it('FE-ADMIN-BKP-006: clicking Restore opens confirmation modal', async () => {
+    const user = userEvent.setup()
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+    await user.click(screen.getAllByText('Restore')[0])
+    await waitFor(() => {
+      expect(screen.getByText('Restore Backup?')).toBeInTheDocument()
+    })
+    expect(screen.getAllByText('backup-2025-01-15.zip').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('Yes, restore')).toBeInTheDocument()
+    expect(screen.getByText('Cancel')).toBeInTheDocument()
+  })
+
+  // BKP-007: Cancel dismisses modal without calling restore API
+  it('FE-ADMIN-BKP-007: cancel dismisses the restore modal without calling the API', async () => {
+    const user = userEvent.setup()
+    let restoreCalled = false
+    server.use(
+      http.post('/api/backup/restore/:filename', () => {
+        restoreCalled = true
+        return HttpResponse.json({ success: true })
+      }),
+    )
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+    await user.click(screen.getAllByText('Restore')[0])
+    await waitFor(() => {
+      expect(screen.getByText('Restore Backup?')).toBeInTheDocument()
+    })
+    await user.click(screen.getByText('Cancel'))
+    await waitFor(() => {
+      expect(screen.queryByText('Restore Backup?')).not.toBeInTheDocument()
+    })
+    expect(restoreCalled).toBe(false)
+  })
+
+  // BKP-008: Backdrop click dismisses modal
+  it('FE-ADMIN-BKP-008: clicking the backdrop dismisses the restore modal', async () => {
+    const user = userEvent.setup()
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+    await user.click(screen.getAllByText('Restore')[0])
+    await waitFor(() => {
+      expect(screen.getByText('Restore Backup?')).toBeInTheDocument()
+    })
+    // Click the backdrop overlay (the fixed-position div)
+    const backdrop = document.querySelector('[style*="position: fixed"]') as HTMLElement
+    expect(backdrop).toBeTruthy()
+    fireEvent.click(backdrop!)
+    await waitFor(() => {
+      expect(screen.queryByText('Restore Backup?')).not.toBeInTheDocument()
+    })
+  })
+
+  // BKP-009: Successful restore calls API and reloads after 1500ms
+  it('FE-ADMIN-BKP-009: successful restore shows toast and reloads after 1500ms', async () => {
+    const user = userEvent.setup()
+    server.use(
+      http.post('/api/backup/restore/:filename', () => HttpResponse.json({ success: true })),
+    )
+    render(<><ToastContainer /><BackupPanel /></>)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+
+    // Stub reload AFTER initial data load so we don't corrupt window.location during setup
+    const reloadMock = vi.fn()
+    vi.stubGlobal('location', { ...window.location, reload: reloadMock })
+
+    await user.click(screen.getAllByText('Restore')[0])
+    await waitFor(() => expect(screen.getByText('Restore Backup?')).toBeInTheDocument())
+    await user.click(screen.getByText('Yes, restore'))
+    await waitFor(() => expect(screen.getByText('Backup restored. Page will reload…')).toBeInTheDocument())
+
+    // Wait for the 1500ms reload timer to fire
+    await new Promise(resolve => setTimeout(resolve, 1600))
+    expect(reloadMock).toHaveBeenCalled()
+    vi.unstubAllGlobals()
+  }, 20000)
+
+  // BKP-010: Delete backup with confirm dialog
+  it('FE-ADMIN-BKP-010: deletes backup after confirm and shows success toast', async () => {
+    const user = userEvent.setup()
+    server.use(
+      http.delete('/api/backup/:filename', () => HttpResponse.json({ success: true })),
+    )
+    render(<><ToastContainer /><BackupPanel /></>)
+    await waitFor(() => {
+      expect(screen.getByText('backup-2025-01-15.zip')).toBeInTheDocument()
+    })
+    const trashBtn = Array.from(document.querySelectorAll('button')).find(
+      b => b.querySelector('svg.lucide-trash2'),
+    ) as HTMLElement
+    expect(trashBtn).toBeTruthy()
+    await user.click(trashBtn!)
+    await waitFor(() => {
+      expect(screen.getByText('Backup deleted')).toBeInTheDocument()
+    })
+    await waitFor(() => {
+      expect(screen.queryByText('backup-2025-01-15.zip')).not.toBeInTheDocument()
+    })
+  })
+
+  // BKP-011: Auto-backup enable toggle shows interval controls
+  it('FE-ADMIN-BKP-011: enabling auto-backup shows interval controls', async () => {
+    const user = userEvent.setup()
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('Enable auto-backup')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Hourly')).not.toBeInTheDocument()
+    await user.click(getToggleButton())
+    await waitFor(() => {
+      expect(screen.getByText('Hourly')).toBeInTheDocument()
+      expect(screen.getByText('Daily')).toBeInTheDocument()
+      expect(screen.getByText('Weekly')).toBeInTheDocument()
+      expect(screen.getByText('Monthly')).toBeInTheDocument()
+    })
+  })
+
+  // BKP-012: Weekly interval shows day-of-week picker
+  it('FE-ADMIN-BKP-012: weekly interval shows day-of-week picker', async () => {
+    const user = userEvent.setup()
+    server.use(
+      http.get('/api/backup/auto-settings', () =>
+        HttpResponse.json({
+          settings: { enabled: true, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
+          timezone: 'UTC',
+        }),
+      ),
+    )
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('Weekly')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Sun')).not.toBeInTheDocument()
+    await user.click(screen.getByText('Weekly'))
+    await waitFor(() => {
+      expect(screen.getByText('Sun')).toBeInTheDocument()
+      expect(screen.getByText('Mon')).toBeInTheDocument()
+      expect(screen.getByText('Sat')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Day of month')).not.toBeInTheDocument()
+  })
+
+  // BKP-013: Save auto-settings calls API and shows toast
+  it('FE-ADMIN-BKP-013: saving auto-settings calls API and shows success toast', async () => {
+    const user = userEvent.setup()
+    server.use(
+      http.get('/api/backup/auto-settings', () =>
+        HttpResponse.json({
+          settings: { enabled: true, interval: 'daily', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
+          timezone: 'UTC',
+        }),
+      ),
+      http.put('/api/backup/auto-settings', () =>
+        HttpResponse.json({
+          settings: { enabled: true, interval: 'weekly', keep_days: 7, hour: 2, day_of_week: 0, day_of_month: 1 },
+        }),
+      ),
+    )
+    render(<><ToastContainer /><BackupPanel /></>)
+    await waitFor(() => {
+      expect(screen.getByText('Weekly')).toBeInTheDocument()
+    })
+    await user.click(screen.getByText('Weekly'))
+    await waitFor(() => {
+      const saveBtn = screen.getByRole('button', { name: /^save$/i })
+      expect(saveBtn).not.toBeDisabled()
+    })
+    await user.click(screen.getByRole('button', { name: /^save$/i }))
+    await waitFor(() => {
+      expect(screen.getByText('Auto-backup settings saved')).toBeInTheDocument()
+    })
+  })
+
+  // BKP-014: Save button disabled until settings changed
+  it('FE-ADMIN-BKP-014: save button is disabled until settings are changed', async () => {
+    const user = userEvent.setup()
+    render(<BackupPanel />)
+    await waitFor(() => {
+      expect(screen.getByText('Enable auto-backup')).toBeInTheDocument()
+    })
+    const saveBtn = screen.getByRole('button', { name: /^save$/i })
+    expect(saveBtn).toBeDisabled()
+    await user.click(getToggleButton())
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /^save$/i })).not.toBeDisabled()
+    })
+  })
+})

client/src/components/Admin/CategoryManager.test.tsx

@@ -0,0 +1,159 @@
+// FE-COMP-CAT-001 to FE-COMP-CAT-012
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildCategory } from '../../../tests/helpers/factories';
+import CategoryManager from './CategoryManager';
+import { ToastContainer } from '../shared/Toast';
+
+beforeEach(() => {
+  resetAllStores();
+  server.use(
+    http.get('/api/categories', () =>
+      HttpResponse.json({ categories: [] })
+    ),
+  );
+  seedStore(useAuthStore, { user: buildUser({ role: 'admin' }), isAuthenticated: true });
+});
+
+describe('CategoryManager', () => {
+  it('FE-COMP-CAT-001: renders without crashing', () => {
+    render(<CategoryManager />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CAT-002: shows Categories title', async () => {
+    render(<CategoryManager />);
+    await screen.findByText('Categories');
+  });
+
+  it('FE-COMP-CAT-003: shows empty state when no categories', async () => {
+    render(<CategoryManager />);
+    await screen.findByText('No categories yet');
+  });
+
+  it('FE-COMP-CAT-004: shows New Category button', async () => {
+    render(<CategoryManager />);
+    await screen.findByText('New Category');
+  });
+
+  it('FE-COMP-CAT-005: clicking New Category shows form', async () => {
+    const user = userEvent.setup();
+    render(<CategoryManager />);
+    await screen.findByText('New Category');
+    await user.click(screen.getByText('New Category'));
+    expect(screen.getByPlaceholderText('Category name')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CAT-006: shows existing categories from API', async () => {
+    server.use(
+      http.get('/api/categories', () =>
+        HttpResponse.json({
+          categories: [
+            buildCategory({ name: 'Museum' }),
+            buildCategory({ name: 'Restaurant' }),
+          ],
+        })
+      )
+    );
+    render(<CategoryManager />);
+    await screen.findByText('Museum');
+    expect(screen.getByText('Restaurant')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CAT-007: clicking Create submits POST API', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.post('/api/categories', async ({ request }) => {
+        postCalled = true;
+        const body = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({
+          category: buildCategory({ name: String(body.name) }),
+        });
+      })
+    );
+    render(<><ToastContainer /><CategoryManager /></>);
+    await screen.findByText('New Category');
+    await user.click(screen.getByText('New Category'));
+    const nameInput = screen.getByPlaceholderText('Category name');
+    await user.type(nameInput, 'Parks');
+    await user.click(screen.getByText('Create'));
+    await waitFor(() => expect(postCalled).toBe(true));
+  });
+
+  it('FE-COMP-CAT-008: edit button shows form for existing category', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/categories', () =>
+        HttpResponse.json({ categories: [buildCategory({ id: 5, name: 'Hotels' })] })
+      )
+    );
+    render(<CategoryManager />);
+    await screen.findByText('Hotels');
+    // Edit button is icon-only (no title) — find all buttons and click the first action button
+    const buttons = screen.getAllByRole('button');
+    // Buttons: [New Category, ...action buttons for the category]
+    // The edit button is the first action button in the category row (Edit2 icon)
+    const actionBtns = buttons.filter(b => !b.textContent?.includes('New Category'));
+    await user.click(actionBtns[0]);
+    // Name input pre-filled with category name
+    expect(screen.getByDisplayValue('Hotels')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CAT-009: delete button triggers DELETE API', async () => {
+    const user = userEvent.setup();
+    let deleteCalled = false;
+    server.use(
+      http.get('/api/categories', () =>
+        HttpResponse.json({ categories: [buildCategory({ id: 9, name: 'Parks' })] })
+      ),
+      http.delete('/api/categories/9', () => {
+        deleteCalled = true;
+        return HttpResponse.json({ success: true });
+      })
+    );
+    vi.spyOn(window, 'confirm').mockReturnValue(true);
+    render(<><ToastContainer /><CategoryManager /></>);
+    await screen.findByText('Parks');
+    // Delete button is icon-only (Trash2, no title) — find the second action button
+    const buttons = screen.getAllByRole('button');
+    const actionBtns = buttons.filter(b => !b.textContent?.includes('New Category'));
+    await user.click(actionBtns[1]);
+    await waitFor(() => expect(deleteCalled).toBe(true));
+    vi.restoreAllMocks();
+  });
+
+  it('FE-COMP-CAT-010: shows subtitle text', async () => {
+    render(<CategoryManager />);
+    await screen.findByText('Manage categories for places');
+  });
+
+  it('FE-COMP-CAT-011: category count is shown', async () => {
+    server.use(
+      http.get('/api/categories', () =>
+        HttpResponse.json({
+          categories: [buildCategory({ name: 'Cat1' }), buildCategory({ name: 'Cat2' })],
+        })
+      )
+    );
+    render(<CategoryManager />);
+    await screen.findByText('Cat1');
+    await screen.findByText('Cat2');
+    // Both categories rendered
+    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-CAT-012: Cancel button in form hides the form', async () => {
+    const user = userEvent.setup();
+    render(<CategoryManager />);
+    await screen.findByText('New Category');
+    await user.click(screen.getByText('New Category'));
+    expect(screen.getByPlaceholderText('Category name')).toBeInTheDocument();
+    await user.click(screen.getByText('Cancel'));
+    expect(screen.queryByPlaceholderText('Category name')).not.toBeInTheDocument();
+  });
+});

client/src/components/Admin/DevNotificationsPanel.test.tsx

@@ -0,0 +1,160 @@
+// FE-ADMIN-DEVNOTIF-001 to FE-ADMIN-DEVNOTIF-010
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { buildUser } from '../../../tests/helpers/factories';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useAuthStore } from '../../store/authStore';
+import { ToastContainer } from '../shared/Toast';
+import DevNotificationsPanel from './DevNotificationsPanel';
+
+const ADMIN_USER = buildUser({ id: 1, username: 'testadmin', role: 'admin' });
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { user: ADMIN_USER, isAuthenticated: true });
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+describe('DevNotificationsPanel', () => {
+  it('FE-ADMIN-DEVNOTIF-001: "DEV ONLY" badge is always visible', () => {
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    expect(screen.getByText('DEV ONLY')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-DEVNOTIF-002: four section titles render after data loads', async () => {
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    // Wait for async data to populate conditional sections
+    await screen.findByText('Trip-Scoped Events');
+    await screen.findByText('User-Scoped Events');
+    expect(screen.getByText('Type Testing')).toBeInTheDocument();
+    expect(screen.getByText('Admin-Scoped Events')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-DEVNOTIF-003: trip selector populated from API', async () => {
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('Trip-Scoped Events');
+    const [tripSelect] = screen.getAllByRole('combobox');
+    const options = Array.from(tripSelect.querySelectorAll('option'));
+    const labels = options.map(o => o.textContent);
+    expect(labels).toContain('Paris Adventure');
+    expect(labels).toContain('Tokyo Trip');
+  });
+
+  it('FE-ADMIN-DEVNOTIF-004: user selector populated from API', async () => {
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('User-Scoped Events');
+    const selects = screen.getAllByRole('combobox');
+    // Second combobox is the user selector (first is trip selector)
+    const userSelect = selects[1];
+    const options = Array.from(userSelect.querySelectorAll('option'));
+    const labels = options.map(o => o.textContent ?? '');
+    expect(labels.some(l => l.includes('admin'))).toBe(true);
+    expect(labels.some(l => l.includes('alice'))).toBe(true);
+  });
+
+  it('FE-ADMIN-DEVNOTIF-005: clicking "Simple → Me" fires sendTestNotification with correct payload', async () => {
+    let capturedBody: Record<string, unknown> | undefined;
+    server.use(
+      http.post('/api/admin/dev/test-notification', async ({ request }) => {
+        capturedBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('Type Testing');
+    await user.click(screen.getByText('Simple → Me').closest('button')!);
+    await waitFor(() => expect(capturedBody).toBeDefined());
+    expect(capturedBody).toMatchObject({
+      event: 'test_simple',
+      scope: 'user',
+      targetId: ADMIN_USER.id,
+    });
+  });
+
+  it('FE-ADMIN-DEVNOTIF-006: success toast shown after fire', async () => {
+    server.use(
+      http.post('/api/admin/dev/test-notification', () =>
+        HttpResponse.json({ ok: true }),
+      ),
+    );
+    const user = userEvent.setup();
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('Type Testing');
+    await user.click(screen.getByText('Simple → Me').closest('button')!);
+    await screen.findByText('Sent: simple-me');
+  });
+
+  it('FE-ADMIN-DEVNOTIF-007: all buttons disabled while a send is in-flight', async () => {
+    server.use(
+      http.post('/api/admin/dev/test-notification', async () => {
+        await new Promise(() => {}); // never resolves — simulates in-flight
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('Type Testing');
+
+    // Fire the click but do not await — handler never resolves so sending stays true
+    void user.click(screen.getByText('Simple → Me').closest('button')!);
+
+    await waitFor(() => {
+      const buttons = screen.getAllByRole('button');
+      buttons.forEach(btn => expect(btn).toBeDisabled());
+    });
+  });
+
+  it('FE-ADMIN-DEVNOTIF-008: error toast shown on API failure', async () => {
+    server.use(
+      http.post('/api/admin/dev/test-notification', () =>
+        HttpResponse.json({ message: 'Server error' }, { status: 500 }),
+      ),
+    );
+    const user = userEvent.setup();
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('Type Testing');
+    await user.click(screen.getByText('Simple → Me').closest('button')!);
+    await screen.findByText(/failed|error/i);
+  });
+
+  it('FE-ADMIN-DEVNOTIF-009: changing trip selector updates payload targetId', async () => {
+    let capturedBody: Record<string, unknown> | undefined;
+    server.use(
+      http.post('/api/admin/dev/test-notification', async ({ request }) => {
+        capturedBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    await screen.findByText('Trip-Scoped Events');
+
+    const [tripSelect] = screen.getAllByRole('combobox');
+    const tokyoOption = Array.from(tripSelect.querySelectorAll('option')).find(
+      o => o.textContent === 'Tokyo Trip',
+    )!;
+    const tokyoId = Number(tokyoOption.value);
+
+    await user.selectOptions(tripSelect, 'Tokyo Trip');
+    await user.click(screen.getByText('booking_change').closest('button')!);
+
+    await waitFor(() => expect(capturedBody).toBeDefined());
+    expect(capturedBody!.targetId).toBe(tokyoId);
+  });
+
+  it('FE-ADMIN-DEVNOTIF-010: Trip-Scoped section absent when no trips', async () => {
+    server.use(
+      http.get('/api/trips', () => HttpResponse.json({ trips: [] })),
+    );
+    render(<><ToastContainer /><DevNotificationsPanel /></>);
+    // Wait for user data to confirm async effects have settled
+    await screen.findByText('User-Scoped Events');
+    expect(screen.queryByText('Trip-Scoped Events')).not.toBeInTheDocument();
+  });
+});

client/src/components/Admin/DevNotificationsPanel.tsx

@@ -2,7 +2,11 @@ import React, { useState, useEffect } from 'react'
 import { adminApi, tripsApi } from '../../api/client'
 import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
-import { Bell, Send, Zap, ArrowRight, CheckCircle, XCircle, Navigation, User } from 'lucide-react'
+import {
+  Bell, Zap, ArrowRight, CheckCircle, Navigation, User,
+  Calendar, Clock, Image, MessageSquare, Tag, UserPlus,
+  Download, MapPin,
+} from 'lucide-react'
 
 interface Trip {
   id: number
@@ -37,7 +41,7 @@ export default function DevNotificationsPanel(): React.ReactElement {
     }).catch(() => {})
   }, [])
 
-  const send = async (label: string, payload: Record<string, unknown>) => {
+  const fire = async (label: string, payload: Record<string, unknown>) => {
     setSending(label)
     try {
       await adminApi.sendTestNotification(payload)
@@ -49,74 +53,69 @@ export default function DevNotificationsPanel(): React.ReactElement {
     }
   }
 
-  const buttons = [
-    {
-      label: 'Simple → Me',
-      icon: Bell,
-      color: '#6366f1',
-      payload: {
-        type: 'simple',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.title',
-        title_params: { actor: user?.username || 'Admin' },
-        text_key: 'notifications.test.text',
-        text_params: {},
-      },
-    },
-    {
-      label: 'Boolean → Me',
-      icon: CheckCircle,
-      color: '#10b981',
-      payload: {
-        type: 'boolean',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.booleanTitle',
-        title_params: { actor: user?.username || 'Admin' },
-        text_key: 'notifications.test.booleanText',
-        text_params: {},
-        positive_text_key: 'notifications.test.accept',
-        negative_text_key: 'notifications.test.decline',
-        positive_callback: { action: 'test_approve', payload: {} },
-        negative_callback: { action: 'test_deny', payload: {} },
-      },
-    },
-    {
-      label: 'Navigate → Me',
-      icon: Navigation,
-      color: '#f59e0b',
-      payload: {
-        type: 'navigate',
-        scope: 'user',
-        target: user?.id,
-        title_key: 'notifications.test.navigateTitle',
-        title_params: {},
-        text_key: 'notifications.test.navigateText',
-        text_params: {},
-        navigate_text_key: 'notifications.test.goThere',
-        navigate_target: '/dashboard',
-      },
-    },
-    {
-      label: 'Simple → Admins',
-      icon: Zap,
-      color: '#ef4444',
-      payload: {
-        type: 'simple',
-        scope: 'admin',
-        target: 0,
-        title_key: 'notifications.test.adminTitle',
-        title_params: {},
-        text_key: 'notifications.test.adminText',
-        text_params: { actor: user?.username || 'Admin' },
-      },
-    },
-  ]
+  const selectedTrip = trips.find(t => t.id === selectedTripId)
+  const selectedUser = users.find(u => u.id === selectedUserId)
+  const username = user?.username || 'Admin'
+  const tripTitle = selectedTrip?.title || 'Test Trip'
+
+  // ── Helpers ──────────────────────────────────────────────────────────────
+
+  const Btn = ({
+    id, label, sub, icon: Icon, color, onClick,
+  }: {
+    id: string; label: string; sub: string; icon: React.ElementType; color: string; onClick: () => void
+  }) => (
+    <button
+      onClick={onClick}
+      disabled={sending !== null}
+      className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left w-full"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
+      onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+      onMouseLeave={e => { e.currentTarget.style.background = 'var(--bg-card)' }}
+    >
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
+        style={{ background: `${color}20`, color }}>
+        <Icon className="w-4 h-4" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+        <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>{sub}</p>
+      </div>
+      {sending === id && (
+        <div className="w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin flex-shrink-0" />
+      )}
+    </button>
+  )
+
+  const SectionTitle = ({ children }: { children: React.ReactNode }) => (
+    <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>{children}</h3>
+  )
+
+  const TripSelector = () => (
+    <select
+      value={selectedTripId ?? ''}
+      onChange={e => setSelectedTripId(Number(e.target.value))}
+      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+    >
+      {trips.map(trip => <option key={trip.id} value={trip.id}>{trip.title}</option>)}
+    </select>
+  )
+
+  const UserSelector = () => (
+    <select
+      value={selectedUserId ?? ''}
+      onChange={e => setSelectedUserId(Number(e.target.value))}
+      className="w-full px-3 py-2 rounded-lg border text-sm mb-3"
+      style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
+    >
+      {users.map(u => <option key={u.id} value={u.id}>{u.username} ({u.email})</option>)}
+    </select>
+  )
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center gap-2 mb-2">
+    <div className="space-y-8">
+      <div className="flex items-center gap-2">
         <div className="px-2 py-0.5 rounded text-xs font-mono font-bold" style={{ background: '#fbbf24', color: '#000' }}>
           DEV ONLY
         </div>
@@ -125,219 +124,162 @@ export default function DevNotificationsPanel(): React.ReactElement {
         </span>
       </div>
 
-      <p className="text-xs" style={{ color: 'var(--text-muted)' }}>
-        Send test notifications to yourself, all admins, or trip members. These use test i18n keys.
-      </p>
-
-      {/* Quick-fire buttons */}
+      {/* ── Type Testing ─────────────────────────────────────────────────── */}
       <div>
-        <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>Quick Send</h3>
+        <SectionTitle>Type Testing</SectionTitle>
+        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+          Test how each in-app notification type renders, sent to yourself.
+        </p>
         <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-          {buttons.map(btn => {
-            const Icon = btn.icon
-            return (
-              <button
-                key={btn.label}
-                onClick={() => send(btn.label, btn.payload)}
-                disabled={sending !== null}
-                className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-                style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-                onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-                onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-              >
-                <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                  style={{ background: `${btn.color}20`, color: btn.color }}>
-                  <Icon className="w-4 h-4" />
-                </div>
-                <div className="min-w-0">
-                  <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>{btn.label}</p>
-                  <p className="text-xs truncate" style={{ color: 'var(--text-faint)' }}>
-                    {btn.payload.type} · {btn.payload.scope}
-                  </p>
-                </div>
-                {sending === btn.label && (
-                  <div className="ml-auto w-4 h-4 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
-                )}
-              </button>
-            )
-          })}
+          <Btn id="simple-me" label="Simple → Me" sub="test_simple · user" icon={Bell} color="#6366f1"
+            onClick={() => fire('simple-me', {
+              event: 'test_simple',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+            })}
+          />
+          <Btn id="boolean-me" label="Boolean → Me" sub="test_boolean · user" icon={CheckCircle} color="#10b981"
+            onClick={() => fire('boolean-me', {
+              event: 'test_boolean',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+              inApp: {
+                type: 'boolean',
+                positiveCallback: { action: 'test_approve', payload: {} },
+                negativeCallback: { action: 'test_deny', payload: {} },
+              },
+            })}
+          />
+          <Btn id="navigate-me" label="Navigate → Me" sub="test_navigate · user" icon={Navigation} color="#f59e0b"
+            onClick={() => fire('navigate-me', {
+              event: 'test_navigate',
+              scope: 'user',
+              targetId: user?.id,
+              params: {},
+            })}
+          />
+          <Btn id="simple-admins" label="Simple → All Admins" sub="test_simple · admin" icon={Zap} color="#ef4444"
+            onClick={() => fire('simple-admins', {
+              event: 'test_simple',
+              scope: 'admin',
+              targetId: 0,
+              params: {},
+            })}
+          />
         </div>
       </div>
 
-      {/* Trip-scoped notifications */}
+      {/* ── Trip-Scoped Events ───────────────────────────────────────────── */}
       {trips.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>Trip-Scoped</h3>
-          <div className="flex gap-2 mb-2">
-            <select
-              value={selectedTripId ?? ''}
-              onChange={e => setSelectedTripId(Number(e.target.value))}
-              className="flex-1 px-3 py-2 rounded-lg border text-sm"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-            >
-              {trips.map(trip => (
-                <option key={trip.id} value={trip.id}>{trip.title}</option>
-              ))}
-            </select>
-          </div>
+          <SectionTitle>Trip-Scoped Events</SectionTitle>
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Fires each trip event to all members of the selected trip (excluding yourself).
+          </p>
+          <TripSelector />
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <button
-              onClick={() => selectedTripId && send('Simple → Trip', {
-                type: 'simple',
+            <Btn id="booking_change" label="booking_change" sub="navigate · trip" icon={Calendar} color="#6366f1"
+              onClick={() => selectedTripId && fire('booking_change', {
+                event: 'booking_change',
                 scope: 'trip',
-                target: selectedTripId,
-                title_key: 'notifications.test.tripTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.tripText',
-                text_params: { trip: trips.find(t => t.id === selectedTripId)?.title || 'Trip' },
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, booking: 'Test Hotel', type: 'hotel', tripId: String(selectedTripId) },
               })}
-              disabled={sending !== null || !selectedTripId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#8b5cf620', color: '#8b5cf6' }}>
-                <Send className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Simple → Trip Members</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>simple · trip</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedTripId && send('Navigate → Trip', {
-                type: 'navigate',
+            />
+            <Btn id="trip_reminder" label="trip_reminder" sub="navigate · trip" icon={Clock} color="#10b981"
+              onClick={() => selectedTripId && fire('trip_reminder', {
+                event: 'trip_reminder',
                 scope: 'trip',
-                target: selectedTripId,
-                title_key: 'notifications.test.tripTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.tripText',
-                text_params: { trip: trips.find(t => t.id === selectedTripId)?.title || 'Trip' },
-                navigate_text_key: 'notifications.test.goThere',
-                navigate_target: `/trips/${selectedTripId}`,
+                targetId: selectedTripId,
+                params: { trip: tripTitle, tripId: String(selectedTripId) },
               })}
-              disabled={sending !== null || !selectedTripId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#f59e0b20', color: '#f59e0b' }}>
-                <ArrowRight className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Navigate → Trip Members</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>navigate · trip</p>
-              </div>
-            </button>
+            />
+            <Btn id="photos_shared" label="photos_shared" sub="navigate · trip" icon={Image} color="#f59e0b"
+              onClick={() => selectedTripId && fire('photos_shared', {
+                event: 'photos_shared',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, count: '5', tripId: String(selectedTripId) },
+              })}
+            />
+            <Btn id="collab_message" label="collab_message" sub="navigate · trip" icon={MessageSquare} color="#8b5cf6"
+              onClick={() => selectedTripId && fire('collab_message', {
+                event: 'collab_message',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, preview: 'This is a test message preview.', tripId: String(selectedTripId) },
+              })}
+            />
+            <Btn id="packing_tagged" label="packing_tagged" sub="navigate · trip" icon={Tag} color="#ec4899"
+              onClick={() => selectedTripId && fire('packing_tagged', {
+                event: 'packing_tagged',
+                scope: 'trip',
+                targetId: selectedTripId,
+                params: { actor: username, trip: tripTitle, category: 'Clothing', tripId: String(selectedTripId) },
+              })}
+            />
           </div>
         </div>
       )}
 
-      {/* User-scoped notifications */}
+      {/* ── User-Scoped Events ───────────────────────────────────────────── */}
       {users.length > 0 && (
         <div>
-          <h3 className="text-sm font-semibold mb-3" style={{ color: 'var(--text-secondary)' }}>User-Scoped</h3>
-          <div className="flex gap-2 mb-2">
-            <select
-              value={selectedUserId ?? ''}
-              onChange={e => setSelectedUserId(Number(e.target.value))}
-              className="flex-1 px-3 py-2 rounded-lg border text-sm"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)', color: 'var(--text-primary)' }}
-            >
-              {users.map(u => (
-                <option key={u.id} value={u.id}>{u.username} ({u.email})</option>
-              ))}
-            </select>
-          </div>
+          <SectionTitle>User-Scoped Events</SectionTitle>
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Fires each user event to the selected recipient.
+          </p>
+          <UserSelector />
           <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
-            <button
-              onClick={() => selectedUserId && send(`Simple → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'simple',
+            <Btn
+              id={`trip_invite-${selectedUserId}`}
+              label="trip_invite"
+              sub="navigate · user"
+              icon={UserPlus}
+              color="#06b6d4"
+              onClick={() => selectedUserId && fire(`trip_invite-${selectedUserId}`, {
+                event: 'trip_invite',
                 scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.title',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.text',
-                text_params: {},
+                targetId: selectedUserId,
+                params: { actor: username, trip: tripTitle, invitee: selectedUser?.email || '', tripId: String(selectedTripId ?? 0) },
               })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#06b6d420', color: '#06b6d4' }}>
-                <User className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Simple → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>simple · user</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedUserId && send(`Boolean → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'boolean',
+            />
+            <Btn
+              id={`vacay_invite-${selectedUserId}`}
+              label="vacay_invite"
+              sub="navigate · user"
+              icon={MapPin}
+              color="#f97316"
+              onClick={() => selectedUserId && fire(`vacay_invite-${selectedUserId}`, {
+                event: 'vacay_invite',
                 scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.booleanTitle',
-                title_params: { actor: user?.username || 'Admin' },
-                text_key: 'notifications.test.booleanText',
-                text_params: {},
-                positive_text_key: 'notifications.test.accept',
-                negative_text_key: 'notifications.test.decline',
-                positive_callback: { action: 'test_approve', payload: {} },
-                negative_callback: { action: 'test_deny', payload: {} },
+                targetId: selectedUserId,
+                params: { actor: username, planId: '1' },
               })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#10b98120', color: '#10b981' }}>
-                <CheckCircle className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Boolean → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>boolean · user</p>
-              </div>
-            </button>
-            <button
-              onClick={() => selectedUserId && send(`Navigate → ${users.find(u => u.id === selectedUserId)?.username}`, {
-                type: 'navigate',
-                scope: 'user',
-                target: selectedUserId,
-                title_key: 'notifications.test.navigateTitle',
-                title_params: {},
-                text_key: 'notifications.test.navigateText',
-                text_params: {},
-                navigate_text_key: 'notifications.test.goThere',
-                navigate_target: '/dashboard',
-              })}
-              disabled={sending !== null || !selectedUserId}
-              className="flex items-center gap-3 px-4 py-3 rounded-lg border transition-colors text-left"
-              style={{ borderColor: 'var(--border-primary)', background: 'var(--bg-card)' }}
-              onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
-              onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-card)'}
-            >
-              <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0"
-                style={{ background: '#f59e0b20', color: '#f59e0b' }}>
-                <ArrowRight className="w-4 h-4" />
-              </div>
-              <div>
-                <p className="text-sm font-medium" style={{ color: 'var(--text-primary)' }}>Navigate → User</p>
-                <p className="text-xs" style={{ color: 'var(--text-faint)' }}>navigate · user</p>
-              </div>
-            </button>
+            />
           </div>
         </div>
       )}
+
+      {/* ── Admin-Scoped Events ──────────────────────────────────────────── */}
+      <div>
+        <SectionTitle>Admin-Scoped Events</SectionTitle>
+        <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+          Fires to all admin users.
+        </p>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+          <Btn id="version_available" label="version_available" sub="navigate · admin" icon={Download} color="#64748b"
+            onClick={() => fire('version_available', {
+              event: 'version_available',
+              scope: 'admin',
+              targetId: 0,
+              params: { version: '9.9.9-test' },
+            })}
+          />
+        </div>
+      </div>
     </div>
   )
 }

client/src/components/Admin/GitHubPanel.test.tsx

@@ -0,0 +1,336 @@
+// FE-ADMIN-GH-001 to FE-ADMIN-GH-016
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { resetAllStores } from '../../../tests/helpers/store';
+import GitHubPanel from './GitHubPanel';
+
+function buildRelease(overrides = {}) {
+  const id = Math.random();
+  return {
+    id,
+    tag_name: 'v1.0.0',
+    name: 'Initial Release',
+    body: '## Changes\n- Fixed bug\n- **Bold improvement**\n- `code snippet`',
+    published_at: '2025-01-15T12:00:00Z',
+    created_at: '2025-01-15T12:00:00Z',
+    prerelease: false,
+    author: { login: 'mauriceboe' },
+    ...overrides,
+  };
+}
+
+const PAGE_1 = Array.from({ length: 10 }, (_, i) =>
+  buildRelease({ id: i + 1, tag_name: `v1.${i}.0` }),
+);
+const PAGE_2 = Array.from({ length: 5 }, (_, i) =>
+  buildRelease({ id: 100 + i, tag_name: `v0.${i}.0` }),
+);
+
+beforeEach(() => {
+  resetAllStores();
+  server.use(
+    http.get('/api/admin/github-releases', () => HttpResponse.json([])),
+  );
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+describe('GitHubPanel', () => {
+  it('FE-ADMIN-GH-001: support link cards always render', async () => {
+    render(<GitHubPanel />);
+    await waitFor(() =>
+      expect(screen.queryByRole('status')).not.toBeInTheDocument(),
+    );
+    expect(screen.getByText('Ko-fi')).toBeInTheDocument();
+    expect(screen.getByText('Buy Me a Coffee')).toBeInTheDocument();
+    expect(screen.getByText('Discord')).toBeInTheDocument();
+    expect(screen.getByText('Report a Bug')).toBeInTheDocument();
+    expect(screen.getByText('Feature Request')).toBeInTheDocument();
+    expect(screen.getByText('Wiki')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-002: all support links have correct href and target=_blank', async () => {
+    render(<GitHubPanel />);
+    await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument());
+
+    const kofi = screen.getByText('Ko-fi').closest('a')!;
+    expect(kofi).toHaveAttribute('href', 'https://ko-fi.com/mauriceboe');
+    expect(kofi).toHaveAttribute('target', '_blank');
+    expect(kofi).toHaveAttribute('rel', 'noopener noreferrer');
+
+    const bmc = screen.getByText('Buy Me a Coffee').closest('a')!;
+    expect(bmc).toHaveAttribute('href', 'https://buymeacoffee.com/mauriceboe');
+    expect(bmc).toHaveAttribute('target', '_blank');
+    expect(bmc).toHaveAttribute('rel', 'noopener noreferrer');
+
+    const discord = screen.getByText('Discord').closest('a')!;
+    expect(discord).toHaveAttribute('href', 'https://discord.gg/NhZBDSd4qW');
+    expect(discord).toHaveAttribute('target', '_blank');
+    expect(discord).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('FE-ADMIN-GH-003: loading spinner shown while fetching releases', () => {
+    server.use(
+      http.get('/api/admin/github-releases', async () => {
+        await new Promise(() => {}); // never resolves
+        return HttpResponse.json([]);
+      }),
+    );
+    render(<GitHubPanel />);
+    // The Loader2 spinner is rendered while loading=true
+    const spinner = document.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-004: error state shown on API failure', async () => {
+    server.use(
+      http.get('/api/admin/github-releases', () =>
+        HttpResponse.json({ message: 'Internal Server Error' }, { status: 500 }),
+      ),
+    );
+    render(<GitHubPanel />);
+    await screen.findByText('Failed to load releases');
+    // Timeline should not be rendered
+    expect(screen.queryByText('Release History')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-005: releases render in timeline', async () => {
+    const r1 = buildRelease({ id: 1, tag_name: 'v1.0.0', author: { login: 'mauriceboe' } });
+    const r2 = buildRelease({ id: 2, tag_name: 'v1.1.0', author: { login: 'mauriceboe' } });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r1, r2])),
+    );
+    render(<GitHubPanel />);
+    await screen.findByText('v1.0.0');
+    expect(screen.getByText('v1.1.0')).toBeInTheDocument();
+    // Author label
+    const authorLabels = screen.getAllByText(/mauriceboe/);
+    expect(authorLabels.length).toBeGreaterThan(0);
+    // Some date should be visible (non-empty)
+    const dateEls = document.querySelectorAll('[class*="text-"]');
+    const dateTexts = Array.from(dateEls).map(el => el.textContent).filter(t => t && t.match(/\d{4}/));
+    expect(dateTexts.length).toBeGreaterThan(0);
+  });
+
+  it('FE-ADMIN-GH-006: latest badge shown only on first release', async () => {
+    const r1 = buildRelease({ id: 1, tag_name: 'v2.0.0' });
+    const r2 = buildRelease({ id: 2, tag_name: 'v1.9.0' });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r1, r2])),
+    );
+    render(<GitHubPanel />);
+    await screen.findByText('v2.0.0');
+    const latestBadges = screen.getAllByText('Latest');
+    expect(latestBadges).toHaveLength(1);
+  });
+
+  it('FE-ADMIN-GH-007: prerelease badge shown', async () => {
+    const r = buildRelease({ id: 10, tag_name: 'v3.0.0-beta.1', prerelease: true });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
+    );
+    render(<GitHubPanel isPrerelease={true} />);
+    await screen.findByText('v3.0.0-beta.1');
+    expect(screen.getByText('Pre-release')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-008: expand/collapse release notes', async () => {
+    const r = buildRelease({
+      id: 20,
+      tag_name: 'v1.5.0',
+      body: '- Fixed bug\n- Another fix',
+    });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
+    );
+    const user = userEvent.setup();
+    render(<GitHubPanel />);
+    await screen.findByText('v1.5.0');
+
+    const showBtn = screen.getByText('Show details');
+    expect(showBtn).toBeInTheDocument();
+
+    // Body not visible yet
+    expect(screen.queryByText('Fixed bug')).not.toBeInTheDocument();
+
+    // Expand
+    await user.click(showBtn);
+    await screen.findByText('Fixed bug');
+    expect(screen.getByText('Hide details')).toBeInTheDocument();
+
+    // Collapse
+    await user.click(screen.getByText('Hide details'));
+    await waitFor(() =>
+      expect(screen.queryByText('Fixed bug')).not.toBeInTheDocument(),
+    );
+    expect(screen.getByText('Show details')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-009: release body renders markdown: lists, bold, code', async () => {
+    const r = buildRelease({
+      id: 30,
+      tag_name: 'v1.6.0',
+      body: '- list item\n- **bold text**\n- `inline code`',
+    });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
+    );
+    const user = userEvent.setup();
+    render(<GitHubPanel />);
+    await screen.findByText('v1.6.0');
+
+    await user.click(screen.getByText('Show details'));
+    await screen.findByText('list item');
+
+    // list item is inside a <li>
+    const listItem = screen.getByText('list item');
+    expect(listItem.closest('li')).toBeInTheDocument();
+
+    // Bold text rendered as <strong>
+    const container = document.querySelector('.mt-2.p-3.rounded-lg')!;
+    expect(container.querySelector('strong')).toBeInTheDocument();
+    expect(container.querySelector('strong')!.textContent).toBe('bold text');
+
+    // Code rendered as <code>
+    expect(container.querySelector('code')).toBeInTheDocument();
+    expect(container.querySelector('code')!.textContent).toBe('inline code');
+  });
+
+  it('FE-ADMIN-GH-010: "Load more" button visible when full page returned', async () => {
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json(PAGE_1)),
+    );
+    render(<GitHubPanel />);
+    await screen.findByText(`v1.0.0`);
+    expect(screen.getByText('Load more')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-011: "Load more" hidden when partial page returned', async () => {
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json(PAGE_2)),
+    );
+    render(<GitHubPanel />);
+    await screen.findByText('v0.0.0');
+    expect(screen.queryByText('Load more')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-013: release body renders plain paragraph text', async () => {
+    const r = buildRelease({
+      id: 40,
+      tag_name: 'v1.7.0',
+      body: 'This is a plain paragraph without any markdown syntax.',
+    });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
+    );
+    const user = userEvent.setup();
+    render(<GitHubPanel />);
+    await screen.findByText('v1.7.0');
+    await user.click(screen.getByText('Show details'));
+    await screen.findByText('This is a plain paragraph without any markdown syntax.');
+  });
+
+  it('FE-ADMIN-GH-014: markdown link with safe href renders as anchor', async () => {
+    const r = buildRelease({
+      id: 41,
+      tag_name: 'v1.8.0',
+      body: '- [click here](https://example.com)',
+    });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
+    );
+    const user = userEvent.setup();
+    render(<GitHubPanel />);
+    await screen.findByText('v1.8.0');
+    await user.click(screen.getByText('Show details'));
+    const link = await screen.findByText('click here');
+    expect(link.closest('a') || link.tagName.toLowerCase() === 'a' ? link : null).not.toBeNull();
+  });
+
+  it('FE-ADMIN-GH-015: javascript: link is sanitized to #', async () => {
+    const r = buildRelease({
+      id: 42,
+      tag_name: 'v1.9.0',
+      body: '- [evil](javascript:alert(1))',
+    });
+    server.use(
+      http.get('/api/admin/github-releases', () => HttpResponse.json([r])),
+    );
+    const user = userEvent.setup();
+    render(<GitHubPanel />);
+    await screen.findByText('v1.9.0');
+    await user.click(screen.getByText('Show details'));
+    const link = await screen.findByText('evil');
+    const anchor = link.closest('a') ?? link;
+    // The unsafe href is replaced with '#'
+    expect(anchor).toHaveAttribute('href', '#');
+  });
+
+  it('FE-ADMIN-GH-016: support card hover effects fire without error', async () => {
+    render(<GitHubPanel />);
+    await waitFor(() => expect(screen.queryByText('Loading...')).not.toBeInTheDocument());
+
+    const kofiLink = screen.getByText('Ko-fi').closest('a')!;
+    fireEvent.mouseEnter(kofiLink);
+    fireEvent.mouseLeave(kofiLink);
+
+    const discordLink = screen.getByText('Discord').closest('a')!;
+    fireEvent.mouseEnter(discordLink);
+    fireEvent.mouseLeave(discordLink);
+
+    const bugLink = screen.getByText('Report a Bug').closest('a')!;
+    fireEvent.mouseEnter(bugLink);
+    fireEvent.mouseLeave(bugLink);
+
+    const featureLink = screen.getByText('Feature Request').closest('a')!;
+    fireEvent.mouseEnter(featureLink);
+    fireEvent.mouseLeave(featureLink);
+
+    const wikiLink = screen.getByText('Wiki').closest('a')!;
+    fireEvent.mouseEnter(wikiLink);
+    fireEvent.mouseLeave(wikiLink);
+
+    const bmcLink = screen.getByText('Buy Me a Coffee').closest('a')!;
+    fireEvent.mouseEnter(bmcLink);
+    fireEvent.mouseLeave(bmcLink);
+
+    // All links still visible
+    expect(screen.getByText('Ko-fi')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-GH-012: clicking "Load more" appends next page', async () => {
+    server.use(
+      http.get('/api/admin/github-releases', ({ request }) => {
+        const url = new URL(request.url);
+        const page = url.searchParams.get('page');
+        if (page === '2') {
+          return HttpResponse.json(PAGE_2);
+        }
+        return HttpResponse.json(PAGE_1);
+      }),
+    );
+    const user = userEvent.setup();
+    render(<GitHubPanel />);
+    await screen.findByText('v1.0.0');
+
+    // All 10 items from page 1 visible
+    expect(screen.getAllByText(/v1\.\d\.0/).length).toBe(10);
+
+    // Click Load more
+    await user.click(screen.getByText('Load more'));
+
+    // Wait for page 2 items to appear
+    await screen.findByText('v0.0.0');
+
+    // Total: 10 from page 1 + 5 from page 2 = 15
+    const tagEls = screen.getAllByText(/^v[01]\.\d\.0$/);
+    expect(tagEls.length).toBe(15);
+
+    // Load more should be hidden (PAGE_2 < 10)
+    expect(screen.queryByText('Load more')).not.toBeInTheDocument();
+  });
+});

client/src/components/Admin/GitHubPanel.tsx

@@ -1,17 +1,23 @@
 import { useState, useEffect } from 'react'
-import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee } from 'lucide-react'
+import { Tag, Calendar, ExternalLink, ChevronDown, ChevronUp, Loader2, Heart, Coffee, Bug, Lightbulb, BookOpen } from 'lucide-react'
 import { getLocaleForLanguage, useTranslation } from '../../i18n'
 import apiClient from '../../api/client'
 
-const REPO = 'mauriceboe/NOMAD'
+const REPO = 'mauriceboe/TREK'
 const PER_PAGE = 10
 
-export default function GitHubPanel() {
+interface GithubRelease {
+  id: number
+  prerelease: boolean
+  [key: string]: unknown
+}
+
+export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: boolean }) {
   const { t, language } = useTranslation()
-  const [releases, setReleases] = useState([])
+  const [releases, setReleases] = useState<GithubRelease[]>([])
   const [loading, setLoading] = useState(true)
-  const [error, setError] = useState(null)
-  const [expanded, setExpanded] = useState({})
+  const [error, setError] = useState<string | null>(null)
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({})
   const [page, setPage] = useState(1)
   const [hasMore, setHasMore] = useState(true)
   const [loadingMore, setLoadingMore] = useState(false)
@@ -157,7 +163,7 @@ export default function GitHubPanel() {
           <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
         </a>
         <a
-          href="https://discord.gg/nSdKaXgN"
+          href="https://discord.gg/NhZBDSd4qW"
           target="_blank"
           rel="noopener noreferrer"
           className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
@@ -176,6 +182,63 @@ export default function GitHubPanel() {
         </a>
       </div>
 
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+        <a
+          href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ef4444'; e.currentTarget.style.boxShadow = '0 0 0 1px #ef444422' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#ef444415', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Bug size={20} style={{ color: '#ef4444' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.reportBug')}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.reportBugHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#f59e0b'; e.currentTarget.style.boxShadow = '0 0 0 1px #f59e0b22' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#f59e0b15', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <Lightbulb size={20} style={{ color: '#f59e0b' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>{t('settings.about.featureRequest')}</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.featureRequestHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+        <a
+          href="https://github.com/mauriceboe/TREK/wiki"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-all"
+          style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)', textDecoration: 'none' }}
+          onMouseEnter={e => { e.currentTarget.style.borderColor = '#6366f1'; e.currentTarget.style.boxShadow = '0 0 0 1px #6366f122' }}
+          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+        >
+          <div style={{ width: 40, height: 40, borderRadius: 10, background: '#6366f115', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+            <BookOpen size={20} style={{ color: '#6366f1' }} />
+          </div>
+          <div>
+            <div className="text-sm font-semibold" style={{ color: 'var(--text-primary)' }}>Wiki</div>
+            <div className="text-xs" style={{ color: 'var(--text-faint)' }}>{t('settings.about.wikiHint')}</div>
+          </div>
+          <ExternalLink size={14} className="ml-auto flex-shrink-0" style={{ color: 'var(--text-faint)' }} />
+        </a>
+      </div>
+
       {/* Loading / Error / Releases */}
       {loading ? (
         <div className="rounded-xl border overflow-hidden" style={{ background: 'var(--bg-card)', borderColor: 'var(--border-primary)' }}>
@@ -216,7 +279,7 @@ export default function GitHubPanel() {
             <div className="absolute left-[11px] top-3 bottom-3 w-px" style={{ background: 'var(--border-primary)' }} />
 
             <div className="space-y-0">
-              {releases.map((release, idx) => {
+              {(isPrerelease ? releases : releases.filter(r => !r.prerelease)).map((release, idx) => {
                 const isLatest = idx === 0
                 const isExpanded = expanded[release.id]
 

client/src/components/Admin/PackingTemplateManager.test.tsx

@@ -0,0 +1,510 @@
+// FE-ADMIN-PKG-001 to FE-ADMIN-PKG-020
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { resetAllStores } from '../../../tests/helpers/store';
+import PackingTemplateManager from './PackingTemplateManager';
+import { ToastContainer } from '../shared/Toast';
+
+const tmpl1 = { id: 1, name: 'Beach Trip', item_count: 5, category_count: 2, created_by_name: 'admin' }
+const tmpl2 = { id: 2, name: 'City Break', item_count: 3, category_count: 1, created_by_name: 'admin' }
+
+const cat1 = { id: 10, template_id: 1, name: 'Clothing', sort_order: 0 }
+const item1 = { id: 100, category_id: 10, name: 'T-shirt', sort_order: 0 }
+const item2 = { id: 101, category_id: 10, name: 'Shorts', sort_order: 1 }
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('PackingTemplateManager', () => {
+  it('FE-ADMIN-PKG-001: shows loading spinner on mount', async () => {
+    server.use(
+      http.get('/api/admin/packing-templates', async () => {
+        await new Promise(r => setTimeout(r, 100));
+        return HttpResponse.json({ templates: [] });
+      })
+    );
+    render(<PackingTemplateManager />);
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PKG-002: shows empty state when no templates', async () => {
+    render(<PackingTemplateManager />);
+    await screen.findByText('No templates created yet');
+    expect(screen.queryAllByRole('button', { name: /chevron/i })).toHaveLength(0);
+  });
+
+  it('FE-ADMIN-PKG-003: template list renders names and counts', async () => {
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1, tmpl2] })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    expect(screen.getByText('City Break')).toBeInTheDocument();
+    // tmpl1 has 2 categories and 5 items
+    expect(screen.getByText(/2 categories · 5 items/i)).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PKG-004: clicking "+" shows create input', async () => {
+    const user = userEvent.setup();
+    render(<PackingTemplateManager />);
+    await screen.findByText('No templates created yet');
+    const createBtn = screen.getByRole('button', { name: /new template/i });
+    await user.click(createBtn);
+    expect(screen.getByPlaceholderText('Template name (e.g. Beach Holiday)')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PKG-005: creates template on Enter and shows success toast', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.post('/api/admin/packing-templates', async () => {
+        postCalled = true;
+        return HttpResponse.json({ template: { id: 99, name: 'New Template' } });
+      })
+    );
+    render(<><ToastContainer /><PackingTemplateManager /></>);
+    await screen.findByText('No templates created yet');
+    await user.click(screen.getByRole('button', { name: /new template/i }));
+    const input = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)');
+    await user.type(input, 'New Template{Enter}');
+    await waitFor(() => expect(postCalled).toBe(true));
+    // "New Template" may appear both as the button label and the new list item
+    await waitFor(() => expect(screen.getAllByText('New Template').length).toBeGreaterThanOrEqual(1));
+    await screen.findByText('Template created');
+  });
+
+  it('FE-ADMIN-PKG-006: Escape dismisses create input without API call', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.post('/api/admin/packing-templates', async () => {
+        postCalled = true;
+        return HttpResponse.json({ template: { id: 99, name: 'Should Not Appear' } });
+      })
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('No templates created yet');
+    await user.click(screen.getByRole('button', { name: /new template/i }));
+    const input = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)');
+    await user.type(input, 'Test{Escape}');
+    await waitFor(() => {
+      expect(screen.queryByPlaceholderText('Template name (e.g. Beach Holiday)')).not.toBeInTheDocument();
+    });
+    expect(postCalled).toBe(false);
+  });
+
+  it('FE-ADMIN-PKG-007: expanding a template loads and displays its categories and items', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [item1, item2] })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Clothing');
+    expect(screen.getByText('T-shirt')).toBeInTheDocument();
+    expect(screen.getByText('Shorts')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PKG-008: collapsing an expanded template hides its content', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [item1, item2] })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Clothing');
+    // Collapse by clicking again
+    await user.click(screen.getByText('Beach Trip'));
+    await waitFor(() => {
+      expect(screen.queryByText('Clothing')).not.toBeInTheDocument();
+      expect(screen.queryByText('T-shirt')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-ADMIN-PKG-009: deleting a template removes it from the list and shows toast', async () => {
+    const user = userEvent.setup();
+    let deleteCalled = false;
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1, tmpl2] })
+      ),
+      http.delete('/api/admin/packing-templates/1', () => {
+        deleteCalled = true;
+        return HttpResponse.json({ success: true });
+      })
+    );
+    render(<><ToastContainer /><PackingTemplateManager /></>);
+    await screen.findByText('Beach Trip');
+    expect(screen.getByText('City Break')).toBeInTheDocument();
+
+    // Find all Trash2 (delete) buttons — there are 2 (one per template)
+    const deleteButtons = screen.getAllByRole('button').filter(b =>
+      b.className.includes('hover:bg-red-50') || b.querySelector('svg')
+    );
+    // Click the delete button for "Beach Trip" (first template row's trash button)
+    // The buttons layout in each row: [chevron, edit, delete]
+    // We find rows first
+    const beachTripRow = screen.getByText('Beach Trip').closest('div');
+    const trashBtn = beachTripRow!.parentElement!.querySelector('button.hover\\:bg-red-50') as HTMLElement | null;
+    if (trashBtn) {
+      await user.click(trashBtn);
+    } else {
+      // Fallback: find all red-hover buttons and click first
+      const allBtns = screen.getAllByRole('button');
+      const redBtns = allBtns.filter(b => b.className.includes('hover:bg-red-50'));
+      await user.click(redBtns[0]);
+    }
+    await waitFor(() => expect(deleteCalled).toBe(true));
+    await waitFor(() => expect(screen.queryByText('Beach Trip')).not.toBeInTheDocument());
+    expect(screen.getByText('City Break')).toBeInTheDocument();
+    await screen.findByText('Template deleted');
+  });
+
+  it('FE-ADMIN-PKG-010: renaming a template inline updates the list', async () => {
+    const user = userEvent.setup();
+    let putCalled = false;
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.put('/api/admin/packing-templates/1', async () => {
+        putCalled = true;
+        return HttpResponse.json({ success: true });
+      })
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+
+    // Find the Edit2 button on the template row
+    const beachTripText = screen.getByText('Beach Trip');
+    const row = beachTripText.closest('div')!.parentElement!;
+    const editBtn = row.querySelector('button.hover\\:bg-slate-100') as HTMLElement | null;
+    if (editBtn) {
+      await user.click(editBtn);
+    } else {
+      // Fallback: find all slate-100-hover buttons
+      const allBtns = screen.getAllByRole('button');
+      const editBtns = allBtns.filter(b => b.className.includes('hover:bg-slate-100'));
+      await user.click(editBtns[0]);
+    }
+
+    const input = screen.getByDisplayValue('Beach Trip');
+    await user.clear(input);
+    await user.type(input, 'Summer Packing{Enter}');
+    await waitFor(() => expect(putCalled).toBe(true));
+    await screen.findByText('Summer Packing');
+  });
+
+  it('FE-ADMIN-PKG-011: adding a category to an expanded template', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [], items: [] })
+      ),
+      http.post('/api/admin/packing-templates/1/categories', async () =>
+        HttpResponse.json({ category: { id: 20, template_id: 1, name: 'Electronics', sort_order: 1 } })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    // Wait for expanded state (Add category button should appear)
+    await screen.findByText('Add category');
+    await user.click(screen.getByText('Add category'));
+    const catInput = screen.getByPlaceholderText('Category name (e.g. Clothing)');
+    await user.type(catInput, 'Electronics{Enter}');
+    await screen.findByText('Electronics');
+  });
+
+  it('FE-ADMIN-PKG-012: adding an item to a category', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [] })
+      ),
+      http.post('/api/admin/packing-templates/1/categories/10/items', async () =>
+        HttpResponse.json({ item: { id: 102, category_id: 10, name: 'Sandals', sort_order: 2 } })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Clothing');
+
+    // Click the "+" button on the Clothing category row
+    const clothingHeader = screen.getByText('Clothing').closest('div')!;
+    const addItemBtn = clothingHeader.querySelector('button') as HTMLElement;
+    await user.click(addItemBtn);
+
+    const itemInput = screen.getByPlaceholderText('Item name');
+    await user.type(itemInput, 'Sandals');
+    // Submit via Enter key (the input's onKeyDown handler triggers handleAddItem)
+    await user.type(itemInput, '{Enter}');
+    await screen.findByText('Sandals');
+  });
+
+  it('FE-ADMIN-PKG-013: renaming a category inline updates its name', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [] })
+      ),
+      http.put('/api/admin/packing-templates/1/categories/10', async () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Clothing');
+
+    // Find the Edit2 button in the Clothing category header
+    const clothingHeader = screen.getByText('Clothing').closest('div')!;
+    const editBtns = Array.from(clothingHeader.querySelectorAll('button')).filter(
+      b => b.className.includes('hover:text-slate-700')
+    );
+    // Second button (after Plus) is Edit2
+    await user.click(editBtns[1]);
+
+    const catInput = screen.getByDisplayValue('Clothing');
+    await user.clear(catInput);
+    await user.type(catInput, 'Shoes{Enter}');
+    await screen.findByText('Shoes');
+  });
+
+  it('FE-ADMIN-PKG-014: deleting a category removes it and its items', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [item1, item2] })
+      ),
+      http.delete('/api/admin/packing-templates/1/categories/10', () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Clothing');
+    expect(screen.getByText('T-shirt')).toBeInTheDocument();
+
+    // Find the Trash2 button in the Clothing category header
+    const clothingHeader = screen.getByText('Clothing').closest('div')!;
+    const trashBtn = clothingHeader.querySelector('button.hover\\:text-red-500') as HTMLElement;
+    await user.click(trashBtn);
+
+    await waitFor(() => {
+      expect(screen.queryByText('Clothing')).not.toBeInTheDocument();
+      expect(screen.queryByText('T-shirt')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-ADMIN-PKG-015: renaming an item inline updates its name', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [item1] })
+      ),
+      http.put('/api/admin/packing-templates/1/items/100', async () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('T-shirt');
+
+    // Find the Edit2 button in the T-shirt item row (opacity-0 group-hover buttons)
+    const itemRow = screen.getByText('T-shirt').closest('div')!;
+    const editBtn = Array.from(itemRow.querySelectorAll('button')).find(
+      b => b.className.includes('opacity-0')
+    ) as HTMLElement | undefined;
+    if (editBtn) {
+      await user.click(editBtn);
+    } else {
+      // Directly click the first button in the item row
+      const btns = itemRow.querySelectorAll('button');
+      await user.click(btns[0] as HTMLElement);
+    }
+
+    const input = screen.getByDisplayValue('T-shirt');
+    await user.clear(input);
+    await user.type(input, 'Tank Top{Enter}');
+    await screen.findByText('Tank Top');
+  });
+
+  it('FE-ADMIN-PKG-016: deleting an item removes it from the list', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [item1, item2] })
+      ),
+      http.delete('/api/admin/packing-templates/1/items/100', () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('T-shirt');
+    expect(screen.getByText('Shorts')).toBeInTheDocument();
+
+    // Find the Trash2 button in the T-shirt row
+    const itemRow = screen.getByText('T-shirt').closest('div')!;
+    const trashBtns = Array.from(itemRow.querySelectorAll('button')).filter(
+      b => b.className.includes('opacity-0')
+    );
+    // Second opacity-0 button is the delete (trash) button
+    const trashBtn = trashBtns[1] || trashBtns[0];
+    await user.click(trashBtn as HTMLElement);
+
+    await waitFor(() => expect(screen.queryByText('T-shirt')).not.toBeInTheDocument());
+    expect(screen.getByText('Shorts')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PKG-017: Escape cancels add category without saving', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [], items: [] })
+      ),
+      http.post('/api/admin/packing-templates/1/categories', async () => {
+        postCalled = true;
+        return HttpResponse.json({ category: { id: 20, template_id: 1, name: 'Ignored', sort_order: 1 } });
+      })
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Add category');
+    await user.click(screen.getByText('Add category'));
+    const catInput = screen.getByPlaceholderText('Category name (e.g. Clothing)');
+    await user.type(catInput, 'Test{Escape}');
+    await waitFor(() =>
+      expect(screen.queryByPlaceholderText('Category name (e.g. Clothing)')).not.toBeInTheDocument()
+    );
+    expect(postCalled).toBe(false);
+  });
+
+  it('FE-ADMIN-PKG-018: Escape cancels add item without saving', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.get('/api/admin/packing-templates/1', () =>
+        HttpResponse.json({ categories: [cat1], items: [] })
+      ),
+      http.post('/api/admin/packing-templates/1/categories/10/items', async () => {
+        postCalled = true;
+        return HttpResponse.json({ item: { id: 102, category_id: 10, name: 'Ignored', sort_order: 2 } });
+      })
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+    await user.click(screen.getByText('Beach Trip'));
+    await screen.findByText('Clothing');
+
+    const clothingHeader = screen.getByText('Clothing').closest('div')!;
+    const addItemBtn = clothingHeader.querySelector('button') as HTMLElement;
+    await user.click(addItemBtn);
+
+    const itemInput = screen.getByPlaceholderText('Item name');
+    await user.type(itemInput, 'Test{Escape}');
+    await waitFor(() =>
+      expect(screen.queryByPlaceholderText('Item name')).not.toBeInTheDocument()
+    );
+    expect(postCalled).toBe(false);
+  });
+
+  it('FE-ADMIN-PKG-019: Escape cancels template rename without saving', async () => {
+    const user = userEvent.setup();
+    let putCalled = false;
+    server.use(
+      http.get('/api/admin/packing-templates', () =>
+        HttpResponse.json({ templates: [tmpl1] })
+      ),
+      http.put('/api/admin/packing-templates/1', async () => {
+        putCalled = true;
+        return HttpResponse.json({ success: true });
+      })
+    );
+    render(<PackingTemplateManager />);
+    await screen.findByText('Beach Trip');
+
+    const beachTripText = screen.getByText('Beach Trip');
+    const row = beachTripText.closest('div')!.parentElement!;
+    const editBtn = row.querySelector('button.hover\\:bg-slate-100') as HTMLElement | null;
+    if (editBtn) {
+      await user.click(editBtn);
+    } else {
+      const allBtns = screen.getAllByRole('button');
+      const editBtns = allBtns.filter(b => b.className.includes('hover:bg-slate-100'));
+      await user.click(editBtns[0]);
+    }
+
+    const input = screen.getByDisplayValue('Beach Trip');
+    await user.type(input, '{Escape}');
+    await waitFor(() => expect(screen.queryByDisplayValue('Beach Trip')).not.toBeInTheDocument());
+    expect(putCalled).toBe(false);
+    // Original name should be restored
+    expect(screen.getByText('Beach Trip')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PKG-020: X button on create template input dismisses it', async () => {
+    const user = userEvent.setup();
+    render(<PackingTemplateManager />);
+    await screen.findByText('No templates created yet');
+    await user.click(screen.getByRole('button', { name: /new template/i }));
+    expect(screen.getByPlaceholderText('Template name (e.g. Beach Holiday)')).toBeInTheDocument();
+
+    // Find the X (cancel) button in the create row — it's the last button in the create row
+    const createRow = screen.getByPlaceholderText('Template name (e.g. Beach Holiday)').closest('div')!;
+    const cancelBtn = Array.from(createRow.querySelectorAll('button')).at(-1) as HTMLElement;
+    await user.click(cancelBtn);
+
+    await waitFor(() =>
+      expect(screen.queryByPlaceholderText('Template name (e.g. Beach Holiday)')).not.toBeInTheDocument()
+    );
+  });
+});

client/src/components/Admin/PermissionsPanel.test.tsx

@@ -0,0 +1,274 @@
+// FE-ADMIN-PERM-001 to FE-ADMIN-PERM-010
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { resetAllStores } from '../../../tests/helpers/store';
+import { ToastContainer } from '../shared/Toast';
+import PermissionsPanel from './PermissionsPanel';
+
+// ── Fixture ───────────────────────────────────────────────────────────────────
+
+const ALLOWED = ['admin', 'trip_owner', 'trip_member', 'everybody'] as const;
+
+function buildPermission(key: string, level = 'trip_member', defaultLevel = 'trip_member') {
+  return { key, level, defaultLevel, allowedLevels: [...ALLOWED] };
+}
+
+const SAMPLE_PERMISSIONS = [
+  buildPermission('trip_create'),
+  buildPermission('trip_edit'),
+  buildPermission('trip_delete'),
+  buildPermission('trip_archive'),
+  buildPermission('trip_cover_upload'),
+  buildPermission('member_manage'),
+  buildPermission('file_upload'),
+  buildPermission('file_edit'),
+  buildPermission('file_delete'),
+  buildPermission('place_edit'),
+  buildPermission('day_edit'),
+  buildPermission('reservation_edit'),
+  buildPermission('budget_edit'),
+  buildPermission('packing_edit'),
+  buildPermission('collab_edit'),
+  buildPermission('share_manage'),
+];
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function renderPanel() {
+  return render(
+    <>
+      <ToastContainer />
+      <PermissionsPanel />
+    </>,
+  );
+}
+
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  resetAllStores();
+  // Override the default handler (returns object) with correct array shape
+  server.use(
+    http.get('/api/admin/permissions', () =>
+      HttpResponse.json({ permissions: SAMPLE_PERMISSIONS }),
+    ),
+  );
+});
+
+afterEach(() => {
+  server.resetHandlers();
+});
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('PermissionsPanel', () => {
+  it('FE-ADMIN-PERM-001: loading spinner renders before data arrives', () => {
+    server.use(
+      http.get('/api/admin/permissions', async () => {
+        await new Promise(() => {}); // never resolves
+        return HttpResponse.json({ permissions: [] });
+      }),
+    );
+    renderPanel();
+    const spinner = document.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+    // The form content (category headings) should not be present
+    expect(screen.queryByText('Trip Management')).not.toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PERM-002: permission categories and actions render after load', async () => {
+    renderPanel();
+    // Wait until loading is done — a category heading appears
+    await screen.findByText('Trip Management');
+    expect(screen.getByText('Member Management')).toBeInTheDocument();
+    expect(screen.getByText('Files')).toBeInTheDocument();
+    expect(screen.getByText('Content & Schedule')).toBeInTheDocument();
+    expect(screen.getByText('Budget, Packing & Collaboration')).toBeInTheDocument();
+    expect(screen.getByText('Create trips')).toBeInTheDocument();
+    expect(screen.getByText('Add / remove members')).toBeInTheDocument();
+  });
+
+  it('FE-ADMIN-PERM-003: "customized" badge visible when value differs from default', async () => {
+    const perms = [
+      buildPermission('trip_create', 'admin', 'trip_member'), // level ≠ default → badge
+      buildPermission('trip_edit', 'trip_member', 'trip_member'), // level === default → no badge
+    ];
+    server.use(
+      http.get('/api/admin/permissions', () =>
+        HttpResponse.json({ permissions: perms }),
+      ),
+    );
+    renderPanel();
+    await screen.findByText('Trip Management');
+    // Badge should appear once (for trip_create)
+    expect(screen.getByText('customized')).toBeInTheDocument();
+    expect(screen.getAllByText('customized')).toHaveLength(1);
+  });
+
+  it('FE-ADMIN-PERM-004: Save button is disabled until a value changes', async () => {
+    const user = userEvent.setup();
+    renderPanel();
+    await screen.findByText('Trip Management');
+
+    const saveButton = screen.getByRole('button', { name: /^Save$/i });
+    expect(saveButton).toBeDisabled();
+
+    // Open the first CustomSelect trigger (shows current level "Trip members")
+    const triggers = screen.getAllByRole('button', { name: /Trip members/i });
+    await user.click(triggers[0]);
+
+    // Pick an option different from the current one (current is trip_member → pick admin)
+    const adminOption = await screen.findByText('Admin only');
+    await user.click(adminOption);
+
+    await waitFor(() => {
+      expect(saveButton).not.toBeDisabled();
+    });
+  });
+
+  it('FE-ADMIN-PERM-005: changing a value marks form dirty and enables Save', async () => {
+    const user = userEvent.setup();
+    renderPanel();
+    await screen.findByText('Trip Management');
+
+    const saveButton = screen.getByRole('button', { name: /^Save$/i });
+    expect(saveButton).toBeDisabled();
+
+    // Open first CustomSelect dropdown and select a different option
+    const triggers = screen.getAllByRole('button', { name: /Trip members/i });
+    await user.click(triggers[0]);
+    const adminOption = await screen.findByText('Admin only');
+    await user.click(adminOption);
+
+    await waitFor(() => {
+      expect(saveButton).not.toBeDisabled();
+    });
+  });
+
+  it('FE-ADMIN-PERM-006: Reset button restores values to defaultLevel and enables Save', async () => {
+    const perms = [
+      buildPermission('trip_create', 'admin', 'trip_member'), // customized
+      ...SAMPLE_PERMISSIONS.filter(p => p.key !== 'trip_create'),
+    ];
+    server.use(
+      http.get('/api/admin/permissions', () =>
+        HttpResponse.json({ permissions: perms }),
+      ),
+    );
+    const user = userEvent.setup();
+    renderPanel();
+    await screen.findByText('Trip Management');
+
+    // Customized badge should be visible
+    expect(screen.getByText('customized')).toBeInTheDocument();
+
+    const saveButton = screen.getByRole('button', { name: /^Save$/i });
+    const resetButton = screen.getByRole('button', { name: /Reset to defaults/i });
+
+    await user.click(resetButton);
+
+    // Badge should disappear (value back to defaultLevel)
+    await waitFor(() => {
+      expect(screen.queryByText('customized')).not.toBeInTheDocument();
+    });
+
+    // Save should be enabled (handleReset sets dirty=true)
+    expect(saveButton).not.toBeDisabled();
+  });
+
+  it('FE-ADMIN-PERM-007: successful save calls PUT and shows success toast', async () => {
+    server.use(
+      http.put('/api/admin/permissions', () =>
+        HttpResponse.json({ permissions: SAMPLE_PERMISSIONS }),
+      ),
+    );
+    const user = userEvent.setup();
+    renderPanel();
+    await screen.findByText('Trip Management');
+
+    // Dirty the form
+    const triggers = screen.getAllByRole('button', { name: /Trip members/i });
+    await user.click(triggers[0]);
+    const adminOption = await screen.findByText('Admin only');
+    await user.click(adminOption);
+
+    const saveButton = screen.getByRole('button', { name: /^Save$/i });
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+    await user.click(saveButton);
+
+    await screen.findByText('Permission settings saved');
+    // After successful save, dirty is cleared → Save disabled again
+    await waitFor(() => expect(saveButton).toBeDisabled());
+  });
+
+  it('FE-ADMIN-PERM-008: failed save shows error toast and keeps Save enabled', async () => {
+    server.use(
+      http.put('/api/admin/permissions', () =>
+        HttpResponse.json({ error: 'server error' }, { status: 500 }),
+      ),
+    );
+    const user = userEvent.setup();
+    renderPanel();
+    await screen.findByText('Trip Management');
+
+    // Dirty the form
+    const triggers = screen.getAllByRole('button', { name: /Trip members/i });
+    await user.click(triggers[0]);
+    const adminOption = await screen.findByText('Admin only');
+    await user.click(adminOption);
+
+    const saveButton = screen.getByRole('button', { name: /^Save$/i });
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+    await user.click(saveButton);
+
+    await screen.findByText('Error');
+    // Dirty unchanged → Save stays enabled
+    expect(saveButton).not.toBeDisabled();
+  });
+
+  it('FE-ADMIN-PERM-009: Save button is disabled while save is in-flight', async () => {
+    let resolvePut!: () => void;
+    server.use(
+      http.put('/api/admin/permissions', () =>
+        new Promise<Response>(resolve => {
+          resolvePut = () =>
+            resolve(HttpResponse.json({ permissions: SAMPLE_PERMISSIONS }) as unknown as Response);
+        }),
+      ),
+    );
+    const user = userEvent.setup();
+    renderPanel();
+    await screen.findByText('Trip Management');
+
+    // Dirty the form
+    const triggers = screen.getAllByRole('button', { name: /Trip members/i });
+    await user.click(triggers[0]);
+    const adminOption = await screen.findByText('Admin only');
+    await user.click(adminOption);
+
+    const saveButton = screen.getByRole('button', { name: /^Save$/i });
+    await waitFor(() => expect(saveButton).not.toBeDisabled());
+    await user.click(saveButton);
+
+    // In-flight: button should be disabled and show Loader2 spinner
+    await waitFor(() => expect(saveButton).toBeDisabled());
+    const loader = saveButton.querySelector('.animate-spin');
+    expect(loader).toBeInTheDocument();
+
+    // Resolve the request
+    resolvePut();
+    await screen.findByText('Permission settings saved');
+  });
+
+  it('FE-ADMIN-PERM-010: load failure shows error toast', async () => {
+    server.use(
+      http.get('/api/admin/permissions', () =>
+        HttpResponse.json({ error: 'server error' }, { status: 500 }),
+      ),
+    );
+    renderPanel();
+    await screen.findByText('Error');
+  });
+});

client/src/components/Budget/BudgetPanel.test.tsx

@@ -0,0 +1,498 @@
+// FE-COMP-BUDGET-001 to FE-COMP-BUDGET-040
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { usePermissionsStore } from '../../store/permissionsStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip, buildBudgetItem, buildSettings } from '../../../tests/helpers/factories';
+import BudgetPanel from './BudgetPanel';
+
+beforeEach(() => {
+  resetAllStores();
+  // Settlement and per-person APIs needed by BudgetPanel
+  server.use(
+    http.get('/api/trips/:id/budget/settlement', () =>
+      HttpResponse.json({ balances: [], flows: [] })
+    ),
+    http.get('/api/trips/:id/budget/per-person', () =>
+      HttpResponse.json({ summary: [] })
+    ),
+  );
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'EUR' }) });
+});
+
+describe('BudgetPanel', () => {
+  it('FE-COMP-BUDGET-001: renders empty state when no budget items', async () => {
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('No budget created yet');
+  });
+
+  it('FE-COMP-BUDGET-002: shows empty state text body', async () => {
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText(/Create categories and entries/i);
+  });
+
+  it('FE-COMP-BUDGET-003: shows category input in empty state when user can edit', async () => {
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByPlaceholderText('Enter category name...');
+  });
+
+  it('FE-COMP-BUDGET-004: renders budget items from store after load', async () => {
+    const item = buildBudgetItem({ trip_id: 1, name: 'Hotel Paris', category: 'Accommodation' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Hotel Paris');
+  });
+
+  it('FE-COMP-BUDGET-005: renders category section header', async () => {
+    const item = buildBudgetItem({ trip_id: 1, name: 'Flight to Rome', category: 'Transport' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Transport');
+  });
+
+  it('FE-COMP-BUDGET-006: renders budget table headers', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'Food' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Name');
+    await screen.findByText('Total');
+  });
+
+  it('FE-COMP-BUDGET-007: shows Budget title heading', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'Other' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Budget');
+  });
+
+  it('FE-COMP-BUDGET-008: shows CSV export button', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'Other' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('CSV');
+  });
+
+  it('FE-COMP-BUDGET-009: add item row visible in table', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'Food' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByPlaceholderText('New Entry');
+  });
+
+  it('FE-COMP-BUDGET-010: adding new item via form calls POST and shows item', async () => {
+    const user = userEvent.setup();
+    const initialItem = buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Existing' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [initialItem] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        const body = await request.json() as Record<string, unknown>;
+        const item = buildBudgetItem({ trip_id: 1, name: String(body.name || 'New Item'), category: 'Food' });
+        return HttpResponse.json({ item });
+      })
+    );
+    render(<BudgetPanel tripId={1} />);
+    const nameInput = await screen.findByPlaceholderText('New Entry');
+    await user.type(nameInput, 'Restaurant Dinner');
+    const addBtn = screen.getByTitle('Add Reservation');
+    await user.click(addBtn);
+    await screen.findByText('Restaurant Dinner');
+  });
+
+  it('FE-COMP-BUDGET-011: delete button present for items when user can edit', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Test Item' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Test Item');
+    // Delete button has title="Delete"
+    expect(screen.getByTitle('Delete')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BUDGET-012: delete item removes it from the UI', async () => {
+    const user = userEvent.setup();
+    const item = buildBudgetItem({ id: 42, trip_id: 1, category: 'Food', name: 'Item To Delete' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.delete('/api/trips/1/budget/42', () => HttpResponse.json({ success: true }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Item To Delete');
+    await user.click(screen.getByTitle('Delete'));
+    await waitFor(() => {
+      expect(screen.queryByText('Item To Delete')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-BUDGET-013: multiple items in same category all render', async () => {
+    const item1 = buildBudgetItem({ trip_id: 1, category: 'Hotels', name: 'Hotel A' });
+    const item2 = buildBudgetItem({ trip_id: 1, category: 'Hotels', name: 'Hotel B' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item1, item2] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Hotel A');
+    await screen.findByText('Hotel B');
+  });
+
+  it('FE-COMP-BUDGET-014: items from different categories render separate sections', async () => {
+    const item1 = buildBudgetItem({ trip_id: 1, category: 'Transport', name: 'Flight' });
+    const item2 = buildBudgetItem({ trip_id: 1, category: 'Hotels', name: 'Hotel' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item1, item2] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Transport');
+    await screen.findByText('Hotels');
+  });
+
+  it('FE-COMP-BUDGET-015: currency from settings store is used for default_currency display', async () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ default_currency: 'USD' }) });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    // Component renders even in empty state
+    await screen.findByText('No budget created yet');
+  });
+
+  it('FE-COMP-BUDGET-016: trip currency EUR is shown in header for item rows', async () => {
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'EUR' }) });
+    const item = buildBudgetItem({ trip_id: 1, category: 'Other', name: 'Misc', total_price: 50 });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Misc');
+    // Row exists - EUR formatting would appear in values
+  });
+
+  it('FE-COMP-BUDGET-017: Delete Category button shown in category header', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'ToDelete', name: 'Item' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('ToDelete');
+    expect(screen.getByTitle('Delete Category')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BUDGET-018: renders add item button (+ icon) in add row', async () => {
+    const item = buildBudgetItem({ trip_id: 1, category: 'Other' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByPlaceholderText('New Entry');
+    // The add button is present
+    expect(screen.getByTitle('Add Reservation')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BUDGET-019: add item with Enter key submits the form', async () => {
+    const user = userEvent.setup();
+    const initialItem = buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Existing' });
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [initialItem] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        const body = await request.json() as Record<string, unknown>;
+        const item = buildBudgetItem({ trip_id: 1, name: String(body.name), category: 'Food' });
+        return HttpResponse.json({ item });
+      })
+    );
+    render(<BudgetPanel tripId={1} />);
+    const nameInput = await screen.findByPlaceholderText('New Entry');
+    await user.type(nameInput, 'Pizza{Enter}');
+    await screen.findByText('Pizza');
+  });
+
+  it('FE-COMP-BUDGET-020: component renders without crashing with empty tripMembers', async () => {
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
+    );
+    render(<BudgetPanel tripId={1} tripMembers={[]} />);
+    await screen.findByText('No budget created yet');
+  });
+
+  it('FE-COMP-BUDGET-021: inline edit name cell — clicking a name cell makes it editable', async () => {
+    const user = userEvent.setup();
+    const item = { ...buildBudgetItem({ id: 21, trip_id: 1, category: 'Food', name: 'Old Name' }), total_price: 10 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Old Name');
+    await user.click(screen.getByText('Old Name'));
+    expect(screen.getByDisplayValue('Old Name')).toBeInTheDocument();
+    await user.keyboard('{Escape}');
+    expect(screen.queryByDisplayValue('Old Name')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-BUDGET-022: inline edit name cell — saving new name calls PUT API', async () => {
+    const user = userEvent.setup();
+    const item = { ...buildBudgetItem({ id: 10, trip_id: 1, category: 'Food', name: 'Old Name' }), total_price: 10 };
+    let putCalled = false;
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.put('/api/trips/1/budget/10', async ({ request }) => {
+        const b = await request.json() as Record<string, unknown>;
+        putCalled = true;
+        return HttpResponse.json({ item: { ...item, name: b.name } });
+      })
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Old Name');
+    await user.click(screen.getByText('Old Name'));
+    const input = screen.getByDisplayValue('Old Name');
+    await user.clear(input);
+    await user.type(input, 'New Name');
+    await user.tab();
+    await waitFor(() => expect(putCalled).toBe(true));
+  });
+
+  it('FE-COMP-BUDGET-023: total price is shown formatted with currency symbol', async () => {
+    const item = { ...buildBudgetItem({ id: 23, trip_id: 1, category: 'Restaurants', name: 'Dinner' }), total_price: 45.5 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Dinner');
+    // The formatted number appears in the InlineEditCell for total price (and grand total card)
+    expect(screen.getAllByText('45.50').length).toBeGreaterThan(0);
+    // The currency symbol appears (in category subtotal or grand total card)
+    expect(screen.getAllByText(/€/).length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-BUDGET-024: delete category button removes all items in that category', async () => {
+    const user = userEvent.setup();
+    const item = { ...buildBudgetItem({ id: 24, trip_id: 1, category: 'Flights', name: 'Flight to Paris' }), total_price: 200 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.delete('/api/trips/1/budget/24', () => HttpResponse.json({ success: true }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findAllByText('Flights');
+    await screen.findByText('Flight to Paris');
+    await user.click(screen.getByTitle('Delete Category'));
+    await waitFor(() => {
+      expect(screen.queryAllByText('Flights').length).toBe(0);
+      expect(screen.queryByText('Flight to Paris')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-BUDGET-025: CSV export button triggers download via URL.createObjectURL', async () => {
+    const createObjectURL = vi.fn(() => 'blob:test');
+    vi.spyOn(URL, 'createObjectURL').mockImplementation(createObjectURL);
+    const user = userEvent.setup();
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'Other', name: 'Misc' }), total_price: 10 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('CSV');
+    await user.click(screen.getByText('CSV'));
+    expect(createObjectURL).toHaveBeenCalled();
+    vi.restoreAllMocks();
+  });
+
+  it('FE-COMP-BUDGET-026: category total row shows sum of items in category', async () => {
+    const item1 = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Lunch' }), total_price: 20 };
+    const item2 = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Dinner' }), total_price: 30 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item1, item2] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Lunch');
+    // The category header shows subtotal formatted as "50.00 €" (also appears in pie legend)
+    expect(screen.getAllByText('50.00 €').length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-BUDGET-027: add new category input is visible in empty state', async () => {
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByPlaceholderText('Enter category name...');
+  });
+
+  it('FE-COMP-BUDGET-028: creating a new category via input calls POST and adds a section', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.post('/api/trips/1/budget', () =>
+        HttpResponse.json({ item: { ...buildBudgetItem({ category: 'Souvenirs', name: 'New Entry' }), total_price: 0 } })
+      )
+    );
+    render(<BudgetPanel tripId={1} />);
+    const input = await screen.findByPlaceholderText('Enter category name...');
+    await user.type(input, 'Souvenirs{Enter}');
+    await screen.findByText('Souvenirs');
+  });
+
+  it('FE-COMP-BUDGET-029: settlement section renders flows with usernames', async () => {
+    const user = userEvent.setup();
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Dinner' }), total_price: 100 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [
+            { user_id: 1, username: 'alice', balance: -10, avatar_url: null },
+            { user_id: 2, username: 'bob', balance: 10, avatar_url: null },
+          ],
+          flows: [
+            { from: { username: 'alice', avatar_url: null }, to: { username: 'bob', avatar_url: null }, amount: 10 },
+          ],
+        })
+      )
+    );
+    const tripMembers = [
+      { id: 1, username: 'alice', avatar_url: null },
+      { id: 2, username: 'bob', avatar_url: null },
+    ];
+    render(<BudgetPanel tripId={1} tripMembers={tripMembers} />);
+    await screen.findByText('Dinner');
+    // Click the settlement toggle button (role button with name containing "settlement")
+    const settlementBtn = await screen.findByRole('button', { name: /settlement/i });
+    await user.click(settlementBtn);
+    // alice and bob should appear in balances section
+    await screen.findByText('alice');
+    await screen.findByText('bob');
+  });
+
+  it('FE-COMP-BUDGET-030: per-person summary renders usernames', async () => {
+    const item = {
+      ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Shared Dinner' }),
+      total_price: 75,
+      members: [{ user_id: 1, username: 'testuser', avatar_url: null, paid: false }],
+    };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/summary/per-person', () =>
+        HttpResponse.json({ summary: [{ user_id: 1, username: 'testuser', avatar_url: null, total_assigned: 75 }] })
+      )
+    );
+    const tripMembers = [
+      { id: 1, username: 'testuser', avatar_url: null },
+      { id: 2, username: 'other', avatar_url: null },
+    ];
+    render(<BudgetPanel tripId={1} tripMembers={tripMembers} />);
+    await screen.findByText('Shared Dinner');
+    await screen.findByText('testuser');
+  });
+
+  it('FE-COMP-BUDGET-032: grand total row shows sum across all categories', async () => {
+    const item1 = { ...buildBudgetItem({ trip_id: 1, category: 'Transport', name: 'Flight' }), total_price: 100 };
+    const item2 = { ...buildBudgetItem({ trip_id: 1, category: 'Hotels', name: 'Hotel' }), total_price: 200 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item1, item2] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Flight');
+    await screen.findByText('Hotel');
+    // Grand total card shows 300.00
+    expect(screen.getByText('300.00')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BUDGET-033: read-only mode hides add/delete/edit controls', async () => {
+    // Restrict budget_edit to trip owners only; user is not the owner (owner_id=1, user.id > 1)
+    seedStore(usePermissionsStore, { permissions: { budget_edit: 'trip_owner' } });
+    // Use a user with id != 1 so they're not the owner
+    seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, owner_id: 9999 }) });
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Read Only Item' }), total_price: 50 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Read Only Item');
+    // In read-only mode the Delete button should not be visible
+    expect(screen.queryByTitle('Delete')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-BUDGET-034: read-only mode shows expense_date as text span', async () => {
+    seedStore(usePermissionsStore, { permissions: { budget_edit: 'trip_owner' } });
+    seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, owner_id: 9999 }) });
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'Transport', name: 'Train' }), total_price: 30, expense_date: '2025-06-15' };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Train');
+    // expense_date is rendered as plain text in read-only mode
+    await screen.findByText('2025-06-15');
+  });
+
+  it('FE-COMP-BUDGET-035: settlement section with avatar renders user avatar image', async () => {
+    const user = userEvent.setup();
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Lunch' }), total_price: 60 };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [
+            { user_id: 1, username: 'alice', avatar_url: '/uploads/avatars/alice.jpg', balance: -30 },
+            { user_id: 2, username: 'bob', avatar_url: null, balance: 30 },
+          ],
+          flows: [{ from: { username: 'alice', avatar_url: '/uploads/avatars/alice.jpg' }, to: { username: 'bob', avatar_url: null }, amount: 30 }]
+        })
+      ),
+      http.get('/api/trips/1/budget/per-person', () => HttpResponse.json({ summary: [] })),
+    );
+    const tripMembers = [
+      { id: 1, username: 'alice', avatar_url: '/uploads/avatars/alice.jpg' },
+      { id: 2, username: 'bob', avatar_url: null },
+    ];
+    render(<BudgetPanel tripId={1} tripMembers={tripMembers} />);
+    await screen.findByText('Lunch');
+    // Trigger settlement display
+    const settlementBtn = await screen.findByRole('button', { name: /settlement/i });
+    await user.click(settlementBtn);
+    await screen.findByText('alice');
+    // Avatar image should be rendered for alice
+    const avatarImg = screen.getAllByRole('img');
+    expect(avatarImg.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-BUDGET-036: expense_date shows dash when not set in read-only mode', async () => {
+    seedStore(usePermissionsStore, { permissions: { budget_edit: 'trip_owner' } });
+    seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, owner_id: 9999 }) });
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'Food', name: 'Snack' }), total_price: 5, expense_date: null };
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] }))
+    );
+    render(<BudgetPanel tripId={1} />);
+    await screen.findByText('Snack');
+    // When expense_date is null, the fallback '—' is shown
+    const dashes = screen.getAllByText('—');
+    expect(dashes.length).toBeGreaterThan(0);
+  });
+});

client/src/components/Budget/BudgetPanel.tsx

@@ -4,7 +4,7 @@ import DOM from 'react-dom'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTranslation } from '../../i18n'
-import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download } from 'lucide-react'
+import { Plus, Trash2, Calculator, Wallet, Pencil, Users, Check, Info, ChevronDown, ChevronRight, Download, GripVertical } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
 import { budgetApi } from '../../api/client'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
@@ -75,9 +75,29 @@ function InlineEditCell({ value, onSave, type = 'text', style = {}, placeholder
     if (v !== value) onSave(v)
   }
 
+  const handlePaste = (e) => {
+    if (type !== 'number') return
+    e.preventDefault()
+    let text = e.clipboardData.getData('text').trim()
+    // Strip everything except digits, dots, commas, minus
+    text = text.replace(/[^\d.,-]/g, '')
+    // Remove all thousand separators (dots or commas before 3-digit groups), keep last separator as decimal
+    const lastComma = text.lastIndexOf(',')
+    const lastDot = text.lastIndexOf('.')
+    const decimalPos = Math.max(lastComma, lastDot)
+    if (decimalPos > -1) {
+      const intPart = text.substring(0, decimalPos).replace(/[.,]/g, '')
+      const decPart = text.substring(decimalPos + 1)
+      text = intPart + '.' + decPart
+    } else {
+      text = text.replace(/[.,]/g, '')
+    }
+    setEditValue(text)
+  }
+
   if (editing) {
     return <input ref={inputRef} type="text" inputMode={type === 'number' ? 'decimal' : 'text'} value={editValue}
-      onChange={e => setEditValue(e.target.value)} onBlur={save}
+      onChange={e => setEditValue(e.target.value)} onBlur={save} onPaste={handlePaste}
       onKeyDown={e => { if (e.key === 'Enter') save(); if (e.key === 'Escape') { setEditValue(value ?? ''); setEditing(false) } }}
       style={{ width: '100%', border: '1px solid var(--accent)', borderRadius: 4, padding: '4px 6px', fontSize: 13, outline: 'none', background: 'var(--bg-input)', color: 'var(--text-primary)', fontFamily: 'inherit', ...style }}
       placeholder={placeholder} />
@@ -131,6 +151,7 @@ function AddItemRow({ onAdd, t }: AddItemRowProps) {
       </td>
       <td style={{ padding: '4px 6px' }}>
         <input value={price} onChange={e => setPrice(e.target.value)} onKeyDown={e => e.key === 'Enter' && handleAdd()}
+          onPaste={e => { e.preventDefault(); let t = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = t.lastIndexOf(','), ld = t.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { t = t.substring(0, dp).replace(/[.,]/g, '') + '.' + t.substring(dp + 1) } else { t = t.replace(/[.,]/g, '') } setPrice(t) }}
           placeholder="0,00" inputMode="decimal" style={{ ...inp, textAlign: 'center' }} />
       </td>
       <td className="hidden sm:table-cell" style={{ padding: '4px 6px', textAlign: 'center' }}>
@@ -422,7 +443,7 @@ interface BudgetPanelProps {
 }
 
 export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelProps) {
-  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid } = useTripStore()
+  const { trip, budgetItems, addBudgetItem, updateBudgetItem, deleteBudgetItem, loadBudgetItems, updateTrip, setBudgetItemMembers, toggleBudgetMemberPaid, reorderBudgetItems, reorderBudgetCategories } = useTripStore()
   const can = useCanDo()
   const { t, locale } = useTranslation()
   const [newCategoryName, setNewCategoryName] = useState('')
@@ -435,6 +456,14 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   const fmt = (v, cur) => fmtNum(v, locale, cur)
   const hasMultipleMembers = tripMembers.length > 1
 
+  // Drag state for categories
+  const [dragCat, setDragCat] = useState<string | null>(null)
+  const [dragOverCat, setDragOverCat] = useState<string | null>(null)
+  // Drag state for items within a category
+  const [dragItem, setDragItem] = useState<number | null>(null)
+  const [dragOverItem, setDragOverItem] = useState<number | null>(null)
+  const [dragItemCat, setDragItemCat] = useState<string | null>(null)
+
   // Load settlement data whenever budget items change
   useEffect(() => {
     if (!hasMultipleMembers) return
@@ -447,21 +476,34 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
 
   useEffect(() => { if (tripId) loadBudgetItems(tripId) }, [tripId])
 
-  const grouped = useMemo(() => (budgetItems || []).reduce((acc, item) => {
-    const cat = item.category || 'Other'
-    if (!acc[cat]) acc[cat] = []
-    acc[cat].push(item)
-    return acc
-  }, {}), [budgetItems])
+  const grouped = useMemo(() => {
+    const map = new Map<string, BudgetItem[]>()
+    for (const item of (budgetItems || [])) {
+      const cat = item.category || 'Other'
+      if (!map.has(cat)) map.set(cat, [])
+      map.get(cat)!.push(item)
+    }
+    return map
+  }, [budgetItems])
 
-  const categoryNames = Object.keys(grouped)
+  const categoryNames = Array.from(grouped.keys())
+
+  // Stable color mapping: assign index-based colors once, never reassign on reorder
+  const colorMapRef = useRef(new Map<string, string>())
+  const categoryColor = useCallback((cat: string) => {
+    const map = colorMapRef.current
+    if (!map.has(cat)) {
+      map.set(cat, PIE_COLORS[map.size % PIE_COLORS.length])
+    }
+    return map.get(cat)!
+  }, [])
   const grandTotal = (budgetItems || []).reduce((s, i) => s + (i.total_price || 0), 0)
 
   const pieSegments = useMemo(() =>
     categoryNames.map((cat, i) => ({
       name: cat,
-      value: grouped[cat].reduce((s, x) => s + (x.total_price || 0), 0),
-      color: PIE_COLORS[i % PIE_COLORS.length],
+      value: (grouped.get(cat) || []).reduce((s, x) => s + (x.total_price || 0), 0),
+      color: categoryColor(cat),
     })).filter(s => s.value > 0)
   , [grouped, categoryNames])
 
@@ -469,7 +511,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
   const handleUpdateField = async (id, field, value) => { try { await updateBudgetItem(tripId, id, { [field]: value }) } catch {} }
   const handleDeleteItem = async (id) => { try { await deleteBudgetItem(tripId, id) } catch {} }
   const handleDeleteCategory = async (cat) => {
-    const items = grouped[cat] || []
+    const items = grouped.get(cat) || []
     for (const item of Array.from(items)) await deleteBudgetItem(tripId, item.id)
   }
   const handleRenameCategory = async (oldName, newName) => {
@@ -494,7 +536,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
     const rows = [header.join(sep)]
 
     for (const cat of categoryNames) {
-      for (const item of (grouped[cat] || [])) {
+      for (const item of (grouped.get(cat) || [])) {
         const pp = calcPP(item.total_price, item.persons)
         const pd = calcPD(item.total_price, item.days)
         const ppd = calcPPD(item.total_price, item.persons, item.days)
@@ -563,14 +605,50 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
       <div style={{ display: 'flex', gap: 20, padding: '0 16px 40px', alignItems: 'flex-start', flexWrap: 'wrap' }}>
         <div style={{ flex: 1, minWidth: 0 }}>
           {categoryNames.map((cat, ci) => {
-            const items = grouped[cat]
+            const items = grouped.get(cat) || []
             const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
-            const color = PIE_COLORS[ci % PIE_COLORS.length]
+            const color = categoryColor(cat)
 
             return (
-              <div key={cat} style={{ marginBottom: 16 }}>
-                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#000000', color: '#fff', borderRadius: '10px 10px 0 0', padding: '9px 14px' }}>
+              <div key={cat} data-drag-cat={cat} style={{
+                  marginBottom: 16, opacity: dragCat === cat ? 0.4 : 1,
+                  transition: 'opacity 0.15s',
+                  position: 'relative',
+                }}
+                onDragOver={e => {
+                  if (!dragCat || dragCat === cat || dragItem) return
+                  e.preventDefault(); e.dataTransfer.dropEffect = 'move'
+                  setDragOverCat(cat)
+                }}
+                onDragLeave={e => {
+                  if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragOverCat(null)
+                }}
+                onDrop={e => {
+                  e.preventDefault()
+                  if (dragCat && dragCat !== cat) {
+                    const newOrder = [...categoryNames]
+                    const fromIdx = newOrder.indexOf(dragCat)
+                    const toIdx = newOrder.indexOf(cat)
+                    newOrder.splice(fromIdx, 1)
+                    newOrder.splice(toIdx, 0, dragCat)
+                    reorderBudgetCategories(tripId, newOrder)
+                  }
+                  setDragCat(null); setDragOverCat(null)
+                }}
+              >
+                {dragOverCat === cat && <div style={{ position: 'absolute', top: -2, left: 0, right: 0, height: 4, background: 'var(--accent)', borderRadius: 2, zIndex: 10 }} />}
+                <div style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#000000', color: '#fff',
+                  borderRadius: '10px 10px 0 0', padding: '9px 14px',
+                }}>
                   <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 }}>
+                    {canEdit && (
+                      <div draggable onDragStart={e => { e.stopPropagation(); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/x-budget-cat', cat); setDragCat(cat) }}
+                        onDragEnd={() => { setDragCat(null); setDragOverCat(null) }}
+                        style={{ cursor: 'grab', display: 'flex', alignItems: 'center', color: 'rgba(255,255,255,0.4)', flexShrink: 0 }}>
+                        <GripVertical size={14} />
+                      </div>
+                    )}
                     <div style={{ width: 10, height: 10, borderRadius: 3, background: color, flexShrink: 0 }} />
                     {canEdit && editingCat?.name === cat ? (
                       <input
@@ -606,7 +684,8 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                   </div>
                 </div>
 
-                <div style={{ overflowX: 'auto', border: '1px solid var(--border-primary)', borderTop: 'none', borderRadius: '0 0 10px 10px' }}>
+                <div style={{ overflowX: 'auto', border: '1px solid var(--border-primary)', borderTop: 'none', borderRadius: '0 0 10px 10px' }}
+                  onDragOver={e => { if (dragCat) { e.preventDefault(); e.dataTransfer.dropEffect = 'move' } }}>
                   <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                     <thead>
                       <tr>
@@ -629,11 +708,41 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                         const ppd = calcPPD(item.total_price, item.persons, item.days)
                         const hasMembers = item.members?.length > 0
                         return (
-                          <tr key={item.id} style={{ transition: 'background 0.1s' }}
+                          <tr key={item.id}
+                            style={{
+                              transition: 'background 0.1s, opacity 0.15s',
+                              opacity: dragItem === item.id ? 0.4 : 1,
+                              boxShadow: dragOverItem === item.id ? 'inset 4px 0 0 0 var(--accent)' : 'none',
+                            }}
+                            onDragOver={e => {
+                              if (dragCat && dragCat !== cat) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; return }
+                              if (dragItem && dragItemCat === cat && dragItem !== item.id) { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; setDragOverItem(item.id) }
+                            }}
+                            onDragLeave={e => { if (!e.currentTarget.contains(e.relatedTarget as Node)) setDragOverItem(null) }}
+                            onDrop={e => {
+                              if (dragItem && dragItemCat === cat && dragItem !== item.id) {
+                                e.preventDefault(); e.stopPropagation()
+                                const ids = items.map(i => i.id)
+                                const fromIdx = ids.indexOf(dragItem)
+                                const toIdx = ids.indexOf(item.id)
+                                ids.splice(fromIdx, 1)
+                                ids.splice(toIdx, 0, dragItem)
+                                reorderBudgetItems(tripId, ids)
+                                setDragItem(null); setDragOverItem(null); setDragItemCat(null)
+                              }
+                            }}
                             onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
                             onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
-                            <td style={td}>
-                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
+                            <td style={{ ...td, display: 'flex', alignItems: 'center', gap: 4 }}>
+                              {canEdit && (
+                                <div draggable onDragStart={e => { e.stopPropagation(); e.dataTransfer.effectAllowed = 'move'; setDragItem(item.id); setDragItemCat(cat) }}
+                                  onDragEnd={() => { setDragItem(null); setDragOverItem(null); setDragItemCat(null) }}
+                                  style={{ cursor: 'grab', display: 'flex', alignItems: 'center', color: 'var(--text-faint)', flexShrink: 0 }}>
+                                  <GripVertical size={12} />
+                                </div>
+                              )}
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                              <InlineEditCell value={item.name} onSave={v => handleUpdateField(item.id, 'name', v)} placeholder={t('budget.table.name')} locale={locale} editTooltip={item.reservation_id ? t('budget.linkedToReservation') : t('budget.editTooltip')} readOnly={!canEdit || !!item.reservation_id} />
                               {/* Mobile: larger chips under name since Persons column is hidden */}
                               {hasMultipleMembers && (
                                 <div className="sm:hidden" style={{ marginTop: 4 }}>
@@ -647,6 +756,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                                   />
                                 </div>
                               )}
+                              </div>
                             </td>
                             <td style={{ ...td, textAlign: 'center' }}>
                               <InlineEditCell value={item.total_price} type="number" decimals={currencyDecimals(currency)} onSave={v => handleUpdateField(item.id, 'total_price', v)} style={{ textAlign: 'center' }} placeholder={currencyDecimals(currency) === 0 ? '0' : '0,00'} locale={locale} editTooltip={t('budget.editTooltip')} readOnly={!canEdit} />
@@ -846,15 +956,19 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
 
               <PieChart segments={pieSegments} size={180} totalLabel={t('budget.total')} />
 
-              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 6 }}>
-                {pieSegments.map(seg => {
+              <div style={{ marginTop: 20, display: 'flex', flexDirection: 'column', gap: 0 }}>
+                {pieSegments.map((seg, i) => {
                   const pct = grandTotal > 0 ? ((seg.value / grandTotal) * 100).toFixed(1) : '0.0'
                   return (
-                    <div key={seg.name} style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                      <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
-                      <span style={{ flex: 1, fontSize: 12, color: 'var(--text-secondary)', fontWeight: 500 }}>{seg.name}</span>
-                      <span style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(seg.value, currency)}</span>
-                      <span style={{ fontSize: 11, color: 'var(--text-muted)', fontWeight: 600, whiteSpace: 'nowrap', minWidth: 38, textAlign: 'right' }}>{pct}%</span>
+                    <div key={seg.name} style={{ padding: '8px 0', borderTop: i > 0 ? '1px solid var(--border-secondary)' : 'none' }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <div style={{ width: 10, height: 10, borderRadius: 3, background: seg.color, flexShrink: 0 }} />
+                        <span style={{ fontSize: 12, color: 'var(--text-primary)', fontWeight: 600 }}>{seg.name}</span>
+                      </div>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 3, paddingLeft: 18 }}>
+                        <span style={{ fontSize: 12, color: 'var(--text-muted)', fontWeight: 500 }}>{fmt(seg.value, currency)}</span>
+                        <span style={{ fontSize: 10, color: 'var(--text-faint)', fontWeight: 600, background: 'var(--bg-secondary)', padding: '1px 6px', borderRadius: 99 }}>{pct}%</span>
+                      </div>
                     </div>
                   )
                 })}

client/src/components/Collab/CollabChat.test.tsx

@@ -0,0 +1,707 @@
+// FE-COMP-CHAT-001 to FE-COMP-CHAT-012
+// jsdom doesn't implement scrollTo — mock it to prevent uncaught exceptions from CollabChat's scrollToBottom
+beforeAll(() => {
+  Element.prototype.scrollTo = vi.fn() as any;
+});
+
+// CollabChat uses addListener/removeListener from websocket — extend the global mock
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, waitFor, act, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import CollabChat from './CollabChat';
+import { addListener } from '../../api/websocket';
+
+const currentUser = buildUser({ id: 1, username: 'testuser' });
+
+const defaultProps = {
+  tripId: 1,
+  currentUser,
+};
+
+beforeEach(() => {
+  resetAllStores();
+  server.use(
+    http.get('/api/trips/1/collab/messages', () =>
+      HttpResponse.json({ messages: [], total: 0 })
+    ),
+  );
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
+});
+
+describe('CollabChat', () => {
+  it('FE-COMP-CHAT-001: renders without crashing', () => {
+    render(<CollabChat {...defaultProps} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-002: shows empty state when no messages', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+  });
+
+  it('FE-COMP-CHAT-003: shows message input placeholder', async () => {
+    render(<CollabChat {...defaultProps} />);
+    // Wait for loading to complete
+    await screen.findByText('Start the conversation');
+    expect(screen.getByPlaceholderText('Type a message...')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-004: shows send button (ArrowUp icon, no title)', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    // Send button has no title attr — verify buttons exist in the toolbar area
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-CHAT-005: shows existing messages from API', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: currentUser.id, username: 'testuser',
+            avatar_url: null, text: 'Hello world!', created_at: '2025-06-01T10:00:00.000Z',
+            reactions: {}, reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Hello world!');
+  });
+
+  it('FE-COMP-CHAT-006: typing in input updates text field', async () => {
+    const user = userEvent.setup();
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const input = screen.getByPlaceholderText('Type a message...');
+    await user.type(input, 'Test message');
+    expect((input as HTMLTextAreaElement).value).toBe('Test message');
+  });
+
+  it('FE-COMP-CHAT-007: submitting message via Enter calls POST API', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.post('/api/trips/1/collab/messages', async () => {
+        postCalled = true;
+        return HttpResponse.json({
+          id: 2, trip_id: 1, user_id: 1, username: 'testuser',
+          avatar_url: null, text: 'New message', created_at: new Date().toISOString(),
+          reactions: {}, reply_to: null, deleted: false, edited: false,
+        });
+      })
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const input = screen.getByPlaceholderText('Type a message...');
+    // Enter key sends message (Shift+Enter = newline, Enter = send)
+    await user.type(input, 'New message{Enter}');
+    await waitFor(() => expect(postCalled).toBe(true));
+  });
+
+  it('FE-COMP-CHAT-008: message input area is present after loading', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    expect(screen.getByPlaceholderText('Type a message...')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-009: shows hint text in empty state', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText(/Share ideas, plans/i);
+  });
+
+  it('FE-COMP-CHAT-010: chat container renders', () => {
+    render(<CollabChat {...defaultProps} />);
+    expect(document.body.children.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-CHAT-011: multiple messages all render', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [
+            { id: 1, trip_id: 1, user_id: 1, username: 'testuser', avatar_url: null, text: 'First message', created_at: '2025-06-01T10:00:00.000Z', reactions: {}, reply_to: null, deleted: false, edited: false },
+            { id: 2, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null, text: 'Second message', created_at: '2025-06-01T10:01:00.000Z', reactions: {}, reply_to: null, deleted: false, edited: false },
+          ],
+          total: 2,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('First message');
+    expect(screen.getByText('Second message')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-012: shows emoji button in the toolbar', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    // Emoji button is a button in the toolbar
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-CHAT-013: date separator shows "Today" for messages sent today', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Hello world!', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Hello world!');
+    expect(screen.getByText('Today')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-014: Shift+Enter inserts a newline instead of sending', async () => {
+    const user = userEvent.setup();
+    let postCalled = false;
+    server.use(
+      http.post('/api/trips/1/collab/messages', async () => {
+        postCalled = true;
+        return HttpResponse.json({});
+      })
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const input = screen.getByPlaceholderText('Type a message...');
+    await user.click(input);
+    await user.type(input, 'Line1');
+    await user.keyboard('{Shift>}{Enter}{/Shift}');
+    await user.type(input, 'Line2');
+    expect((input as HTMLTextAreaElement).value).toContain('\n');
+    expect(postCalled).toBe(false);
+  });
+
+  it('FE-COMP-CHAT-015: deleted message shows fallback text', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'some text', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: true, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await waitFor(() => {
+      expect(screen.getByText(/deleted/i)).toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-CHAT-017: reaction badge renders for a message with reactions', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'React to me', created_at: new Date().toISOString(),
+            reactions: [{ emoji: '❤️', count: 1, users: [{ user_id: 2, username: 'alice' }] }],
+            reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('React to me');
+    // ReactionBadge renders a button containing a TwemojiImg with alt=emoji
+    const img = screen.getByAltText('❤️');
+    expect(img).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-018: WebSocket collab:message:created event adds message to list', async () => {
+    vi.clearAllMocks();
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    await waitFor(() => expect(addListener).toHaveBeenCalled());
+    const handler = (addListener as any).mock.calls[0][0];
+    await act(async () => {
+      handler({
+        type: 'collab:message:created',
+        tripId: 1,
+        message: {
+          id: 99, trip_id: 1, user_id: 2, username: 'alice',
+          text: 'WS message', created_at: new Date().toISOString(),
+          reactions: [], reply_to: null, deleted: false, edited: false,
+        },
+      });
+    });
+    expect(await screen.findByText('WS message')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-019: WebSocket collab:message:deleted event marks message as deleted', async () => {
+    vi.clearAllMocks();
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'To remove', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('To remove');
+    await waitFor(() => expect(addListener).toHaveBeenCalled());
+    const handler = (addListener as any).mock.calls[0][0];
+    await act(async () => {
+      handler({ type: 'collab:message:deleted', tripId: 1, messageId: 1 });
+    });
+    await waitFor(() => {
+      expect(screen.queryByText('To remove')).not.toBeInTheDocument();
+    });
+    expect(screen.getByText(/deleted/i)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-020: send button is disabled when input is empty', async () => {
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const buttons = screen.getAllByRole('button');
+    // The send button is the ArrowUp button — it has disabled attr when text is empty
+    const sendButton = buttons.find(b => b.hasAttribute('disabled'));
+    expect(sendButton).toBeTruthy();
+    expect(sendButton).toBeDisabled();
+  });
+
+  it('FE-COMP-CHAT-021: reply-to banner shows quoted author and text', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Reply here', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null,
+            reply_text: 'Original message', reply_username: 'alice',
+            deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Reply here');
+    expect(screen.getByText(/Original message/i)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-022: own messages are displayed with blue bubble', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: currentUser.id, username: 'testuser', avatar_url: null,
+            text: 'My own message', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('My own message');
+    // Own messages don't show a username label above the bubble (only other users get it)
+    // The component renders {!own && isNewGroup && <span>{msg.username}</span>}
+    // so 'testuser' should NOT appear as a username label
+    const usernameLabels = screen.queryAllByText('testuser');
+    expect(usernameLabels.length).toBe(0);
+    // And own message bubble uses row-reverse flex direction
+    const messageEl = screen.getByText('My own message');
+    let parent = messageEl.parentElement;
+    let foundRowReverse = false;
+    while (parent) {
+      const styleAttr = parent.getAttribute('style');
+      if (styleAttr && styleAttr.includes('row-reverse')) {
+        foundRowReverse = true;
+        break;
+      }
+      parent = parent.parentElement;
+    }
+    expect(foundRowReverse).toBe(true);
+  });
+
+  it('FE-COMP-CHAT-023: sending a message clears the input field', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/trips/1/collab/messages', async () =>
+        HttpResponse.json({
+          message: {
+            id: 2, trip_id: 1, user_id: 1, username: 'testuser',
+            avatar_url: null, text: 'Sent message', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          },
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const input = screen.getByPlaceholderText('Type a message...');
+    await user.type(input, 'Sent message');
+    expect((input as HTMLTextAreaElement).value).toBe('Sent message');
+    await user.keyboard('{Enter}');
+    await waitFor(() => {
+      expect((input as HTMLTextAreaElement).value).toBe('');
+    });
+  });
+
+  it('FE-COMP-CHAT-024: load earlier messages button appears when 100+ messages exist', async () => {
+    const messages = Array.from({ length: 100 }, (_, i) => ({
+      id: i + 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+      text: `Message ${i + 1}`, created_at: new Date().toISOString(),
+      reactions: [], reply_to: null, deleted: false, edited: false,
+    }));
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({ messages, total: 100 })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Message 1');
+    const loadMoreBtn = await screen.findByRole('button', { name: /load/i });
+    expect(loadMoreBtn).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-025: clicking reply button on a message sets reply-to preview', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Reply to me', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Reply to me');
+    // Hover action buttons are always in DOM but hidden via pointer-events: none
+    // Use fireEvent to bypass CSS pointer-events restrictions
+    const replyBtn = screen.getByTitle('Reply');
+    fireEvent.click(replyBtn);
+    // Reply preview banner renders <strong>{username}</strong> — unique to the banner
+    await waitFor(() => {
+      const aliceEls = screen.queryAllByText('alice');
+      expect(aliceEls.some(el => el.tagName === 'STRONG')).toBe(true);
+    });
+  });
+
+  it('FE-COMP-CHAT-026: clicking X in reply preview cancels reply', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Cancel reply test', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Cancel reply test');
+    // Click reply button to show preview (bypassing pointer-events: none)
+    fireEvent.click(screen.getByTitle('Reply'));
+    // Wait for reply preview <strong> to appear
+    await waitFor(() => {
+      const aliceEls = screen.queryAllByText('alice');
+      expect(aliceEls.some(el => el.tagName === 'STRONG')).toBe(true);
+    });
+    // Find the X button inside the reply preview — the <strong> is inside a <span> inside the preview div
+    const strongEl = screen.getAllByText('alice').find(el => el.tagName === 'STRONG')!;
+    const previewDiv = strongEl.closest('div[style]');
+    const xBtn = previewDiv?.querySelector('button');
+    expect(xBtn).toBeTruthy();
+    fireEvent.click(xBtn!);
+    await waitFor(() => {
+      // After cancel, no <strong>alice</strong> in reply preview
+      const remaining = screen.queryAllByText('alice');
+      expect(remaining.every(el => el.tagName !== 'STRONG')).toBe(true);
+    });
+  });
+
+  it('FE-COMP-CHAT-027: clicking emoji button opens the emoji picker', async () => {
+    const user = userEvent.setup();
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    // Smile button is the only non-disabled button when input is empty
+    const allButtons = screen.getAllByRole('button');
+    const smileBtn = allButtons.find(b => !b.hasAttribute('disabled'));
+    expect(smileBtn).toBeTruthy();
+    await user.click(smileBtn!);
+    // EmojiPicker renders category tabs
+    await screen.findByText('Smileys');
+    expect(screen.getByText('Reactions')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-028: selecting emoji from picker appends it to the input', async () => {
+    const user = userEvent.setup();
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Start the conversation');
+    const allButtons = screen.getAllByRole('button');
+    const smileBtn = allButtons.find(b => !b.hasAttribute('disabled'));
+    await user.click(smileBtn!);
+    // Wait for picker to open
+    await screen.findByText('Smileys');
+    // Click the first emoji in the grid (😀 is the first in Smileys)
+    const emojiImg = screen.getAllByRole('img').find(img => img.getAttribute('alt') === '😀');
+    expect(emojiImg).toBeTruthy();
+    await user.click(emojiImg!.closest('button')!);
+    // Emoji should be appended to textarea
+    const textarea = screen.getByPlaceholderText('Type a message...');
+    expect((textarea as HTMLTextAreaElement).value).toContain('😀');
+  });
+
+  it('FE-COMP-CHAT-029: right-clicking a message opens the reaction menu', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Right click me', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Right click me');
+    const messageBubble = screen.getByText('Right click me').closest('div[style]');
+    fireEvent.contextMenu(messageBubble!);
+    // ReactionMenu renders quick reactions (❤️ is the first)
+    await waitFor(() => {
+      const reactionImgs = screen.getAllByRole('img').filter(img =>
+        ['❤️', '😂', '👍'].includes(img.getAttribute('alt') || '')
+      );
+      expect(reactionImgs.length).toBeGreaterThan(0);
+    });
+  });
+
+  it('FE-COMP-CHAT-030: clicking a reaction in the menu calls reactMessage API', async () => {
+    let reactCalled = false;
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'React to this', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      ),
+      http.post('/api/trips/1/collab/messages/1/react', async () => {
+        reactCalled = true;
+        return HttpResponse.json({ reactions: [{ emoji: '❤️', count: 1, users: [{ user_id: 1, username: 'testuser' }] }] });
+      })
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('React to this');
+    // Open reaction context menu
+    const messageBubble = screen.getByText('React to this').closest('div[style]');
+    fireEvent.contextMenu(messageBubble!);
+    // Wait for menu and click first reaction (❤️)
+    const heartImg = await screen.findByAltText('❤️');
+    fireEvent.click(heartImg.closest('button')!);
+    await waitFor(() => expect(reactCalled).toBe(true));
+  });
+
+  it('FE-COMP-CHAT-031: WebSocket collab:message:reacted event updates reactions', async () => {
+    vi.clearAllMocks();
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Reacted message', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Reacted message');
+    await waitFor(() => expect(addListener).toHaveBeenCalled());
+    const handler = (addListener as any).mock.calls[0][0];
+    await act(async () => {
+      handler({
+        type: 'collab:message:reacted',
+        tripId: 1,
+        messageId: 1,
+        reactions: [{ emoji: '🔥', count: 1, users: [{ user_id: 2, username: 'alice' }] }],
+      });
+    });
+    await screen.findByAltText('🔥');
+  });
+
+  it('FE-COMP-CHAT-032: clicking "Load older messages" loads paginated results', async () => {
+    const initialMessages = Array.from({ length: 100 }, (_, i) => ({
+      id: i + 100, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+      text: `New ${i + 100}`, created_at: new Date().toISOString(),
+      reactions: [], reply_to: null, deleted: false, edited: false,
+    }));
+    let callCount = 0;
+    server.use(
+      http.get('/api/trips/1/collab/messages', () => {
+        callCount++;
+        if (callCount === 1) {
+          return HttpResponse.json({ messages: initialMessages, total: 120 });
+        }
+        return HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Older message', created_at: '2020-01-01T10:00:00.000Z',
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 120,
+        });
+      })
+    );
+    const user = userEvent.setup();
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('New 100');
+    const loadMoreBtn = screen.getByRole('button', { name: /load/i });
+    await user.click(loadMoreBtn);
+    await screen.findByText('Older message');
+  });
+
+  it('FE-COMP-CHAT-033: clicking delete on own message marks it as deleted', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: currentUser.id, username: 'testuser', avatar_url: null,
+            text: 'Delete me', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      ),
+      http.delete('/api/trips/1/collab/messages/1', () =>
+        HttpResponse.json({ success: true })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Delete me');
+    // Delete button is in a hover-actions div with pointer-events: none — use fireEvent
+    const deleteBtn = screen.getByTitle('Delete');
+    fireEvent.click(deleteBtn);
+    // handleDelete uses a 400ms setTimeout before calling the API
+    await waitFor(
+      () => expect(screen.getByText(/deleted/i)).toBeInTheDocument(),
+      { timeout: 1500 }
+    );
+  });
+
+  it('FE-COMP-CHAT-034: single-emoji message renders as big emoji', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: '👍', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('👍');
+    // Big emoji renders in a div with fontSize: 40px — include emojiEl itself in search
+    const emojiEl = screen.getByText('👍');
+    let el: HTMLElement | null = emojiEl as HTMLElement;
+    let foundBigEmoji = false;
+    while (el) {
+      const styleAttr = el.getAttribute('style');
+      if (styleAttr && styleAttr.includes('font-size: 40px')) {
+        foundBigEmoji = true;
+        break;
+      }
+      el = el.parentElement;
+    }
+    expect(foundBigEmoji).toBe(true);
+  });
+
+  it('FE-COMP-CHAT-035: 24h time format renders timestamp without AM/PM', async () => {
+    seedStore(useSettingsStore, { settings: { time_format: '24h' } as any });
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: 'Time format test', created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText('Time format test');
+    // 24h format: timestamp like "HH:MM" — no AM/PM suffix
+    expect(screen.queryByText(/AM|PM/)).not.toBeInTheDocument();
+    // There should be a timestamp element matching HH:MM
+    const timestamp = screen.getByText((text) => /^\d{1,2}:\d{2}$/.test(text));
+    expect(timestamp).toBeInTheDocument();
+  });
+
+  it('FE-COMP-CHAT-036: message with URL shows link preview when API returns data', async () => {
+    const uniqueUrl = 'https://preview-test-unique-url-9999.example.com/page';
+    server.use(
+      http.get('/api/trips/1/collab/messages', () =>
+        HttpResponse.json({
+          messages: [{
+            id: 1, trip_id: 1, user_id: 2, username: 'alice', avatar_url: null,
+            text: `Check this out ${uniqueUrl}`,
+            created_at: new Date().toISOString(),
+            reactions: [], reply_to: null, deleted: false, edited: false,
+          }],
+          total: 1,
+        })
+      ),
+      http.get('/api/trips/1/collab/link-preview', () =>
+        HttpResponse.json({ title: 'Preview Title', description: 'Preview Desc', image: null, site_name: 'Example' })
+      )
+    );
+    render(<CollabChat {...defaultProps} />);
+    await screen.findByText(/Check this out/);
+    await waitFor(
+      () => expect(screen.getByText('Preview Title')).toBeInTheDocument(),
+      { timeout: 3000 }
+    );
+  });
+});

client/src/components/Collab/CollabChat.tsx

@@ -370,6 +370,11 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
   const [showEmoji, setShowEmoji] = useState(false)
   const [reactMenu, setReactMenu] = useState(null) // { msgId, x, y }
   const [deletingIds, setDeletingIds] = useState(new Set())
+  const deleteTimersRef = useRef<ReturnType<typeof setTimeout>[]>([])
+
+  useEffect(() => {
+    return () => { deleteTimersRef.current.forEach(clearTimeout) }
+  }, [])
 
   const containerRef = useRef(null)
   const messagesRef = useRef(messages)
@@ -483,13 +488,14 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
     requestAnimationFrame(() => {
       setDeletingIds(prev => new Set(prev).add(msgId))
     })
-    setTimeout(async () => {
+    const t = setTimeout(async () => {
       try {
         await collabApi.deleteMessage(tripId, msgId)
         setMessages(prev => prev.map(m => m.id === msgId ? { ...m, _deleted: true } : m))
       } catch {}
       setDeletingIds(prev => { const s = new Set(prev); s.delete(msgId); return s })
     }, 400)
+    deleteTimersRef.current.push(t)
   }, [tripId])
 
   const handleReact = useCallback(async (msgId, emoji) => {
@@ -762,7 +768,7 @@ export default function CollabChat({ tripId, currentUser }: CollabChatProps) {
       )}
 
       {/* Composer */}
-      <div style={{ flexShrink: 0, padding: '8px 12px calc(12px + env(safe-area-inset-bottom, 0px))', borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }}>
+      <div style={{ flexShrink: 0, paddingTop: 8, paddingLeft: 12, paddingRight: 12, borderTop: '1px solid var(--border-faint)', background: 'var(--bg-card)' }} className="pb-[96px] md:pb-3">
         {/* Reply preview */}
         {replyTo && (
           <div style={{

client/src/components/Collab/CollabNotes.tsx

@@ -3,9 +3,11 @@ import { useState, useEffect, useCallback, useRef, useMemo } from 'react'
 import DOM from 'react-dom'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
-import { Plus, Trash2, Pin, PinOff, Pencil, X, Check, StickyNote, Settings, ExternalLink, Maximize2 } from 'lucide-react'
+import remarkBreaks from 'remark-breaks'
+import { Plus, Trash2, Pin, PinOff, Pencil, X, Check, StickyNote, Settings, ExternalLink, Maximize2, Loader2 } from 'lucide-react'
 import { collabApi } from '../../api/client'
 import { getAuthUrl } from '../../api/authUrl'
+import { openFile } from '../../utils/fileDownload'
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
@@ -100,6 +102,7 @@ function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
   const [authUrl, setAuthUrl] = useState('')
   const rawUrl = file?.url || ''
   useEffect(() => {
+    setAuthUrl('')
     if (!rawUrl) return
     getAuthUrl(rawUrl, 'download').then(setAuthUrl)
   }, [rawUrl])
@@ -109,17 +112,17 @@ function FilePreviewPortal({ file, onClose }: FilePreviewPortalProps) {
   const isPdf = file.mime_type === 'application/pdf'
   const isTxt = file.mime_type?.startsWith('text/')
 
-  const openInNewTab = async () => {
-    const u = await getAuthUrl(rawUrl, 'download')
-    window.open(u, '_blank', 'noreferrer')
-  }
+  const openInNewTab = () => openFile(rawUrl).catch(() => {})
 
   return ReactDOM.createPortal(
     <div style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 10000, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }} onClick={onClose}>
       {isImage ? (
         /* Image lightbox — floating controls */
         <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
-          <img src={authUrl} alt={file.original_name} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} />
+          {authUrl
+            ? <img src={authUrl} alt={file.original_name} style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} />
+            : <Loader2 size={32} className="animate-spin" style={{ color: 'rgba(255,255,255,0.5)' }} />
+          }
           <div style={{ position: 'absolute', top: -36, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
             <span style={{ fontSize: 11, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '70%' }}>{file.original_name}</span>
             <div style={{ display: 'flex', gap: 8 }}>
@@ -309,7 +312,6 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
         padding: 16,
         fontFamily: FONT,
       }}
-      onClick={onClose}
     >
       <form
         style={{
@@ -487,7 +489,7 @@ function NoteFormModal({ onClose, onSubmit, onDeleteFile, existingCategories, ca
                 const isImage = a.mime_type?.startsWith('image/')
                 return (
                   <div key={a.id} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 8px', borderRadius: 8, background: 'var(--bg-secondary)', fontSize: 11, color: 'var(--text-muted)' }}>
-                    {isImage && <img src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 3 }} />}
+                    {isImage && <AuthedImg src={a.url} style={{ width: 18, height: 18, objectFit: 'cover', borderRadius: 3 }} />}
                     {(a.original_name || '').length > 20 ? a.original_name.slice(0, 17) + '...' : a.original_name}
                     <button type="button" onClick={() => handleDeleteAttachment(a.id)} style={{ background: 'none', border: 'none', cursor: 'pointer', color: '#ef4444', padding: 0, display: 'flex' }}>
                       <X size={10} />
@@ -842,7 +844,7 @@ function NoteCard({ note, currentUser, canEdit, onUpdate, onDelete, onEdit, onVi
                 maxHeight: '4.5em', overflow: 'hidden',
                 wordBreak: 'break-word', fontFamily: FONT,
               }}>
-                <Markdown remarkPlugins={[remarkGfm]}>{note.content}</Markdown>
+                <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{note.content}</Markdown>
               </div>
             )}
           </div>
@@ -1349,7 +1351,42 @@ export default function CollabNotes({ tripId, currentUser }: CollabNotesProps) {
               </div>
             </div>
             <div className="collab-note-md-full" style={{ padding: '16px 20px', overflowY: 'auto', fontSize: 14, color: 'var(--text-primary)', lineHeight: 1.7 }}>
-              <Markdown remarkPlugins={[remarkGfm]}>{viewingNote.content || ''}</Markdown>
+              <Markdown remarkPlugins={[remarkGfm, remarkBreaks]}>{viewingNote.content || ''}</Markdown>
+              {(viewingNote.attachments || []).length > 0 && (
+                <div style={{ marginTop: 16, paddingTop: 16, borderTop: '1px solid var(--border-primary)' }}>
+                  <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0.5, marginBottom: 10 }}>{t('files.title')}</div>
+                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+                    {(viewingNote.attachments || []).map(a => {
+                      const isImage = a.mime_type?.startsWith('image/')
+                      const ext = (a.original_name || '').split('.').pop()?.toUpperCase() || '?'
+                      return (
+                        <div key={a.id} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, maxWidth: 72 }}>
+                          {isImage ? (
+                            <AuthedImg src={a.url} alt={a.original_name}
+                              style={{ width: 64, height: 64, objectFit: 'cover', borderRadius: 8, cursor: 'pointer', transition: 'transform 0.12s, box-shadow 0.12s' }}
+                              onClick={() => setPreviewFile(a)}
+                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }} />
+                          ) : (
+                            <div title={a.original_name} onClick={() => setPreviewFile(a)}
+                              style={{
+                                width: 64, height: 64, borderRadius: 8, cursor: 'pointer',
+                                background: a.mime_type === 'application/pdf' ? '#ef44441a' : 'var(--bg-secondary)',
+                                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1,
+                                transition: 'transform 0.12s, box-shadow 0.12s',
+                              }}
+                              onMouseEnter={e => { e.currentTarget.style.transform = 'scale(1.06)'; e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.15)' }}
+                              onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; e.currentTarget.style.boxShadow = 'none' }}>
+                              <span style={{ fontSize: 10, fontWeight: 700, color: a.mime_type === 'application/pdf' ? '#ef4444' : 'var(--text-muted)', letterSpacing: 0.3 }}>{ext}</span>
+                            </div>
+                          )}
+                          <span style={{ fontSize: 9, color: 'var(--text-faint)', textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100%' }}>{a.original_name}</span>
+                        </div>
+                      )
+                    })}
+                  </div>
+                </div>
+              )}
             </div>
           </div>
         </div>,

client/src/components/Collab/CollabPanel.test.tsx

@@ -0,0 +1,145 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { render, screen, fireEvent } from '../../../tests/helpers/render'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { buildUser } from '../../../tests/helpers/factories'
+import { useAuthStore } from '../../store/authStore'
+
+vi.mock('./CollabChat', () => ({ default: () => <div data-testid="collab-chat">Chat</div> }))
+vi.mock('./CollabNotes', () => ({ default: () => <div data-testid="collab-notes">Notes</div> }))
+vi.mock('./CollabPolls', () => ({ default: () => <div data-testid="collab-polls">Polls</div> }))
+vi.mock('./WhatsNextWidget', () => ({ default: () => <div data-testid="whats-next">WhatsNext</div> }))
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}))
+
+import CollabPanel from './CollabPanel'
+
+let originalInnerWidth: number
+
+function setViewport(width: number) {
+  Object.defineProperty(window, 'innerWidth', { value: width, writable: true, configurable: true })
+  window.dispatchEvent(new Event('resize'))
+}
+
+describe('CollabPanel', () => {
+  beforeEach(() => {
+    originalInnerWidth = window.innerWidth
+    resetAllStores()
+    seedStore(useAuthStore, { user: buildUser() })
+  })
+
+  afterEach(() => {
+    Object.defineProperty(window, 'innerWidth', { value: originalInnerWidth, writable: true, configurable: true })
+  })
+
+  // FE-COMP-COLLABPANEL-001
+  it('desktop layout renders all four panels', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} />)
+    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-002
+  it('mobile layout renders tab bar, not all panels at once', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    // Tab buttons exist
+    expect(screen.getByRole('button', { name: /chat/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /notes/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /polls/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /what.?s next/i })).toBeInTheDocument()
+    // Only chat visible by default
+    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('collab-polls')).not.toBeInTheDocument()
+    expect(screen.queryByTestId('whats-next')).not.toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-003
+  it('mobile: clicking Notes tab switches to CollabNotes', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    fireEvent.click(screen.getByRole('button', { name: /notes/i }))
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-004
+  it('mobile: clicking Polls tab switches to CollabPolls', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    fireEvent.click(screen.getByRole('button', { name: /polls/i }))
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-005
+  it('mobile: clicking What\'s Next tab shows WhatsNextWidget', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    fireEvent.click(screen.getByRole('button', { name: /what.?s next/i }))
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-chat')).not.toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-006
+  it('mobile: active tab button has accent background style', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    const chatButton = screen.getByRole('button', { name: /chat/i })
+    expect(chatButton.style.background).toBe('var(--accent)')
+    const notesButton = screen.getByRole('button', { name: /notes/i })
+    expect(notesButton.style.background).toBe('transparent')
+  })
+
+  // FE-COMP-COLLABPANEL-007
+  it('mobile: default active tab is Chat', () => {
+    setViewport(375)
+    render(<CollabPanel tripId={1} />)
+    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-008
+  it('tripMembers prop is forwarded to WhatsNextWidget', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} tripMembers={[{ id: 5, username: 'alice', avatar_url: null }]} />)
+    expect(screen.getByTestId('whats-next')).toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-009
+  it('tripId prop is forwarded to child components', () => {
+    setViewport(1280)
+    render(<CollabPanel tripId={1} />)
+    // All children render without errors, confirming props were forwarded
+    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-polls')).toBeInTheDocument()
+  })
+
+  // FE-COMP-COLLABPANEL-010
+  it('resize from desktop to mobile hides side-by-side layout', () => {
+    setViewport(1280)
+    const { rerender } = render(<CollabPanel tripId={1} />)
+    // All four panels visible on desktop
+    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
+    expect(screen.getByTestId('collab-notes')).toBeInTheDocument()
+
+    // Switch to mobile
+    setViewport(375)
+    rerender(<CollabPanel tripId={1} />)
+
+    // Tab bar appears, only chat visible
+    expect(screen.getByRole('button', { name: /chat/i })).toBeInTheDocument()
+    expect(screen.getByTestId('collab-chat')).toBeInTheDocument()
+    expect(screen.queryByTestId('collab-notes')).not.toBeInTheDocument()
+  })
+})

client/src/components/Collab/CollabPolls.test.tsx

@@ -0,0 +1,275 @@
+// FE-COMP-POLLS-001 to FE-COMP-POLLS-015
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import CollabPolls from './CollabPolls';
+import { addListener } from '../../api/websocket';
+
+const currentUser = buildUser({ id: 1, username: 'testuser' });
+
+const buildPoll = (overrides: Record<string, unknown> = {}) => ({
+  id: 1,
+  question: 'Best destination?',
+  options: [
+    { id: 1, text: 'Paris', label: 'Paris', voters: [] },
+    { id: 2, text: 'Rome', label: 'Rome', voters: [] },
+  ],
+  multi_choice: false,
+  is_closed: false,
+  deadline: null,
+  created_by: 1,
+  created_at: new Date().toISOString(),
+  ...overrides,
+});
+
+const defaultProps = { tripId: 1, currentUser };
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+  server.use(
+    http.get('/api/trips/1/collab/polls', () =>
+      HttpResponse.json({ polls: [] }),
+    ),
+  );
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, owner_id: 1 }) });
+});
+
+describe('CollabPolls', () => {
+  it('FE-COMP-POLLS-001: renders empty state when no polls exist', async () => {
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+  });
+
+  it('FE-COMP-POLLS-002: shows loading spinner initially', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', async () => {
+        await new Promise((r) => setTimeout(r, 200));
+        return HttpResponse.json({ polls: [] });
+      }),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    // The spinner is a div with animation style
+    expect(
+      document.querySelector('[style*="animation"]'),
+    ).toBeInTheDocument();
+  });
+
+  it('FE-COMP-POLLS-003: renders poll question from API', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll()] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText('Best destination?');
+  });
+
+  it('FE-COMP-POLLS-004: renders poll options', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll()] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText('Paris');
+    expect(screen.getByText('Rome')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-POLLS-005: New Poll button is visible when user can edit', async () => {
+    render(<CollabPolls {...defaultProps} />);
+    // Wait for loading to finish
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+    expect(
+      screen.getByRole('button', { name: /new/i }),
+    ).toBeInTheDocument();
+  });
+
+  it('FE-COMP-POLLS-006: clicking New Poll button opens the create modal', async () => {
+    const user = userEvent.setup();
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+    await user.click(screen.getByRole('button', { name: /new/i }));
+    // Modal has a question placeholder input
+    await screen.findByPlaceholderText(/what should we do/i);
+  });
+
+  it('FE-COMP-POLLS-007: create modal requires question and at least 2 options to enable submit', async () => {
+    const user = userEvent.setup();
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+    await user.click(screen.getByRole('button', { name: /new/i }));
+
+    // Find submit button - it's the form submit with the create label
+    const submitBtn = screen.getByRole('button', { name: /create|collab\.polls\.create/i });
+    expect(submitBtn).toBeDisabled();
+
+    // Fill in question
+    const questionInput = screen.getByPlaceholderText(/what should we do/i);
+    await user.type(questionInput, 'Where to go?');
+
+    // Still disabled — no options filled
+    expect(submitBtn).toBeDisabled();
+
+    // Fill in 2 options
+    const optionInputs = screen.getAllByPlaceholderText(/option/i);
+    await user.type(optionInputs[0], 'Beach');
+    await user.type(optionInputs[1], 'Mountain');
+
+    expect(submitBtn).toBeEnabled();
+  });
+
+  it('FE-COMP-POLLS-008: creating a poll calls POST API and adds it to the list', async () => {
+    const user = userEvent.setup();
+    server.use(
+      http.post('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ poll: buildPoll({ id: 99, question: 'Where to eat?' }) }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+
+    await user.click(screen.getByRole('button', { name: /new/i }));
+    await user.type(screen.getByPlaceholderText(/what should we do/i), 'Where to eat?');
+    const optionInputs = screen.getAllByPlaceholderText(/option/i);
+    await user.type(optionInputs[0], 'Italian');
+    await user.type(optionInputs[1], 'Japanese');
+
+    await user.click(screen.getByRole('button', { name: /create|collab\.polls\.create/i }));
+    await screen.findByText('Where to eat?');
+  });
+
+  it('FE-COMP-POLLS-009: voting on an option calls POST vote API', async () => {
+    let voteCalled = false;
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll()] }),
+      ),
+      http.post('/api/trips/1/collab/polls/1/vote', () => {
+        voteCalled = true;
+        return HttpResponse.json({
+          poll: buildPoll({
+            options: [
+              { id: 1, text: 'Paris', label: 'Paris', voters: [{ user_id: 1, username: 'testuser', avatar_url: null }] },
+              { id: 2, text: 'Rome', label: 'Rome', voters: [] },
+            ],
+          }),
+        });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText('Paris');
+    await user.click(screen.getByText('Paris'));
+    await waitFor(() => expect(voteCalled).toBe(true));
+  });
+
+  it('FE-COMP-POLLS-010: closed poll shows "Closed" badge', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ is_closed: true })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/closed/i);
+  });
+
+  it('FE-COMP-POLLS-011: closed poll options are disabled (cannot vote)', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ is_closed: true })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText('Paris');
+    const parisBtn = screen.getByText('Paris').closest('button');
+    expect(parisBtn).toBeDisabled();
+  });
+
+  it('FE-COMP-POLLS-012: delete button calls DELETE API and removes poll', async () => {
+    let deleteCalled = false;
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ id: 5 })] }),
+      ),
+      http.delete('/api/trips/1/collab/polls/5', () => {
+        deleteCalled = true;
+        return HttpResponse.json({ success: true });
+      }),
+    );
+    const user = userEvent.setup();
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText('Best destination?');
+
+    // Delete button has a title with "delete"
+    const deleteBtn = screen.getByTitle(/delete/i);
+    await user.click(deleteBtn);
+
+    await waitFor(() => expect(deleteCalled).toBe(true));
+    await waitFor(() =>
+      expect(screen.queryByText('Best destination?')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('FE-COMP-POLLS-013: WebSocket collab:poll:created event adds poll', async () => {
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+
+    // Get the WS listener that was registered
+    const listener = (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
+    listener({ type: 'collab:poll:created', poll: buildPoll({ id: 77, question: 'Live poll?' }) });
+
+    await screen.findByText('Live poll?');
+  });
+
+  it('FE-COMP-POLLS-014: WebSocket collab:poll:deleted event removes poll', async () => {
+    server.use(
+      http.get('/api/trips/1/collab/polls', () =>
+        HttpResponse.json({ polls: [buildPoll({ id: 3 })] }),
+      ),
+    );
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText('Best destination?');
+
+    const listener = (addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
+    listener({ type: 'collab:poll:deleted', pollId: 3 });
+
+    await waitFor(() =>
+      expect(screen.queryByText('Best destination?')).not.toBeInTheDocument(),
+    );
+  });
+
+  it('FE-COMP-POLLS-015: adding a third option in create modal', async () => {
+    const user = userEvent.setup();
+    render(<CollabPolls {...defaultProps} />);
+    await screen.findByText(/no polls yet|collab\.polls\.empty/i);
+    await user.click(screen.getByRole('button', { name: /new/i }));
+
+    // Initially 2 option inputs
+    let optionInputs = screen.getAllByPlaceholderText(/option/i);
+    expect(optionInputs).toHaveLength(2);
+
+    // Click "Add option"
+    await user.click(screen.getByText(/add option/i));
+
+    optionInputs = screen.getAllByPlaceholderText(/option/i);
+    expect(optionInputs).toHaveLength(3);
+  });
+});

client/src/components/Collab/WhatsNextWidget.test.tsx

@@ -0,0 +1,278 @@
+import { render, screen } from '../../../tests/helpers/render'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import WhatsNextWidget from './WhatsNextWidget'
+import { afterEach, beforeEach, describe, it, expect } from 'vitest'
+
+// Dynamic date helpers
+const today = new Date().toISOString().split('T')[0]
+
+function getFutureDate(daysAhead: number): string {
+  const d = new Date()
+  d.setDate(d.getDate() + daysAhead)
+  return d.toISOString().split('T')[0]
+}
+
+function getPastDate(daysBack: number): string {
+  const d = new Date()
+  d.setDate(d.getDate() - daysBack)
+  return d.toISOString().split('T')[0]
+}
+
+const tomorrow = getFutureDate(1)
+const yesterday = getPastDate(1)
+
+function makeAssignment(id: number, placeOverrides: Record<string, unknown> = {}, participants: unknown[] = []) {
+  return {
+    id,
+    day_id: 1,
+    place_id: id,
+    order_index: 0,
+    notes: null,
+    place: {
+      id,
+      trip_id: 1,
+      name: `Place ${id}`,
+      description: null,
+      lat: 0,
+      lng: 0,
+      address: null,
+      category_id: null,
+      icon: null,
+      price: null,
+      image_url: null,
+      google_place_id: null,
+      osm_id: null,
+      route_geometry: null,
+      place_time: null,
+      end_time: null,
+      created_at: '2025-01-01T00:00:00.000Z',
+      ...placeOverrides,
+    },
+    participants,
+  }
+}
+
+describe('WhatsNextWidget', () => {
+  beforeEach(() => {
+    resetAllStores()
+    seedStore(useSettingsStore, { settings: { time_format: '24h' } })
+  })
+
+  afterEach(() => {
+    resetAllStores()
+  })
+
+  it('FE-COMP-WHATSNEXT-001: renders empty state when no days exist', () => {
+    seedStore(useTripStore, { days: [], assignments: {} })
+    render(<WhatsNextWidget />)
+    // Translation resolves to "No upcoming activities"
+    expect(screen.getByText(/no upcoming/i)).toBeInTheDocument()
+    expect(screen.queryByText('Place 1')).toBeNull()
+  })
+
+  it('FE-COMP-WHATSNEXT-001b: empty state element is rendered', () => {
+    seedStore(useTripStore, { days: [], assignments: {} })
+    render(<WhatsNextWidget />)
+    // collab.whatsNext.empty key is rendered as text in test env
+    const allText = document.body.textContent || ''
+    // No assignment time/name visible — just the header and empty hint
+    expect(allText).not.toContain('14:30')
+  })
+
+  it('FE-COMP-WHATSNEXT-002: shows empty state when all events are in the past', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: yesterday, title: 'Old Day', order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(10, { place_time: '08:00' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.queryByText('08:00')).toBeNull()
+    expect(screen.queryByText('Place 10')).toBeNull()
+  })
+
+  it('FE-COMP-WHATSNEXT-003: shows a future-day event with place name', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(20, { name: 'Eiffel Tower' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('Eiffel Tower')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-004: shows "Tomorrow" label for next-day group', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(21, { name: 'Museum' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    // The label text comes from t('collab.whatsNext.tomorrow') which falls back to 'Tomorrow'
+    expect(screen.getByText(/tomorrow/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-005: shows "Today" label for today\'s events with future time', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: today, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(22, { name: 'Night Dinner', place_time: '23:59' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText(/today/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-006: renders event time in 24h format', () => {
+    seedStore(useSettingsStore, { settings: { time_format: '24h' } })
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(30, { name: 'Gallery', place_time: '14:30' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('14:30')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-007: renders event time in 12h format', () => {
+    seedStore(useSettingsStore, { settings: { time_format: '12h' } })
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(31, { name: 'Gallery', place_time: '14:30' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('2:30 PM')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-008: shows "TBD" when event has no time', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(32, { name: 'Free Time', place_time: null })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('TBD')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-009: renders address when provided', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(33, { name: 'Café', address: '123 Rue de Rivoli' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('123 Rue de Rivoli')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-010: caps list at 8 items', () => {
+    const days = Array.from({ length: 5 }, (_, i) => ({
+      id: i + 1,
+      trip_id: 1,
+      date: getFutureDate(i + 1),
+      title: null,
+      order: i,
+      assignments: [],
+      notes_items: [],
+      notes: null,
+    }))
+
+    const assignments: Record<string, unknown[]> = {}
+    let placeId = 100
+    for (const day of days) {
+      assignments[String(day.id)] = [
+        makeAssignment(placeId++, { name: `Place ${placeId}`, place_time: '10:00' }),
+        makeAssignment(placeId++, { name: `Place ${placeId}`, place_time: '11:00' }),
+      ]
+    }
+
+    seedStore(useTripStore, { days, assignments })
+    render(<WhatsNextWidget />)
+
+    // 10 items seeded, only 8 should appear — count "TBD" or time occurrences
+    const timeElements = screen.getAllByText('10:00')
+    // At most 4 days * 1 morning slot = up to 4 "10:00" entries, but capped at 8 total items
+    // We verify total rendered items is at most 8 by counting both time slots
+    const allTimes = screen.getAllByText(/10:00|11:00/)
+    expect(allTimes.length).toBeLessThanOrEqual(8)
+  })
+
+  it('FE-COMP-WHATSNEXT-011: shows participant username chip', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(40, { name: 'Louvre' }, [{ user_id: 3, username: 'alice', avatar: null }])],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('alice')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-012: falls back to tripMembers when assignment has no participants', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(41, { name: 'Park' }, [])],
+      },
+    })
+    render(<WhatsNextWidget tripMembers={[{ id: 7, username: 'bob', avatar_url: null }]} />)
+    expect(screen.getByText('bob')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-013: renders end time when provided', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [makeAssignment(50, { name: 'Concert', place_time: '19:00', end_time: '21:30' })],
+      },
+    })
+    render(<WhatsNextWidget />)
+    expect(screen.getByText('19:00')).toBeInTheDocument()
+    expect(screen.getByText('21:30')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-014: multiple events on same day share one day header', () => {
+    seedStore(useTripStore, {
+      days: [{ id: 1, trip_id: 1, date: tomorrow, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+      assignments: {
+        '1': [
+          makeAssignment(60, { name: 'Breakfast', place_time: '08:00' }),
+          makeAssignment(61, { name: 'Lunch', place_time: '12:00' }),
+        ],
+      },
+    })
+    render(<WhatsNextWidget />)
+    const tomorrowHeaders = screen.getAllByText(/tomorrow/i)
+    // Only one day header for tomorrow
+    expect(tomorrowHeaders).toHaveLength(1)
+    expect(screen.getByText('Breakfast')).toBeInTheDocument()
+    expect(screen.getByText('Lunch')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-WHATSNEXT-015: today past-time event is excluded', () => {
+    // If it's not midnight, a past-time event today should not appear
+    const now = new Date()
+    if (now.getHours() > 0) {
+      const pastTime = '00:01' // Very early — will be past for most of the day
+      seedStore(useTripStore, {
+        days: [{ id: 1, trip_id: 1, date: today, title: null, order: 0, assignments: [], notes_items: [], notes: null }],
+        assignments: {
+          '1': [makeAssignment(70, { name: 'Early Bird', place_time: pastTime })],
+        },
+      })
+      render(<WhatsNextWidget />)
+      // If current time > 00:01, the item should not appear
+      if (now.getHours() > 0 || now.getMinutes() > 1) {
+        expect(screen.queryByText('Early Bird')).toBeNull()
+      }
+    }
+  })
+})

client/src/components/Collab/WhatsNextWidget.tsx

@@ -16,12 +16,13 @@ function formatTime(timeStr, is12h) {
 }
 
 function formatDayLabel(date, t, locale) {
-  const d = new Date(date + 'T00:00:00')
   const now = new Date()
-  const tomorrow = new Date(); tomorrow.setDate(now.getDate() + 1)
+  const nowDate = now.toISOString().split('T')[0]
+  const tomorrowUtc = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate() + 1))
+  const tomorrowDate = tomorrowUtc.toISOString().split('T')[0]
 
-  if (d.toDateString() === now.toDateString()) return t('collab.whatsNext.today') || 'Today'
-  if (d.toDateString() === tomorrow.toDateString()) return t('collab.whatsNext.tomorrow') || 'Tomorrow'
+  if (date === nowDate) return t('collab.whatsNext.today') || 'Today'
+  if (date === tomorrowDate) return t('collab.whatsNext.tomorrow') || 'Tomorrow'
 
   return new Date(date + 'T00:00:00Z').toLocaleDateString(locale || undefined, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' })
 }

client/src/components/Dashboard/TimezoneWidget.test.tsx

@@ -0,0 +1,149 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render, screen } from '../../../tests/helpers/render'
+import userEvent from '@testing-library/user-event'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { useSettingsStore } from '../../store/settingsStore'
+import TimezoneWidget from './TimezoneWidget'
+
+beforeEach(() => {
+  resetAllStores()
+  vi.clearAllMocks()
+  localStorage.clear()
+  seedStore(useSettingsStore, { settings: { time_format: '24h' } } as any)
+})
+
+describe('TimezoneWidget', () => {
+  it('FE-COMP-TIMEZONE-001: renders without crashing with default zones', () => {
+    render(<TimezoneWidget />)
+    expect(document.body).toBeInTheDocument()
+    expect(screen.getByText('New York')).toBeInTheDocument()
+    expect(screen.getByText('Tokyo')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-002: shows local time text', () => {
+    render(<TimezoneWidget />)
+    const timeElements = screen.getAllByText(/\d{1,2}:\d{2}/)
+    expect(timeElements.length).toBeGreaterThan(0)
+  })
+
+  it('FE-COMP-TIMEZONE-003: shows timezone section label', () => {
+    render(<TimezoneWidget />)
+    expect(screen.getByText(/timezones/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-004: default zones render on first load (no localStorage)', () => {
+    localStorage.clear()
+    render(<TimezoneWidget />)
+    expect(screen.getByText('New York')).toBeInTheDocument()
+    expect(screen.getByText('Tokyo')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-005: zones saved in localStorage are restored', () => {
+    localStorage.setItem('dashboard_timezones', JSON.stringify([{ label: 'Berlin', tz: 'Europe/Berlin' }]))
+    render(<TimezoneWidget />)
+    expect(screen.getByText('Berlin')).toBeInTheDocument()
+    expect(screen.queryByText('New York')).toBeNull()
+  })
+
+  it('FE-COMP-TIMEZONE-006: clicking the Plus button opens the add-zone panel', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    expect(await screen.findByText('Custom Timezone')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-007: adding a popular zone from the dropdown adds it to the list', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    // Open add panel
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    // Find and click Berlin in the popular zones list
+    const berlinButton = await screen.findByRole('button', { name: /Berlin/i })
+    await user.click(berlinButton)
+    expect(screen.getByText('Berlin')).toBeInTheDocument()
+    // Panel should be closed
+    expect(screen.queryByText('Custom Timezone')).toBeNull()
+  })
+
+  it('FE-COMP-TIMEZONE-008: adding a custom valid timezone with label shows in the list', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    // Open add panel
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    // Type label and timezone
+    const labelInput = screen.getByPlaceholderText('Label (optional)')
+    const tzInput = screen.getByPlaceholderText('e.g. America/New_York')
+    await user.type(labelInput, 'My City')
+    await user.type(tzInput, 'Europe/Paris')
+    // Click Add
+    const addButton = screen.getByRole('button', { name: 'Add' })
+    await user.click(addButton)
+    expect(await screen.findByText('My City')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-009: adding a custom invalid timezone shows an error', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    const tzInput = screen.getByPlaceholderText('e.g. America/New_York')
+    await user.type(tzInput, 'Invalid/Timezone')
+    const addButton = screen.getByRole('button', { name: 'Add' })
+    await user.click(addButton)
+    expect(await screen.findByText(/invalid timezone/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-010: adding a duplicate timezone shows a duplicate error', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    // Default zones include New York (America/New_York)
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    const tzInput = screen.getByPlaceholderText('e.g. America/New_York')
+    await user.type(tzInput, 'America/New_York')
+    const addButton = screen.getByRole('button', { name: 'Add' })
+    await user.click(addButton)
+    expect(await screen.findByText(/already added/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-011: remove button removes a zone from the list', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    expect(screen.getByText('New York')).toBeInTheDocument()
+    // The remove buttons are always in the DOM (opacity-0 in CSS, not hidden from DOM)
+    // There are 2 zone rows (New York, Tokyo), plus the Plus button = 3 buttons total
+    // Remove buttons for New York and Tokyo come after the Plus button
+    const allButtons = screen.getAllByRole('button')
+    // allButtons[0] = Plus, allButtons[1] = remove New York, allButtons[2] = remove Tokyo
+    await user.click(allButtons[1])
+    expect(screen.queryByText('New York')).toBeNull()
+    expect(screen.getByText('Tokyo')).toBeInTheDocument()
+  })
+
+  it('FE-COMP-TIMEZONE-012: adding a zone persists to localStorage', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    const berlinButton = await screen.findByRole('button', { name: /Berlin/i })
+    await user.click(berlinButton)
+    const saved = JSON.parse(localStorage.getItem('dashboard_timezones') || '[]')
+    expect(saved.some((z: { tz: string }) => z.tz === 'Europe/Berlin')).toBe(true)
+  })
+
+  it('FE-COMP-TIMEZONE-013: Enter key in custom tz input triggers addCustomZone', async () => {
+    const user = userEvent.setup()
+    render(<TimezoneWidget />)
+    const allButtons = screen.getAllByRole('button')
+    await user.click(allButtons[0])
+    const labelInput = screen.getByPlaceholderText('Label (optional)')
+    const tzInput = screen.getByPlaceholderText('e.g. America/New_York')
+    await user.type(labelInput, 'Singapore')
+    await user.type(tzInput, 'Asia/Singapore')
+    await user.keyboard('{Enter}')
+    expect(await screen.findByText('Singapore')).toBeInTheDocument()
+  })
+})

client/src/components/Files/FileManager.test.tsx

@@ -0,0 +1,584 @@
+// FE-COMP-FILEMANAGER-001 to FE-COMP-FILEMANAGER-012
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useTripStore } from '../../store/tripStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildTrip } from '../../../tests/helpers/factories';
+import FileManager from './FileManager';
+
+// Mock getAuthUrl
+vi.mock('../../api/authUrl', () => ({
+  getAuthUrl: vi.fn().mockResolvedValue('http://localhost/signed-url'),
+}));
+
+// Mock filesApi
+vi.mock('../../api/client', async (importOriginal) => {
+  const original = (await importOriginal()) as any;
+  return {
+    ...original,
+    filesApi: {
+      list: vi.fn().mockResolvedValue({ files: [] }),
+      toggleStar: vi.fn().mockResolvedValue({}),
+      restore: vi.fn().mockResolvedValue({}),
+      permanentDelete: vi.fn().mockResolvedValue({}),
+      emptyTrash: vi.fn().mockResolvedValue({}),
+      upload: vi.fn().mockResolvedValue({ file: { id: 99 } }),
+      update: vi.fn().mockResolvedValue({}),
+      addLink: vi.fn().mockResolvedValue({}),
+      removeLink: vi.fn().mockResolvedValue({}),
+      getLinks: vi.fn().mockResolvedValue({ links: [] }),
+    },
+  };
+});
+
+import { filesApi } from '../../api/client';
+
+const buildFile = (overrides = {}) => ({
+  id: 1,
+  original_name: 'report.pdf',
+  mime_type: 'application/pdf',
+  file_size: 51200,
+  created_at: '2025-01-10T08:00:00Z',
+  url: '/uploads/trips/1/report.pdf',
+  starred: false,
+  deleted_at: null,
+  place_id: null,
+  reservation_id: null,
+  day_id: null,
+  uploaded_by: 1,
+  uploader_name: 'Alice',
+  ...overrides,
+});
+
+const defaultProps = {
+  files: [],
+  onUpload: vi.fn().mockResolvedValue({}),
+  onDelete: vi.fn().mockResolvedValue(undefined),
+  onUpdate: vi.fn().mockResolvedValue(undefined),
+  places: [],
+  days: [],
+  assignments: {},
+  reservations: [],
+  tripId: 1,
+  allowedFileTypes: null,
+};
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+  // Seed auth as admin so useCanDo() returns true for all permissions
+  seedStore(useAuthStore, { user: buildUser({ role: 'admin' }), isAuthenticated: true });
+  seedStore(useTripStore, { trip: buildTrip({ id: 1 }) });
+
+  // Default trash endpoint
+  server.use(
+    http.get('/api/trips/:tripId/files', ({ request }) => {
+      const url = new URL(request.url);
+      if (url.searchParams.get('trash') === 'true') {
+        return HttpResponse.json({ files: [] });
+      }
+      return HttpResponse.json({ files: [] });
+    }),
+  );
+
+  // Stub window.confirm
+  vi.spyOn(window, 'confirm').mockReturnValue(true);
+});
+
+describe('FileManager', () => {
+  it('FE-COMP-FILEMANAGER-001: renders empty state when no files', async () => {
+    render(<FileManager {...defaultProps} files={[]} />);
+    // The dropzone should be visible (Upload icon area)
+    expect(screen.getByText(/drop/i)).toBeInTheDocument();
+    // No file rows
+    expect(screen.queryByText('report.pdf')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-002: renders file list when files are provided', async () => {
+    render(<FileManager {...defaultProps} files={[buildFile()]} />);
+    expect(screen.getByText('report.pdf')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-003: file type filter tabs are present', async () => {
+    render(<FileManager {...defaultProps} files={[buildFile()]} />);
+    // Filter tabs should be present — match the button elements specifically
+    expect(screen.getByRole('button', { name: /^all$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^pdfs$/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /^images$/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-004: images tab filters to image files only', async () => {
+    const files = [
+      buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo.jpg' }),
+      buildFile({ id: 2, mime_type: 'application/pdf', original_name: 'doc.pdf' }),
+    ];
+    render(<FileManager {...defaultProps} files={files} />);
+    // Both should be visible initially
+    expect(screen.getByText('photo.jpg')).toBeInTheDocument();
+    expect(screen.getByText('doc.pdf')).toBeInTheDocument();
+
+    // Click Images filter tab
+    const user = userEvent.setup();
+    const imageTab = screen.getByRole('button', { name: /^images$/i });
+    await user.click(imageTab);
+
+    // Only photo should be visible
+    expect(screen.getByText('photo.jpg')).toBeInTheDocument();
+    expect(screen.queryByText('doc.pdf')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-005: star button calls filesApi.toggleStar', async () => {
+    render(<FileManager {...defaultProps} files={[buildFile()]} />);
+    const user = userEvent.setup();
+
+    // Find the star button by its title
+    const starBtn = screen.getByTitle(/star/i);
+    await user.click(starBtn);
+
+    expect(filesApi.toggleStar).toHaveBeenCalledWith(1, 1);
+  });
+
+  it('FE-COMP-FILEMANAGER-006: trash toggle loads and displays trashed files', async () => {
+    // filesApi.list is mocked — configure it to return trash files when called with trash=true
+    (filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
+      if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
+      return Promise.resolve({ files: [] });
+    });
+
+    render(<FileManager {...defaultProps} files={[]} />);
+    const user = userEvent.setup();
+
+    // Click trash toggle button
+    const trashBtn = screen.getByText(/trash/i);
+    await user.click(trashBtn);
+
+    // Trashed file should appear
+    await screen.findByText('old.pdf');
+  });
+
+  it('FE-COMP-FILEMANAGER-007: restore button calls filesApi.restore', async () => {
+    (filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
+      if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
+      return Promise.resolve({ files: [] });
+    });
+
+    render(<FileManager {...defaultProps} files={[]} />);
+    const user = userEvent.setup();
+
+    // Open trash
+    const trashBtn = screen.getByText(/trash/i);
+    await user.click(trashBtn);
+    await screen.findByText('old.pdf');
+
+    // Click restore button
+    const restoreBtn = screen.getByTitle(/restore/i);
+    await user.click(restoreBtn);
+
+    expect(filesApi.restore).toHaveBeenCalledWith(1, 5);
+  });
+
+  it('FE-COMP-FILEMANAGER-008: permanent delete calls filesApi.permanentDelete after confirm', async () => {
+    (filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
+      if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
+      return Promise.resolve({ files: [] });
+    });
+
+    render(<FileManager {...defaultProps} files={[]} />);
+    const user = userEvent.setup();
+
+    // Open trash
+    await user.click(screen.getByText(/trash/i));
+    await screen.findByText('old.pdf');
+
+    // Click permanent delete (the Trash2 icon button in trash view)
+    const deleteBtn = screen.getByTitle(/delete/i);
+    await user.click(deleteBtn);
+
+    expect(filesApi.permanentDelete).toHaveBeenCalledWith(1, 5);
+  });
+
+  it('FE-COMP-FILEMANAGER-009: empty trash calls filesApi.emptyTrash', async () => {
+    (filesApi.list as ReturnType<typeof vi.fn>).mockImplementation((_tripId, trash) => {
+      if (trash) return Promise.resolve({ files: [buildFile({ id: 5, original_name: 'old.pdf', deleted_at: '2025-02-01' })] });
+      return Promise.resolve({ files: [] });
+    });
+
+    render(<FileManager {...defaultProps} files={[]} />);
+    const user = userEvent.setup();
+
+    // Open trash
+    await user.click(screen.getByText(/trash/i));
+    await screen.findByText('old.pdf');
+
+    // Click "Empty Trash" button
+    const emptyTrashBtn = await screen.findByText(/empty trash/i);
+    await user.click(emptyTrashBtn);
+
+    expect(filesApi.emptyTrash).toHaveBeenCalledWith(1);
+  });
+
+  it('FE-COMP-FILEMANAGER-010: image file click opens lightbox', async () => {
+    const files = [
+      buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo.jpg' }),
+    ];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    // Click the file name to open lightbox
+    await user.click(screen.getByText('photo.jpg'));
+
+    // Lightbox should appear — it has a fixed position overlay with the filename and a counter
+    await waitFor(() => {
+      // The lightbox header shows the filename and "1 / 1"
+      expect(screen.getByText('1 / 1')).toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-011: escape key closes lightbox', async () => {
+    const files = [
+      buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo.jpg' }),
+    ];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    // Open lightbox
+    await user.click(screen.getByText('photo.jpg'));
+    await waitFor(() => {
+      expect(screen.getByText('1 / 1')).toBeInTheDocument();
+    });
+
+    // Press Escape
+    await user.keyboard('{Escape}');
+
+    // Lightbox should be gone
+    await waitFor(() => {
+      expect(screen.queryByText('1 / 1')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-013: soft-delete button calls onDelete', async () => {
+    const onDelete = vi.fn().mockResolvedValue(undefined);
+    render(<FileManager {...defaultProps} files={[buildFile()]} onDelete={onDelete} />);
+    const user = userEvent.setup();
+
+    // The delete (trash) button on a non-trash row is titled 'Delete'
+    const deleteBtn = screen.getByTitle(/delete/i);
+    await user.click(deleteBtn);
+
+    expect(onDelete).toHaveBeenCalledWith(1);
+  });
+
+  it('FE-COMP-FILEMANAGER-014: PDF file click opens preview modal', async () => {
+    const files = [buildFile({ id: 1, mime_type: 'application/pdf', original_name: 'report.pdf' })];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    // Click the file name — for a non-image this opens the PDF preview modal
+    await user.click(screen.getByText('report.pdf'));
+
+    // PDF preview modal should appear with the filename in the header
+    await waitFor(() => {
+      // The preview modal header shows the filename
+      const headers = screen.getAllByText('report.pdf');
+      expect(headers.length).toBeGreaterThanOrEqual(2); // in list + in modal header
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-015: file with uploader name shows avatar chip initials', () => {
+    const files = [buildFile({ uploaded_by_name: 'Alice Smith' })];
+    render(<FileManager {...defaultProps} files={files} />);
+
+    // The AvatarChip shows the first letter of the name
+    expect(screen.getByText('A')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-016: multiple images in lightbox shows thumbnail strip', async () => {
+    const files = [
+      buildFile({ id: 1, mime_type: 'image/jpeg', original_name: 'photo1.jpg' }),
+      buildFile({ id: 2, mime_type: 'image/jpeg', original_name: 'photo2.jpg' }),
+    ];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    // Open lightbox on first image
+    await user.click(screen.getByText('photo1.jpg'));
+
+    // Lightbox shows "1 / 2" counter
+    await waitFor(() => {
+      expect(screen.getByText('1 / 2')).toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-017: file size is displayed', () => {
+    const files = [buildFile({ file_size: 51200 })];
+    render(<FileManager {...defaultProps} files={files} />);
+    expect(screen.getByText('50.0 KB')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-018: starred filter shows only starred files', async () => {
+    const files = [
+      buildFile({ id: 1, original_name: 'starred.pdf', starred: true }),
+      buildFile({ id: 2, original_name: 'normal.pdf', starred: false }),
+    ];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    // The starred filter tab only appears when there are starred files
+    const starredTab = screen.getByRole('button', { name: '' }); // Star icon button in filter tabs
+    await user.click(starredTab);
+
+    expect(screen.getByText('starred.pdf')).toBeInTheDocument();
+    expect(screen.queryByText('normal.pdf')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-019: clicking assign button opens assign modal', async () => {
+    render(<FileManager {...defaultProps} files={[buildFile()]} />);
+    const user = userEvent.setup();
+
+    // Pencil/assign button
+    const assignBtn = screen.getByTitle(/assign/i);
+    await user.click(assignBtn);
+
+    // Assign modal should appear (it has a title and a close button)
+    await waitFor(() => {
+      expect(screen.getByText(/assign/i, { selector: 'div' })).toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-020: assign modal shows places list', async () => {
+    const { buildPlace } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Eiffel Tower' });
+    render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} />);
+    const user = userEvent.setup();
+
+    const assignBtn = screen.getByTitle(/assign/i);
+    await user.click(assignBtn);
+
+    await screen.findByText('Eiffel Tower');
+  });
+
+  it('FE-COMP-FILEMANAGER-021: file description is shown when present', () => {
+    const files = [buildFile({ description: 'A very important document' })];
+    render(<FileManager {...defaultProps} files={files} />);
+    expect(screen.getByText('A very important document')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-FILEMANAGER-022: PDF preview modal can be closed', async () => {
+    const files = [buildFile({ id: 1, mime_type: 'application/pdf', original_name: 'report.pdf' })];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    // Open preview
+    await user.click(screen.getByText('report.pdf'));
+
+    // Multiple 'report.pdf' elements now (list + modal header)
+    await waitFor(() => {
+      expect(screen.getAllByText('report.pdf').length).toBeGreaterThanOrEqual(2);
+    });
+
+    // Close via X button in the modal (second X button — first might be something else)
+    const closeButtons = screen.getAllByRole('button', { name: '' });
+    // Find a close button near the modal header — click the last X-like button
+    const xBtn = closeButtons.find(btn => btn.closest('[style*="z-index: 10000"]'));
+    if (xBtn) await user.click(xBtn);
+  });
+
+  it('FE-COMP-FILEMANAGER-023: assign modal shows reservations list', async () => {
+    const { buildReservation } = await import('../../../tests/helpers/factories');
+    const reservation = buildReservation({ id: 20, name: 'Hotel Paris' });
+    render(<FileManager {...defaultProps} files={[buildFile()]} reservations={[reservation]} />);
+    const user = userEvent.setup();
+
+    const assignBtn = screen.getByTitle(/assign/i);
+    await user.click(assignBtn);
+
+    await screen.findByText('Hotel Paris');
+  });
+
+  it('FE-COMP-FILEMANAGER-024: clicking a place in assign modal calls filesApi.update', async () => {
+    const { buildPlace } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Louvre Museum' });
+    const file = buildFile({ id: 1 });
+    const onUpdate = vi.fn().mockResolvedValue(undefined);
+    render(<FileManager {...defaultProps} files={[file]} places={[place]} onUpdate={onUpdate} />);
+    const user = userEvent.setup();
+
+    // Open assign modal
+    await user.click(screen.getByTitle(/assign/i));
+    await screen.findByText('Louvre Museum');
+
+    // Click on the place button to link it
+    await user.click(screen.getByText('Louvre Museum'));
+
+    expect(filesApi.update).toHaveBeenCalledWith(1, 1, { place_id: 10 });
+  });
+
+  it('FE-COMP-FILEMANAGER-025: clicking a reservation in assign modal calls filesApi.update', async () => {
+    const { buildReservation } = await import('../../../tests/helpers/factories');
+    const reservation = buildReservation({ id: 20, name: 'Train Ticket' });
+    const file = buildFile({ id: 1 });
+    render(<FileManager {...defaultProps} files={[file]} reservations={[reservation]} />);
+    const user = userEvent.setup();
+
+    // Open assign modal
+    await user.click(screen.getByTitle(/assign/i));
+    await screen.findByText('Train Ticket');
+
+    // Click on the reservation button to link it
+    await user.click(screen.getByText('Train Ticket'));
+
+    expect(filesApi.update).toHaveBeenCalledWith(1, 1, { reservation_id: 20 });
+  });
+
+  it('FE-COMP-FILEMANAGER-026: assign modal with both places and reservations shows both sections', async () => {
+    const { buildPlace, buildReservation } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Notre Dame' });
+    const reservation = buildReservation({ id: 20, name: 'Airbnb' });
+    render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} reservations={[reservation]} />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByTitle(/assign/i));
+    await screen.findByText('Notre Dame');
+    await screen.findByText('Airbnb');
+  });
+
+  it('FE-COMP-FILEMANAGER-027: paste event uploads file when user can upload', async () => {
+    const onUpload = vi.fn().mockResolvedValue({ file: { id: 55 } });
+    render(<FileManager {...defaultProps} onUpload={onUpload} />);
+
+    const container = document.querySelector('.flex.flex-col') as HTMLElement;
+    const file = new File(['data'], 'pasted.png', { type: 'image/png' });
+
+    // Manually build a paste event with a mock clipboardData.items
+    const mockItem = { kind: 'file', getAsFile: () => file };
+    const pasteEvent = new Event('paste', { bubbles: true });
+    Object.defineProperty(pasteEvent, 'clipboardData', {
+      value: { items: [mockItem] },
+    });
+
+    await fireEvent(container, pasteEvent);
+
+    await waitFor(() => {
+      expect(onUpload).toHaveBeenCalled();
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-028: upload with places open assign modal after upload', async () => {
+    const { buildPlace } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Sagrada Familia' });
+    const onUpload = vi.fn().mockResolvedValue({ file: { id: 77 } });
+
+    render(<FileManager {...defaultProps} onUpload={onUpload} places={[place]} />);
+
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    const file = new File(['data'], 'photo.jpg', { type: 'image/jpeg' });
+    await userEvent.upload(input, file);
+
+    // After successful upload with places present, assign modal opens
+    await waitFor(() => {
+      expect(onUpload).toHaveBeenCalled();
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-029: assign modal with days+assignments shows day group', async () => {
+    const { buildPlace, buildDay } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Arc de Triomphe' });
+    const day = buildDay({ id: 5, date: '2025-06-01', day_number: 1 });
+    const assignments = { '5': [{ id: 1, day_id: 5, place_id: 10, order_index: 0, place }] };
+
+    render(<FileManager {...defaultProps} files={[buildFile()]} places={[place]} days={[day]} assignments={assignments} />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByTitle(/assign/i));
+    await screen.findByText('Arc de Triomphe');
+  });
+
+  it('FE-COMP-FILEMANAGER-030: file with linked place shows source badge', async () => {
+    const { buildPlace } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Colosseum' });
+    const file = buildFile({ place_id: 10 });
+
+    render(<FileManager {...defaultProps} files={[file]} places={[place]} />);
+
+    // Source badge text includes place name
+    await screen.findByText(/Colosseum/);
+  });
+
+  it('FE-COMP-FILEMANAGER-031: unlink place from assign modal calls filesApi.update', async () => {
+    const { buildPlace } = await import('../../../tests/helpers/factories');
+    const place = buildPlace({ id: 10, name: 'Venice Beach' });
+    // File already has place_id set to 10 (linked)
+    const file = buildFile({ id: 1, place_id: 10 });
+
+    render(<FileManager {...defaultProps} files={[file]} places={[place]} />);
+    const user = userEvent.setup();
+
+    // Open assign modal
+    await user.click(screen.getByTitle(/assign/i));
+    await screen.findByText('Venice Beach');
+
+    // Clicking the linked place should unlink it
+    await user.click(screen.getByText('Venice Beach'));
+    expect(filesApi.update).toHaveBeenCalledWith(1, 1, { place_id: null });
+  });
+
+  it('FE-COMP-FILEMANAGER-032: unlink reservation from assign modal calls filesApi.update', async () => {
+    const { buildReservation } = await import('../../../tests/helpers/factories');
+    const reservation = buildReservation({ id: 20, name: 'Museum Pass' });
+    // File already has reservation_id set to 20
+    const file = buildFile({ id: 1, reservation_id: 20 });
+
+    render(<FileManager {...defaultProps} files={[file]} reservations={[reservation]} />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByTitle(/assign/i));
+    await screen.findByText('Museum Pass');
+
+    // Clicking the linked reservation should unlink it
+    await user.click(screen.getByText('Museum Pass'));
+    expect(filesApi.update).toHaveBeenCalledWith(1, 1, { reservation_id: null });
+  });
+
+  it('FE-COMP-FILEMANAGER-033: opening PDF preview and closing via backdrop', async () => {
+    const files = [buildFile({ id: 1, mime_type: 'application/pdf', original_name: 'doc.pdf' })];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByText('doc.pdf'));
+
+    // Modal opens (multiple occurrences of doc.pdf)
+    await waitFor(() => {
+      expect(screen.getAllByText('doc.pdf').length).toBeGreaterThanOrEqual(2);
+    });
+
+    // Click the backdrop to close
+    const backdrop = document.querySelector('[style*="z-index: 10000"]') as HTMLElement;
+    if (backdrop) await user.click(backdrop);
+
+    await waitFor(() => {
+      expect(screen.getAllByText('doc.pdf').length).toBeLessThan(2);
+    });
+  });
+
+  it('FE-COMP-FILEMANAGER-012: upload via dropzone calls onUpload', async () => {
+    const onUpload = vi.fn().mockResolvedValue({ file: { id: 99 } });
+    render(<FileManager {...defaultProps} onUpload={onUpload} />);
+
+    // Find the hidden file input from the dropzone
+    const input = document.querySelector('input[type="file"]') as HTMLInputElement;
+    expect(input).toBeTruthy();
+
+    const file = new File(['hello'], 'test.pdf', { type: 'application/pdf' });
+
+    await userEvent.upload(input, file);
+
+    await waitFor(() => {
+      expect(onUpload).toHaveBeenCalled();
+      const call = onUpload.mock.calls[0];
+      expect(call[0]).toBeInstanceOf(FormData);
+    });
+  });
+});

client/src/components/Files/FileManager.tsx

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom'
 import { useState, useCallback, useRef, useEffect } from 'react'
 import { useDropzone } from 'react-dropzone'
-import { Upload, Trash2, ExternalLink, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check } from 'lucide-react'
+import { Upload, Trash2, ExternalLink, Download, X, FileText, FileImage, File, MapPin, Ticket, StickyNote, Star, RotateCcw, Pencil, Check, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import { filesApi } from '../../api/client'
@@ -10,6 +10,7 @@ import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 
 import { getAuthUrl } from '../../api/authUrl'
+import { downloadFile, openFile } from '../../utils/fileDownload'
 
 function isImage(mimeType) {
   if (!mimeType) return false
@@ -30,6 +31,10 @@ function formatSize(bytes) {
   return `${(bytes / 1024 / 1024).toFixed(1)} MB`
 }
 
+function triggerDownload(url: string, filename: string) {
+  downloadFile(url, filename).catch(() => {})
+}
+
 function formatDateWithLocale(dateStr, locale) {
   if (!dateStr) return ''
   try {
@@ -37,49 +42,127 @@ function formatDateWithLocale(dateStr, locale) {
   } catch { return '' }
 }
 
-// Image lightbox
+// Image lightbox with gallery navigation
 interface ImageLightboxProps {
-  file: TripFile & { url: string }
+  files: (TripFile & { url: string })[]
+  initialIndex: number
   onClose: () => void
 }
 
-function ImageLightbox({ file, onClose }: ImageLightboxProps) {
+function ImageLightbox({ files, initialIndex, onClose }: ImageLightboxProps) {
   const { t } = useTranslation()
+  const [index, setIndex] = useState(initialIndex)
   const [imgSrc, setImgSrc] = useState('')
+  const [touchStart, setTouchStart] = useState<number | null>(null)
+  const file = files[index]
+
   useEffect(() => {
-    getAuthUrl(file.url, 'download').then(setImgSrc)
-  }, [file.url])
+    setImgSrc('')
+    if (file) getAuthUrl(file.url, 'download').then(setImgSrc)
+  }, [file?.url])
+
+  const goPrev = () => setIndex(i => Math.max(0, i - 1))
+  const goNext = () => setIndex(i => Math.min(files.length - 1, i + 1))
+
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowLeft') goPrev()
+      if (e.key === 'ArrowRight') goNext()
+    }
+    window.addEventListener('keydown', handler)
+    return () => window.removeEventListener('keydown', handler)
+  }, [])
+
+  if (!file) return null
+
+  const hasPrev = index > 0
+  const hasNext = index < files.length - 1
+  const navBtn = (side: 'left' | 'right', onClick: () => void, show: boolean): React.ReactNode => show ? (
+    <button onClick={e => { e.stopPropagation(); onClick() }}
+      style={{
+        position: 'absolute', top: '50%', [side]: 12, transform: 'translateY(-50%)', zIndex: 10,
+        background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40,
+        display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
+        color: 'rgba(255,255,255,0.8)', transition: 'background 0.15s',
+      }}
+      onMouseEnter={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.75)')}
+      onMouseLeave={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.5)')}>
+      {side === 'left' ? <ChevronLeft size={22} /> : <ChevronRight size={22} />}
+    </button>
+  ) : null
+
   return (
     <div
-      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.88)', zIndex: 2000, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.92)', zIndex: 2000, display: 'flex', flexDirection: 'column' }}
       onClick={onClose}
+      onTouchStart={e => setTouchStart(e.touches[0].clientX)}
+      onTouchEnd={e => {
+        if (touchStart === null) return
+        const diff = e.changedTouches[0].clientX - touchStart
+        if (diff > 60) goPrev()
+        else if (diff < -60) goNext()
+        setTouchStart(null)
+      }}
     >
-      <div style={{ position: 'relative', maxWidth: '90vw', maxHeight: '90vh' }} onClick={e => e.stopPropagation()}>
-        <img
-          src={imgSrc}
-          alt={file.original_name}
-          style={{ maxWidth: '90vw', maxHeight: '90vh', objectFit: 'contain', borderRadius: 8, display: 'block' }}
-        />
-        <div style={{ position: 'absolute', top: -40, left: 0, right: 0, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '0 4px' }}>
-          <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '80%' }}>{file.original_name}</span>
-          <div style={{ display: 'flex', gap: 8 }}>
-            <button
-              onClick={async () => { const u = await getAuthUrl(file.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
-              style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}
-              title={t('files.openTab')}
-            >
-              <ExternalLink size={16} />
-            </button>
-            <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 0 }}>
-              <X size={18} />
-            </button>
-          </div>
+      {/* Header */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 16px', flexShrink: 0 }} onClick={e => e.stopPropagation()}>
+        <span style={{ fontSize: 12, color: 'rgba(255,255,255,0.7)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>
+          {file.original_name}
+          <span style={{ marginLeft: 8, color: 'rgba(255,255,255,0.4)' }}>{index + 1} / {files.length}</span>
+        </span>
+        <div style={{ display: 'flex', gap: 8, flexShrink: 0 }}>
+          <button
+            onClick={() => openFile(file.url).catch(() => {})}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
+            title={t('files.openTab')}>
+            <ExternalLink size={16} />
+          </button>
+          <button
+            onClick={() => triggerDownload(file.url, file.original_name)}
+            style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}
+            title={t('files.download') || 'Download'}>
+            <Download size={16} />
+          </button>
+          <button onClick={onClose} style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'rgba(255,255,255,0.7)', display: 'flex', padding: 4 }}>
+            <X size={18} />
+          </button>
         </div>
       </div>
+
+      {/* Main image + nav */}
+      <div style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', minHeight: 0 }}
+        onClick={e => { if (e.target === e.currentTarget) onClose() }}>
+        {navBtn('left', goPrev, hasPrev)}
+        {imgSrc && <img src={imgSrc} alt={file.original_name} style={{ maxWidth: '85vw', maxHeight: '80vh', objectFit: 'contain', borderRadius: 8, display: 'block' }} onClick={e => e.stopPropagation()} />}
+        {navBtn('right', goNext, hasNext)}
+      </div>
+
+      {/* Thumbnail strip */}
+      {files.length > 1 && (
+        <div style={{ display: 'flex', gap: 4, justifyContent: 'center', padding: '10px 16px', flexShrink: 0, overflowX: 'auto' }} onClick={e => e.stopPropagation()}>
+          {files.map((f, i) => (
+            <ThumbImg key={f.id} file={f} active={i === index} onClick={() => setIndex(i)} />
+          ))}
+        </div>
+      )}
     </div>
   )
 }
 
+function ThumbImg({ file, active, onClick }: { file: TripFile & { url: string }; active: boolean; onClick: () => void }) {
+  const [src, setSrc] = useState('')
+  useEffect(() => { getAuthUrl(file.url, 'download').then(setSrc) }, [file.url])
+  return (
+    <button onClick={onClick} style={{
+      width: 48, height: 48, borderRadius: 6, overflow: 'hidden', border: active ? '2px solid #fff' : '2px solid transparent',
+      opacity: active ? 1 : 0.5, cursor: 'pointer', padding: 0, background: '#111', flexShrink: 0, transition: 'opacity 0.15s',
+    }}>
+      {src && <img src={src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />}
+    </button>
+  )
+}
+
 // Authenticated image — fetches a short-lived download token and renders the image
 function AuthedImg({ src, style }: { src: string; style?: React.CSSProperties }) {
   const [authSrc, setAuthSrc] = useState('')
@@ -169,7 +252,7 @@ interface FileManagerProps {
 export default function FileManager({ files = [], onUpload, onDelete, onUpdate, places, days = [], assignments = {}, reservations = [], tripId, allowedFileTypes }: FileManagerProps) {
   const [uploading, setUploading] = useState(false)
   const [filterType, setFilterType] = useState('all')
-  const [lightboxFile, setLightboxFile] = useState(null)
+  const [lightboxIndex, setLightboxIndex] = useState<number | null>(null)
   const [showTrash, setShowTrash] = useState(false)
   const [trashFiles, setTrashFiles] = useState<TripFile[]>([])
   const [loadingTrash, setLoadingTrash] = useState(false)
@@ -324,9 +407,12 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
     }
   }
 
+  const imageFiles = filteredFiles.filter(f => isImage(f.mime_type))
+
   const openFile = (file) => {
     if (isImage(file.mime_type)) {
-      setLightboxFile(file)
+      const idx = imageFiles.findIndex(f => f.id === file.id)
+      setLightboxIndex(idx >= 0 ? idx : 0)
     } else {
       setPreviewFile(file)
     }
@@ -439,6 +525,10 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
                 onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <ExternalLink size={14} />
               </button>
+              <button onClick={() => triggerDownload(file.url, file.original_name)} title={t('files.download') || 'Download'} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
+                onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
+                <Download size={14} />
+              </button>
               {can('file_delete', trip) && <button onClick={() => handleDelete(file.id)} title={t('common.delete')} style={{ padding: 6, background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', borderRadius: 6, display: 'flex' }}
                 onMouseEnter={e => e.currentTarget.style.color = '#ef4444'} onMouseLeave={e => e.currentTarget.style.color = 'var(--text-faint)'}>
                 <Trash2 size={14} />
@@ -453,7 +543,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
   return (
     <div className="flex flex-col h-full" style={{ fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif" }} onPaste={handlePaste} tabIndex={-1}>
       {/* Lightbox */}
-      {lightboxFile && <ImageLightbox file={lightboxFile} onClose={() => setLightboxFile(null)} />}
+      {lightboxIndex !== null && <ImageLightbox files={imageFiles} initialIndex={lightboxIndex} onClose={() => setLightboxIndex(null)} />}
 
       {/* Assign modal */}
       {assignFileId && ReactDOM.createPortal(
@@ -653,12 +743,19 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
               <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1 }}>{previewFile.original_name}</span>
               <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>
                 <button
-                  onClick={async () => { const u = await getAuthUrl(previewFile.url, 'download'); window.open(u, '_blank', 'noreferrer') }}
+                  onClick={() => openFile(previewFile.url).catch(() => {})}
                   style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
                   onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
                   onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
                   <ExternalLink size={13} /> {t('files.openTab')}
                 </button>
+                <button
+                  onClick={() => triggerDownload(previewFile.url, previewFile.original_name)}
+                  style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, color: 'var(--text-muted)', background: 'none', border: 'none', cursor: 'pointer', textDecoration: 'none', padding: '4px 8px', borderRadius: 6, transition: 'color 0.15s' }}
+                  onMouseEnter={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-primary)'}
+                  onMouseLeave={e => (e.currentTarget as HTMLElement).style.color = 'var(--text-muted)'}>
+                  <Download size={13} /> {t('files.download') || 'Download'}
+                </button>
                 <button onClick={() => setPreviewFile(null)}
                   style={{ background: 'none', border: 'none', cursor: 'pointer', color: 'var(--text-faint)', display: 'flex', padding: 4, borderRadius: 6, transition: 'color 0.15s' }}
                   onMouseEnter={e => e.currentTarget.style.color = 'var(--text-primary)'}
@@ -674,7 +771,7 @@ export default function FileManager({ files = [], onUpload, onDelete, onUpdate,
               title={previewFile.original_name}
             >
               <p style={{ padding: 24, textAlign: 'center', color: 'var(--text-muted)' }}>
-                <button onClick={async () => { const u = await getAuthUrl(previewFile.url, 'download'); window.open(u, '_blank', 'noopener noreferrer') }} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>PDF herunterladen</button>
+                <button onClick={() => openFile(previewFile.url).catch(() => {})} style={{ color: 'var(--text-primary)', textDecoration: 'underline', background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}>{t('files.downloadPdf')}</button>
               </p>
             </object>
           </div>

client/src/components/Journey/JournalBody.test.tsx

@@ -0,0 +1,39 @@
+// FE-COMP-JOURNALBODY-001 to FE-COMP-JOURNALBODY-005
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import JournalBody from './JournalBody';
+
+describe('JournalBody', () => {
+  it('FE-COMP-JOURNALBODY-001: renders plain text content', () => {
+    render(<JournalBody text="Hello traveller" />);
+    expect(screen.getByText('Hello traveller')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-JOURNALBODY-002: renders bold markdown as <strong>', () => {
+    const { container } = render(<JournalBody text="This is **bold** text" />);
+    const strong = container.querySelector('strong');
+    expect(strong).toBeInTheDocument();
+    expect(strong!.textContent).toBe('bold');
+  });
+
+  it('FE-COMP-JOURNALBODY-003: renders links with target _blank', () => {
+    render(<JournalBody text="[Visit](https://example.com)" />);
+    const link = screen.getByRole('link', { name: 'Visit' });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('FE-COMP-JOURNALBODY-004: renders headings with proper elements', () => {
+    const { container } = render(<JournalBody text="## Section Title" />);
+    const p = container.querySelector('p');
+    expect(p).toBeInTheDocument();
+    expect(p!.textContent).toBe('Section Title');
+  });
+
+  it('FE-COMP-JOURNALBODY-005: handles empty text without crashing', () => {
+    const { container } = render(<JournalBody text="" />);
+    expect(container.querySelector('.journal-body')).toBeInTheDocument();
+  });
+});

client/src/components/Journey/JournalBody.tsx

@@ -0,0 +1,70 @@
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import remarkBreaks from 'remark-breaks'
+
+interface Props {
+  text: string
+  dark?: boolean
+}
+
+export default function JournalBody({ text, dark }: Props) {
+  return (
+    <div className="journal-body" style={{
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      lineHeight: 1.6,
+      color: 'inherit',
+    }}>
+      <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkBreaks]}
+        components={{
+          h1: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
+          h2: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
+          h3: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
+          p: ({ children }) => <p style={{ margin: '0 0 6px' }}>{children}</p>,
+          blockquote: ({ children }) => (
+            <blockquote style={{
+              borderLeft: `3px solid var(--journal-accent)`,
+              paddingLeft: 16, margin: '12px 0',
+              fontStyle: 'italic', color: 'var(--journal-muted)',
+            }}>{children}</blockquote>
+          ),
+          a: ({ href, children }) => (
+            <a href={href} target="_blank" rel="noopener noreferrer"
+              style={{ color: 'var(--journal-accent)', textDecoration: 'underline', textUnderlineOffset: 2 }}>
+              {children}
+            </a>
+          ),
+          ul: ({ children }) => <ul style={{ paddingLeft: 20, margin: '8px 0' }}>{children}</ul>,
+          ol: ({ children }) => <ol style={{ paddingLeft: 20, margin: '8px 0' }}>{children}</ol>,
+          li: ({ children }) => <li style={{ margin: '4px 0' }}>{children}</li>,
+          strong: ({ children }) => <strong style={{ fontWeight: 600 }}>{children}</strong>,
+          em: ({ children }) => <em>{children}</em>,
+          hr: () => <hr style={{ border: 'none', borderTop: '1px solid var(--journal-border)', margin: '20px 0' }} />,
+          code: ({ children, className }) => {
+            const isBlock = className?.includes('language-')
+            if (isBlock) {
+              return (
+                <pre style={{
+                  background: dark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.04)',
+                  borderRadius: 8, padding: 14, overflowX: 'auto',
+                  fontSize: 13, fontFamily: 'monospace', margin: '12px 0',
+                }}>
+                  <code>{children}</code>
+                </pre>
+              )
+            }
+            return (
+              <code style={{
+                background: dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)',
+                borderRadius: 4, padding: '2px 5px', fontSize: '0.9em', fontFamily: 'monospace',
+              }}>{children}</code>
+            )
+          },
+        }}
+      >
+        {text.replace(/^(.+)\n([-=]{3,})$/gm, '$1\n\n$2')}
+      </ReactMarkdown>
+    </div>
+  )
+}

client/src/components/Journey/JourneyMap.test.tsx

@@ -0,0 +1,230 @@
+// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-006
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+// Leaflet does not work in jsdom — mock the entire library
+vi.mock('leaflet', () => {
+  const mockMarker = {
+    addTo: vi.fn().mockReturnThis(),
+    bindTooltip: vi.fn().mockReturnThis(),
+    on: vi.fn().mockReturnThis(),
+    setIcon: vi.fn(),
+    setZIndexOffset: vi.fn(),
+    getLatLng: vi.fn(() => ({ lat: 0, lng: 0 })),
+  };
+  const mockMap = {
+    remove: vi.fn(),
+    invalidateSize: vi.fn(),
+    fitBounds: vi.fn(),
+    setView: vi.fn(),
+    flyTo: vi.fn(),
+    getZoom: vi.fn(() => 10),
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+  };
+  return {
+    default: {
+      map: vi.fn(() => mockMap),
+      tileLayer: vi.fn(() => ({ addTo: vi.fn() })),
+      marker: vi.fn(() => mockMarker),
+      polyline: vi.fn(() => ({ addTo: vi.fn() })),
+      divIcon: vi.fn(() => ({})),
+      latLngBounds: vi.fn(() => ({})),
+    },
+    map: vi.fn(() => mockMap),
+    tileLayer: vi.fn(() => ({ addTo: vi.fn() })),
+    marker: vi.fn(() => mockMarker),
+    polyline: vi.fn(() => ({ addTo: vi.fn() })),
+    divIcon: vi.fn(() => ({})),
+    latLngBounds: vi.fn(() => ({})),
+  };
+});
+
+import React from 'react';
+import { render } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useSettingsStore } from '../../store/settingsStore';
+import { buildSettings } from '../../../tests/helpers/factories';
+import L from 'leaflet';
+import JourneyMap from './JourneyMap';
+import type { JourneyMapHandle } from './JourneyMap';
+
+const entriesWithCoords = [
+  { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
+  { id: 'e2', lat: 52.52, lng: 13.405, title: 'Berlin', mood: null, entry_date: '2025-06-02' },
+];
+
+const entriesWithoutCoords = [
+  { id: 'e3', lat: 0, lng: 0, title: 'Unknown Place', mood: null, entry_date: '2025-06-03' },
+];
+
+const mixedEntries = [
+  ...entriesWithCoords,
+  ...entriesWithoutCoords,
+];
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useSettingsStore, { settings: buildSettings() });
+  vi.clearAllMocks();
+});
+
+describe('JourneyMap', () => {
+  it('FE-COMP-JOURNEYMAP-001: renders map container', () => {
+    const { container } = render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // The component renders a div with a child div ref for the Leaflet map
+    expect(container.firstChild).toBeInTheDocument();
+    expect(L.map).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-002: renders markers for entries with coordinates', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Two entries with valid lat/lng should produce two markers
+    expect(L.marker).toHaveBeenCalledTimes(2);
+  });
+
+  it('FE-COMP-JOURNEYMAP-003: does not render markers for entries without coordinates', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithoutCoords} />
+    );
+    // Entry with lat=0 and lng=0 is filtered out by buildMarkerItems (if (e.lat && e.lng))
+    expect(L.marker).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-004: renders polyline connecting entries', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // With 2+ marker items, a route polyline is drawn
+    expect(L.polyline).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-005: shows entry title in marker tooltip', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Each marker calls bindTooltip with the entry label
+    const mockMarkerInstance = (L.marker as any).mock.results[0].value;
+    expect(mockMarkerInstance.bindTooltip).toHaveBeenCalledWith(
+      'Paris',
+      expect.objectContaining({ direction: 'top' }),
+    );
+  });
+
+  it('FE-COMP-JOURNEYMAP-006: exposes imperative handle (focusMarker)', () => {
+    const ref = React.createRef<JourneyMapHandle>();
+    render(
+      <JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} />
+    );
+    expect(ref.current).not.toBeNull();
+    expect(typeof ref.current!.focusMarker).toBe('function');
+    expect(typeof ref.current!.highlightMarker).toBe('function');
+  });
+
+  it('FE-COMP-JOURNEYMAP-007: renders SVG pin markers via divIcon', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Each marker is created with L.divIcon containing SVG html
+    expect(L.divIcon).toHaveBeenCalledTimes(2);
+    const firstCall = (L.divIcon as any).mock.calls[0][0];
+    expect(firstCall.html).toContain('<svg');
+    expect(firstCall.html).toContain('</svg>');
+    // Marker index label "1" for first entry
+    expect(firstCall.html).toContain('>1<');
+  });
+
+  it('FE-COMP-JOURNEYMAP-008: renders markers with mood-based entry labels', () => {
+    const entriesWithMood = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Happy Paris', mood: 'happy', entry_date: '2025-06-01' },
+      { id: 'e2', lat: 52.52, lng: 13.405, title: 'Sad Berlin', mood: 'sad', entry_date: '2025-06-02' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithMood} />
+    );
+    // Markers are still created (mood does not prevent rendering)
+    expect(L.marker).toHaveBeenCalledTimes(2);
+    // Tooltips use the entry titles
+    const mockMarker1 = (L.marker as any).mock.results[0].value;
+    expect(mockMarker1.bindTooltip).toHaveBeenCalledWith(
+      'Happy Paris',
+      expect.objectContaining({ direction: 'top' }),
+    );
+    const mockMarker2 = (L.marker as any).mock.results[1].value;
+    expect(mockMarker2.bindTooltip).toHaveBeenCalledWith(
+      'Sad Berlin',
+      expect.objectContaining({ direction: 'top' }),
+    );
+  });
+
+  it('FE-COMP-JOURNEYMAP-009: draws route polyline connecting multiple markers', () => {
+    const threeEntries = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
+      { id: 'e2', lat: 52.52, lng: 13.405, title: 'Berlin', mood: null, entry_date: '2025-06-02' },
+      { id: 'e3', lat: 41.9028, lng: 12.4964, title: 'Rome', mood: null, entry_date: '2025-06-03' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={threeEntries} />
+    );
+    // Route polyline is drawn for items.length > 1
+    expect(L.polyline).toHaveBeenCalled();
+    const polylineCall = (L.polyline as any).mock.calls[0];
+    // Should contain coordinates for all three entries
+    expect(polylineCall[0].length).toBe(3);
+    // Verify dashed style
+    expect(polylineCall[1]).toMatchObject({ dashArray: '4 6' });
+  });
+
+  it('FE-COMP-JOURNEYMAP-010: fitBounds is called for auto-zoom', () => {
+    // Trigger requestAnimationFrame synchronously
+    const origRAF = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+
+    const mockMap = (L.map as any).mock.results[0].value;
+    // fitBounds is called inside requestAnimationFrame with the collected coordinates
+    expect(mockMap.fitBounds).toHaveBeenCalled();
+    expect(L.latLngBounds).toHaveBeenCalled();
+
+    globalThis.requestAnimationFrame = origRAF;
+  });
+
+  it('FE-COMP-JOURNEYMAP-011: single entry creates marker but no polyline', () => {
+    const singleEntry = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Solo Paris', mood: null, entry_date: '2025-06-01' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={singleEntry} />
+    );
+    // One marker created
+    expect(L.marker).toHaveBeenCalledTimes(1);
+    // No route polyline — polyline is only drawn when items.length > 1
+    expect(L.polyline).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-012: renders zoom control buttons', () => {
+    const { container } = render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // The component renders zoom in (+) and zoom out (−) buttons
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toBe('+');
+    expect(buttons[1].textContent).toBe('−');
+  });
+});

client/src/components/Journey/JourneyMap.tsx

@@ -0,0 +1,303 @@
+import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
+import L from 'leaflet'
+import { useSettingsStore } from '../../store/settingsStore'
+
+export interface MapMarkerItem {
+  id: string
+  lat: number
+  lng: number
+  label: string
+  mood?: string | null
+  time: string
+}
+
+export interface JourneyMapHandle {
+  highlightMarker: (id: string | null) => void
+  focusMarker: (id: string) => void
+}
+
+interface MapEntry {
+  id: string
+  lat: number
+  lng: number
+  title?: string | null
+  mood?: string | null
+  entry_date: string
+}
+
+interface Props {
+  checkins: any[]
+  entries: MapEntry[]
+  trail?: { lat: number; lng: number }[]
+  height?: number
+  dark?: boolean
+  activeMarkerId?: string | null
+  onMarkerClick?: (id: string, type?: string) => void
+}
+
+function buildMarkerItems(entries: MapEntry[]): MapMarkerItem[] {
+  const items: MapMarkerItem[] = []
+  for (const e of entries) {
+    if (e.lat && e.lng) {
+      items.push({
+        id: e.id,
+        lat: e.lat,
+        lng: e.lng,
+        label: e.title || 'Entry',
+        mood: e.mood,
+        time: e.entry_date,
+      })
+    }
+  }
+  items.sort((a, b) => a.time.localeCompare(b.time))
+  return items
+}
+
+const MARKER_W = 28
+const MARKER_H = 36
+
+function markerSvg(index: number, highlighted: boolean, dark: boolean): string {
+  const fill = dark
+    ? (highlighted ? '#FAFAFA' : '#FAFAFA')
+    : (highlighted ? '#18181B' : '#18181B')
+  const textColor = dark
+    ? (highlighted ? '#18181B' : '#18181B')
+    : (highlighted ? '#fff' : '#fff')
+  const stroke = dark ? '#3F3F46' : '#fff'
+  const shadow = highlighted
+    ? 'filter:drop-shadow(0 0 8px rgba(0,0,0,0.4)) drop-shadow(0 2px 6px rgba(0,0,0,0.3))'
+    : 'filter:drop-shadow(0 2px 4px rgba(0,0,0,0.25))'
+  const label = String(index + 1)
+  const scale = highlighted ? 1.2 : 1
+
+  return `<div style="transform:scale(${scale});transition:transform 0.2s ease;${shadow};transform-origin:bottom center">
+    <svg width="${MARKER_W}" height="${MARKER_H}" viewBox="0 0 28 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M14 34C14 34 26 22.36 26 13C26 6.37 20.63 1 14 1C7.37 1 2 6.37 2 13C2 22.36 14 34 14 34Z" fill="${fill}" stroke="${stroke}" stroke-width="2"/>
+      <circle cx="14" cy="13" r="8" fill="${fill}"/>
+      <text x="14" y="13" text-anchor="middle" dominant-baseline="central" fill="${textColor}" font-family="-apple-system,system-ui,sans-serif" font-size="11" font-weight="700">${label}</text>
+    </svg>
+  </div>`
+}
+
+const EMPTY_TRAIL: { lat: number; lng: number }[] = []
+
+const JourneyMap = forwardRef<JourneyMapHandle, Props>(function JourneyMap(
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick },
+  ref
+) {
+  const stableTrail = trail || EMPTY_TRAIL
+  const mapTileUrl = useSettingsStore(s => s.settings.map_tile_url)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const mapRef = useRef<L.Map | null>(null)
+  const markersRef = useRef<Map<string, L.Marker>>(new Map())
+  const itemsRef = useRef<MapMarkerItem[]>([])
+  const highlightedRef = useRef<string | null>(null)
+  const onMarkerClickRef = useRef(onMarkerClick)
+  onMarkerClickRef.current = onMarkerClick
+
+  const darkRef = useRef(dark)
+  darkRef.current = dark
+
+  const highlightMarker = useCallback((id: string | null) => {
+    const prev = highlightedRef.current
+    highlightedRef.current = id
+    const isDark = !!darkRef.current
+
+    if (prev && prev !== id) {
+      const marker = markersRef.current.get(prev)
+      const item = itemsRef.current.find(i => i.id === prev)
+      if (marker && item) {
+        const idx = itemsRef.current.indexOf(item)
+        marker.setIcon(L.divIcon({
+          className: '',
+          iconSize: [MARKER_W, MARKER_H],
+          iconAnchor: [MARKER_W / 2, MARKER_H],
+          html: markerSvg(idx, false, isDark),
+        }))
+        marker.setZIndexOffset(0)
+      }
+    }
+
+    if (id) {
+      const marker = markersRef.current.get(id)
+      const item = itemsRef.current.find(i => i.id === id)
+      if (marker && item) {
+        const idx = itemsRef.current.indexOf(item)
+        marker.setIcon(L.divIcon({
+          className: '',
+          iconSize: [MARKER_W, MARKER_H],
+          iconAnchor: [MARKER_W / 2, MARKER_H],
+          html: markerSvg(idx, true, isDark),
+        }))
+        marker.setZIndexOffset(1000)
+      }
+    }
+  }, [])
+
+  const focusMarker = useCallback((id: string) => {
+    highlightMarker(id)
+    const marker = markersRef.current.get(id)
+    if (marker && mapRef.current) {
+      mapRef.current.flyTo(marker.getLatLng(), Math.max(mapRef.current.getZoom(), 12), { duration: 0.5 })
+    }
+  }, [])
+
+  useImperativeHandle(ref, () => ({ highlightMarker, focusMarker }), [])
+
+  useEffect(() => {
+    if (!containerRef.current) return
+
+    if (mapRef.current) {
+      mapRef.current.remove()
+      mapRef.current = null
+    }
+    markersRef.current.clear()
+
+    const map = L.map(containerRef.current, {
+      zoomControl: false,
+      attributionControl: true,
+      scrollWheelZoom: false,
+      dragging: true,
+      touchZoom: true,
+    })
+    mapRef.current = map
+
+    const defaultTile = dark
+      ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
+      : 'https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png'
+    L.tileLayer(mapTileUrl || defaultTile, {
+      maxZoom: 18,
+      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+      referrerPolicy: 'strict-origin-when-cross-origin',
+    } as any).addTo(map)
+
+    const items = buildMarkerItems(entries)
+    itemsRef.current = items
+
+    const allCoords: L.LatLngTuple[] = []
+
+    if (stableTrail.length > 1) {
+      const coords = stableTrail.map(p => [p.lat, p.lng] as L.LatLngTuple)
+      L.polyline(coords, {
+        color: '#6366f1', weight: 3, opacity: 0.4,
+        dashArray: '6 4', lineCap: 'round',
+      }).addTo(map)
+      coords.forEach(c => allCoords.push(c))
+    }
+
+    // route polyline — subtle dashed connection
+    if (items.length > 1) {
+      const routeCoords = items.map(i => [i.lat, i.lng] as L.LatLngTuple)
+      L.polyline(routeCoords, {
+        color: dark ? '#71717A' : '#A1A1AA',
+        weight: 1.5,
+        opacity: 0.5,
+        dashArray: '4 6',
+        lineCap: 'round', lineJoin: 'round',
+      }).addTo(map)
+    }
+
+    // place markers
+    items.forEach((item, i) => {
+      const pos: L.LatLngTuple = [item.lat, item.lng]
+      allCoords.push(pos)
+
+      const icon = L.divIcon({
+        className: '',
+        iconSize: [MARKER_W, MARKER_H],
+        iconAnchor: [MARKER_W / 2, MARKER_H],
+        html: markerSvg(i, false, !!dark),
+      })
+
+      const marker = L.marker(pos, { icon }).addTo(map)
+      marker.bindTooltip(item.label, {
+        direction: 'top',
+        offset: [0, -MARKER_H],
+        className: 'map-tooltip',
+      })
+
+      marker.on('click', () => {
+        onMarkerClickRef.current?.(item.id)
+      })
+
+      markersRef.current.set(item.id, marker)
+    })
+
+    // fit bounds
+    requestAnimationFrame(() => {
+      if (!mapRef.current) return
+      try {
+        map.invalidateSize()
+        if (allCoords.length > 0) {
+          map.fitBounds(L.latLngBounds(allCoords), { padding: [50, 50], maxZoom: 14 })
+        } else {
+          map.setView([30, 0], 2)
+        }
+      } catch {}
+    })
+
+    setTimeout(() => {
+      if (mapRef.current) map.invalidateSize()
+    }, 200)
+
+    return () => {
+      map.remove()
+      mapRef.current = null
+      markersRef.current.clear()
+    }
+  }, [entries, stableTrail, dark, mapTileUrl])
+
+  // react to activeMarkerId prop changes — runs after map is built
+  useEffect(() => {
+    if (!activeMarkerId || !mapRef.current) return
+    // small delay to ensure markers are rendered after map build
+    const timer = setTimeout(() => {
+      highlightMarker(activeMarkerId)
+      const marker = markersRef.current.get(activeMarkerId)
+      if (marker && mapRef.current) {
+        mapRef.current.flyTo(marker.getLatLng(), Math.max(mapRef.current.getZoom(), 12), { duration: 0.5 })
+      }
+    }, 50)
+    return () => clearTimeout(timer)
+  }, [activeMarkerId])
+
+  const zoomIn = () => mapRef.current?.zoomIn()
+  const zoomOut = () => mapRef.current?.zoomOut()
+
+  return (
+    <div style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}>
+      <div
+        ref={containerRef}
+        style={{ width: '100%', height: '100%' }}
+      />
+      <div style={{ position: 'absolute', bottom: 12, right: 12, zIndex: 400, display: 'flex', flexDirection: 'column', gap: 4 }}>
+        <button
+          onClick={zoomIn}
+          style={{
+            width: 32, height: 32, borderRadius: 8,
+            background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.9)',
+            backdropFilter: 'blur(8px)',
+            border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
+            color: dark ? '#fff' : '#18181B',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: 'pointer', fontSize: 16, fontWeight: 700, lineHeight: 1,
+          }}
+        >+</button>
+        <button
+          onClick={zoomOut}
+          style={{
+            width: 32, height: 32, borderRadius: 8,
+            background: dark ? 'rgba(255,255,255,0.12)' : 'rgba(255,255,255,0.9)',
+            backdropFilter: 'blur(8px)',
+            border: `1px solid ${dark ? 'rgba(255,255,255,0.15)' : 'rgba(0,0,0,0.1)'}`,
+            color: dark ? '#fff' : '#18181B',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            cursor: 'pointer', fontSize: 16, fontWeight: 700, lineHeight: 1,
+          }}
+        >−</button>
+      </div>
+    </div>
+  )
+})
+
+export default JourneyMap

client/src/components/Journey/MarkdownToolbar.test.tsx

@@ -0,0 +1,72 @@
+// FE-COMP-MDTOOLBAR-001 to FE-COMP-MDTOOLBAR-006
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import MarkdownToolbar from './MarkdownToolbar';
+import React from 'react';
+
+function createTextareaRef(value = '', selectionStart = 0, selectionEnd = 0) {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.selectionStart = selectionStart;
+  textarea.selectionEnd = selectionEnd;
+  textarea.focus = vi.fn();
+  textarea.setSelectionRange = vi.fn();
+  return { current: textarea } as React.RefObject<HTMLTextAreaElement>;
+}
+
+describe('MarkdownToolbar', () => {
+  let onUpdate: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    onUpdate = vi.fn();
+  });
+
+  it('FE-COMP-MDTOOLBAR-001: renders all 8 toolbar buttons', () => {
+    const ref = createTextareaRef();
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(8);
+  });
+
+  it('FE-COMP-MDTOOLBAR-002: buttons have correct title labels', () => {
+    const ref = createTextareaRef();
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    expect(screen.getByTitle('Bold')).toBeInTheDocument();
+    expect(screen.getByTitle('Italic')).toBeInTheDocument();
+    expect(screen.getByTitle('Link')).toBeInTheDocument();
+    expect(screen.getByTitle('Heading')).toBeInTheDocument();
+    expect(screen.getByTitle('Quote')).toBeInTheDocument();
+    expect(screen.getByTitle('List')).toBeInTheDocument();
+    expect(screen.getByTitle('Ordered')).toBeInTheDocument();
+    expect(screen.getByTitle('Divider')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MDTOOLBAR-003: bold button wraps selected text with **', () => {
+    const ref = createTextareaRef('hello world', 6, 11);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Bold'));
+    expect(onUpdate).toHaveBeenCalledWith('hello **world**');
+  });
+
+  it('FE-COMP-MDTOOLBAR-004: italic button wraps selected text with _', () => {
+    const ref = createTextareaRef('hello world', 6, 11);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Italic'));
+    expect(onUpdate).toHaveBeenCalledWith('hello _world_');
+  });
+
+  it('FE-COMP-MDTOOLBAR-005: link button wraps selected text as markdown link', () => {
+    const ref = createTextareaRef('click me', 0, 8);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Link'));
+    expect(onUpdate).toHaveBeenCalledWith('[click me](url)');
+  });
+
+  it('FE-COMP-MDTOOLBAR-006: heading button inserts line prefix', () => {
+    const ref = createTextareaRef('my title', 0, 0);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Heading'));
+    expect(onUpdate).toHaveBeenCalledWith('## my title');
+  });
+});

client/src/components/Journey/MarkdownToolbar.tsx

@@ -0,0 +1,84 @@
+import { Bold, Italic, Heading2, Link, Quote, List, ListOrdered, Minus } from 'lucide-react'
+
+interface Props {
+  textareaRef: React.RefObject<HTMLTextAreaElement | null>
+  onUpdate: (value: string) => void
+  dark?: boolean
+}
+
+type FormatAction = { type: 'wrap'; before: string; after: string } | { type: 'line'; prefix: string } | { type: 'insert'; text: string }
+
+const ACTIONS: Array<{ icon: typeof Bold; label: string; action: FormatAction }> = [
+  { icon: Bold, label: 'Bold', action: { type: 'wrap', before: '**', after: '**' } },
+  { icon: Italic, label: 'Italic', action: { type: 'wrap', before: '_', after: '_' } },
+  { icon: Heading2, label: 'Heading', action: { type: 'line', prefix: '## ' } },
+  { icon: Quote, label: 'Quote', action: { type: 'line', prefix: '> ' } },
+  { icon: Link, label: 'Link', action: { type: 'wrap', before: '[', after: '](url)' } },
+  { icon: List, label: 'List', action: { type: 'line', prefix: '- ' } },
+  { icon: ListOrdered, label: 'Ordered', action: { type: 'line', prefix: '1. ' } },
+  { icon: Minus, label: 'Divider', action: { type: 'insert', text: '\n\n---\n\n' } },
+]
+
+export default function MarkdownToolbar({ textareaRef, onUpdate, dark }: Props) {
+  const apply = (action: FormatAction) => {
+    const ta = textareaRef.current
+    if (!ta) return
+
+    const start = ta.selectionStart
+    const end = ta.selectionEnd
+    const text = ta.value
+    const selected = text.slice(start, end)
+
+    let result: string
+    let cursorPos: number
+
+    if (action.type === 'wrap') {
+      result = text.slice(0, start) + action.before + selected + action.after + text.slice(end)
+      cursorPos = selected ? end + action.before.length + action.after.length : start + action.before.length
+    } else if (action.type === 'insert') {
+      result = text.slice(0, start) + action.text + text.slice(end)
+      cursorPos = start + action.text.length
+    } else {
+      // line prefix — find start of current line
+      const lineStart = text.lastIndexOf('\n', start - 1) + 1
+      result = text.slice(0, lineStart) + action.prefix + text.slice(lineStart)
+      cursorPos = start + action.prefix.length
+    }
+
+    onUpdate(result)
+
+    // restore cursor after React re-render
+    requestAnimationFrame(() => {
+      ta.focus()
+      ta.setSelectionRange(cursorPos, cursorPos)
+    })
+  }
+
+  return (
+    <div style={{
+      display: 'flex', gap: 2, padding: '6px 4px',
+      borderBottom: `1px solid var(--journal-border)`,
+      overflowX: 'auto',
+    }}>
+      {ACTIONS.map(a => (
+        <button
+          key={a.label}
+          type="button"
+          title={a.label}
+          onClick={() => apply(a.action)}
+          style={{
+            width: 32, height: 32, borderRadius: 6,
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+            background: 'none', border: 'none',
+            color: 'var(--journal-muted)', cursor: 'pointer',
+            flexShrink: 0,
+          }}
+          onMouseEnter={e => e.currentTarget.style.background = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.04)'}
+          onMouseLeave={e => e.currentTarget.style.background = 'none'}
+        >
+          <a.icon size={15} />
+        </button>
+      ))}
+    </div>
+  )
+}

client/src/components/Journey/PhotoLightbox.test.tsx

@@ -0,0 +1,98 @@
+// FE-COMP-LIGHTBOX-001 to FE-COMP-LIGHTBOX-008
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import { resetAllStores } from '../../../tests/helpers/store';
+import PhotoLightbox from './PhotoLightbox';
+
+const samplePhotos = [
+  { id: 'p1', src: '/photos/1.jpg', caption: 'Sunset at the beach' },
+  { id: 'p2', src: '/photos/2.jpg', caption: 'Mountain trail' },
+  { id: 'p3', src: '/photos/3.jpg', caption: null },
+];
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('PhotoLightbox', () => {
+  it('FE-COMP-LIGHTBOX-001: renders without crashing when open', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-002: shows photo image', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    const img = screen.getByRole('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', '/photos/1.jpg');
+  });
+
+  it('FE-COMP-LIGHTBOX-003: shows close button', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    const buttons = screen.getAllByRole('button');
+    // Close button exists (the X button in the top bar)
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-LIGHTBOX-004: previous/next navigation works', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    // Initially shows photo 1
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', '/photos/1.jpg');
+
+    // Navigate to next photo via ArrowRight key
+    fireEvent.keyDown(window, { key: 'ArrowRight' });
+    expect(screen.getByText('2 / 3')).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('src', '/photos/2.jpg');
+
+    // Navigate back via ArrowLeft key
+    fireEvent.keyDown(window, { key: 'ArrowLeft' });
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('src', '/photos/1.jpg');
+  });
+
+  it('FE-COMP-LIGHTBOX-005: keyboard Escape closes lightbox', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-LIGHTBOX-006: counter shows "1 / N"', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-007: does not render when photos array is empty', () => {
+    const onClose = vi.fn();
+    const { container } = render(<PhotoLightbox photos={[]} onClose={onClose} />);
+    // Component returns null when photo is undefined (empty array, index 0 is undefined)
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-008: calls onClose when close button clicked', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    // The close button is in the top bar — find the button and click it
+    const buttons = screen.getAllByRole('button');
+    // The first button in the top bar is the close (X) button
+    buttons[0].click();
+    expect(onClose).toHaveBeenCalled();
+  });
+});

client/src/components/Journey/PhotoLightbox.tsx

@@ -0,0 +1,149 @@
+import { useState, useEffect, useCallback, useRef } from 'react'
+import { ChevronLeft, ChevronRight, X } from 'lucide-react'
+
+interface LightboxPhoto {
+  id: string
+  src: string
+  caption?: string | null
+  provider?: string
+  asset_id?: string | null
+  owner_id?: number | null
+}
+
+interface Props {
+  photos: LightboxPhoto[]
+  startIndex?: number
+  onClose: () => void
+}
+
+export default function PhotoLightbox({ photos, startIndex = 0, onClose }: Props) {
+  const [idx, setIdx] = useState(startIndex)
+  const touchStart = useRef<{ x: number; y: number } | null>(null)
+
+  const photo = photos[idx]
+  const hasPrev = idx > 0
+  const hasNext = idx < photos.length - 1
+
+  const prev = useCallback(() => { if (hasPrev) setIdx(i => i - 1) }, [hasPrev])
+  const next = useCallback(() => { if (hasNext) setIdx(i => i + 1) }, [hasNext])
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose()
+      if (e.key === 'ArrowLeft') prev()
+      if (e.key === 'ArrowRight') next()
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [prev, next, onClose])
+
+  const onTouchStart = (e: React.TouchEvent) => {
+    const t = e.touches[0]
+    touchStart.current = { x: t.clientX, y: t.clientY }
+  }
+
+  const onTouchEnd = (e: React.TouchEvent) => {
+    if (!touchStart.current) return
+    const t = e.changedTouches[0]
+    const dx = t.clientX - touchStart.current.x
+    const dy = t.clientY - touchStart.current.y
+
+    // swipe down to close
+    if (dy > 80 && Math.abs(dx) < 60) {
+      onClose()
+      return
+    }
+    // horizontal swipe
+    if (Math.abs(dx) > 50 && Math.abs(dy) < 80) {
+      if (dx < 0) next()
+      else prev()
+    }
+    touchStart.current = null
+  }
+
+  if (!photo) return null
+
+  return (
+    <div
+      style={{
+        position: 'fixed', inset: 0, zIndex: 500,
+        background: 'rgba(0,0,0,0.92)', backdropFilter: 'blur(20px)',
+        display: 'flex', flexDirection: 'column',
+      }}
+      onTouchStart={onTouchStart}
+      onTouchEnd={onTouchEnd}
+    >
+      {/* Photo area — centered with nav overlays */}
+      <div
+        className="group/lightbox"
+        style={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}
+      >
+        {/* Top bar */}
+        <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '16px 20px' }}>
+          <span style={{ color: 'rgba(255,255,255,0.5)', fontSize: 13, fontWeight: 500 }}>
+            {idx + 1} / {photos.length}
+          </span>
+          <button onClick={onClose} style={{
+            background: 'rgba(255,255,255,0.1)', border: 'none', borderRadius: '50%',
+            width: 36, height: 36, display: 'flex', alignItems: 'center', justifyContent: 'center',
+            color: '#fff', cursor: 'pointer',
+          }}>
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Prev button — visible on hover (desktop), always visible (mobile) */}
+        {hasPrev && (
+          <button onClick={prev} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 transition-opacity" style={{
+            position: 'absolute', left: 16, zIndex: 5,
+            width: 44, height: 44, borderRadius: '50%',
+            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)',
+            border: '1px solid rgba(255,255,255,0.1)',
+            alignItems: 'center', justifyContent: 'center',
+            color: '#fff', cursor: 'pointer',
+          }}>
+            <ChevronLeft size={22} />
+          </button>
+        )}
+
+        {/* Photo */}
+        <img
+          key={photo.id}
+          src={photo.src}
+          alt={photo.caption || ''}
+          style={{
+            maxWidth: '92vw', maxHeight: '92vh',
+            objectFit: 'contain', borderRadius: 4,
+            animation: 'fadeIn 0.15s ease',
+          }}
+        />
+
+        {/* Next button */}
+        {hasNext && (
+          <button onClick={next} className="flex sm:opacity-0 sm:group-hover/lightbox:opacity-100 transition-opacity" style={{
+            position: 'absolute', right: 16, zIndex: 5,
+            width: 44, height: 44, borderRadius: '50%',
+            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)',
+            border: '1px solid rgba(255,255,255,0.1)',
+            alignItems: 'center', justifyContent: 'center',
+            color: '#fff', cursor: 'pointer',
+          }}>
+            <ChevronRight size={22} />
+          </button>
+        )}
+
+        {/* Caption — bottom center overlay */}
+        {photo.caption && (
+          <div style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', zIndex: 5, maxWidth: '70%', textAlign: 'center' }}>
+            <p style={{
+              fontSize: 14, fontStyle: 'italic',
+              color: 'rgba(255,255,255,0.75)', margin: 0, lineHeight: 1.5,
+              background: 'rgba(0,0,0,0.3)', backdropFilter: 'blur(8px)',
+              padding: '6px 14px', borderRadius: 10,
+            }}>{photo.caption}</p>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/Journey/moodConfig.test.ts

@@ -0,0 +1,69 @@
+// FE-COMP-MOOD-001 to FE-COMP-MOOD-005
+
+import { describe, it, expect } from 'vitest';
+import { MOODS, WEATHERS, getMood, moodColor, tagColors, TAG_STYLES, MOOD_DEFAULT_COLOR } from './moodConfig';
+
+describe('moodConfig', () => {
+  it('FE-COMP-MOOD-001: MOODS contains all five mood definitions', () => {
+    const ids = MOODS.map(m => m.id);
+    expect(ids).toEqual(['amazing', 'good', 'neutral', 'tired', 'rough']);
+    expect(MOODS).toHaveLength(5);
+  });
+
+  it('FE-COMP-MOOD-002: every mood has valid hex color and css var', () => {
+    for (const mood of MOODS) {
+      expect(mood.color).toMatch(/^#[0-9A-Fa-f]{6}$/);
+      expect(mood.cssVar).toMatch(/^var\(--mood-.+\)$/);
+      expect(mood.icon).toBeDefined();
+      expect(mood.label).toBeTruthy();
+    }
+  });
+
+  it('FE-COMP-MOOD-003: getMood returns correct mood or undefined', () => {
+    expect(getMood('amazing')?.id).toBe('amazing');
+    expect(getMood('rough')?.color).toBe('#9B8EC4');
+    expect(getMood('nonexistent')).toBeUndefined();
+    expect(getMood(null)).toBeUndefined();
+    expect(getMood(undefined)).toBeUndefined();
+  });
+
+  it('FE-COMP-MOOD-004: moodColor returns css var or fallback', () => {
+    expect(moodColor('good')).toBe('var(--mood-good)');
+    expect(moodColor(null)).toBe('var(--journal-faint)');
+    expect(moodColor('unknown')).toBe('var(--journal-faint)');
+  });
+
+  it('FE-COMP-MOOD-005: WEATHERS contains all eight entries with icons', () => {
+    expect(WEATHERS).toHaveLength(8);
+    const ids = WEATHERS.map(w => w.id);
+    expect(ids).toContain('sunny');
+    expect(ids).toContain('snowy');
+    expect(ids).toContain('stormy');
+    for (const w of WEATHERS) {
+      expect(w.icon).toBeDefined();
+      expect(w.label).toBeTruthy();
+    }
+  });
+});
+
+describe('tagColors', () => {
+  it('FE-COMP-MOOD-006: returns known tag colors for light and dark mode', () => {
+    const light = tagColors('hidden gem', false);
+    expect(light.bg).toBe('#dcfce7');
+    expect(light.fg).toBe('#166534');
+
+    const dark = tagColors('hidden gem', true);
+    expect(dark.bg).toBe('rgba(22,101,52,0.2)');
+    expect(dark.fg).toBe('#86efac');
+  });
+
+  it('FE-COMP-MOOD-007: returns fallback colors for unknown tags', () => {
+    const light = tagColors('random tag', false);
+    expect(light.bg).toBe('rgba(0,0,0,0.05)');
+    expect(light.fg).toBe('#374151');
+
+    const dark = tagColors('random tag', true);
+    expect(dark.bg).toBe('rgba(255,255,255,0.07)');
+    expect(dark.fg).toBe('#a1a1aa');
+  });
+});

client/src/components/Journey/moodConfig.ts

@@ -0,0 +1,65 @@
+import { Sparkles, Sun, Minus, Moon, CloudRain, CloudSun, Cloud, CloudLightning, Snowflake, Thermometer, ThermometerSnowflake } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+export interface MoodDef {
+  id: string
+  label: string
+  icon: LucideIcon
+  color: string
+  cssVar: string
+}
+
+export const MOODS: MoodDef[] = [
+  { id: 'amazing', label: 'Amazing', icon: Sparkles, color: '#E8654A', cssVar: 'var(--mood-amazing)' },
+  { id: 'good',    label: 'Good',    icon: Sun,      color: '#EF9F27', cssVar: 'var(--mood-good)' },
+  { id: 'neutral', label: 'Neutral', icon: Minus,    color: '#94928C', cssVar: 'var(--mood-neutral)' },
+  { id: 'tired',   label: 'Tired',   icon: Moon,     color: '#6B9BD2', cssVar: 'var(--mood-tired)' },
+  { id: 'rough',   label: 'Rough',   icon: CloudRain,color: '#9B8EC4', cssVar: 'var(--mood-rough)' },
+]
+
+export const MOOD_DEFAULT_COLOR = '#D4D4D4'
+
+export function getMood(id: string | null | undefined): MoodDef | undefined {
+  if (!id) return undefined
+  return MOODS.find(m => m.id === id)
+}
+
+export function moodColor(id: string | null | undefined): string {
+  return getMood(id)?.cssVar || 'var(--journal-faint)'
+}
+
+export interface WeatherDef {
+  id: string
+  label: string
+  icon: LucideIcon
+}
+
+export const WEATHERS: WeatherDef[] = [
+  { id: 'sunny',   label: 'Sunny',         icon: Sun },
+  { id: 'partly',  label: 'Partly cloudy', icon: CloudSun },
+  { id: 'cloudy',  label: 'Cloudy',        icon: Cloud },
+  { id: 'rainy',   label: 'Rainy',         icon: CloudRain },
+  { id: 'stormy',  label: 'Stormy',        icon: CloudLightning },
+  { id: 'snowy',   label: 'Snowy',         icon: Snowflake },
+  { id: 'hot',     label: 'Hot',           icon: Thermometer },
+  { id: 'cold',    label: 'Cold',          icon: ThermometerSnowflake },
+]
+
+export function getWeather(id: string | null | undefined): WeatherDef | undefined {
+  if (!id) return undefined
+  return WEATHERS.find(w => w.id === id)
+}
+
+export const TAG_STYLES: Record<string, { bg: string; fg: string; darkBg: string; darkFg: string }> = {
+  'hidden gem':   { bg: '#dcfce7', fg: '#166534', darkBg: 'rgba(22,101,52,0.2)',  darkFg: '#86efac' },
+  'must revisit': { bg: '#dbeafe', fg: '#1e40af', darkBg: 'rgba(30,64,175,0.2)',  darkFg: '#93c5fd' },
+  'best meal':    { bg: '#fef3c7', fg: '#92400e', darkBg: 'rgba(146,64,14,0.2)',  darkFg: '#fcd34d' },
+  'tourist trap': { bg: '#fee2e2', fg: '#991b1b', darkBg: 'rgba(153,27,27,0.2)',  darkFg: '#fca5a5' },
+  'disaster':     { bg: '#fce4ec', fg: '#880e4f', darkBg: 'rgba(136,14,79,0.2)',  darkFg: '#f48fb1' },
+}
+
+export function tagColors(tag: string, dark: boolean) {
+  const known = TAG_STYLES[tag.toLowerCase()]
+  if (known) return { bg: dark ? known.darkBg : known.bg, fg: dark ? known.darkFg : known.fg }
+  return { bg: dark ? 'rgba(255,255,255,0.07)' : 'rgba(0,0,0,0.05)', fg: dark ? '#a1a1aa' : '#374151' }
+}

client/src/components/Journey/stripMarkdown.test.ts

@@ -0,0 +1,38 @@
+// FE-UTIL-STRIPMD-001 to FE-UTIL-STRIPMD-006
+
+import { describe, it, expect } from 'vitest';
+import { stripMarkdown } from './stripMarkdown';
+
+describe('stripMarkdown', () => {
+  it('FE-UTIL-STRIPMD-001: strips bold and italic formatting', () => {
+    expect(stripMarkdown('**bold** and _italic_')).toBe('bold and italic');
+    expect(stripMarkdown('__also bold__ and *also italic*')).toBe('also bold and also italic');
+  });
+
+  it('FE-UTIL-STRIPMD-002: strips headings', () => {
+    expect(stripMarkdown('# Heading 1')).toBe('Heading 1');
+    expect(stripMarkdown('## Heading 2')).toBe('Heading 2');
+    expect(stripMarkdown('### Heading 3')).toBe('Heading 3');
+  });
+
+  it('FE-UTIL-STRIPMD-003: converts links to text and removes images', () => {
+    expect(stripMarkdown('[click here](https://example.com)')).toBe('click here');
+    expect(stripMarkdown('![alt text](image.jpg)')).toBe('');
+  });
+
+  it('FE-UTIL-STRIPMD-004: strips code blocks and inline code', () => {
+    expect(stripMarkdown('use `console.log`')).toBe('use console.log');
+    expect(stripMarkdown('```\ncode block\n```')).toBe('');
+  });
+
+  it('FE-UTIL-STRIPMD-005: strips blockquotes and lists', () => {
+    expect(stripMarkdown('> quoted text')).toBe('quoted text');
+    expect(stripMarkdown('- item one')).toBe('item one');
+    expect(stripMarkdown('1. first item')).toBe('first item');
+  });
+
+  it('FE-UTIL-STRIPMD-006: strips strikethrough and horizontal rules', () => {
+    expect(stripMarkdown('~~deleted~~')).toBe('deleted');
+    expect(stripMarkdown('---')).toBe('');
+  });
+});

client/src/components/Journey/stripMarkdown.ts

@@ -0,0 +1,24 @@
+/**
+ * Strip markdown formatting to get plain text for previews.
+ * Handles: bold, italic, headings, links, images, blockquotes, code, lists, hr.
+ */
+export function stripMarkdown(md: string): string {
+  return md
+    .replace(/^#{1,6}\s+/gm, '')           // headings
+    .replace(/!\[.*?\]\(.*?\)/g, '')        // images
+    .replace(/\[([^\]]*)\]\(.*?\)/g, '$1')  // links → text
+    .replace(/(`{3}[\s\S]*?`{3})/g, '')     // code blocks
+    .replace(/`([^`]+)`/g, '$1')            // inline code
+    .replace(/\*\*(.+?)\*\*/g, '$1')        // bold **
+    .replace(/__(.+?)__/g, '$1')            // bold __
+    .replace(/\*(.+?)\*/g, '$1')            // italic *
+    .replace(/_(.+?)_/g, '$1')              // italic _
+    .replace(/~~(.+?)~~/g, '$1')            // strikethrough
+    .replace(/^>\s?/gm, '')                 // blockquotes
+    .replace(/^[-*+]\s+/gm, '')             // unordered lists
+    .replace(/^\d+\.\s+/gm, '')             // ordered lists
+    .replace(/^---+$/gm, '')                // horizontal rules
+    .replace(/\n{2,}/g, ' ')               // collapse multiple newlines
+    .replace(/\n/g, ' ')                    // remaining newlines → spaces
+    .trim()
+}

client/src/components/Layout/BottomNav.test.tsx

@@ -0,0 +1,102 @@
+// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-009
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { useAuthStore } from '../../store/authStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser } from '../../../tests/helpers/factories';
+import BottomNav from './BottomNav';
+
+const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
+
+beforeEach(() => {
+  resetAllStores();
+  mockNavigate.mockClear();
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+});
+
+describe('BottomNav', () => {
+  it('FE-COMP-BOTTOMNAV-001: renders without crashing', () => {
+    render(<BottomNav />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-002: shows Trips nav link', () => {
+    render(<BottomNav />);
+    expect(screen.getByText('Trips')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-003: shows Profile button', () => {
+    render(<BottomNav />);
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-004: profile sheet opens on click', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    // Profile sheet shows username
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-005: profile sheet shows username', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-006: profile sheet shows Settings link', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-007: profile sheet shows Logout button', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-008: admin badge shown for admin users', async () => {
+    const adminUser = buildUser({ id: 2, username: 'adminuser', role: 'admin' });
+    seedStore(useAuthStore, { user: adminUser, isAuthenticated: true });
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-009: backdrop click closes profile sheet', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    // Sheet is open — username visible
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    // The outermost fixed div is the backdrop wrapper, clicking it triggers onClose
+    const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
+    expect(backdrop).toBeTruthy();
+    fireEvent.click(backdrop);
+    // Sheet should be closed — username no longer visible (only the nav Profile text remains)
+    expect(screen.queryByText('testuser')).not.toBeInTheDocument();
+  });
+});

client/src/components/Layout/BottomNav.tsx

@@ -0,0 +1,164 @@
+import { useState } from 'react'
+import { NavLink, useNavigate } from 'react-router-dom'
+import { useAddonStore } from '../../store/addonStore'
+import { useAuthStore } from '../../store/authStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { Plane, CalendarDays, Globe, Compass, User, Settings, Shield, LogOut, X } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+const BASE_ITEMS: { to: string; label: string; icon: LucideIcon; addonId?: string }[] = [
+  { to: '/trips', label: 'Trips', icon: Plane },
+]
+
+const ADDON_NAV: Record<string, { to: string; label: string; icon: LucideIcon }> = {
+  vacay: { to: '/vacay', label: 'Vacay', icon: CalendarDays },
+  atlas: { to: '/atlas', label: 'Atlas', icon: Globe },
+  journey: { to: '/journey', label: 'Journey', icon: Compass },
+}
+
+export default function BottomNav() {
+  const { t } = useTranslation()
+  const darkMode = useSettingsStore(s => s.settings.dark_mode)
+  const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
+  const addons = useAddonStore(s => s.addons)
+  const globalAddons = addons.filter(a => a.type === 'global' && a.enabled)
+  const [showProfile, setShowProfile] = useState(false)
+
+  const items = [...BASE_ITEMS]
+  for (const addon of globalAddons) {
+    const nav = ADDON_NAV[addon.id]
+    if (nav) items.push(nav)
+  }
+
+  return (
+    <>
+      <nav
+        className="md:hidden sticky bottom-0 border-t border-zinc-200 dark:border-zinc-800 flex justify-around items-start pt-3 z-50 mt-auto flex-shrink-0"
+        style={{
+          height: 'calc(84px + env(safe-area-inset-bottom, 0px))',
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+          background: dark ? 'rgba(9,9,11,0.96)' : 'rgba(255,255,255,0.96)',
+          backdropFilter: 'blur(20px)',
+          WebkitBackdropFilter: 'blur(20px)',
+        }}
+      >
+        {items.map(({ to, label, icon: Icon }) => (
+          <NavLink
+            key={to}
+            to={to}
+            className={({ isActive }) =>
+              `flex flex-col items-center gap-1 px-3 py-1 min-w-[60px] ${
+                isActive ? 'text-zinc-900 dark:text-white' : 'text-zinc-400 dark:text-zinc-500'
+              }`
+            }
+          >
+            <Icon size={22} strokeWidth={2} />
+            <span className="text-[10px] font-medium">{label}</span>
+          </NavLink>
+        ))}
+        <button
+          onClick={() => setShowProfile(true)}
+          className="flex flex-col items-center gap-1 px-3 py-1 min-w-[60px] text-zinc-400 dark:text-zinc-500"
+        >
+          <User size={22} strokeWidth={2} />
+          <span className="text-[10px] font-medium">{t("nav.profile")}</span>
+        </button>
+      </nav>
+
+      {showProfile && <ProfileSheet onClose={() => setShowProfile(false)} />}
+    </>
+  )
+}
+
+function ProfileSheet({ onClose }: { onClose: () => void }) {
+  const { t } = useTranslation()
+  const { user, logout } = useAuthStore()
+  const navigate = useNavigate()
+
+  const handleNav = (path: string) => {
+    onClose()
+    navigate(path)
+  }
+
+  const handleLogout = () => {
+    onClose()
+    logout()
+    navigate('/login')
+  }
+
+  return (
+    <div className="fixed inset-0 z-[300] md:hidden" onClick={onClose}>
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+
+      {/* Sheet */}
+      <div
+        className="absolute bottom-0 left-0 right-0 bg-white dark:bg-zinc-900 rounded-t-2xl overflow-hidden"
+        style={{ animation: 'slideUp 0.25s ease-out', paddingBottom: 'env(safe-area-inset-bottom, 0px)' }}
+        onClick={e => e.stopPropagation()}
+      >
+        {/* Handle */}
+        <div className="flex justify-center pt-3 pb-2">
+          <div className="w-10 h-1 rounded-full bg-zinc-300 dark:bg-zinc-700" />
+        </div>
+
+        {/* User info */}
+        <div className="px-6 pb-4 pt-1">
+          <div className="flex items-center gap-3">
+            <div className="w-11 h-11 rounded-full bg-zinc-900 dark:bg-white text-white dark:text-zinc-900 flex items-center justify-center text-[16px] font-bold">
+              {(user?.username || '?')[0].toUpperCase()}
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-[15px] font-semibold text-zinc-900 dark:text-white">{user?.username}</p>
+              <p className="text-[12px] text-zinc-500 truncate">{user?.email}</p>
+            </div>
+            {user?.role === 'admin' && (
+              <span className="flex items-center gap-1 px-2 py-0.5 rounded-full bg-zinc-100 dark:bg-zinc-800 text-[10px] font-semibold text-zinc-600 dark:text-zinc-400 uppercase tracking-wide">
+                <Shield size={10} /> Admin
+              </span>
+            )}
+          </div>
+        </div>
+
+        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
+
+        {/* Links */}
+        <div className="py-2 px-2">
+          <button
+            onClick={() => handleNav('/settings')}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
+          >
+            <Settings size={18} className="text-zinc-500" />
+            <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t("nav.bottomSettings")}</span>
+          </button>
+
+          {user?.role === 'admin' && (
+            <button
+              onClick={() => handleNav('/admin')}
+              className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-zinc-50 dark:hover:bg-zinc-800 active:bg-zinc-100 dark:active:bg-zinc-800 transition-colors"
+            >
+              <Shield size={18} className="text-zinc-500" />
+              <span className="text-[14px] font-medium text-zinc-900 dark:text-white">{t("nav.bottomAdmin")}</span>
+            </button>
+          )}
+        </div>
+
+        <div className="h-px bg-zinc-100 dark:bg-zinc-800 mx-4" />
+
+        {/* Logout */}
+        <div className="py-2 px-2">
+          <button
+            onClick={handleLogout}
+            className="w-full flex items-center gap-3 px-4 py-3 rounded-xl text-left hover:bg-red-50 dark:hover:bg-red-900/20 active:bg-red-100 transition-colors"
+          >
+            <LogOut size={18} className="text-red-500" />
+            <span className="text-[14px] font-medium text-red-600 dark:text-red-400">{t("nav.bottomLogout")}</span>
+          </button>
+        </div>
+
+        <div className="h-4" />
+      </div>
+    </div>
+  )
+}

client/src/components/Layout/DemoBanner.test.tsx

@@ -0,0 +1,116 @@
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
+import { act, fireEvent } from '@testing-library/react';
+import { render, screen } from '../../../tests/helpers/render';
+import DemoBanner from './DemoBanner';
+
+describe('DemoBanner', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  // FE-COMP-DEMOBANNER-001
+  it('renders without crashing', () => {
+    render(<DemoBanner />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-002
+  it('overlay is visible on initial render with dismiss button', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText('Got it')).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-003
+  it('shows English welcome title by default', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText(/Welcome to/i)).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-004
+  it('clicking "Got it" dismisses the banner', async () => {
+    const user = userEvent.setup();
+    render(<DemoBanner />);
+    const button = screen.getByText('Got it');
+    await user.click(button);
+    expect(screen.queryByText('Got it')).not.toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-005
+  it('clicking the overlay backdrop dismisses the banner', () => {
+    const { container } = render(<DemoBanner />);
+    // The outermost fixed div is the overlay backdrop
+    const overlay = container.firstChild as HTMLElement;
+    fireEvent.click(overlay);
+    expect(screen.queryByText('Got it')).not.toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-006
+  it('clicking the inner card does NOT dismiss', async () => {
+    const user = userEvent.setup();
+    render(<DemoBanner />);
+    // The inner card is the direct parent of the "Got it" button's container
+    const card = screen.getByText('Got it').closest('div[style*="background: white"]')!;
+    await user.click(card);
+    expect(screen.getByText('Got it')).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-007
+  it('shows reset timer', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText(/Next reset in/i)).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-008
+  it('shows upload-disabled notice', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText(/File uploads.*disabled in demo/i)).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-009
+  it('shows "What is TREK?" section', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText('What is TREK?')).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-010
+  it('shows addon cards', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText('Vacay')).toBeInTheDocument();
+    expect(screen.getByText('Atlas')).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-011
+  it('shows full version features section', () => {
+    render(<DemoBanner />);
+    expect(screen.getByText(/Additionally in the full version/i)).toBeInTheDocument();
+  });
+
+  // FE-COMP-DEMOBANNER-012
+  it('self-host link points to GitHub', () => {
+    render(<DemoBanner />);
+    const link = screen.getByText('self-host it').closest('a')!;
+    expect(link).toHaveAttribute('href', 'https://github.com/mauriceboe/TREK');
+    expect(link).toHaveAttribute('target', '_blank');
+  });
+
+  // Timer update test
+  it('updates countdown timer after interval tick', async () => {
+    vi.useFakeTimers({ shouldAdvanceTime: false });
+    // Set time to XX:30 so minutesLeft = 59 - 30 = 29
+    vi.setSystemTime(new Date(2026, 3, 7, 12, 30, 0));
+    render(<DemoBanner />);
+    expect(screen.getByText(/29 minutes/)).toBeInTheDocument();
+
+    // Advance to XX:31 and tick the interval; wrap in act so React flushes state update
+    await act(async () => {
+      vi.setSystemTime(new Date(2026, 3, 7, 12, 31, 0));
+      vi.advanceTimersByTime(10000);
+    });
+    expect(screen.getByText(/28 minutes/)).toBeInTheDocument();
+  });
+});

client/src/components/Layout/DemoBanner.tsx

@@ -118,6 +118,70 @@ const texts: Record<string, DemoTexts> = {
     selfHostLink: 'alójalo tú mismo',
     close: 'Entendido',
   },
+  zh: {
+    titleBefore: '欢迎来到 ',
+    titleAfter: '',
+    title: '欢迎来到 TREK 演示版',
+    description: '你可以查看、编辑和创建旅行。所有更改都会在每小时自动重置。',
+    resetIn: '下次重置将在',
+    minutes: '分钟后',
+    uploadNote: '演示模式下已禁用文件上传（照片、文档、封面）。',
+    fullVersionTitle: '完整版本还包括：',
+    features: [
+      '文件上传（照片、文档、封面）',
+      'API 密钥管理（Google Maps、天气）',
+      '用户和权限管理',
+      '自动备份',
+      '附加组件管理（启用/禁用）',
+      'OIDC / SSO 单点登录',
+    ],
+    addonsTitle: '模块化附加组件（完整版本可禁用）',
+    addons: [
+      ['Vacay', '带日历、节假日和用户融合的假期规划器'],
+      ['Atlas', '带已访问国家和旅行统计的世界地图'],
+      ['Packing', '按旅行管理清单'],
+      ['Budget', '支持分摊的费用追踪'],
+      ['Documents', '将文件附加到旅行'],
+      ['Widgets', '货币换算和时区工具'],
+    ],
+    whatIs: '什么是 TREK？',
+    whatIsDesc: '一个支持实时协作、交互式地图、OIDC 登录和深色模式的自托管旅行规划器。',
+    selfHost: '开源项目 - ',
+    selfHostLink: '自行部署',
+    close: '知道了',
+  },
+  'zh-TW': {
+    titleBefore: '歡迎來到 ',
+    titleAfter: '',
+    title: '歡迎來到 TREK 展示版',
+    description: '你可以檢視、編輯和建立行程。所有變更都會在每小時自動重設。',
+    resetIn: '下次重設將在',
+    minutes: '分鐘後',
+    uploadNote: '展示模式下已停用檔案上傳（照片、文件、封面）。',
+    fullVersionTitle: '完整版本還包含：',
+    features: [
+      '檔案上傳（照片、文件、封面）',
+      'API 金鑰管理（Google Maps、天氣）',
+      '使用者與權限管理',
+      '自動備份',
+      '附加元件管理（啟用/停用）',
+      'OIDC / SSO 單一登入',
+    ],
+    addonsTitle: '模組化附加元件（完整版本可停用）',
+    addons: [
+      ['Vacay', '具備日曆、假日與使用者融合的假期規劃器'],
+      ['Atlas', '顯示已造訪國家與旅行統計的世界地圖'],
+      ['Packing', '依行程管理的檢查清單'],
+      ['Budget', '支援分攤的費用追蹤'],
+      ['Documents', '將檔案附加到行程'],
+      ['Widgets', '貨幣換算與時區工具'],
+    ],
+    whatIs: 'TREK 是什麼？',
+    whatIsDesc: '一個支援即時協作、互動式地圖、OIDC 登入和深色模式的自架旅行規劃器。',
+    selfHost: '開源專案 - ',
+    selfHostLink: '自行架設',
+    close: '知道了',
+  },
   ar: {
     titleBefore: 'مرحبًا بك في ',
     titleAfter: '',
@@ -150,6 +214,38 @@ const texts: Record<string, DemoTexts> = {
     selfHostLink: 'استضفه بنفسك',
     close: 'فهمت',
   },
+  id: {
+    titleBefore: 'Selamat datang di ',
+    titleAfter: '',
+    title: 'Selamat datang di Demo TREK',
+    description: 'Anda dapat melihat, mengedit, dan membuat perjalanan. Semua perubahan akan diatur ulang secara otomatis setiap jam.',
+    resetIn: 'Atur ulang berikutnya dalam',
+    minutes: 'menit',
+    uploadNote: 'Unggah file (foto, dokumen, sampul) dinonaktifkan dalam mode demo.',
+    fullVersionTitle: 'Selain itu dalam versi lengkap:',
+    features: [
+      'Unggah file (foto, dokumen, sampul)',
+      'Manajemen kunci API (Google Maps, Cuaca)',
+      'Manajemen pengguna & izin',
+      'Pencadangan otomatis',
+      'Manajemen Addon (aktifkan/nonaktifkan)',
+      'OIDC / SSO single sign-on',
+    ],
+    addonsTitle: 'Addon Modular (dapat dinonaktifkan di versi lengkap)',
+    addons: [
+      ['Vacay', 'Perencana liburan dengan kalender, hari libur & penggabungan pengguna'],
+      ['Atlas', 'Peta dunia dengan negara yang dikunjungi & statistik perjalanan'],
+      ['Pengepakan', 'Daftar periksa per perjalanan'],
+      ['Anggaran', 'Pelacakan pengeluaran dengan pemisahan tagihan'],
+      ['Dokumen', 'Lampirkan file ke perjalanan'],
+      ['Widget', 'Konverter mata uang & zona waktu'],
+    ],
+    whatIs: 'Apa itu TREK?',
+    whatIsDesc: 'Perencana perjalanan yang di-host sendiri dengan kolaborasi real-time, peta interaktif, login OIDC, dan mode gelap.',
+    selfHost: 'Buka sumber — ',
+    selfHostLink: 'host mandiri',
+    close: 'Mengerti',
+  },
 }
 
 const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield]

client/src/components/Layout/InAppNotificationBell.test.tsx

@@ -0,0 +1,247 @@
+// FE-COMP-BELL-001 to FE-COMP-BELL-020
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+import { useAuthStore } from '../../store/authStore';
+import { useInAppNotificationStore } from '../../store/inAppNotificationStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser } from '../../../tests/helpers/factories';
+import InAppNotificationBell from './InAppNotificationBell';
+
+let _notifId = 1;
+function buildNotification(overrides: Record<string, unknown> = {}) {
+  return {
+    id: _notifId++,
+    type: 'simple',
+    scope: 'trip',
+    target: 1,
+    sender_id: 2,
+    sender_username: 'alice',
+    sender_avatar: null,
+    recipient_id: 1,
+    title_key: 'test',
+    title_params: '{}',
+    text_key: 'test.text',
+    text_params: '{}',
+    positive_text_key: null,
+    negative_text_key: null,
+    response: null,
+    navigate_text_key: null,
+    navigate_target: null,
+    is_read: 0,
+    created_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+beforeAll(() => {
+  _notifId = 1;
+});
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+});
+
+describe('InAppNotificationBell', () => {
+  it('FE-COMP-BELL-001: renders without crashing', () => {
+    render(<InAppNotificationBell />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-002: shows bell button', () => {
+    render(<InAppNotificationBell />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-BELL-003: clicking bell opens notification panel', async () => {
+    const user = userEvent.setup();
+    render(<InAppNotificationBell />);
+    const bell = screen.getAllByRole('button')[0];
+    await user.click(bell);
+    // Panel shows "Notifications" title
+    await screen.findByText('Notifications');
+  });
+
+  it('FE-COMP-BELL-004: notification panel shows empty state when no notifications', async () => {
+    const { http, HttpResponse } = await import('msw');
+    const { server } = await import('../../../tests/helpers/msw/server');
+    server.use(
+      http.get('/api/notifications/in-app', () => HttpResponse.json({ notifications: [], total: 0, unread_count: 0 })),
+      http.get('/api/notifications/in-app/unread-count', () => HttpResponse.json({ count: 0 })),
+    );
+    const user = userEvent.setup();
+    render(<InAppNotificationBell />);
+    const bell = screen.getAllByRole('button')[0];
+    await user.click(bell);
+    await screen.findByText('No notifications');
+  });
+
+  it('FE-COMP-BELL-005: shows unread badge count when there are unread notifications', async () => {
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 5, isLoading: false });
+    render(<InAppNotificationBell />);
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-006: does not show badge when unread count is 0', () => {
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false });
+    render(<InAppNotificationBell />);
+    expect(screen.queryByText('0')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-007: panel shows Mark all read button when panel is open', async () => {
+    const user = userEvent.setup();
+    const notification = {
+      id: 1, type: 'simple', scope: 'trip', target: 1, sender_id: 2,
+      sender_username: 'alice', sender_avatar: null, recipient_id: 1,
+      title_key: 'test', title_params: '{}', text_key: 'test.text', text_params: '{}',
+      positive_text_key: null, negative_text_key: null, response: null,
+      navigate_text_key: null, navigate_target: null, is_read: 0,
+      created_at: '2025-01-01T00:00:00.000Z',
+    };
+    seedStore(useInAppNotificationStore, { notifications: [notification], unreadCount: 1, isLoading: false });
+    render(<InAppNotificationBell />);
+    const bell = screen.getAllByRole('button')[0];
+    await user.click(bell);
+    await screen.findByTitle('Mark all read');
+  });
+
+  it('FE-COMP-BELL-008: panel shows empty description when no notifications', async () => {
+    const { http, HttpResponse } = await import('msw');
+    const { server } = await import('../../../tests/helpers/msw/server');
+    server.use(
+      http.get('/api/notifications/in-app', () => HttpResponse.json({ notifications: [], total: 0, unread_count: 0 })),
+      http.get('/api/notifications/in-app/unread-count', () => HttpResponse.json({ count: 0 })),
+    );
+    const user = userEvent.setup();
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await screen.findByText("You're all caught up!");
+  });
+
+  it('FE-COMP-BELL-009: bell is accessible as a button', () => {
+    render(<InAppNotificationBell />);
+    const bell = screen.getAllByRole('button')[0];
+    expect(bell).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-010: unread count greater than 99 shows 99+', () => {
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 150, isLoading: false });
+    render(<InAppNotificationBell />);
+    // Should show "99+" not "150"
+    expect(screen.queryByText('150')).not.toBeInTheDocument();
+    expect(screen.getByText('99+')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-011: Delete all button shown when notifications exist', async () => {
+    const user = userEvent.setup();
+    seedStore(useInAppNotificationStore, { notifications: [buildNotification()], unreadCount: 1, isLoading: false });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    expect(screen.getByTitle('Delete all')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-012: Delete all button NOT shown when no notifications', async () => {
+    const user = userEvent.setup();
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false, fetchNotifications: vi.fn() });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await screen.findByText('Notifications');
+    expect(screen.queryByTitle('Delete all')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-013: Mark all read button NOT shown when unreadCount is 0', async () => {
+    const user = userEvent.setup();
+    seedStore(useInAppNotificationStore, { notifications: [buildNotification({ is_read: 1 })], unreadCount: 0, isLoading: false, fetchNotifications: vi.fn(), fetchUnreadCount: vi.fn() });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await screen.findByText('Notifications');
+    expect(screen.queryByTitle('Mark all read')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-014: clicking Mark all read calls store action', async () => {
+    const user = userEvent.setup();
+    const markAllRead = vi.fn();
+    seedStore(useInAppNotificationStore, { notifications: [buildNotification()], unreadCount: 1, isLoading: false, markAllRead });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await user.click(screen.getByTitle('Mark all read'));
+    expect(markAllRead).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-BELL-015: clicking Delete all calls store action', async () => {
+    const user = userEvent.setup();
+    const deleteAll = vi.fn();
+    seedStore(useInAppNotificationStore, { notifications: [buildNotification()], unreadCount: 1, isLoading: false, deleteAll });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await user.click(screen.getByTitle('Delete all'));
+    expect(deleteAll).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-BELL-016: Show all notifications navigates to /notifications', async () => {
+    const user = userEvent.setup();
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await screen.findByText('Notifications');
+    const showAllBtn = screen.getByText('Show all notifications');
+    await user.click(showAllBtn);
+    // Panel should close after clicking show all
+    expect(screen.queryByText('No notifications')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-017: loading spinner shown when isLoading=true and notifications empty', async () => {
+    const user = userEvent.setup();
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: true, fetchNotifications: vi.fn() });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    const spinner = document.querySelector('.animate-spin');
+    expect(spinner).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BELL-018: notification items rendered up to 10', async () => {
+    const user = userEvent.setup();
+    const notifications = Array.from({ length: 12 }, (_, i) => buildNotification({ id: i + 1 }));
+    seedStore(useInAppNotificationStore, { notifications, unreadCount: 12, isLoading: false });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await screen.findByText('Notifications');
+    // Each InAppNotificationItem renders with py-3 px-4 pattern; count rendered items
+    const items = document.querySelectorAll('.relative.px-4.py-3');
+    expect(items.length).toBeLessThanOrEqual(10);
+  });
+
+  it('FE-COMP-BELL-019: clicking outside the panel closes it', async () => {
+    const user = userEvent.setup();
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false });
+    render(<InAppNotificationBell />);
+    await user.click(screen.getAllByRole('button')[0]);
+    await screen.findByText('Notifications');
+    // The backdrop div is the fixed overlay — click it to close
+    const backdrop = document.querySelector('div[style*="position: fixed"][style*="inset: 0"]') as HTMLElement;
+    expect(backdrop).toBeInTheDocument();
+    await user.click(backdrop);
+    // Panel should be gone — "No notifications" text no longer visible
+    await waitFor(() => {
+      expect(screen.queryByText('No notifications')).not.toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-BELL-020: panel does not fetch again when already open and clicked again', async () => {
+    const user = userEvent.setup();
+    const fetchNotifications = vi.fn();
+    seedStore(useInAppNotificationStore, { notifications: [], unreadCount: 0, isLoading: false, fetchNotifications });
+    render(<InAppNotificationBell />);
+    const bell = screen.getAllByRole('button')[0];
+    // Open
+    await user.click(bell);
+    // Close
+    await user.click(bell);
+    // Re-open
+    await user.click(bell);
+    // fetchNotifications should be called once per open (2 total)
+    expect(fetchNotifications).toHaveBeenCalledTimes(2);
+  });
+});

client/src/components/Layout/InAppNotificationBell.tsx

@@ -96,7 +96,7 @@ export default function InAppNotificationBell(): React.ReactElement {
                 {t('notifications.title')}
                 {unreadCount > 0 && (
                   <span className="ml-2 px-1.5 py-0.5 rounded-full text-xs font-medium"
-                    style={{ background: '#6366f1', color: '#fff' }}>
+                    style={{ background: 'var(--text-primary)', color: 'var(--bg-primary)' }}>
                     {unreadCount}
                   </span>
                 )}
@@ -133,7 +133,7 @@ export default function InAppNotificationBell(): React.ReactElement {
             <div className="overflow-y-auto flex-1">
               {isLoading && notifications.length === 0 ? (
                 <div className="flex items-center justify-center py-10">
-                  <div className="w-5 h-5 border-2 border-slate-200 border-t-indigo-500 rounded-full animate-spin" />
+                  <div className="w-5 h-5 border-2 rounded-full animate-spin" style={{ borderColor: 'var(--border-primary)', borderTopColor: 'var(--text-primary)' }} />
                 </div>
               ) : notifications.length === 0 ? (
                 <div className="flex flex-col items-center justify-center py-10 px-4 text-center gap-2">
@@ -154,7 +154,7 @@ export default function InAppNotificationBell(): React.ReactElement {
               className="w-full py-2.5 text-xs font-medium transition-colors flex-shrink-0"
               style={{
                 borderTop: '1px solid var(--border-secondary)',
-                color: '#6366f1',
+                color: 'var(--text-primary)',
                 background: 'transparent',
               }}
               onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}

client/src/components/Layout/MobileTopHeader.test.tsx

@@ -0,0 +1,32 @@
+// FE-COMP-MOBILETOPHEADER-001 to FE-COMP-MOBILETOPHEADER-004
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import MobileTopHeader from './MobileTopHeader';
+
+describe('MobileTopHeader', () => {
+  it('FE-COMP-MOBILETOPHEADER-001: renders title as h1', () => {
+    render(<MobileTopHeader title="Journeys" />);
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading).toBeInTheDocument();
+    expect(heading.textContent).toBe('Journeys');
+  });
+
+  it('FE-COMP-MOBILETOPHEADER-002: renders subtitle when provided', () => {
+    render(<MobileTopHeader title="Journeys" subtitle="3 trips" />);
+    expect(screen.getByText('3 trips')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPHEADER-003: does not render subtitle when omitted', () => {
+    const { container } = render(<MobileTopHeader title="Journeys" />);
+    const subtitleEl = container.querySelector('.text-xs.text-zinc-500');
+    expect(subtitleEl).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPHEADER-004: renders action children when provided', () => {
+    render(
+      <MobileTopHeader title="Trips" actions={<button>Add</button>} />,
+    );
+    expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
+  });
+});

client/src/components/Layout/MobileTopHeader.tsx

@@ -0,0 +1,17 @@
+interface Props {
+  title: string
+  subtitle?: string
+  actions?: React.ReactNode
+}
+
+export default function MobileTopHeader({ title, subtitle, actions }: Props) {
+  return (
+    <div className="px-5 pt-4 pb-3 flex justify-between items-center bg-zinc-50 dark:bg-zinc-950 flex-shrink-0 md:hidden">
+      <div className="flex-1 min-w-0">
+        <h1 className="text-[28px] font-extrabold text-zinc-900 dark:text-white tracking-tight leading-none">{title}</h1>
+        {subtitle && <div className="text-xs text-zinc-500 mt-1">{subtitle}</div>}
+      </div>
+      {actions && <div className="flex gap-2 items-center flex-shrink-0">{actions}</div>}
+    </div>
+  )
+}

client/src/components/Layout/Navbar.test.tsx

@@ -0,0 +1,307 @@
+// FE-COMP-NAVBAR-001 to FE-COMP-NAVBAR-028
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../tests/helpers/msw/server';
+import { useAuthStore } from '../../store/authStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { useAddonStore } from '../../store/addonStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildSettings } from '../../../tests/helpers/factories';
+import Navbar from './Navbar';
+
+beforeEach(() => {
+  resetAllStores();
+  server.use(
+    http.get('/api/auth/app-config', () => HttpResponse.json({ version: '2.9.10' })),
+    http.get('/api/addons', () => HttpResponse.json({ addons: [] })),
+  );
+  seedStore(useAuthStore, { user: buildUser({ username: 'testuser', role: 'user' }), isAuthenticated: true, appVersion: '2.9.10' });
+  seedStore(useSettingsStore, { settings: buildSettings() });
+});
+
+describe('Navbar', () => {
+  it('FE-COMP-NAVBAR-001: renders without crashing', () => {
+    render(<Navbar />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-002: shows TREK logo/brand', () => {
+    render(<Navbar />);
+    // The Navbar shows the app icon — check for presence of the nav element
+    expect(document.querySelector('nav') || document.body).toBeTruthy();
+  });
+
+  it('FE-COMP-NAVBAR-003: shows username in user menu trigger', () => {
+    render(<Navbar />);
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-004: user menu opens on click', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    // Click the username to open dropdown
+    await user.click(screen.getByText('testuser'));
+    // Settings option appears
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-005: user menu shows Log out option', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    expect(screen.getByText('Log out')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-006: shows Settings link in user menu', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-007: shows My Trips link in navbar', () => {
+    render(<Navbar />);
+    // nav.myTrips = "My Trips" is in the main navbar (hidden on mobile via CSS, but CSS is not processed in tests)
+    // The link to /dashboard is present regardless
+    const dashboardLinks = document.querySelectorAll('a[href="/dashboard"]');
+    expect(dashboardLinks.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-NAVBAR-008: clicking Log out calls logout', async () => {
+    const user = userEvent.setup();
+    const logout = vi.fn();
+    seedStore(useAuthStore, { user: buildUser({ username: 'testuser' }), isAuthenticated: true, logout });
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    await user.click(screen.getByText('Log out'));
+    expect(logout).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-NAVBAR-009: admin user sees Admin option', async () => {
+    const user = userEvent.setup();
+    seedStore(useAuthStore, { user: buildUser({ username: 'admin', role: 'admin' }), isAuthenticated: true });
+    render(<Navbar />);
+    await user.click(screen.getByText('admin'));
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-010: regular user does not see Admin option', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    expect(screen.queryByText('Admin')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-011: shows tripTitle when provided', () => {
+    render(<Navbar tripTitle="Paris 2026" />);
+    expect(screen.getByText('Paris 2026')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-012: shows back button when showBack is true', () => {
+    render(<Navbar showBack={true} onBack={vi.fn()} />);
+    // Back button is a button element
+    const backBtns = screen.getAllByRole('button');
+    expect(backBtns.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-NAVBAR-013: clicking back button calls onBack', async () => {
+    const user = userEvent.setup();
+    const onBack = vi.fn();
+    render(<Navbar showBack={true} onBack={onBack} />);
+    // Find the back button (ArrowLeft icon)
+    const buttons = screen.getAllByRole('button');
+    // First button should be the back button
+    await user.click(buttons[0]);
+    expect(onBack).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-NAVBAR-014: notification bell is rendered when user is logged in', () => {
+    render(<Navbar />);
+    // InAppNotificationBell is rendered — check that body has some content
+    expect(document.body.children.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-NAVBAR-015: dark mode toggle is accessible in user menu', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    // Dark mode / Light mode / Auto mode options
+    const darkModeEls = screen.getAllByRole('button');
+    expect(darkModeEls.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-NAVBAR-016: app version shown in user menu', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    await waitFor(() => {
+      expect(screen.getByText('v2.9.10')).toBeInTheDocument();
+    });
+  });
+
+  it('FE-COMP-NAVBAR-017: Settings link navigates to /settings', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    const settingsLink = screen.getByRole('link', { name: /settings/i });
+    expect(settingsLink).toHaveAttribute('href', '/settings');
+  });
+
+  it('FE-COMP-NAVBAR-018: Admin link navigates to /admin for admin user', async () => {
+    const user = userEvent.setup();
+    seedStore(useAuthStore, { user: buildUser({ username: 'adminuser', role: 'admin' }), isAuthenticated: true });
+    render(<Navbar />);
+    await user.click(screen.getByText('adminuser'));
+    const adminLink = screen.getByRole('link', { name: /admin/i });
+    expect(adminLink).toHaveAttribute('href', '/admin');
+  });
+
+  it('FE-COMP-NAVBAR-019: share button rendered when onShare prop provided', () => {
+    render(<Navbar onShare={vi.fn()} />);
+    const shareBtn = screen.getByRole('button', { name: /share/i });
+    expect(shareBtn).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-020: share button click calls onShare', async () => {
+    const user = userEvent.setup();
+    const onShare = vi.fn();
+    render(<Navbar onShare={onShare} />);
+    const shareBtn = screen.getByRole('button', { name: /share/i });
+    await user.click(shareBtn);
+    expect(onShare).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-NAVBAR-021: share button NOT rendered when onShare prop omitted', () => {
+    render(<Navbar />);
+    expect(screen.queryByRole('button', { name: /share/i })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-022: dark mode toggle shows Moon when light, Sun when dark', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }) });
+    const { unmount } = render(<Navbar />);
+    // Moon icon button should be present (title = 'nav.darkMode' i.e. 'Dark mode')
+    expect(document.querySelector('[title]')).toBeTruthy();
+    unmount();
+
+    seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }) });
+    render(<Navbar />);
+    // Sun icon button should be present when dark mode is on
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-NAVBAR-023: dark mode toggle calls updateSetting', async () => {
+    const user = userEvent.setup();
+    const updateSetting = vi.fn().mockResolvedValue(undefined);
+    seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }), updateSetting });
+    render(<Navbar />);
+    // Find the dark mode toggle button by title attribute
+    const toggleBtn = document.querySelector('button[title]') as HTMLElement;
+    expect(toggleBtn).toBeTruthy();
+    await user.click(toggleBtn);
+    expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'dark');
+  });
+
+  it('FE-COMP-NAVBAR-024: global addon nav links appear when addons enabled', () => {
+    server.use(
+      http.get('/api/addons', () => HttpResponse.json({
+        addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
+      })),
+    );
+    seedStore(useAddonStore, {
+      addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
+    });
+    render(<Navbar />);
+    expect(screen.getByRole('link', { name: /vacay/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-025: global addon links hidden when in trip view (tripTitle set)', () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'vacay', name: 'Vacay', icon: 'CalendarDays', type: 'global', enabled: true }],
+    });
+    render(<Navbar tripTitle="Japan 2025" />);
+    expect(screen.queryByRole('link', { name: /vacay/i })).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-026: notification bell visible when tripId provided', () => {
+    render(<Navbar tripId="1" />);
+    // InAppNotificationBell renders a button — check it is present
+    const buttons = screen.getAllByRole('button');
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-NAVBAR-027: user avatar image shown when avatar_url set', () => {
+    seedStore(useAuthStore, {
+      user: buildUser({ username: 'testuser', avatar_url: 'https://example.com/av.jpg' }),
+      isAuthenticated: true,
+    });
+    render(<Navbar />);
+    const avatarImg = document.querySelector('img[src="https://example.com/av.jpg"]');
+    expect(avatarImg).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-028: user initial shown when no avatar_url', () => {
+    seedStore(useAuthStore, {
+      user: buildUser({ username: 'testuser', avatar_url: null }),
+      isAuthenticated: true,
+    });
+    render(<Navbar />);
+    // The initial is rendered as the first char uppercased in a div
+    expect(screen.getAllByText('T')[0]).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-029: clicking backdrop overlay closes user menu', async () => {
+    const user = userEvent.setup();
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+    // The backdrop overlay is a fixed-inset div rendered in the portal
+    const backdrop = document.querySelector('[style*="inset: 0"]') as HTMLElement;
+    if (backdrop) {
+      await user.click(backdrop);
+      expect(screen.queryByText('Settings')).not.toBeInTheDocument();
+    }
+  });
+
+  it('FE-COMP-NAVBAR-030: dark mode auto uses system preference', () => {
+    // 'auto' dark_mode relies on matchMedia — seed with auto and render
+    seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'auto' }) });
+    render(<Navbar />);
+    // Component should render without errors regardless of system preference
+    expect(document.querySelector('nav')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-031: dark mode toggle calls updateSetting with light when currently dark', async () => {
+    const user = userEvent.setup();
+    const updateSetting = vi.fn().mockResolvedValue(undefined);
+    seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: 'dark' }), updateSetting });
+    render(<Navbar />);
+    const toggleBtn = document.querySelector('button[title]') as HTMLElement;
+    expect(toggleBtn).toBeTruthy();
+    await user.click(toggleBtn);
+    expect(updateSetting).toHaveBeenCalledWith('dark_mode', 'light');
+  });
+
+  it('FE-COMP-NAVBAR-032: user email shown in open user menu', async () => {
+    const user = userEvent.setup();
+    seedStore(useAuthStore, {
+      user: buildUser({ username: 'testuser', email: 'testuser@example.com' }),
+      isAuthenticated: true,
+    });
+    render(<Navbar />);
+    await user.click(screen.getByText('testuser'));
+    expect(screen.getByText('testuser@example.com')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NAVBAR-033: administrator badge shown for admin user in open menu', async () => {
+    const user = userEvent.setup();
+    seedStore(useAuthStore, {
+      user: buildUser({ username: 'adminuser', role: 'admin' }),
+      isAuthenticated: true,
+    });
+    render(<Navbar />);
+    await user.click(screen.getByText('adminuser'));
+    expect(screen.getByText('Administrator')).toBeInTheDocument();
+  });
+});

client/src/components/Layout/Navbar.tsx

@@ -5,11 +5,11 @@ import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe } from 'lucide-react'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import InAppNotificationBell from './InAppNotificationBell.tsx'
 
-const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe }
+const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe, Compass }
 
 interface NavbarProps {
   tripTitle?: string
@@ -27,14 +27,13 @@ interface Addon {
 }
 
 export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }: NavbarProps): React.ReactElement {
-  const { user, logout } = useAuthStore()
+  const { user, logout, isPrerelease, appVersion } = useAuthStore()
   const { settings, updateSetting } = useSettingsStore()
   const { addons: allAddons, loadAddons } = useAddonStore()
   const { t, locale } = useTranslation()
   const navigate = useNavigate()
   const location = useLocation()
   const [userMenuOpen, setUserMenuOpen] = useState<boolean>(false)
-  const [appVersion, setAppVersion] = useState<string | null>(null)
   const darkMode = settings.dark_mode
   const dark = darkMode === true || darkMode === 'dark' || (darkMode === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches)
 
@@ -45,15 +44,9 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
     if (user) loadAddons()
   }, [user, location.pathname])
 
-  useEffect(() => {
-    import('../../api/client').then(({ authApi }) => {
-      authApi.getAppConfig?.().then(c => setAppVersion(c?.version)).catch(() => {})
-    })
-  }, [])
-
   const handleLogout = () => {
     logout()
-    navigate('/login')
+    navigate('/login', { state: { noRedirect: true } })
   }
 
   const toggleDarkMode = () => {
@@ -75,7 +68,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
       touchAction: 'manipulation',
       paddingTop: 'env(safe-area-inset-top, 0px)',
       height: 'var(--nav-h)',
-    }} className="flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
+    }} className="hidden md:flex items-center px-4 gap-4 fixed top-0 left-0 right-0 z-[200]">
       {/* Left side */}
       <div className="flex items-center gap-3 min-w-0">
         {showBack && (
@@ -133,7 +126,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         {tripTitle && (
           <>
             <span className="hidden sm:inline" style={{ color: 'var(--text-faint)' }}>/</span>
-            <span className="text-sm font-medium truncate max-w-48" style={{ color: 'var(--text-muted)' }}>
+            <span className="hidden sm:inline text-sm font-medium truncate max-w-48" style={{ color: 'var(--text-muted)' }}>
               {tripTitle}
             </span>
           </>
@@ -155,17 +148,29 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         </button>
       )}
 
-      {/* Dark mode toggle (light ↔ dark, overrides auto) */}
+      {/* Prerelease badge */}
+      {isPrerelease && appVersion && (
+        <span
+          className="hidden sm:flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-semibold flex-shrink-0"
+          style={{ background: 'rgba(245,158,11,0.15)', color: '#d97706', border: '1px solid rgba(245,158,11,0.3)' }}
+        >
+          <span className="w-1.5 h-1.5 rounded-full flex-shrink-0" style={{ background: '#f59e0b' }} />
+          {appVersion}
+        </span>
+      )}
+
+      {/* Dark mode toggle (light ↔ dark, overrides auto) — hidden on mobile */}
       <button onClick={toggleDarkMode} title={dark ? t('nav.lightMode') : t('nav.darkMode')}
-        className="p-2 rounded-lg transition-colors flex-shrink-0"
+        className="p-2 rounded-lg transition-colors flex-shrink-0 hidden sm:flex"
         style={{ color: 'var(--text-muted)' }}
         onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-hover)'}
         onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
         {dark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
       </button>
 
-      {/* Notification bell */}
-      {user && <InAppNotificationBell />}
+      {/* Notification bell — only in trip view on mobile, everywhere on desktop */}
+      {user && tripId && <InAppNotificationBell />}
+      {user && !tripId && <span className="hidden sm:block"><InAppNotificationBell /></span>}
 
       {/* User menu */}
       {user && (
@@ -237,7 +242,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
                           <img src={dark ? '/text-light.svg' : '/text-dark.svg'} alt="TREK" style={{ height: 10, opacity: 0.5 }} />
                           <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)' }}>v{appVersion}</span>
                         </div>
-                        <a href="https://discord.gg/nSdKaXgN" target="_blank" rel="noopener noreferrer"
+                        <a href="https://discord.gg/NhZBDSd4qW" target="_blank" rel="noopener noreferrer"
                           style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 24, height: 24, borderRadius: 99, background: 'var(--bg-tertiary)', transition: 'background 0.15s' }}
                           onMouseEnter={e => e.currentTarget.style.background = '#5865F220'}
                           onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-tertiary)'}

client/src/components/Layout/OfflineBanner.tsx

@@ -0,0 +1,86 @@
+/**
+ * OfflineBanner — persistent top bar indicating connectivity + sync state.
+ *
+ * States:
+ *   offline + N queued  →  amber bar "Offline — N changes queued"
+ *   offline + 0 queued  →  amber bar "Offline"
+ *   online  + N pending →  blue bar  "Syncing N changes…"
+ *   online  + 0 pending →  hidden
+ */
+import React, { useState, useEffect } from 'react'
+import { WifiOff, RefreshCw } from 'lucide-react'
+import { mutationQueue } from '../../sync/mutationQueue'
+
+const POLL_MS = 3_000
+
+export default function OfflineBanner(): React.ReactElement | null {
+  const [isOnline, setIsOnline] = useState(navigator.onLine)
+  const [pendingCount, setPendingCount] = useState(0)
+
+  useEffect(() => {
+    const onOnline  = () => setIsOnline(true)
+    const onOffline = () => setIsOnline(false)
+    window.addEventListener('online',  onOnline)
+    window.addEventListener('offline', onOffline)
+    return () => {
+      window.removeEventListener('online',  onOnline)
+      window.removeEventListener('offline', onOffline)
+    }
+  }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    async function poll() {
+      const n = await mutationQueue.pendingCount()
+      if (!cancelled) setPendingCount(n)
+    }
+    poll()
+    const id = setInterval(poll, POLL_MS)
+    return () => { cancelled = true; clearInterval(id) }
+  }, [])
+
+  const hidden = isOnline && pendingCount === 0
+  if (hidden) return null
+
+  const offline = !isOnline
+  const bg    = offline ? '#92400e' : '#1e40af'
+  const text  = '#fff'
+
+  const label = offline
+    ? pendingCount > 0
+      ? `Offline — ${pendingCount} change${pendingCount !== 1 ? 's' : ''} queued`
+      : 'Offline'
+    : `Syncing ${pendingCount} change${pendingCount !== 1 ? 's' : ''}…`
+
+  return (
+    <div
+      role="status"
+      aria-live="polite"
+      style={{
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        background: bg,
+        color: text,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+        paddingTop: 'calc(env(safe-area-inset-top, 0px) + 6px)',
+        paddingBottom: '6px',
+        paddingLeft: '16px',
+        paddingRight: '16px',
+        fontSize: 13,
+        fontWeight: 500,
+      }}
+    >
+      {offline
+        ? <WifiOff size={14} />
+        : <RefreshCw size={14} style={{ animation: 'spin 1s linear infinite' }} />
+      }
+      {label}
+    </div>
+  )
+}

client/src/components/Map/MapView.test.tsx

@@ -0,0 +1,208 @@
+import React from 'react'
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import { render, screen } from '../../../tests/helpers/render'
+import { fireEvent } from '@testing-library/react'
+import { resetAllStores } from '../../../tests/helpers/store'
+import { buildPlace } from '../../../tests/helpers/factories'
+import * as photoService from '../../services/photoService'
+
+vi.mock('react-leaflet', () => ({
+  MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
+  TileLayer: () => <div data-testid="tile-layer" />,
+  Marker: ({ children, eventHandlers, position }: any) => (
+    <div
+      data-testid="marker"
+      data-lat={position[0]}
+      data-lng={position[1]}
+      onClick={() => eventHandlers?.click?.()}
+    >
+      {children}
+    </div>
+  ),
+  Tooltip: ({ children }: any) => <div data-testid="tooltip">{children}</div>,
+  Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
+  CircleMarker: () => <div data-testid="circle-marker" />,
+  Circle: () => <div data-testid="circle" />,
+  useMap: () => ({
+    panTo: vi.fn(),
+    setView: vi.fn(),
+    fitBounds: vi.fn(),
+    getZoom: () => 10,
+    on: vi.fn(),
+    off: vi.fn(),
+    panBy: vi.fn(),
+  }),
+}))
+
+vi.mock('react-leaflet-cluster', () => ({
+  default: ({ children }: any) => <div data-testid="cluster-group">{children}</div>,
+}))
+
+vi.mock('leaflet', () => ({
+  default: {
+    divIcon: vi.fn(() => ({})),
+    Icon: { Default: { prototype: {}, mergeOptions: vi.fn() } },
+    latLngBounds: vi.fn(() => ({ isValid: () => true })),
+    point: vi.fn((x: number, y: number) => [x, y]),
+  },
+  divIcon: vi.fn(() => ({})),
+  Icon: { Default: { prototype: {}, mergeOptions: vi.fn() } },
+  latLngBounds: vi.fn(() => ({ isValid: () => true })),
+  point: vi.fn((x: number, y: number) => [x, y]),
+}))
+
+vi.mock('../../services/photoService', () => ({
+  getCached: vi.fn(() => null),
+  isLoading: vi.fn(() => false),
+  fetchPhoto: vi.fn(),
+  onThumbReady: vi.fn(() => () => {}),
+  getAllThumbs: vi.fn(() => ({})),
+}))
+
+import { MapView } from './MapView'
+
+// Helper: build a place with the extra fields MapView uses (category_name/color/icon)
+// that exist on joined DB rows but are not in the base Place TypeScript type.
+function buildMapPlace(overrides: Record<string, any> = {}) {
+  return {
+    ...buildPlace(),
+    category_name: null,
+    category_color: null,
+    category_icon: null,
+    ...overrides,
+  } as any
+}
+
+afterEach(() => {
+  resetAllStores()
+})
+
+describe('MapView', () => {
+  it('FE-COMP-MAPVIEW-001: renders map container', () => {
+    render(<MapView />)
+    expect(screen.getByTestId('map-container')).toBeTruthy()
+  })
+
+  it('FE-COMP-MAPVIEW-002: renders one marker per place', () => {
+    const places = [
+      buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 }),
+      buildMapPlace({ id: 2, name: 'Louvre', lat: 48.86, lng: 2.337 }),
+    ]
+    render(<MapView places={places} />)
+    expect(screen.getAllByTestId('marker').length).toBe(2)
+  })
+
+  it('FE-COMP-MAPVIEW-003: marker click calls onMarkerClick with place id', () => {
+    const onMarkerClick = vi.fn()
+    const places = [buildMapPlace({ id: 42, lat: 48.8584, lng: 2.2945 })]
+    render(<MapView places={places} onMarkerClick={onMarkerClick} />)
+    fireEvent.click(screen.getByTestId('marker'))
+    expect(onMarkerClick).toHaveBeenCalledWith(42)
+  })
+
+  it('FE-COMP-MAPVIEW-004: tooltip shows place name', () => {
+    const places = [buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 })]
+    render(<MapView places={places} />)
+    expect(screen.getByTestId('tooltip').textContent).toContain('Eiffel Tower')
+  })
+
+  it('FE-COMP-MAPVIEW-005: tooltip shows category name when present', () => {
+    const places = [
+      buildMapPlace({ name: 'Louvre', lat: 48.86, lng: 2.337, category_name: 'Museum', category_icon: null }),
+    ]
+    render(<MapView places={places} />)
+    expect(screen.getByTestId('tooltip').textContent).toContain('Museum')
+  })
+
+  it('FE-COMP-MAPVIEW-006: renders polyline when route has 2+ points', () => {
+    render(<MapView route={[[48.0, 2.0], [49.0, 3.0]]} />)
+    expect(screen.getByTestId('polyline')).toBeTruthy()
+  })
+
+  it('FE-COMP-MAPVIEW-007: does not render polyline when route is null', () => {
+    render(<MapView route={null} />)
+    expect(screen.queryByTestId('polyline')).toBeNull()
+  })
+
+  it('FE-COMP-MAPVIEW-008: does not render polyline for single-point route', () => {
+    render(<MapView route={[[48.0, 2.0]]} />)
+    expect(screen.queryByTestId('polyline')).toBeNull()
+  })
+
+  it('FE-COMP-MAPVIEW-009: GPX geometry polyline rendered for place with route_geometry', () => {
+    const places = [
+      buildMapPlace({ lat: 48.0, lng: 2.0, route_geometry: '[[48.0,2.0],[49.0,3.0]]' }),
+    ]
+    render(<MapView places={places} />)
+    expect(screen.getByTestId('polyline')).toBeTruthy()
+  })
+
+  it('FE-COMP-MAPVIEW-010: MarkerClusterGroup is rendered', () => {
+    const places = [buildMapPlace({ lat: 48.8584, lng: 2.2945 })]
+    render(<MapView places={places} />)
+    expect(screen.getByTestId('cluster-group')).toBeTruthy()
+  })
+
+  it('FE-COMP-MAPVIEW-011: renders RouteLabel marker when routeSegments provided with route', () => {
+    const route = [[48.0, 2.0], [49.0, 3.0]] as [number, number][]
+    const routeSegments = [
+      { mid: [48.5, 2.5] as [number, number], from: 0, to: 1, walkingText: '10 min', drivingText: '3 min' },
+    ]
+    render(<MapView route={route} routeSegments={routeSegments} />)
+    // Route polyline is rendered
+    expect(screen.getByTestId('polyline')).toBeTruthy()
+    // RouteLabel renders a Marker (mocked), but it returns null when zoom < 12
+    // so we just assert the polyline is there, exercising the routeSegments.map path
+  })
+
+  it('FE-COMP-MAPVIEW-012: invalid route_geometry JSON triggers catch and skips polyline', () => {
+    const places = [
+      buildMapPlace({ lat: 48.0, lng: 2.0, route_geometry: 'NOT_VALID_JSON' }),
+    ]
+    // Should not throw; invalid JSON is caught silently
+    render(<MapView places={places} />)
+    expect(screen.queryByTestId('polyline')).toBeNull()
+  })
+
+  it('FE-COMP-MAPVIEW-013: route_geometry with fewer than 2 coords skips polyline', () => {
+    const places = [
+      buildMapPlace({ lat: 48.0, lng: 2.0, route_geometry: '[[48.0,2.0]]' }),
+    ]
+    render(<MapView places={places} />)
+    expect(screen.queryByTestId('polyline')).toBeNull()
+  })
+
+  it('FE-COMP-MAPVIEW-014: marker icon uses base64 image_url for photo places', () => {
+    const dataUrl = 'data:image/jpeg;base64,/9j/4AA'
+    const places = [buildMapPlace({ id: 10, lat: 48.0, lng: 2.0, image_url: dataUrl })]
+    render(<MapView places={places} />)
+    // Marker still renders; base64 path in createPlaceIcon should be exercised
+    expect(screen.getByTestId('marker')).toBeTruthy()
+  })
+
+  it('FE-COMP-MAPVIEW-015: uses cached photo thumb from photoService when available', () => {
+    vi.mocked(photoService.getCached).mockReturnValue({ thumbDataUrl: 'data:image/jpeg;base64,abc' } as any)
+    const places = [
+      buildMapPlace({ id: 20, lat: 48.0, lng: 2.0, google_place_id: 'gplace_123' }),
+    ]
+    render(<MapView places={places} />)
+    expect(screen.getByTestId('marker')).toBeTruthy()
+    vi.mocked(photoService.getCached).mockReturnValue(null)
+  })
+
+  it('FE-COMP-MAPVIEW-016: tooltip shows address when present', () => {
+    const places = [
+      buildMapPlace({ name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945, address: '5 Av. Anatole France' }),
+    ]
+    render(<MapView places={places} />)
+    expect(screen.getByTestId('tooltip').textContent).toContain('5 Av. Anatole France')
+  })
+
+  it('FE-COMP-MAPVIEW-017: renders selected marker with higher z-index offset', () => {
+    const places = [
+      buildMapPlace({ id: 5, lat: 48.8584, lng: 2.2945 }),
+    ]
+    render(<MapView places={places} selectedPlaceId={5} />)
+    expect(screen.getByTestId('marker')).toBeTruthy()
+  })
+})

client/src/components/Map/MapView.tsx

@@ -161,12 +161,13 @@ function MapController({ center, zoom }: MapControllerProps) {
 
 // Fit bounds when places change (fitKey triggers re-fit)
 interface BoundsControllerProps {
+  hasDayDetail?: boolean
   places: Place[]
   fitKey: number
   paddingOpts: Record<string, number>
 }
 
-function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps) {
+function BoundsController({ places, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
   const map = useMap()
   const prevFitKey = useRef(-1)
 
@@ -176,9 +177,14 @@ function BoundsController({ places, fitKey, paddingOpts }: BoundsControllerProps
     if (places.length === 0) return
     try {
       const bounds = L.latLngBounds(places.map(p => [p.lat, p.lng]))
-      if (bounds.isValid()) map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+      if (bounds.isValid()) {
+        map.fitBounds(bounds, { ...paddingOpts, maxZoom: 16, animate: true })
+        if (hasDayDetail) {
+          setTimeout(() => map.panBy([0, 150], { animate: true }), 300)
+        }
+      }
     } catch {}
-  }, [fitKey, places, paddingOpts, map])
+  }, [fitKey, places, paddingOpts, map, hasDayDetail])
 
   return null
 }
@@ -377,17 +383,18 @@ export const MapView = memo(function MapView({
   leftWidth = 0,
   rightWidth = 0,
   hasInspector = false,
+  hasDayDetail = false,
 }) {
-  // Dynamic padding: account for sidebars + bottom inspector
+  // Dynamic padding: account for sidebars + bottom inspector + day detail panel
   const paddingOpts = useMemo(() => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
     if (isMobile) return { padding: [40, 20] }
     const top = 60
-    const bottom = hasInspector ? 320 : 60
+    const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
     const left = leftWidth + 40
     const right = rightWidth + 40
     return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
-  }, [leftWidth, rightWidth, hasInspector])
+  }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
   // photoUrls: only base64 thumbs for smooth map zoom
   const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
@@ -509,7 +516,7 @@ export const MapView = memo(function MapView({
       />
 
       <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />

client/src/components/Map/RouteCalculator.test.ts

@@ -0,0 +1,187 @@
+import { describe, it, expect } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../../tests/helpers/msw/server'
+import {
+  calculateRoute,
+  calculateSegments,
+  optimizeRoute,
+  generateGoogleMapsUrl,
+} from './RouteCalculator'
+
+const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
+
+const buildOsrmRouteResponse = (distance = 5000, duration = 360) => ({
+  code: 'Ok',
+  routes: [
+    {
+      geometry: { coordinates: [[2.3522, 48.8566], [2.3600, 48.8600]] },
+      distance,
+      duration,
+      legs: [{ distance, duration }],
+    },
+  ],
+})
+
+const wp1 = { lat: 48.8566, lng: 2.3522 }
+const wp2 = { lat: 48.8600, lng: 2.3600 }
+
+// ── calculateRoute ─────────────────────────────────────────────────────────────
+
+describe('calculateRoute', () => {
+  it('FE-COMP-ROUTECALCULATOR-001: throws when fewer than 2 waypoints', async () => {
+    await expect(calculateRoute([wp1])).rejects.toThrow('At least 2 waypoints required')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-002: returns parsed coordinates on success', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json(buildOsrmRouteResponse())
+      )
+    )
+    const result = await calculateRoute([wp1, wp2])
+    expect(result.coordinates).toEqual([[48.8566, 2.3522], [48.8600, 2.3600]])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-003: returns formatted distance text for >= 1000 m', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json(buildOsrmRouteResponse(1500, 360))
+      )
+    )
+    const result = await calculateRoute([wp1, wp2])
+    expect(result.distanceText).toBe('1.5 km')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-004: returns formatted distance in meters for short routes', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json(buildOsrmRouteResponse(800, 360))
+      )
+    )
+    const result = await calculateRoute([wp1, wp2])
+    expect(result.distanceText).toBe('800 m')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-005: walking profile overrides duration with distance-based calculation', async () => {
+    const distance = 5000
+    const osrmDuration = 999
+    server.use(
+      http.get(`${OSRM_BASE}/walking/:coords`, () =>
+        HttpResponse.json(buildOsrmRouteResponse(distance, osrmDuration))
+      )
+    )
+    const result = await calculateRoute([wp1, wp2], 'walking')
+    const expectedDuration = distance / (5000 / 3600)
+    expect(result.duration).toBeCloseTo(expectedDuration)
+    expect(result.duration).not.toBe(osrmDuration)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-006: throws when OSRM returns non-ok HTTP status', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json({}, { status: 500 })
+      )
+    )
+    await expect(calculateRoute([wp1, wp2])).rejects.toThrow('Route could not be calculated')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-007: throws when OSRM code is not Ok', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json({ code: 'NoRoute', routes: [] })
+      )
+    )
+    await expect(calculateRoute([wp1, wp2])).rejects.toThrow('No route found')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-008: respects AbortSignal', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json(buildOsrmRouteResponse())
+      )
+    )
+    const controller = new AbortController()
+    controller.abort()
+    await expect(calculateRoute([wp1, wp2], 'driving', { signal: controller.signal })).rejects.toThrow()
+  })
+})
+
+// ── calculateSegments ──────────────────────────────────────────────────────────
+
+describe('calculateSegments', () => {
+  it('FE-COMP-ROUTECALCULATOR-009: returns empty array for fewer than 2 waypoints', async () => {
+    const result = await calculateSegments([wp1])
+    expect(result).toEqual([])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-010: returns segment midpoints and travel times', async () => {
+    server.use(
+      http.get(`${OSRM_BASE}/driving/:coords`, () =>
+        HttpResponse.json({
+          code: 'Ok',
+          routes: [
+            {
+              legs: [{ distance: 1000, duration: 120 }],
+            },
+          ],
+        })
+      )
+    )
+    const result = await calculateSegments([wp1, wp2])
+    expect(result).toHaveLength(1)
+    const seg = result[0]
+    const expectedMid: [number, number] = [
+      (wp1.lat + wp2.lat) / 2,
+      (wp1.lng + wp2.lng) / 2,
+    ]
+    expect(seg.mid[0]).toBeCloseTo(expectedMid[0])
+    expect(seg.mid[1]).toBeCloseTo(expectedMid[1])
+    expect(seg.drivingText).toBe('2 min')
+  })
+})
+
+// ── optimizeRoute ──────────────────────────────────────────────────────────────
+
+describe('optimizeRoute', () => {
+  it('FE-COMP-ROUTECALCULATOR-011: returns input unchanged for 2 or fewer places', () => {
+    const places = [wp1, wp2]
+    const result = optimizeRoute(places)
+    expect(result).toHaveLength(2)
+    expect(result).toBe(places)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-012: nearest-neighbor reorders 3 waypoints correctly', () => {
+    // Note: filter uses `p.lat && p.lng`, so avoid zero values
+    const a = { lat: 1, lng: 1 }
+    const b = { lat: 10, lng: 1 }
+    const c = { lat: 2, lng: 1 }
+    const result = optimizeRoute([a, b, c])
+    // Starting from a(1,1), nearest is c(2,1) (dist=1), then b(10,1) (dist=8)
+    expect(result[0]).toEqual(a)
+    expect(result[1]).toEqual(c)
+    expect(result[2]).toEqual(b)
+  })
+})
+
+// ── generateGoogleMapsUrl ──────────────────────────────────────────────────────
+
+describe('generateGoogleMapsUrl', () => {
+  it('FE-COMP-ROUTECALCULATOR-013: returns null for empty places', () => {
+    expect(generateGoogleMapsUrl([])).toBeNull()
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-014: single place returns search URL', () => {
+    const result = generateGoogleMapsUrl([{ lat: 48.85, lng: 2.35 }])
+    expect(result).toBe('https://www.google.com/maps/search/?api=1&query=48.85,2.35')
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-015: multiple places returns directions URL', () => {
+    const result = generateGoogleMapsUrl([
+      { lat: 48.85, lng: 2.35 },
+      { lat: 48.86, lng: 2.36 },
+    ])
+    expect(result).toMatch(/^https:\/\/www\.google\.com\/maps\/dir\//)
+    expect(result).toContain('48.85,2.35')
+    expect(result).toContain('48.86,2.36')
+  })
+})

client/src/components/Memories/MemoriesPanel.test.tsx

@@ -0,0 +1,789 @@
+// FE-COMP-MEMORIESPANEL-001 to FE-COMP-MEMORIESPANEL-027
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { render } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { server } from '../../../tests/helpers/msw/server';
+import { http, HttpResponse } from 'msw';
+import { useAuthStore } from '../../store/authStore';
+import { buildUser } from '../../../tests/helpers/factories';
+import MemoriesPanel from './MemoriesPanel';
+
+// Mock fetchImageAsBlob to avoid real HTTP calls for thumbnail/image rendering
+vi.mock('../../api/authUrl', () => ({
+  fetchImageAsBlob: vi.fn().mockResolvedValue('blob:mock-url'),
+  clearImageQueue: vi.fn(),
+}));
+
+const defaultProps = {
+  tripId: 1,
+  startDate: '2025-03-01',
+  endDate: '2025-03-10',
+};
+
+// Reusable provider object to configure a connected Immich instance
+const immichAddon = {
+  id: 'immich',
+  name: 'Immich',
+  type: 'photo_provider',
+  enabled: true,
+  config: { status_get: '/integrations/memories/immich/status' },
+};
+
+// Handlers that simulate a connected provider with no photos/links
+const connectedHandlers = [
+  http.get('/api/addons', () =>
+    HttpResponse.json({ addons: [immichAddon] })
+  ),
+  http.get('/api/integrations/memories/immich/status', () =>
+    HttpResponse.json({ connected: true })
+  ),
+  http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+    HttpResponse.json({ photos: [] })
+  ),
+  http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+    HttpResponse.json({ links: [] })
+  ),
+];
+
+beforeEach(() => {
+  resetAllStores();
+  // Seed a default logged-in user
+  seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'me' }) });
+});
+
+describe('MemoriesPanel', () => {
+  it('FE-COMP-MEMORIESPANEL-001: Shows loading state on initial render', () => {
+    // Use a delayed response so loading stays true long enough to assert
+    server.use(
+      http.get('/api/addons', async () => {
+        await new Promise(resolve => setTimeout(resolve, 200));
+        return HttpResponse.json({ addons: [] });
+      }),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({ photos: [] })
+      ),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({ links: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Spinner is rendered synchronously — loading state starts as true
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-002: Shows not-connected state when no photo providers are enabled', async () => {
+    server.use(
+      http.get('/api/addons', () => HttpResponse.json({ addons: [] })),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({ photos: [] })
+      ),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({ links: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // "Photo provider not connected" — no providers, falls back to generic label
+    await screen.findByText('Photo provider not connected');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-003: Displays trip photos from other users', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            {
+              asset_id: 'abc',
+              provider: 'immich',
+              user_id: 2,
+              username: 'Alice',
+              shared: 1,
+              added_at: '2025-03-05T10:00:00Z',
+            },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Alice's username is rendered as an avatar tooltip in the gallery
+    await screen.findByText('Alice');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-004: Shows empty gallery state when connected but no photos', async () => {
+    server.use(...connectedHandlers);
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Provider is connected so the gallery renders — but no photos → empty state
+    await screen.findByText('No photos found');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-005: Album links are displayed in the gallery header', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('album-links')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({
+          links: [
+            {
+              id: 1,
+              provider: 'immich',
+              album_id: 'a1',
+              album_name: 'Holidays',
+              user_id: 1,
+              username: 'me',
+              sync_enabled: 1,
+              last_synced_at: null,
+            },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    await screen.findByText('Holidays');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-006: Sync button calls the sync endpoint', async () => {
+    let syncCalled = false;
+
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('album-links')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({
+          links: [
+            {
+              id: 1,
+              provider: 'immich',
+              album_id: 'a1',
+              album_name: 'Holidays',
+              user_id: 1,
+              username: 'me',
+              sync_enabled: 1,
+              last_synced_at: null,
+            },
+          ],
+        })
+      ),
+      http.post('/api/integrations/memories/:provider/trips/:tripId/album-links/:linkId/sync', () => {
+        syncCalled = true;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    await screen.findByText('Holidays');
+
+    const syncBtn = screen.getByTitle('Sync album');
+    await userEvent.click(syncBtn);
+
+    await waitFor(() => expect(syncCalled).toBe(true));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-007: Unlink button calls the delete endpoint', async () => {
+    let deleteCalled = false;
+
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('album-links')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({
+          links: [
+            {
+              id: 1,
+              provider: 'immich',
+              album_id: 'a1',
+              album_name: 'Holidays',
+              user_id: 1,
+              username: 'me',
+              sync_enabled: 1,
+              last_synced_at: null,
+            },
+          ],
+        })
+      ),
+      http.delete('/api/integrations/memories/unified/trips/:tripId/album-links/:linkId', () => {
+        deleteCalled = true;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    await screen.findByText('Holidays');
+
+    // The unlink button is only shown when link.user_id === currentUser.id
+    const unlinkBtn = screen.getByTitle('Unlink album');
+    await userEvent.click(unlinkBtn);
+
+    await waitFor(() => expect(deleteCalled).toBe(true));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-008: Sort toggle switches between oldest-first and newest-first', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            { photo_id: 1, asset_id: 'photo1', provider: 'immich', user_id: 1, username: 'me', shared: 1, added_at: '2025-03-01T10:00:00Z' },
+            { photo_id: 2, asset_id: 'photo2', provider: 'immich', user_id: 1, username: 'me', shared: 1, added_at: '2025-03-10T10:00:00Z' },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Default sort is ascending ("Oldest first")
+    const sortBtn = await screen.findByText('Oldest first');
+
+    await userEvent.click(sortBtn);
+
+    // After toggle, button label switches to "Newest first"
+    expect(screen.getByText('Newest first')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-009: Photo picker opens when "Add photos" is clicked', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.post('/api/integrations/memories/immich/search', () =>
+        HttpResponse.json({ assets: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Wait for the empty gallery to load
+    await screen.findByText('No photos found');
+
+    // Both the header button and gallery CTA say "Add photos" — click the first
+    const addBtns = screen.getAllByText('Add photos');
+    await userEvent.click(addBtns[0]);
+
+    // Picker header is now visible
+    await screen.findByText('Select photos from Immich');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-010: Picker cancel button closes the picker', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.post('/api/integrations/memories/immich/search', () =>
+        HttpResponse.json({ assets: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    await screen.findByText('No photos found');
+
+    const addBtns = screen.getAllByText('Add photos');
+    await userEvent.click(addBtns[0]);
+    await screen.findByText('Select photos from Immich');
+
+    // Click Cancel in the picker header
+    await userEvent.click(screen.getByText('Cancel'));
+
+    // Gallery is restored
+    await screen.findByText('No photos found');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-011: Album picker opens when "Link Album" is clicked', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.get('/api/integrations/memories/immich/albums', () =>
+        HttpResponse.json({ albums: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    await screen.findByText('No photos found');
+
+    await userEvent.click(screen.getByText('Link Album'));
+
+    // Album picker header appears
+    await screen.findByText('Select Immich Album');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-012: Own photos render with share-toggle and private indicator', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            {
+              asset_id: 'photo1',
+              provider: 'immich',
+              user_id: 1,
+              username: 'me',
+              shared: 0,
+              added_at: '2025-03-05T10:00:00Z',
+            },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Share-toggle button appears with correct title (not shared → "Share photos")
+    await screen.findByTitle('Share photos');
+
+    // "Private" label is shown on unshared own photos
+    expect(screen.getByText('Private')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-013: toggleSharing calls the PUT sharing endpoint', async () => {
+    let putCalled = false;
+
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            {
+              asset_id: 'photo1',
+              provider: 'immich',
+              user_id: 1,
+              username: 'me',
+              shared: 0,
+              added_at: '2025-03-05T10:00:00Z',
+            },
+          ],
+        })
+      ),
+      http.put('/api/integrations/memories/unified/trips/:tripId/photos/sharing', () => {
+        putCalled = true;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    const shareBtn = await screen.findByTitle('Share photos');
+    await userEvent.click(shareBtn);
+
+    await waitFor(() => expect(putCalled).toBe(true));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-014: removePhoto calls the DELETE photos endpoint', async () => {
+    let deleteCalled = false;
+
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            {
+              asset_id: 'photo1',
+              provider: 'immich',
+              user_id: 1,
+              username: 'me',
+              shared: 1,
+              added_at: '2025-03-05T10:00:00Z',
+            },
+          ],
+        })
+      ),
+      http.delete('/api/integrations/memories/unified/trips/:tripId/photos', () => {
+        deleteCalled = true;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Wait for the share/stop-sharing button to confirm the gallery has rendered
+    await screen.findByTitle('Stop sharing');
+
+    // The remove button is the second action button in the hover overlay — no title, just an X icon
+    // Get all buttons and click the one after the share toggle
+    const allBtns = screen.getAllByRole('button');
+    const shareIdx = allBtns.findIndex(b => b.getAttribute('title') === 'Stop sharing');
+    // The remove button immediately follows the share button in the DOM
+    await userEvent.click(allBtns[shareIdx + 1]);
+
+    await waitFor(() => expect(deleteCalled).toBe(true));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-015: Picker displays assets grouped by month', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.post('/api/integrations/memories/immich/search', () =>
+        HttpResponse.json({
+          assets: [
+            { id: 'asset1', takenAt: '2025-03-05T10:00:00Z', city: 'Paris', country: 'France' },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    const [firstAddBtn] = screen.getAllByText('Add photos');
+    await userEvent.click(firstAddBtn);
+
+    await screen.findByText('Select photos from Immich');
+
+    // Month group header appears after photos load
+    await screen.findByText(/March.*2025|2025.*March/);
+  });
+
+  it('FE-COMP-MEMORIESPANEL-016: Album picker lists available albums with asset count', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.get('/api/integrations/memories/immich/albums', () =>
+        HttpResponse.json({
+          albums: [
+            { id: 'album1', albumName: 'Summer 2025', assetCount: 42 },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    await userEvent.click(screen.getByText('Link Album'));
+
+    await screen.findByText('Summer 2025');
+    // Asset count is rendered next to the album name
+    expect(screen.getByText(/42/)).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-017: ProviderTabs appear in picker when multiple providers are connected', async () => {
+    const immich2Addon = {
+      id: 'immich2',
+      name: 'Immich2',
+      type: 'photo_provider',
+      enabled: true,
+      config: { status_get: '/integrations/memories/immich2/status' },
+    };
+
+    server.use(
+      http.get('/api/addons', () =>
+        HttpResponse.json({ addons: [immichAddon, immich2Addon] })
+      ),
+      http.get('/api/integrations/memories/immich/status', () => HttpResponse.json({ connected: true })),
+      http.get('/api/integrations/memories/immich2/status', () => HttpResponse.json({ connected: true })),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () => HttpResponse.json({ photos: [] })),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () => HttpResponse.json({ links: [] })),
+      http.post('/api/integrations/memories/immich/search', () => HttpResponse.json({ assets: [] })),
+      http.post('/api/integrations/memories/immich2/search', () => HttpResponse.json({ assets: [] })),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    const [firstAddBtn] = screen.getAllByText('Add photos');
+    await userEvent.click(firstAddBtn);
+
+    // With multiple providers the picker header uses the "multiple" translation
+    await screen.findByText('Select Photos');
+
+    // Both provider name tabs are rendered inside the picker
+    expect(screen.getByRole('button', { name: 'Immich' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Immich2' })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-018: Location filter dropdown appears when photos have multiple cities', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            { photo_id: 10, asset_id: 'p1', provider: 'immich', user_id: 1, username: 'me', shared: 1, added_at: '2025-03-01T00:00:00Z', city: 'Paris' },
+            { photo_id: 11, asset_id: 'p2', provider: 'immich', user_id: 1, username: 'me', shared: 1, added_at: '2025-03-05T00:00:00Z', city: 'Lyon' },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Location dropdown shows "All locations" option when there are 2+ distinct cities
+    await screen.findByText('All locations');
+    expect(screen.getByRole('combobox')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-019: Full picker flow: select photo → confirm dialog → execute add', async () => {
+    let addPhotosCalled = false;
+
+    server.use(
+      ...connectedHandlers,
+      http.post('/api/integrations/memories/immich/search', () =>
+        HttpResponse.json({
+          assets: [
+            { id: 'asset1', takenAt: '2025-03-05T10:00:00Z', city: null, country: null },
+          ],
+        })
+      ),
+      http.post('/api/integrations/memories/unified/trips/:tripId/photos', () => {
+        addPhotosCalled = true;
+        return HttpResponse.json({ ok: true });
+      }),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    const [firstAddBtn] = screen.getAllByText('Add photos');
+    await userEvent.click(firstAddBtn);
+
+    await screen.findByText('Select photos from Immich');
+
+    // Wait for the picker asset thumbnail to render (ProviderImg sets src after blob resolves)
+    // img has alt="" so findByRole('img') won't work — use findByAltText instead
+    const thumbnail = await screen.findByAltText('');
+
+    // Click the thumbnail — bubbles up to the parent div's onClick to select it
+    await userEvent.click(thumbnail);
+
+    // "1 selected" count appears and "Add 1 photos" button is active
+    await screen.findByText(/1\s+selected/);
+    await userEvent.click(screen.getByText('Add 1 photos'));
+
+    // Confirm share dialog appears
+    await screen.findByText('Share with trip members?');
+
+    // Click the confirm "Share photos" button to execute
+    await userEvent.click(screen.getByText('Share photos'));
+
+    await waitFor(() => expect(addPhotosCalled).toBe(true));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-020: "All photos" filter tab makes an unfiltered search', async () => {
+    let searchCount = 0;
+
+    server.use(
+      ...connectedHandlers,
+      http.post('/api/integrations/memories/immich/search', () => {
+        searchCount++;
+        return HttpResponse.json({ assets: [] });
+      }),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    const [firstAddBtn] = screen.getAllByText('Add photos');
+    await userEvent.click(firstAddBtn);
+
+    await screen.findByText('Select photos from Immich');
+
+    // Click "All photos" — triggers a second loadPickerPhotos(false) call
+    await userEvent.click(screen.getByText('All photos'));
+
+    await waitFor(() => expect(searchCount).toBeGreaterThan(1));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-021: Picker with no trip dates shows only "All photos" tab', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.post('/api/integrations/memories/immich/search', () =>
+        HttpResponse.json({ assets: [] })
+      ),
+    );
+
+    render(<MemoriesPanel tripId={1} startDate={null} endDate={null} />);
+
+    await screen.findByText('No photos found');
+
+    const [firstAddBtn] = screen.getAllByText('Add photos');
+    await userEvent.click(firstAddBtn);
+
+    await screen.findByText('Select photos from Immich');
+
+    // "Trip dates" tab is absent when dates are not set
+    expect(screen.queryByText(/Trip dates/)).not.toBeInTheDocument();
+    expect(screen.getByText('All photos')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-022: Provider with no status_get URL shows not-connected', async () => {
+    server.use(
+      http.get('/api/addons', () =>
+        HttpResponse.json({
+          addons: [
+            { id: 'myapp', name: 'MyApp', type: 'photo_provider', enabled: true, config: {} },
+          ],
+        })
+      ),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({ photos: [] })
+      ),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({ links: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Provider name shown in the not-connected message when exactly 1 enabled provider
+    await screen.findByText('MyApp not connected');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-023: Picker marks already-added photos with "Added" overlay', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            {
+              asset_id: 'asset1',
+              provider: 'immich',
+              user_id: 1,
+              username: 'me',
+              shared: 1,
+              added_at: '2025-03-05T10:00:00Z',
+            },
+          ],
+        })
+      ),
+      http.post('/api/integrations/memories/immich/search', () =>
+        HttpResponse.json({
+          assets: [
+            { id: 'asset1', takenAt: '2025-03-05T10:00:00Z', city: null, country: null },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    // Gallery shows own photo — "Stop sharing" title confirms it's loaded
+    await screen.findByTitle('Stop sharing');
+
+    // Open picker from the header button (only 1 "Add photos" button since photos > 0)
+    await userEvent.click(screen.getByText('Add photos'));
+    await screen.findByText('Select photos from Immich');
+
+    // The asset already in the gallery shows the "Added" overlay in the picker
+    await screen.findByText('Added');
+  });
+
+  it('FE-COMP-MEMORIESPANEL-024: Location filter select filters the visible photos', async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('photos')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/photos', () =>
+        HttpResponse.json({
+          photos: [
+            { photo_id: 10, asset_id: 'p1', provider: 'immich', user_id: 1, username: 'me', shared: 1, added_at: '2025-03-01T00:00:00Z', city: 'Paris' },
+            { photo_id: 11, asset_id: 'p2', provider: 'immich', user_id: 1, username: 'me', shared: 1, added_at: '2025-03-05T00:00:00Z', city: 'Lyon' },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    const select = await screen.findByRole('combobox');
+
+    // Change filter to a specific city
+    await userEvent.selectOptions(select, 'Paris');
+
+    expect(select).toHaveValue('Paris');
+  });
+
+  it("FE-COMP-MEMORIESPANEL-025: Album link from another user shows username but no unlink button", async () => {
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('album-links')),
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () =>
+        HttpResponse.json({
+          links: [
+            {
+              id: 1,
+              provider: 'immich',
+              album_id: 'a1',
+              album_name: 'Holidays',
+              user_id: 2,
+              username: 'Alice',
+              sync_enabled: 1,
+              last_synced_at: null,
+            },
+          ],
+        })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+
+    await screen.findByText('Holidays');
+
+    // Other user's username is shown in parentheses
+    expect(screen.getByText('(Alice)')).toBeInTheDocument();
+
+    // Unlink button is NOT shown for another user's album link
+    expect(screen.queryByTitle('Unlink album')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MEMORIESPANEL-026: Linking an album calls the album-links POST endpoint', async () => {
+    let linkCalled = false;
+    // Track whether POST has been made so the GET can return different data
+    let albumLinked = false;
+
+    server.use(
+      ...connectedHandlers.filter(h => !h.info.path.includes('album-links')),
+      http.get('/api/integrations/memories/immich/albums', () =>
+        HttpResponse.json({
+          albums: [{ id: 'album1', albumName: 'Summer 2025', assetCount: 10 }],
+        })
+      ),
+      http.post('/api/integrations/memories/unified/trips/:tripId/album-links', () => {
+        linkCalled = true;
+        albumLinked = true;
+        return HttpResponse.json({ ok: true });
+      }),
+      // Return empty before POST, linked album after POST
+      http.get('/api/integrations/memories/unified/trips/:tripId/album-links', () => {
+        if (!albumLinked) return HttpResponse.json({ links: [] });
+        return HttpResponse.json({
+          links: [{ id: 1, provider: 'immich', album_id: 'album1', album_name: 'Summer 2025', user_id: 1, username: 'me', sync_enabled: 1, last_synced_at: null }],
+        });
+      }),
+      http.post('/api/integrations/memories/:provider/trips/:tripId/album-links/:linkId/sync', () =>
+        HttpResponse.json({ ok: true })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    await userEvent.click(screen.getByText('Link Album'));
+    await screen.findByText('Summer 2025');
+
+    // Click the album button to link it (album is not yet linked → button is enabled)
+    await userEvent.click(screen.getByText('Summer 2025'));
+
+    await waitFor(() => expect(linkCalled).toBe(true));
+  });
+
+  it('FE-COMP-MEMORIESPANEL-027: Album picker cancel button returns to the gallery', async () => {
+    server.use(
+      ...connectedHandlers,
+      http.get('/api/integrations/memories/immich/albums', () =>
+        HttpResponse.json({ albums: [] })
+      ),
+    );
+
+    render(<MemoriesPanel {...defaultProps} />);
+    await screen.findByText('No photos found');
+
+    await userEvent.click(screen.getByText('Link Album'));
+    await screen.findByText('Select Immich Album');
+
+    // Click Cancel to dismiss without linking
+    await userEvent.click(screen.getByText('Cancel'));
+
+    // Gallery is restored
+    await screen.findByText('No photos found');
+  });
+});

client/src/components/Memories/MemoriesPanel.tsx

@@ -1,16 +1,23 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen } from 'lucide-react'
-import apiClient from '../../api/client'
+import apiClient, { addonsApi } from '../../api/client'
+import { Camera, Plus, Share2, EyeOff, Eye, X, Check, Search, ArrowUpDown, MapPin, Filter, Link2, RefreshCw, Unlink, FolderOpen, Info, ChevronLeft, ChevronRight } from 'lucide-react'
 import { useAuthStore } from '../../store/authStore'
 import { useTranslation } from '../../i18n'
-import { getAuthUrl, fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
+import { fetchImageAsBlob, clearImageQueue } from '../../api/authUrl'
 import { useToast } from '../shared/Toast'
 
-function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
+interface PhotoProvider {
+  id: string
+  name: string
+  icon?: string
+  config?: Record<string, unknown>
+}
+
+function ProviderImg({ baseUrl, provider, style, loading }: { baseUrl: string; provider: string; style?: React.CSSProperties; loading?: 'lazy' | 'eager' }) {
   const [src, setSrc] = useState('')
   useEffect(() => {
     let revoke = ''
-    fetchImageAsBlob(baseUrl).then(blobUrl => {
+    fetchImageAsBlob('/api' + baseUrl).then(blobUrl => {
       revoke = blobUrl
       setSrc(blobUrl)
     })
@@ -19,18 +26,23 @@ function ImmichImg({ baseUrl, style, loading }: { baseUrl: string; style?: React
   return src ? <img src={src} alt="" loading={loading} style={style} /> : null
 }
 
+
 // ── Types ───────────────────────────────────────────────────────────────────
 
 interface TripPhoto {
-  immich_asset_id: string
+  photo_id: number
+  asset_id: string
+  provider: string
   user_id: number
   username: string
   shared: number
   added_at: string
+  city?: string | null
 }
 
-interface ImmichAsset {
+interface Asset {
   id: string
+  provider: string
   takenAt: string
   city: string | null
   country: string | null
@@ -50,6 +62,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const currentUser = useAuthStore(s => s.user)
 
   const [connected, setConnected] = useState(false)
+  const [enabledProviders, setEnabledProviders] = useState<PhotoProvider[]>([])
+  const [availableProviders, setAvailableProviders] = useState<PhotoProvider[]>([])
+  const [selectedProvider, setSelectedProvider] = useState<string>('')
   const [loading, setLoading] = useState(true)
 
   // Trip photos (saved selections)
@@ -57,7 +72,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // Photo picker
   const [showPicker, setShowPicker] = useState(false)
-  const [pickerPhotos, setPickerPhotos] = useState<ImmichAsset[]>([])
+  const [pickerPhotos, setPickerPhotos] = useState<Asset[]>([])
   const [pickerLoading, setPickerLoading] = useState(false)
   const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
 
@@ -72,49 +87,95 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const [showAlbumPicker, setShowAlbumPicker] = useState(false)
   const [albums, setAlbums] = useState<{ id: string; albumName: string; assetCount: number }[]>([])
   const [albumsLoading, setAlbumsLoading] = useState(false)
-  const [albumLinks, setAlbumLinks] = useState<{ id: number; immich_album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
+  const [albumLinks, setAlbumLinks] = useState<{ id: number; provider: string; album_id: string; album_name: string; user_id: number; username: string; sync_enabled: number; last_synced_at: string | null }[]>([])
   const [syncing, setSyncing] = useState<number | null>(null)
 
+
+  //helpers for building urls
+  const ADDON_PREFIX = "/integrations/memories"
+  
+  function buildUnifiedUrl(endpoint: string, lastParam?:string,): string {
+    return `${ADDON_PREFIX}/unified/trips/${tripId}/${endpoint}${lastParam ? `/${lastParam}` : ''}`;
+  }
+
+  function buildProviderUrl(provider: string, endpoint: string, item?: string): string {
+    if (endpoint === 'album-link-sync') {
+      endpoint = `trips/${tripId}/album-links/${item?.toString() || ''}/sync`
+    }
+    return `${ADDON_PREFIX}/${provider}/${endpoint}`;
+  }
+
+  function buildProviderAssetUrl(photo: TripPhoto, what: string): string {
+    return `/photos/${photo.photo_id}/${what}`
+  }
+
+  function buildProviderAssetUrlFromAsset(asset: Asset, what: string, userId: number): string {
+    // Picker photos are not yet saved — use provider-specific URL
+    return `${ADDON_PREFIX}/${asset.provider}/assets/${tripId}/${asset.id}/${userId}/${what}`
+  }
+
+
   const loadAlbumLinks = async () => {
     try {
-      const res = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
+      const res = await apiClient.get(buildUnifiedUrl('album-links'))
       setAlbumLinks(res.data.links || [])
     } catch { setAlbumLinks([]) }
   }
 
-  const openAlbumPicker = async () => {
-    setShowAlbumPicker(true)
+  const loadAlbums = async (provider: string = selectedProvider) => {
+    if (!provider) return
     setAlbumsLoading(true)
     try {
-      const res = await apiClient.get('/integrations/immich/albums')
+      const res = await apiClient.get(buildProviderUrl(provider, 'albums'))
       setAlbums(res.data.albums || [])
-    } catch { setAlbums([]); toast.error(t('memories.error.loadAlbums')) }
-    finally { setAlbumsLoading(false) }
+    } catch {
+      setAlbums([])
+      toast.error(t('memories.error.loadAlbums'))
+    } finally {
+      setAlbumsLoading(false)
+    }
+  }
+
+  const openAlbumPicker = async () => {
+    setShowAlbumPicker(true)
+    await loadAlbums(selectedProvider)
   }
 
   const linkAlbum = async (albumId: string, albumName: string) => {
+    if (!selectedProvider) {
+      toast.error(t('memories.error.linkAlbum'))
+      return
+    }
+
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links`, { album_id: albumId, album_name: albumName })
+      await apiClient.post(buildUnifiedUrl('album-links'), {
+        album_id: albumId,
+        album_name: albumName,
+        provider: selectedProvider,
+      })
       setShowAlbumPicker(false)
       await loadAlbumLinks()
       // Auto-sync after linking
-      const linksRes = await apiClient.get(`/integrations/immich/trips/${tripId}/album-links`)
-      const newLink = (linksRes.data.links || []).find((l: any) => l.immich_album_id === albumId)
+      const linksRes = await apiClient.get(buildUnifiedUrl('album-links'))
+      const newLink = (linksRes.data.links || []).find((l: any) => l.album_id === albumId && l.provider === selectedProvider)
       if (newLink) await syncAlbum(newLink.id)
     } catch { toast.error(t('memories.error.linkAlbum')) }
   }
 
   const unlinkAlbum = async (linkId: number) => {
     try {
-      await apiClient.delete(`/integrations/immich/trips/${tripId}/album-links/${linkId}`)
-      loadAlbumLinks()
+      await apiClient.delete(buildUnifiedUrl('album-links', linkId.toString()))
+      await loadAlbumLinks()
+      await loadPhotos()
     } catch { toast.error(t('memories.error.unlinkAlbum')) }
   }
 
-  const syncAlbum = async (linkId: number) => {
+  const syncAlbum = async (linkId: number, provider?: string) => {
+    const targetProvider = provider || selectedProvider
+    if (!targetProvider) return
     setSyncing(linkId)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/album-links/${linkId}/sync`)
+      await apiClient.post(buildProviderUrl(targetProvider, 'album-link-sync', linkId.toString()))
       await loadAlbumLinks()
       await loadPhotos()
     } catch { toast.error(t('memories.error.syncAlbum')) }
@@ -122,11 +183,19 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   }
 
   // Lightbox
-  const [lightboxId, setLightboxId] = useState<string | null>(null)
+  const [lightboxId, setLightboxId] = useState<number | null>(null)
   const [lightboxUserId, setLightboxUserId] = useState<number | null>(null)
   const [lightboxInfo, setLightboxInfo] = useState<any>(null)
   const [lightboxInfoLoading, setLightboxInfoLoading] = useState(false)
   const [lightboxOriginalSrc, setLightboxOriginalSrc] = useState('')
+  const [showMobileInfo, setShowMobileInfo] = useState(false)
+  const [isMobile, setIsMobile] = useState(() => window.innerWidth < 768)
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 768)
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [])
 
   // ── Init ──────────────────────────────────────────────────────────────────
 
@@ -143,7 +212,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   const loadPhotos = async () => {
     try {
-      const photosRes = await apiClient.get(`/integrations/immich/trips/${tripId}/photos`)
+      const photosRes = await apiClient.get(buildUnifiedUrl('photos'))
       setTripPhotos(photosRes.data.photos || [])
     } catch {
       setTripPhotos([])
@@ -153,9 +222,37 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const loadInitial = async () => {
     setLoading(true)
     try {
-      const statusRes = await apiClient.get('/integrations/immich/status')
-      setConnected(statusRes.data.connected)
+      const addonsRes = await addonsApi.enabled().catch(() => ({ addons: [] as any[] }))
+      const enabledAddons = addonsRes?.addons || []
+      const photoProviders = enabledAddons.filter((a: any) => a.type === 'photo_provider' && a.enabled)
+
+      setEnabledProviders(photoProviders.map((a: any) => ({ id: a.id, name: a.name, icon: a.icon, config: a.config })))
+
+      // Test connection status for each enabled provider
+      const statusResults = await Promise.all(
+        photoProviders.map(async (provider: any) => {
+          const statusUrl = (provider.config as Record<string, unknown>)?.status_get as string
+          if (!statusUrl) return { provider, connected: false }
+          try {
+            const res = await apiClient.get(statusUrl)
+            return { provider, connected: !!res.data?.connected }
+          } catch {
+            return { provider, connected: false }
+          }
+        })
+      )
+
+      const connectedProviders = statusResults
+        .filter(r => r.connected)
+        .map(r => ({ id: r.provider.id, name: r.provider.name, icon: r.provider.icon, config: r.provider.config }))
+      
+      setAvailableProviders(connectedProviders)
+      setConnected(connectedProviders.length > 0)
+      if (connectedProviders.length > 0 && !selectedProvider) {
+        setSelectedProvider(connectedProviders[0].id)
+      }
     } catch {
+      setAvailableProviders([])
       setConnected(false)
     }
     await loadPhotos()
@@ -175,14 +272,35 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
     await loadPickerPhotos(!!(startDate && endDate))
   }
 
+  useEffect(() => {
+    if (showPicker) {
+      loadPickerPhotos(pickerDateFilter)
+    }
+  }, [selectedProvider])
+
+  useEffect(() => {
+    loadAlbumLinks()
+  }, [tripId])
+
+  useEffect(() => {
+    if (showAlbumPicker) {
+      loadAlbums(selectedProvider)
+    }
+  }, [showAlbumPicker, selectedProvider, tripId])
+
   const loadPickerPhotos = async (useDate: boolean) => {
     setPickerLoading(true)
     try {
-      const res = await apiClient.post('/integrations/immich/search', {
+      const provider = availableProviders.find(p => p.id === selectedProvider)
+      if (!provider) {
+        setPickerPhotos([])
+        return
+      }
+      const res = await apiClient.post(buildProviderUrl(provider.id, 'search'), {
         from: useDate && startDate ? startDate : undefined,
         to: useDate && endDate ? endDate : undefined,
       })
-      setPickerPhotos(res.data.assets || [])
+      setPickerPhotos((res.data.assets || []).map((asset: Asset) => ({ ...asset, provider: provider.id })))
     } catch {
       setPickerPhotos([])
       toast.error(t('memories.error.loadPhotos'))
@@ -208,8 +326,17 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   const executeAddPhotos = async () => {
     setShowConfirmShare(false)
     try {
-      await apiClient.post(`/integrations/immich/trips/${tripId}/photos`, {
-        asset_ids: [...selectedIds],
+      const groupedByProvider = new Map<string, string[]>()
+      for (const key of selectedIds) {
+        const [provider, assetId] = key.split('::')
+        if (!provider || !assetId) continue
+        const list = groupedByProvider.get(provider) || []
+        list.push(assetId)
+        groupedByProvider.set(provider, list)
+      }
+
+      await apiClient.post(buildUnifiedUrl('photos'), {
+        selections: [...groupedByProvider.entries()].map(([provider, asset_ids]) => ({ provider, asset_ids })),
         shared: true,
       })
       setShowPicker(false)
@@ -220,28 +347,36 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // ── Remove photo ──────────────────────────────────────────────────────────
 
-  const removePhoto = async (assetId: string) => {
+  const removePhoto = async (photo: TripPhoto) => {
     try {
-      await apiClient.delete(`/integrations/immich/trips/${tripId}/photos/${assetId}`)
-      setTripPhotos(prev => prev.filter(p => p.immich_asset_id !== assetId))
+      await apiClient.delete(buildUnifiedUrl('photos'), {
+        data: {
+          photo_id: photo.photo_id,
+        },
+      })
+      setTripPhotos(prev => prev.filter(p => p.photo_id !== photo.photo_id))
     } catch { toast.error(t('memories.error.removePhoto')) }
   }
 
   // ── Toggle sharing ────────────────────────────────────────────────────────
 
-  const toggleSharing = async (assetId: string, shared: boolean) => {
+  const toggleSharing = async (photo: TripPhoto, shared: boolean) => {
     try {
-      await apiClient.put(`/integrations/immich/trips/${tripId}/photos/${assetId}/sharing`, { shared })
+      await apiClient.put(buildUnifiedUrl('photos', 'sharing'), {
+        shared,
+        photo_id: photo.photo_id,
+      })
       setTripPhotos(prev => prev.map(p =>
-        p.immich_asset_id === assetId ? { ...p, shared: shared ? 1 : 0 } : p
+        p.photo_id === photo.photo_id ? { ...p, shared: shared ? 1 : 0 } : p
       ))
     } catch { toast.error(t('memories.error.toggleSharing')) }
   }
 
   // ── Helpers ───────────────────────────────────────────────────────────────
 
-  const thumbnailBaseUrl = (assetId: string, userId: number) =>
-    `/api/integrations/immich/assets/${assetId}/thumbnail?userId=${userId}`
+  
+
+  const makePickerKey = (provider: string, assetId: string): string => `${provider}::${assetId}`
 
   const ownPhotos = tripPhotos.filter(p => p.user_id === currentUser?.id)
   const othersPhotos = tripPhotos.filter(p => p.user_id !== currentUser?.id && p.shared)
@@ -281,10 +416,10 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', padding: 40, textAlign: 'center', ...font }}>
         <Camera size={40} style={{ color: 'var(--text-faint)', marginBottom: 12 }} />
         <h3 style={{ margin: '0 0 6px', fontSize: 16, fontWeight: 700, color: 'var(--text-primary)' }}>
-          {t('memories.notConnected')}
+          {t('memories.notConnected', { provider_name: enabledProviders.length === 1 ? enabledProviders[0]?.name : 'Photo provider' })}
         </h3>
         <p style={{ margin: 0, fontSize: 13, color: 'var(--text-muted)', maxWidth: 300 }}>
-          {t('memories.notConnectedHint')}
+          {enabledProviders.length === 1 ? t('memories.notConnectedHint', { provider_name: enabledProviders[0]?.name }) : t('memories.notConnectedMultipleHint', { provider_names: enabledProviders.map(p => p.name).join(', ') })}
         </p>
       </div>
     )
@@ -292,22 +427,53 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
 
   // ── Photo Picker Modal ────────────────────────────────────────────────────
 
+  const ProviderTabs = () => {
+    if (availableProviders.length < 2) return null
+    return (
+      <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
+        {availableProviders.map(provider => (
+          <button
+            key={provider.id}
+            onClick={() => setSelectedProvider(provider.id)}
+            style={{
+              padding: '6px 12px',
+              borderRadius: 99,
+              fontSize: 12,
+              fontWeight: 600,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+              border: '1px solid',
+              transition: 'all 0.15s',
+              background: selectedProvider === provider.id ? 'var(--text-primary)' : 'var(--bg-card)',
+              borderColor: selectedProvider === provider.id ? 'var(--text-primary)' : 'var(--border-primary)',
+              color: selectedProvider === provider.id ? 'var(--bg-primary)' : 'var(--text-muted)',
+              textTransform: 'capitalize',
+            }}
+          >
+            {provider.name}
+          </button>
+        ))}
+      </div>
+    )
+  }
+
   // ── Album Picker Modal ──────────────────────────────────────────────────
 
   if (showAlbumPicker) {
-    const linkedIds = new Set(albumLinks.map(l => l.immich_album_id))
+    const linkedIds = new Set(albumLinks.map(l => l.album_id))
     return (
       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
         <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {t('memories.selectAlbum')}
+              {availableProviders.length > 1 ? t('memories.selectAlbumMultiple') : t('memories.selectAlbum', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
             </h3>
             <button onClick={() => setShowAlbumPicker(false)}
               style={{ padding: '7px 14px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', fontSize: 12, cursor: 'pointer', fontFamily: 'inherit', color: 'var(--text-muted)' }}>
               {t('common.cancel')}
             </button>
           </div>
+          <ProviderTabs />
         </div>
         <div style={{ flex: 1, overflowY: 'auto', padding: 12 }}>
           {albumsLoading ? (
@@ -359,7 +525,11 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   // ── Photo Picker Modal ────────────────────────────────────────────────────
 
   if (showPicker) {
-    const alreadyAdded = new Set(tripPhotos.filter(p => p.user_id === currentUser?.id).map(p => p.immich_asset_id))
+    const alreadyAdded = new Set(
+      tripPhotos
+        .filter(p => p.user_id === currentUser?.id)
+        .map(p => makePickerKey(p.provider, p.asset_id))
+    )
 
     return (
       <>
@@ -368,7 +538,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         <div style={{ padding: '14px 20px', borderBottom: '1px solid var(--border-secondary)' }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10 }}>
             <h3 style={{ margin: 0, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
-              {t('memories.selectPhotos')}
+              {availableProviders.length > 1 ? t('memories.selectPhotosMultiple') : t('memories.selectPhotos', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
             </h3>
             <div style={{ display: 'flex', gap: 8 }}>
               <button onClick={() => { clearImageQueue(); setShowPicker(false) }}
@@ -386,6 +556,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
               </button>
             </div>
           </div>
+          <div style={{ marginBottom: 10 }}>
+            <ProviderTabs />
+          </div>
           {/* Filter tabs */}
           <div style={{ display: 'flex', gap: 6 }}>
             {startDate && endDate && (
@@ -429,10 +602,17 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             <div style={{ textAlign: 'center', padding: '60px 20px' }}>
               <Camera size={36} style={{ color: 'var(--text-faint)', margin: '0 auto 10px', display: 'block' }} />
               <p style={{ fontSize: 13, color: 'var(--text-muted)', margin: 0 }}>{t('memories.noPhotos')}</p>
+              {
+                pickerDateFilter && (
+                  <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
+                    {t('memories.noPhotosHint', { provider_name: availableProviders.find(p => p.id === selectedProvider)?.name || 'Photo provider' })}
+                  </p>
+                )
+              } 
             </div>
           ) : (() => {
             // Group photos by month
-            const byMonth: Record<string, ImmichAsset[]> = {}
+            const byMonth: Record<string, Asset[]> = {}
             for (const asset of pickerPhotos) {
               const d = asset.takenAt ? new Date(asset.takenAt) : null
               const key = d ? `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}` : 'unknown'
@@ -450,11 +630,12 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 </div>
                 <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: 4 }}>
                   {byMonth[month].map(asset => {
-                    const isSelected = selectedIds.has(asset.id)
-                    const isAlready = alreadyAdded.has(asset.id)
+                    const pickerKey = makePickerKey(asset.provider, asset.id)
+                    const isSelected = selectedIds.has(pickerKey)
+                    const isAlready = alreadyAdded.has(pickerKey)
                     return (
-                      <div key={asset.id}
-                        onClick={() => !isAlready && togglePickerSelect(asset.id)}
+                      <div key={pickerKey}
+                        onClick={() => !isAlready && togglePickerSelect(pickerKey)}
                         style={{
                           position: 'relative', aspectRatio: '1', borderRadius: 8, overflow: 'hidden',
                           cursor: isAlready ? 'default' : 'pointer',
@@ -462,7 +643,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                           outline: isSelected ? '3px solid var(--text-primary)' : 'none',
                           outlineOffset: -3,
                         }}>
-                        <ImmichImg baseUrl={thumbnailBaseUrl(asset.id, currentUser!.id)} loading="lazy"
+                        <ProviderImg baseUrl={buildProviderAssetUrlFromAsset(asset, 'thumbnail', currentUser!.id)} provider={asset.provider} loading="lazy"
                           style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                         {isSelected && (
                           <div style={{
@@ -525,6 +706,23 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
   return (
     <div style={{ display: 'flex', flexDirection: 'column', height: '100%', ...font }}>
 
+      {/* Disconnected banner — shown when photos exist but provider is unreachable */}
+      {!connected && allVisible.length > 0 && enabledProviders.length > 0 && (
+        <div style={{
+          display: 'flex', alignItems: 'center', gap: 8,
+          padding: '8px 16px', flexShrink: 0,
+          background: 'rgba(234,179,8,0.08)', borderBottom: '1px solid rgba(234,179,8,0.25)',
+          fontSize: 12, color: 'var(--text-muted)',
+        }}>
+          <Camera size={13} style={{ color: '#ca8a04', flexShrink: 0 }} />
+          <span>
+            {t('memories.providerDisconnectedBanner', {
+              provider_name: enabledProviders.length === 1 ? enabledProviders[0].name : enabledProviders.map(p => p.name).join(', ')
+            })}
+          </span>
+        </div>
+      )}
+
       {/* Header */}
       <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--border-secondary)', flexShrink: 0 }}>
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
@@ -570,7 +768,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                 <FolderOpen size={11} />
                 <span style={{ fontWeight: 500 }}>{link.album_name}</span>
                 {link.username !== currentUser?.username && <span style={{ color: 'var(--text-faint)' }}>({link.username})</span>}
-                <button onClick={() => syncAlbum(link.id)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
+                <button onClick={() => syncAlbum(link.id, link.provider)} disabled={syncing === link.id} title={t('memories.syncAlbum')}
                   style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, display: 'flex', color: 'var(--text-faint)' }}>
                   <RefreshCw size={11} style={{ animation: syncing === link.id ? 'spin 1s linear infinite' : 'none' }} />
                 </button>
@@ -616,12 +814,9 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
         {allVisible.length === 0 ? (
           <div style={{ textAlign: 'center', padding: '60px 20px' }}>
             <Camera size={40} style={{ color: 'var(--text-faint)', margin: '0 auto 12px', display: 'block' }} />
-            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 4px' }}>
+            <p style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-secondary)', margin: '0 0 12px' }}>
               {t('memories.noPhotos')}
             </p>
-            <p style={{ fontSize: 12, color: 'var(--text-faint)', margin: '0 0 16px' }}>
-              {t('memories.noPhotosHint')}
-            </p>
             <button onClick={openPicker}
               style={{
                 display: 'inline-flex', alignItems: 'center', gap: 5, padding: '9px 18px', borderRadius: 10,
@@ -636,19 +831,19 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
             {allVisible.map(photo => {
               const isOwn = photo.user_id === currentUser?.id
               return (
-                <div key={photo.immich_asset_id} className="group"
+                <div key={photo.photo_id} className="group"
                   style={{ position: 'relative', aspectRatio: '1', borderRadius: 10, overflow: 'visible', cursor: 'pointer' }}
                   onClick={() => {
-                    setLightboxId(photo.immich_asset_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
+                    setLightboxId(photo.photo_id); setLightboxUserId(photo.user_id); setLightboxInfo(null)
                     if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
                     setLightboxOriginalSrc('')
-                    fetchImageAsBlob(`/api/integrations/immich/assets/${photo.immich_asset_id}/original?userId=${photo.user_id}`).then(setLightboxOriginalSrc)
+                    fetchImageAsBlob('/api' + buildProviderAssetUrl(photo, 'original')).then(setLightboxOriginalSrc)
                     setLightboxInfoLoading(true)
-                    apiClient.get(`/integrations/immich/assets/${photo.immich_asset_id}/info?userId=${photo.user_id}`)
+                    apiClient.get(buildProviderAssetUrl(photo, 'info'))
                       .then(r => setLightboxInfo(r.data)).catch(() => {}).finally(() => setLightboxInfoLoading(false))
                   }}>
 
-                  <ImmichImg baseUrl={thumbnailBaseUrl(photo.immich_asset_id, photo.user_id)} loading="lazy"
+                  <ProviderImg baseUrl={buildProviderAssetUrl(photo, 'thumbnail')} provider={photo.provider} loading="lazy"
                     style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: 10 }} />
 
                   {/* Other user's avatar */}
@@ -679,7 +874,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                   {isOwn && (
                     <div className="opacity-0 group-hover:opacity-100"
                       style={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 3, transition: 'opacity 0.15s' }}>
-                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo.immich_asset_id, !photo.shared) }}
+                      <button onClick={e => { e.stopPropagation(); toggleSharing(photo, !photo.shared) }}
                         title={photo.shared ? t('memories.stopSharing') : t('memories.sharePhotos')}
                         style={{
                           width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
@@ -688,7 +883,7 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
                         }}>
                         {photo.shared ? <Eye size={12} color="white" /> : <EyeOff size={12} color="white" />}
                       </button>
-                      <button onClick={e => { e.stopPropagation(); removePhoto(photo.immich_asset_id) }}
+                      <button onClick={e => { e.stopPropagation(); removePhoto(photo) }}
                         style={{
                           width: 26, height: 26, borderRadius: '50%', border: 'none', cursor: 'pointer',
                           background: 'rgba(0,0,0,0.5)', backdropFilter: 'blur(4px)',
@@ -749,117 +944,196 @@ export default function MemoriesPanel({ tripId, startDate, endDate }: MemoriesPa
       )}
 
       {/* Lightbox */}
-      {lightboxId && lightboxUserId && (
-        <div onClick={() => { if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc); setLightboxOriginalSrc(''); setLightboxId(null); setLightboxUserId(null) }}
-          style={{
-            position: 'absolute', inset: 0, zIndex: 100,
-            background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
-          }}>
-          <button onClick={() => { if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc); setLightboxOriginalSrc(''); setLightboxId(null); setLightboxUserId(null) }}
-            style={{
-              position: 'absolute', top: 16, right: 16, width: 40, height: 40, borderRadius: '50%',
-              background: 'rgba(255,255,255,0.1)', border: 'none', cursor: 'pointer',
-              display: 'flex', alignItems: 'center', justifyContent: 'center',
-            }}>
-            <X size={20} color="white" />
-          </button>
-          <div onClick={e => e.stopPropagation()} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
-            <img
-              src={lightboxOriginalSrc}
-              alt=""
-              style={{ maxWidth: lightboxInfo ? 'calc(100% - 280px)' : '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 10, cursor: 'default' }}
-            />
+      {lightboxId && lightboxUserId && (() => {
+        const closeLightbox = () => {
+          if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
+          setLightboxOriginalSrc('')
+          setLightboxId(null)
+          setLightboxUserId(null)
+          setShowMobileInfo(false)
+        }
 
-            {/* Info panel — liquid glass */}
-            {lightboxInfo && (
-              <div style={{
-                width: 240, flexShrink: 0, borderRadius: 16, padding: 18,
-                background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
-                border: '1px solid rgba(255,255,255,0.12)', color: 'white',
-                display: 'flex', flexDirection: 'column', gap: 14, maxHeight: '100%', overflowY: 'auto',
-              }}>
-                {/* Date */}
-                {lightboxInfo.takenAt && (
+        const currentIdx = allVisible.findIndex(p => p.photo_id === lightboxId)
+        const hasPrev = currentIdx > 0
+        const hasNext = currentIdx < allVisible.length - 1
+        const navigateTo = (idx: number) => {
+          const photo = allVisible[idx]
+          if (!photo) return
+          if (lightboxOriginalSrc) URL.revokeObjectURL(lightboxOriginalSrc)
+          setLightboxOriginalSrc('')
+          setLightboxId(photo.photo_id)
+          setLightboxUserId(photo.user_id)
+          setLightboxInfo(null)
+          fetchImageAsBlob('/api' + buildProviderAssetUrl(photo, 'original')).then(setLightboxOriginalSrc)
+          setLightboxInfoLoading(true)
+          apiClient.get(buildProviderAssetUrl(photo, 'info'))
+            .then(r => setLightboxInfo(r.data)).catch(() => {}).finally(() => setLightboxInfoLoading(false))
+        }
+
+        const exifContent = lightboxInfo ? (
+          <>
+            {lightboxInfo.takenAt && (
+              <div>
+                <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Date</div>
+                <div style={{ fontSize: 13, fontWeight: 600 }}>{new Date(lightboxInfo.takenAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })}</div>
+                <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{new Date(lightboxInfo.takenAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</div>
+              </div>
+            )}
+            {(lightboxInfo.city || lightboxInfo.country) && (
+              <div>
+                <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>
+                  <MapPin size={9} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />Location
+                </div>
+                <div style={{ fontSize: 13, fontWeight: 600 }}>
+                  {[lightboxInfo.city, lightboxInfo.state, lightboxInfo.country].filter(Boolean).join(', ')}
+                </div>
+              </div>
+            )}
+            {lightboxInfo.camera && (
+              <div>
+                <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Camera</div>
+                <div style={{ fontSize: 12, fontWeight: 500 }}>{lightboxInfo.camera}</div>
+                {lightboxInfo.lens && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{lightboxInfo.lens}</div>}
+              </div>
+            )}
+            {(lightboxInfo.focalLength || lightboxInfo.aperture || lightboxInfo.iso) && (
+              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
+                {lightboxInfo.focalLength && (
                   <div>
-                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Date</div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>{new Date(lightboxInfo.takenAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })}</div>
-                    <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)' }}>{new Date(lightboxInfo.takenAt).toLocaleTimeString(undefined, { hour: '2-digit', minute: '2-digit' })}</div>
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Focal</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.focalLength}</div>
                   </div>
                 )}
-
-                {/* Location */}
-                {(lightboxInfo.city || lightboxInfo.country) && (
+                {lightboxInfo.aperture && (
                   <div>
-                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>
-                      <MapPin size={9} style={{ display: 'inline', verticalAlign: '-1px', marginRight: 3 }} />Location
-                    </div>
-                    <div style={{ fontSize: 13, fontWeight: 600 }}>
-                      {[lightboxInfo.city, lightboxInfo.state, lightboxInfo.country].filter(Boolean).join(', ')}
-                    </div>
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Aperture</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.aperture}</div>
                   </div>
                 )}
-
-                {/* Camera */}
-                {lightboxInfo.camera && (
+                {lightboxInfo.shutter && (
                   <div>
-                    <div style={{ fontSize: 9, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>Camera</div>
-                    <div style={{ fontSize: 12, fontWeight: 500 }}>{lightboxInfo.camera}</div>
-                    {lightboxInfo.lens && <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.5)', marginTop: 2 }}>{lightboxInfo.lens}</div>}
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Shutter</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.shutter}</div>
                   </div>
                 )}
-
-                {/* Settings */}
-                {(lightboxInfo.focalLength || lightboxInfo.aperture || lightboxInfo.iso) && (
-                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
-                    {lightboxInfo.focalLength && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Focal</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.focalLength}</div>
-                      </div>
-                    )}
-                    {lightboxInfo.aperture && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Aperture</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.aperture}</div>
-                      </div>
-                    )}
-                    {lightboxInfo.shutter && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Shutter</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.shutter}</div>
-                      </div>
-                    )}
-                    {lightboxInfo.iso && (
-                      <div>
-                        <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>ISO</div>
-                        <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.iso}</div>
-                      </div>
-                    )}
-                  </div>
-                )}
-
-                {/* Resolution & File */}
-                {(lightboxInfo.width || lightboxInfo.fileName) && (
-                  <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 10 }}>
-                    {lightboxInfo.width && lightboxInfo.height && (
-                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>{lightboxInfo.width} × {lightboxInfo.height}</div>
-                    )}
-                    {lightboxInfo.fileSize && (
-                      <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>{(lightboxInfo.fileSize / 1024 / 1024).toFixed(1)} MB</div>
-                    )}
+                {lightboxInfo.iso && (
+                  <div>
+                    <div style={{ fontSize: 9, color: 'rgba(255,255,255,0.4)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>ISO</div>
+                    <div style={{ fontSize: 13, fontWeight: 700 }}>{lightboxInfo.iso}</div>
                   </div>
                 )}
               </div>
             )}
+            {(lightboxInfo.width || lightboxInfo.fileName) && (
+              <div style={{ borderTop: '1px solid rgba(255,255,255,0.08)', paddingTop: 10 }}>
+                {lightboxInfo.width && lightboxInfo.height && (
+                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)', marginBottom: 3 }}>{lightboxInfo.width} × {lightboxInfo.height}</div>
+                )}
+                {lightboxInfo.fileSize && (
+                  <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.4)' }}>{(lightboxInfo.fileSize / 1024 / 1024).toFixed(1)} MB</div>
+                )}
+              </div>
+            )}
+          </>
+        ) : null
 
-            {lightboxInfoLoading && (
-              <div style={{ width: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-                <div className="w-6 h-6 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(255,255,255,0.2)', borderTopColor: 'white' }} />
+        return (
+          <div onClick={closeLightbox}
+            onKeyDown={e => { if (e.key === 'ArrowLeft' && hasPrev) navigateTo(currentIdx - 1); if (e.key === 'ArrowRight' && hasNext) navigateTo(currentIdx + 1); if (e.key === 'Escape') closeLightbox() }}
+            tabIndex={0} ref={el => el?.focus()}
+            onTouchStart={e => (e.currentTarget as any)._touchX = e.touches[0].clientX}
+            onTouchEnd={e => { const start = (e.currentTarget as any)._touchX; if (start == null) return; const diff = e.changedTouches[0].clientX - start; if (diff > 60 && hasPrev) navigateTo(currentIdx - 1); else if (diff < -60 && hasNext) navigateTo(currentIdx + 1) }}
+            style={{
+              position: 'absolute', inset: 0, zIndex: 100, outline: 'none',
+              background: 'rgba(0,0,0,0.92)', display: 'flex', alignItems: 'center', justifyContent: 'center',
+            }}>
+            {/* Close button */}
+            <button onClick={closeLightbox}
+              style={{
+                position: 'absolute', top: 16, right: 16, zIndex: 10, width: 40, height: 40, borderRadius: '50%',
+                background: 'rgba(255,255,255,0.1)', border: 'none', cursor: 'pointer',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+              }}>
+              <X size={20} color="white" />
+            </button>
+
+            {/* Counter */}
+            {allVisible.length > 1 && (
+              <div style={{ position: 'absolute', top: 20, left: 20, zIndex: 10, fontSize: 12, color: 'rgba(255,255,255,0.5)' }}>
+                {currentIdx + 1} / {allVisible.length}
+              </div>
+            )}
+
+            {/* Prev/Next buttons */}
+            {hasPrev && (
+              <button onClick={e => { e.stopPropagation(); navigateTo(currentIdx - 1) }}
+                style={{ position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)', zIndex: 10, background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'rgba(255,255,255,0.8)' }}>
+                <ChevronLeft size={22} />
+              </button>
+            )}
+            {hasNext && (
+              <button onClick={e => { e.stopPropagation(); navigateTo(currentIdx + 1) }}
+                style={{ position: 'absolute', right: isMobile ? 12 : 280, top: '50%', transform: 'translateY(-50%)', zIndex: 10, background: 'rgba(0,0,0,0.5)', border: 'none', borderRadius: '50%', width: 40, height: 40, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', color: 'rgba(255,255,255,0.8)' }}>
+                <ChevronRight size={22} />
+              </button>
+            )}
+
+            {/* Mobile info toggle button */}
+            {isMobile && (lightboxInfo || lightboxInfoLoading) && (
+              <button onClick={e => { e.stopPropagation(); setShowMobileInfo(prev => !prev) }}
+                style={{
+                  position: 'absolute', top: 16, right: 68, zIndex: 10, width: 40, height: 40, borderRadius: '50%',
+                  background: showMobileInfo ? 'rgba(255,255,255,0.25)' : 'rgba(255,255,255,0.1)',
+                  border: 'none', cursor: 'pointer',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                }}>
+                <Info size={20} color="white" />
+              </button>
+            )}
+
+            <div onClick={e => { if (e.target === e.currentTarget) closeLightbox() }} style={{ display: 'flex', gap: 16, alignItems: 'flex-start', justifyContent: 'center', padding: 20, width: '100%', height: '100%' }}>
+              <img
+                src={lightboxOriginalSrc}
+                alt=""
+                onClick={e => e.stopPropagation()}
+                style={{ maxWidth: (!isMobile && lightboxInfo) ? 'calc(100% - 280px)' : '100%', maxHeight: '100%', objectFit: 'contain', borderRadius: 10, cursor: 'default' }}
+              />
+
+              {/* Desktop info panel — liquid glass */}
+              {!isMobile && lightboxInfo && (
+                <div style={{
+                  width: 240, flexShrink: 0, borderRadius: 16, padding: 18,
+                  background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                  border: '1px solid rgba(255,255,255,0.12)', color: 'white',
+                  display: 'flex', flexDirection: 'column', gap: 14, maxHeight: '100%', overflowY: 'auto',
+                }}>
+                  {exifContent}
+                </div>
+              )}
+
+              {!isMobile && lightboxInfoLoading && (
+                <div style={{ width: 240, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <div className="w-6 h-6 border-2 rounded-full animate-spin" style={{ borderColor: 'rgba(255,255,255,0.2)', borderTopColor: 'white' }} />
+                </div>
+              )}
+            </div>
+
+            {/* Mobile bottom sheet */}
+            {isMobile && showMobileInfo && lightboxInfo && (
+              <div onClick={e => e.stopPropagation()} style={{
+                position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 5,
+                maxHeight: '60vh', overflowY: 'auto',
+                borderRadius: '16px 16px 0 0', padding: 18,
+                background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
+                border: '1px solid rgba(255,255,255,0.12)', borderBottom: 'none',
+                color: 'white', display: 'flex', flexDirection: 'column', gap: 14,
+              }}>
+                {exifContent}
               </div>
             )}
           </div>
-        </div>
-      )}
+        )
+      })()}
     </div>
   )
 }

client/src/components/Notifications/InAppNotificationItem.test.tsx

@@ -0,0 +1,207 @@
+// FE-COMP-NOTIF-001 to FE-COMP-NOTIF-016
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { useAuthStore } from '../../store/authStore';
+import { useSettingsStore } from '../../store/settingsStore';
+import { useInAppNotificationStore } from '../../store/inAppNotificationStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser, buildSettings } from '../../../tests/helpers/factories';
+import InAppNotificationItem from './InAppNotificationItem';
+
+const buildNotification = (overrides = {}) => ({
+  id: 1,
+  type: 'simple',
+  scope: 'trip',
+  target: 1,
+  sender_id: 2,
+  sender_username: 'alice',
+  sender_avatar: null,
+  recipient_id: 1,
+  title_key: 'notifications.title',
+  title_params: '{}',
+  text_key: 'notifications.empty',
+  text_params: '{}',
+  positive_text_key: null,
+  negative_text_key: null,
+  response: null,
+  navigate_text_key: null,
+  navigate_target: null,
+  is_read: 0,
+  created_at: new Date().toISOString(),
+  ...overrides,
+});
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+  seedStore(useSettingsStore, { settings: buildSettings() });
+});
+
+describe('InAppNotificationItem', () => {
+  it('FE-COMP-NOTIF-001: renders without crashing', () => {
+    render(<InAppNotificationItem notification={buildNotification()} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-002: shows sender avatar initial letter', () => {
+    render(<InAppNotificationItem notification={buildNotification({ sender_username: 'bob' })} />);
+    // Avatar shows first letter uppercase: "B"
+    expect(screen.getByText('B')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-003: shows notification title text', () => {
+    render(<InAppNotificationItem notification={buildNotification({ title_key: 'notifications.title' })} />);
+    // t('notifications.title') = "Notifications"
+    expect(screen.getByText('Notifications')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-004: shows notification body text', () => {
+    render(<InAppNotificationItem notification={buildNotification({ text_key: 'notifications.empty' })} />);
+    // t('notifications.empty') = "No notifications"
+    expect(screen.getByText('No notifications')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-005: shows Mark as read button for unread notification', () => {
+    render(<InAppNotificationItem notification={buildNotification({ is_read: 0 })} />);
+    expect(screen.getByTitle('Mark as read')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-006: does not show Mark as read button for read notification', () => {
+    render(<InAppNotificationItem notification={buildNotification({ is_read: 1 })} />);
+    expect(screen.queryByTitle('Mark as read')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-007: shows Delete button', () => {
+    render(<InAppNotificationItem notification={buildNotification()} />);
+    expect(screen.getByTitle('Delete')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-008: clicking Mark as read calls markRead', async () => {
+    const user = userEvent.setup();
+    const markRead = vi.fn().mockResolvedValue(undefined);
+    seedStore(useInAppNotificationStore, { markRead });
+    render(<InAppNotificationItem notification={buildNotification({ id: 42, is_read: 0 })} />);
+    await user.click(screen.getByTitle('Mark as read'));
+    expect(markRead).toHaveBeenCalledWith(42);
+  });
+
+  it('FE-COMP-NOTIF-009: clicking Delete calls deleteNotification', async () => {
+    const user = userEvent.setup();
+    const deleteNotification = vi.fn().mockResolvedValue(undefined);
+    seedStore(useInAppNotificationStore, { deleteNotification });
+    render(<InAppNotificationItem notification={buildNotification({ id: 99 })} />);
+    await user.click(screen.getByTitle('Delete'));
+    expect(deleteNotification).toHaveBeenCalledWith(99);
+  });
+
+  it('FE-COMP-NOTIF-010: shows relative timestamp', () => {
+    render(<InAppNotificationItem notification={buildNotification({ created_at: new Date().toISOString() })} />);
+    // Recent notification shows "just now"
+    expect(screen.getByText('just now')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-011: shows avatar image when sender_avatar is provided', () => {
+    render(
+      <InAppNotificationItem
+        notification={buildNotification({ sender_avatar: 'https://example.com/avatar.png' })}
+      />
+    );
+    expect(document.querySelector('img')).toBeInTheDocument();
+    expect(document.querySelector('img')?.getAttribute('src')).toBe('https://example.com/avatar.png');
+  });
+
+  it('FE-COMP-NOTIF-012: boolean notification shows Accept and Reject buttons', () => {
+    render(
+      <InAppNotificationItem
+        notification={buildNotification({
+          type: 'boolean',
+          positive_text_key: 'common.yes',
+          negative_text_key: 'common.no',
+        })}
+      />
+    );
+    expect(screen.getByText('Yes')).toBeInTheDocument();
+    expect(screen.getByText('No')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-013: clicking Accept calls respondToBoolean with positive', async () => {
+    const user = userEvent.setup();
+    const respondToBoolean = vi.fn().mockResolvedValue(undefined);
+    seedStore(useInAppNotificationStore, { respondToBoolean });
+    render(
+      <InAppNotificationItem
+        notification={buildNotification({
+          id: 55,
+          type: 'boolean',
+          positive_text_key: 'common.yes',
+          negative_text_key: 'common.no',
+          response: null,
+        })}
+      />
+    );
+    await user.click(screen.getByText('Yes'));
+    expect(respondToBoolean).toHaveBeenCalledWith(55, 'positive');
+  });
+
+  it('FE-COMP-NOTIF-014: clicking Reject calls respondToBoolean with negative', async () => {
+    const user = userEvent.setup();
+    const respondToBoolean = vi.fn().mockResolvedValue(undefined);
+    seedStore(useInAppNotificationStore, { respondToBoolean });
+    render(
+      <InAppNotificationItem
+        notification={buildNotification({
+          id: 66,
+          type: 'boolean',
+          positive_text_key: 'common.yes',
+          negative_text_key: 'common.no',
+          response: null,
+        })}
+      />
+    );
+    await user.click(screen.getByText('No'));
+    expect(respondToBoolean).toHaveBeenCalledWith(66, 'negative');
+  });
+
+  it('FE-COMP-NOTIF-015: navigate notification shows action button', () => {
+    render(
+      <InAppNotificationItem
+        notification={buildNotification({
+          type: 'navigate',
+          navigate_text_key: 'notifications.title',
+          navigate_target: '/trips/1',
+        })}
+      />
+    );
+    // t('notifications.title') = "Notifications" — the navigate button renders this
+    const navigateBtn = document.querySelector('button[style*="pointer"]') ??
+      Array.from(document.querySelectorAll('button')).find(b => b.textContent?.includes('Notifications'));
+    expect(navigateBtn).toBeInTheDocument();
+  });
+
+  it('FE-COMP-NOTIF-016: clicking navigate button marks read and navigates', async () => {
+    const user = userEvent.setup();
+    const markRead = vi.fn().mockResolvedValue(undefined);
+    const onClose = vi.fn();
+    seedStore(useInAppNotificationStore, { markRead });
+    render(
+      <InAppNotificationItem
+        notification={buildNotification({
+          id: 77,
+          type: 'navigate',
+          navigate_text_key: 'notifications.title',
+          navigate_target: '/trips/1',
+          is_read: 0,
+        })}
+        onClose={onClose}
+      />
+    );
+    // The navigate button renders t('notifications.title') = "Notifications"
+    const btn = Array.from(document.querySelectorAll('button')).find(
+      b => b.textContent?.includes('Notifications')
+    );
+    expect(btn).toBeTruthy();
+    await user.click(btn!);
+    expect(markRead).toHaveBeenCalledWith(77);
+    expect(onClose).toHaveBeenCalled();
+  });
+});

client/src/components/Notifications/InAppNotificationItem.tsx

@@ -59,10 +59,6 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
         borderBottom: '1px solid var(--border-secondary)',
       }}
     >
-      {/* Unread dot */}
-      {!notification.is_read && (
-        <div className="absolute left-2 top-1/2 -translate-y-1/2 w-1.5 h-1.5 rounded-full" style={{ background: '#6366f1' }} />
-      )}
 
       <div className="flex gap-3 items-start">
         {/* Sender avatar */}
@@ -102,7 +98,7 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
                   title={t('notifications.markRead')}
                   className="p-1 rounded transition-colors"
                   style={{ color: 'var(--text-faint)' }}
-                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = '#6366f1' }}
+                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)'; e.currentTarget.style.color = 'var(--text-primary)' }}
                   onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; e.currentTarget.style.color = 'var(--text-faint)' }}
                 >
                   <CheckCheck className="w-3.5 h-3.5" />
@@ -134,7 +130,7 @@ export default function InAppNotificationItem({ notification, onClose }: Notific
                 className="flex items-center gap-1 px-2.5 py-1 rounded-lg text-xs font-medium transition-colors"
                 style={{
                   background: notification.response === 'positive'
-                    ? '#6366f1'
+                    ? 'var(--text-primary)'
                     : notification.response === 'negative'
                       ? (dark ? '#27272a' : '#f1f5f9')
                       : (dark ? '#27272a' : '#f1f5f9'),

client/src/components/OAuth/ScopeGroupPicker.test.tsx

@@ -0,0 +1,119 @@
+// FE-COMP-SCOPE-001 to FE-COMP-SCOPE-009
+import { render, screen, waitFor } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { resetAllStores } from '../../../tests/helpers/store';
+import ScopeGroupPicker from './ScopeGroupPicker';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('ScopeGroupPicker', () => {
+  it('FE-COMP-SCOPE-001: renders scope groups', () => {
+    render(<ScopeGroupPicker selected={[]} onChange={vi.fn()} />);
+    // Several group headers should be visible
+    expect(screen.getAllByRole('button').length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-SCOPE-002: shows Select All button when nothing selected', () => {
+    render(<ScopeGroupPicker selected={[]} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: /select all/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-SCOPE-003: Select All calls onChange with all scopes', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ScopeGroupPicker selected={[]} onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: /select all/i }));
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const called = onChange.mock.calls[0][0] as string[];
+    expect(called.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-SCOPE-004: shows Deselect All button when all selected', async () => {
+    // First collect all scopes by clicking Select All and capturing the callback
+    const user = userEvent.setup();
+    const captured: string[][] = [];
+    const { rerender } = render(
+      <ScopeGroupPicker selected={[]} onChange={s => captured.push(s)} />
+    );
+    await user.click(screen.getByRole('button', { name: /select all/i }));
+    const allScopes = captured[0];
+
+    // Now rerender with all scopes selected
+    rerender(<ScopeGroupPicker selected={allScopes} onChange={vi.fn()} />);
+    expect(screen.getByRole('button', { name: /deselect all/i })).toBeInTheDocument();
+  });
+
+  it('FE-COMP-SCOPE-005: Deselect All calls onChange with empty array', async () => {
+    const user = userEvent.setup();
+    const captured: string[][] = [];
+
+    // Get all scopes first
+    const { rerender } = render(
+      <ScopeGroupPicker selected={[]} onChange={s => captured.push(s)} />
+    );
+    await user.click(screen.getByRole('button', { name: /select all/i }));
+    const allScopes = captured[0];
+
+    const onChange = vi.fn();
+    rerender(<ScopeGroupPicker selected={allScopes} onChange={onChange} />);
+    await user.click(screen.getByRole('button', { name: /deselect all/i }));
+    expect(onChange).toHaveBeenCalledWith([]);
+  });
+
+  it('FE-COMP-SCOPE-006: expanding a group reveals individual scope checkboxes', async () => {
+    const user = userEvent.setup();
+    render(<ScopeGroupPicker selected={[]} onChange={vi.fn()} />);
+
+    // Groups are collapsed by default — checkboxes for individual scopes not visible
+    const groupToggles = screen.getAllByRole('button').filter(b =>
+      !b.textContent?.toLowerCase().includes('select all') &&
+      !b.textContent?.toLowerCase().includes('deselect all')
+    );
+    // Click the first group expand button
+    await user.click(groupToggles[0]);
+    // Individual scope checkboxes should now appear (more than just group-level ones)
+    const checkboxes = screen.getAllByRole('checkbox');
+    expect(checkboxes.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-SCOPE-007: group checkbox selects all scopes in the group', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ScopeGroupPicker selected={[]} onChange={onChange} />);
+
+    const groupCheckboxes = screen.getAllByRole('checkbox');
+    await user.click(groupCheckboxes[0]);
+    expect(onChange).toHaveBeenCalledTimes(1);
+    const called = onChange.mock.calls[0][0] as string[];
+    expect(called.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-SCOPE-008: individual scope toggle adds/removes that scope', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    render(<ScopeGroupPicker selected={[]} onChange={onChange} />);
+
+    // Expand first group
+    const groupToggles = screen.getAllByRole('button').filter(b =>
+      !b.textContent?.toLowerCase().includes('select all') &&
+      !b.textContent?.toLowerCase().includes('deselect all')
+    );
+    await user.click(groupToggles[0]);
+
+    // There are now individual scope checkboxes — click the second one (first is group-level)
+    const checkboxes = screen.getAllByRole('checkbox');
+    await user.click(checkboxes[1]); // individual scope
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-SCOPE-009: count badge shown when some scopes selected in group', () => {
+    // Get any single scope key from the first group via Select All trick + manual slice
+    // We'll just select a scope by triggering group checkbox and passing it in
+    const firstGroupScope = 'trips:read'; // known scope from SCOPE_GROUPS
+    render(<ScopeGroupPicker selected={[firstGroupScope]} onChange={vi.fn()} />);
+    // Count badge like "(1/N)" should be visible
+    expect(screen.getByText(/\(\d+\/\d+\)/)).toBeInTheDocument();
+  });
+});

client/src/components/OAuth/ScopeGroupPicker.tsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react'
+import { ChevronDown, ChevronRight } from 'lucide-react'
+import { getScopesByGroup } from '../../api/oauthScopes'
+import { useTranslation } from '../../i18n'
+
+interface Props {
+  selected: string[]
+  onChange: (scopes: string[]) => void
+}
+
+export default function ScopeGroupPicker({ selected, onChange }: Props): React.ReactElement {
+  const { t } = useTranslation()
+  const [open, setOpen] = useState<Record<string, boolean>>({})
+
+  const scopesByGroup = getScopesByGroup(t)
+  const allScopeKeys = Object.values(scopesByGroup).flat().map(s => s.scope)
+  const allSelected  = allScopeKeys.every(s => selected.includes(s))
+
+  return (
+    <div className="space-y-1">
+      <div className="flex justify-end mb-2">
+        <button
+          type="button"
+          onClick={() => onChange(allSelected ? [] : allScopeKeys)}
+          className="text-xs px-2 py-0.5 rounded border transition-colors hover:bg-slate-100 dark:hover:bg-slate-700"
+          style={{ borderColor: 'var(--border-primary)', color: 'var(--text-secondary)' }}>
+          {allSelected ? t('settings.oauth.modal.deselectAll') : t('settings.oauth.modal.selectAll')}
+        </button>
+      </div>
+      <div className="space-y-1 max-h-96 overflow-y-auto pr-1">
+        {Object.entries(scopesByGroup).map(([group, groupScopes]) => {
+          const groupScopeKeys   = groupScopes.map(s => s.scope)
+          const allGroupSelected = groupScopeKeys.every(s => selected.includes(s))
+          const someGroupSelected = groupScopeKeys.some(s => selected.includes(s))
+          return (
+            <div key={group} className="rounded-lg border overflow-hidden" style={{ borderColor: 'var(--border-primary)' }}>
+              <div className="flex items-center gap-1 px-3 py-2" style={{ background: 'var(--bg-secondary)' }}>
+                <button
+                  type="button"
+                  onClick={() => setOpen(prev => ({ ...prev, [group]: !prev[group] }))}
+                  className="flex items-center gap-1 flex-1 text-xs font-semibold hover:opacity-70 transition-opacity text-left"
+                  style={{ color: 'var(--text-secondary)' }}>
+                  {open[group]
+                    ? <ChevronDown className="w-3 h-3 flex-shrink-0" />
+                    : <ChevronRight className="w-3 h-3 flex-shrink-0" />}
+                  {group}
+                  {someGroupSelected && (
+                    <span className="ml-1.5 text-xs font-normal" style={{ color: 'var(--text-tertiary)' }}>
+                      ({groupScopeKeys.filter(s => selected.includes(s)).length}/{groupScopeKeys.length})
+                    </span>
+                  )}
+                </button>
+                <input
+                  type="checkbox"
+                  checked={allGroupSelected}
+                  ref={el => { if (el) el.indeterminate = someGroupSelected && !allGroupSelected }}
+                  onChange={e => onChange(
+                    e.target.checked
+                      ? [...new Set([...selected, ...groupScopeKeys])]
+                      : selected.filter(s => !groupScopeKeys.includes(s))
+                  )}
+                  className="rounded"
+                  title={allGroupSelected ? `Deselect all ${group}` : `Select all ${group}`}
+                />
+              </div>
+              {open[group] && (
+                <div className="divide-y" style={{ borderColor: 'var(--border-primary)' }}>
+                  {groupScopes.map(({ scope, label, description }) => (
+                    <label
+                      key={scope}
+                      className="flex items-start gap-2.5 px-3 py-2 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors">
+                      <input
+                        type="checkbox"
+                        checked={selected.includes(scope)}
+                        onChange={e => onChange(
+                          e.target.checked
+                            ? [...selected, scope]
+                            : selected.filter(s => s !== scope)
+                        )}
+                        className="mt-0.5 rounded flex-shrink-0"
+                      />
+                      <div>
+                        <p className="text-xs font-medium" style={{ color: 'var(--text-primary)' }}>{label}</p>
+                        <p className="text-xs" style={{ color: 'var(--text-tertiary)' }}>{description}</p>
+                      </div>
+                    </label>
+                  ))}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

client/src/components/PDF/JourneyBookPDF.test.tsx

@@ -0,0 +1,147 @@
+// FE-COMP-JOURNEYPDF-001 to FE-COMP-JOURNEYPDF-006
+//
+// JourneyBookPDF.tsx exports an async function `downloadJourneyBookPDF(journey)`
+// that opens a new browser window and writes a full HTML document into it.
+// It does NOT render a React component. Tests verify window.open behaviour.
+
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+
+// Mock `marked` so we don't need the real markdown parser
+vi.mock('marked', () => ({
+  marked: {
+    parse: (str: string) => `<p>${str}</p>`,
+  },
+}));
+
+import { downloadJourneyBookPDF } from './JourneyBookPDF';
+import type { JourneyDetail } from '../../store/journeyStore';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function buildJourney(overrides: Partial<JourneyDetail> = {}): JourneyDetail {
+  return {
+    id: 1,
+    user_id: 1,
+    title: 'Iceland Ring Road',
+    subtitle: 'Two weeks around the island',
+    status: 'active',
+    cover_image: null,
+    cover_gradient: null,
+    created_at: Date.now(),
+    updated_at: Date.now(),
+    entries: [
+      {
+        id: 10,
+        journey_id: 1,
+        author_id: 1,
+        type: 'entry',
+        title: 'Golden Circle',
+        story: 'An incredible day of geysers and waterfalls.',
+        entry_date: '2026-07-01',
+        entry_time: '09:00',
+        location_name: 'Thingvellir',
+        location_lat: 64.255,
+        location_lng: -21.13,
+        mood: 'excited',
+        weather: 'sunny',
+        tags: [],
+        pros_cons: { pros: ['Amazing views'], cons: ['Crowded'] },
+        visibility: 'private',
+        sort_order: 0,
+        created_at: Date.now(),
+        updated_at: Date.now(),
+        source_trip_id: null,
+        source_place_id: null,
+        source_trip_name: null,
+        photos: [
+          {
+            id: 100,
+            entry_id: 10,
+            provider: 'local',
+            file_path: 'journey/geyser.jpg',
+            thumbnail_path: null,
+            asset_id: null,
+            owner_id: null,
+            shared: 0,
+            caption: 'Strokkur erupting',
+            sort_order: 0,
+            created_at: Date.now(),
+          },
+        ],
+      },
+    ],
+    trips: [],
+    contributors: [],
+    stats: { entries: 1, photos: 1, cities: 1 },
+    ...overrides,
+  } as unknown as JourneyDetail;
+}
+
+// ── Mock window.open ─────────────────────────────────────────────────────────
+
+let mockWindow: {
+  document: { write: ReturnType<typeof vi.fn>; close: ReturnType<typeof vi.fn> };
+  focus: ReturnType<typeof vi.fn>;
+};
+
+beforeEach(() => {
+  mockWindow = {
+    document: { write: vi.fn(), close: vi.fn() },
+    focus: vi.fn(),
+  };
+  vi.spyOn(window, 'open').mockReturnValue(mockWindow as any);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe('downloadJourneyBookPDF', () => {
+  it('FE-COMP-JOURNEYPDF-001: opens a new window', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    expect(window.open).toHaveBeenCalledWith('', '_blank');
+  });
+
+  it('FE-COMP-JOURNEYPDF-002: writes HTML to the new window', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    expect(mockWindow.document.write).toHaveBeenCalledTimes(1);
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('</html>');
+  });
+
+  it('FE-COMP-JOURNEYPDF-003: closes the document after writing', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    expect(mockWindow.document.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-JOURNEYPDF-004: HTML contains the journey title', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('Iceland Ring Road');
+  });
+
+  it('FE-COMP-JOURNEYPDF-005: HTML contains entry content', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('Golden Circle');
+    // Story text is rendered via markdown
+    expect(html).toContain('An incredible day of geysers and waterfalls.');
+    // Pros/cons verdict cards are included
+    expect(html).toContain('Amazing views');
+    expect(html).toContain('Crowded');
+  });
+
+  it('FE-COMP-JOURNEYPDF-006: handles empty entries gracefully', async () => {
+    const journey = buildJourney({ entries: [] });
+    await downloadJourneyBookPDF(journey);
+    expect(window.open).toHaveBeenCalled();
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('Iceland Ring Road');
+    // No entry pages, but cover and closing page are still present
+    expect(html).toContain('Journey Book');
+    expect(html).toContain('The End');
+  });
+});

client/src/components/PDF/JourneyBookPDF.tsx

@@ -0,0 +1,306 @@
+// Journey Photo Book PDF — Polarsteps-inspired, magazine-density
+import { marked } from 'marked'
+import type { JourneyDetail, JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
+
+function esc(str: string | null | undefined): string {
+  if (!str) return ''
+  return String(str).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+}
+
+function md(str: string | null | undefined): string {
+  if (!str) return ''
+  return marked.parse(str, { async: false, breaks: true }) as string
+}
+
+function abs(url: string | null | undefined): string {
+  if (!url) return ''
+  if (url.startsWith('http://') || url.startsWith('https://') || url.startsWith('data:')) return url
+  return window.location.origin + (url.startsWith('/') ? '' : '/') + url
+}
+
+function pSrc(p: JourneyPhoto): string {
+  return abs(`/api/photos/${p.photo_id}/original`)
+}
+
+function fmtDate(d: string): string {
+  const date = new Date(d + 'T00:00:00')
+  return date.toLocaleDateString('en', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })
+}
+
+function fmtShort(d: string): string {
+  return new Date(d + 'T00:00:00').toLocaleDateString('en', { month: 'short', day: 'numeric' })
+}
+
+function groupByDate(entries: JourneyEntry[]): Map<string, JourneyEntry[]> {
+  const groups = new Map<string, JourneyEntry[]>()
+  for (const e of entries) {
+    if (!e.entry_date) continue
+    if (!groups.has(e.entry_date)) groups.set(e.entry_date, [])
+    groups.get(e.entry_date)!.push(e)
+  }
+  return groups
+}
+
+function renderProscons(entry: JourneyEntry): string {
+  const pc = entry.pros_cons
+  if (!pc) return ''
+  const pros = pc.pros?.filter(p => p.trim()) || []
+  const cons = pc.cons?.filter(c => c.trim()) || []
+  if (pros.length === 0 && cons.length === 0) return ''
+
+  return `<div class="verdict-wrap"><div class="verdict-row">
+    ${pros.length > 0 ? `<div class="verdict-card pros"><div class="verdict-label">Loved it</div><ul>${pros.map(p => `<li>${esc(p)}</li>`).join('')}</ul></div>` : ''}
+    ${cons.length > 0 ? `<div class="verdict-card cons"><div class="verdict-label">Could be better</div><ul>${cons.map(c => `<li>${esc(c)}</li>`).join('')}</ul></div>` : ''}
+  </div></div>`
+}
+
+function renderPhotoBlock(photos: JourneyPhoto[]): string {
+  if (photos.length === 0) return ''
+  if (photos.length === 1) {
+    return `<div class="entry-photo-single"><img src="${pSrc(photos[0])}" /></div>`
+  }
+  if (photos.length === 2) {
+    return `<div class="entry-photo-duo">${photos.map(p => `<div class="photo-cell"><img src="${pSrc(p)}" /></div>`).join('')}</div>`
+  }
+  // 3+ photos: hero left + stack right
+  return `<div class="entry-photo-trio">
+    <div class="photo-hero"><img src="${pSrc(photos[0])}" /></div>
+    <div class="photo-stack">
+      <div class="photo-cell"><img src="${pSrc(photos[1])}" /></div>
+      <div class="photo-cell"><img src="${pSrc(photos[2])}" /></div>
+    </div>
+  </div>`
+}
+
+export async function downloadJourneyBookPDF(journey: JourneyDetail) {
+  const entries = (journey.entries || []).filter(e => e.type !== 'skeleton' && e.type !== 'gallery')
+  const allPhotos = entries.flatMap(e => e.photos || [])
+  const coverUrl = journey.cover_image ? abs(`/uploads/${journey.cover_image}`) : (allPhotos[0] ? pSrc(allPhotos[0]) : '')
+
+  const grouped = groupByDate(entries)
+  const dates = [...grouped.keys()].sort()
+
+  // Build entry pages — one per entry, day header inline on first entry of day
+  const entryPages: string[] = []
+  let pageNum = 1 // cover=1
+  dates.forEach((date, di) => {
+    const dayEntries = grouped.get(date)!
+    dayEntries.forEach((entry, ei) => {
+      pageNum++
+      const isFirstOfDay = ei === 0
+      const photos = entry.photos || []
+      const meta = [entry.entry_time, entry.location_name].filter(Boolean).join(' · ')
+
+      // Day header (inline, only on first entry of day)
+      const dayHeaderHtml = isFirstOfDay
+        ? `<div class="day-header">Day ${di + 1} · ${fmtDate(date)}</div>`
+        : ''
+
+      // Photo block
+      const photoHtml = renderPhotoBlock(photos)
+
+      // Pros/cons
+      const prosconsHtml = renderProscons(entry)
+
+      // Story (markdown)
+      const storyHtml = entry.story ? `<div class="entry-story">${md(entry.story)}</div>` : ''
+
+      entryPages.push(`
+        <div class="entry-page">
+          ${dayHeaderHtml}
+          ${photoHtml}
+          <div class="entry-content">
+            ${meta ? `<div class="entry-meta">${esc(meta)}</div>` : ''}
+            ${entry.title ? `<h2 class="entry-title">${esc(entry.title)}</h2>` : ''}
+            ${storyHtml}
+            ${prosconsHtml}
+          </div>
+        </div>
+      `)
+    })
+  })
+
+  const totalPages = pageNum + 1 // +1 for closing page
+
+  const html = `<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<base href="${window.location.origin}/">
+<title>${esc(journey.title)} — Journey Book</title>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body { font-family: 'Inter', -apple-system, sans-serif; color: #1A1A1A; font-size: 11pt; line-height: 1.55; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+  img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+
+  @page { size: A4 landscape; margin: 0; }
+
+  /* ── Cover ─── */
+  .cover-page {
+    width: 100%; height: 100vh; position: relative; overflow: hidden;
+    background: #0a0a0f; color: white; display: flex; align-items: center; justify-content: center;
+    page-break-after: always;
+  }
+  .cover-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
+  .cover-dim { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
+  .cover-mesh { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(99,102,241,0.2), transparent 50%), radial-gradient(circle at 80% 70%, rgba(236,72,153,0.15), transparent 50%); }
+  .cover-content { position: relative; z-index: 2; text-align: center; padding: 60pt; }
+  .cover-label { font-size: 9pt; font-weight: 700; letter-spacing: 6pt; text-transform: uppercase; opacity: 0.35; margin-bottom: 24pt; }
+  .cover-content h1 { font-size: 56pt; font-weight: 800; letter-spacing: -0.03em; line-height: 0.9; margin-bottom: 10pt; }
+  .cover-content .sub { font-size: 14pt; font-weight: 400; opacity: 0.7; margin-bottom: 36pt; }
+  .cover-stats { display: flex; gap: 48pt; justify-content: center; }
+  .cover-stat-val { font-size: 32pt; font-weight: 800; letter-spacing: -0.02em; }
+  .cover-stat-label { font-size: 10pt; text-transform: uppercase; letter-spacing: 2pt; opacity: 0.4; margin-top: 3pt; }
+  .cover-footer { position: absolute; bottom: 20pt; left: 0; right: 0; text-align: center; font-size: 9pt; opacity: 0.2; letter-spacing: 3pt; text-transform: uppercase; }
+
+  /* ── TOC ─── */
+  .toc-page {
+    width: 100%; height: 100vh; padding: 48pt 64pt; display: flex; flex-direction: column;
+    background: white; page-break-after: always;
+  }
+  .toc-top-label { font-size: 9pt; font-weight: 700; letter-spacing: 5pt; text-transform: uppercase; color: #94a3b8; margin-bottom: 16pt; }
+  .toc-title-block h2 { font-size: 36pt; font-weight: 800; letter-spacing: -1pt; color: #0a0a0f; margin-bottom: 4pt; }
+  .toc-title-block .sub { font-size: 13pt; color: #71717a; margin-bottom: 24pt; }
+  .toc-divider { height: 1pt; background: #e4e4e7; margin: 16pt 0; }
+  .toc-body { flex: 1; columns: 2; column-gap: 40pt; }
+  .toc-day { break-inside: avoid; margin-bottom: 14pt; }
+  .toc-day-label { font-size: 9pt; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #71717a; margin-bottom: 4pt; }
+  .toc-entry { display: flex; align-items: baseline; gap: 4pt; font-size: 11pt; color: #3f3f46; margin-bottom: 2pt; }
+  .toc-entry .toc-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200pt; }
+  .toc-entry .toc-dots { flex: 1; border-bottom: 1pt dotted #d4d4d8; margin: 0 4pt; min-width: 20pt; }
+  .toc-entry .toc-page { font-size: 10pt; color: #a1a1aa; font-weight: 500; flex-shrink: 0; }
+  .toc-stats { display: flex; gap: 32pt; margin-top: auto; padding-top: 16pt; border-top: 1pt solid #e4e4e7; }
+  .toc-stat-val { font-size: 18pt; font-weight: 800; color: #0a0a0f; }
+  .toc-stat-label { font-size: 9pt; text-transform: uppercase; letter-spacing: 1pt; color: #94a3b8; }
+
+  /* ── Entry Page ─── */
+  .entry-page {
+    width: 100%; min-height: 100vh; padding: 56pt 48pt 48pt;
+    page-break-after: always;
+    display: flex; flex-direction: column;
+  }
+
+  /* Day header — inline */
+  .day-header {
+    font-size: 9pt; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
+    color: #71717a; text-align: center; margin-bottom: 16pt; position: relative;
+    display: flex; align-items: center; gap: 12pt;
+  }
+  .day-header::before, .day-header::after { content: ''; flex: 1; height: 0.5pt; background: #d4d4d8; }
+
+  /* Photos */
+  .entry-photo-single { border-radius: 8pt; overflow: hidden; margin-bottom: 16pt; height: 55vh; }
+  .entry-photo-single img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .entry-photo-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 6pt; border-radius: 8pt; overflow: hidden; margin-bottom: 16pt; height: 45vh; }
+  .entry-photo-trio { display: grid; grid-template-columns: 3fr 2fr; gap: 6pt; border-radius: 8pt; overflow: hidden; margin-bottom: 16pt; height: 50vh; }
+  .photo-cell { overflow: hidden; }
+  .photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .photo-hero { overflow: hidden; }
+  .photo-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
+  .photo-stack { display: flex; flex-direction: column; gap: 6pt; }
+  .photo-stack .photo-cell { flex: 1; }
+
+  /* Entry content */
+  .entry-content { flex: 1; }
+  .entry-meta { font-size: 10pt; letter-spacing: 0.04em; text-transform: uppercase; color: #71717a; font-weight: 500; margin-bottom: 6pt; }
+  h2.entry-title { font-size: 28pt; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 10pt; color: #0a0a0f; }
+  .entry-story { font-size: 11pt; line-height: 1.65; color: #3f3f46; }
+  .entry-story p { margin: 0 0 8pt; }
+  .entry-story strong { font-weight: 600; color: #0a0a0f; }
+  .entry-story em { font-style: italic; }
+  .entry-story blockquote { margin: 12pt 0; padding-left: 12pt; border-left: 2pt solid #d4d4d8; font-style: italic; color: #52525b; }
+  .entry-story ul, .entry-story ol { margin: 8pt 0; padding-left: 16pt; }
+  .entry-story li { margin-bottom: 4pt; }
+  .entry-story a { color: #2563eb; text-decoration: none; }
+
+  /* Verdict */
+  .verdict-wrap { break-inside: avoid; padding-top: 14pt; }
+  .verdict-row { display: flex; gap: 10pt; }
+  .verdict-card { flex: 1; padding: 10pt 12pt; border-radius: 6pt; font-size: 9.5pt; }
+  .verdict-card.pros { background: #f0fdf4; border: 0.5pt solid #bbf7d0; }
+  .verdict-card.cons { background: #fef2f2; border: 0.5pt solid #fecaca; }
+  .verdict-label { font-size: 8pt; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6pt; }
+  .verdict-card.pros .verdict-label { color: #15803d; }
+  .verdict-card.cons .verdict-label { color: #b91c1c; }
+  .verdict-card ul { margin: 0; padding: 0; list-style: none; }
+  .verdict-card li { padding: 2pt 0; position: relative; padding-left: 10pt; }
+  .verdict-card li::before { content: '•'; position: absolute; left: 0; }
+  .verdict-card.pros li { color: #14532d; }
+  .verdict-card.pros li::before { color: #22c55e; }
+  .verdict-card.cons li { color: #7f1d1d; }
+  .verdict-card.cons li::before { color: #ef4444; }
+
+  /* ── Closing ─── */
+  .closing-page {
+    width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;
+    background: #0a0a0f; color: white; text-align: center; page-break-after: auto;
+  }
+  .closing-title { font-size: 32pt; font-weight: 300; letter-spacing: -1pt; opacity: 0.6; margin-bottom: 8pt; }
+  .closing-sub { font-size: 10pt; opacity: 0.25; letter-spacing: 3pt; text-transform: uppercase; }
+
+  /* ── Print ─── */
+  @media print {
+    .print-bar { display: none !important; }
+    body { margin: 0; }
+    .entry-page { orphans: 3; widows: 3; }
+    h2.entry-title { page-break-after: avoid; }
+    .verdict-row { page-break-inside: avoid; }
+    .entry-photo-single, .entry-photo-duo, .entry-photo-trio { page-break-after: avoid; }
+  }
+
+  .print-bar {
+    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
+    background: rgba(15,23,42,0.95); backdrop-filter: blur(12px);
+    padding: 12px 24px; display: flex; align-items: center; justify-content: center; gap: 12px;
+  }
+  .print-bar button { padding: 8px 24px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; border: none; }
+  .print-bar .btn-save { background: white; color: #0f172a; }
+  .print-bar .btn-close { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.15); }
+  .print-bar .info { font-size: 11px; color: rgba(255,255,255,0.4); }
+</style>
+</head>
+<body>
+  <div class="print-bar">
+    <span class="info">${esc(journey.title)} · ${totalPages} pages</span>
+    <button class="btn-save" onclick="window.print()">Save as PDF</button>
+    <button class="btn-close" onclick="window.close()">Close</button>
+  </div>
+
+  <!-- Page 1: Cover -->
+  <div class="cover-page">
+    ${coverUrl ? `<div class="cover-bg" style="background-image:url('${coverUrl}')"></div>` : ''}
+    <div class="cover-dim"></div>
+    <div class="cover-mesh"></div>
+    <div class="cover-content">
+      <div class="cover-label">Journey Book</div>
+      <h1>${esc(journey.title)}</h1>
+      ${journey.subtitle ? `<div class="sub">${esc(journey.subtitle)}</div>` : ''}
+      <div class="cover-stats">
+        <div><div class="cover-stat-val">${dates.length}</div><div class="cover-stat-label">Days</div></div>
+        <div><div class="cover-stat-val">${entries.length}</div><div class="cover-stat-label">Entries</div></div>
+        <div><div class="cover-stat-val">${allPhotos.length}</div><div class="cover-stat-label">Photos</div></div>
+      </div>
+    </div>
+    <div class="cover-footer">Made with TREK</div>
+  </div>
+
+  <!-- Entry Pages -->
+  ${entryPages.join('\n')}
+
+  <!-- Closing Page -->
+  <div class="closing-page">
+    <div>
+      <div class="closing-title">The End</div>
+      <div class="closing-sub">Made with TREK · ${new Date().getFullYear()}</div>
+    </div>
+  </div>
+
+</body>
+</html>`
+
+  const win = window.open('', '_blank')
+  if (!win) return
+  win.document.write(html)
+  win.document.close()
+}

client/src/components/PDF/TripPDF.test.ts

@@ -0,0 +1,293 @@
+// FE-COMP-TRIPPDF-001 to FE-COMP-TRIPPDF-010
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { http, HttpResponse } from 'msw'
+import { downloadTripPDF } from './TripPDF'
+import { server } from '../../../tests/helpers/msw/server'
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+const minimalArgs = {
+  trip: { id: 1, title: 'My Trip', description: null, cover_image: null } as any,
+  days: [{ id: 1, day_number: 1, title: null, date: '2025-06-01' }] as any[],
+  places: [],
+  assignments: {},
+  categories: [],
+  dayNotes: [],
+  reservations: [],
+  t: (key: string, params?: any) => {
+    if (params?.n !== undefined) return `Day ${params.n}`
+    return key
+  },
+  locale: 'en-US',
+}
+
+function getOverlay(): HTMLElement | null {
+  return document.getElementById('pdf-preview-overlay')
+}
+
+function getIframe(): HTMLIFrameElement | null {
+  return document.querySelector('#pdf-preview-overlay iframe')
+}
+
+// ── Setup ─────────────────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  // Stub window.location.origin
+  Object.defineProperty(window, 'location', {
+    value: { origin: 'http://localhost:3000', pathname: '/', href: 'http://localhost:3000/', search: '' },
+    writable: true,
+    configurable: true,
+  })
+
+  // Default MSW handlers for this test suite
+  server.use(
+    http.get('/api/trips/:id/accommodations', () =>
+      HttpResponse.json({ accommodations: [] })
+    ),
+    http.get('/api/maps/place-photo/:placeId', () =>
+      HttpResponse.json({ photoUrl: null })
+    ),
+  )
+})
+
+afterEach(() => {
+  // Clean up any overlay left by the function under test
+  document.getElementById('pdf-preview-overlay')?.remove()
+  vi.restoreAllMocks()
+})
+
+// ── Shared rich fixtures ──────────────────────────────────────────────────────
+
+const dayWithPlaces = { id: 10, day_number: 1, title: 'Rome Day', date: '2025-06-01' } as any
+const placeWithDetails = {
+  id: 100,
+  name: 'Colosseum',
+  description: 'Ancient amphitheater',
+  address: 'Piazza del Colosseo, Rome',
+  category_id: 5,
+  price: '15',
+  image_url: null,
+  google_place_id: null,
+  place_time: '10:00',
+  notes: 'Book tickets in advance',
+} as any
+const assignmentForDay = { id: 200, day_id: 10, place_id: 100, order_index: 0, place: placeWithDetails }
+const categoryForPlace = { id: 5, name: 'Landmark', icon: 'landmark', color: '#e11d48' } as any
+const dayNote = { id: 300, day_id: 10, text: 'Remember sunscreen', time: '08:00', icon: 'Info', sort_order: 1 } as any
+const transportReservation = {
+  id: 400,
+  title: 'Flight to Rome',
+  type: 'flight',
+  reservation_time: '2025-06-01T14:30:00',
+  confirmation_number: 'ABC123',
+  metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),
+} as any
+
+const richArgs = {
+  trip: { id: 10, title: 'Italy Trip', description: 'Summer adventure', cover_image: '/uploads/cover.jpg' } as any,
+  days: [dayWithPlaces],
+  places: [placeWithDetails],
+  assignments: { '10': [assignmentForDay] } as any,
+  categories: [categoryForPlace],
+  dayNotes: [dayNote],
+  reservations: [transportReservation],
+  t: (key: string, params?: any) => {
+    if (params?.n !== undefined) return `Day ${params.n}`
+    return key
+  },
+  locale: 'en-US',
+}
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('downloadTripPDF', () => {
+  it('FE-COMP-TRIPPDF-001: resolves without throwing', async () => {
+    await expect(downloadTripPDF(minimalArgs)).resolves.not.toThrow()
+  })
+
+  it('FE-COMP-TRIPPDF-002: appends an overlay div to document.body', async () => {
+    await downloadTripPDF(minimalArgs)
+    expect(document.getElementById('pdf-preview-overlay')).not.toBeNull()
+  })
+
+  it('FE-COMP-TRIPPDF-003: overlay contains an iframe with srcdoc', async () => {
+    await downloadTripPDF(minimalArgs)
+    const iframe = getIframe()
+    expect(iframe).not.toBeNull()
+    expect(iframe!.srcdoc).toBeTruthy()
+    expect(iframe!.srcdoc.length).toBeGreaterThan(0)
+  })
+
+  it('FE-COMP-TRIPPDF-004: HTML contains the trip title', async () => {
+    await downloadTripPDF(minimalArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('My Trip')
+  })
+
+  it('FE-COMP-TRIPPDF-005: HTML contains a day section for each day', async () => {
+    const args = {
+      ...minimalArgs,
+      days: [{ id: 1, day_number: 1, title: 'Day One', date: '2025-06-01' }] as any[],
+    }
+    await downloadTripPDF(args)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Day One')
+  })
+
+  it('FE-COMP-TRIPPDF-006: escHtml prevents XSS in trip title', async () => {
+    const args = {
+      ...minimalArgs,
+      trip: { id: 1, title: '<script>alert(1)</script>', description: null, cover_image: null } as any,
+    }
+    await downloadTripPDF(args)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).not.toContain('<script>alert(1)</script>')
+    expect(iframe!.srcdoc).toContain('&lt;script&gt;')
+  })
+
+  it('FE-COMP-TRIPPDF-007: close button removes the overlay from the DOM', async () => {
+    await downloadTripPDF(minimalArgs)
+    const closeBtn = document.getElementById('pdf-close-btn') as HTMLButtonElement
+    expect(closeBtn).not.toBeNull()
+    closeBtn.click()
+    expect(document.getElementById('pdf-preview-overlay')).toBeNull()
+  })
+
+  it('FE-COMP-TRIPPDF-008: clicking backdrop outside the card removes the overlay', async () => {
+    await downloadTripPDF(minimalArgs)
+    const overlay = getOverlay()!
+    overlay.click()
+    expect(document.getElementById('pdf-preview-overlay')).toBeNull()
+  })
+
+  it('FE-COMP-TRIPPDF-009: works with no days (empty itinerary)', async () => {
+    const args = { ...minimalArgs, days: [] }
+    await expect(downloadTripPDF(args)).resolves.not.toThrow()
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('<!DOCTYPE html>')
+    // No day sections — should not contain day-section class
+    expect(iframe!.srcdoc).not.toContain('class="day-section')
+  })
+
+  it('FE-COMP-TRIPPDF-010: calls accommodationsApi.list with the trip id', async () => {
+    const { accommodationsApi } = await import('../../api/client')
+    const spy = vi.spyOn(accommodationsApi, 'list')
+    await downloadTripPDF(minimalArgs)
+    expect(spy).toHaveBeenCalledWith(1)
+  })
+
+  it('FE-COMP-TRIPPDF-011: renders place cards with name, address and category badge', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Colosseum')
+    expect(iframe!.srcdoc).toContain('Piazza del Colosseo, Rome')
+    expect(iframe!.srcdoc).toContain('Landmark')
+  })
+
+  it('FE-COMP-TRIPPDF-012: renders note cards in day body', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Remember sunscreen')
+  })
+
+  it('FE-COMP-TRIPPDF-013: renders transport reservation cards', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Flight to Rome')
+    expect(iframe!.srcdoc).toContain('ABC123')
+  })
+
+  it('FE-COMP-TRIPPDF-014: renders cover image when trip has cover_image', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    // Cover image rendered as background-image on .cover-bg
+    expect(iframe!.srcdoc).toContain('cover.jpg')
+  })
+
+  it('FE-COMP-TRIPPDF-015: renders accommodation section when accommodations exist', async () => {
+    server.use(
+      http.get('/api/trips/:id/accommodations', () =>
+        HttpResponse.json({
+          accommodations: [{
+            id: 1,
+            start_day_id: 10,
+            end_day_id: 10,
+            place_name: 'Hotel Roma',
+            place_address: 'Via Roma 1',
+            check_in: '15:00',
+            check_out: '11:00',
+            notes: 'Breakfast included',
+            confirmation: 'CONF999',
+          }],
+        })
+      ),
+    )
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Hotel Roma')
+    expect(iframe!.srcdoc).toContain('CONF999')
+  })
+
+  it('FE-COMP-TRIPPDF-016: renders place description and price chip', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Ancient amphitheater')
+    // Price chip: 15 EUR
+    expect(iframe!.srcdoc).toContain('15')
+    expect(iframe!.srcdoc).toContain('EUR')
+  })
+
+  it('FE-COMP-TRIPPDF-017: renders trip description on cover', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('Summer adventure')
+  })
+
+  it('FE-COMP-TRIPPDF-018: renders place with direct image URL', async () => {
+    const argsWithImg = {
+      ...richArgs,
+      assignments: {
+        '10': [{
+          ...assignmentForDay,
+          place: { ...placeWithDetails, image_url: '/uploads/colosseum.jpg' },
+        }],
+      } as any,
+    }
+    await downloadTripPDF(argsWithImg)
+    const iframe = getIframe()
+    expect(iframe!.srcdoc).toContain('colosseum.jpg')
+  })
+
+  it('FE-COMP-TRIPPDF-019: fetches google place photos for places with google_place_id', async () => {
+    let photoCalled = false
+    server.use(
+      http.get('/api/maps/place-photo/:placeId', () => {
+        photoCalled = true
+        return HttpResponse.json({ photoUrl: 'https://example.com/photo.jpg' })
+      }),
+    )
+    const argsWithGooglePlace = {
+      ...richArgs,
+      assignments: {
+        '10': [{
+          ...assignmentForDay,
+          place: { ...placeWithDetails, image_url: null, google_place_id: 'ChIJrTLr-GyuEmsRBfy61i59si0' },
+        }],
+      } as any,
+    }
+    await downloadTripPDF(argsWithGooglePlace)
+    expect(photoCalled).toBe(true)
+  })
+
+  it('FE-COMP-TRIPPDF-020: renders empty day message when no items assigned', async () => {
+    const args = {
+      ...minimalArgs,
+      days: [{ id: 99, day_number: 2, title: 'Free Day', date: '2025-06-02' }] as any[],
+      assignments: {},
+    }
+    await downloadTripPDF(args)
+    const iframe = getIframe()
+    // The empty-day div should appear (contains the translation key for empty day)
+    expect(iframe!.srcdoc).toContain('dayplan.emptyDay')
+  })
+})

client/src/components/PDF/TripPDF.tsx

@@ -1,22 +1,35 @@
 // Trip PDF via browser print window
 import { createElement } from 'react'
 import { getCategoryIcon } from '../shared/categoryIcons'
-import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark } from 'lucide-react'
-import { mapsApi } from '../../api/client'
+import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark, Hotel, LogIn, LogOut, KeyRound, BedDouble, Utensils, Users, LucideIcon } from 'lucide-react'
+import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNotesMap } from '../../types'
 
+function renderLucideIcon(icon:LucideIcon, props = {}) {
+  if (!_renderToStaticMarkup) return ''
+  return _renderToStaticMarkup(
+    createElement(icon, props)
+  );
+}
+
 const NOTE_ICON_MAP = { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle, ShoppingBag, Bookmark }
 function noteIconSvg(iconId) {
-  if (!_renderToStaticMarkup) return ''
   const Icon = NOTE_ICON_MAP[iconId] || FileText
-  return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' }))
+  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#94a3b8' })
 }
 
-const TRANSPORT_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
-function transportIconSvg(type) {
-  if (!_renderToStaticMarkup) return ''
-  const Icon = TRANSPORT_ICON_MAP[type] || Ticket
-  return _renderToStaticMarkup(createElement(Icon, { size: 14, strokeWidth: 1.8, color: '#3b82f6' }))
+const RESERVATION_ICON_MAP = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship, restaurant: Utensils, event: Ticket, tour: Users, other: FileText }
+const RESERVATION_COLOR_MAP = { flight: '#3b82f6', train: '#06b6d4', bus: '#6b7280', car: '#6b7280', cruise: '#0ea5e9', restaurant: '#ef4444', event: '#f59e0b', tour: '#10b981', other: '#6b7280' }
+function reservationIconSvg(type) {
+  const Icon = RESERVATION_ICON_MAP[type] || Ticket
+  const color = RESERVATION_COLOR_MAP[type] || '#3b82f6'
+  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color })
+}
+
+const ACCOMMODATION_ICON_MAP = { accommodation: Hotel, checkin: LogIn, checkout: LogOut, location: MapPin, note: FileText, confirmation: KeyRound }
+function accommodationIconSvg(type) {
+  const Icon = ACCOMMODATION_ICON_MAP[type] || BedDouble
+  return renderLucideIcon(Icon, { size: 14, strokeWidth: 1.8, color: '#03398f', className: 'accommodation-icon' })
 }
 
 // ── SVG inline icons (for chips) ─────────────────────────────────────────────
@@ -115,6 +128,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   const sorted = [...(days || [])].sort((a, b) => a.day_number - b.day_number)
   const range = longDateRange(sorted, loc)
   const coverImg = safeImg(trip?.cover_image)
+  //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
+  const accommodations = await accommodationsApi.list(trip.id);
 
   // Pre-fetch place photos from Google
   const photoMap = await fetchPlacePhotos(assignments)
@@ -131,19 +146,18 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
     const notes = (dayNotes || []).filter(n => n.day_id === day.id)
     const cost = dayCost(assignments, day.id, loc)
 
-    // Transport bookings for this day
-    const TRANSPORT_TYPES = new Set(['flight', 'train', 'bus', 'car', 'cruise'])
-    const dayTransport = (reservations || []).filter(r => {
-      if (!r.reservation_time || !TRANSPORT_TYPES.has(r.type)) return false
+    // Reservations for this day (hotel rendered via accommodations block)
+    const dayReservations = (reservations || []).filter(r => {
+      if (!r.reservation_time || r.type === 'hotel') return false
       return day.date && r.reservation_time.split('T')[0] === day.date
     })
 
     const merged = []
     assigned.forEach(a => merged.push({ type: 'place', k: a.order_index ?? a.sort_order ?? 0, data: a }))
     notes.forEach(n    => merged.push({ type: 'note',  k: n.sort_order ?? 0, data: n }))
-    dayTransport.forEach(r => {
+    dayReservations.forEach(r => {
       const pos = r.day_plan_position ?? (merged.length > 0 ? Math.max(...merged.map(m => m.k)) + 0.5 : 0.5)
-      merged.push({ type: 'transport', k: pos, data: r })
+      merged.push({ type: 'reservation', k: pos, data: r })
     })
     merged.sort((a, b) => a.k - b.k)
 
@@ -151,21 +165,27 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
     const itemsHtml = merged.length === 0
       ? `<div class="empty-day">${escHtml(tr('dayplan.emptyDay'))}</div>`
       : merged.map(item => {
-          if (item.type === 'transport') {
+          if (item.type === 'reservation') {
             const r = item.data
             const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
-            const icon = transportIconSvg(r.type)
+            const icon = reservationIconSvg(r.type)
+            const color = RESERVATION_COLOR_MAP[r.type] || '#3b82f6'
             let subtitle = ''
             if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
+            else if (r.type === 'restaurant') subtitle = [meta.party_size ? `${meta.party_size} guests` : ''].filter(Boolean).join(' · ')
+            else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
+            else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
+            const locationLine = r.location || meta.location || ''
             const time = r.reservation_time?.includes('T') ? r.reservation_time.split('T')[1]?.substring(0, 5) : ''
             return `
-              <div class="note-card" style="border-left: 3px solid #3b82f6;">
-                <div class="note-line" style="background: #3b82f6;"></div>
+              <div class="note-card" style="border-left: 3px solid ${color};">
+                <div class="note-line" style="background: ${color};"></div>
                 <span class="note-icon">${icon}</span>
                 <div class="note-body">
                   <div class="note-text" style="font-weight: 600;">${escHtml(r.title)}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
                   ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
+                  ${locationLine ? `<div class="note-time">${escHtml(locationLine)}</div>` : ''}
                   ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
                 </div>
               </div>`
@@ -223,7 +243,41 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                 ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
               </div>
             </div>`
-        }).join('')
+      }).join('')
+
+    const accommodationsForDay = (accommodations.accommodations || []).filter(a =>
+      days.some(d => d.id >= a.start_day_id && d.id <= a.end_day_id && d.id === day?.id)
+    ).sort((a, b) => a.start_day_id - b.start_day_id)
+
+    const accommodationDetails = accommodationsForDay.map(item => {
+      const isCheckIn = day.id === item.start_day_id
+      const isCheckOut = day.id === item.end_day_id
+      const actionLabel = isCheckIn ? tr('reservations.meta.checkIn')
+        : isCheckOut ? tr('reservations.meta.checkOut')
+        : tr('reservations.meta.linkAccommodation')
+      const actionIcon = isCheckIn ? accommodationIconSvg('checkin')
+        : isCheckOut ? accommodationIconSvg('checkout')
+        : accommodationIconSvg('accommodation')
+      const timeStr = isCheckIn ? (item.check_in || '')
+        : isCheckOut ? (item.check_out || '')
+        : ''
+
+      return `
+        <div class="day-accommodation">
+          <div class="day-accommodation-title accommodation-center-icon">${actionIcon} ${escHtml(actionLabel)}</div>
+          ${timeStr ? `<div class="accommodation-center-icon">${accommodationIconSvg('checkin')} <b>${escHtml(timeStr)}</b></div>` : ''}
+          <div class="accommodation-center-icon">${accommodationIconSvg('accommodation')} ${escHtml(item.place_name)}</div>
+          ${item.place_address ? `<div class="accommodation-center-icon">${accommodationIconSvg('location')} ${escHtml(item.place_address)}</div>` : ''}
+          ${item.notes ? `<div class="accommodation-center-icon">${accommodationIconSvg('note')} ${escHtml(item.notes)}</div>` : ''}
+          ${isCheckIn && item.confirmation ? `<div class="accommodation-center-icon">${accommodationIconSvg('confirmation')} ${escHtml(item.confirmation)}</div>` : ''}
+        </div>`
+    }).join('')
+
+    const accommodationsHtml = accommodationsForDay.length > 0
+      ? `<div class="day-accommodations-overview">
+          <div class="day-accommodations ${accommodationsForDay.length === 1 ? 'single' : ''}">${accommodationDetails}</div>
+        </div>`
+      : ''
 
     return `
       <div class="day-section${di > 0 ? ' page-break' : ''}">
@@ -233,8 +287,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
           ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
           ${cost ? `<span class="day-cost">${cost}</span>` : ''}
         </div>
-        <div class="day-body">${itemsHtml}</div>
-      </div>`
+        <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
+      </div>`  
   }).join('')
 
   const html = `<!DOCTYPE html>
@@ -317,6 +371,22 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   .day-cost  { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.65); }
   .day-body  { padding: 12px 28px 6px; }
 
+  /* accommodation info */
+  .day-accommodations-overview { font-size: 12px; }
+  .day-accommodations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
+  .day-accommodations.single { justify-content: center; }
+  .day-accommodation {
+    flex: 1 1 45%; min-width: 200px; margin: 4px 0; padding: 10px;
+    border: 2px solid #e2e8f0; border-radius: 12px;
+    display: flex; flex-direction: column;
+  }
+  .day-accommodation-title {
+    font-size: 16px; font-weight: 600; text-align: center;
+    margin-bottom: 4px; align-self: center;
+  }
+  .accommodation-center-icon { display: flex; align-items: center; gap: 4px; }
+
+
   /* ── Place card ────────────────────────────────── */
   .place-card {
     display: flex; align-items: stretch;