fix: egress policy

This reverts commit 5134fd9459.

.dockerignore

@@ -32,6 +32,5 @@ server/tests/
 server/vitest.config.ts
 **/*.test.ts
 **/*.spec.ts
-wiki/
 scripts/
 charts/

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -8,11 +8,11 @@ body:
     attributes:
       label: Pre-flight checklist
       options:
-        - label: I have searched [existing issues](https://github.com/mauriceboe/TREK/issues) and this bug has not been reported yet
+        - label: I have searched [existing issues](https://github.com/liketrek/TREK/issues) and this bug has not been reported yet
           required: true
         - label: I am running the latest available version of TREK
           required: true
-        - label: I have read the [Troubleshooting guide](https://github.com/mauriceboe/TREK/wiki/Troubleshooting) and my issue is not covered there
+        - label: I have read the [Troubleshooting guide](https://github.com/liketrek/TREK/wiki/Troubleshooting) and my issue is not covered there
           required: true
 
   - type: input

.github/ISSUE_TEMPLATE/config.yml

@@ -1,11 +1,11 @@
 blank_issues_enabled: false
 contact_links:
   - name: Documentation
-    url: https://github.com/mauriceboe/TREK/wiki
+    url: https://github.com/liketrek/TREK/wiki
     about: Check the docs before opening an issue
   - name: Feature Request
-    url: https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests
+    url: https://github.com/liketrek/TREK/discussions/new?category=feature-requests
     about: Suggest a new feature or improvement in Discussions
   - name: Questions & Help
-    url: https://github.com/mauriceboe/TREK/discussions
+    url: https://github.com/liketrek/TREK/discussions
     about: For questions and general help, use Discussions instead

.github/PULL_REQUEST_TEMPLATE.md

@@ -13,8 +13,8 @@
 - [ ] 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)
+- [ ] I have read the [Contributing Guidelines](https://github.com/liketrek/TREK/wiki/Contributing)
+- [ ] My branch is [up to date with `dev`](https://github.com/liketrek/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date)
 - [ ] This PR targets the `dev` branch, not `main` *(wiki-only PRs are exempt)*
 - [ ] I have tested my changes locally
 - [ ] I have added/updated tests that prove my fix is effective or that my feature works

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

@@ -9,6 +9,7 @@ permissions:
 
 jobs:
   close-stale:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     steps:
       - name: Close stale invalid-title issues

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

@@ -10,6 +10,7 @@ permissions:
 
 jobs:
   close-stale:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     steps:
       - name: Close stale wrong-base-branch PRs

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

@@ -9,6 +9,7 @@ permissions:
 
 jobs:
   check-title:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     steps:
       - name: Flag or redirect issue
@@ -76,7 +77,7 @@ jobs:
                 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.',
+                  'Feature requests should be submitted in [Discussions](https://github.com/liketrek/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'),

.github/workflows/docker-dev.yml

@@ -18,6 +18,7 @@ concurrency:
 
 jobs:
   version-bump:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     outputs:
       version: ${{ steps.bump.outputs.VERSION }}

.github/workflows/docker.yml

@@ -1,16 +1,6 @@
 name: Build & Push Docker Image
 
 on:
-  push:
-    branches: [main]
-    paths-ignore:
-      - 'docs/**'
-      - '**/*.md'
-      - 'wiki/**'
-      - '.github/workflows/**'
-      - '.github/ISSUE_TEMPLATE/**'
-      - '.github/FUNDING.yml'
-      - '.github/PULL_REQUEST_TEMPLATE.md'
   workflow_dispatch:
     inputs:
       bump:
@@ -32,6 +22,7 @@ concurrency:
 
 jobs:
   version-bump:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     outputs:
       version: ${{ steps.bump.outputs.VERSION }}

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

@@ -6,6 +6,7 @@ on:
 
 jobs:
   check-target:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     permissions:
       pull-requests: write

.github/workflows/publish-plugin-sdk.yml

@@ -14,6 +14,7 @@ permissions:
 
 jobs:
   publish:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     defaults:
       run:

.github/workflows/security.yml

@@ -11,6 +11,9 @@ permissions:
 
 jobs:
   scout:
+    # Docker Hub secrets are not exposed to pull requests from forks, so the
+    # Scout login can never succeed there.
+    if: github.repository == 'liketrek/TREK' && github.event.pull_request.head.repo.fork != true
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.github/workflows/wiki.yml

@@ -17,6 +17,7 @@ concurrency:
 
 jobs:
   deploy:
+    if: github.repository == 'liketrek/TREK'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -66,5 +66,3 @@ test-data
 
 .run
 .full-review
-# Wiki offline snapshot is baked in at build, not committed (duplicates wiki/)
-server/assets/wiki/

CODE_OF_CONDUCT.md

@@ -0,0 +1,136 @@
+# Contributor Covenant 3.0 Code of Conduct
+
+## Our Pledge
+
+We pledge to make our community welcoming, safe, and equitable for all.
+
+We are committed to fostering an environment that respects and promotes the dignity, rights, and contributions of all
+individuals, regardless of characteristics including race, ethnicity, caste, color, age, physical characteristics,
+neurodiversity, disability, sex or gender, gender identity or expression, sexual orientation, language, philosophy or
+religion, national or social origin, socio-economic position, level of education, or other status. The same privileges
+of participation are extended to everyone who participates in good faith and in accordance with this Covenant.
+
+## Encouraged Behaviors
+
+While acknowledging differences in social norms, we all strive to meet our community's expectations for positive
+behavior. We also understand that our words and actions may be interpreted differently than we intend based on culture,
+background, or native language.
+
+With these considerations in mind, we agree to behave mindfully toward each other and act in ways that center our shared
+values, including:
+
+1. Respecting the **purpose of our community**, our activities, and our ways of gathering.
+2. Engaging **kindly and honestly** with others.
+3. Respecting **different viewpoints** and experiences.
+4. **Taking responsibility** for our actions and contributions.
+5. Gracefully giving and accepting **constructive feedback**.
+6. Committing to **repairing harm** when it occurs.
+7. Behaving in other ways that promote and sustain the **well-being of our community**.
+
+## Restricted Behaviors
+
+We agree to restrict the following behaviors in our community. Instances, threats, and promotion of these behaviors are
+violations of this Code of Conduct.
+
+1. **Harassment.** Violating explicitly expressed boundaries or engaging in unnecessary personal attention after any
+   clear request to stop.
+2. **Character attacks.** Making insulting, demeaning, or pejorative comments directed at a community member or group of
+   people.
+3. **Stereotyping or discrimination.** Characterizing anyone’s personality or behavior on the basis of immutable
+   identities or traits.
+4. **Sexualization.** Behaving in a way that would generally be considered inappropriately intimate in the context or
+   purpose of the community.
+5. **Violating confidentiality**. Sharing or acting on someone's personal or private information without their
+   permission.
+6. **Endangerment.** Causing, encouraging, or threatening violence or other harm toward any person or group.
+7. Behaving in other ways that **threaten the well-being** of our community.
+
+### Other Restrictions
+
+1. **Misleading identity.** Impersonating someone else for any reason, or pretending to be someone else to evade
+   enforcement actions.
+2. **Failing to credit sources.** Not properly crediting the sources of content you contribute.
+3. **Promotional materials**. Sharing marketing or other commercial content in a way that is outside the norms of the
+   community.
+4. **Irresponsible communication.** Failing to responsibly present content which includes, links or describes any other
+   restricted behaviors.
+
+## Reporting an Issue
+
+Tensions can occur between community members even when they are trying their best to collaborate. Not every conflict
+represents a code of conduct violation, and this Code of Conduct reinforces encouraged behaviors and norms that can help
+avoid conflicts and minimize harm.
+
+When an incident does occur, it is important to report it promptly. To report a possible violation, **send an email to
+report@liketrek.com**.
+
+Community Moderators take reports of violations seriously and will make every effort to respond in a timely manner. They
+will investigate all reports of code of conduct violations, reviewing messages, logs, and recordings, or interviewing
+witnesses and other participants. Community Moderators will keep investigation and enforcement actions as transparent as
+possible while prioritizing safety and confidentiality. In order to honor these values, enforcement actions are carried
+out in private with the involved parties, but communicating to the whole community may be part of a mutually agreed upon
+resolution.
+
+## Addressing and Repairing Harm
+
+****
+
+If an investigation by the Community Moderators finds that this Code of Conduct has been violated, the following
+enforcement ladder may be used to determine how best to repair harm, based on the incident's impact on the individuals
+involved and the community as a whole. Depending on the severity of a violation, lower rungs on the ladder may be
+skipped.
+
+1) Warning
+    1) Event: A violation involving a single incident or series of incidents.
+    2) Consequence: A private, written warning from the Community Moderators.
+    3) Repair: Examples of repair include a private written apology, acknowledgement of responsibility, and seeking
+       clarification on expectations.
+2) Temporarily Limited Activities
+    1) Event: A repeated incidence of a violation that previously resulted in a warning, or the first incidence of a
+       more serious violation.
+    2) Consequence: A private, written warning with a time-limited cooldown period designed to underscore the
+       seriousness of the situation and give the community members involved time to process the incident. The cooldown
+       period may be limited to particular communication channels or interactions with particular community members.
+    3) Repair: Examples of repair may include making an apology, using the cooldown period to reflect on actions and
+       impact, and being thoughtful about re-entering community spaces after the period is over.
+3) Temporary Suspension
+    1) Event: A pattern of repeated violation which the Community Moderators have tried to address with warnings, or a
+       single serious violation.
+    2) Consequence: A private written warning with conditions for return from suspension. In general, temporary
+       suspensions give the person being suspended time to reflect upon their behavior and possible corrective actions.
+    3) Repair: Examples of repair include respecting the spirit of the suspension, meeting the specified conditions for
+       return, and being thoughtful about how to reintegrate with the community when the suspension is lifted.
+4) Permanent Ban
+    1) Event: A pattern of repeated code of conduct violations that other steps on the ladder have failed to resolve, or
+       a violation so serious that the Community Moderators determine there is no way to keep the community safe with
+       this person as a member.
+    2) Consequence: Access to all community spaces, tools, and communication channels is removed. In general, permanent
+       bans should be rarely used, should have strong reasoning behind them, and should only be resorted to if working
+       through other remedies has failed to change the behavior.
+    3) Repair: There is no possible repair in cases of this severity.
+
+This enforcement ladder is intended as a guideline. It does not limit the ability of Community Managers to use their
+discretion and judgment, in keeping with the best interests of our community.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is officially representing
+the community in public or other spaces. Examples of representing our community include using an official email address,
+posting via an official social media account, or acting as an appointed representative at an online or offline event.
+
+## Attribution
+
+This Code of Conduct is adapted from the Contributor Covenant, version 3.0, permanently available
+at [https://www.contributor-covenant.org/version/3/0/](https://www.contributor-covenant.org/version/3/0/).
+
+Contributor Covenant is stewarded by the Organization for Ethical Source and licensed under CC BY-SA 4.0. To view a copy
+of this license,
+visit [https://creativecommons.org/licenses/by-sa/4.0/](https://creativecommons.org/licenses/by-sa/4.0/)
+
+For answers to common questions about Contributor Covenant, see the FAQ
+at [https://www.contributor-covenant.org/faq](https://www.contributor-covenant.org/faq). Translations are provided
+at [https://www.contributor-covenant.org/translations](https://www.contributor-covenant.org/translations). Additional
+enforcement and community guideline resources can be found
+at [https://www.contributor-covenant.org/resources](https://www.contributor-covenant.org/resources). The enforcement
+ladder was inspired by the work of [Mozilla’s code of conduct team](https://github.com/mozilla/inclusion).
+

CONTRIBUTING.md

@@ -10,7 +10,7 @@ Thanks for your interest in contributing! Please read these guidelines before op
 4. **Target the `dev` branch** — All PRs must be opened against `dev`, not `main`. Exception: PRs that only modify files under `wiki/` may target any branch
 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
+7. **Branch up to date** — Your branch must be [up to date with `dev`](https://github.com/liketrek/TREK/wiki/Development-environment#3-keep-your-fork-up-to-date) before submitting a PR
 
 ## Pull Requests
 
@@ -39,8 +39,8 @@ feat(budget): add CSV export for expenses
 
 ## Development Environment
 
-See the [Developer Environment page](https://github.com/mauriceboe/TREK/wiki/Development-environment) for more information on setting up your development environment.
+See the [Developer Environment page](https://github.com/liketrek/TREK/wiki/Development-environment) for more information on setting up your development environment.
 
 ## More Details
 
-See the [Contributing wiki page](https://github.com/mauriceboe/TREK/wiki/Contributing) for the full tech stack, architecture overview, and detailed guidelines.
+See the [Contributing wiki page](https://github.com/liketrek/TREK/wiki/Contributing) for the full tech stack, architecture overview, and detailed guidelines.

Dockerfile

@@ -71,6 +71,10 @@ COPY --from=server-builder /app/server/dist ./server/dist
 # only emits dist, so these must be copied explicitly or the features silently
 # degrade to empty in the image.
 COPY --from=server-builder /app/server/assets ./server/assets
+# The in-app help pages (/help) read this straight from disk at runtime, so the
+# docs always match the version running. Without it, wikiService falls back to
+# fetching the GitHub wiki, which tracks main and needs network access.
+COPY wiki ./wiki
 # tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
 COPY server/tsconfig.json ./server/
 # Encryption-key rotation is run on demand via tsx (a prod dep) straight from the

README.md

@@ -20,7 +20,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 <a href="https://demo.liketrek.com"><img alt="Demo" src="https://img.shields.io/badge/Demo-try-111827?style=for-the-badge" /></a>
 &nbsp;
-<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
+<a href="https://hub.docker.com/r/mauriceboe/TREK"><img alt="Docker" src="https://img.shields.io/badge/Docker-ready-2496ED?style=for-the-badge" /></a>
 &nbsp;
 <a href="https://discord.gg/NhZBDSd4qW"><img alt="Discord" src="https://img.shields.io/badge/Discord-join-5865F2?style=for-the-badge" /></a>
 &nbsp;
@@ -31,9 +31,9 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 <a href="https://www.buymeacoffee.com/mauriceboe"><img alt="BMAC" src="https://img.shields.io/badge/BMAC-support-FFDD00?style=for-the-badge" /></a>
 <br />
 <a href="LICENSE"><img alt="License" src="https://img.shields.io/badge/license-AGPL_v3-6B7280?style=flat-square" /></a>
-<a href="https://github.com/mauriceboe/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/mauriceboe/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
-<a href="https://hub.docker.com/r/mauriceboe/trek"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/trek?style=flat-square&color=6B7280" /></a>
-<a href="https://github.com/mauriceboe/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/mauriceboe/TREK?style=flat-square&color=6B7280" /></a>
+<a href="https://github.com/liketrek/TREK/releases"><img alt="Latest Release" src="https://img.shields.io/github/v/release/liketrek/TREK?include_prereleases&style=flat-square&color=6B7280" /></a>
+<a href="https://hub.docker.com/r/mauriceboe/TREK"><img alt="Docker Pulls" src="https://img.shields.io/docker/pulls/mauriceboe/TREK?style=flat-square&color=6B7280" /></a>
+<a href="https://github.com/liketrek/TREK"><img alt="Stars" src="https://img.shields.io/github/stars/liketrek/TREK?style=flat-square&color=6B7280" /></a>
 
 </div>
 
@@ -41,7 +41,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 
 <div align="center">
 
-<img src="https://github.com/mauriceboe/trek-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
+<img src="https://github.com/liketrek/TREK-media/releases/download/readme-assets/TREK1.gif" alt="TREK — 60-second tour" width="100%" />
 
 </div>
 
@@ -176,7 +176,7 @@ A self-hosted, real-time collaborative travel planner — with maps, budgets, pa
 ```bash
 ENCRYPTION_KEY=$(openssl rand -hex 32) docker run -d -p 3000:3000 \
   -e ENCRYPTION_KEY=$ENCRYPTION_KEY \
-  -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/trek
+  -v ./data:/app/data -v ./uploads:/app/uploads mauriceboe/TREK
 ```
 
 Open `http://localhost:3000`. On first boot TREK seeds an admin account — if you set `ADMIN_EMAIL`/`ADMIN_PASSWORD` those are used, otherwise the credentials are printed to the container log (`docker logs trek`).
@@ -217,7 +217,7 @@ Real-time sync via WebSocket (`ws`). Backend on NestJS 11. State with Zustand. A
 ```yaml
 services:
   app:
-    image: mauriceboe/trek:latest
+    image: mauriceboe/TREK:latest
     container_name: trek
     read_only: true
     security_opt:
@@ -280,7 +280,7 @@ helm repo update
 helm install trek trek/trek
 ```
 
-See [`charts/README.md`](https://github.com/mauriceboe/TREK/blob/main/charts/README.md) for values.
+See [`charts/README.md`](https://github.com/liketrek/TREK/blob/main/charts/README.md) for values.
 
 <h2 id="install-as-app-pwa">Install as App (PWA)</h2>
 
@@ -305,9 +305,9 @@ docker compose pull && docker compose up -d
 **Docker run** — reuse the original volume paths:
 
 ```bash
-docker pull mauriceboe/trek
+docker pull mauriceboe/TREK
 docker rm -f trek
-docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/trek
+docker run -d --name trek -p 3000:3000 -v ./data:/app/data -v ./uploads:/app/uploads --restart unless-stopped mauriceboe/TREK
 ```
 
 > Not sure which paths you used? `docker inspect trek --format '{{json .Mounts}}'` before removing the container.
@@ -331,6 +331,8 @@ The script creates a timestamped DB backup before making changes and prompts for
 
 For production, put TREK behind a TLS-terminating reverse proxy. TREK uses WebSockets for real-time sync, so the proxy **must** support WebSocket upgrades on `/ws`.
 
+If you use the MCP addon, the proxy must also pass the `Mcp-Session-Id` header through in both directions on `/mcp` — Nginx and Caddy do this by default, but a proxy that strips it makes every tool call open a new session instead of reusing one. See the [Reverse Proxy wiki page](https://github.com/liketrek/TREK/wiki/Reverse-Proxy) for details.
+
 <details>
 <summary>Nginx</summary>
 
@@ -368,6 +370,19 @@ server {
         proxy_set_header Host $host;
         proxy_read_timeout 86400;
     }
+
+    # Only needed if you use the MCP addon. Responses are Server-Sent Events,
+    # so buffering must be off or tool results arrive late.
+    location /mcp {
+        proxy_pass http://localhost:3000;
+        proxy_http_version 1.1;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_buffering off;
+        proxy_read_timeout 3600s;
+    }
 }
 ```
 
@@ -403,6 +418,7 @@ Caddy handles TLS and WebSockets automatically.
 | `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` |
+| `TREK_WIKI_DIR` | Where the in-app Help pages (`/help`) read their content from. TREK ships its wiki and serves it from disk, so Help always matches the version you are running — you should not need to set this. Point it at your own directory to serve custom docs. If the path does not exist, Help falls back to fetching the public GitHub wiki (needs outbound network, and tracks the latest release). | bundled `wiki/` |
 | `DEFAULT_LANGUAGE` | 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`, `id`, `tr`, `ja`, `ko`, `uk`, `gr` | `en` |
 | `ALLOWED_ORIGINS` | Comma-separated origins for CORS and email links | same-origin |
 | `FORCE_HTTPS` | Optional. When `true`: 301-redirects HTTP to HTTPS, sends HSTS, adds CSP `upgrade-insecure-requests`, forces the session cookie `secure` flag. Useful behind a TLS-terminating reverse proxy. Requires `TRUST_PROXY`. | `false` |
@@ -428,8 +444,9 @@ Caddy handles TLS and WebSockets automatically.
 | `ADMIN_PASSWORD` | Password for the first admin on initial boot. Pairs with `ADMIN_EMAIL`. | random |
 | **Other** | | |
 | `DEMO_MODE` | Enable demo mode (hourly data resets) | `false` |
+| `UNSPLASH_ACCESS_KEY` | Optional Unsplash Access Key for trip-cover and place-image search. Without one, TREK uses Unsplash's unauthenticated endpoint, which some datacenter/VPS IPs are blocked from. Get a free key at [unsplash.com/developers](https://unsplash.com/developers). Overrides any per-admin key set in Admin > Settings (where it can also be configured instead). | — |
 | `MCP_RATE_LIMIT` | Max MCP API requests per user per minute | `300` |
-| `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user | `20` |
+| `MCP_MAX_SESSION_PER_USER` | Max concurrent MCP sessions per user. At the cap, the least-recently-active session is closed to make room | `20` |
 
 </details>
 

SECURITY.md

@@ -21,6 +21,6 @@ You will receive a response within 48 hours. Once confirmed, a fix will be relea
 
 ## Scope
 
-This policy covers the TREK application and its Docker image (`mauriceboe/trek`).
+This policy covers the TREK application and its Docker image (`mauriceboe/TREK`).
 
 Third-party dependencies are monitored via GitHub Dependabot.

ca_profile.xml

@@ -1,9 +1,9 @@
 <?xml version="1.0"?>
 <CommunityApplications>
   <Profile>TREK is a self-hosted, real-time collaborative travel planner. Plan trips together with interactive maps, budgets, bookings, packing lists, day-by-day itineraries and file management — every change syncs instantly across everyone in your group. Includes OIDC/SSO, TOTP MFA, dark mode, PWA support, multi-language UI and a modular addon system (Vacay, Atlas, Collab, Budget, Packing, Journey). Maintained by mauriceboe — support and bug reports via GitHub Issues.</Profile>
-  <Icon>https://raw.githubusercontent.com/mauriceboe/TREK/main/docs/trek-icon.png</Icon>
-  <WebPage>https://github.com/mauriceboe/TREK</WebPage>
-  <Forum>https://github.com/mauriceboe/TREK/issues</Forum>
+  <Icon>https://raw.githubusercontent.com/liketrek/TREK/main/docs/trek-icon.png</Icon>
+  <WebPage>https://github.com/liketrek/TREK</WebPage>
+  <Forum>https://github.com/liketrek/TREK/issues</Forum>
   <DonateLink>https://ko-fi.com/mauriceboe</DonateLink>
   <DonateText>Support TREK development</DonateText>
 </CommunityApplications>

charts/trek/Chart.yaml

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

charts/trek/templates/configmap.yaml

@@ -13,6 +13,9 @@ data:
   {{- if .Values.env.LOG_LEVEL }}
   LOG_LEVEL: {{ .Values.env.LOG_LEVEL | quote }}
   {{- end }}
+  {{- if .Values.env.TREK_WIKI_DIR }}
+  TREK_WIKI_DIR: {{ .Values.env.TREK_WIKI_DIR | quote }}
+  {{- end }}
   {{- if .Values.env.ALLOWED_ORIGINS }}
   ALLOWED_ORIGINS: {{ .Values.env.ALLOWED_ORIGINS | quote }}
   {{- end }}

charts/trek/templates/deployment.yaml

@@ -6,6 +6,12 @@ metadata:
     app: {{ include "trek.name" . }}
 spec:
   replicas: 1
+  # TREK is a single-writer SQLite app on a ReadWriteOnce PVC, so the default
+  # RollingUpdate would start a second pod holding the same volume before the old one
+  # exits — a Multi-Attach deadlock, or two processes on one travel.db. Recreate tears
+  # the old pod down first. Override to RollingUpdate only with a ReadWriteMany volume.
+  strategy:
+    type: {{ .Values.updateStrategy | default "Recreate" }}
   selector:
     matchLabels:
       app: {{ include "trek.name" . }}
@@ -63,6 +69,12 @@ spec:
                   name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
                   key: OIDC_CLIENT_SECRET
                   optional: true
+            - name: UNSPLASH_ACCESS_KEY
+              valueFrom:
+                secretKeyRef:
+                  name: {{ default (printf "%s-secret" (include "trek.fullname" .)) .Values.existingSecret }}
+                  key: UNSPLASH_ACCESS_KEY
+                  optional: true
           volumeMounts:
             - name: data
               mountPath: /app/data

charts/trek/templates/secret.yaml

@@ -17,6 +17,9 @@ data:
   {{- if .Values.secretEnv.OIDC_CLIENT_SECRET }}
   OIDC_CLIENT_SECRET: {{ .Values.secretEnv.OIDC_CLIENT_SECRET | b64enc | quote }}
   {{- end }}
+  {{- if .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
+  UNSPLASH_ACCESS_KEY: {{ .Values.secretEnv.UNSPLASH_ACCESS_KEY | b64enc | quote }}
+  {{- end }}
 {{- end }}
 
 {{- if and (not .Values.existingSecret) (.Values.generateEncryptionKey) }}
@@ -44,4 +47,7 @@ stringData:
   {{- if .Values.secretEnv.OIDC_CLIENT_SECRET }}
   OIDC_CLIENT_SECRET: {{ .Values.secretEnv.OIDC_CLIENT_SECRET }}
   {{- end }}
+  {{- if .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
+  UNSPLASH_ACCESS_KEY: {{ .Values.secretEnv.UNSPLASH_ACCESS_KEY }}
+  {{- end }}
 {{- end }}

charts/trek/values.yaml

@@ -1,9 +1,14 @@
 
 image:
-  repository: mauriceboe/trek
+  repository: liketrek/TREK
   # tag: latest
   pullPolicy: IfNotPresent
 
+# Deployment update strategy. Recreate is the safe default for the single-writer SQLite
+# DB on a ReadWriteOnce volume (the old pod is torn down before the new one starts).
+# Set to RollingUpdate only if you back the data volume with ReadWriteMany storage.
+updateStrategy: Recreate
+
 # Optional image pull secrets for private registries
 imagePullSecrets: []
   # - name: my-registry-secret
@@ -19,6 +24,12 @@ env:
   # Timezone for logs, reminders, and cron jobs (e.g. Europe/Berlin).
   # LOG_LEVEL: "info"
   # "info" = concise user actions, "debug" = verbose details.
+  # TREK_WIKI_DIR: "/app/wiki"
+  # Where the in-app Help pages (/help) read their content from. Leave unset: the
+  # image ships the wiki at /app/wiki and finds it automatically, so Help matches
+  # the version you are running. Only set this to serve your own docs from a mounted
+  # volume. If the path does not exist, Help falls back to fetching the public GitHub
+  # wiki, which needs egress and tracks the latest release rather than your version.
   # 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.
@@ -92,6 +103,12 @@ secretEnv:
   ADMIN_PASSWORD: ""
   # OIDC client secret — set together with env.OIDC_ISSUER and env.OIDC_CLIENT_ID.
   OIDC_CLIENT_SECRET: ""
+  # Optional Unsplash Access Key for trip-cover and place-image search.
+  # Without one, TREK uses Unsplash's unauthenticated endpoint, which some
+  # datacenter/VPS IPs (including many Kubernetes clusters) are blocked from.
+  # Get a free key at https://unsplash.com/developers. Can also be set per-admin
+  # in Admin > Settings; this value overrides that. Leave empty to disable.
+  UNSPLASH_ACCESS_KEY: ""
 
 # If true, a random ENCRYPTION_KEY is generated at install and preserved across upgrades
 generateEncryptionKey: false

client/e2e/create-trip.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test'
+import { dismissSystemNotices } from './helpers'
 
 // Trip lifecycle (core): from the dashboard, open the new-trip modal, name the
 // trip, submit, and confirm it shows up on the dashboard. Exercises the whole
@@ -7,18 +8,23 @@ import { test, expect } from '@playwright/test'
 test('create a trip and see it on the dashboard', async ({ page }) => {
   await page.goto('/dashboard')
 
+  // The release notice greets a freshly seeded user and its backdrop eats the click below.
+  await dismissSystemNotices(page)
+
   // The "+ New Trip" card is always rendered in the default (planned) filter.
   await page.locator('.add-trip-card').click()
 
-  // Scope to the shared Modal (.modal-backdrop). Its form has no in-form submit
-  // button (the primary action lives in the footer), so click it explicitly
-  // rather than pressing Enter. The Create button is the slate primary button;
-  // Cancel is the bordered one.
-  const modal = page.locator('.modal-backdrop')
+  // Scope to the shared Modal (.trek-modal-backdrop — namespaced so content blockers
+  // don't hide a generic .modal-backdrop). Its form has no in-form submit button (the
+  // primary action lives in the footer), so click it explicitly rather than pressing
+  // Enter. The Create button is the slate primary button; Cancel is the bordered one.
+  const modal = page.locator('.trek-modal-backdrop')
   await expect(modal).toBeVisible()
 
+  // Target Title by placeholder: the cover-image search inputs sit above it, so
+  // input[type=text].first() is the photo search box, not the field we want.
   const title = `E2E Trip ${Date.now()}`
-  await modal.locator('input[type="text"]').first().fill(title)
+  await modal.getByPlaceholder('e.g. Summer in Japan').fill(title)
   await modal.getByRole('button', { name: 'Create New Trip' }).click()
 
   await expect(page.getByText(title).first()).toBeVisible({ timeout: 15_000 })

client/e2e/helpers.ts

@@ -0,0 +1,22 @@
+import type { Page } from '@playwright/test'
+
+/**
+ * Dismiss the release-notice modal (SystemNoticeHost), which greets a freshly seeded
+ * user on first load and covers the dashboard — its backdrop swallows clicks aimed at
+ * anything underneath, `.add-trip-card` included.
+ *
+ * The X only appears on the notice's last page, so page through first. Dismissal is
+ * persisted server-side per user, but each spec gets a fresh DB, so every spec that
+ * touches the dashboard has to clear it.
+ */
+export async function dismissSystemNotices(page: Page): Promise<void> {
+  const next = page.getByRole('button', { name: /next/i })
+  for (let i = 0; i < 6 && (await next.isVisible().catch(() => false)); i++) {
+    if (!(await next.isEnabled())) break
+    await next.click()
+  }
+
+  const dismiss = page.getByRole('button', { name: 'Dismiss' })
+  if (await dismiss.isVisible().catch(() => false)) await dismiss.click()
+  await dismiss.waitFor({ state: 'detached' }).catch(() => {})
+}

client/e2e/ipad-scroll-1432.spec.ts

@@ -0,0 +1,79 @@
+import { test, expect, devices } from '@playwright/test'
+import { dismissSystemNotices } from './helpers'
+
+// Tablet regression guard for #1432 — the places list must scroll under a touch swipe.
+//
+// A tablet is a coarse-pointer device at a *desktop* viewport width, so the width-based
+// "is this mobile" check that 3.2.1 shipped left `draggable` armed on iPad: the swipe
+// became an HTML5 drag and raised the drop-to-import overlay instead of scrolling. Drag
+// is now gated on `(pointer: coarse)` (useIsTouch), and only a real device context proves
+// it — a jsdom unit test cannot express "coarse pointer at 834px".
+//
+// Needs WebKit (`npx playwright install webkit`, plus libmanette-0.2-0 and libwoff1 on
+// Debian/Ubuntu). WebKit is the right engine here, not a nicety: every browser on iPadOS
+// is WebKit underneath, which is why the reporter saw this in all three they tried.
+test.use({ ...devices['iPad Pro 11'] })
+
+test('#1432 iPad: places list is scrollable, not draggable', async ({ page }) => {
+  await page.goto('/dashboard')
+
+  await dismissSystemNotices(page)
+
+  await page.locator('.add-trip-card').click()
+  const createBtn = page.getByRole('button', { name: 'Create New Trip' })
+  await expect(createBtn).toBeVisible()
+  const title = `iPad 1432 ${Date.now()}`
+  await page.getByPlaceholder('e.g. Summer in Japan').fill(title)
+  await createBtn.click()
+
+  await page.getByText(title).first().click()
+  await expect(page).toHaveURL(/\/trips\/\d+/)
+  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
+
+  const tripId = page.url().match(/\/trips\/(\d+)/)![1]
+
+  // Seed enough places for the list to overflow and actually need scrolling.
+  for (let i = 1; i <= 25; i++) {
+    const res = await page.request.post(`/api/trips/${tripId}/places`, {
+      data: { name: `Place ${i}`, lat: 48.85 + i * 0.01, lng: 2.35 + i * 0.01 },
+    })
+    expect(res.ok(), `seed place ${i}`).toBeTruthy()
+  }
+  await page.reload()
+  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
+  await expect(page.getByText('Place 1').first()).toBeVisible({ timeout: 20_000 })
+
+  // The context must really be the one from the bug report: coarse pointer, desktop
+  // width. If either is wrong, everything below proves nothing.
+  const env = await page.evaluate(() => ({
+    coarse: window.matchMedia('(pointer: coarse)').matches,
+    width: window.innerWidth,
+  }))
+  expect(env.coarse, 'iPad reports a coarse primary pointer').toBe(true)
+  expect(env.width, 'iPad sits above the 768px "mobile" breakpoint').toBeGreaterThanOrEqual(768)
+
+  // 1. Rows must not be draggable — a draggable row is what swallowed the scroll gesture.
+  const row = page.locator('div[draggable]').filter({ hasText: 'Place 1' }).first()
+  await expect(row).toHaveAttribute('draggable', 'false')
+
+  // 2. The list must scroll, and no drop-to-import overlay may appear.
+  const scroller = page.locator('div[draggable]').first().locator('xpath=ancestor::div[@class="trek-stagger"]')
+  const before = await scroller.evaluate(el => el.scrollTop)
+  const box = (await scroller.boundingBox())!
+  await page.touchscreen.tap(box.x + box.width / 2, box.y + 40)
+  await scroller.evaluate(el => el.scrollBy(0, 200))
+  const after = await scroller.evaluate(el => el.scrollTop)
+  expect(after, 'places list scrolled').toBeGreaterThan(before)
+  await expect(page.getByText('Drop to import')).toHaveCount(0)
+
+  // 3. Drag being off means the arrow buttons are the only reorder affordance left —
+  //    they must be visible (they were opacity:0 above 767px).
+  const arrowOpacity = await page.evaluate(() => {
+    const el = document.querySelector('.reorder-buttons')
+    return el ? getComputedStyle(el).opacity : 'absent'
+  })
+  expect(['1', 'absent']).toContain(arrowOpacity)
+
+  // 4. The iPad must still get the desktop two-pane layout — isMobile stayed width-based.
+  await expect(page.locator('.leaflet-container')).toBeVisible()
+})

client/e2e/reorder-arrows.spec.ts

@@ -0,0 +1,61 @@
+import { test, expect } from '@playwright/test'
+import { dismissSystemNotices } from './helpers'
+
+// The day-plan reorder arrows are hover-revealed on desktop. The rule that did that was
+// dead for a long time — it targeted `.place-row .reorder-btns`, neither of which exists
+// (the component renders `.reorder-buttons` inside an unclassed row), so the buttons sat
+// at opacity:0 with no way to reveal them.
+//
+// That is not merely "invisible": opacity:0 still hit-tests, so every itinerary row and
+// note carried an invisible, fully clickable target that silently reordered the trip.
+// These cases pin both halves — hidden means non-interactive, hover means visible.
+test('desktop: reorder arrows are hidden-and-inert until the row is hovered', async ({ page }) => {
+  await page.goto('/dashboard')
+  await dismissSystemNotices(page)
+
+  await page.locator('.add-trip-card').click()
+  const modal = page.locator('.trek-modal-backdrop')
+  await expect(modal).toBeVisible()
+  const title = `Reorder ${Date.now()}`
+  await modal.getByPlaceholder('e.g. Summer in Japan').fill(title)
+  await modal.getByRole('button', { name: 'Create New Trip' }).click()
+
+  await page.getByText(title).first().click()
+  await expect(page).toHaveURL(/\/trips\/\d+/)
+  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
+
+  // Two places on day 1, so the day plan renders rows carrying reorder arrows.
+  const tripId = page.url().match(/\/trips\/(\d+)/)![1]
+  const daysRes = await (await page.request.get(`/api/trips/${tripId}/days`)).json()
+  const dayId = (daysRes.days ?? daysRes)[0].id
+  for (const name of ['Alpha', 'Beta']) {
+    const res = await page.request.post(`/api/trips/${tripId}/places`, {
+      data: { name, lat: 48.85, lng: 2.35 },
+    })
+    const body = await res.json()
+    await page.request.post(`/api/trips/${tripId}/days/${dayId}/assignments`, {
+      data: { place_id: body.place?.id ?? body.id },
+    })
+  }
+  await page.reload()
+  await expect(page.locator('.leaflet-container')).toBeVisible({ timeout: 20_000 })
+
+  const row = page.locator('.dp-row').filter({ hasText: 'Alpha' }).first()
+  await expect(row).toBeVisible({ timeout: 20_000 })
+  const arrows = row.locator('.reorder-buttons')
+
+  // Unhovered: invisible AND inert — a click there must not land on the button.
+  const idle = await arrows.evaluate(el => {
+    const cs = getComputedStyle(el)
+    const r = el.getBoundingClientRect()
+    const hit = document.elementFromPoint(r.x + r.width / 2, r.y + r.height / 2)
+    return { opacity: cs.opacity, hitsArrow: !!hit?.closest('.reorder-buttons') }
+  })
+  expect(idle.opacity, 'arrows hidden until hover').toBe('0')
+  expect(idle.hitsArrow, 'hidden arrows must not swallow clicks').toBe(false)
+
+  // Hovered: revealed and clickable.
+  await row.hover()
+  await expect(arrows).toHaveCSS('opacity', '1')
+  await expect(arrows).toHaveCSS('pointer-events', 'auto')
+})

client/e2e/screenshots/auth.shot.ts

@@ -0,0 +1,26 @@
+import { test, expect } from './shot'
+
+/**
+ * Unauthenticated surfaces. `storageState: undefined` drops the admin session
+ * this project otherwise inherits, so these render as a logged-out visitor sees
+ * them — which is the entire point of the login and registration pages.
+ */
+test.use({ storageState: undefined })
+
+test('login page', async ({ page, shot }) => {
+  await page.goto('/login')
+  await expect(page.locator('input[type="email"]')).toBeVisible()
+  await shot.page_('Login')
+})
+
+test('registration page', async ({ page, shot }) => {
+  await page.goto('/register')
+  await page.waitForTimeout(500)
+  await shot.page_('Registration')
+})
+
+test('forgot password', async ({ page, shot }) => {
+  await page.goto('/forgot-password')
+  await page.waitForTimeout(500)
+  await shot.page_('PasswordReset')
+})

client/e2e/screenshots/collab.shot.ts

@@ -0,0 +1,69 @@
+import { test, clearNotices, expect } from './shot'
+import type { Page, Locator } from '@playwright/test'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Collab surfaces, one capture each.
+ *
+ * Until now a single Collab.png illustrated four different wiki pages — chat,
+ * notes, polls and the What's Next widget — so at most one of them showed the
+ * feature its page described.
+ *
+ * The Collab view is NOT tabbed: CollabPanel renders chat in a fixed 380px left
+ * column and the other panels beside it, all visible at once (CollabPanel.tsx:94).
+ * So each capture targets its own card element rather than clicking a tab.
+ */
+
+const seed = JSON.parse(
+  readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
+) as { tripId: number }
+
+/**
+ * The panel card containing a given piece of seeded content — see cardClass in
+ * CollabPanel.tsx:20.
+ *
+ * Matching on content rather than the panel heading is deliberate: the headings
+ * render uppercase through CSS while the DOM text is "Notes" / "Polls", and
+ * those same words also appear in the mobile tab bar, so a heading match is both
+ * wrong-cased and ambiguous.
+ */
+function card(page: Page, contains: string): Locator {
+  return page
+    .locator('div.bg-surface-card.rounded-2xl')
+    .filter({ hasText: contains })
+    .last()
+}
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`/trips/${seed.tripId}`)
+  await clearNotices(page)
+  await page.getByRole('button', { name: 'Collab', exact: true }).first().click()
+  await page.waitForTimeout(1200)
+})
+
+test('collab chat', async ({ page, shot }) => {
+  // Seeded as three different people; a single-voice log would misrepresent it.
+  // The chat auto-scrolls to the newest message, so assert on the last line of
+  // the seeded conversation rather than the first — the first is off-screen.
+  await expect(page.getByText('kaiseki', { exact: false }).first()).toBeVisible()
+  await shot.element('CollabChat', card(page, 'kaiseki'))
+})
+
+test('collab notes', async ({ page, shot }) => {
+  await expect(page.getByText('Rail passes', { exact: false })).toBeVisible()
+  await shot.element('CollabNotes', card(page, 'Rail passes'))
+})
+
+test('collab polls', async ({ page, shot }) => {
+  await expect(page.getByText('free for Nara', { exact: false })).toBeVisible()
+  await shot.element('CollabPolls', card(page, 'free for Nara'))
+})
+
+test("what's next widget", async ({ page, shot }) => {
+  await shot.element('WhatsNext', card(page, "What's Next"))
+})
+
+test('collab overview', async ({ page, shot }) => {
+  await shot.page_('Collab')
+})

client/e2e/screenshots/detail.shot.ts

@@ -0,0 +1,88 @@
+import { test, clearNotices, expect } from './shot'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Detail pages and the surfaces that need a couple of clicks to reach.
+ *
+ * Each capture asserts something specific to the surface before shooting, so a
+ * navigation that quietly lands on a fallback (or an addon that is off) fails
+ * the run instead of producing a screenshot of the wrong screen.
+ */
+
+const seed = JSON.parse(
+  readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
+) as { tripId: number; collectionId?: number; journeyId?: number }
+
+test('collection detail', async ({ page, shot }) => {
+  test.skip(!seed.collectionId, 'collections addon unavailable during seed')
+  await page.goto(`/collections/${seed.collectionId}`)
+  await clearNotices(page)
+  await shot.page_('CollectionDetail')
+})
+
+test('journey detail', async ({ page, shot }) => {
+  test.skip(!seed.journeyId, 'journey addon unavailable during seed')
+  await page.goto(`/journey/${seed.journeyId}`)
+  await clearNotices(page)
+  await shot.page_('JourneyDetail')
+})
+
+test('mcp access — admin', async ({ page, shot }) => {
+  await page.goto('/admin')
+  await clearNotices(page)
+  await page.getByRole('button', { name: 'MCP Access', exact: true }).first().click()
+  await page.waitForTimeout(700)
+  await shot.page_('MCPAccess')
+})
+
+test('two-factor setup', async ({ page, shot }) => {
+  await page.goto('/settings')
+  await clearNotices(page)
+  await page.getByRole('button', { name: 'Account', exact: true }).first().click()
+  await page.waitForTimeout(600)
+  // The enrolment flow is behind a button whose label varies with state; match
+  // loosely and fall back to capturing the tab itself.
+  const enable = page.getByRole('button', { name: /two-factor|2fa|authenticator/i }).first()
+  if (await enable.isVisible().catch(() => false)) {
+    await enable.click()
+    await page.waitForTimeout(900)
+  }
+  await shot.page_('2FA')
+})
+
+/**
+ * Settle-up.
+ *
+ * WARNING for anyone extending this file: the "Settle up" button in the Costs
+ * toolbar is not a view — it RECORDS the settling transfers. An earlier version
+ * of this test clicked it, which zeroed every balance and left the capture
+ * showing "Everyone's square". Because all screenshot specs share one database
+ * and this file sorts before planner.shot.ts, it also poisoned Costs.png in the
+ * same run.
+ *
+ * Screenshot specs must not mutate state. Capture the "Add payment" dialog
+ * instead — same surface, no side effect — and close it again.
+ */
+test('costs — record a settle-up payment', async ({ page, shot }) => {
+  await page.goto(`/trips/${seed.tripId}`)
+  await clearNotices(page)
+  await page.getByRole('button', { name: 'Costs', exact: true }).first().click()
+  await page.waitForTimeout(800)
+
+  const addPayment = page.getByRole('button', { name: /add payment/i }).first()
+  test.skip(!(await addPayment.isVisible().catch(() => false)), 'no add-payment entry point rendered')
+  await addPayment.click()
+  await page.waitForTimeout(700)
+
+  const modal = page.locator('.trek-modal-backdrop > div').first()
+  await expect(modal).toBeVisible()
+  await shot.element('CostsSettleUp', modal)
+})
+
+test('trip files', async ({ page, shot }) => {
+  await page.goto(`/trips/${seed.tripId}/files`)
+  await clearNotices(page)
+  await expect(page).toHaveURL(/files/)
+  await shot.page_('Documents')
+})

client/e2e/screenshots/dialogs.shot.ts

@@ -0,0 +1,42 @@
+import { test, clearNotices, expect } from './shot'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Modals and dialogs.
+ *
+ * Captured as element screenshots (not full page) so the wiki gets the dialog
+ * itself rather than a dimmed backdrop with a small box in the middle. Each one
+ * asserts the dialog is actually open first — a missed click would otherwise
+ * silently produce a screenshot of the page behind it.
+ */
+
+const seed = JSON.parse(
+  readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
+) as { tripId: number }
+
+/**
+ * The shared Modal (client/src/components/shared/Modal.tsx) sets neither
+ * role="dialog" nor aria-modal, so there is no accessible role to query — the
+ * backdrop class is the only stable hook. Target its child, which is the panel
+ * itself, so the capture excludes the dimmed backdrop.
+ */
+function dialog(page: import('@playwright/test').Page) {
+  return page.locator('.trek-modal-backdrop > div').first()
+}
+
+test('create trip modal — with the new currency field', async ({ page, shot }) => {
+  await page.goto('/dashboard')
+  await clearNotices(page)
+  await page.getByRole('button', { name: /new trip/i }).first().click()
+  await expect(dialog(page)).toBeVisible()
+  await shot.element('TripCreate', dialog(page))
+})
+
+test('share dialog', async ({ page, shot }) => {
+  await page.goto(`/trips/${seed.tripId}`)
+  await clearNotices(page)
+  await page.getByRole('button', { name: /share/i }).first().click()
+  await expect(dialog(page)).toBeVisible()
+  await shot.element('Share', dialog(page))
+})

client/e2e/screenshots/pages.shot.ts

@@ -0,0 +1,67 @@
+import { test, clearNotices } from './shot'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Top-level navigable surfaces. One capture per route; anything that needs a
+ * dialog opened or a tab clicked lives in its own spec so a failure there
+ * cannot take these down with it.
+ *
+ * Names are the target filenames in wiki/assets/ — see docs/screenshot-map.md
+ * for which wiki page consumes which file.
+ */
+
+const seed = JSON.parse(
+  readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
+) as { tripId: number; collectionId?: number; journeyId?: number }
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/dashboard')
+  await clearNotices(page)
+})
+
+test('dashboard', async ({ page, shot }) => {
+  await page.goto('/dashboard')
+  await clearNotices(page)
+  await shot.page_('DashboardWidgets')
+})
+
+test('trip planner', async ({ page, shot }) => {
+  await page.goto(`/trips/${seed.tripId}`)
+  await shot.page_('TripPlanner')
+})
+
+test('atlas', async ({ page, shot }) => {
+  await page.goto('/atlas')
+  await shot.page_('Atlas')
+})
+
+test('vacay', async ({ page, shot }) => {
+  await page.goto('/vacay')
+  await shot.page_('Vacay')
+})
+
+test('collections', async ({ page, shot }) => {
+  await page.goto('/collections')
+  await shot.page_('Collections')
+})
+
+test('journey', async ({ page, shot }) => {
+  await page.goto('/journey')
+  await shot.page_('Journey')
+})
+
+test('notifications inbox', async ({ page, shot }) => {
+  await page.goto('/notifications')
+  await shot.page_('NotificationsInbox')
+})
+
+test('in-app help', async ({ page, shot }) => {
+  await page.goto('/help')
+  await shot.page_('HelpInApp')
+})
+
+test('files', async ({ page, shot }) => {
+  await page.goto(`/trips/${seed.tripId}/files`)
+  await shot.page_('Files')
+})

client/e2e/screenshots/planner.shot.ts

@@ -0,0 +1,47 @@
+import { test, clearNotices } from './shot'
+import { readFileSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Trip-planner tabs and dialogs.
+ *
+ * Tabs are reached by their visible label rather than a test id, deliberately:
+ * if a label is renamed (as Budget → Costs was in 3.3.0) this run fails loudly
+ * instead of silently capturing the wrong panel — which is exactly how the
+ * current wiki ended up with screenshots the text contradicts.
+ */
+
+const seed = JSON.parse(
+  readFileSync(path.join(process.cwd(), 'e2e', '.tmp', 'seed.json'), 'utf8'),
+) as { tripId: number }
+
+test.beforeEach(async ({ page }) => {
+  await page.goto(`/trips/${seed.tripId}`)
+  await clearNotices(page)
+})
+
+async function openTab(page: import('@playwright/test').Page, label: string) {
+  await page.getByRole('button', { name: label, exact: true }).first().click()
+  await page.waitForTimeout(700)
+}
+
+test('costs panel', async ({ page, shot }) => {
+  await openTab(page, 'Costs')
+  await shot.page_('Costs')
+})
+
+test('lists — packing', async ({ page, shot }) => {
+  await openTab(page, 'Lists')
+  await shot.page_('PackingList')
+})
+
+test('transports', async ({ page, shot }) => {
+  await openTab(page, 'Transports')
+  await shot.page_('Transports')
+})
+
+test('bookings', async ({ page, shot }) => {
+  await openTab(page, 'Book')
+  await shot.page_('Bookings')
+})
+

client/e2e/screenshots/promote.mjs

@@ -0,0 +1,59 @@
+// Moves captured screenshots from the staging directory into wiki/assets/,
+// downscaling and re-encoding on the way.
+//
+// Captures are taken at 1440px CSS width with deviceScaleFactor 2, i.e. 2880px
+// of raw pixels. The wiki renders images at roughly 800–1000px, so shipping
+// 2880px costs ~10x the bytes for detail nobody sees — that is how the existing
+// assets reached 26 MB (one GIF alone is 9.1 MB). 1600px keeps the image sharp
+// on HiDPI displays at the size it is actually shown.
+//
+// Usage:  node e2e/screenshots/promote.mjs [--dry]
+import sharp from 'sharp'
+import { readdirSync, mkdirSync, statSync } from 'node:fs'
+import path from 'node:path'
+
+const SRC = path.join(process.cwd(), 'e2e', '.tmp', 'shots')
+const DEST = path.join(process.cwd(), '..', 'wiki', 'assets')
+const MAX_WIDTH = 1600
+const dry = process.argv.includes('--dry')
+
+mkdirSync(DEST, { recursive: true })
+
+const files = readdirSync(SRC).filter(f => f.endsWith('.png'))
+if (!files.length) {
+  console.error(`No screenshots in ${SRC} — run \`npm run shots\` first.`)
+  process.exit(1)
+}
+
+let before = 0
+let after = 0
+
+for (const file of files.sort()) {
+  const src = path.join(SRC, file)
+  const dest = path.join(DEST, file)
+  const srcBytes = statSync(src).size
+  before += srcBytes
+
+  const img = sharp(src)
+  const { width } = await img.metadata()
+
+  const pipeline = sharp(src)
+    .resize({ width: Math.min(width ?? MAX_WIDTH, MAX_WIDTH), withoutEnlargement: true })
+    .png({ compressionLevel: 9, effort: 10 })
+
+  const buf = await pipeline.toBuffer()
+  after += buf.length
+
+  const pct = Math.round((1 - buf.length / srcBytes) * 100)
+  console.log(
+    `${dry ? '[dry] ' : ''}${file.padEnd(28)} ${kb(srcBytes).padStart(8)} → ${kb(buf.length).padStart(8)}  (-${pct}%)`,
+  )
+  if (!dry) await sharp(buf).toFile(dest)
+}
+
+console.log(`\n${files.length} files: ${kb(before)} → ${kb(after)} (-${Math.round((1 - after / before) * 100)}%)`)
+if (dry) console.log('Dry run — nothing written. Drop --dry to promote into wiki/assets/.')
+
+function kb(bytes) {
+  return bytes > 1024 * 1024 ? `${(bytes / 1024 / 1024).toFixed(1)} MB` : `${Math.round(bytes / 1024)} KB`
+}

client/e2e/screenshots/seed.setup.ts

@@ -0,0 +1,37 @@
+import { test as setup, expect } from '@playwright/test'
+import { writeFileSync, mkdirSync } from 'node:fs'
+import path from 'node:path'
+import { seedDemoData } from './seed'
+
+/**
+ * Populates the throwaway E2E database with the demo trip before any screenshot
+ * runs. Its own Playwright project so it executes exactly once, after `setup`
+ * (which produces the authenticated storageState) and before `screenshots`.
+ *
+ * The resulting ids are written to disk because Playwright projects do not
+ * share memory — the capture specs read them back.
+ */
+setup('seed the demo trip', async ({ page, playwright }) => {
+  // page.request carries the storageState cookie, so this is authenticated as
+  // the admin. The factory hands the seeder throwaway contexts for the other
+  // members — see the comment in seed.ts on why they must not share one.
+  const result = await seedDemoData(page.request, token =>
+    playwright.request.newContext({
+      baseURL: 'http://localhost:5173',
+      // MUST be explicit: newContext otherwise picks up the project's
+      // storageState, i.e. the admin's trek_session cookie — and the server
+      // reads the cookie BEFORE the Authorization header
+      // (server/src/middleware/auth.ts:9), so every "member" write would be
+      // recorded as the admin while still returning 200.
+      storageState: undefined,
+      extraHTTPHeaders: token ? { Authorization: `Bearer ${token}` } : {},
+    }),
+  )
+
+  expect(result.tripId, 'trip was created').toBeTruthy()
+  expect(result.placeIds.length, 'places were created').toBeGreaterThan(0)
+
+  const dir = path.join(process.cwd(), 'e2e', '.tmp')
+  mkdirSync(dir, { recursive: true })
+  writeFileSync(path.join(dir, 'seed.json'), JSON.stringify(result, null, 2))
+})

client/e2e/screenshots/seed.ts

@@ -0,0 +1,347 @@
+import path from 'node:path'
+import type { APIRequestContext } from '@playwright/test'
+
+/**
+ * Demo data for the documentation screenshots.
+ *
+ * Seeded over the REST API (not the DB) so it exercises the same paths a real
+ * user would and stays honest about validation. The session cookie comes from
+ * the storageState that auth.setup.ts writes, so `page.request` is already
+ * authenticated as the seeded admin.
+ *
+ * Design notes that matter for the screenshots:
+ *  - The trip is in **JPY**, deliberately. A EUR trip hides the entire v3.4.0
+ *    currency rework (per-trip currency, frozen FX rates, foreign-currency
+ *    settle-up) — the reader would see nothing new.
+ *  - Two extra members exist so splits, avatars and sharing tiers render with
+ *    real names instead of a lonely single-user state.
+ *  - Dates sit ~2 months out so "upcoming" surfaces (What's Next, reservations)
+ *    have something to show.
+ */
+
+const TRIP = {
+  title: 'Autumn in Japan',
+  description: 'Two weeks chasing momiji season from Tokyo down to Kyoto.',
+  start_date: '2026-09-12',
+  end_date: '2026-09-21',
+  currency: 'JPY',
+  reminder_days: 3,
+}
+
+const MEMBERS = [
+  { username: 'mira', email: 'mira@example.com', password: 'DemoSeed12345!', role: 'user' },
+  { username: 'jonas', email: 'jonas@example.com', password: 'DemoSeed12345!', role: 'user' },
+]
+
+/** Real coordinates — the map surfaces are a big part of what we're capturing. */
+const PLACES = [
+  { name: 'Senso-ji Temple', lat: 35.7148, lng: 139.7967, address: '2-3-1 Asakusa, Taito City, Tokyo',
+    description: "Tokyo's oldest temple, approached through the Nakamise shopping street.",
+    notes: 'Go before 08:00 — the gate is empty and the light is better.',
+    duration_minutes: 90, price: 0, currency: 'JPY', day: 0 },
+  { name: 'teamLab Planets', lat: 35.6486, lng: 139.7900, address: '6-1-16 Toyosu, Koto City, Tokyo',
+    description: 'Immersive digital art museum you walk through barefoot.',
+    notes: 'Timed entry — book at least a week ahead.',
+    duration_minutes: 120, price: 3800, currency: 'JPY', day: 0 },
+  { name: 'Shibuya Crossing', lat: 35.6595, lng: 139.7005, address: 'Shibuya City, Tokyo',
+    description: 'The scramble. Best viewed from the Shibuya Sky observation deck.',
+    duration_minutes: 45, price: 0, currency: 'JPY', day: 1 },
+  { name: 'Meiji Jingu', lat: 35.6764, lng: 139.6993, address: '1-1 Yoyogikamizonocho, Shibuya City, Tokyo',
+    description: 'Forest shrine in the middle of the city.',
+    duration_minutes: 75, price: 0, currency: 'JPY', day: 1 },
+  { name: 'Fushimi Inari Taisha', lat: 34.9671, lng: 135.7727, address: '68 Fukakusa Yabunouchicho, Fushimi Ward, Kyoto',
+    description: 'Thousands of vermilion torii gates climbing Mount Inari.',
+    notes: 'The crowds thin out after the first 20 minutes of climbing.',
+    duration_minutes: 150, price: 0, currency: 'JPY', day: 4 },
+  { name: 'Arashiyama Bamboo Grove', lat: 35.0170, lng: 135.6716, address: 'Ukyo Ward, Kyoto',
+    description: 'Bamboo path leading to the Okochi Sanso villa gardens.',
+    duration_minutes: 60, price: 0, currency: 'JPY', day: 5 },
+  { name: 'Nishiki Market', lat: 35.0050, lng: 135.7649, address: 'Nakagyo Ward, Kyoto',
+    description: "Five covered blocks of food stalls — 'Kyoto's kitchen'.",
+    notes: 'Come hungry. Try the tamagoyaki.',
+    duration_minutes: 90, price: 2500, currency: 'JPY', day: 5 },
+]
+
+const EXPENSES = [
+  { name: 'Flights FRA → HND', category: 'transport', total_price: 890, currency: 'EUR',
+    expense_date: '2026-09-12', note: 'Booked with miles, taxes only.' },
+  { name: 'Ryokan in Hakone', category: 'accommodation', total_price: 48000, currency: 'JPY',
+    expense_date: '2026-09-15', note: '2 nights, kaiseki dinner included.' },
+  { name: 'JR Pass (14 days)', category: 'transport', total_price: 80000, currency: 'JPY',
+    expense_date: '2026-09-12', note: 'Green car, activated on arrival.' },
+  { name: 'teamLab Planets tickets', category: 'activities', total_price: 11400, currency: 'JPY',
+    expense_date: '2026-09-13' },
+  { name: 'Dinner at Nishiki', category: 'food', total_price: 7200, currency: 'JPY',
+    expense_date: '2026-09-17' },
+]
+
+const PACKING = [
+  { category: 'Documents', items: ['Passport', 'JR Pass voucher', 'Travel insurance'] },
+  { category: 'Clothing', items: ['Rain jacket', 'Walking shoes', 'Light layers'] },
+  { category: 'Electronics', items: ['Type-A adapter', 'Power bank', 'Camera'] },
+]
+
+const TODOS = [
+  { name: 'Book teamLab Planets slot', category: 'Before departure', due_date: '2026-08-15', priority: 2 },
+  { name: 'Activate JR Pass', category: 'On arrival', due_date: '2026-09-12', priority: 1 },
+  { name: 'Reserve ryokan dinner', category: 'Before departure', due_date: '2026-08-20' },
+]
+
+export interface SeedResult {
+  tripId: number
+  memberIds: number[]
+  dayIds: number[]
+  placeIds: number[]
+  collectionId?: number
+  journeyId?: number
+}
+
+/** Throws with the response body on failure — a silent 4xx here would produce
+ *  a screenshot of an empty screen, which is worse than a loud crash. */
+async function call<T>(api: APIRequestContext, method: 'post' | 'put' | 'get' | 'patch',
+                       path: string, body?: unknown): Promise<T> {
+  const res = await api[method](path, body === undefined ? {} : { data: body })
+  if (!res.ok()) {
+    throw new Error(`${method.toUpperCase()} ${path} → ${res.status()}\n${await res.text()}`)
+  }
+  return (await res.json()) as T
+}
+
+export type ContextFactory = (token?: string) => Promise<APIRequestContext>
+
+export async function seedDemoData(
+  api: APIRequestContext,
+  newContext?: ContextFactory,
+): Promise<SeedResult> {
+  // 1. Addons first — the Collections and Journey guards run ahead of auth, so
+  //    every later call to those modules 403s until these are flipped.
+  for (const id of ['collections', 'journey', 'packing', 'budget', 'atlas', 'vacay', 'mcp', 'documents', 'collab']) {
+    await call(api, 'put', `/api/admin/addons/${id}`, { enabled: true })
+  }
+  await call(api, 'put', '/api/admin/bag-tracking', { enabled: true }).catch(() => {})
+
+  // 1b. Units, pinned explicitly so the screenshots don't silently change meaning
+  //     when a default does. They match the current defaults (ba3733da made
+  //     celsius/metric/24h consistent across the store and the settings UI) —
+  //     stating them here keeps the captures reproducible either way.
+  await call(api, 'post', '/api/settings/bulk', {
+    settings: { temperature_unit: 'celsius', distance_unit: 'metric' },
+  })
+
+  // 2. Extra members. Ignore 409 so a re-run against a warm DB still works.
+  const memberIds: number[] = []
+  for (const m of MEMBERS) {
+    const res = await api.post('/api/admin/users', { data: m })
+    if (res.ok()) {
+      const { user } = (await res.json()) as { user: { id: number } }
+      memberIds.push(user.id)
+    } else if (res.status() !== 409) {
+      throw new Error(`create user ${m.username} → ${res.status()}\n${await res.text()}`)
+    }
+  }
+
+  // 3. The trip, in JPY.
+  const { trip } = await call<{ trip: { id: number } }>(api, 'post', '/api/trips', TRIP)
+  const tripId = trip.id
+
+  for (const m of MEMBERS) {
+    await call(api, 'post', `/api/trips/${tripId}/members`, { identifier: m.email }).catch(() => {})
+  }
+
+  // 4. Days are auto-generated by trip creation — read them back for assignment.
+  const days = await call<Array<{ id: number }> | { days: Array<{ id: number }> }>(
+    api, 'get', `/api/trips/${tripId}/days`)
+  const dayIds = (Array.isArray(days) ? days : days.days).map(d => d.id)
+
+  // 5. Places, then pin each onto its day.
+  const placeIds: number[] = []
+  for (const p of PLACES) {
+    const { day, ...payload } = p
+    const { place } = await call<{ place: { id: number } }>(
+      api, 'post', `/api/trips/${tripId}/places`, payload)
+    placeIds.push(place.id)
+    const dayId = dayIds[day]
+    if (dayId) {
+      await call(api, 'post', `/api/trips/${tripId}/days/${dayId}/assignments`,
+                 { place_id: place.id }).catch(() => {})
+    }
+  }
+
+  // 6. A day note, so the itinerary shows more than places.
+  if (dayIds[0]) {
+    await call(api, 'post', `/api/trips/${tripId}/days/${dayIds[0]}/notes`, {
+      text: 'Pick up the JR Pass at the airport counter before taking the train in.',
+      time: '08:15', icon: 'train',
+    }).catch(() => {})
+  }
+
+  // 7. Costs. Split across everyone so the settle-up view has real balances.
+  //    NOTE: never send exchange_rate — the server freezes the FX rate itself,
+  //    and a hand-supplied one fights the settlement maths.
+  const allMembers = [1, ...memberIds]
+  for (const e of EXPENSES) {
+    await call(api, 'post', `/api/trips/${tripId}/budget`, {
+      ...e,
+      payers: [{ user_id: 1, amount: e.total_price }],
+      member_ids: allMembers,
+    }).catch(() => {})
+  }
+
+  // A foreign-currency settle-up payment — the v3.4.0 feature worth showing.
+  if (memberIds[0]) {
+    await call(api, 'post', `/api/trips/${tripId}/budget/settlements`, {
+      from_user_id: memberIds[0], to_user_id: 1, amount: 120, currency: 'EUR',
+    }).catch(() => {})
+  }
+
+  // 8. Packing — category is free text on the item, there is no category resource.
+  for (const group of PACKING) {
+    for (const name of group.items) {
+      await call(api, 'post', `/api/trips/${tripId}/packing`, {
+        name, category: group.category, visibility: 'common',
+      }).catch(() => {})
+    }
+  }
+
+  for (const t of TODOS) {
+    await call(api, 'post', `/api/trips/${tripId}/todo`, t).catch(() => {})
+  }
+
+  // 9. A multi-leg flight. Coordinates are mandatory — endpoints without them
+  //    are silently dropped by the server, leaving a booking with no route.
+  await call(api, 'post', `/api/trips/${tripId}/reservations`, {
+    title: 'LH716 FRA → HND',
+    type: 'flight',
+    reservation_time: '2026-09-12T13:05:00',
+    reservation_end_time: '2026-09-13T08:25:00',
+    confirmation_number: 'X7K2QP',
+    status: 'confirmed',
+    location: 'Frankfurt Airport',
+    metadata: { airline: 'Lufthansa', flight_number: 'LH716',
+                departure_airport: 'FRA', arrival_airport: 'HND' },
+    endpoints: [
+      { role: 'from', sequence: 0, name: 'Frankfurt Airport', code: 'FRA',
+        lat: 50.0379, lng: 8.5622, timezone: 'Europe/Berlin',
+        local_date: '2026-09-12', local_time: '13:05' },
+      { role: 'to', sequence: 1, name: 'Tokyo Haneda', code: 'HND',
+        lat: 35.5494, lng: 139.7798, timezone: 'Asia/Tokyo',
+        local_date: '2026-09-13', local_time: '08:25' },
+    ],
+  }).catch(() => {})
+
+  // 10. A collection, populated from the trip's own places.
+  let collectionId: number | undefined
+  try {
+    const created = await call<{ id: number } | { collection: { id: number } }>(
+      api, 'post', '/api/addons/collections',
+      { name: 'Kyoto shortlist', description: 'Places we want to reach on the second week.',
+        color: '#ef4444', icon: 'MapPin' })
+    collectionId = 'id' in created ? created.id : created.collection.id
+    for (const placeId of placeIds.slice(4)) {
+      await call(api, 'post', '/api/addons/collections/places/from-trip', {
+        collection_id: collectionId, source_trip_id: tripId, source_place_id: placeId, force: true,
+      }).catch(() => {})
+    }
+  } catch { /* collections addon unavailable — screenshots for it will be skipped */ }
+
+  // 11. Journey. Entries are generated server-side from the trip, then filled in.
+  let journeyId: number | undefined
+  try {
+    const j = await call<{ id: number } | { journey: { id: number } }>(
+      api, 'post', '/api/journeys',
+      { title: 'Autumn in Japan', subtitle: 'Momiji season, Tokyo to Kyoto', trip_ids: [tripId] })
+    journeyId = 'id' in j ? j.id : j.journey.id
+  } catch { /* journey addon unavailable */ }
+
+  // 11b. Collab: chat, notes and polls.
+  //
+  //      Chat is only convincing with more than one voice, and every collab
+  //      write is attributed to the acting user — so messages and votes are
+  //      posted as the members themselves, via their own bearer tokens, not as
+  //      the admin. A single-speaker chat log would misrepresent the feature.
+  //      Each member gets its OWN request context. Logging in through the shared
+  //      one would set the trek_session cookie on it, and extractToken()
+  //      (server/src/middleware/auth.ts:9) reads the cookie BEFORE the
+  //      Authorization header — so every later write, including the admin's,
+  //      would silently be attributed to whoever logged in last.
+  const members: Record<string, APIRequestContext> = {}
+  for (const m of MEMBERS) {
+    if (!newContext) break
+    const anon = await newContext()
+    const res = await anon.post('/api/auth/login', { data: { email: m.email, password: m.password } })
+    if (!res.ok()) { await anon.dispose(); continue }
+    const { token } = (await res.json()) as { token?: string }
+    await anon.dispose()
+    if (token) members[m.username] = await newContext(token)
+  }
+  /** The member's own context, or the admin's as a visible fallback. */
+  const as = (username: string): APIRequestContext => members[username] ?? api
+
+  const collab = `/api/trips/${tripId}/collab`
+
+  for (const n of [
+    { title: 'Rail passes', category: 'Transport', color: '#3b82f6',
+      content: 'The 14-day JR Pass covers the Tokyo–Kyoto legs. Activate it at the airport counter on arrival, not before.' },
+    { title: 'Ryokan etiquette', category: 'Accommodation', color: '#ef4444',
+      content: 'Shoes off at the entrance, yukata for dinner. Dinner is served at 18:30 sharp — being late is genuinely rude.' },
+    { title: 'Rainy-day alternatives', category: 'Ideas', color: '#22c55e',
+      content: 'teamLab Planets, the Kyoto Railway Museum and Nishiki Market all work in bad weather.' },
+  ]) {
+    await api.post(`${collab}/notes`, { data: n }).catch(() => {})
+  }
+
+  const pollRes = await api.post(`${collab}/polls`, {
+    data: {
+      question: 'Which day should we keep free for Nara?',
+      options: ['Wed, Sep 16', 'Thu, Sep 17', 'Sat, Sep 19'],
+      multiple: false,
+    },
+  })
+  if (pollRes.ok()) {
+    const { poll } = (await pollRes.json()) as { poll: { id: number | string } }
+    await api.post(`${collab}/polls/${poll.id}/vote`, { data: { option_index: 1 } }).catch(() => {})
+    await as('mira').post(`${collab}/polls/${poll.id}/vote`, { data: { option_index: 1 } }).catch(() => {})
+    await as('jonas').post(`${collab}/polls/${poll.id}/vote`, { data: { option_index: 2 } }).catch(() => {})
+  }
+  await api.post(`${collab}/polls`, {
+    data: { question: 'Ryokan or city hotel in Hakone?', options: ['Ryokan with onsen', 'City hotel'], multiple: false },
+  }).catch(() => {})
+
+  const conversation: Array<[string, string]> = [
+    ['admin', 'Flights are booked — we land at Haneda 08:25 on the 13th.'],
+    ['mira', 'Nice. Should we go straight to the hotel or drop bags and head out?'],
+    ['jonas', 'Drop bags. I want to be at Senso-ji before the crowds.'],
+    ['admin', "Agreed. I've put it on day 1 with a note to go before 08:00."],
+    ['mira', 'Booked the teamLab slot for the 13th, 14:00. Tickets are in the Files tab.'],
+    ['jonas', 'Do we need to reserve the ryokan dinner separately?'],
+    ['admin', "It's included — kaiseki, 18:30. Added it to the to-dos so we don't forget to confirm."],
+  ]
+  for (const [who, text] of conversation) {
+    const ctx = who === 'admin' ? api : as(who)
+    await ctx.post(`${collab}/messages`, { data: { text } }).catch(() => {})
+  }
+
+  for (const ctx of Object.values(members)) await ctx.dispose()
+
+  // 12. Plugins, installed from the community registry.
+  //
+  //     Registry install is the ONLY path that produces a representative
+  //     screenshot. Dev-link and sideload both stamp the plugin card with a
+  //     badge ("Dev-Link" / "Sideloaded", AdminPluginsPanel.tsx:307,361) that no
+  //     ordinary install shows, and TREK_PLUGINS_DEV_LINK additionally reveals a
+  //     "Link a local plugin" row in the panel. Documenting either would show
+  //     readers a UI they will never have.
+  //
+  //     Needs network. If the registry is unreachable the plugin screenshots are
+  //     skipped loudly rather than silently captured in a misleading state.
+  for (const id of ['koffi', 'trip-doctor']) {
+    const res = await api.post('/api/admin/plugins/install', { data: { id } })
+    if (!res.ok()) {
+      console.log(`PLUGIN INSTALL FAILED ${id} → ${res.status()} ${await res.text()}`)
+      continue
+    }
+    await api.post(`/api/admin/plugins/${id}/activate`, { data: {} })
+  }
+
+  return { tripId, memberIds, dayIds, placeIds, collectionId, journeyId }
+}

client/e2e/screenshots/settings.shot.ts

@@ -0,0 +1,105 @@
+import { test, clearNotices } from './shot'
+import type { Page } from '@playwright/test'
+
+/**
+ * Settings and Admin tabs.
+ *
+ * Both pages use the shared PageSidebar with client-side tab state (no URL
+ * segment per tab), so each capture clicks its way in. Labels come from
+ * shared/src/i18n/en — note "General" is the tab the wiki still calls
+ * "Display", which is one of the corrections this screenshot run supports.
+ */
+
+async function openSidebarTab(page: Page, label: string) {
+  await page.getByRole('button', { name: label, exact: true }).first().click()
+  await page.waitForTimeout(600)
+}
+
+test.describe('user settings', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/settings')
+    await clearNotices(page)
+  })
+
+  // Filename kept as UsrSettings.png — the wiki already references it.
+  test('general tab', async ({ page, shot }) => {
+    await openSidebarTab(page, 'General')
+    await shot.page_('UsrSettings')
+  })
+
+  test('appearance tab', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Appearance')
+    await shot.page_('UsrSettingsAppearance')
+  })
+
+  test('map tab', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Map')
+    await shot.page_('UsrSettingsMap')
+  })
+
+  test('notifications tab', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Notifications')
+    await shot.page_('NotifSettings')
+  })
+
+  test('offline tab', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Offline')
+    await shot.page_('SettingsOffline')
+  })
+
+  test('account tab', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Account')
+    await shot.page_('SettingsAccount')
+  })
+})
+
+test.describe('admin panel', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/admin')
+    await clearNotices(page)
+  })
+
+  test('users', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Users')
+    await shot.page_('UsersAndInvites')
+  })
+
+  test('user defaults', async ({ page, shot }) => {
+    await openSidebarTab(page, 'User Defaults')
+    await shot.page_('AdminUserDefaults')
+  })
+
+  test('personalization', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Personalization')
+    await shot.page_('CategoryManager')
+  })
+
+  test('addons', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Addons')
+    await shot.page_('Addons-Overview')
+  })
+
+  test('plugins', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Plugins')
+    await shot.page_('AdminPlugins')
+  })
+
+  test('github releases', async ({ page, shot }) => {
+    await openSidebarTab(page, 'GitHub')
+    await shot.page_('GithubReleases')
+  })
+
+  test('backup', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Backup')
+    await shot.page_('Backup')
+  })
+
+  test('audit log', async ({ page, shot }) => {
+    await openSidebarTab(page, 'Audit')
+    await shot.page_('Audit')
+  })
+
+  test('admin panel overview', async ({ page, shot }) => {
+    await shot.page_('AdminPanel')
+  })
+})

client/e2e/screenshots/shot.ts

@@ -0,0 +1,119 @@
+import { test as base, expect, type Page, type Locator } from '@playwright/test'
+import { mkdirSync } from 'node:fs'
+import path from 'node:path'
+
+/**
+ * Shared plumbing for the documentation screenshot run (`npm run shots`).
+ *
+ * These are not assertions about behaviour — they drive the app to a known
+ * state and capture it for the wiki. They live behind their own Playwright
+ * project (`screenshots`, testMatch /\.shot\.ts/) so a normal `npm run e2e`
+ * never pays for them.
+ *
+ * Output goes to a staging directory, NOT straight into wiki/assets/, so a
+ * bad run can never clobber good artwork. Promote with `npm run shots:promote`.
+ */
+
+// Playwright runs from the client workspace root, matching how
+// playwright.config.ts spells `storageState: 'e2e/.tmp/state.json'`.
+export const OUT_DIR = path.join(process.cwd(), 'e2e', '.tmp', 'shots')
+
+/** Desktop capture size. 2x scale keeps text crisp; images are squeezed on promote. */
+export const VIEWPORT = { width: 1440, height: 900 }
+
+export const test = base.extend<{ shot: Shot }>({
+  // Overriding `page` (rather than doing this inside the `shot` fixture) is
+  // deliberate: fixtures initialise lazily, so a route registered in `shot`
+  // lands AFTER any beforeEach hook has already navigated — too late to
+  // intercept the config request.
+  page: async ({ page }, use) => {
+    await page.setViewportSize(VIEWPORT)
+    await hideDevOnlyUi(page)
+    await use(page)
+  },
+  shot: async ({ page }, use) => {
+    mkdirSync(OUT_DIR, { recursive: true })
+    await use(new Shot(page))
+  },
+})
+
+/**
+ * The E2E backend runs with NODE_ENV=development, so /auth/app-config reports
+ * `dev_mode: true` (authService.ts) and the admin sidebar grows a
+ * "Dev: Notifications" tab that no real deployment ever shows.
+ *
+ * Rewriting the response is the surgical fix. Flipping the server to
+ * NODE_ENV=production would also enable HSTS (globalMiddleware.ts), and an
+ * HSTS header on localhost would upgrade the run to https and break it.
+ */
+async function hideDevOnlyUi(page: Page): Promise<void> {
+  await page.route('**/api/auth/app-config', async route => {
+    const res = await route.fetch()
+    const body = await res.json()
+    await route.fulfill({ response: res, json: { ...body, dev_mode: false } })
+  })
+}
+
+export { expect }
+
+export class Shot {
+  constructor(private readonly page: Page) {}
+
+  /**
+   * Capture the full viewport. `name` is the target filename in wiki/assets/
+   * (without extension) so the mapping from screenshot to doc page is literal.
+   */
+  async page_(name: string): Promise<void> {
+    await this.settle()
+    await this.page.screenshot({ path: path.join(OUT_DIR, `${name}.png`) })
+  }
+
+  /** Capture one element — preferred for dialogs, panels and cards. */
+  async element(name: string, target: Locator): Promise<void> {
+    await this.settle()
+    await expect(target).toBeVisible()
+    await target.screenshot({ path: path.join(OUT_DIR, `${name}.png`) })
+  }
+
+  /**
+   * Quiet the page before capturing: fonts loaded, images decoded, animations
+   * finished, no pending network. Without this, screenshots catch skeleton
+   * loaders and half-faded modals, which is exactly how the current wiki
+   * assets ended up inconsistent.
+   */
+  private async settle(): Promise<void> {
+    // Bounded: TREK holds a WebSocket open at /ws, so the network never goes
+    // fully idle and an unbounded wait would burn the whole test timeout.
+    await this.page.waitForLoadState('networkidle', { timeout: 5_000 }).catch(() => {})
+    // Await, but return nothing — the resolved FontFaceSet is not serialisable.
+    await this.page.evaluate(async () => { await document.fonts.ready })
+    await this.page.evaluate(async () => {
+      await Promise.all(
+        Array.from(document.images)
+          .filter(img => !img.complete)
+          .map(img => new Promise(res => { img.onload = img.onerror = res })),
+      )
+    })
+    // Let CSS transitions land (modal fade-in, sidebar slide).
+    await this.page.waitForTimeout(400)
+  }
+}
+
+/**
+ * Dismiss the first-run system notice. Copied in spirit from e2e/helpers.ts,
+ * but tolerant: on a seeded DB the notice may already be cleared.
+ */
+export async function clearNotices(page: Page): Promise<void> {
+  const next = page.getByRole('button', { name: /next/i })
+  for (let i = 0; i < 6 && (await next.isVisible().catch(() => false)); i++) {
+    if (!(await next.isEnabled().catch(() => false))) break
+    await next.click().catch(() => {})
+  }
+  for (const label of ['Dismiss', 'OK']) {
+    const btn = page.getByRole('button', { name: label, exact: true })
+    for (let i = 0; i < 4 && (await btn.isVisible().catch(() => false)); i++) {
+      await btn.click().catch(() => {})
+      await page.waitForTimeout(300)
+    }
+  }
+}

client/e2e/trip-planner.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test'
+import { dismissSystemNotices } from './helpers'
 
 // Open a trip into the planner: create a trip, open it from the dashboard, and
 // confirm the trip planner (TripPlannerPage — the app's largest page) actually
@@ -6,12 +7,17 @@ import { test, expect } from '@playwright/test'
 test('open a trip and land in the planner with a map', async ({ page }) => {
   await page.goto('/dashboard')
 
+  // The release notice greets a freshly seeded user and its backdrop eats the click below.
+  await dismissSystemNotices(page)
+
   // Create a trip to open.
   await page.locator('.add-trip-card').click()
-  const modal = page.locator('.modal-backdrop')
+  const modal = page.locator('.trek-modal-backdrop')
   await expect(modal).toBeVisible()
+  // Target Title by placeholder: the cover-image search inputs sit above it, so
+  // input[type=text].first() is the photo search box, not the field we want.
   const title = `E2E Planner ${Date.now()}`
-  await modal.locator('input[type="text"]').first().fill(title)
+  await modal.getByPlaceholder('e.g. Summer in Japan').fill(title)
   await modal.getByRole('button', { name: 'Create New Trip' }).click()
 
   // Open it from the dashboard.

client/index.html

@@ -23,11 +23,6 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=MuseoModerno:wght@400;700;800&display=swap" rel="stylesheet" />
-
-    <!-- Leaflet -->
-    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
-          integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
-          crossorigin="" />
   </head>
   <body>
     <div id="root"></div>

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trek/client",
-  "version": "3.2.0",
+  "version": "3.4.0",
   "private": true,
   "type": "module",
   "scripts": {
@@ -20,6 +20,8 @@
     "theme:lint": "node scripts/theme-lint.mjs",
     "theme:lint:strict": "node scripts/theme-lint.mjs --strict",
     "e2e": "playwright test",
+    "shots": "playwright test --project=screenshots",
+    "shots:promote": "node e2e/screenshots/promote.mjs",
     "e2e:report": "playwright show-report",
     "format": "prettier --write \"src/**/*.tsx\" \"src/**/*.css\"",
     "format:check": "prettier --check \"src/**/*.tsx\" \"src/**/*.css\""
@@ -34,6 +36,7 @@
     "dexie": "^4.4.2",
     "drag-drop-touch": "^1.3.1",
     "heic-to": "^1.4.2",
+    "iso-3166-2": "^1.0.0",
     "leaflet": "^1.9.4",
     "lucide-react": "^0.344.0",
     "mapbox-gl": "^3.22.0",

client/playwright.config.ts

@@ -35,6 +35,28 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'], storageState: 'e2e/.tmp/state.json' },
       dependencies: ['setup'],
     },
+    // Documentation screenshots (`npm run shots`). Excluded from the normal e2e
+    // run by its own testMatch — these capture artwork for wiki/assets/, they
+    // assert nothing. 2x scale keeps text crisp at the sizes the wiki renders.
+    // Populates the demo trip the screenshots are taken of. Separate project so
+    // it runs exactly once, between auth and capture.
+    {
+      name: 'seed',
+      testMatch: /seed\.setup\.ts/,
+      use: { ...devices['Desktop Chrome'], storageState: 'e2e/.tmp/state.json' },
+      dependencies: ['setup'],
+    },
+    {
+      name: 'screenshots',
+      testMatch: /\.shot\.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: 'e2e/.tmp/state.json',
+        viewport: { width: 1440, height: 900 },
+        deviceScaleFactor: 2,
+      },
+      dependencies: ['seed'],
+    },
   ],
   webServer: [
     {

client/src/App.tsx

@@ -88,7 +88,7 @@ function ProtectedRoute({ children, adminRequired = false, addonId }: ProtectedR
   }
 
   return (
-    <div className="flex flex-col h-screen md:block md:h-auto">
+    <div className="flex flex-col h-dvh md:block md:h-auto">
       <div className="flex-1 overflow-y-auto md:overflow-visible">{children}</div>
       <BottomNav />
     </div>

client/src/api/client.ts

@@ -31,7 +31,7 @@ import {
   type PlaceBulkUpdateRequest,
   type DayNoteCreateRequest, type DayNoteUpdateRequest,
   type PackingImportRequest, type PackingBagMembersRequest, type PackingUpdateBagRequest,
-  type PackingCategoryAssigneesRequest,
+  type PackingCategoryAssigneesRequest, type PackingApplyTemplateRequest,
   type BudgetUpdateMembersRequest, type BudgetToggleMemberPaidRequest, type BudgetReorderCategoriesRequest,
   type TodoCategoryAssigneesRequest,
   type CollabNoteCreateRequest, type CollabNoteUpdateRequest, type CollabPollCreateRequest,
@@ -239,6 +239,40 @@ apiClient.interceptors.response.use(
     }
 )
 
+/**
+ * POST a FormData body — the ONLY way this client should upload a file.
+ *
+ * The shared axios instance carries `timeout: 8000`, and axios' timeout is a whole-
+ * request deadline rather than an idle one. A file upload that takes longer than 8s to
+ * push its body — a phone photo on a slow uplink, a 500 MB document — is aborted
+ * mid-stream, which the server reports as a multer "Request aborted" (#1495).
+ *
+ * Every upload therefore has to opt out with `timeout: 0`. That opt-out used to be
+ * hand-written per call site, so it was forgotten on 7 of 15 — including the two 500 MB
+ * endpoints (documents, backup restore). Centralizing makes the correct behavior the
+ * default instead of something you have to remember.
+ *
+ * The Content-Type is set for clarity only: axios unsets it for FormData in the browser
+ * so the platform can generate the multipart boundary.
+ */
+export interface UploadOptions {
+  onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void
+  idempotencyKey?: string
+  signal?: AbortSignal
+}
+
+export function postMultipart<T = any>(url: string, formData: FormData, opts?: UploadOptions): Promise<T> {
+  return apiClient.post(url, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+      ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}),
+    },
+    timeout: 0,
+    onUploadProgress: opts?.onUploadProgress,
+    signal: opts?.signal,
+  }).then(r => r.data as T)
+}
+
 export const authApi = {
   register: (data: RegisterRequest) => apiClient.post('/auth/register', data).then(r => r.data),
   validateInvite: (token: string) => apiClient.get(`/auth/invite/${token}`).then(r => r.data),
@@ -253,7 +287,7 @@ export const authApi = {
   updateSettings: (data: Record<string, unknown>) => apiClient.put('/auth/me/settings', data).then(r => r.data),
   getSettings: () => apiClient.get('/auth/me/settings').then(r => r.data),
   listUsers: () => apiClient.get('/auth/users').then(r => r.data),
-  uploadAvatar: (formData: FormData) => apiClient.post('/auth/avatar', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  uploadAvatar: (formData: FormData) => postMultipart('/auth/avatar', formData),
   deleteAvatar: () => apiClient.delete('/auth/avatar').then(r => r.data),
   getAppConfig: () => apiClient.get('/auth/app-config').then(r => r.data),
   updateAppSettings: (data: Record<string, unknown>) => apiClient.put('/auth/app-settings', data).then(r => r.data),
@@ -334,7 +368,7 @@ export const tripsApi = {
   get: (id: number | string) => apiClient.get(`/trips/${id}`).then(r => r.data),
   update: (id: number | string, data: TripUpdateRequest) => apiClient.put(`/trips/${id}`, data).then(r => r.data),
   delete: (id: number | string) => apiClient.delete(`/trips/${id}`).then(r => r.data),
-  uploadCover: (id: number | string, formData: FormData) => apiClient.post(`/trips/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  uploadCover: (id: number | string, formData: FormData) => postMultipart(`/trips/${id}/cover`, formData),
   searchCoverImages: (query: string) => apiClient.get('/trips/cover-images/search', { params: { query } }).then(r => r.data),
   archive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: true }).then(r => r.data),
   unarchive: (id: number | string) => apiClient.put(`/trips/${id}`, { is_archived: false }).then(r => r.data),
@@ -370,14 +404,14 @@ export const placesApi = {
     if (opts?.waypoints !== undefined) fd.append('importWaypoints', String(opts.waypoints))
     if (opts?.routes !== undefined) fd.append('importRoutes', String(opts.routes))
     if (opts?.tracks !== undefined) fd.append('importTracks', String(opts.tracks))
-    return apiClient.post(`/trips/${tripId}/places/import/gpx`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/places/import/gpx`, fd)
   },
   importMapFile: (tripId: number | string, file: File, opts?: { points?: boolean; paths?: boolean }) => {
     const fd = new FormData()
     fd.append('file', file)
     if (opts?.points !== undefined) fd.append('importPoints', String(opts.points))
     if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
-    return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/places/import/map`, fd)
   },
   importGoogleList: (tripId: number | string, url: string, enrich?: boolean) =>
       apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
@@ -415,7 +449,7 @@ 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 } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
   listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
-  applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
+  applyTemplate: (tripId: number | string, templateId: number, visibility: 'common' | 'personal' = 'common') => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`, { visibility } satisfies PackingApplyTemplateRequest).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 } satisfies PackingBagMembersRequest).then(r => r.data),
   listBags: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/bags`).then(r => r.data),
@@ -461,14 +495,31 @@ export const adminApi = {
   addons: () => apiClient.get('/admin/addons').then(r => r.data),
   updateAddon: (id: number | string, data: Record<string, unknown>) => apiClient.put(`/admin/addons/${id}`, data).then(r => r.data),
   plugins: () => apiClient.get('/admin/plugins').then(r => r.data),
-  pluginBrowse: () => apiClient.get('/admin/plugins/registry').then(r => r.data),
+  pluginBrowse: (refresh?: boolean) => apiClient.get('/admin/plugins/registry', { params: refresh ? { refresh: 1 } : undefined }).then(r => r.data),
   pluginDetail: (id: string) => apiClient.get(`/admin/plugins/registry/${encodeURIComponent(id)}`).then(r => r.data),
-  pluginInstall: (id: string, version?: string) => apiClient.post('/admin/plugins/install', { id, version }).then(r => r.data),
+  pluginInstall: (id: string, opts?: { version?: string; constraint?: string; withDependencies?: boolean }) =>
+    apiClient.post('/admin/plugins/install', { id, ...opts }).then(r => r.data),
   pluginActivate: (id: string, consent?: boolean) => apiClient.post(`/admin/plugins/${id}/activate`, consent ? { consent: true } : {}).then(r => r.data),
   pluginDeactivate: (id: string) => apiClient.post(`/admin/plugins/${id}/deactivate`).then(r => r.data),
   pluginUpdate: (id: string) => apiClient.post(`/admin/plugins/${id}/update`).then(r => r.data),
+  // Re-trust a ROTATED author signing key and update, in ONE call. `publicKey` is the
+  // full key the admin was shown (not a fingerprint): the server compares it exactly, so
+  // it can refuse if the registry entry was re-keyed again since the dialog rendered.
+  pluginRetrust: (id: string, version: string, publicKey: string) =>
+    apiClient.post(`/admin/plugins/${id}/retrust`, { version, publicKey }).then(r => r.data),
   pluginUninstall: (id: string, deleteData: boolean) => apiClient.post(`/admin/plugins/${id}/uninstall`, { deleteData }).then(r => r.data),
   pluginRescan: () => apiClient.post('/admin/plugins/rescan').then(r => r.data),
+  pluginUpload: (file: File) => { const fd = new FormData(); fd.append('file', file); return postMultipart('/admin/plugins/upload', fd) },
+  // Dev-link (dev-only): register a plugin from a local built dir + hot-reload it.
+  pluginLink: (path: string) => apiClient.post('/admin/plugins/link', { path }).then(r => r.data),
+  pluginReload: (id: string) => apiClient.post(`/admin/plugins/${id}/reload`).then(r => r.data),
+  // Operator-supplied egress hosts: a plugin talking to a SELF-HOSTED service can't name
+  // the operator's hostname in its manifest, so the admin adds it here. Saving re-spawns
+  // the plugin with the widened allow-list.
+  pluginEgressHosts: (id: string): Promise<{ supported: boolean; hosts: string[] }> =>
+    apiClient.get(`/admin/plugins/${id}/egress-hosts`).then(r => r.data),
+  pluginSetEgressHosts: (id: string, hosts: string[]): Promise<{ hosts: string[] }> =>
+    apiClient.put(`/admin/plugins/${id}/egress-hosts`, { hosts }).then(r => r.data),
   pluginErrors: (id: string) => apiClient.get(`/admin/plugins/${id}/errors`).then(r => r.data),
   pluginAudit: (id: string) => apiClient.get(`/admin/plugins/${id}/audit`).then(r => r.data),
   // Local LLM (Ollama) management for the AI-parsing addon.
@@ -553,12 +604,134 @@ export const addonsApi = {
   enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
+/** A host-rendered column/action a plugin contributes into a native planner view
+ * (reservations/places/day) via the tableContributor hook. Every field is bounded +
+ * normalized server-side; a column url is guaranteed http/https/mailto. */
+export type ViewContribution =
+  | { kind: 'column'; pluginId: string; entityId: number; id: string; label: string; value?: string; url?: string; icon?: string; tone: 'default' | 'success' | 'warn' | 'danger' }
+  | { kind: 'action'; pluginId: string; entityId: number; id: string; label: string; icon?: string; target: { kind: 'frame'; sub: string } | { kind: 'route'; method: 'GET' | 'POST'; sub: string } }
+
+/** A badge a plugin adds to a dashboard trip card via the tripCardProvider hook.
+ * Bounded + normalized server-side; the url is guaranteed http/https/mailto. */
+export interface TripCardBadge {
+  pluginId: string; tripId: number; id: string; label: string;
+  value?: string; icon?: string; tone: 'default' | 'success' | 'warn' | 'danger'; url?: string;
+}
+
+export interface PluginMapMarker {
+  pluginId: string; id: string; lat: number; lng: number;
+  label?: string; popupText?: string; url?: string; icon?: string;
+  tone: 'default' | 'success' | 'warn' | 'danger'
+}
+
+/** A text-only section a pdfSectionProvider plugin appends to the trip PDF export.
+ * Server-normalized: counts + lengths are capped, cells are plain strings. */
+export interface PluginPdfSection {
+  pluginId: string; title: string; paragraphs: string[];
+  table?: { headers: string[]; rows: string[][] }
+}
+
+/** A country tint layer an atlasLayerProvider plugin draws over the Atlas map for
+ * the signed-in user. Codes are ISO alpha-2 (server-validated), tone enum-whitelisted. */
+export interface PluginAtlasLayer {
+  pluginId: string; id: string; name?: string;
+  countries: Array<{ code: string; tone: 'default' | 'success' | 'warn' | 'danger'; label?: string }>
+}
+
+export interface PluginUserSettingField {
+  key: string; label?: string | null; input_type?: string; placeholder?: string | null;
+  hint?: string | null; required?: boolean; secret?: boolean;
+  options?: Array<{ value: string; label: string }>
+}
+
+/** A button a plugin contributes to its own settings page ("Test connection"). */
+export interface PluginAction {
+  key: string; label: string; hint?: string; danger: boolean
+}
+
 export const pluginsApi = {
   // Active plugins the client renders (page nav entries, dashboard widgets).
   active: () => apiClient.get('/plugins').then(r => r.data),
-  // Call one of a plugin's own declared routes through the host proxy.
-  invoke: (id: string, sub: string, init?: { method?: string; body?: unknown }) =>
-    apiClient.request({ url: `/plugins/${id}${sub}`, method: init?.method || 'GET', data: init?.body }).then(r => r.data),
+  // Extra place info contributed by placeDetailProvider plugins (#1429). Fail-safe:
+  // the server skips any slow/failing provider, so this only ever adds rows.
+  placeDetails: (placeId: number) =>
+    apiClient.get(`/place-details/${placeId}`).then(r => r.data as { providers: Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }> }),
+  // Validation/warning contributions from warningProvider plugins (#1429). Fail-safe.
+  tripWarnings: (tripId: number) =>
+    apiClient.get(`/trip-warnings/${tripId}`).then(r => r.data as { warnings: Array<{ pluginId: string; level: 'info' | 'warning' | 'error'; message: string; dayId?: number; placeId?: number }> }),
+  // Host-rendered columns/actions plugins add into a native planner view via the
+  // tableContributor hook. Fetched once per view, keyed by entityId; fail-safe.
+  viewContributions: (view: 'reservations' | 'transports' | 'places' | 'day' | 'costs' | 'packing' | 'files' | 'todos', tripId: number | string) =>
+    apiClient.get(`/view-contributions/${view}/${tripId}`).then(r => r.data as { contributions: ViewContribution[] }),
+  // Bounded markers plugins overlay on the trip map via the mapMarkerProvider hook
+  // (#587). Host-normalized + range-checked; fail-safe (skips slow/failing providers).
+  mapMarkers: (tripId: number | string) =>
+    apiClient.get(`/map-markers/${tripId}`).then(r => r.data as { markers: PluginMapMarker[] }),
+  // Text-only sections plugins append to the trip PDF export via the
+  // pdfSectionProvider hook. Host-normalized (counts + lengths capped); fail-safe.
+  pdfSections: (tripId: number | string) =>
+    apiClient.get(`/pdf-sections/${tripId}`).then(r => r.data as { sections: PluginPdfSection[] }),
+  // Country tint layers plugins draw over the Atlas map for the signed-in user via
+  // the atlasLayerProvider hook. No tripId — user-scoped server-side; fail-safe.
+  atlasLayers: () =>
+    apiClient.get('/atlas-layers').then(r => r.data as { layers: PluginAtlasLayer[] }),
+  // Extra rows plugins add under a journal entry via the journalEntryProvider hook.
+  // Same shape + hardening as placeDetails (label/value/allowlisted url); fail-safe.
+  journalEntryRows: (entryId: number) =>
+    apiClient.get(`/journal-entry-rows/${entryId}`).then(r => r.data as { providers: Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }> }),
+  // Badges plugins add to the dashboard trip cards via the tripCardProvider hook.
+  // One call for all visible cards; host access-checks each tripId + bounds every
+  // field (label/value/tone/allowlisted url); fail-safe.
+  tripCardContributions: (tripIds: Array<number | string>) =>
+    apiClient.get(`/trip-card-contributions?tripIds=${tripIds.join(',')}`).then(r => r.data as { contributions: TripCardBadge[] }),
+  // The signed-in user's OWN plugin activity log — every host-mediated action a
+  // plugin took bound to them, across all plugins, newest first. The user-facing
+  // half of the capability audit; what makes the broad read grants accountable.
+  myActivity: (limit = 200) =>
+    apiClient.get(`/plugin-activity?limit=${limit}`).then(r => r.data as { activity: Array<{ ts: string; plugin_id: string; plugin_name: string | null; method: string; resource: string | null; code: string }> }),
+  // A user's OWN scope:'user' settings for a plugin (API key, prefs). Secrets are
+  // masked; the write only accepts declared user-scope keys.
+  userSettings: (id: string) =>
+    apiClient.get(`/plugin-settings/${id}`).then(r => r.data as {
+      fields: PluginUserSettingField[]
+      config: Record<string, unknown>
+      actions: PluginAction[]
+    }),
+  // Run a settings-page action the plugin declared ("Test connection"). It runs AS the
+  // caller, so it reads the caller's own settings.
+  runAction: (id: string, key: string) =>
+    apiClient.post(`/plugin-settings/${id}/actions/${encodeURIComponent(key)}`)
+      .then(r => r.data as { ok: boolean; message?: string }),
+  saveUserSettings: (id: string, config: Record<string, unknown>) =>
+    apiClient.post(`/plugin-settings/${id}`, { config }).then(r => r.data as { config: Record<string, unknown> }),
+  // Host-brokered outbound OAuth (the host owns the tokens; the plugin only triggers).
+  oauthStatus: (id: string) =>
+    apiClient.get(`/plugin-oauth/${id}/status`).then(r => r.data as { configured: boolean; connected: boolean }),
+  oauthConnect: (id: string) =>
+    apiClient.post(`/plugin-oauth/${id}/connect`).then(r => r.data as { authorizeUrl: string }),
+  oauthDisconnect: (id: string) =>
+    apiClient.post(`/plugin-oauth/${id}/disconnect`).then(r => r.data as { connected: boolean }),
+  // Call one of a plugin's own declared routes through the host proxy. `sub` is
+  // supplied by untrusted plugin code (the trekBridge forwards it verbatim), so it
+  // MUST stay inside the plugin's own /plugins/:id/ namespace. We resolve it with
+  // the URL parser — which normalizes `../`, encoded traversal and backslashes the
+  // same way the browser would before sending — and reject anything that escapes
+  // the prefix or points off-origin. Without this a plugin could send
+  // sub='/../../auth/me' and drive arbitrary authenticated /api routes as the user.
+  invoke: (id: string, sub: string, init?: { method?: string; body?: unknown }) => {
+    const prefix = `/api/plugins/${id}/`
+    let resolved: URL
+    try {
+      resolved = new URL(String(sub).replace(/^\/+/, ''), window.location.origin + prefix)
+    } catch {
+      return Promise.reject(new Error('invalid plugin route'))
+    }
+    if (resolved.origin !== window.location.origin || !resolved.pathname.startsWith(prefix)) {
+      return Promise.reject(new Error('plugin route escapes its namespace'))
+    }
+    const url = resolved.pathname.slice('/api'.length) + resolved.search
+    return apiClient.request({ url, method: init?.method || 'GET', data: init?.body }).then(r => r.data)
+  },
 }
 
 export const airtrailApi = {
@@ -571,8 +744,8 @@ export const airtrailApi = {
   sync: (): Promise<{ changed: number }> => apiClient.post('/integrations/airtrail/sync').then(r => r.data),
   // flights + import are added with the trip-planner import (P2)
   flights: () => apiClient.get('/integrations/airtrail/flights').then(r => r.data),
-  import: (tripId: number, flightIds: string[]) =>
-    apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, { flightIds }).then(r => r.data),
+  import: (tripId: number, flightIds: string[], connections?: string[][]) =>
+    apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, connections?.length ? { flightIds, connections } : { flightIds }).then(r => r.data),
 }
 
 export const journeyApi = {
@@ -597,27 +770,12 @@ export const journeyApi = {
   reorderEntries: (journeyId: number, orderedIds: number[]) => apiClient.put(`/journeys/${journeyId}/entries/reorder`, { orderedIds } satisfies JourneyReorderEntriesRequest).then(r => r.data),
 
   // Photos
-  uploadPhotos: (entryId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/entries/${entryId}/photos`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  uploadGalleryPhotos: (journeyId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/${journeyId}/gallery/photos`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
-  uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: { onUploadProgress?: (e: import('axios').AxiosProgressEvent) => void; idempotencyKey?: string; signal?: AbortSignal }) =>
-    apiClient.post(`/journeys/${journeyId}/gallery/video`, formData, {
-      headers: { 'Content-Type': undefined as any, ...(opts?.idempotencyKey ? { 'X-Idempotency-Key': opts.idempotencyKey } : {}) },
-      timeout: 0,
-      onUploadProgress: opts?.onUploadProgress,
-      signal: opts?.signal,
-    }).then(r => r.data),
+  uploadPhotos: (entryId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/entries/${entryId}/photos`, formData, opts),
+  uploadGalleryPhotos: (journeyId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/${journeyId}/gallery/photos`, formData, opts),
+  uploadGalleryVideo: (journeyId: number, formData: FormData, opts?: UploadOptions) =>
+    postMultipart(`/journeys/${journeyId}/gallery/video`, formData, opts),
   addProviderPhotosToGallery: (journeyId: number, provider: string, assetIds: string[], passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/${journeyId}/gallery/provider-photos`, { provider, asset_ids: assetIds, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) } satisfies JourneyProviderPhotosRequest).then(r => r.data),
   addProviderPhoto: (entryId: number, provider: string, assetId: string, caption?: string, passphrase?: string) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_id: assetId, caption, ...(passphrase ? { passphrase } : {}) }).then(r => r.data),
   addProviderPhotos: (entryId: number, provider: string, assetIds: string[], caption?: string, passphrase?: string, mediaTypes?: string[]) => apiClient.post(`/journeys/entries/${entryId}/provider-photos`, { provider, asset_ids: assetIds, caption, ...(passphrase ? { passphrase } : {}), ...(mediaTypes ? { media_types: mediaTypes } : {}) }).then(r => r.data),
@@ -628,7 +786,7 @@ export const journeyApi = {
   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),
+  uploadCover: (id: number, formData: FormData) => postMultipart(`/journeys/${id}/cover`, formData),
 
   // Contributors
   addContributor: (id: number, userId: number, role: string) => apiClient.post(`/journeys/${id}/contributors`, { user_id: userId, role }).then(r => r.data),
@@ -675,8 +833,8 @@ export const budgetApi = {
   setPayers: (tripId: number | string, id: number, payers: { user_id: number; amount: number }[]) => apiClient.put(`/trips/${tripId}/budget/${id}/payers`, { payers }).then(r => r.data),
   perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
   settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
-  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
-  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
+  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number; currency?: string }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
   deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).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 } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
@@ -684,9 +842,7 @@ export const budgetApi = {
 
 export const filesApi = {
   list: (tripId: number | string, trash?: boolean) => apiClient.get(`/trips/${tripId}/files`, { params: trash ? { trash: 'true' } : {} }).then(r => r.data),
-  upload: (tripId: number | string, formData: FormData) => apiClient.post(`/trips/${tripId}/files`, formData, {
-    headers: { 'Content-Type': 'multipart/form-data' }
-  }).then(r => r.data),
+  upload: (tripId: number | string, formData: FormData, opts?: UploadOptions) => postMultipart(`/trips/${tripId}/files`, formData, opts),
   update: (tripId: number | string, id: number, data: FileUpdateRequest) => apiClient.put(`/trips/${tripId}/files/${id}`, data).then(r => r.data),
   delete: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/files/${id}`).then(r => r.data),
   toggleStar: (tripId: number | string, id: number) => apiClient.patch(`/trips/${tripId}/files/${id}/star`).then(r => r.data),
@@ -711,7 +867,7 @@ export const reservationsApi = {
     fd.append('mode', mode)
     // No client-side timeout: kitinerary + LLM extraction routinely exceeds the
     // global 8s default (a cold local model alone can take ~45s).
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/reservations/import/booking`, fd)
   },
   importBookingConfirm: (tripId: number | string, items: BookingImportPreviewItem[]): Promise<BookingImportConfirmResponse> =>
     apiClient.post(`/trips/${tripId}/reservations/import/booking/confirm`, { items }).then(r => r.data),
@@ -721,7 +877,7 @@ export const reservationsApi = {
     const fd = new FormData()
     for (const f of files) fd.append('files', f)
     fd.append('mode', mode)
-    return apiClient.post(`/trips/${tripId}/reservations/import/booking/async`, fd, { headers: { 'Content-Type': 'multipart/form-data' }, timeout: 0 }).then(r => r.data)
+    return postMultipart(`/trips/${tripId}/reservations/import/booking/async`, fd)
   },
   // Poll a background job — recovery path when a WebSocket push was missed.
   importJobStatus: (tripId: number | string, jobId: string): Promise<{ status: 'running' | 'done' | 'error'; done: number; total: number; result?: BookingImportPreviewResponse; error?: string }> =>
@@ -784,7 +940,7 @@ export const collabApi = {
   createNote: (tripId: number | string, data: CollabNoteCreateRequest) => apiClient.post(`/trips/${tripId}/collab/notes`, data).then(r => r.data),
   updateNote: (tripId: number | string, id: number, data: CollabNoteUpdateRequest) => apiClient.put(`/trips/${tripId}/collab/notes/${id}`, data).then(r => r.data),
   deleteNote: (tripId: number | string, id: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${id}`).then(r => r.data),
-  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => apiClient.post(`/trips/${tripId}/collab/notes/${noteId}/files`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data),
+  uploadNoteFile: (tripId: number | string, noteId: number, formData: FormData) => postMultipart(`/trips/${tripId}/collab/notes/${noteId}/files`, formData),
   deleteNoteFile: (tripId: number | string, noteId: number, fileId: number) => apiClient.delete(`/trips/${tripId}/collab/notes/${noteId}/files/${fileId}`).then(r => r.data),
   getPolls: (tripId: number | string) => apiClient.get(`/trips/${tripId}/collab/polls`).then(r => r.data),
   createPoll: (tripId: number | string, data: CollabPollCreateRequest) => apiClient.post(`/trips/${tripId}/collab/polls`, data).then(r => r.data),
@@ -819,7 +975,7 @@ export const backupApi = {
   uploadRestore: (file: File) => {
     const form = new FormData()
     form.append('backup', file)
-    return apiClient.post('/backup/upload-restore', form, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
+    return postMultipart('/backup/upload-restore', form)
   },
   getAutoSettings: () => apiClient.get('/backup/auto-settings').then(r => r.data),
   setAutoSettings: (settings: Record<string, unknown>) => apiClient.put('/backup/auto-settings', settings).then(r => r.data),
@@ -856,6 +1012,10 @@ export const notificationsApi = {
   testSmtp: (email?: string) => apiClient.post('/notifications/test-smtp', { email }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testSmtp')),
   testWebhook: (url?: string) => apiClient.post('/notifications/test-webhook', { url }).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testWebhook')),
   testNtfy: (payload: { topic?: string; server?: string | null; token?: string | null }) => apiClient.post('/notifications/test-ntfy', payload).then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testNtfy')),
+  // Generic channel test — this is how a PLUGIN channel's "Send test" button works.
+  testChannel: (channelId: string) =>
+    apiClient.post(`/notifications/test/${encodeURIComponent(channelId)}`)
+      .then(r => checkInDev(channelTestResultSchema, r.data, 'notifications.testChannel')),
 }
 
 export const inAppNotificationsApi = {

client/src/api/collections.ts

@@ -1,4 +1,4 @@
-import apiClient from './client'
+import apiClient, { postMultipart } from './client'
 import type { AxiosResponse } from 'axios'
 import type {
   CollectionListResponse,
@@ -56,7 +56,7 @@ export const collectionsApi = {
   update: (id: number, body: CollectionUpdateRequest): Promise<{ collection: Collection }> =>
     ax.patch(`${base}/${id}`, body satisfies CollectionUpdateRequest).then((r: AxiosResponse) => r.data),
   uploadCover: (id: number, formData: FormData): Promise<Collection> =>
-    ax.post(`${base}/${id}/cover`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then((r: AxiosResponse) => r.data),
+    postMultipart(`${base}/${id}/cover`, formData),
   remove: (id: number): Promise<unknown> =>
     ax.delete(`${base}/${id}`).then((r: AxiosResponse) => r.data),
   reorder: (orderedIds: number[]): Promise<unknown> =>

client/src/api/uploadTimeout.test.ts

@@ -0,0 +1,75 @@
+// FE-API-UPLOAD-001 to FE-API-UPLOAD-013
+//
+// The shared axios instance carries timeout: 8000, and axios' timeout is a whole-request
+// deadline — not an idle one. Any upload whose body takes longer than 8s to push is
+// aborted mid-stream and the server reports a multer "Request aborted" (#1495).
+//
+// The original fix added `timeout: 0` to the three cover uploads by hand, which left the
+// same bug live on 7 other endpoints — including the two that accept 500 MB (documents
+// and backup restore). Every multipart call now goes through postMultipart(), so this
+// suite pins ALL of them, not just the covers.
+import { describe, it, expect, vi, afterEach } from 'vitest'
+import {
+  apiClient,
+  authApi,
+  tripsApi,
+  placesApi,
+  adminApi,
+  journeyApi,
+  filesApi,
+  reservationsApi,
+  collabApi,
+  backupApi,
+} from './client'
+import { collectionsApi } from './collections'
+
+describe('every multipart upload disables the global request timeout', () => {
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  function spyPost() {
+    return vi.spyOn(apiClient, 'post').mockResolvedValue({ data: {} } as any)
+  }
+
+  const fd = () => new FormData()
+  const file = () => new File(['x'], 'f.bin')
+
+  // [id, description, invoke, expected url]
+  const cases: [string, string, () => Promise<unknown>, string][] = [
+    ['FE-API-UPLOAD-001', 'authApi.uploadAvatar (5 MB)', () => authApi.uploadAvatar(fd()), '/auth/avatar'],
+    ['FE-API-UPLOAD-002', 'tripsApi.uploadCover (20 MB)', () => tripsApi.uploadCover(7, fd()), '/trips/7/cover'],
+    ['FE-API-UPLOAD-003', 'placesApi.importGpx (10 MB)', () => placesApi.importGpx(7, file()), '/trips/7/places/import/gpx'],
+    ['FE-API-UPLOAD-004', 'placesApi.importMapFile (10 MB)', () => placesApi.importMapFile(7, file()), '/trips/7/places/import/map'],
+    ['FE-API-UPLOAD-005', 'adminApi.pluginUpload (50 MB)', () => adminApi.pluginUpload(file()), '/admin/plugins/upload'],
+    ['FE-API-UPLOAD-006', 'journeyApi.uploadCover (20 MB)', () => journeyApi.uploadCover(7, fd()), '/journeys/7/cover'],
+    ['FE-API-UPLOAD-007', 'journeyApi.uploadPhotos (20 MB)', () => journeyApi.uploadPhotos(7, fd()), '/journeys/entries/7/photos'],
+    ['FE-API-UPLOAD-008', 'journeyApi.uploadGalleryVideo (500 MB)', () => journeyApi.uploadGalleryVideo(7, fd()), '/journeys/7/gallery/video'],
+    ['FE-API-UPLOAD-009', 'filesApi.upload (500 MB)', () => filesApi.upload(7, fd()), '/trips/7/files'],
+    ['FE-API-UPLOAD-010', 'collabApi.uploadNoteFile (50 MB)', () => collabApi.uploadNoteFile(7, 3, fd()), '/trips/7/collab/notes/3/files'],
+    ['FE-API-UPLOAD-011', 'backupApi.uploadRestore (500 MB)', () => backupApi.uploadRestore(file()), '/backup/upload-restore'],
+    ['FE-API-UPLOAD-012', 'collectionsApi.uploadCover (20 MB)', () => collectionsApi.uploadCover(7, fd()), '/addons/collections/7/cover'],
+  ]
+
+  for (const [id, desc, invoke, url] of cases) {
+    it(`${id}: ${desc} posts with timeout 0`, async () => {
+      const post = spyPost()
+      await invoke()
+      expect(post).toHaveBeenCalledWith(
+        url,
+        expect.any(FormData),
+        expect.objectContaining({ timeout: 0 }),
+      )
+    })
+  }
+
+  it('FE-API-UPLOAD-013: reservationsApi booking import posts with timeout 0', async () => {
+    const post = spyPost()
+    await reservationsApi.importBookingPreview(7, [file()])
+    expect(post).toHaveBeenCalledWith(
+      '/trips/7/reservations/import/booking',
+      expect.any(FormData),
+      expect.objectContaining({ timeout: 0 }),
+    )
+  })
+})

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

@@ -0,0 +1,484 @@
+import { http, HttpResponse } from 'msw'
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { server } from '../../../tests/helpers/msw/server'
+import { fireEvent, render, screen, waitFor } from '../../../tests/helpers/render'
+import { resetAllStores } from '../../../tests/helpers/store'
+import AdminPluginsPanel from './AdminPluginsPanel'
+
+/**
+ * The "allowed hosts" chip. A plugin that talks to a SELF-HOSTED service (a Gotify) can't
+ * name the operator's host in its manifest, so the admin adds it — but they'd never know
+ * that unless the card says so. Until a host exists the plugin can reach NOTHING and looks
+ * silently broken, which is why the chip is warning-toned and actionable in that state.
+ */
+function plugin(over: Record<string, unknown> = {}) {
+  return {
+    id: 'trek-gotify', name: 'Gotify', description: 'Push notifications', type: 'integration',
+    icon: 'Bell', version: '1.0.0', status: 'active', enabled: 1,
+    last_error: null, reviewed_at: null, source_repo: null,
+    permissions: JSON.stringify(['hook:notification-channel', 'http:outbound:gotify.net']),
+    capabilities: '{}',
+    operatorEgress: true,
+    egressHostCount: 0,
+    dependencyStatus: 'ok',
+    dependencyIssues: { disabledAddons: [], missing: [], versionMismatch: [] },
+    ...over,
+  }
+}
+
+function mockList(p: Record<string, unknown>) {
+  server.use(
+    http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [p] })),
+    http.get('*/api/admin/plugins/registry', () => HttpResponse.json({ plugins: [] })),
+  )
+}
+
+beforeEach(() => resetAllStores())
+
+describe('AdminPluginsPanel — allowed-hosts chip', () => {
+  it('FE-COMP-PLUGINS-EGRESS-001: invites the admin to add a host when none is set', async () => {
+    mockList(plugin({ egressHostCount: 0 }))
+    render(<AdminPluginsPanel />)
+    // The plugin can't reach anything yet — the card must say so, not stay silent.
+    expect(await screen.findByRole('button', { name: /add allowed host/i })).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-002: shows the count once hosts exist', async () => {
+    mockList(plugin({ egressHostCount: 2 }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByRole('button', { name: /2 allowed host/i })).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /add allowed host/i })).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-003: a plugin that never declared operatorEgress gets NO chip', async () => {
+    mockList(plugin({ operatorEgress: false }))
+    render(<AdminPluginsPanel />)
+    await screen.findByText('Gotify')
+    // An admin must never be invited to widen egress for a plugin that didn't ask for it.
+    expect(screen.queryByRole('button', { name: /allowed host/i })).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-004: clicking the chip opens the allowed-hosts dialog', async () => {
+    mockList(plugin({ egressHostCount: 1 }))
+    server.use(
+      http.get('*/api/admin/plugins/trek-gotify/egress-hosts', () =>
+        HttpResponse.json({ supported: true, hosts: ['gotify.mydomain.com'] })),
+    )
+    render(<AdminPluginsPanel />)
+
+    fireEvent.click(await screen.findByRole('button', { name: /1 allowed host/i }))
+    await waitFor(() => expect(screen.getByText('gotify.mydomain.com')).toBeInTheDocument())
+  })
+})
+
+/**
+ * The Discover (pre-install) modal. Its "Connects to" list is what a reviewer reads to
+ * judge a plugin's network reach — so for an operatorEgress plugin that list is NOT the
+ * whole story, and saying nothing would actively mislead them.
+ */
+function mockDetail(manifest: Record<string, unknown> | null) {
+  server.use(
+    http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [] })),
+    // pluginBrowse returns the ARRAY itself, not { plugins: [...] }.
+    http.get('*/api/admin/plugins/registry', () =>
+      HttpResponse.json([{ id: 'trek-gotify', name: 'Gotify', author: 'jubnl', description: 'Push', repo: 'jubnl/trek-gotify', type: 'integration', tags: [] }])),
+    http.get('*/api/admin/plugins/registry/trek-gotify', () =>
+      HttpResponse.json({
+        id: 'trek-gotify', name: 'Gotify', author: 'jubnl', description: 'Push', repo: 'jubnl/trek-gotify',
+        type: 'integration', tags: [], size: 1024, publishedAt: null, latest: '1.0.0', manifest,
+      })),
+  )
+}
+
+describe('AdminPluginsPanel — Discover modal, operator-egress pill', () => {
+  const base = { permissions: ['hook:notification-channel', 'http:outbound:gotify.net'], egress: ['gotify.net'], settings: [], license: 'MIT', icon: null }
+
+  /** The panel opens on Installed — switch to Discover, then open the plugin's card. */
+  async function openDetail() {
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /discover/i }))
+    fireEvent.click(await screen.findByText('Gotify'))
+  }
+
+  it('FE-COMP-PLUGINS-EGRESS-005: warns that the host list is not the whole story', async () => {
+    mockDetail({ ...base, operatorEgress: true })
+    await openDetail()
+
+    // The declared host is still listed…
+    expect(await screen.findByText('gotify.net')).toBeInTheDocument()
+    // …alongside the pill saying an admin adds more.
+    expect(screen.getByText(/hosts you add/i)).toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-EGRESS-006: an ordinary plugin gets NO such pill', async () => {
+    mockDetail({ ...base, operatorEgress: false })
+    await openDetail()
+
+    expect(await screen.findByText('gotify.net')).toBeInTheDocument()
+    // Its egress list IS the whole story — claiming otherwise would be a lie.
+    expect(screen.queryByText(/hosts you add/i)).not.toBeInTheDocument()
+  })
+})
+
+/**
+ * #1523. The row's ⋯ menu used to be an in-flow `absolute` div, and PageSidebar — the
+ * panel's ancestor — is `overflow-hidden`. On the lower rows of a long plugin list the
+ * menu was clipped mid-way, taking Delete with it: the plugin became uninstallable from
+ * the UI. It must escape every overflow ancestor, and flip up when the bottom is tight.
+ */
+describe('AdminPluginsPanel — row ⋯ menu is never clipped (#1523)', () => {
+  const withRepo = plugin({ source_repo: 'trek/gotify', operatorEgress: false })
+  const realRect = HTMLButtonElement.prototype.getBoundingClientRect
+  afterEach(() => { HTMLButtonElement.prototype.getBoundingClientRect = realRect })
+
+  /** Put the ⋯ button wherever we want in an 800px-tall viewport. */
+  function stubTriggerAt(top: number) {
+    window.innerHeight = 800
+    window.innerWidth = 1200
+    HTMLButtonElement.prototype.getBoundingClientRect = function () {
+      return { top, bottom: top + 34, left: 1100, right: 1134, width: 34, height: 34, x: 1100, y: top, toJSON: () => ({}) } as DOMRect
+    }
+  }
+
+  async function openRowMenu() {
+    mockList(withRepo)
+    const { container } = render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByTestId('plugin-row-menu-btn-trek-gotify'))
+    return { container, menu: screen.getByTestId('plugin-row-menu-trek-gotify') }
+  }
+
+  it('FE-COMP-PLUGINS-MENU-001: renders every action, including Delete', async () => {
+    stubTriggerAt(100)
+    await openRowMenu()
+
+    for (const label of [/restart/i, /error log/i, /allowed hosts/i, /source repository/i, /report an issue/i, /delete/i]) {
+      expect(screen.getByText(label)).toBeInTheDocument()
+    }
+  })
+
+  it('FE-COMP-PLUGINS-MENU-002: is portaled out of the panel, so no overflow ancestor can clip it', async () => {
+    stubTriggerAt(100)
+    const { container, menu } = await openRowMenu()
+
+    // THE regression guard: living inside the panel is exactly what got it clipped.
+    expect(container.contains(menu)).toBe(false)
+    expect(menu.parentElement).toBe(document.body)
+    expect(menu.style.position).toBe('fixed')
+  })
+
+  it('FE-COMP-PLUGINS-MENU-003: hangs below the ⋯ when there is room', async () => {
+    stubTriggerAt(100)
+    const { menu } = await openRowMenu()
+
+    expect(menu.style.top).toBe('138px')   // trigger bottom (134) + 4
+    expect(menu.style.bottom).toBe('')
+    expect(menu.style.right).toBe('66px')  // viewport (1200) - trigger right (1134)
+  })
+
+  it('FE-COMP-PLUGINS-MENU-004: flips upward for a row near the bottom — the #1523 case', async () => {
+    stubTriggerAt(700) // 66px of room below: the six-item menu would run off-screen
+    const { menu } = await openRowMenu()
+
+    expect(menu.style.bottom).toBe('104px') // viewport (800) - trigger top (700) + 4
+    expect(menu.style.top).toBe('')
+  })
+})
+
+/**
+ * Signature status (#plugins). TREK has always verified author signatures and TOFU-pinned
+ * the key — and never showed any of it, so a successfully-installed UNSIGNED plugin looked
+ * identical to a signed one, forever.
+ *
+ * The two tests that matter most here are the ones guarding the override: a re-trust is
+ * offered for a ROTATED key (benign explanation) and for NOTHING else. A signature that
+ * doesn't verify means the bytes are not what the author signed, and there is no story
+ * where the right answer is letting the admin wave it through.
+ */
+function registryEntry(over: Record<string, unknown> = {}) {
+  return {
+    id: 'trek-gotify', name: 'Gotify', author: 'Acme', description: 'Push', repo: 'acme/gotify',
+    type: 'integration', latest: '2.0.0', minTrekVersion: null, reviewedAt: null,
+    screenshotUrl: null, signed: true, authorPublicKey: 'NEWKEYbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+    ...over,
+  }
+}
+
+function mockPanel(p: Record<string, unknown>, entry: Record<string, unknown> | null = registryEntry()) {
+  server.use(
+    http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [p] })),
+    http.get('*/api/admin/plugins/registry', () => HttpResponse.json(entry ? [entry] : [])),
+  )
+}
+
+describe('AdminPluginsPanel — signature badges', () => {
+  it('FE-COMP-PLUGINS-SIG-001: a registry plugin with a pinned key reads as Signed', async () => {
+    mockPanel(plugin({ source_repo: 'acme/gotify', signed: true, keyFingerprint: 'AAAAAAAA…BBBBBBBB' }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText('Signed')).toBeInTheDocument()
+    expect(screen.queryByText('Unsigned')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-SIG-002: a registry plugin with no key reads as Unsigned', async () => {
+    mockPanel(plugin({ source_repo: 'acme/gotify', signed: false, keyFingerprint: null }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText('Unsigned')).toBeInTheDocument()
+  })
+
+  // The precedence rule. `signed` derives from the pinned key, sideloaded from source_repo
+  // — so they are NOT mutually exclusive in the data, and a sideloaded plugin genuinely has
+  // no key. Rendering "Unsigned" NEXT TO "Sideloaded" would double up on a plugin whose
+  // badge already says something strictly stronger, diluting the amber into wallpaper.
+  it('FE-COMP-PLUGINS-SIG-003: a sideloaded plugin shows Sideloaded and NO trust badge', async () => {
+    mockPanel(plugin({ source_repo: 'local:upload', signed: false }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText('Sideloaded')).toBeInTheDocument()
+    expect(screen.queryByText('Unsigned')).not.toBeInTheDocument()
+    expect(screen.queryByText('Signed')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-SIG-004: a dev-linked plugin shows Dev-Link and NO trust badge', async () => {
+    mockPanel(plugin({ source_repo: 'local:link', signed: false }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText('Dev-Link')).toBeInTheDocument()
+    expect(screen.queryByText('Unsigned')).not.toBeInTheDocument()
+  })
+})
+
+describe('AdminPluginsPanel — a refused update', () => {
+  const blocked = (code: string) =>
+    plugin({
+      source_repo: 'acme/gotify', signed: true, keyFingerprint: 'OLDKEYaa…aaaaaaaa',
+      updateBlock: { code, detail: 'the signing key changed', version: '2.0.0' },
+    })
+
+  it('FE-COMP-PLUGINS-SIG-005: the row keeps showing WHY, instead of the reason dying with a toast', async () => {
+    mockPanel(blocked('SIGNATURE_KEY_CHANGED'))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText(/update blocked/i)).toBeInTheDocument()
+  })
+
+  // The block describes the version that was REFUSED. Once the registry offers a newer one,
+  // it describes an artifact nobody is being offered anymore — so it reads as stale and the
+  // admin can simply re-attempt.
+  it('FE-COMP-PLUGINS-SIG-006: the block goes quiet once a NEWER version is on offer', async () => {
+    mockPanel(blocked('SIGNATURE_KEY_CHANGED'), registryEntry({ latest: '3.0.0' }))
+    render(<AdminPluginsPanel />)
+    await screen.findByText('Gotify')
+    await waitFor(() => expect(screen.queryByText(/update blocked/i)).not.toBeInTheDocument())
+  })
+
+  it('FE-COMP-PLUGINS-SIG-007: Review opens the re-trust dialog for a ROTATED key', async () => {
+    mockPanel(blocked('SIGNATURE_KEY_CHANGED'))
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /review/i }))
+
+    // Both fingerprints, so the admin can compare them against what the author tells them.
+    expect(await screen.findByText(/key it was installed with/i)).toBeInTheDocument()
+    expect(screen.getByText(/key it is offering now/i)).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /trust the new key/i })).toBeInTheDocument()
+  })
+
+  // D2, at the UI. An invalid signature means the bytes are not what the author signed.
+  // There is no override — not a disabled button, not one behind a confirm. The ABSENCE of
+  // an escape hatch is the feature. (The server refuses it too; this is belt and braces.)
+  it('FE-COMP-PLUGINS-SIG-008: an INVALID signature offers NO re-trust affordance at all', async () => {
+    mockPanel(blocked('SIGNATURE_INVALID'))
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /review/i }))
+
+    await screen.findByText(/do not match the author's signature/i)
+    expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
+    // ...and it does not even show the key comparison, which would imply a choice exists.
+    expect(screen.queryByText(/key it is offering now/i)).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-SIG-009: an unsigned-downgrade refusal offers no override either', async () => {
+    mockPanel(blocked('SIGNATURE_MISSING'))
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /review/i }))
+
+    await screen.findByText(/ships no signature/i)
+    expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-SIG-010: confirming a re-trust re-pins AND updates in ONE call', async () => {
+    let body: unknown = null
+    mockPanel(blocked('SIGNATURE_KEY_CHANGED'))
+    server.use(
+      http.post('*/api/admin/plugins/trek-gotify/retrust', async ({ request }) => {
+        body = await request.json()
+        return HttpResponse.json({ version: '2.0.0', activated: true, newPermissions: [], newEgress: [] })
+      }),
+    )
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /review/i }))
+    fireEvent.click(await screen.findByRole('button', { name: /trust the new key/i }))
+
+    // The FULL key goes back, not the fingerprint: the server's equality check is exact, so
+    // it can refuse if the entry was re-keyed again since this dialog rendered.
+    await waitFor(() =>
+      expect(body).toEqual({ version: '2.0.0', publicKey: 'NEWKEYbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb' }),
+    )
+    // No follow-up /update: a re-pin that waited for a second call would leave the plugin
+    // pinned to a key no install had ever verified against if that call never came.
+  })
+})
+
+describe('AdminPluginsPanel — update consent', () => {
+  it('FE-COMP-PLUGINS-SIG-011: says an unsigned update is untied to its author, and still activates in one click', async () => {
+    let activated = false
+    mockPanel(plugin({ source_repo: 'acme/gotify', signed: false }), registryEntry({ signed: false }))
+    server.use(
+      http.post('*/api/admin/plugins/trek-gotify/update', () =>
+        HttpResponse.json({ version: '2.0.0', activated: false, newPermissions: ['db:read:trips'], newEgress: [] }),
+      ),
+      http.post('*/api/admin/plugins/trek-gotify/activate', () => { activated = true; return HttpResponse.json({ status: 'active' }) }),
+    )
+    render(<AdminPluginsPanel />)
+    await screen.findByText('Gotify')
+    fireEvent.click(await screen.findByRole('button', { name: /update to|2\.0\.0/i }))
+
+    // Informs — it does not block. No checkbox, no second click.
+    expect(await screen.findByText(/nothing ties this version to its author/i)).toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /approve & turn on/i }))
+    await waitFor(() => expect(activated).toBe(true))
+  })
+
+  // The warning used to be read ONLY off the registry entry, so an unreachable registry left
+  // it undefined and the pill silently vanished — at the exact moment the admin was widening
+  // what unsigned code may do. The installed row carries an authoritative `signed` from the
+  // server on every list call; degrade to that rather than to silence.
+  //
+  // Consent is reached here by turning a plugin back ON after an update widened its
+  // permissions (409 CONSENT_REQUIRED) — which is the path that still works with the registry
+  // down, precisely because it needs nothing from the registry.
+  it('FE-COMP-PLUGINS-SIG-015: the unsigned warning survives an unreachable registry', async () => {
+    server.use(
+      http.get('*/api/admin/plugins', () =>
+        HttpResponse.json({
+          enabled: true, devLink: false,
+          plugins: [plugin({ source_repo: 'acme/gotify', signed: false, enabled: 0, status: 'inactive', operatorEgress: false })],
+        })),
+      // The registry is down: `regById` stays empty, so the entry's `signed` is unknowable.
+      http.get('*/api/admin/plugins/registry', () => HttpResponse.json({ error: 'registry unreachable' }, { status: 500 })),
+      http.post('*/api/admin/plugins/trek-gotify/activate', () =>
+        HttpResponse.json({ error: 'consent required', code: 'CONSENT_REQUIRED', newPermissions: ['db:read:trips'], newEgress: [] }, { status: 409 })),
+    )
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /enable plugin/i }))
+
+    // Falls back to the installed row's `signed: false` rather than going quiet.
+    expect(await screen.findByText(/nothing ties this version to its author/i)).toBeInTheDocument()
+  })
+})
+
+/**
+ * A signature refusal must reach the dialog even when the plugin has NO installed row —
+ * which is every fresh install from Discover, and every dependency being downloaded.
+ *
+ * Routing the refusal off the installed list meant those two paths silently fell back to a
+ * generic toast: the admin met SIGNATURE_INVALID for the first time on the one path where the
+ * dialog explaining it never opened. A fresh install has no pinned key, so it can only ever
+ * be _INVALID / _INCOMPLETE — never a rotation — and both are non-overridable, so the dialog
+ * must explain and offer nothing.
+ */
+describe('AdminPluginsPanel — a refusal with no installed row', () => {
+  it('FE-COMP-PLUGINS-SIG-013: a fresh install refused for an INVALID signature opens the dialog, not a toast', async () => {
+    server.use(
+      http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [] })),
+      http.get('*/api/admin/plugins/registry', () => HttpResponse.json([registryEntry()])),
+      http.post('*/api/admin/plugins/install', () =>
+        HttpResponse.json({ error: 'author signature verification failed', code: 'SIGNATURE_INVALID' }, { status: 400 })),
+    )
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /discover/i }))
+    fireEvent.click(await screen.findByRole('button', { name: /^install$/i }))
+
+    // The dialog, named after the plugin — which it can only know from the REGISTRY entry,
+    // there being no installed row to read a name off.
+    expect(await screen.findByText(/gotify's signature could not be verified/i)).toBeInTheDocument()
+    await screen.findByText(/do not match the author's signature/i)
+    // Non-overridable, and no key comparison — showing one would imply a choice exists.
+    expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
+    expect(screen.queryByText(/key it is offering now/i)).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-PLUGINS-SIG-014: a refusal while downloading a DEPENDENCY opens the dialog too', async () => {
+    const parent = plugin({ id: 'trek-parent', name: 'Parent', source_repo: 'acme/parent', enabled: 0, status: 'inactive', operatorEgress: false })
+    server.use(
+      http.get('*/api/admin/plugins', () => HttpResponse.json({ enabled: true, devLink: false, plugins: [parent] })),
+      http.get('*/api/admin/plugins/registry', () => HttpResponse.json([registryEntry()])),
+      // Turning it on reveals the missing dependency…
+      http.post('*/api/admin/plugins/trek-parent/activate', () =>
+        HttpResponse.json({ error: 'missing dependency', code: 'DEPENDENCY_MISSING', missing: [{ id: 'trek-gotify', version: '^1.0.0' }], versionMismatch: [] }, { status: 409 })),
+      // …and downloading it is refused on its signature.
+      http.post('*/api/admin/plugins/install', () =>
+        HttpResponse.json({ error: 'author signature verification failed', code: 'SIGNATURE_INVALID' }, { status: 400 })),
+    )
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByRole('button', { name: /enable plugin/i }))
+    fireEvent.click(await screen.findByRole('button', { name: /download/i }))
+
+    // Named after the DEPENDENCY, not the parent — it is the dependency's author whose
+    // signature did not verify, and saying "Parent" here would point the admin at the wrong
+    // plugin entirely.
+    expect(await screen.findByText(/gotify's signature could not be verified/i)).toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: /trust the new key/i })).not.toBeInTheDocument()
+  })
+})
+
+describe('AdminPluginsPanel — a block never outlives the registry relationship', () => {
+  // The server clears the block on sideload/dev-link. This is the belt: even if a stale
+  // block somehow reached the client, a plugin whose code the admin supplied by hand must
+  // never claim an update was blocked over an author signing key.
+  it('FE-COMP-PLUGINS-SIG-012: a sideloaded plugin never shows an update block', async () => {
+    mockPanel(plugin({
+      source_repo: 'local:upload', signed: false,
+      updateBlock: { code: 'SIGNATURE_KEY_CHANGED', detail: 'the signing key changed', version: '2.0.0' },
+    }))
+    render(<AdminPluginsPanel />)
+    await screen.findByText('Sideloaded')
+    expect(screen.queryByText(/update blocked/i)).not.toBeInTheDocument()
+  })
+})
+
+/**
+ * TREK-version compatibility. The SERVER owns the semver — a second implementation in the
+ * browser would eventually disagree with the install gate and offer a button that 400s —
+ * so the panel only renders the verdict the API hands it (`compatible`, `latestCompatible`).
+ */
+describe('AdminPluginsPanel — TREK-version compatibility', () => {
+  /** Discover cards for a plugin that is NOT installed — an installed one just reads "Installed". */
+  async function openDiscover(entry: Record<string, unknown>) {
+    mockPanel(plugin({ id: 'something-else' }), registryEntry(entry))
+    render(<AdminPluginsPanel />)
+    fireEvent.click(await screen.findByText('Discover'))
+  }
+
+  it('blocks Install when no published version runs on this TREK, and says why', async () => {
+    await openDiscover({ trek: '>=4.0.0', hostVersion: '3.3.0', compatible: false, latestCompatible: null })
+    const btn = await screen.findByRole('button', { name: /^incompatible$/i })
+    expect(btn).toBeDisabled()
+  })
+
+  it('offers the newest version that DOES run here rather than a dead button', async () => {
+    await openDiscover({ latest: '2.0.0', trek: '>=3.4.0', hostVersion: '3.3.0', compatible: false, latestCompatible: '1.5.0' })
+    const btn = await screen.findByRole('button', { name: /^install 1\.5\.0$/i })
+    expect(btn).toBeEnabled()
+  })
+
+  it('installs normally when the latest version fits', async () => {
+    await openDiscover({ trek: '>=3.2.0 <4.0.0', hostVersion: '3.3.0', compatible: true, latestCompatible: '2.0.0' })
+    expect(await screen.findByRole('button', { name: /^install$/i })).toBeEnabled()
+  })
+
+  it('an installed plugin the server has outgrown shows the blocker on its card', async () => {
+    // Same amber chip machinery as a disabled addon / missing dependency — the admin sees
+    // one "here is why this cannot turn on" surface, not a new concept per blocker.
+    mockPanel(plugin({
+      dependencyStatus: 'hostIncompatible', trekRange: '>=3.2.0 <4.0.0', hostVersion: '4.0.0', enabled: 0, status: 'inactive',
+    }))
+    render(<AdminPluginsPanel />)
+    expect(await screen.findByText(/needs trek >=3\.2\.0 <4\.0\.0/i)).toBeInTheDocument()
+  })
+})

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -6,7 +6,7 @@ import { useToast } from '../shared/Toast'
 import Section from '../Settings/Section'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
+import { SYMBOLS, currenciesWith } from '../Budget/BudgetPanel.constants'
 import type { DistanceUnit, Place } from '../../types'
 import {
   MAPBOX_DEFAULT_STYLE,
@@ -286,7 +286,7 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           onChange={(value: string) => { if (value) save({ default_currency: value }) }}
           placeholder={t('settings.currency')}
           searchable
-          options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+          options={currenciesWith(defaults.default_currency).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
           size="sm"
           style={{ maxWidth: 240 }}
         />

client/src/components/Admin/GitHubPanel.tsx

@@ -1,146 +1,187 @@
-import { useState, useEffect } from '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'
+import {
+  BookOpen,
+  Bug,
+  Calendar,
+  ChevronDown,
+  ChevronUp,
+  Coffee,
+  ExternalLink,
+  Heart,
+  Lightbulb,
+  Loader2,
+  Tag,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import apiClient from '../../api/client';
+import { getLocaleForLanguage, useTranslation } from '../../i18n';
 
-const REPO = 'mauriceboe/TREK'
-const PER_PAGE = 10
+const REPO = 'liketrek/TREK';
+const PER_PAGE = 10;
 
 interface GithubRelease {
-  id: number
-  prerelease: boolean
-  tag_name: string
-  name: string | null
-  body: string | null
-  published_at: string | null
-  created_at: string
-  author: { login: string } | null
-  [key: string]: unknown
+  id: number;
+  prerelease: boolean;
+  tag_name: string;
+  name: string | null;
+  body: string | null;
+  published_at: string | null;
+  created_at: string;
+  author: { login: string } | null;
+  [key: string]: unknown;
 }
 
 export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: boolean }) {
-  const { t, language } = useTranslation()
-  const [releases, setReleases] = useState<GithubRelease[]>([])
-  const [loading, setLoading] = useState(true)
-  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)
+  const { t, language } = useTranslation();
+  const [releases, setReleases] = useState<GithubRelease[]>([]);
+  const [loading, setLoading] = useState(true);
+  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);
 
   const fetchReleases = async (pageNum = 1, append = false) => {
     try {
-      const res = await apiClient.get(`/admin/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } })
-      const data = Array.isArray(res.data) ? res.data : []
-      setReleases(prev => append ? [...prev, ...data] : data)
-      setHasMore(data.length === PER_PAGE)
+      const res = await apiClient.get(`/admin/github-releases`, { params: { per_page: PER_PAGE, page: pageNum } });
+      const data = Array.isArray(res.data) ? res.data : [];
+      setReleases((prev) => (append ? [...prev, ...data] : data));
+      setHasMore(data.length === PER_PAGE);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : 'Unknown error')
+      setError(err instanceof Error ? err.message : 'Unknown error');
     }
-  }
+  };
 
   useEffect(() => {
-    setLoading(true)
-    fetchReleases(1).finally(() => setLoading(false))
-  }, [])
+    setLoading(true);
+    fetchReleases(1).finally(() => setLoading(false));
+  }, []);
 
   const handleLoadMore = async () => {
-    const next = page + 1
-    setLoadingMore(true)
-    await fetchReleases(next, true)
-    setPage(next)
-    setLoadingMore(false)
-  }
+    const next = page + 1;
+    setLoadingMore(true);
+    await fetchReleases(next, true);
+    setPage(next);
+    setLoadingMore(false);
+  };
 
   const toggleExpand = (id) => {
-    setExpanded(prev => ({ ...prev, [id]: !prev[id] }))
-  }
+    setExpanded((prev) => ({ ...prev, [id]: !prev[id] }));
+  };
 
   const formatDate = (dateStr) => {
-    const d = new Date(dateStr)
-    return d.toLocaleDateString(getLocaleForLanguage(language), { day: 'numeric', month: 'short', year: 'numeric' })
-  }
+    const d = new Date(dateStr);
+    return d.toLocaleDateString(getLocaleForLanguage(language), { day: 'numeric', month: 'short', year: 'numeric' });
+  };
 
   // Simple markdown-to-html for release notes (handles headers, bold, lists, links)
   const renderBody = (body) => {
-    if (!body) return null
-    const lines = body.split('\n')
-    const elements = []
-    let listItems = []
+    if (!body) return null;
+    const lines = body.split('\n');
+    const elements = [];
+    let listItems = [];
 
     const flushList = () => {
       if (listItems.length > 0) {
         elements.push(
-          <ul key={`ul-${elements.length}`} className="space-y-1 my-2">
+          <ul key={`ul-${elements.length}`} className="my-2 space-y-1">
             {listItems.map((item, i) => (
               <li key={i} className="flex gap-2 text-xs text-content-muted">
-                <span className="mt-1.5 w-1 h-1 rounded-full flex-shrink-0" style={{ background: 'var(--text-faint)' }} />
+                <span
+                  className="mt-1.5 h-1 w-1 flex-shrink-0 rounded-full"
+                  style={{ background: 'var(--text-faint)' }}
+                />
                 <span dangerouslySetInnerHTML={{ __html: inlineFormat(item) }} />
               </li>
             ))}
           </ul>
-        )
-        listItems = []
+        );
+        listItems = [];
       }
-    }
+    };
 
-    const escapeHtml = (str) => str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;')
+    const escapeHtml = (str) =>
+      str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
     const inlineFormat = (text) => {
       return escapeHtml(text)
         .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-        .replace(/`(.+?)`/g, '<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>')
+        .replace(
+          /`(.+?)`/g,
+          '<code style="font-size:11px;padding:1px 4px;border-radius:4px;background:var(--bg-secondary)">$1</code>'
+        )
         .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_, label, url) => {
-          const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#'
-          return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">${label}</a>`
-        })
-    }
+          const safeUrl = url.startsWith('http://') || url.startsWith('https://') ? url : '#';
+          return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer" style="color:#3b82f6;text-decoration:underline">${label}</a>`;
+        });
+    };
 
     for (const line of lines) {
-      const trimmed = line.trim()
-      if (!trimmed) { flushList(); continue }
+      const trimmed = line.trim();
+      if (!trimmed) {
+        flushList();
+        continue;
+      }
 
       if (trimmed.startsWith('### ')) {
-        flushList()
+        flushList();
         elements.push(
-          <h4 key={elements.length} className="text-xs font-semibold mt-3 mb-1 text-content">
+          <h4 key={elements.length} className="mb-1 mt-3 text-xs font-semibold text-content">
             {trimmed.slice(4)}
           </h4>
-        )
+        );
       } else if (trimmed.startsWith('## ')) {
-        flushList()
+        flushList();
         elements.push(
-          <h3 key={elements.length} className="text-sm font-semibold mt-3 mb-1 text-content">
+          <h3 key={elements.length} className="mb-1 mt-3 text-sm font-semibold text-content">
             {trimmed.slice(3)}
           </h3>
-        )
+        );
       } else if (/^[-*] /.test(trimmed)) {
-        listItems.push(trimmed.slice(2))
+        listItems.push(trimmed.slice(2));
       } else {
-        flushList()
+        flushList();
         elements.push(
-          <p key={elements.length} className="text-xs my-1 text-content-muted"
+          <p
+            key={elements.length}
+            className="my-1 text-xs text-content-muted"
             dangerouslySetInnerHTML={{ __html: inlineFormat(trimmed) }}
           />
-        )
+        );
       }
     }
-    flushList()
-    return elements
-  }
+    flushList();
+    return elements;
+  };
 
   return (
     <div className="space-y-3">
       {/* Support cards */}
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <a
           href="https://ko-fi.com/mauriceboe"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ff5e5b'; e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+          className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = '#ff5e5b';
+            e.currentTarget.style.boxShadow = '0 0 0 1px #ff5e5b22';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = 'var(--border-primary)';
+            e.currentTarget.style.boxShadow = 'none';
+          }}
         >
-          <div className="bg-[#ff5e5b15]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+          <div
+            className="bg-[#ff5e5b15]"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
             <Coffee size={20} className="text-[#ff5e5b]" />
           </div>
           <div>
@@ -153,11 +194,28 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           href="https://buymeacoffee.com/mauriceboe"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#ffdd00'; e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+          className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = '#ffdd00';
+            e.currentTarget.style.boxShadow = '0 0 0 1px #ffdd0022';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = 'var(--border-primary)';
+            e.currentTarget.style.boxShadow = 'none';
+          }}
         >
-          <div className="bg-[#ffdd0015]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+          <div
+            className="bg-[#ffdd0015]"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
             <Heart size={20} className="text-[#ffdd00]" />
           </div>
           <div>
@@ -170,12 +228,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           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-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
-          onMouseEnter={e => { e.currentTarget.style.borderColor = '#5865F2'; e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222' }}
-          onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--border-primary)'; e.currentTarget.style.boxShadow = 'none' }}
+          className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          onMouseEnter={(e) => {
+            e.currentTarget.style.borderColor = '#5865F2';
+            e.currentTarget.style.boxShadow = '0 0 0 1px #5865F222';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.borderColor = 'var(--border-primary)';
+            e.currentTarget.style.boxShadow = 'none';
+          }}
         >
-          <div className="bg-[#5865F215]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
-            <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
+          <div
+            className="bg-[#5865F215]"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="#5865F2">
+              <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.095 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
+            </svg>
           </div>
           <div>
             <div className="text-sm font-semibold text-content">Discord</div>
@@ -185,16 +262,33 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
         </a>
       </div>
 
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
         <a
-          href="https://github.com/mauriceboe/TREK/issues/new?template=bug_report.yml"
+          href="https://github.com/liketrek/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-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
-          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' }}
+          className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          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 className="bg-[#ef444415]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+          <div
+            className="bg-[#ef444415]"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
             <Bug size={20} className="text-[#ef4444]" />
           </div>
           <div>
@@ -204,14 +298,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           <ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
         </a>
         <a
-          href="https://github.com/mauriceboe/TREK/discussions/new?category=feature-requests"
+          href="https://github.com/liketrek/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-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
-          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' }}
+          className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          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 className="bg-[#f59e0b15]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+          <div
+            className="bg-[#f59e0b15]"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
             <Lightbulb size={20} className="text-[#f59e0b]" />
           </div>
           <div>
@@ -221,14 +332,31 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
           <ExternalLink size={14} className="ml-auto flex-shrink-0 text-content-faint" />
         </a>
         <a
-          href="https://github.com/mauriceboe/TREK/wiki"
+          href="https://github.com/liketrek/TREK/wiki"
           target="_blank"
           rel="noopener noreferrer"
-          className="rounded-xl border overflow-hidden flex items-center gap-4 px-5 py-4 transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)] bg-surface-card border-edge no-underline"
-          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' }}
+          className="flex items-center gap-4 overflow-hidden rounded-xl border border-edge bg-surface-card px-5 py-4 no-underline transition-[border-color,box-shadow] duration-200 ease-[cubic-bezier(0.23,1,0.32,1)]"
+          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 className="bg-[#6366f115]" style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
+          <div
+            className="bg-[#6366f115]"
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 10,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              flexShrink: 0,
+            }}
+          >
             <BookOpen size={20} className="text-[#6366f1]" />
           </div>
           <div>
@@ -241,137 +369,134 @@ export default function GitHubPanel({ isPrerelease = false }: { isPrerelease?: b
 
       {/* Loading / Error / Releases */}
       {loading ? (
-        <div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
-          <div className="p-8 flex items-center justify-center">
-            <Loader2 className="w-6 h-6 animate-spin text-content-muted" />
+        <div className="overflow-hidden rounded-xl border border-edge bg-surface-card">
+          <div className="flex items-center justify-center p-8">
+            <Loader2 className="h-6 w-6 animate-spin text-content-muted" />
           </div>
         </div>
       ) : error ? (
-        <div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
+        <div className="overflow-hidden rounded-xl border border-edge bg-surface-card">
           <div className="p-6 text-center">
             <p className="text-sm text-content-muted">{t('admin.github.error')}</p>
-            <p className="text-xs mt-1 text-content-faint">{error}</p>
+            <p className="mt-1 text-xs text-content-faint">{error}</p>
           </div>
         </div>
       ) : (
-      <div className="rounded-xl border overflow-hidden bg-surface-card border-edge">
-        <div className="px-5 py-4 border-b flex items-center justify-between border-edge-secondary">
-          <div>
-            <h2 className="font-semibold text-content">{t('admin.github.title')}</h2>
-            <p className="text-xs mt-0.5 text-content-faint">{t('admin.github.subtitle').replace('{repo}', REPO)}</p>
+        <div className="overflow-hidden rounded-xl border border-edge bg-surface-card">
+          <div className="flex items-center justify-between border-b border-edge-secondary px-5 py-4">
+            <div>
+              <h2 className="font-semibold text-content">{t('admin.github.title')}</h2>
+              <p className="mt-0.5 text-xs text-content-faint">{t('admin.github.subtitle').replace('{repo}', REPO)}</p>
+            </div>
+            <a
+              href={`https://github.com/${REPO}/releases`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5 rounded-lg bg-surface-secondary px-3 py-1.5 text-xs font-medium text-content-muted transition-colors"
+            >
+              <ExternalLink size={12} />
+              GitHub
+            </a>
           </div>
-          <a
-            href={`https://github.com/${REPO}/releases`}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-colors bg-surface-secondary text-content-muted"
-          >
-            <ExternalLink size={12} />
-            GitHub
-          </a>
-        </div>
 
-        {/* Timeline */}
-        <div className="px-5 py-4">
-          <div className="relative">
-            {/* Timeline line */}
-            <div className="absolute left-[11px] top-3 bottom-3 w-px" style={{ background: 'var(--border-primary)' }} />
+          {/* Timeline */}
+          <div className="px-5 py-4">
+            <div className="relative">
+              {/* Timeline line */}
+              <div
+                className="absolute bottom-3 left-[11px] top-3 w-px"
+                style={{ background: 'var(--border-primary)' }}
+              />
 
-            <div className="space-y-0">
-              {(isPrerelease ? releases : releases.filter(r => !r.prerelease)).map((release, idx) => {
-                const isLatest = idx === 0
-                const isExpanded = expanded[release.id]
+              <div className="space-y-0">
+                {(isPrerelease ? releases : releases.filter((r) => !r.prerelease)).map((release, idx) => {
+                  const isLatest = idx === 0;
+                  const isExpanded = expanded[release.id];
 
-                return (
-                  <div key={release.id} className="relative pl-8 pb-5">
-                    {/* Timeline dot */}
-                    <div
-                      className="absolute left-0 top-1 w-[23px] h-[23px] rounded-full flex items-center justify-center border-2"
-                      style={{
-                        background: isLatest ? 'var(--text-primary)' : 'var(--bg-card)',
-                        borderColor: isLatest ? 'var(--text-primary)' : 'var(--border-primary)',
-                      }}
-                    >
-                      <Tag size={10} style={{ color: isLatest ? 'var(--bg-card)' : 'var(--text-faint)' }} />
-                    </div>
-
-                    {/* Release content */}
-                    <div>
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className="text-sm font-semibold text-content">
-                          {release.tag_name}
-                        </span>
-                        {isLatest && (
-                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-[rgba(34,197,94,0.12)] text-[#16a34a]">
-                            {t('admin.github.latest')}
-                          </span>
-                        )}
-                        {release.prerelease && (
-                          <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-[rgba(245,158,11,0.12)] text-[#d97706]">
-                            {t('admin.github.prerelease')}
-                          </span>
-                        )}
+                  return (
+                    <div key={release.id} className="relative pb-5 pl-8">
+                      {/* Timeline dot */}
+                      <div
+                        className="absolute left-0 top-1 flex h-[23px] w-[23px] items-center justify-center rounded-full border-2"
+                        style={{
+                          background: isLatest ? 'var(--text-primary)' : 'var(--bg-card)',
+                          borderColor: isLatest ? 'var(--text-primary)' : 'var(--border-primary)',
+                        }}
+                      >
+                        <Tag size={10} style={{ color: isLatest ? 'var(--bg-card)' : 'var(--text-faint)' }} />
                       </div>
 
-                      {release.name && release.name !== release.tag_name && (
-                        <p className="text-xs font-medium mt-0.5 text-content-muted">
-                          {release.name}
-                        </p>
-                      )}
-
-                      <div className="flex items-center gap-3 mt-1">
-                        <span className="flex items-center gap-1 text-[11px] text-content-faint">
-                          <Calendar size={10} />
-                          {formatDate(release.published_at || release.created_at)}
-                        </span>
-                        {release.author && (
-                          <span className="text-[11px] text-content-faint">
-                            {t('admin.github.by')} {release.author.login}
-                          </span>
-                        )}
-                      </div>
-
-                      {/* Expandable body */}
-                      {release.body && (
-                        <div className="mt-2">
-                          <button
-                            onClick={() => toggleExpand(release.id)}
-                            className="flex items-center gap-1 text-[11px] font-medium transition-colors text-content-muted"
-                          >
-                            {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
-                            {isExpanded ? t('admin.github.hideDetails') : t('admin.github.showDetails')}
-                          </button>
-
-                          {isExpanded && (
-                            <div className="mt-2 p-3 rounded-lg bg-surface-secondary">
-                              {renderBody(release.body)}
-                            </div>
+                      {/* Release content */}
+                      <div>
+                        <div className="flex flex-wrap items-center gap-2">
+                          <span className="text-sm font-semibold text-content">{release.tag_name}</span>
+                          {isLatest && (
+                            <span className="rounded-full bg-[rgba(34,197,94,0.12)] px-2 py-0.5 text-[10px] font-semibold text-[#16a34a]">
+                              {t('admin.github.latest')}
+                            </span>
+                          )}
+                          {release.prerelease && (
+                            <span className="rounded-full bg-[rgba(245,158,11,0.12)] px-2 py-0.5 text-[10px] font-semibold text-[#d97706]">
+                              {t('admin.github.prerelease')}
+                            </span>
                           )}
                         </div>
-                      )}
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
-          </div>
 
-          {/* Load more */}
-          {hasMore && (
-            <div className="text-center pt-2">
-              <button
-                onClick={handleLoadMore}
-                disabled={loadingMore}
-                className="inline-flex items-center gap-2 px-4 py-2 rounded-lg text-xs font-medium transition-colors bg-surface-secondary text-content-muted"
-              >
-                {loadingMore ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
-                {loadingMore ? t('admin.github.loading') : t('admin.github.loadMore')}
-              </button>
+                        {release.name && release.name !== release.tag_name && (
+                          <p className="mt-0.5 text-xs font-medium text-content-muted">{release.name}</p>
+                        )}
+
+                        <div className="mt-1 flex items-center gap-3">
+                          <span className="flex items-center gap-1 text-[11px] text-content-faint">
+                            <Calendar size={10} />
+                            {formatDate(release.published_at || release.created_at)}
+                          </span>
+                          {release.author && (
+                            <span className="text-[11px] text-content-faint">
+                              {t('admin.github.by')} {release.author.login}
+                            </span>
+                          )}
+                        </div>
+
+                        {/* Expandable body */}
+                        {release.body && (
+                          <div className="mt-2">
+                            <button
+                              onClick={() => toggleExpand(release.id)}
+                              className="flex items-center gap-1 text-[11px] font-medium text-content-muted transition-colors"
+                            >
+                              {isExpanded ? <ChevronUp size={12} /> : <ChevronDown size={12} />}
+                              {isExpanded ? t('admin.github.hideDetails') : t('admin.github.showDetails')}
+                            </button>
+
+                            {isExpanded && (
+                              <div className="mt-2 rounded-lg bg-surface-secondary p-3">{renderBody(release.body)}</div>
+                            )}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
             </div>
-          )}
+
+            {/* Load more */}
+            {hasMore && (
+              <div className="pt-2 text-center">
+                <button
+                  onClick={handleLoadMore}
+                  disabled={loadingMore}
+                  className="inline-flex items-center gap-2 rounded-lg bg-surface-secondary px-4 py-2 text-xs font-medium text-content-muted transition-colors"
+                >
+                  {loadingMore ? <Loader2 size={12} className="animate-spin" /> : <ChevronDown size={12} />}
+                  {loadingMore ? t('admin.github.loading') : t('admin.github.loadMore')}
+                </button>
+              </div>
+            )}
+          </div>
         </div>
-      </div>
       )}
     </div>
-  )
+  );
 }

client/src/components/BackgroundTasks/BackgroundTasksWidget.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { screen } from '@testing-library/react'
+import { render } from '../../../tests/helpers/render'
+import { useBackgroundTasksStore, type BackgroundImportTask } from '../../store/backgroundTasksStore'
+import BackgroundTasksWidget from './BackgroundTasksWidget'
+
+vi.mock('../../api/websocket', () => ({ addListener: vi.fn(), removeListener: vi.fn() }))
+vi.mock('../../api/client', () => ({
+  // Keep the rehydrate/poll backstops pending so the seeded state is what renders.
+  reservationsApi: { importJobStatus: vi.fn(() => new Promise(() => {})) },
+}))
+
+const task = (overrides: Partial<BackgroundImportTask> = {}): BackgroundImportTask => ({
+  id: 'j1',
+  tripId: 't1',
+  label: 'voucher.pdf',
+  status: 'done',
+  done: 0,
+  total: 1,
+  items: [],
+  warnings: [],
+  ...overrides,
+})
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  useBackgroundTasksStore.setState({ tasks: [] })
+})
+
+describe('BackgroundTasksWidget', () => {
+  it('shows the warnings when a finished job produced no items', () => {
+    const warning = 'voucher.pdf: AI parsing failed — LLM request failed (400): response_format unsupported'
+    useBackgroundTasksStore.setState({ tasks: [task({ warnings: [warning] })] })
+    render(<BackgroundTasksWidget />)
+    expect(screen.getByText('No reservations could be extracted from the uploaded files.')).toBeInTheDocument()
+    expect(screen.getByText(warning)).toBeInTheDocument()
+  })
+
+  it('shows only the empty-preview note when there are no warnings', () => {
+    useBackgroundTasksStore.setState({ tasks: [task()] })
+    render(<BackgroundTasksWidget />)
+    expect(screen.getByText('No reservations could be extracted from the uploaded files.')).toBeInTheDocument()
+    expect(screen.queryByText(/AI parsing failed/)).not.toBeInTheDocument()
+  })
+})

client/src/components/BackgroundTasks/BackgroundTasksWidget.tsx

@@ -136,7 +136,14 @@ export default function BackgroundTasksWidget() {
                   {t('common.import')}
                 </button>
               ) : (
-                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>{t('reservations.import.previewEmpty')}</div>
+                <div style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', marginTop: 1 }}>
+                  {t('reservations.import.previewEmpty')}
+                  {(task.warnings?.length ?? 0) > 0 && (
+                    <div style={{ color: '#b45309', marginTop: 3, whiteSpace: 'pre-wrap', wordBreak: 'break-word', maxHeight: 96, overflowY: 'auto' }}>
+                      {task.warnings!.join('\n')}
+                    </div>
+                  )}
+                </div>
               )
             )}
 

client/src/components/Budget/BudgetPanel.constants.ts

@@ -1,23 +1,72 @@
+// The full set of currencies the Frankfurter v2 FX API supports (archived codes
+// excluded), so every selectable currency actually converts. Regenerate from
+// `GET https://api.frankfurter.dev/v2/currencies?expand=providers` (iso_code +
+// symbol) if the provider's list changes. See issue #1470.
 export const CURRENCIES = [
-  'EUR', 'USD', 'GBP', 'JPY', 'CHF', 'CZK', 'PLN', 'SEK', 'NOK', 'DKK',
-  'TRY', 'THB', 'AUD', 'CAD', 'NZD', 'BRL', 'MXN', 'INR', 'IDR', 'MYR',
-  'PHP', 'SGD', 'KRW', 'CNY', 'HKD', 'TWD', 'ZAR', 'AED', 'SAR', 'ILS',
-  'EGP', 'MAD', 'HUF', 'RON', 'BGN', 'HRK', 'ISK', 'RUB', 'UAH', 'KGS',
-  'BDT', 'LKR', 'VND', 'CLP', 'COP', 'PEN', 'ARS',
+  'AED', 'AFN', 'ALL', 'AMD', 'ANG', 'AOA', 'ARS', 'AUD', 'AWG', 'AZN',
+  'BAM', 'BBD', 'BDT', 'BHD', 'BIF', 'BMD', 'BND', 'BOB', 'BRL', 'BSD',
+  'BTN', 'BWP', 'BYN', 'BZD', 'CAD', 'CDF', 'CHF', 'CLP', 'CNH', 'CNY',
+  'COP', 'CRC', 'CUP', 'CVE', 'CZK', 'DJF', 'DKK', 'DOP', 'DZD', 'EGP',
+  'ERN', 'ETB', 'EUR', 'FJD', 'FKP', 'GBP', 'GEL', 'GGP', 'GHS', 'GIP',
+  'GMD', 'GNF', 'GTQ', 'GYD', 'HKD', 'HNL', 'HTG', 'HUF', 'IDR', 'ILS',
+  'IMP', 'INR', 'IQD', 'IRR', 'ISK', 'JEP', 'JMD', 'JOD', 'JPY', 'KES',
+  'KGS', 'KHR', 'KMF', 'KPW', 'KRW', 'KWD', 'KYD', 'KZT', 'LAK', 'LBP',
+  'LKR', 'LRD', 'LSL', 'LYD', 'MAD', 'MDL', 'MGA', 'MKD', 'MMK', 'MNT',
+  'MOP', 'MRO', 'MRU', 'MUR', 'MVR', 'MWK', 'MXN', 'MYR', 'MZN', 'NAD',
+  'NGN', 'NIO', 'NOK', 'NPR', 'NZD', 'OMR', 'PAB', 'PEN', 'PGK', 'PHP',
+  'PKR', 'PLN', 'PYG', 'QAR', 'RON', 'RSD', 'RUB', 'RWF', 'SAR', 'SBD',
+  'SCR', 'SDG', 'SEK', 'SGD', 'SHP', 'SLE', 'SOS', 'SRD', 'SSP', 'STN',
+  'SVC', 'SYP', 'SZL', 'THB', 'TJS', 'TMT', 'TND', 'TOP', 'TRY', 'TTD',
+  'TWD', 'TZS', 'UAH', 'UGX', 'USD', 'UYU', 'UZS', 'VES', 'VND', 'VUV',
+  'WST', 'XAF', 'XAG', 'XAU', 'XCD', 'XCG', 'XDR', 'XOF', 'XPD', 'XPF',
+  'XPT', 'YER', 'ZAR', 'ZMW', 'ZWG',
 ]
 
 export const SYMBOLS: Record<string, string> = {
-  EUR: '€', USD: '$', GBP: '£', JPY: '¥', CHF: 'CHF', CZK: 'Kč', PLN: 'zł',
-  SEK: 'kr', NOK: 'kr', DKK: 'kr', TRY: '₺', THB: '฿', AUD: 'A$', CAD: 'C$',
-  NZD: 'NZ$', BRL: 'R$', MXN: 'MX$', INR: '₹', IDR: 'Rp', MYR: 'RM',
-  PHP: '₱', SGD: 'S$', KRW: '₩', CNY: '¥', HKD: 'HK$', TWD: 'NT$',
-  ZAR: 'R', AED: 'د.إ', SAR: '﷼', ILS: '₪', EGP: 'E£', MAD: 'MAD',
-  HUF: 'Ft', RON: 'lei', BGN: 'лв', HRK: 'kn', ISK: 'kr', RUB: '₽',
-  UAH: '₴', KGS: 'сом', BDT: '৳', LKR: 'Rs', VND: '₫', CLP: 'CL$',
-  COP: 'CO$', PEN: 'S/.', ARS: 'AR$',
+  AED: 'د.إ', AFN: '؋', ALL: 'L', AMD: '֏', ANG: 'ƒ',
+  AOA: 'Kz', ARS: '$', AUD: '$', AWG: 'ƒ', AZN: '₼',
+  BAM: 'КМ', BBD: '$', BDT: '৳', BHD: 'د.ب', BIF: 'Fr',
+  BMD: '$', BND: '$', BOB: 'Bs.', BRL: 'R$', BSD: '$',
+  BTN: 'Nu.', BWP: 'P', BYN: 'Br', BZD: '$', CAD: '$',
+  CDF: 'Fr', CHF: 'CHF', CLP: '$', CNH: '¥', CNY: '¥',
+  COP: '$', CRC: '₡', CUP: '$', CVE: '$', CZK: 'Kč',
+  DJF: 'Fdj', DKK: 'kr.', DOP: '$', DZD: 'د.ج', EGP: 'ج.م',
+  ERN: 'Nfk', ETB: 'Br', EUR: '€', FJD: '$', FKP: '£',
+  GBP: '£', GEL: '₾', GGP: '£', GHS: '₵', GIP: '£',
+  GMD: 'D', GNF: 'Fr', GTQ: 'Q', GYD: '$', HKD: '$',
+  HNL: 'L', HTG: 'G', HUF: 'Ft', IDR: 'Rp', ILS: '₪',
+  IMP: '£', INR: '₹', IQD: 'ع.د', IRR: '﷼', ISK: 'kr.',
+  JEP: '£', JMD: '$', JOD: 'د.ا', JPY: '¥', KES: 'KSh',
+  KGS: 'som', KHR: '៛', KMF: 'Fr', KPW: '₩', KRW: '₩',
+  KWD: 'د.ك', KYD: '$', KZT: '₸', LAK: '₭', LBP: 'ل.ل',
+  LKR: '₨', LRD: '$', LSL: 'L', LYD: 'ل.د', MAD: 'د.م.',
+  MDL: 'L', MGA: 'Ar', MKD: 'ден', MMK: 'K', MNT: '₮',
+  MOP: 'P', MRO: 'UM', MRU: 'UM', MUR: '₨', MVR: 'MVR',
+  MWK: 'MK', MXN: '$', MYR: 'RM', MZN: 'MTn', NAD: '$',
+  NGN: '₦', NIO: 'C$', NOK: 'kr', NPR: 'Rs.', NZD: '$',
+  OMR: 'ر.ع.', PAB: 'B/.', PEN: 'S/', PGK: 'K', PHP: '₱',
+  PKR: '₨', PLN: 'zł', PYG: '₲', QAR: 'ر.ق', RON: 'Lei',
+  RSD: 'RSD', RUB: '₽', RWF: 'FRw', SAR: 'ر.س', SBD: '$',
+  SCR: '₨', SDG: '£', SEK: 'kr', SGD: '$', SHP: '£',
+  SLE: 'Le', SOS: 'Sh', SRD: '$', SSP: '£', STN: 'Db',
+  SVC: '₡', SYP: '£S', SZL: 'E', THB: '฿', TJS: 'ЅМ',
+  TMT: 'm', TND: 'د.ت', TOP: 'T$', TRY: '₺', TTD: '$',
+  TWD: '$', TZS: 'Sh', UAH: '₴', UGX: 'USh', USD: '$',
+  UYU: '$U', UZS: 'so\'m', VES: 'Bs', VND: '₫', VUV: 'Vt',
+  WST: 'T', XAF: 'CFA', XAG: 'oz t', XAU: 'oz t', XCD: '$',
+  XCG: 'Cg', XDR: 'SDR', XOF: 'Fr', XPD: 'oz t', XPF: 'Fr',
+  XPT: 'oz t', YER: '﷼', ZAR: 'R', ZMW: 'K', ZWG: 'ZiG',
 }
 
-export const PIE_COLORS = ['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
+// Keep a currency the user already saved selectable even after it leaves the
+// supported set (e.g. archived BGN/HRK), so opening an existing item or settings
+// row doesn't silently blank the field and wipe the value on the next save.
+export function currenciesWith(current?: string | null): readonly string[] {
+  const cur = (current || '').toUpperCase()
+  return cur && !CURRENCIES.includes(cur) ? [...CURRENCIES, cur] : CURRENCIES
+}
+
+export const PIE_COLORS =['#6366f1', '#ec4899', '#f59e0b', '#10b981', '#3b82f6', '#8b5cf6', '#ef4444', '#14b8a6', '#f97316', '#06b6d4', '#84cc16', '#a855f7']
 
 export const SPLIT_COLORS = [
   { solid: '#6366f1', gradient: 'linear-gradient(135deg, #6366f1, #8b5cf6)' },

client/src/components/Budget/BudgetPanel.helpers.test.ts

@@ -0,0 +1,28 @@
+import { describe, it, expect } from 'vitest'
+import { calcPP, hasCustomMemberSplit } from './BudgetPanel.helpers'
+
+describe('BudgetPanel.helpers', () => {
+  describe('hasCustomMemberSplit (#1458)', () => {
+    it('is false when no members', () => {
+      expect(hasCustomMemberSplit({})).toBe(false)
+      expect(hasCustomMemberSplit({ members: [] })).toBe(false)
+    })
+
+    it('is false for an equal split (members carry no amount)', () => {
+      expect(hasCustomMemberSplit({ members: [{ amount: null }, { amount: null }] })).toBe(false)
+      expect(hasCustomMemberSplit({ members: [{}, {}] })).toBe(false)
+    })
+
+    it('is true as soon as any member has a custom amount', () => {
+      expect(hasCustomMemberSplit({ members: [{ amount: 90 }, { amount: 10 }] })).toBe(true)
+      expect(hasCustomMemberSplit({ members: [{ amount: null }, { amount: 10 }] })).toBe(true)
+      expect(hasCustomMemberSplit({ members: [{ amount: 0 }] })).toBe(true)
+    })
+  })
+
+  it('calcPP still averages the total for equal splits', () => {
+    expect(calcPP(100, 2)).toBe(50)
+    expect(calcPP(100, 0)).toBeNull()
+    expect(calcPP(100, null)).toBeNull()
+  })
+})

client/src/components/Budget/BudgetPanel.helpers.ts

@@ -64,6 +64,12 @@ export const calcPP = (p: NumOrNull, n: NumOrNull) => (n! > 0 ? (p as number) /
 export const calcPD = (p: NumOrNull, d: NumOrNull) => (d! > 0 ? (p as number) / (d as number) : null)
 export const calcPPD = (p: NumOrNull, n: NumOrNull, d: NumOrNull) => (n! > 0 && d! > 0 ? (p as number) / ((n as number) * (d as number)) : null)
 
+// A custom (uneven) split has no single "per person" figure — one member's share
+// differs from another's — so the averaged per-person columns are meaningless for it
+// (the per-member amounts are shown via the member chips instead). #1458
+export const hasCustomMemberSplit = (item: { members?: { amount?: number | null }[] }) =>
+  (item.members || []).some(m => m.amount != null)
+
 export function splitColorFor(userId: number, order: number) {
   return SPLIT_COLORS[order % SPLIT_COLORS.length]
 }

client/src/components/Budget/BudgetPanel.tsx

@@ -1,6 +1,6 @@
 import { Plus, Calculator, Download } from 'lucide-react'
 import CustomSelect from '../shared/CustomSelect'
-import { CURRENCIES, SYMBOLS } from './BudgetPanel.constants'
+import { currenciesWith, SYMBOLS } from './BudgetPanel.constants'
 import { useBudgetPanel } from './useBudgetPanel'
 import type { TripMember } from './BudgetPanelMemberChips'
 import BudgetCategoryTable from './BudgetPanelCategoryTable'
@@ -74,7 +74,7 @@ export default function BudgetPanel({ tripId, tripMembers = [] }: BudgetPanelPro
                 value={currency}
                 onChange={setCurrency}
                 disabled={!canEdit}
-                options={CURRENCIES.map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
+                options={currenciesWith(currency).map(c => ({ value: c, label: `${c} (${SYMBOLS[c] || c})` }))}
                 searchable
               />
             </div>

client/src/components/Budget/BudgetPanelCategoryTable.tsx

@@ -1,9 +1,10 @@
-import type { CSSProperties, Dispatch, SetStateAction } from 'react'
+import { Fragment, type CSSProperties, type Dispatch, type SetStateAction } from 'react'
 import { Trash2, Pencil, GripVertical } from 'lucide-react'
 import type { BudgetItem } from '../../types'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 import { currencyDecimals } from '../../utils/formatters'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import { calcPP, calcPD, calcPPD } from './BudgetPanel.helpers'
+import { calcPP, calcPD, calcPPD, hasCustomMemberSplit } from './BudgetPanel.helpers'
 import InlineEditCell from './BudgetPanelInlineEditCell'
 import AddItemRow from './BudgetPanelAddItemRow'
 import BudgetMemberChips, { type TripMember } from './BudgetPanelMemberChips'
@@ -53,6 +54,7 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
   handleRenameCategory, handleDeleteCategory, handleDeleteItem, handleUpdateField, handleAddItem,
   tripId, currency, locale, t, fmt, hasMultipleMembers, tripMembers, setBudgetItemMembers, toggleBudgetMemberPaid, th, td }: BudgetCategoryTableProps) {
   const items = grouped.get(cat) || []
+  const contribFor = usePluginViewContributions('costs', tripId)
   const subtotal = items.reduce((s, x) => s + (x.total_price || 0), 0)
   const color = categoryColor(cat)
   return (
@@ -149,12 +151,17 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                     </thead>
                     <tbody>
                       {items.map(item => {
-                        const pp = calcPP(item.total_price, item.persons)
+                        // A custom (uneven) split has no single per-person figure — the per-member
+                        // amounts are shown via the member chips — so blank those columns (#1458).
+                        const customSplit = hasCustomMemberSplit(item)
+                        const pp = customSplit ? null : calcPP(item.total_price, item.persons)
                         const pd = calcPD(item.total_price, item.days)
-                        const ppd = calcPPD(item.total_price, item.persons, item.days)
+                        const ppd = customSplit ? null : calcPPD(item.total_price, item.persons, item.days)
                         const hasMembers = (item.members?.length ?? 0) > 0
+                        const contributions = contribFor(item.id)
                         return (
-                          <tr key={item.id}
+                          <Fragment key={item.id}>
+                          <tr
                             style={{
                               transition: 'background 0.1s, opacity 0.15s',
                               opacity: dragItem === item.id ? 0.4 : 1,
@@ -247,6 +254,14 @@ export default function BudgetCategoryTable({ cat, grouped, categoryColor, canEd
                               )}
                             </td>
                           </tr>
+                          {contributions.length > 0 && (
+                            <tr>
+                              <td colSpan={10} style={{ padding: '0 8px 6px 20px' }}>
+                                <PluginCardFooter items={contributions} tripId={tripId} />
+                              </td>
+                            </tr>
+                          )}
+                          </Fragment>
                         )
                       })}
                       {canEdit && <AddItemRow onAdd={data => handleAddItem(cat, data)} t={t} />}

client/src/components/Budget/CostsPanel.helpers.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect } from 'vitest'
+import { splitCents, payerSum, payersBalanced, rebalancePayers } from './CostsPanel.helpers'
+
+describe('splitCents', () => {
+  it('splits evenly when it divides cleanly', () => {
+    expect(splitCents(90, 3)).toEqual([30, 30, 30])
+  })
+
+  it('distributes the remainder cents so the parts sum back exactly', () => {
+    const parts = splitCents(100.01, 3)
+    expect(parts).toEqual([33.34, 33.34, 33.33])
+    expect(parts.reduce((a, b) => a + b, 0)).toBeCloseTo(100.01, 2)
+  })
+
+  it('returns an empty list for a non-positive count', () => {
+    expect(splitCents(50, 0)).toEqual([])
+  })
+
+  it('floors a negative amount at zero rather than inventing debt', () => {
+    expect(splitCents(-10, 2)).toEqual([0, 0])
+  })
+})
+
+describe('payerSum', () => {
+  it('sums only the selected payers', () => {
+    const amounts = { 1: '45', 2: '45', 3: '99' }
+    expect(payerSum(amounts, new Set([1, 2]))).toBeCloseTo(90, 2)
+  })
+
+  it('treats blank and unparseable amounts as zero', () => {
+    expect(payerSum({ 1: '', 2: 'abc' }, new Set([1, 2]))).toBe(0)
+  })
+})
+
+describe('payersBalanced', () => {
+  it('is true when the payer amounts add up to the total', () => {
+    expect(payersBalanced({ 1: '45', 2: '45' }, new Set([1, 2]), 90)).toBe(true)
+  })
+
+  it('is false when they do not', () => {
+    expect(payersBalanced({ 1: '45', 2: '40' }, new Set([1, 2]), 90)).toBe(false)
+  })
+
+  it('compares to the cent, tolerating float dust', () => {
+    expect(payersBalanced({ 1: '33.34', 2: '33.34', 3: '33.33' }, new Set([1, 2, 3]), 100.01)).toBe(true)
+  })
+})
+
+describe('rebalancePayers', () => {
+  it('spreads the total across payers when none are pinned', () => {
+    const next = rebalancePayers({}, new Set(), new Set([1, 2]), 90)
+    expect(next).toEqual({ 1: '45.00', 2: '45.00' })
+  })
+
+  it('leaves pinned payers alone and lets the rest absorb the remainder', () => {
+    // Alice pinned at 70 of a 100 bill → Bob must absorb 30.
+    const next = rebalancePayers({ 1: '70' }, new Set([1]), new Set([1, 2]), 100)
+    expect(next[1]).toBe('70')
+    expect(next[2]).toBe('30.00')
+  })
+
+  it('returns the amounts untouched when every payer is pinned', () => {
+    const amounts = { 1: '70', 2: '20' }
+    const next = rebalancePayers(amounts, new Set([1, 2]), new Set([1, 2]), 100)
+    expect(next).toEqual(amounts)
+  })
+
+  it('blanks a free payer whose share works out to zero', () => {
+    // Alice pinned at the full total → Bob is a payer with nothing left to pay.
+    const next = rebalancePayers({ 1: '100' }, new Set([1]), new Set([1, 2]), 100)
+    expect(next[2]).toBe('')
+  })
+
+  it('keeps the result balanced after rebalancing', () => {
+    const next = rebalancePayers({ 1: '33.33' }, new Set([1]), new Set([1, 2, 3]), 100)
+    expect(payersBalanced(next, new Set([1, 2, 3]), 100)).toBe(true)
+  })
+})

client/src/components/Budget/CostsPanel.helpers.ts

@@ -0,0 +1,53 @@
+/**
+ * Pure payer math for the Costs expense modal.
+ *
+ * An expense's payers must always sum to its total. The server re-derives
+ * budget_items.total_price from the payer sum (budgetService.createItem), so an
+ * unbalanced payer list would silently rewrite the expense total — and in custom
+ * split mode the member debits, balanced against the old total, would stop
+ * cancelling the payer credits. rebalancePayers keeps the payers the user hasn't
+ * touched absorbing the remainder as they type; payersBalanced gates the save.
+ *
+ * Amounts are the raw input strings, parsed on use (same as customAmounts).
+ */
+
+/** Spread `amount` across `n` payers in whole cents so the parts sum back exactly. */
+export function splitCents(amount: number, n: number): number[] {
+  if (n <= 0) return []
+  const cents = Math.max(0, Math.round(amount * 100))
+  const base = Math.floor(cents / n)
+  const rem = cents - base * n
+  return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
+}
+
+/** Sum the amounts of the selected payers. */
+export function payerSum(amounts: Record<number, string>, ids: Set<number>): number {
+  return [...ids].reduce((a, id) => a + (parseFloat(amounts[id]) || 0), 0)
+}
+
+/** True when the payer amounts add up to the expense total, to the cent. */
+export function payersBalanced(amounts: Record<number, string>, ids: Set<number>, total: number): boolean {
+  return Math.round(payerSum(amounts, ids) * 100) === Math.round(total * 100)
+}
+
+/**
+ * Recompute the payers the user has not explicitly edited (everyone not in
+ * `pinned`) so the whole list sums to `total`. Pinned amounts are left as typed.
+ */
+export function rebalancePayers(
+  amounts: Record<number, string>,
+  pinned: Set<number>,
+  ids: Set<number>,
+  total: number,
+): Record<number, string> {
+  const all = [...ids]
+  const free = all.filter(id => !pinned.has(id))
+  if (free.length === 0) return amounts
+  const pinnedSum = all
+    .filter(id => pinned.has(id))
+    .reduce((a, id) => a + (parseFloat(amounts[id]) || 0), 0)
+  const shares = splitCents(total - pinnedSum, free.length)
+  const next = { ...amounts }
+  free.forEach((id, i) => { next[id] = shares[i] ? shares[i].toFixed(2) : '' })
+  return next
+}

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

@@ -4,6 +4,7 @@ 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, buildBudgetItem } from '../../../tests/helpers/factories'
 import CostsPanel from './CostsPanel'
@@ -164,6 +165,28 @@ describe('CostsPanel — settlements in the ledger', () => {
     expect(screen.getByText('Unfinished')).toBeInTheDocument()
   })
 
+  it('sums only unfinished expenses in the Outstanding amount card', async () => {
+    // Display in the trip's own currency so FX conversion is an identity — keeps the asserted sum deterministic.
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    const paid = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 60, payers: [{ user_id: 1, amount: 60, username: 'alice' }], members: [{ user_id: 1, username: 'alice', paid: 1 }] }
+    const unfinishedA = { ...buildBudgetItem({ trip_id: 1, category: 'lodging', name: 'Hotel' }), total_price: 90, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    const unfinishedB = { ...buildBudgetItem({ trip_id: 1, category: 'transport', name: 'Taxi' }), total_price: 30, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    const zero = { ...buildBudgetItem({ trip_id: 1, category: 'misc', name: 'Freebie' }), total_price: 0, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [paid, unfinishedA, unfinishedB, zero] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    // Footer only shows the count once unfinished expenses have loaded.
+    const foot = await screen.findByText('expenses need a payer')
+    expect(foot).toHaveTextContent('2 expenses need a payer') // the two payer-less, non-zero expenses
+    // Sum is 90 + 30 = 120 — the paid (60) and zero-total items are excluded.
+    // Sum is 90 + 30 = 120 — the paid (60) and zero-total items are excluded.
+    const card = screen.getByText('Outstanding amount').closest('div[style*="border-radius: 22"]')
+    expect(card).toHaveTextContent('120') // 120,00 € (locale separator), i.e. 90 + 30
+  })
+
   it('records a recorded-total expense with nobody to split with (#1286)', async () => {
     let posted: Record<string, unknown> | null = null
     server.use(
@@ -199,6 +222,194 @@ describe('CostsPanel — settlements in the ledger', () => {
     expect(posted!.payers).toEqual([])
   })
 
+  it('keeps "no one paid yet" when reopening a payer-less expense (#1533)', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
+    let put: Record<string, unknown> | null = null
+    const item = {
+      ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Hotel' }),
+      id: 5,
+      total_price: 120,
+      payers: [],
+      members: [{ user_id: 1, username: 'alice', paid: 0 }, { user_id: 2, username: 'bob', paid: 0 }],
+    }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.put('/api/trips/1/budget/5', async ({ request }) => {
+        put = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Hotel')
+    await user.click(screen.getByTitle('Edit'))
+
+    // Nobody paid this expense — reopening it must not silently reselect "You".
+    expect(await screen.findByRole('button', { name: 'No one paid yet' })).toBeInTheDocument()
+
+    // …and saving an untouched edit must not assign the current user as payer.
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(put).toBeTruthy())
+    expect(put!.payers).toEqual([])
+  })
+
+  it('still defaults a brand-new expense to "You" as the payer', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    expect(await screen.findByRole('button', { name: 'You' })).toBeInTheDocument()
+  })
+
+  // ── Multi-payer (#1426 regression) ─────────────────────────────────────────
+  // 3.2.0 collapsed payers[] to a single payer, so a bill fronted by two people
+  // credited all of it to one and skewed settle-up. The ledger always supported N
+  // payers; only the form could no longer send them.
+
+  it('records an expense paid by two people with their own amounts', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Dinner' }), id: 11 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
+    await user.type(screen.getAllByPlaceholderText('0.00')[0], '90')
+
+    await user.click(screen.getByRole('button', { name: 'Multiple people paid' }))
+
+    // Alice (me) is seeded as the sole payer; including Bob rebalances to 45/45.
+    await user.click(screen.getAllByTestId('payer-toggle')[1])
+    expect(screen.getAllByTestId('payer-amount').map(i => (i as HTMLInputElement).value))
+      .toEqual(['45.00', '45.00'])
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    await user.click(addBtns[addBtns.length - 1])
+
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(90)
+    expect(posted!.payers).toEqual(expect.arrayContaining([
+      { user_id: 1, amount: 45 },
+      { user_id: 2, amount: 45 },
+    ]))
+    expect(posted!.payers).toHaveLength(2)
+  })
+
+  it('blocks saving when the payer amounts do not add up to the total', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item: buildBudgetItem({ trip_id: 1, name: 'Dinner' }) })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
+    await user.type(screen.getAllByPlaceholderText('0.00')[0], '90')
+    await user.click(screen.getByRole('button', { name: 'Multiple people paid' }))
+    await user.click(screen.getAllByTestId('payer-toggle')[1])
+
+    // Pin both payers at 20 of a 90 bill, so nobody is left to absorb the rest.
+    const amounts = () => screen.getAllByTestId('payer-amount') as HTMLInputElement[]
+    await user.clear(amounts()[0])
+    await user.type(amounts()[0], '20')
+    await user.clear(amounts()[1])
+    await user.type(amounts()[1], '20')
+
+    // An unbalanced payer list would make the server re-derive total_price as 40.
+    expect(screen.getByText(/must add up to/i)).toBeInTheDocument()
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    expect(addBtns[addBtns.length - 1]).toBeDisabled()
+    expect(posted).toBeNull()
+  })
+
+  it('reopens a two-payer expense with both payers intact', async () => {
+    seedStore(useAuthStore, { user: buildUser({ id: 1, username: 'alice' }), isAuthenticated: true })
+    let put: Record<string, unknown> | null = null
+    const item = {
+      ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }),
+      id: 7,
+      total_price: 90,
+      payers: [{ user_id: 1, amount: 45, username: 'alice' }, { user_id: 2, amount: 45, username: 'bob' }],
+      members: [{ user_id: 1, username: 'alice', paid: 0 }, { user_id: 2, username: 'bob', paid: 0 }],
+    }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.put('/api/trips/1/budget/7', async ({ request }) => {
+        put = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Dinner')
+    await user.click(screen.getByTitle('Edit'))
+
+    // Loading used to be payers.find(...), which silently dropped the second payer.
+    const amounts = await screen.findAllByTestId('payer-amount')
+    expect(amounts.map(i => (i as HTMLInputElement).value)).toEqual(['45', '45'])
+
+    await user.click(screen.getByRole('button', { name: 'Save' }))
+    await waitFor(() => expect(put).toBeTruthy())
+    expect(put!.payers).toHaveLength(2)
+  })
+
+  it('exports the expenses as a CSV download (#1500)', async () => {
+    // Display in the trip's own currency so FX conversion is an identity.
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    let exported: Blob | null = null
+    const createObjURL = vi.spyOn(URL, 'createObjectURL').mockImplementation(b => { exported = b as Blob; return 'blob:mock' })
+    const revokeObjURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {})
+    const clickSpy = vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner; tapas' }), total_price: 90, expense_date: '2025-06-15' }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Dinner; tapas')
+    await user.click(screen.getByTitle('Export CSV'))
+
+    expect(exported).toBeTruthy()
+    const text = await exported!.text()
+    expect(text).toContain('Date;Name;Category;Amount;Currency;Amount (EUR);Note')
+    expect(text).toContain('"Dinner; tapas"') // separator inside the name gets quoted
+    expect(text).toContain('Food & drink')    // category label, not the raw key
+    expect(text).toContain('90.00;EUR')
+    createObjURL.mockRestore(); revokeObjURL.mockRestore(); clickSpy.mockRestore()
+  })
+
   it('supports itemized receipt ticket manual entry and split assignment', async () => {
     let posted: Record<string, unknown> | null = null
     server.use(
@@ -254,4 +465,102 @@ describe('CostsPanel — settlements in the ledger', () => {
     ]))
     expect(posted!.note).toContain('TICKETJSON:')
   })
+
+  // ── Display currency ───────────────────────────────────────────────────────
+
+  it('shows amounts in the trip currency when the user has no display currency set', async () => {
+    // No personal preference → the trip's own currency wins, instead of a hardcoded one.
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: '' } })
+    seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'JPY' }) })
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Sushi' }), total_price: 3000, currency: 'JPY', payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Sushi')
+    const card = screen.getByText('Total trip spend').closest('div[style*="border-radius: 22"]')
+    // Yen, unconverted and with JPY's zero decimals — not a euro/dollar default.
+    expect(card).toHaveTextContent('￥3,000')
+  })
+
+  // ── Payment currency ───────────────────────────────────────────────────────
+  // A transfer settling a shared bill can be made in any currency, so it carries its
+  // own rather than being assumed to be in the display one.
+
+  it('records a payment in the display currency by default', async () => {
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ settlement: { id: 1, ...posted } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
+    await user.click(addButtons[addButtons.length - 1])
+
+    await waitFor(() => expect(posted).toMatchObject({ amount: 25, currency: 'EUR' }))
+  })
+
+  it('records a payment made in another currency', async () => {
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ settlement: { id: 1, ...posted } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    // Bob paid me back in dollars — the server freezes the USD rate on write.
+    await user.click(screen.getByText(/^EUR/))
+    await user.click(await screen.findByText(/^USD/))
+    const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
+    await user.click(addButtons[addButtons.length - 1])
+
+    await waitFor(() => expect(posted).toMatchObject({ amount: 25, currency: 'USD' }))
+  })
+
+  it('reopens a foreign-currency payment with its own currency', async () => {
+    seedStore(useSettingsStore, { settings: { ...useSettingsStore.getState().settings, default_currency: 'EUR' } })
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [],
+          flows: [],
+          settlements: [
+            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, currency: 'USD', exchange_rate: 1.1, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
+          ],
+        })
+      ),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Payment')
+    await user.click(screen.getByTitle('Edit'))
+
+    // The stored USD amount comes back as-is, not silently reread as euros.
+    expect((await screen.findByPlaceholderText('0.00') as HTMLInputElement).value).toBe('30')
+    expect(screen.getByText(/^USD/)).toBeInTheDocument()
+  })
 })

client/src/components/Budget/CostsPanel.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2 } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2, AlertCircle, Download } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -14,11 +14,13 @@ import { formatMoney, currencyDecimals, currencyLocale } from '../../utils/forma
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
-import { SYMBOLS, CURRENCIES, SPLIT_COLORS } from './BudgetPanel.constants'
+import { SYMBOLS, currenciesWith, SPLIT_COLORS } from './BudgetPanel.constants'
+import { payersBalanced, rebalancePayers } from './CostsPanel.helpers'
 import { COST_CATEGORY_LIST, catMeta } from './costsCategories'
 import type { BudgetItem } from '../../types'
 import type { TripMember } from './BudgetPanelMemberChips'
 import GuestBadge from '../shared/GuestBadge'
+import { NumericInput } from '../shared/NumericInput'
 
 export function splitEqualShares(total: number, members: { user_id: number }[], itemId: number): Record<number, number> {
   const n = members.length
@@ -92,6 +94,9 @@ interface Settlement {
   from_user_id: number
   to_user_id: number
   amount: number
+  // The currency the transfer was entered in. Legacy rows predate it (null) and are
+  // read as the display currency, which is what the server assumes for them too.
+  currency?: string | null
   created_at?: string
   from_username?: string
   to_username?: string
@@ -179,6 +184,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const myShare = shares[me] || 0
     return convert(myShare, curOf(e))
   }
+  // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
+  // total but stays out of settlements until who-paid is filled in.
+  const isUnfinished = (e: BudgetItem) => baseTotal(e) > 0 && (e.payers || []).filter(p => p.amount > 0).length === 0
 
   const totals = useMemo(() => {
     const totalSpend = budgetItems.reduce((a, e) => a + baseTotal(e), 0)
@@ -186,7 +194,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const myShare = budgetItems.reduce((a, e) => a + myShareOf(e), 0)
     const owe = (settlement?.flows || []).filter(f => f.from.user_id === me).reduce((a, f) => a + f.amount, 0)
     const owed = (settlement?.flows || []).filter(f => f.to.user_id === me).reduce((a, f) => a + f.amount, 0)
-    return { totalSpend, myPaid, myShare, owe, owed }
+    const outstanding = budgetItems.reduce((a, e) => (isUnfinished(e) ? a + baseTotal(e) : a), 0)
+    const outstandingCount = budgetItems.filter(isUnfinished).length
+    return { totalSpend, myPaid, myShare, owe, owed, outstanding, outstandingCount }
   }, [budgetItems, settlement, me])
 
   // ── filtering + day grouping ────────────────────────────────────────────
@@ -254,7 +264,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   // ── settle actions ──────────────────────────────────────────────────────
   const settleFlow = async (fromId: number, toId: number, amount: number) => {
     try {
-      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount })
+      await budgetApi.createSettlement(tripId, { from_user_id: fromId, to_user_id: toId, amount, currency: base })
       loadSettlement()
     } catch { toast.error(t('common.unknownError')) }
   }
@@ -265,7 +275,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const flows = settlement?.flows || []
     if (!flows.length) return
     try {
-      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount })
+      for (const f of flows) await budgetApi.createSettlement(tripId, { from_user_id: f.from.user_id, to_user_id: f.to.user_id, amount: f.amount, currency: base })
       loadSettlement()
     } catch { toast.error(t('common.unknownError')) }
   }
@@ -284,6 +294,39 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     try { await deleteBudgetItem(tripId, id); loadSettlement() } catch { toast.error(t('common.unknownError')) }
   }
 
+  // CSV export of all expenses — the wiki-documented export that got lost in the
+  // Costs rework (#1500). One row per expense, oldest first.
+  const handleExportCsv = () => {
+    const sep = ';'
+    const esc = (v: unknown) => { const s = String(v ?? ''); return s.includes(sep) || s.includes('"') || s.includes('\n') ? '"' + s.replace(/"/g, '""') + '"' : s }
+    const fmtDate = (iso: string) => { if (!iso) return ''; try { return new Date(iso + 'T00:00:00Z').toLocaleDateString(locale, { day: '2-digit', month: '2-digit', year: 'numeric', timeZone: 'UTC' }) } catch { return iso } }
+
+    const header = ['Date', 'Name', 'Category', 'Amount', 'Currency', 'Amount (' + base + ')', 'Note']
+    const rows = [header.join(sep)]
+    const items = budgetItems.slice().sort((a, b) => (a.expense_date || '').localeCompare(b.expense_date || ''))
+    for (const e of items) {
+      const cur = curOf(e)
+      // Ticket notes carry the itemized-receipt JSON, not a human note.
+      const note = e.note && !e.note.startsWith('TICKETJSON:') ? e.note : ''
+      rows.push([
+        esc(fmtDate(e.expense_date || '')), esc(e.name), esc(t(catMeta(e.category).labelKey)),
+        (e.total_price || 0).toFixed(currencyDecimals(cur)), cur,
+        baseTotal(e).toFixed(currencyDecimals(base)),
+        esc(note),
+      ].join(sep))
+    }
+
+    const bom = ''
+    const blob = new Blob([bom + rows.join('\r\n')], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+    const a = document.createElement('a')
+    a.href = url
+    const safeName = (trip?.title || 'trip').replace(/[^a-zA-Z0-9À-ɏ _-]/g, '').trim()
+    a.download = `costs-${safeName}.csv`
+    a.click()
+    URL.revokeObjectURL(url)
+  }
+
   // ── small presentational helpers ────────────────────────────────────────
   const Avatar = ({ id, size = 24 }: { id: number; size?: number }) => {
     const url = personById(id)?.avatar_url
@@ -369,7 +412,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       </div>
 
       {/* ── Summary cards ── */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1.15fr', gap: 16, marginBottom: 36 }} className="costs-summary">
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 36 }} className="costs-summary">
         <SummaryCard label={t('costs.youOwe')} sub={t('costs.youOweSub')} amount={totals.owe} currency={base} locale={locale}
           icon={<ArrowDown size={18} />} tone="owe"
           foot={totals.owe > 0.01
@@ -380,6 +423,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           foot={totals.owed > 0.01
             ? <FlowPills ids={(settlement?.flows || []).filter(f => f.to.user_id === me).map(f => f.from.user_id)} lead={t('costs.from')} Avatar={Avatar} name={personName} />
             : <span className="text-content-faint">{t('costs.nothingOwed')}</span>} />
+        <SummaryCard label={t('costs.outstanding')} sub={t('costs.outstandingSub')} amount={totals.outstanding} currency={base} locale={locale}
+          icon={<AlertCircle size={18} />} tone="unfinished"
+          foot={totals.outstandingCount > 0
+            ? <span><b>{totals.outstandingCount}</b> {t('costs.outstandingItems')}</span>
+            : <span className="text-content-faint">{t('costs.allSettled')}</span>} />
         <SummaryCard label={t('costs.totalSpend')} sub={t('costs.totalSpendSub')} amount={totals.totalSpend} currency={base} locale={locale}
           icon={<BarChart3 size={18} />} tone="total"
           foot={<span style={{ display: 'flex', gap: 16 }}><span>{t('costs.yourShare')} · <b>{fmt0(totals.myShare)}</b></span><span>{t('costs.youPaid')} · <b>{fmt0(totals.myPaid)}</b></span></span>} />
@@ -409,6 +457,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
                   </button>
                 ))}
               </div>
+              <button onClick={handleExportCsv} title={t('budget.exportCsv')} disabled={!budgetItems.length}
+                className="bg-surface-input border border-edge text-content-muted disabled:opacity-40"
+                style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0 }}>
+                <Download size={15} />
+              </button>
             </div>
           </div>
 
@@ -475,7 +528,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
       )}
 
       {(editingSettlement || addingPayment) && (
-        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement}
+        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement} currency={base}
           onClose={() => { setEditingSettlement(null); setAddingPayment(false) }}
           onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
       )}
@@ -511,9 +564,12 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
         .costs-root .text-content-faint { color: var(--c-ink3) !important; }
         .costs-root .exp-actions { opacity: 1; }
         @media (max-width: 1100px) {
-          .costs-root .costs-summary { grid-template-columns: 1fr !important; }
+          .costs-root .costs-summary { grid-template-columns: 1fr 1fr !important; }
           .costs-root .costs-grid { grid-template-columns: 1fr !important; }
         }
+        @media (max-width: 640px) {
+          .costs-root .costs-summary { grid-template-columns: 1fr !important; }
+        }
       `}</style>
     </div>
   )
@@ -580,6 +636,18 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
           </div>
         </div>
 
+        {/* Outstanding */}
+        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
+            <div style={{ width: 34, height: 34, borderRadius: 10, display: 'grid', placeItems: 'center', background: '#d9770622', color: '#d97706', flexShrink: 0 }}><AlertCircle size={17} /></div>
+            <div style={{ minWidth: 0 }}>
+              <div className="text-content" style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', fontWeight: 600 }}>{t('costs.outstanding')}</div>
+              <div className="text-content-faint" style={{ fontSize: 'calc(10.5px * var(--fs-scale-caption, 1))' }}>{t('costs.outstandingSub')}</div>
+            </div>
+            <div style={{ marginLeft: 'auto', fontSize: 'calc(27px * var(--fs-scale-title, 1))', fontWeight: 700, letterSpacing: '-0.03em', lineHeight: 1, display: 'flex', alignItems: 'baseline', color: '#d97706' }}>{bigMoney(totals.outstanding, 16, 'var(--c-ink3)')}</div>
+          </div>
+        </div>
+
         {/* Settle up */}
         <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
           <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 8 }}>
@@ -593,7 +661,14 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 
         {/* Expenses */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-          <div className="text-content" style={{ fontSize: 'calc(19px * var(--fs-scale-subtitle, 1))', fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
+            <div className="text-content" style={{ fontSize: 'calc(19px * var(--fs-scale-subtitle, 1))', fontWeight: 700, letterSpacing: '-0.02em' }}>{t('costs.expenses')}</div>
+            <button onClick={handleExportCsv} title={t('budget.exportCsv')} disabled={!budgetItems.length}
+              className="bg-surface-card border border-edge text-content-muted disabled:opacity-40"
+              style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 34, height: 34, borderRadius: 10, cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0 }}>
+              <Download size={15} />
+            </button>
+          </div>
           <div className="bg-surface-card border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 8, borderRadius: 12, padding: '0 12px', height: 42 }}>
             <Search size={16} className="text-content-faint" />
             <input value={search} onChange={e => setSearch(e.target.value)} placeholder={t('costs.searchPlaceholder')} className="text-content" style={{ border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', width: '100%', fontFamily: 'inherit' }} />
@@ -645,21 +720,19 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
     const cur = curOf(e)
     const payers = (e.payers || []).filter(p => p.amount > 0)
     const net = round2(myPaidOf(e) - myShareOf(e))
-    // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
-    // total but stays out of settlements until who-paid is filled in.
-    const isUnfinished = baseTotal(e) > 0 && payers.length === 0
+    const unfinished = isUnfinished(e)
     return (
       <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
         <span style={{ position: 'relative', width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}>
           <Icon size={21} />
-          {isMobile && isUnfinished && (
+          {isMobile && unfinished && (
             <span title={t('costs.unfinishedHint')} style={{ position: 'absolute', bottom: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 800, lineHeight: 1, border: '2px solid var(--bg-card)' }}>!</span>
           )}
         </span>
         <div style={{ minWidth: 0 }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
             <span className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600 }}>{e.name}</span>
-            {isUnfinished && !isMobile && (
+            {unfinished && !isMobile && (
               <span title={t('costs.unfinishedHint')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 6px', borderRadius: 999, background: 'rgba(217,119,6,0.14)', color: '#d97706', fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, flexShrink: 0 }}>
                 <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 800 }}>!</span>
                 {t('costs.unfinished')}
@@ -705,18 +778,23 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
   // A settle-up payment as a ledger row — visually distinct from an expense, with
   // inline edit + undo (reuses deleteSettlement) so it isn't buried in a modal.
   function SettlementRow({ s }: { s: Settlement }) {
+    // Legacy transfers carry no currency and were entered in the display base.
+    const cur = (s.currency || base).toUpperCase()
     return (
       <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
         <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><ArrowLeftRight size={21} /></span>
         <div style={{ minWidth: 0 }}>
-          <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, marginBottom: 6 }}>{t('costs.payment')}</div>
+          <div className="text-content" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, marginBottom: 6 }}>
+            {t('costs.payment')}
+            {cur !== base && <span className="text-content-faint" style={{ fontWeight: 400, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}> · {fmt(s.amount, cur)} → {fmt(convert(s.amount, cur))}</span>}
+          </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }} title={`${personName(s.from_user_id)} → ${personName(s.to_user_id)}`}>
             <Avatar id={s.from_user_id} size={20} /><ArrowRight size={13} className="text-content-faint" /><Avatar id={s.to_user_id} size={20} />
             <span className="text-content-faint" style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{personName(s.from_user_id)} → {personName(s.to_user_id)}</span>
           </div>
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
-          <div className="text-content" style={{ fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(s.amount)}</div>
+          <div className="text-content" style={{ fontSize: 'calc(18px * var(--fs-scale-subtitle, 1))', fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(convert(s.amount, cur))}</div>
           {canEdit && (
             <div className="exp-actions" style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
               <button title={t('common.edit')} onClick={() => setEditingSettlement(s)} className="bg-surface-secondary border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer' }}><Pencil size={13} /></button>
@@ -786,9 +864,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
 }
 
 // ── pure subcomponents ─────────────────────────────────────────────────────
-function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' }) {
+function SummaryCard({ label, sub, amount, currency, locale, icon, foot, tone }: { label: string; sub: string; amount: number; currency: string; locale: string; icon: React.ReactNode; foot: React.ReactNode; tone: 'owe' | 'owed' | 'total' | 'unfinished' }) {
   const total = tone === 'total'
-  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : undefined
+  const accent = tone === 'owe' ? '#dc2626' : tone === 'owed' ? '#16a34a' : tone === 'unfinished' ? '#d97706' : undefined
   const muted = total ? 'rgba(255,255,255,0.55)' : 'var(--text-faint)'
   // formatToParts keeps the design's "big integer + muted symbol/decimals" styling
   // while letting Intl place the symbol and pick separators per locale + currency.
@@ -832,11 +910,14 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
   )
 }
 
-// Add or edit a settle-up payment (from / to / amount). Reachable inline from the
-// ledger row and from a manual "Add payment" button, so recording "I sent money to
-// X" works the same whether or not there's an outstanding expense behind it.
-function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
-  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; onClose: () => void; onSaved: () => void
+// Add or edit a settle-up payment (from / to / amount / currency). Reachable inline
+// from the ledger row and from a manual "Add payment" button, so recording "I sent
+// money to X" works the same whether or not there's an outstanding expense behind it.
+// A transfer can be made in any currency — paying a rouble debt in euros is normal —
+// so it carries its own, defaulting to the display currency. The server freezes its
+// FX rate on write, the same way an expense's is frozen.
+function SettlementModal({ tripId, people, me, editing, currency, onClose, onSaved }: {
+  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; currency: string; onClose: () => void; onSaved: () => void
 }) {
   const { t } = useTranslation()
   const toast = useToast()
@@ -844,6 +925,7 @@ function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
   const [fromId, setFromId] = useState<string>(String(editing?.from_user_id ?? me))
   const [toId, setToId] = useState<string>(String(editing?.to_user_id ?? otherDefault))
   const [amount, setAmount] = useState<string>(editing ? String(editing.amount) : '')
+  const [cur, setCur] = useState<string>((editing?.currency || currency).toUpperCase())
   const [saving, setSaving] = useState(false)
 
   const amt = parseFloat(amount) || 0
@@ -853,7 +935,7 @@ function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
   const save = async () => {
     if (!valid) return
     setSaving(true)
-    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt }
+    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt, currency: cur }
     try {
       if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
       else await budgetApi.createSettlement(tripId, data)
@@ -861,7 +943,6 @@ function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
     } catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
   }
 
-  const inputCls = 'w-full bg-surface-input border border-edge text-content'
   const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
 
   return (
@@ -881,10 +962,22 @@ function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
           <label className={labelCls}>{t('costs.to')}</label>
           <CustomSelect value={toId} onChange={v => setToId(String(v))} options={opts} style={{ width: '100%' }} />
         </div>
-        <div>
-          <label className={labelCls}>{t('costs.amount')}</label>
-          <input type="text" inputMode="decimal" placeholder="0.00" value={amount}
-            onChange={e => setAmount(e.target.value.replace(',', '.'))} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 'calc(14px * var(--fs-scale-body, 1))', outline: 'none', fontWeight: 600 }} />
+        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+          <div style={{ minWidth: 0 }}>
+            <label className={labelCls}>{t('costs.amount')}</label>
+            <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
+              <span className="text-content-faint" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))' }}>{SYMBOLS[cur] || (cur + ' ')}</span>
+              <input type="text" inputMode="decimal" placeholder="0.00" value={amount}
+                onChange={e => setAmount(e.target.value.replace(',', '.'))}
+                className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
+            </div>
+          </div>
+          <div style={{ minWidth: 0 }}>
+            <label className={labelCls}>{t('costs.currency')}</label>
+            <CustomSelect value={cur} onChange={v => setCur(String(v))} searchable
+              options={currenciesWith(cur).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+              style={{ width: '100%' }} />
+          </div>
         </div>
       </div>
     </Modal>
@@ -920,11 +1013,29 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   const [participants, setParticipants] = useState<Set<number>>(() =>
     editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
 
-  // Payer state: 0 represents "Nobody (planning entry)"
+  // Payer state. An expense can be fronted by several people, each with their own
+  // amount (budget_item_payers) — a shared card, or "I got this round, you get the
+  // next". The single-payer dropdown stays the default path; multiPayer swaps in a
+  // per-person amount editor. 0 represents "Nobody (planning entry)"; on an
+  // existing expense a missing payer is a deliberate choice, so only a brand-new
+  // one defaults to me.
+  const initialPayers = (editing?.payers || []).filter(p => p.amount > 0)
+
   const [payerId, setPayerId] = useState<number>(() => {
-    const existingPayer = (editing?.payers || []).find(p => p.amount > 0)
-    return existingPayer ? existingPayer.user_id : me
+    const existingPayer = initialPayers[0]
+    if (existingPayer) return existingPayer.user_id
+    return editing ? 0 : me
   })
+  const [multiPayer, setMultiPayer] = useState(() => initialPayers.length > 1)
+  const [payerIds, setPayerIds] = useState<Set<number>>(() => new Set(initialPayers.map(p => p.user_id)))
+  const [payerAmounts, setPayerAmounts] = useState<Record<number, string>>(() => {
+    const m: Record<number, string> = {}
+    for (const p of initialPayers) m[p.user_id] = String(p.amount)
+    return m
+  })
+  // Payers the user typed an amount for: rebalance leaves these alone and makes
+  // the others absorb the remainder.
+  const [pinnedPayers, setPinnedPayers] = useState<Set<number>>(() => new Set(initialPayers.map(p => p.user_id)))
 
   const [splitMode, setSplitMode] = useState<'equally' | 'custom' | 'ticket'>(() => {
     if (editing?.note && editing.note.startsWith('TICKETJSON:')) {
@@ -995,7 +1106,8 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   }, [totalNum, participants, customAmounts, editing])
   
   const ticketValid = ticketItems.length > 0 && ticketItems.every(item => item.name.trim().length > 0 && (parseFloat(item.price) || 0) > 0 && item.participants.size > 0)
-  const valid = name.trim().length > 0 && (
+  const payersOk = !multiPayer || (payerIds.size > 0 && payersBalanced(payerAmounts, payerIds, totalNum))
+  const valid = name.trim().length > 0 && payersOk && (
     isTicketMode
       ? ticketValid
       : totalNum > 0 && (participants.size === 0 || splitMode === 'equally' || customBalanced)
@@ -1005,6 +1117,52 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
     setTotal(v.replace(',', '.'))
   }
 
+  // Keep the payer amounts summing to the total as it changes — including in ticket
+  // mode, where the total is derived from the ticket items rather than typed.
+  useEffect(() => {
+    if (!multiPayer) return
+    setPayerAmounts(prev => rebalancePayers(prev, pinnedPayers, payerIds, totalNum))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [totalNum])
+
+  const enableMultiPayer = () => {
+    const seed = payerIds.size > 0 ? new Set(payerIds) : new Set<number>([payerId > 0 ? payerId : me])
+    const pinned = new Set<number>()
+    setPayerIds(seed)
+    setPinnedPayers(pinned)
+    setPayerAmounts(prev => rebalancePayers(prev, pinned, seed, totalNum))
+    setMultiPayer(true)
+  }
+
+  const disableMultiPayer = () => {
+    // Collapsing back keeps the first payer; their amount becomes the whole total.
+    const [first] = [...payerIds]
+    setPayerId(first ?? me)
+    setMultiPayer(false)
+  }
+
+  const togglePayer = (id: number) => {
+    const nextIds = new Set(payerIds)
+    const nextPinned = new Set(pinnedPayers)
+    if (nextIds.has(id)) {
+      nextIds.delete(id)
+      nextPinned.delete(id)
+    } else {
+      nextIds.add(id)
+    }
+    setPayerIds(nextIds)
+    setPinnedPayers(nextPinned)
+    setPayerAmounts(prev => rebalancePayers(prev, nextPinned, nextIds, totalNum))
+  }
+
+  const onPayerAmountChange = (id: number, v: string) => {
+    const val = v.replace(',', '.')
+    const nextPinned = new Set(pinnedPayers)
+    nextPinned.add(id)
+    setPinnedPayers(nextPinned)
+    setPayerAmounts(prev => rebalancePayers({ ...prev, [id]: val }, nextPinned, payerIds, totalNum))
+  }
+
   const handleCustomAmountChange = (id: number, val: string) => {
     val = val.replace(',', '.')
     if (/^\d*\.?\d{0,2}$/.test(val) || val === '') {
@@ -1069,7 +1227,11 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
   const save = async () => {
     if (!valid) return
     setSaving(true)
-    const payerList = (payerId > 0 && participants.size > 0) ? [{ user_id: payerId, amount: totalNum }] : []
+    const payerList = multiPayer
+      ? [...payerIds]
+          .map(id => ({ user_id: id, amount: parseFloat(payerAmounts[id]) || 0 }))
+          .filter(p => p.amount > 0)
+      : (payerId > 0 && participants.size > 0) ? [{ user_id: payerId, amount: totalNum }] : []
     const memberList = [...participants].map(id => ({
       user_id: id,
       amount: splitMode === 'custom'
@@ -1128,8 +1290,8 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
           <label className={labelCls}>{t('costs.totalAmount')}</label>
           <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px', opacity: isTicketMode ? 0.6 : 1 }}>
             <span className="text-content-faint" style={{ fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))' }}>{sym(currency)}</span>
-            <input type="text" inputMode="decimal" placeholder="0.00" value={isTicketMode ? ticketInfo.total.toFixed(2) : total}
-              onChange={e => onTotalChange(e.target.value)}
+            <NumericInput mode="decimal" placeholder="0.00" value={isTicketMode ? ticketInfo.total.toFixed(2) : total}
+              onValueChange={onTotalChange}
               disabled={isTicketMode}
               className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 'calc(15px * var(--fs-scale-subtitle, 1))', fontWeight: 600, paddingLeft: 6, width: '100%' }} />
           </div>
@@ -1138,7 +1300,7 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
           <div style={{ minWidth: 0 }}>
             <label className={labelCls}>{t('costs.currency')}</label>
             <CustomSelect value={currency} onChange={v => setCurrency(String(v))} searchable
-              options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+              options={currenciesWith(currency).map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
               style={{ width: '100%' }} />
           </div>
           <div style={{ minWidth: 0 }}>
@@ -1174,13 +1336,66 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
         </div>
 
         <div>
-          <label className={labelCls}>{t('costs.whoPaid')}</label>
-          <CustomSelect value={String(payerId)} onChange={v => setPayerId(Number(v))}
-            options={[
-              { value: '0', label: t('costs.noOnePaid') || 'Nobody (planning entry)' },
-              ...people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
-            ]}
-            style={{ width: '100%' }} />
+          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 }}>
+            <label className={labelCls} style={{ marginBottom: 0 }}>{t('costs.whoPaid')}</label>
+            <button type="button" onClick={() => (multiPayer ? disableMultiPayer() : enableMultiPayer())}
+              className="text-content-muted"
+              style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(11.5px * var(--fs-scale-caption, 1))', fontWeight: 600, textDecoration: 'underline' }}>
+              {multiPayer ? t('costs.singlePayer') : t('costs.multiplePayers')}
+            </button>
+          </div>
+          {!multiPayer ? (
+            <CustomSelect value={String(payerId)} onChange={v => setPayerId(Number(v))}
+              options={[
+                { value: '0', label: t('costs.noOnePaid') || 'Nobody (planning entry)' },
+                ...people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
+              ]}
+              style={{ width: '100%' }} />
+          ) : (
+            <>
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
+                {people.map((p, idx) => {
+                  const on = payerIds.has(p.id)
+                  return (
+                    <div key={p.id} className="bg-surface-secondary border border-edge"
+                      style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10, opacity: on ? 1 : 0.5 }}>
+                      <button type="button" onClick={() => togglePayer(p.id)} data-testid="payer-toggle"
+                        style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', padding: 0, minWidth: 0, textAlign: 'left' }}>
+                        {p.avatar_url
+                          ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0, opacity: on ? 1 : 0.45 }} />
+                          : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, opacity: on ? 1 : 0.45 }}>
+                              {(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}
+                            </span>}
+                        <span className="text-content" style={{ fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                          {p.id === me ? t('costs.you') : p.username}
+                        </span>
+                      </button>
+                      {on ? (
+                        <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
+                          <span className="text-content-faint" style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))' }}>{sym(currency)}</span>
+                          <NumericInput mode="decimal" placeholder="0.00" data-testid="payer-amount"
+                            value={payerAmounts[p.id] || ''}
+                            onValueChange={v => onPayerAmountChange(p.id, v)}
+                            className="text-content"
+                            style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 'calc(14px * var(--fs-scale-body, 1))', fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
+                        </div>
+                      ) : (
+                        <button type="button" onClick={() => togglePayer(p.id)} className="text-content-faint"
+                          style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 'calc(12px * var(--fs-scale-caption, 1))', textAlign: 'right' }}>
+                          {t('costs.tapToInclude')}
+                        </button>
+                      )}
+                    </div>
+                  )
+                })}
+              </div>
+              {!payersOk && (
+                <div style={{ marginTop: 8, fontSize: 'calc(12.5px * var(--fs-scale-caption, 1))', color: '#d97706' }}>
+                  {t('costs.payersUnbalanced', { amount: formatMoney(totalNum, currency, locale) })}
+                </div>
+              )}
+            </>
+          )}
         </div>
 
         <div>
@@ -1210,23 +1425,22 @@ export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClo
               <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                 {ticketItems.map((item, itemIdx) => (
                   <div key={item.id} className="bg-surface-secondary border border-edge" style={{ padding: 10, borderRadius: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
-                    <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) 130px auto', gap: 8, alignItems: 'center' }}>
                       <input
                         type="text"
                         placeholder="Item name"
                         value={item.name}
                         onChange={e => handleUpdateItemName(item.id, e.target.value)}
                         className="bg-surface-input border border-edge text-content"
-                        style={{ flex: 2, padding: '6px 10px', borderRadius: 8, fontSize: 13, border: '1px solid var(--border-color)', outline: 'none' }}
+                        style={{ minWidth: 0, padding: '6px 10px', borderRadius: 8, fontSize: 13, border: '1px solid var(--border-color)', outline: 'none' }}
                       />
-                      <div className="bg-surface-input border border-edge" style={{ flex: 1, display: 'flex', alignItems: 'center', padding: '0 8px', borderRadius: 8 }}>
+                      <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', padding: '0 8px', borderRadius: 8 }}>
                         <span className="text-content-faint" style={{ fontSize: 12 }}>{sym(currency)}</span>
-                        <input
-                          type="text"
-                          inputMode="decimal"
+                        <NumericInput
+                          mode="decimal"
                           placeholder="0.00"
                           value={item.price}
-                          onChange={e => handleUpdateItemPrice(item.id, e.target.value)}
+                          onValueChange={v => handleUpdateItemPrice(item.id, v)}
                           className="text-content"
                           style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 13, fontWeight: 600, textAlign: 'right', padding: '6px 0' }}
                         />

client/src/components/Budget/useBudgetPanel.ts

@@ -7,7 +7,7 @@ import { useTranslation } from '../../i18n'
 import { budgetApi } from '../../api/client'
 import type { BudgetItem } from '../../types'
 import { currencyDecimals } from '../../utils/formatters'
-import { widgetTheme, fmtNum, calcPP, calcPD, calcPPD } from './BudgetPanel.helpers'
+import { widgetTheme, fmtNum, calcPP, calcPD, calcPPD, hasCustomMemberSplit } from './BudgetPanel.helpers'
 import { PIE_COLORS } from './BudgetPanel.constants'
 import type { TripMember } from './BudgetPanelMemberChips'
 
@@ -167,9 +167,11 @@ export function useBudgetPanel(tripId: number, tripMembers: TripMember[]) {
 
     for (const cat of categoryNames) {
       for (const item of (grouped.get(cat) || [])) {
-        const pp = calcPP(item.total_price, item.persons)
+        // A custom (uneven) split has no single per-person figure, so leave those columns blank (#1458).
+        const customSplit = hasCustomMemberSplit(item)
+        const pp = customSplit ? null : calcPP(item.total_price, item.persons)
         const pd = calcPD(item.total_price, item.days)
-        const ppd = calcPPD(item.total_price, item.persons, item.days)
+        const ppd = customSplit ? null : calcPPD(item.total_price, item.persons, item.days)
         rows.push([
           esc(item.category), esc(item.name), esc(fmtDate(item.expense_date || '')),
           fmtPrice(item.total_price), item.persons ?? '', item.days ?? '',

client/src/components/Collections/CollectionMap.tsx

@@ -20,9 +20,6 @@ interface CollectionMapProps {
  */
 export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, onDeselect, dark }: CollectionMapProps): React.ReactElement {
   const pts = mappablePlaces(places)
-  const center: [number, number] = pts.length > 0
-    ? [pts[0].lat as number, pts[0].lng as number]
-    : [48.8566, 2.3522]
   const tileUrl = dark
     ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png'
     : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'
@@ -35,8 +32,8 @@ export default function CollectionMap({ places, selectedPlaceId, onOpenPlace, on
         hoverDisabled
         onMarkerClick={onOpenPlace}
         onMapClick={onDeselect ? () => onDeselect() : undefined}
-        center={center}
-        zoom={pts.length > 0 ? 6 : 3}
+        // No center/zoom: the map frames itself on the collection's places at mount, and
+        // falls back to the world view for a collection with none.
         tileUrl={tileUrl}
         fitKey={pts.length}
       />

client/src/components/Collections/CollectionMapPanel.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { PanelLeftClose, PanelLeftOpen, Search, Plus } from 'lucide-react'
+import { PanelLeftClose, PanelLeftOpen, Search } from 'lucide-react'
 import type { CollectionPlace } from '@trek/shared'
 import type { TranslationFn } from '../../types'
 import CollectionMap from './CollectionMap'
@@ -15,9 +15,6 @@ interface CollectionMapPanelProps {
   /** 'list' = split (map can be expanded); 'map' = full (list collapsed). */
   view: 'list' | 'map'
   onToggleView: () => void
-  /** Show a "+" to add a place to the current list (real lists only). */
-  canAddPlace: boolean
-  onAddPlace: () => void
   search: string
   onSearch: (v: string) => void
   t: TranslationFn
@@ -30,7 +27,7 @@ interface CollectionMapPanelProps {
  */
 export default function CollectionMapPanel({
   places, selectedPlaceId, onSelect, onDeselect, dark, overlay, view, onToggleView,
-  canAddPlace, onAddPlace, search, onSearch, t,
+  search, onSearch, t,
 }: CollectionMapPanelProps): React.ReactElement {
   return (
     <div className="col-map-shell">
@@ -55,11 +52,6 @@ export default function CollectionMapPanel({
             </button>
           </div>
           <div className="col-map-group right">
-            {canAddPlace && (
-              <button type="button" onClick={onAddPlace} className="col-map-btn" aria-label={t('collections.addPlace')} title={t('collections.addPlace')}>
-                <Plus size={17} />
-              </button>
-            )}
             <div className="col-map-search">
               <Search size={15} />
               <input value={search} onChange={e => onSearch(e.target.value)} placeholder={t('collections.search')} />

client/src/components/Files/FileManager.helpers.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import { isWalletPass } from './FileManager.helpers';
+
+describe('isWalletPass (#1447)', () => {
+  it('detects by extension when the mime is unreliable', () => {
+    // Browsers frequently send octet-stream / empty for .pkpass uploads
+    expect(isWalletPass('application/octet-stream', 'boarding.pkpass')).toBe(true);
+    expect(isWalletPass(null, 'multi.pkpasses')).toBe(true);
+    expect(isWalletPass('', 'CAPS.PKPASS')).toBe(true);
+  });
+
+  it('falls back to the wallet MIME types when there is no extension', () => {
+    expect(isWalletPass('application/vnd.apple.pkpass', 'pass')).toBe(true);
+    expect(isWalletPass('application/vnd.apple.pkpasses', null)).toBe(true);
+  });
+
+  it('is false for non-wallet files', () => {
+    expect(isWalletPass('application/pdf', 'report.pdf')).toBe(false);
+    expect(isWalletPass('image/png', 'photo.png')).toBe(false);
+    expect(isWalletPass('text/markdown', 'notes.md')).toBe(false);
+    expect(isWalletPass(null, null)).toBe(false);
+  });
+});

client/src/components/Files/FileManager.helpers.ts

@@ -26,6 +26,18 @@ export function isMarkdown(mimeType?: string | null, name?: string | null) {
   return !!mimeType && (mimeType === 'text/markdown' || mimeType === 'text/x-markdown')
 }
 
+/**
+ * Apple Wallet pass (#1447). Detected by EXTENSION first — browsers often send an
+ * empty / octet-stream MIME for .pkpass — falling back to the wallet MIME types.
+ * Wallet passes must be downloaded so the OS hands them to Apple Wallet rather
+ * than rendered in the in-app PDF preview.
+ */
+export function isWalletPass(mimeType?: string | null, name?: string | null) {
+  const ext = (name || '').toLowerCase().split('.').pop()
+  if (ext === 'pkpass' || ext === 'pkpasses') return true
+  return !!mimeType && (mimeType === 'application/vnd.apple.pkpass' || mimeType === 'application/vnd.apple.pkpasses')
+}
+
 export function getFileIcon(mimeType?: string | null) {
   if (!mimeType) return File
   if (mimeType === 'application/pdf') return FileText

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

@@ -15,6 +15,15 @@ vi.mock('../../api/authUrl', () => ({
   getAuthUrl: vi.fn().mockResolvedValue('http://localhost/signed-url'),
 }));
 
+// Mock the blob download/open helpers so we can assert wallet passes are
+// downloaded (#1447) rather than opened in the in-app PDF preview.
+vi.mock('../../utils/fileDownload', () => ({
+  openFile: vi.fn().mockResolvedValue(undefined),
+  downloadFile: vi.fn().mockResolvedValue(undefined),
+}));
+
+import { openFile as openFileInTab } from '../../utils/fileDownload';
+
 // Markdown pipeline mocked to render its children verbatim (the unified/ESM
 // pipeline is heavy in jsdom) — we only assert the markdown text reaches the modal.
 vi.mock('react-markdown', () => ({
@@ -313,6 +322,21 @@ describe('FileManager', () => {
     });
   });
 
+  it('FE-COMP-FILEMANAGER-035: pkpass click downloads via blob helper, not the PDF preview (#1447)', async () => {
+    const files = [buildFile({ id: 1, mime_type: 'application/octet-stream', original_name: 'boarding.pkpass', url: '/uploads/trips/1/boarding.pkpass' })];
+    render(<FileManager {...defaultProps} files={files} />);
+    const user = userEvent.setup();
+
+    await user.click(screen.getByText('boarding.pkpass'));
+
+    // Blob helper is called with the file url + name — the OS hands it to Wallet
+    await waitFor(() => {
+      expect(openFileInTab).toHaveBeenCalledWith('/uploads/trips/1/boarding.pkpass', 'boarding.pkpass');
+    });
+    // No PDF preview modal — the filename appears only once (in the list row)
+    expect(screen.getAllByText('boarding.pkpass').length).toBe(1);
+  });
+
   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} />);

client/src/components/Files/FileManagerFilesView.tsx

@@ -1,12 +1,15 @@
+import { Fragment } from 'react'
 import { Upload, FileText, Star } from 'lucide-react'
 import type { FileManagerState } from './useFileManager'
 import { FileRow } from './FileManagerRow'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 
 export function FilesView(S: FileManagerState) {
   const {
     can, trip, getRootProps, getInputProps, isDragActive, uploading, t, allowedFileTypes,
     files, filterType, setFilterType, filteredFiles,
   } = S
+  const contribFor = usePluginViewContributions('files', S.tripId)
   return (
     <>
       {/* Upload zone */}
@@ -70,7 +73,15 @@ export function FilesView(S: FileManagerState) {
           </div>
         ) : (
           <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-            {filteredFiles.map(file => <FileRow key={file.id} {...S} file={file} />)}
+            {filteredFiles.map(file => {
+              const contributions = contribFor(file.id)
+              return (
+                <Fragment key={file.id}>
+                  <FileRow {...S} file={file} />
+                  {contributions.length > 0 && <div style={{ padding: '0 4px' }}><PluginCardFooter items={contributions} tripId={S.tripId} /></div>}
+                </Fragment>
+              )
+            })}
           </div>
         )}
       </div>

client/src/components/Files/useFileManager.ts

@@ -7,7 +7,8 @@ import type { Place, Reservation, TripFile, Day, AssignmentsMap } from '../../ty
 import { useCanDo } from '../../store/permissionsStore'
 import { useTripStore } from '../../store/tripStore'
 import { getAuthUrl } from '../../api/authUrl'
-import { isImage, isMedia } from './FileManager.helpers'
+import { isImage, isMedia, isWalletPass } from './FileManager.helpers'
+import { openFile as openFileInTab } from '../../utils/fileDownload'
 
 export interface FileManagerProps {
   files?: TripFile[]
@@ -191,6 +192,10 @@ export function useFileManager({ files = [], onUpload, onDelete, onUpdate, place
     if (isMedia(file.mime_type)) {
       const idx = mediaFiles.findIndex(f => f.id === file.id)
       setLightboxIndex(idx >= 0 ? idx : 0)
+    } else if (isWalletPass(file.mime_type, file.original_name)) {
+      // Download so the OS hands the pass to Apple Wallet (#1447) rather than
+      // forcing it into the in-app PDF preview.
+      openFileInTab(file.url, file.original_name).catch(() => {})
     } else {
       setPreviewFile(file)
     }

client/src/components/Journey/JourneyDetailPageEntryCard.tsx

@@ -1,8 +1,10 @@
-import { useState, useRef } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import { createPortal } from 'react-dom'
 import { MapPin, Clock, MoreHorizontal, Pencil, Trash2 } from 'lucide-react'
 import { formatLocationName } from '../../utils/formatters'
 import { useTranslation } from '../../i18n'
+import { pluginsApi } from '../../api/client'
+import { usePluginStore } from '../../store/pluginStore'
 import type { JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 import { MOOD_CONFIG, WEATHER_CONFIG } from '../../pages/journeyDetail/JourneyDetailPage.constants'
 import { photoUrl } from '../../pages/journeyDetail/JourneyDetailPage.helpers'
@@ -21,6 +23,19 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
   const { t } = useTranslation()
   const [menuOpen, setMenuOpen] = useState(false)
   const menuBtnRef = useRef<HTMLButtonElement>(null)
+  // Extra rows contributed by journalEntryProvider plugins — same pattern as the
+  // PlaceInspector provider details: fetched only when plugins are active at all,
+  // fail-safe (the server drops slow/failing providers), only ever additive.
+  const hasPlugins = usePluginStore((s) => s.plugins.length > 0)
+  const [providerRows, setProviderRows] = useState<Array<{ pluginId: string; items: Array<{ label: string; value?: string; url?: string }> }>>([])
+  useEffect(() => {
+    if (!hasPlugins) { setProviderRows([]); return }
+    let cancelled = false
+    pluginsApi.journalEntryRows(entry.id)
+      .then((d) => { if (!cancelled) setProviderRows((d.providers || []).filter((p) => Array.isArray(p.items) && p.items.length > 0)) })
+      .catch(() => { if (!cancelled) setProviderRows([]) })
+    return () => { cancelled = true }
+  }, [entry.id, hasPlugins])
   const photos = entry.photos || []
   const mood = entry.mood ? MOOD_CONFIG[entry.mood] : null
   const weather = entry.weather ? WEATHER_CONFIG[entry.weather] : null
@@ -146,6 +161,20 @@ export function EntryCard({ entry, readOnly, onEdit, onDelete, onPhotoClick }: {
             </div>
           </div>
         )}
+
+        {/* Plugin provider rows — host-vetted label/value/url, plain text only */}
+        {providerRows.length > 0 && (
+          <div className="pt-3 mt-3 border-t border-zinc-100 dark:border-zinc-800 space-y-1.5">
+            {providerRows.flatMap((p) => p.items.map((it, i) => (
+              <div key={`${p.pluginId}-${i}`} className="flex items-baseline justify-between gap-2 text-[12px]">
+                <span className="font-medium text-zinc-500 dark:text-zinc-400 flex-shrink-0">{it.label}</span>
+                {it.url
+                  ? <a href={it.url} target="_blank" rel="noreferrer noopener" className="text-indigo-600 dark:text-indigo-400 truncate text-right">{it.value ?? it.url}</a>
+                  : <span className="text-zinc-600 dark:text-zinc-300 truncate text-right">{it.value}</span>}
+              </div>
+            )))}
+          </div>
+        )}
       </div>
     </div>
   )

client/src/components/Journey/JourneyMapGL.tsx

@@ -362,6 +362,9 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
       antialias: mapboxQuality,
     }
     if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
+    // MapLibre 5's around-center mouse rotate ping-pongs near mid-screen (#1545)
+    // — see MapViewGL. Keep the plain dx-based rotate everywhere.
+    if (isMapLibre) mapOptions.aroundCenter = false
 
     const map = new gl.Map(mapOptions as any)
     mapRef.current = map

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

@@ -21,6 +21,7 @@ import userEvent from '@testing-library/user-event';
 import { useAuthStore } from '../../store/authStore';
 import { useSettingsStore } from '../../store/settingsStore';
 import { useAddonStore } from '../../store/addonStore';
+import { usePluginStore } from '../../store/pluginStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser, buildSettings } from '../../../tests/helpers/factories';
 import BottomNav from './BottomNav';
@@ -113,4 +114,21 @@ describe('BottomNav', () => {
     await user.click(screen.getByRole('button', { name: 'Add expense' }));
     expect(mockNavigate).toHaveBeenCalledWith('/trips/42?create=expense');
   });
+
+  it('FE-COMP-BOTTOMNAV-011: page plugin renders the icon its manifest declares', () => {
+    seedStore(usePluginStore, {
+      plugins: [{ id: 'trip-doctor', name: 'Trip Doctor', type: 'page', icon: 'Stethoscope' }],
+    });
+    const { container } = render(<BottomNav />);
+    expect(screen.getByText('Trip Doctor')).toBeInTheDocument();
+    expect(container.querySelector('.lucide-stethoscope')).not.toBeNull();
+  });
+
+  it('FE-COMP-BOTTOMNAV-012: page plugin with an unknown icon falls back to Blocks', () => {
+    seedStore(usePluginStore, {
+      plugins: [{ id: 'bogus', name: 'Bogus', type: 'page', icon: 'NotAnIcon' }],
+    });
+    const { container } = render(<BottomNav />);
+    expect(container.querySelector('.lucide-blocks')).not.toBeNull();
+  });
 });

client/src/components/Layout/BottomNav.tsx

@@ -1,9 +1,11 @@
 import { useNavigate, useLocation, useMatch } from 'react-router-dom'
 import { useAddonStore } from '../../store/addonStore'
+import { usePluginStore } from '../../store/pluginStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
 import { LayoutGrid, CalendarDays, Globe, Compass, Bookmark, Plus } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
+import { resolvePluginIcon } from '../shared/PluginIcon'
 
 const ADDON_NAV: Record<string, { icon: LucideIcon; labelKey: string }> = {
   vacay:       { icon: CalendarDays, labelKey: 'admin.addons.catalog.vacay.name' },
@@ -52,6 +54,9 @@ export default function BottomNav() {
   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)
+  // Page plugins are reachable from the mobile tab bar too, mirroring the desktop
+  // nav pill (Navbar) — otherwise they were only reachable by typing /plugins/:id.
+  const pagePlugins = usePluginStore(s => s.plugins).filter(p => p.type === 'page')
   const location = useLocation()
   const create = useCreateAction()
 
@@ -61,6 +66,7 @@ export default function BottomNav() {
       const nav = ADDON_NAV[addon.id]
       return nav ? [{ to: `/${addon.id}`, label: t(nav.labelKey), icon: nav.icon }] : []
     }),
+    ...pagePlugins.map(p => ({ to: `/plugins/${p.id}`, label: p.name, icon: resolvePluginIcon(p.icon) })),
   ]
   // Split the items so the raised "+" sits dead centre.
   const splitAt = Math.ceil(items.length / 2)

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

@@ -1,6 +1,6 @@
-import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
-import userEvent from '@testing-library/user-event';
 import { act, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '../../../tests/helpers/render';
 import DemoBanner from './DemoBanner';
 
@@ -94,7 +94,7 @@ describe('DemoBanner', () => {
   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('href', 'https://github.com/liketrek/TREK');
     expect(link).toHaveAttribute('target', '_blank');
   });
 

client/src/components/Layout/DemoBanner.tsx

@@ -1,24 +1,40 @@
-import React, { useState, useEffect } from 'react'
-import { Info, Github, Shield, Key, Users, Database, Upload, Clock, Puzzle, CalendarDays, Globe, ArrowRightLeft, Map, Briefcase, ListChecks, Wallet, FileText, Plane } from 'lucide-react'
-import { useTranslation } from '../../i18n'
+import {
+  ArrowRightLeft,
+  CalendarDays,
+  Clock,
+  Database,
+  FileText,
+  Github,
+  Globe,
+  Key,
+  ListChecks,
+  Map,
+  Puzzle,
+  Shield,
+  Upload,
+  Users,
+  Wallet,
+} from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from '../../i18n';
 
 interface DemoTexts {
-  titleBefore: string
-  titleAfter: string
-  title: string
-  description: string
-  resetIn: string
-  minutes: string
-  uploadNote: string
-  fullVersionTitle: string
-  features: string[]
-  addonsTitle: string
-  addons: [string, string][]
-  whatIs: string
-  whatIsDesc: string
-  selfHost: string
-  selfHostLink: string
-  close: string
+  titleBefore: string;
+  titleAfter: string;
+  title: string;
+  description: string;
+  resetIn: string;
+  minutes: string;
+  uploadNote: string;
+  fullVersionTitle: string;
+  features: string[];
+  addonsTitle: string;
+  addons: [string, string][];
+  whatIs: string;
+  whatIsDesc: string;
+  selfHost: string;
+  selfHostLink: string;
+  close: string;
 }
 
 const texts: Record<string, DemoTexts> = {
@@ -26,7 +42,8 @@ const texts: Record<string, DemoTexts> = {
     titleBefore: 'Willkommen bei ',
     titleAfter: '',
     title: 'Willkommen zur TREK Demo',
-    description: 'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
+    description:
+      'Du kannst Reisen ansehen, bearbeiten und eigene erstellen. Alle Aenderungen werden jede Stunde automatisch zurueckgesetzt.',
     resetIn: 'Naechster Reset in',
     minutes: 'Minuten',
     uploadNote: 'Datei-Uploads (Fotos, Dokumente, Cover) sind in der Demo deaktiviert.',
@@ -49,7 +66,8 @@ const texts: Record<string, DemoTexts> = {
       ['Widgets', 'Waehrungsrechner & Zeitzonen'],
     ],
     whatIs: 'Was ist TREK?',
-    whatIsDesc: 'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
+    whatIsDesc:
+      'Ein selbst-gehosteter Reiseplaner mit Echtzeit-Kollaboration, interaktiver Karte, OIDC Login und Dark Mode.',
     selfHost: 'Open Source — ',
     selfHostLink: 'selbst hosten',
     close: 'Verstanden',
@@ -81,7 +99,8 @@ const texts: Record<string, DemoTexts> = {
       ['Widgets', 'Currency converter & timezones'],
     ],
     whatIs: 'What is TREK?',
-    whatIsDesc: 'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
+    whatIsDesc:
+      'A self-hosted travel planner with real-time collaboration, interactive maps, OIDC login and dark mode.',
     selfHost: 'Open source — ',
     selfHostLink: 'self-host it',
     close: 'Got it',
@@ -113,7 +132,8 @@ const texts: Record<string, DemoTexts> = {
       ['Widgets', 'Conversor de divisas y zonas horarias'],
     ],
     whatIs: '¿Qué es TREK?',
-    whatIsDesc: 'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
+    whatIsDesc:
+      'Un planificador de viajes autohospedado con colaboración en tiempo real, mapas interactivos, inicio de sesión OIDC y modo oscuro.',
     selfHost: 'Código abierto — ',
     selfHostLink: 'alójalo tú mismo',
     close: 'Entendido',
@@ -218,7 +238,8 @@ const texts: Record<string, DemoTexts> = {
     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.',
+    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.',
@@ -241,159 +262,309 @@ const texts: Record<string, DemoTexts> = {
       ['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.',
+    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]
-const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft]
+const featureIcons = [Upload, Key, Users, Database, Puzzle, Shield];
+const addonIcons = [CalendarDays, Globe, ListChecks, Wallet, FileText, ArrowRightLeft];
 
 export default function DemoBanner(): React.ReactElement | null {
-  const [dismissed, setDismissed] = useState<boolean>(false)
-  const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes())
-  const { language } = useTranslation()
-  const t = texts[language] || texts.en
+  const [dismissed, setDismissed] = useState<boolean>(false);
+  const [minutesLeft, setMinutesLeft] = useState<number>(59 - new Date().getMinutes());
+  const { language } = useTranslation();
+  const t = texts[language] || texts.en;
 
   useEffect(() => {
-    const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000)
-    return () => clearInterval(interval)
-  }, [])
+    const interval = setInterval(() => setMinutesLeft(59 - new Date().getMinutes()), 10000);
+    return () => clearInterval(interval);
+  }, []);
 
-  if (dismissed) return null
+  if (dismissed) return null;
 
   return (
-    <div style={{
-      position: 'fixed', inset: 0, zIndex: 99999,
-      background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)',
-      display: 'flex', alignItems: 'center', justifyContent: 'center',
-      paddingTop: 'max(16px, env(safe-area-inset-top))',
-      paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
-      paddingLeft: 16, paddingRight: 16,
-      overflow: 'auto',
-      fontFamily: "var(--font-system)",
-    }} onClick={() => setDismissed(true)}>
-      <div style={{
-        background: 'white', borderRadius: 20, padding: '28px 24px 0',
-        maxWidth: 480, width: '100%',
-        boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
-        maxHeight: 'min(90vh, calc(100dvh - 96px))',
+    <div
+      style={{
+        position: 'fixed',
+        inset: 0,
+        zIndex: 99999,
+        background: 'rgba(0,0,0,0.6)',
+        backdropFilter: 'blur(8px)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingTop: 'max(16px, env(safe-area-inset-top))',
+        paddingBottom: 'max(16px, calc(env(safe-area-inset-bottom) + 80px))',
+        paddingLeft: 16,
+        paddingRight: 16,
         overflow: 'auto',
-        display: 'flex', flexDirection: 'column',
-      }} onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}>
-
+        fontFamily: 'var(--font-system)',
+      }}
+      onClick={() => setDismissed(true)}
+    >
+      <div
+        style={{
+          background: 'white',
+          borderRadius: 20,
+          padding: '28px 24px 0',
+          maxWidth: 480,
+          width: '100%',
+          boxShadow: '0 20px 60px rgba(0,0,0,0.3)',
+          maxHeight: 'min(90vh, calc(100dvh - 96px))',
+          overflow: 'auto',
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+        onClick={(e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation()}
+      >
         {/* Header */}
         <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
           <img src="/icons/icon-dark.svg" alt="" style={{ width: 36, height: 36, borderRadius: 10 }} />
-          <h2 style={{ margin: 0, fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))', fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 5 }}>
-            {t.titleBefore}<img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />{t.titleAfter}
+          <h2
+            style={{
+              margin: 0,
+              fontSize: 'calc(17px * var(--fs-scale-subtitle, 1))',
+              fontWeight: 700,
+              color: '#111827',
+              display: 'flex',
+              alignItems: 'center',
+              gap: 5,
+            }}
+          >
+            {t.titleBefore}
+            <img src="/text-dark.svg" alt="TREK" style={{ height: 18 }} />
+            {t.titleAfter}
           </h2>
         </div>
 
-        <p style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', color: '#6b7280', lineHeight: 1.6, margin: '0 0 12px' }}>
+        <p
+          style={{
+            fontSize: 'calc(13px * var(--fs-scale-body, 1))',
+            color: '#6b7280',
+            lineHeight: 1.6,
+            margin: '0 0 12px',
+          }}
+        >
           {t.description}
         </p>
 
         {/* Timer + Upload note */}
         <div style={{ display: 'flex', gap: 8, marginBottom: 16 }}>
-          <div style={{
-            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
-            background: '#f0f9ff', border: '1px solid #bae6fd', borderRadius: 10, padding: '8px 10px',
-          }}>
+          <div
+            style={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              background: '#f0f9ff',
+              border: '1px solid #bae6fd',
+              borderRadius: 10,
+              padding: '8px 10px',
+            }}
+          >
             <Clock size={13} style={{ flexShrink: 0, color: '#0284c7' }} />
             <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#0369a1', fontWeight: 600 }}>
               {t.resetIn} {minutesLeft} {t.minutes}
             </span>
           </div>
-          <div style={{
-            flex: 1, display: 'flex', alignItems: 'center', gap: 6,
-            background: '#fffbeb', border: '1px solid #fde68a', borderRadius: 10, padding: '8px 10px',
-          }}>
+          <div
+            style={{
+              flex: 1,
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              background: '#fffbeb',
+              border: '1px solid #fde68a',
+              borderRadius: 10,
+              padding: '8px 10px',
+            }}
+          >
             <Upload size={13} style={{ flexShrink: 0, color: '#b45309' }} />
-            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b45309' }}>{t.uploadNote}</span>
+            <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#b45309' }}>
+              {t.uploadNote}
+            </span>
           </div>
         </div>
 
         {/* What is TREK */}
-        <div style={{
-          background: '#f8fafc', borderRadius: 12, padding: '12px 14px', marginBottom: 16,
-          border: '1px solid #e2e8f0',
-        }}>
+        <div
+          style={{
+            background: '#f8fafc',
+            borderRadius: 12,
+            padding: '12px 14px',
+            marginBottom: 16,
+            border: '1px solid #e2e8f0',
+          }}
+        >
           <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
             <Map size={14} style={{ color: '#111827' }} />
-            <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: '#111827', display: 'flex', alignItems: 'center', gap: 4 }}>
+            <span
+              style={{
+                fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+                fontWeight: 700,
+                color: '#111827',
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+              }}
+            >
               {t.whatIs}
             </span>
           </div>
-          <p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: '#64748b', lineHeight: 1.5, margin: 0 }}>{t.whatIsDesc}</p>
+          <p style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: '#64748b', lineHeight: 1.5, margin: 0 }}>
+            {t.whatIsDesc}
+          </p>
         </div>
 
         {/* Addons */}
-        <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
+        <p
+          style={{
+            fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
+            fontWeight: 700,
+            color: '#374151',
+            margin: '0 0 8px',
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
           <Puzzle size={12} />
           {t.addonsTitle}
         </p>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
           {t.addons.map(([name, desc], i) => {
-            const Icon = addonIcons[i]
+            const Icon = addonIcons[i];
             return (
-              <div key={name} style={{
-                background: '#f8fafc', borderRadius: 10, padding: '8px 10px',
-                border: '1px solid #f1f5f9',
-              }}>
+              <div
+                key={name}
+                style={{
+                  background: '#f8fafc',
+                  borderRadius: 10,
+                  padding: '8px 10px',
+                  border: '1px solid #f1f5f9',
+                }}
+              >
                 <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 2 }}>
                   <Icon size={12} style={{ flexShrink: 0, color: '#111827' }} />
-                  <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#111827' }}>{name}</span>
+                  <span
+                    style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#111827' }}
+                  >
+                    {name}
+                  </span>
                 </div>
-                <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: '#94a3b8', margin: 0, lineHeight: 1.3, paddingLeft: 18 }}>{desc}</p>
+                <p
+                  style={{
+                    fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
+                    color: '#94a3b8',
+                    margin: 0,
+                    lineHeight: 1.3,
+                    paddingLeft: 18,
+                  }}
+                >
+                  {desc}
+                </p>
               </div>
-            )
+            );
           })}
         </div>
 
         {/* Full version features */}
-        <p style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 700, color: '#374151', margin: '0 0 8px', textTransform: 'uppercase', letterSpacing: '0.08em', display: 'flex', alignItems: 'center', gap: 6 }}>
+        <p
+          style={{
+            fontSize: 'calc(10px * var(--fs-scale-caption, 1))',
+            fontWeight: 700,
+            color: '#374151',
+            margin: '0 0 8px',
+            textTransform: 'uppercase',
+            letterSpacing: '0.08em',
+            display: 'flex',
+            alignItems: 'center',
+            gap: 6,
+          }}
+        >
           <Shield size={12} />
           {t.fullVersionTitle}
         </p>
         <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, marginBottom: 16 }}>
           {t.features.map((text, i) => {
-            const Icon = featureIcons[i]
+            const Icon = featureIcons[i];
             return (
-              <div key={text} style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#4b5563', padding: '4px 0' }}>
+              <div
+                key={text}
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: 8,
+                  fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
+                  color: '#4b5563',
+                  padding: '4px 0',
+                }}
+              >
                 <Icon size={13} style={{ flexShrink: 0, color: '#9ca3af' }} />
                 <span>{text}</span>
               </div>
-            )
+            );
           })}
         </div>
 
         {/* Footer */}
-        <div style={{
-          padding: '14px 0 20px', borderTop: '1px solid #e5e7eb',
-          display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-          position: 'sticky', bottom: 0, background: 'white',
-          marginTop: 'auto',
-        }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 'calc(11px * var(--fs-scale-caption, 1))', color: '#9ca3af' }}>
+        <div
+          style={{
+            padding: '14px 0 20px',
+            borderTop: '1px solid #e5e7eb',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            position: 'sticky',
+            bottom: 0,
+            background: 'white',
+            marginTop: 'auto',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 6,
+              fontSize: 'calc(11px * var(--fs-scale-caption, 1))',
+              color: '#9ca3af',
+            }}
+          >
             <Github size={13} />
             <span>{t.selfHost}</span>
-            <a href="https://github.com/mauriceboe/TREK" target="_blank" rel="noopener noreferrer"
-              style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}>
+            <a
+              href="https://github.com/liketrek/TREK"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ color: '#111827', fontWeight: 600, textDecoration: 'none' }}
+            >
               {t.selfHostLink}
             </a>
           </div>
-          <button onClick={() => setDismissed(true)} style={{
-            background: '#111827', color: 'white', border: 'none',
-            borderRadius: 10, padding: '8px 20px', fontSize: 'calc(12px * var(--fs-scale-body, 1))',
-            fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit',
-          }}>
+          <button
+            onClick={() => setDismissed(true)}
+            style={{
+              background: '#111827',
+              color: 'white',
+              border: 'none',
+              borderRadius: 10,
+              padding: '8px 20px',
+              fontSize: 'calc(12px * var(--fs-scale-body, 1))',
+              fontWeight: 600,
+              cursor: 'pointer',
+              fontFamily: 'inherit',
+            }}
+          >
             {t.close}
           </button>
         </div>
       </div>
     </div>
-  )
+  );
 }

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

@@ -6,6 +6,7 @@ import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useSettingsStore } from '../../store/settingsStore';
 import { useAddonStore } from '../../store/addonStore';
+import { usePluginStore } from '../../store/pluginStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
 import { buildUser, buildSettings } from '../../../tests/helpers/factories';
 import Navbar from './Navbar';
@@ -304,4 +305,21 @@ describe('Navbar', () => {
     await user.click(screen.getByText('adminuser'));
     expect(screen.getByText('Administrator')).toBeInTheDocument();
   });
+
+  it('FE-COMP-NAVBAR-034: page plugin renders the icon its manifest declares', () => {
+    seedStore(usePluginStore, {
+      plugins: [{ id: 'trip-doctor', name: 'Trip Doctor', type: 'page', icon: 'Stethoscope' }],
+    });
+    const { container } = render(<Navbar />);
+    expect(screen.getByRole('link', { name: /trip doctor/i })).toBeInTheDocument();
+    expect(container.querySelector('.lucide-stethoscope')).not.toBeNull();
+  });
+
+  it('FE-COMP-NAVBAR-035: page plugin with an unknown icon falls back to Blocks', () => {
+    seedStore(usePluginStore, {
+      plugins: [{ id: 'bogus', name: 'Bogus', type: 'page', icon: 'NotAnIcon' }],
+    });
+    const { container } = render(<Navbar />);
+    expect(container.querySelector('.lucide-blocks')).not.toBeNull();
+  });
 });

client/src/components/Layout/Navbar.tsx

@@ -6,9 +6,10 @@ import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { usePluginStore } from '../../store/pluginStore'
 import { useTranslation } from '../../i18n'
-import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen, Bookmark, Blocks } from 'lucide-react'
+import { Plane, LogOut, Settings, ChevronDown, Shield, ArrowLeft, Users, Moon, Sun, Monitor, CalendarDays, Briefcase, Globe, Compass, BookOpen, Bookmark } from 'lucide-react'
 import type { LucideIcon } from 'lucide-react'
 import InAppNotificationBell from './InAppNotificationBell.tsx'
+import { resolvePluginIcon } from '../shared/PluginIcon'
 
 const ADDON_ICONS: Record<string, LucideIcon> = { CalendarDays, Briefcase, Globe, Compass, Bookmark }
 
@@ -150,7 +151,7 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         >
           {[{ id: '__trips', path: '/dashboard', label: t('nav.myTrips'), Icon: Briefcase },
             ...globalAddons.map(a => ({ id: a.id, path: `/${a.id}`, label: getAddonName(a), Icon: ADDON_ICONS[a.icon] || CalendarDays })),
-            ...pagePlugins.map(p => ({ id: `plugin:${p.id}`, path: `/plugins/${p.id}`, label: p.name, Icon: Blocks }))
+            ...pagePlugins.map(p => ({ id: `plugin:${p.id}`, path: `/plugins/${p.id}`, label: p.name, Icon: resolvePluginIcon(p.icon) }))
           ].map(tab => {
             const isActive = location.pathname === tab.path
             return (
@@ -172,6 +173,21 @@ export default function Navbar({ tripTitle, tripId, onBack, showBack, onShare }:
         </div>
       )}
 
+      {/* Centre slot for page-scoped notices (plugin trip warnings portal into it).
+          Only mounted on trip pages, where the tab pill above is absent, so the two
+          never fight over the centre. Zero-size while empty; pointer events stay off
+          on the wrapper so an empty slot can't swallow clicks. */}
+      {tripTitle && (
+        <div
+          id="trek-nav-center-slot"
+          style={{
+            position: 'absolute', left: '50%', top: '50%', transform: 'translate(-50%, -50%)',
+            display: 'flex', alignItems: 'center', gap: 6, maxWidth: '42%',
+            overflow: 'hidden', pointerEvents: 'none',
+          }}
+        />
+      )}
+
       {/* Spacer */}
       <div className="flex-1" />
 

client/src/components/Map/MapPluginMarkers.tsx

@@ -0,0 +1,75 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Marker, Popup } from 'react-leaflet'
+import L from 'leaflet'
+import { pluginsApi, type PluginMapMarker } from '../../api/client'
+
+/**
+ * Host-rendered overlay for the `mapMarkerProvider` plugin hook (#587). A plugin
+ * returns bounded marker specs (coordinates + plain text + an allowlisted url); the
+ * server range-checks + normalizes them, and this layer draws them as plain Leaflet
+ * markers. Plugin JS NEVER runs on the map canvas — every value here is host-vetted
+ * data, and the popup renders it as text (the url is already http/https/mailto-only).
+ *
+ * Mounted inside the trip map's <MapContainer>; fail-safe — a fetch error just yields
+ * no extra markers, the core map is untouched.
+ */
+const TONE_COLORS: Record<PluginMapMarker['tone'], string> = {
+  default: '#4F46E5',
+  success: '#10b981',
+  warn: '#f59e0b',
+  danger: '#ef4444',
+}
+
+function markerIcon(tone: PluginMapMarker['tone']): L.DivIcon {
+  const color = TONE_COLORS[tone] ?? TONE_COLORS.default
+  return L.divIcon({
+    className: 'plugin-map-marker',
+    html: `<span style="display:block;width:16px;height:16px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,0.4)"></span>`,
+    iconSize: [16, 16],
+    iconAnchor: [8, 8],
+    popupAnchor: [0, -8],
+  })
+}
+
+export function PluginMapMarkers({ tripId }: { tripId?: number | string }) {
+  const [markers, setMarkers] = useState<PluginMapMarker[]>([])
+
+  useEffect(() => {
+    if (tripId == null) { setMarkers([]); return }
+    let alive = true
+    pluginsApi.mapMarkers(tripId)
+      .then(r => { if (alive) setMarkers(r.markers || []) })
+      .catch(() => { if (alive) setMarkers([]) }) // fail-safe: no extra markers
+    return () => { alive = false }
+  }, [tripId])
+
+  const icons = useMemo(() => {
+    const m = new Map<PluginMapMarker['tone'], L.DivIcon>()
+    for (const tone of ['default', 'success', 'warn', 'danger'] as const) m.set(tone, markerIcon(tone))
+    return m
+  }, [])
+
+  if (markers.length === 0) return null
+
+  return (
+    <>
+      {markers.map(mk => (
+        <Marker key={`${mk.pluginId}:${mk.id}`} position={[mk.lat, mk.lng]} icon={icons.get(mk.tone)!}>
+          {(mk.label || mk.popupText || mk.url) && (
+            <Popup>
+              <div style={{ minWidth: 120, fontSize: 13 }}>
+                {mk.label && <div style={{ fontWeight: 600, marginBottom: mk.popupText ? 4 : 0 }}>{mk.label}</div>}
+                {mk.popupText && <div style={{ color: '#4b5563' }}>{mk.popupText}</div>}
+                {mk.url && (
+                  <a href={mk.url} target="_blank" rel="noreferrer noopener" style={{ display: 'inline-block', marginTop: 6, color: TONE_COLORS.default }}>
+                    {mk.url}
+                  </a>
+                )}
+              </div>
+            </Popup>
+          )}
+        </Marker>
+      ))}
+    </>
+  )
+}

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

@@ -4,7 +4,7 @@ import { render, screen } from '../../../tests/helpers/render'
 import { fireEvent, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { resetAllStores } from '../../../tests/helpers/store'
-import { buildPlace } from '../../../tests/helpers/factories'
+import { buildPlace, buildReservation } from '../../../tests/helpers/factories'
 import * as photoService from '../../services/photoService'
 
 const mapMock = vi.hoisted(() => ({
@@ -15,10 +15,14 @@ const mapMock = vi.hoisted(() => ({
   on: vi.fn(),
   off: vi.fn(),
   panBy: vi.fn(),
+  latLngToContainerPoint: vi.fn(() => ({ x: 0, y: 0, distanceTo: () => 1000 })),
 }))
 
 vi.mock('react-leaflet', () => ({
-  MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
+  // center/zoom are surfaced so tests can assert the camera the map is built with.
+  MapContainer: ({ children, center, zoom }: any) => (
+    <div data-testid="map-container" data-center={JSON.stringify(center)} data-zoom={zoom}>{children}</div>
+  ),
   TileLayer: () => <div data-testid="tile-layer" />,
   Marker: ({ children, eventHandlers, position }: any) => (
     <div
@@ -39,6 +43,7 @@ vi.mock('react-leaflet', () => ({
   Polyline: ({ positions }: any) => <div data-testid="polyline" data-points={JSON.stringify(positions)} />,
   CircleMarker: () => <div data-testid="circle-marker" />,
   Circle: () => <div data-testid="circle" />,
+  Tooltip: ({ children }: any) => <>{children}</>,
   useMap: () => mapMock,
   useMapEvents: () => ({}),
 }))
@@ -291,15 +296,85 @@ describe('MapView', () => {
       buildMapPlace({ id: 1, lat: 48.0, lng: 2.0 }),
       buildMapPlace({ id: 2, lat: 48.1, lng: 2.1 }),
     ]
-    // Day selected, route not computed yet → first fit is the two destinations.
+    // The map opens already framed on its places, so nothing fits on mount.
     const { rerender } = render(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[]} fitKey={5} />)
     const lastBounds = () => { const c = L.latLngBounds.mock.calls; return c[c.length - 1][0] }
+
+    // Day selected, route not computed yet → first fit is the two destinations.
+    L.latLngBounds.mockClear()
+    rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[]} fitKey={6} />)
     expect(lastBounds()).toHaveLength(2)
 
     // The day's route arrives → one-shot re-fit including the 3 route points.
     L.latLngBounds.mockClear()
-    rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[[[47.9, 1.9], [48.05, 2.05], [48.2, 2.2]]]} fitKey={5} />)
+    rerender(<MapView places={dayPlaces} dayPlaces={dayPlaces} route={[[[47.9, 1.9], [48.05, 2.05], [48.2, 2.2]]]} fitKey={6} />)
     expect(L.latLngBounds).toHaveBeenCalled()
     expect(lastBounds()).toHaveLength(5) // 2 destinations + 3 route points
   })
+
+  describe('opening camera', () => {
+    const camera = () => {
+      const el = screen.getByTestId('map-container')
+      return {
+        center: JSON.parse(el.getAttribute('data-center')!) as [number, number],
+        zoom: Number(el.getAttribute('data-zoom')),
+      }
+    }
+
+    it('FE-COMP-MAPVIEW-021: builds the map framed on the places', () => {
+      render(<MapView places={[
+        buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 }),  // Kyoto
+        buildMapPlace({ id: 2, lat: 34.69, lng: 135.5 }),   // Osaka
+      ]} />)
+
+      const { center, zoom } = camera()
+      expect(center[0]).toBeCloseTo(34.85, 1)
+      expect(center[1]).toBeCloseTo(135.63, 1)
+      expect(zoom).toBeGreaterThan(7)
+      expect(zoom).toBeLessThan(13)
+    })
+
+    it('FE-COMP-MAPVIEW-022: does not fit on mount when it opened already framed', async () => {
+      const L = ((await import('leaflet')).default) as unknown as { latLngBounds: ReturnType<typeof vi.fn> }
+      L.latLngBounds.mockClear()
+
+      render(<MapView places={[buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 })]} fitKey={1} />)
+
+      expect(L.latLngBounds).not.toHaveBeenCalled()
+    })
+
+    it('FE-COMP-MAPVIEW-023: falls back to the world view when no place has coordinates', () => {
+      render(<MapView places={[buildMapPlace({ id: 1, lat: null, lng: null })]} />)
+
+      const { center, zoom } = camera()
+      expect(center).toEqual([0, 0])
+      expect(zoom).toBe(2)
+    })
+  })
+
+  it('FE-COMP-MAPVIEW-023: a routable reservation not in visibleConnectionIds draws no route', () => {
+    const reservation = buildReservation({
+      id: 43,
+      type: 'flight',
+      endpoints: [
+        { role: 'from', sequence: 0, name: 'A', code: 'AAA', lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
+        { role: 'to', sequence: 1, name: 'B', code: 'BBB', lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
+      ],
+    } as any)
+    render(<MapView reservations={[reservation]} visibleConnectionIds={[]} />)
+    expect(screen.queryByTestId('polyline')).not.toBeInTheDocument()
+  })
+
+  it('FE-COMP-MAPVIEW-024: a routable reservation in visibleConnectionIds draws its route', () => {
+    const reservation = buildReservation({
+      id: 42,
+      type: 'flight',
+      endpoints: [
+        { role: 'from', sequence: 0, name: 'A', code: 'AAA', lat: 1, lng: 2, timezone: null, local_time: null, local_date: null },
+        { role: 'to', sequence: 1, name: 'B', code: 'BBB', lat: 3, lng: 4, timezone: null, local_time: null, local_date: null },
+      ],
+    } as any)
+    render(<MapView reservations={[reservation]} visibleConnectionIds={[42]} />)
+    expect(screen.getAllByTestId('polyline').length).toBeGreaterThan(0)
+  })
 })

client/src/components/Map/MapView.tsx

@@ -9,9 +9,13 @@ import 'leaflet.markercluster/dist/MarkerCluster.Default.css'
 import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
+import { PluginMapMarkers } from './MapPluginMarkers'
 import { useTransportRoutes } from '../../hooks/useTransportRoutes'
+import { visibleRouteReservations } from '../../utils/reservationRoutes'
 import type { Reservation } from '../../types'
 import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
+import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
+import { computeMapViewport, TILE_SIZE_RASTER, type ViewportPadding } from '../../utils/mapViewport'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -240,12 +244,15 @@ interface BoundsControllerProps {
   routeCoords: [number, number][]
   fitKey: number
   paddingOpts: L.FitBoundsOptions
+  /** The map was built already framed on these places, so the opening fit has nothing to do. */
+  framedOnMount?: boolean
 }
 
-function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDetail }: BoundsControllerProps) {
+function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDetail, framedOnMount = false }: BoundsControllerProps) {
   const map = useMap()
   const prevFitKey = useRef(-1)
   const awaitingRoute = useRef(false)
+  const fitRan = useRef(false)
 
   const fitTo = useCallback((coords: [number, number][]) => {
     if (coords.length === 0) return
@@ -267,6 +274,14 @@ function BoundsController({ places, routeCoords, fitKey, paddingOpts, hasDayDeta
     prevFitKey.current = fitKey
     awaitingRoute.current = false
     if (places.length === 0) return
+    // The map opened framed on these very places — re-fitting would only re-do that, and its
+    // maxZoom would overrule the gentler zoom a single place opens at. Later fits (picking a
+    // day) still run.
+    if (!fitRan.current && framedOnMount) {
+      fitRan.current = true
+      return
+    }
+    fitRan.current = true
     fitTo(places.map(p => [p.lat, p.lng] as [number, number]))
     awaitingRoute.current = true
   }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
@@ -434,8 +449,8 @@ export const MapView = memo(function MapView({
   onMarkerClick,
   onMapClick,
   onMapContextMenu = null,
-  center = [48.8566, 2.3522],
-  zoom = 10,
+  center = DEFAULT_MAP_CENTER,
+  zoom = DEFAULT_MAP_ZOOM,
   tileUrl = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
   fitKey = 0,
   dayOrderMap = {},
@@ -451,6 +466,7 @@ export const MapView = memo(function MapView({
   pois = [] as Poi[],
   onPoiClick,
   onViewportChange,
+  tripId,
 }: any) {
   const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
     <Marker
@@ -463,25 +479,43 @@ export const MapView = memo(function MapView({
       <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
     </Marker>
   )), [pois, onPoiClick])
-  const visibleReservations = useMemo(() => {
-    const set = new Set(visibleConnectionIds || [])
-    // Transit journeys ride the route toggle — they are part of the computed
-    // day route, so hiding the route hides them too (#1065).
-    return reservations.filter((r: Reservation) => (r.type === 'transit' && showTransitRoutes) || set.has(r.id))
-  }, [reservations, visibleConnectionIds, showTransitRoutes])
+  const visibleReservations = useMemo(() => (
+    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes })
+  ), [reservations, visibleConnectionIds, showTransitRoutes])
   // Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
   const transportRoutes = useTransportRoutes(visibleReservations)
   // Dynamic padding: account for sidebars + bottom inspector + day detail panel
-  const paddingOpts = useMemo((): L.FitBoundsOptions => {
+  // The chrome overlaying the map (side panels, day detail). Kept as a plain box so both the
+  // Leaflet fit options and the opening-camera maths can read the same numbers.
+  const paddingBox = useMemo((): ViewportPadding => {
     const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
-    if (isMobile) return { padding: [40, 20] }
-    const top = 60
-    const bottom = hasInspector ? 320 : hasDayDetail ? 280 : 60
-    const left = leftWidth + 40
-    const right = rightWidth + 40
-    return { paddingTopLeft: [left, top], paddingBottomRight: [right, bottom] }
+    if (isMobile) return { top: 20, right: 40, bottom: 20, left: 40 }
+    return {
+      top: 60,
+      right: rightWidth + 40,
+      bottom: hasInspector ? 320 : hasDayDetail ? 280 : 60,
+      left: leftWidth + 40,
+    }
   }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
+  const paddingOpts = useMemo((): L.FitBoundsOptions => ({
+    paddingTopLeft: [paddingBox.left, paddingBox.top],
+    paddingBottomRight: [paddingBox.right, paddingBox.bottom],
+  }), [paddingBox])
+
+  // Open framed on the places rather than on the caller's default, so a trip in Japan shows
+  // Japan straight away instead of the world view followed by a flight across the planet.
+  // The initializer runs once, at mount — exactly when this should be decided; afterwards the
+  // camera belongs to the user. `framed` is false when no place has coordinates (a new trip),
+  // and then the caller's center/zoom stands.
+  const [initialView] = useState(() => {
+    const framed = computeMapViewport(dayPlaces.length > 0 ? dayPlaces : places, {
+      tileSize: TILE_SIZE_RASTER,
+      padding: paddingBox,
+    })
+    return { center: framed?.center ?? center, zoom: framed?.zoom ?? zoom, framed: framed !== null }
+  })
+
   // Hover state for the single tooltip overlay (replaces per-marker <Tooltip>)
   const [hoveredPlace, setHoveredPlace] = useState<any>(null)
   const [tooltipPos, setTooltipPos] = useState<{ x: number; y: number } | null>(null)
@@ -654,8 +688,8 @@ export const MapView = memo(function MapView({
     <div className="w-full h-full relative">
     <MapContainer
       id="trek-map"
-      center={center}
-      zoom={zoom}
+      center={initialView.center}
+      zoom={initialView.zoom}
       zoomControl={false}
       className="w-full h-full bg-[#e5e7eb]"
     >
@@ -670,7 +704,7 @@ export const MapView = memo(function MapView({
       />
 
       <MapController center={center} zoom={zoom} />
-      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} />
+      <BoundsController places={dayPlaces.length > 0 ? dayPlaces : places} routeCoords={dayPlaces.length > 0 ? routeCoords : []} fitKey={fitKey} paddingOpts={paddingOpts} hasDayDetail={hasDayDetail} framedOnMount={initialView.framed} />
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
@@ -719,6 +753,7 @@ export const MapView = memo(function MapView({
       />
 
       {poiMarkers}
+      <PluginMapMarkers tripId={tripId} />
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}

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

@@ -5,6 +5,8 @@ import { act } from '@testing-library/react'
 import { resetAllStores } from '../../../tests/helpers/store'
 import { buildPlace } from '../../../tests/helpers/factories'
 import { useSettingsStore } from '../../store/settingsStore'
+import maplibregl from 'maplibre-gl'
+import { DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
 
 // Stable fake map so fitBounds call counts survive re-renders. The canvas
 // container is a single element so listeners registered by the component are
@@ -37,6 +39,23 @@ const glMap = vi.hoisted(() => ({
   easeTo: vi.fn(),
 }))
 
+const glBounds = vi.hoisted(() => {
+  const state = {
+    instances: [] as Array<{ extend: ReturnType<typeof vi.fn> }>,
+  }
+  return {
+    get instances() { return state.instances },
+    clear: () => { state.instances = [] },
+    create: () => {
+      const bounds = {
+        extend: vi.fn(() => bounds),
+      }
+      state.instances.push(bounds)
+      return bounds
+    },
+  }
+})
+
 vi.mock('mapbox-gl', () => ({
   default: {
     accessToken: '',
@@ -52,7 +71,7 @@ vi.mock('mapbox-gl', () => ({
       }
     }),
     LngLatBounds: vi.fn(function () {
-      return { extend: vi.fn().mockReturnThis() }
+      return glBounds.create()
     }),
     NavigationControl: vi.fn(),
     Popup: vi.fn(function () {
@@ -81,7 +100,7 @@ vi.mock('maplibre-gl', () => ({
       }
     }),
     LngLatBounds: vi.fn(function () {
-      return { extend: vi.fn().mockReturnThis() }
+      return glBounds.create()
     }),
     NavigationControl: vi.fn(),
     Popup: vi.fn(function () {
@@ -148,6 +167,7 @@ beforeEach(() => {
   glMap.on.mockImplementation(() => glMap)
   glMap.off.mockImplementation(() => glMap)
   glMap.once.mockImplementation(() => glMap)
+  glMap.loaded.mockReturnValue(true)
   glMap.getSource.mockReturnValue(null)
   glMap.getLayer.mockReturnValue(null)
   glMap.queryRenderedFeatures.mockReturnValue([])
@@ -165,6 +185,7 @@ beforeEach(() => {
 
 afterEach(() => {
   vi.clearAllMocks()
+  glBounds.clear()
   resetAllStores()
 })
 
@@ -244,6 +265,39 @@ describe('MapViewGL', () => {
     expect(mapboxgl.Map).not.toHaveBeenCalled()
   })
 
+  it('FE-COMP-MAPVIEWGL-014: MapLibre maps disable the around-center mouse rotate (#1545)', async () => {
+    const mapboxgl = (await import('mapbox-gl')).default
+    const maplibregl = (await import('maplibre-gl')).default
+    useSettingsStore.setState({
+      settings: {
+        ...useSettingsStore.getState().settings,
+        map_provider: 'maplibre-gl',
+        mapbox_access_token: '',
+        maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
+      },
+    } as any)
+    const places = [buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 })]
+
+    render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
+    await act(async () => {})
+    // MapLibre 5's around-center rotate reverses direction at a drifting
+    // mid-screen line, so the map must opt out of it.
+    expect((maplibregl.Map as any).mock.calls[0][0]).toMatchObject({ aroundCenter: false })
+
+    vi.clearAllMocks()
+    useSettingsStore.setState({
+      settings: {
+        ...useSettingsStore.getState().settings,
+        map_provider: 'mapbox-gl',
+        mapbox_access_token: 'pk.test_token',
+      },
+    } as any)
+    render(<MapViewGL places={places} fitKey={1} glProvider="mapbox-gl" />)
+    await act(async () => {})
+    // mapbox-gl has no such option — it must not receive the stray key.
+    expect((mapboxgl.Map as any).mock.calls[0][0]).not.toHaveProperty('aroundCenter')
+  })
+
   it('FE-COMP-MAPVIEWGL-005: adds the clustered place source + layers so markers group on zoom-out (#1385)', async () => {
     glMap.on.mockImplementation((event: string, handlerOrLayer: unknown) => {
       if (event === 'load' && typeof handlerOrLayer === 'function') (handlerOrLayer as () => void)()
@@ -439,4 +493,187 @@ describe('MapViewGL', () => {
     act(() => { el.dispatchEvent(new MouseEvent('mouseenter', { clientX: 10, clientY: 10 })) })
     expect(queryByTestId('tooltip')).toBeTruthy()
   })
+
+  // The map opens already framed on its places, so these exercise the fits that happen
+  // afterwards — picking a day bumps fitKey.
+  it('FE-COMP-MAPVIEWGL-014: fits bounds immediately even when MapLibre loaded() is false', async () => {
+    glMap.loaded.mockReturnValue(false)
+    const places = [
+      buildMapPlace({ id: 1, lat: 35.38, lng: 136.94 }),
+      buildMapPlace({ id: 2, lat: 35.42, lng: 136.76 }),
+    ]
+
+    const { rerender } = render(
+      <MapViewGL places={places} dayPlaces={places} fitKey={1} glProvider="maplibre-gl" />,
+    )
+    await act(async () => {})
+
+    rerender(<MapViewGL places={places} dayPlaces={places} fitKey={2} glProvider="maplibre-gl" />)
+    await act(async () => {})
+
+    expect(glMap.fitBounds).toHaveBeenCalled()
+  })
+
+  it('FE-COMP-MAPVIEWGL-015: fits MapLibre bounds to route geometry when it arrives after a day fit', async () => {
+    const dayPlaces = [
+      buildMapPlace({ id: 1, lat: 35.38, lng: 136.94 }),
+      buildMapPlace({ id: 2, lat: 35.42, lng: 136.76 }),
+    ]
+    // The day's route is drawn as straight lines in the same batch as the fit, then
+    // upgraded to the real road geometry — which detours well outside the markers.
+    const straightLines: [number, number][][] = [[[35.38, 136.94], [35.42, 136.76]]]
+    const roadGeometry: [number, number][][] = [[[35.38, 136.94], [35.72, 137.51], [35.42, 136.76]]]
+
+    const { rerender } = render(
+      <MapViewGL
+        places={dayPlaces}
+        dayPlaces={dayPlaces}
+        route={straightLines}
+        fitKey={1}
+        glProvider="maplibre-gl"
+      />,
+    )
+    await act(async () => {})
+
+    // Pick a day: fits the markers, with only the straight-line route to go on so far.
+    rerender(
+      <MapViewGL
+        places={dayPlaces}
+        dayPlaces={dayPlaces}
+        route={straightLines}
+        fitKey={2}
+        glProvider="maplibre-gl"
+      />,
+    )
+    await act(async () => {})
+    const afterDayFit = glMap.fitBounds.mock.calls.length
+    expect(afterDayFit).toBeGreaterThan(0)
+
+    // The real geometry lands a moment later and the fit widens to take it in.
+    rerender(
+      <MapViewGL
+        places={dayPlaces}
+        dayPlaces={dayPlaces}
+        route={roadGeometry}
+        fitKey={2}
+        glProvider="maplibre-gl"
+      />,
+    )
+    await act(async () => {})
+
+    expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(afterDayFit)
+    const latestBounds = glBounds.instances[glBounds.instances.length - 1]
+    expect(latestBounds.extend).toHaveBeenCalledWith([137.51, 35.72])
+  })
+
+  describe('opening camera', () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const mapOptions = () => (maplibregl.Map as any).mock.calls.at(-1)[0]
+
+    it('FE-COMP-MAPVIEWGL-017: builds the map framed on the places, in [lng, lat] order', async () => {
+      const places = [
+        buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 }),  // Kyoto
+        buildMapPlace({ id: 2, lat: 34.69, lng: 135.5 }),   // Osaka
+      ]
+
+      render(<MapViewGL places={places} glProvider="maplibre-gl" />)
+      await act(async () => {})
+
+      const { center, zoom } = mapOptions()
+      // GL takes [lng, lat] — the swap is the easiest thing to get backwards here.
+      expect(center[0]).toBeCloseTo(135.63, 1)
+      expect(center[1]).toBeCloseTo(34.85, 1)
+      // Framed on two cities ~30km apart: regional, not the world and not street level.
+      expect(zoom).toBeGreaterThan(6)
+      expect(zoom).toBeLessThan(12)
+    })
+
+    it('FE-COMP-MAPVIEWGL-020: does not jump to the default centre on mount, undoing the framing', async () => {
+      const places = [buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 })]
+
+      render(<MapViewGL places={places} glProvider="maplibre-gl" />)
+      await act(async () => {})
+
+      // The centre prop is the world-view default nobody passed. Jumping to it on mount would
+      // throw away the camera the map was just built with and land on Null Island at zoom 2.
+      expect(glMap.jumpTo).not.toHaveBeenCalled()
+    })
+
+    it('FE-COMP-MAPVIEWGL-018: does not fit on mount when it opened already framed', async () => {
+      const places = [buildMapPlace({ id: 1, lat: 35.01, lng: 135.76 })]
+
+      const { rerender } = render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
+      await act(async () => {})
+
+      // Fitting would only re-do the framing, and its maxZoom would overrule the gentler
+      // zoom a lone place opens at.
+      expect(glMap.fitBounds).not.toHaveBeenCalled()
+
+      // Picking a day still fits, as always.
+      rerender(<MapViewGL places={places} fitKey={2} glProvider="maplibre-gl" />)
+      await act(async () => {})
+      expect(glMap.fitBounds).toHaveBeenCalled()
+    })
+
+    it('FE-COMP-MAPVIEWGL-019: falls back to the world view when no place has coordinates', async () => {
+      render(
+        <MapViewGL
+          places={[buildMapPlace({ id: 1, lat: null, lng: null })]}
+          glProvider="maplibre-gl"
+        />,
+      )
+      await act(async () => {})
+
+      const { center, zoom } = mapOptions()
+      expect(center).toEqual([0, 0])
+      expect(zoom).toBe(DEFAULT_MAP_ZOOM)
+    })
+  })
+
+  it('FE-COMP-MAPVIEWGL-016: leaves the camera alone when a route appears long after the fit', async () => {
+    const dayPlaces = [
+      buildMapPlace({ id: 1, lat: 35.38, lng: 136.94 }),
+      buildMapPlace({ id: 2, lat: 35.42, lng: 136.76 }),
+    ]
+
+    const { rerender } = render(
+      <MapViewGL
+        places={dayPlaces}
+        dayPlaces={dayPlaces}
+        route={null}
+        fitKey={1}
+        glProvider="maplibre-gl"
+      />,
+    )
+    await act(async () => {})
+
+    // Pick a day with the route toggle off: no route is pending for this fit.
+    rerender(
+      <MapViewGL
+        places={dayPlaces}
+        dayPlaces={dayPlaces}
+        route={null}
+        fitKey={2}
+        glProvider="maplibre-gl"
+      />,
+    )
+    await act(async () => {})
+    const afterDayFit = glMap.fitBounds.mock.calls.length
+    expect(afterDayFit).toBeGreaterThan(0)
+
+    // Much later the user pans away and turns the route on. That is not the geometry this
+    // fit was waiting for, so the camera must stay put.
+    rerender(
+      <MapViewGL
+        places={dayPlaces}
+        dayPlaces={dayPlaces}
+        route={[[[35.38, 136.94], [35.72, 137.51], [35.42, 136.76]]]}
+        fitKey={2}
+        glProvider="maplibre-gl"
+      />,
+    )
+    await act(async () => {})
+
+    expect(glMap.fitBounds.mock.calls.length).toBe(afterDayFit)
+  })
 })

client/src/components/Map/MapViewGL.tsx

@@ -12,12 +12,15 @@ import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings,
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
 import { ReservationMapboxOverlay } from './reservationsMapbox'
 import { useTransportRoutes } from '../../hooks/useTransportRoutes'
+import { visibleRouteReservations } from '../../utils/reservationRoutes'
 import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, basemapLanguage, type GlMapProvider } from './glProviders'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
 import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 import { buildPoiPopupHtml } from './placePopup'
+import { DEFAULT_MAP_CENTER, DEFAULT_MAP_ZOOM } from '../../constants/mapDefaults'
+import { computeMapViewport, TILE_SIZE_GL } from '../../utils/mapViewport'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -43,6 +46,10 @@ function hasValidCoords(place: Place): place is PlaceWithCoords {
   return place.lat != null && place.lng != null && Number.isFinite(place.lat) && Number.isFinite(place.lng)
 }
 
+function isValidCoordinate(coord: [number, number] | null | undefined): coord is [number, number] {
+  return !!coord && Number.isFinite(coord[0]) && Number.isFinite(coord[1])
+}
+
 function buildPlaceClusterData(places: Place[]) {
   return {
     type: 'FeatureCollection' as const,
@@ -191,8 +198,8 @@ export function MapViewGL({
   onMarkerClick,
   onMapClick,
   onMapContextMenu = null,
-  center = [48.8566, 2.3522],
-  zoom = 10,
+  center = DEFAULT_MAP_CENTER,
+  zoom = DEFAULT_MAP_ZOOM,
   fitKey = 0,
   dayOrderMap = {},
   leftWidth = 0,
@@ -258,8 +265,8 @@ export function MapViewGL({
   onReservationClickRef.current = onReservationClick
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const poiMarkersRef = useRef<any[]>([])
-  // Single reusable hover popup (name/category/address card) shared by planned
-  // places and POI markers — mirrors the Leaflet map's hover tooltip.
+  // Single reusable hover popup for POI markers. Planned places use the
+  // cursor-following React tooltip below so they match the Leaflet map.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const popupRef = useRef<any | null>(null)
   const onPoiClickRef = useRef(onPoiClick)
@@ -275,22 +282,46 @@ export function MapViewGL({
   onClickRefs.current.context = onMapContextMenu
   const hoverDisabledRef = useRef(hoverDisabled)
   hoverDisabledRef.current = hoverDisabled
+  const routeCoords = useMemo<[number, number][]>(() => (route || []).flat().filter(isValidCoordinate), [route])
+  const routeFitKey = useMemo(
+    () => routeCoords.map(([lat, lng]) => `${lat.toFixed(6)},${lng.toFixed(6)}`).join('|'),
+    [routeCoords],
+  )
+  // Set when the map was built already framed on its places, so the fit below knows there is
+  // nothing left to do on mount.
+  const framedOnMountRef = useRef(false)
 
   // Build/rebuild the map on provider/style/token/3d change
   useEffect(() => {
     if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
     if (!isMapLibre) mapboxgl.accessToken = mapboxToken
 
+    // Open framed on the places rather than on the caller's default: a trip in Japan should
+    // show Japan straight away, not the world view followed by a flight across the planet.
+    // Reading them here is what makes this "on load" — the map is built once, and the trip's
+    // places are already loaded by then (TripPlannerPage holds a splash until they are).
+    const framed = computeMapViewport(dayPlaces.length > 0 ? dayPlaces : places, {
+      tileSize: TILE_SIZE_GL,
+      padding: paddingOpts,
+    })
+    framedOnMountRef.current = framed !== null
+    const initial = framed ?? { center, zoom }
+
     const mapOptions: Record<string, unknown> = {
       container: containerRef.current,
       style: glStyle,
-      center: [center[1], center[0]],
-      zoom,
+      center: [initial.center[1], initial.center[0]],
+      zoom: initial.zoom,
       pitch: enableMapbox3d ? 45 : 0,
       attributionControl: true,
       antialias: mapboxQuality,
     }
     if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
+    // MapLibre 5's mouse-rotate inverts its sign at a mid-screen line it gets by
+    // re-projecting the map center — a line that drifts with the bearing, so a
+    // right-button drag near mid-screen ping-pongs instead of rotating (#1545).
+    // aroundCenter: false restores the plain dx-based rotate mapbox-gl uses.
+    if (isMapLibre) mapOptions.aroundCenter = false
 
     const map = new gl.Map(mapOptions as any)
     mapRef.current = map
@@ -898,12 +929,9 @@ export function MapViewGL({
   // `visibleConnectionIds` is driven by the per-reservation toggle in
   // DayPlanSidebar — nothing is rendered until the user enables a
   // booking's route, matching the Leaflet MapView's behaviour.
-  const visibleReservations = useMemo(() => {
-    const set = new Set(visibleConnectionIds || [])
-    // Transit journeys ride the route toggle — they are part of the computed
-    // day route, so hiding the route hides them too (#1065).
-    return reservations.filter(r => (r.type === 'transit' && showTransitRoutes) || set.has(r.id))
-  }, [reservations, visibleConnectionIds, showTransitRoutes])
+  const visibleReservations = useMemo(() => (
+    visibleRouteReservations(reservations, { visibleConnectionIds, showTransitRoutes })
+  ), [reservations, visibleConnectionIds, showTransitRoutes])
   // Real road geometry for car/bus/taxi/bicycle bookings (straight line until it loads/if it fails).
   const transportRoutes = useTransportRoutes(visibleReservations)
 
@@ -935,17 +963,46 @@ export function MapViewGL({
     return { top, right: rightWidth + 40, bottom, left: leftWidth + 40 }
   }, [leftWidth, rightWidth, hasInspector, hasDayDetail])
 
-  const prevFitKey = useRef(-1)
+  const prevFitKey = useRef<number | null>(-1)
+  const pendingRouteFitRef = useRef<{ fitKey: number | null; routeKey: string } | null>(null)
+  const fitRanRef = useRef(false)
   useEffect(() => {
-    if (fitKey === prevFitKey.current) return
-    prevFitKey.current = fitKey
+    const fitKeyChanged = fitKey !== prevFitKey.current
+    const routeArrivedForPendingFit =
+      !fitKeyChanged
+      && pendingRouteFitRef.current?.fitKey === fitKey
+      && !!routeFitKey
+      && routeFitKey !== pendingRouteFitRef.current.routeKey
+    if (!fitKeyChanged && !routeArrivedForPendingFit) return
     const map = mapRef.current
     if (!map) return
+
+    // The map was built framed on these very places, so fitting now would only re-do that —
+    // and its maxZoom would overrule the gentler zoom a single place opens at. Adopt the
+    // current fitKey and stand down; every later fit (picking a day) still runs.
+    if (!fitRanRef.current && framedOnMountRef.current) {
+      fitRanRef.current = true
+      prevFitKey.current = fitKey
+      pendingRouteFitRef.current = null
+      return
+    }
+    fitRanRef.current = true
+    if (fitKeyChanged) {
+      prevFitKey.current = fitKey
+      // Only wait for better geometry when a route is already on screen: the day's
+      // route lands as straight lines in the same batch as the fit, then upgrades to
+      // the real road geometry a moment later. With no route drawn, none is coming for
+      // this fit — arming the slot anyway would let a route toggled on much later
+      // (after the user has panned somewhere else) yank the camera back.
+      pendingRouteFitRef.current = routeFitKey ? { fitKey, routeKey: routeFitKey } : null
+    }
     const target = dayPlaces.length > 0 ? dayPlaces : places
-    const valid = target.filter(p => p.lat && p.lng)
-    if (valid.length === 0) return
+    const markerPoints = target.filter(hasValidCoords).map(p => [p.lat, p.lng] as [number, number])
+    const fitPoints = routeCoords.length > 0 ? [...routeCoords, ...markerPoints] : markerPoints
+    if (fitPoints.length === 0) return
     const bounds = new gl.LngLatBounds()
-    valid.forEach(p => bounds.extend([p.lng, p.lat]))
+    fitPoints.forEach(([lat, lng]) => bounds.extend([lng, lat]))
+    let fitted = false
     const run = () => {
       try {
         map.fitBounds(bounds, {
@@ -954,11 +1011,13 @@ export function MapViewGL({
           pitch: enableMapbox3d ? 45 : 0,
           duration: 400,
         })
+        fitted = true
       } catch { /* noop */ }
     }
-    if (map.loaded()) run()
-    else map.once('load', run)
-  }, [fitKey]) // eslint-disable-line react-hooks/exhaustive-deps
+    run()
+    if (!fitted && typeof map.once === 'function') map.once('load', run)
+    if (routeArrivedForPendingFit) pendingRouteFitRef.current = null
+  }, [fitKey, routeFitKey]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // flyTo selected place
   useEffect(() => {
@@ -981,9 +1040,16 @@ export function MapViewGL({
   }, [selectedPlaceId, enableMapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
 
   // External center/zoom prop changes — jump without animation
+  const jumpedToRef = useRef<[number, number] | null>(null)
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
+    // Not on mount: the map was just built with its own camera, framed on the places, and
+    // jumping to the prop centre here would throw that away and land on the world view.
+    // This effect is for *changes* to the prop, which only arrive later.
+    const previous = jumpedToRef.current
+    jumpedToRef.current = [center[0], center[1]]
+    if (!previous || (previous[0] === center[0] && previous[1] === center[1])) return
     try { map.jumpTo({ center: [center[1], center[0]], zoom }) } catch { /* noop */ }
   }, [center[0], center[1]]) // eslint-disable-line react-hooks/exhaustive-deps
 

client/src/components/Map/ReservationOverlay.tsx

@@ -371,6 +371,11 @@ export default function ReservationOverlay({ reservations, showConnections, show
 
   const visibleItems = useMemo(() => {
     return items.filter(item => {
+      // A transit journey draws its real rail/bus alignment, not a straight from->to
+      // line, so the endpoint-proximity declutter (which exists to hide tiny no-op
+      // straight connectors) must not suppress it. Otherwise a zoomed-out day — e.g. one
+      // with no other places to tighten the map onto — hides the whole route (#1570).
+      if (item.transitSegs.length > 0) return true
       const fromPx = map.latLngToContainerPoint([item.from.lat, item.from.lng])
       const toPx = map.latLngToContainerPoint([item.to.lat, item.to.lng])
       const minPx = item.type === 'flight' ? 50 : item.type === 'cruise' ? 150 : item.type === 'car' ? 80 : 200

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

@@ -42,6 +42,22 @@ function carBooking(): Reservation {
   } as unknown as Reservation
 }
 
+// A transit journey whose from/to stations project close together (under the 200px
+// declutter threshold) but which carries real per-leg MOTIS geometry. The encoded
+// polyline decodes to [[48,2],[48.02,2.01],[48.05,2]] at precision 6.
+function transitBooking(withGeometry: boolean): Reservation {
+  return {
+    id: 2, type: 'transit', status: 'confirmed',
+    endpoints: [
+      { role: 'from', sequence: 0, name: 'Stop A', code: null, lat: 48.0, lng: 2.0, timezone: null, local_time: null, local_date: null },
+      { role: 'to', sequence: 1, name: 'Stop B', code: null, lat: 48.05, lng: 2.0, timezone: null, local_time: null, local_date: null },
+    ],
+    metadata: withGeometry
+      ? { transit: { legs: [{ geometry: '__upzA_gayB_af@_pR_ry@~oR', mode: 'BUS', line_color: '#7c3aed' }] } }
+      : { transit: { legs: [{ mode: 'BUS' }] } },
+  } as unknown as Reservation
+}
+
 const opts = { showConnections: true, showStats: false, showEndpointLabels: false }
 
 function lastFeatureCoords(map: ReturnType<typeof fakeMap>) {
@@ -76,3 +92,23 @@ describe('ReservationMapboxOverlay road routes (#1425)', () => {
     expect(data.features).toHaveLength(0)
   })
 })
+
+describe('ReservationMapboxOverlay transit routes (#1570)', () => {
+  it('draws a transit journey with real geometry even when its stations project close together', () => {
+    const map = fakeMap()
+    const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
+    overlay.update([transitBooking(true)], opts)
+    // Stations are ~50px apart — under the 200px declutter — yet the real per-leg
+    // path (GeoJSON [lng, lat]) is drawn because it carries stored geometry.
+    expect(lastFeatureCoords(map)).toEqual([[2, 48], [2.01, 48.02], [2, 48.05]])
+  })
+
+  it('still declutters a geometry-less transit whose stations project close together', () => {
+    const map = fakeMap()
+    const overlay = new ReservationMapboxOverlay(map as never, opts, FakeMarker as never)
+    overlay.update([transitBooking(false)], opts)
+    const calls = map._source.setData.mock.calls
+    const data = calls[calls.length - 1]?.[0] as { features: unknown[] }
+    expect(data.features).toHaveLength(0)
+  })
+})

client/src/components/Map/reservationsMapbox.ts

@@ -283,6 +283,10 @@ export class ReservationMapboxOverlay {
     // overlay, so tiny no-op transport lines don't clutter the map.
     const visibleItems = show ? this.items.filter(item => {
       try {
+        // A transit journey draws its real alignment, not a straight from->to line, so
+        // don't let the endpoint-proximity declutter hide it when the map is zoomed out
+        // (#1570). Mirrors the Leaflet overlay.
+        if (item.type === 'transit' && getTransitMapSegments(item.res).length > 0) return true
         const fromPx = map.project([item.from.lng, item.from.lat])
         const toPx = map.project([item.to.lng, item.to.lat])
         const dx = fromPx.x - toPx.x, dy = fromPx.y - toPx.y

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

@@ -3,6 +3,7 @@ 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'
+import { clearExchangeRateCache } from '../../hooks/useExchangeRates'
 
 // ── Helpers ───────────────────────────────────────────────────────────────────
 
@@ -47,7 +48,14 @@ beforeEach(() => {
     http.get('/api/maps/place-photo/:placeId', () =>
       HttpResponse.json({ photoUrl: null })
     ),
+    http.get('/api/pdf-sections/:tripId', () =>
+      HttpResponse.json({ sections: [] })
+    ),
+    // Mixed-currency exports fetch FX rates; keep the suite hermetic.
+    http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.json([])),
   )
+  // The FX cache is module-level and would leak rates between tests in this file.
+  clearExchangeRateCache()
 })
 
 afterEach(() => {
@@ -151,6 +159,34 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('Day One')
   })
 
+  it('FE-COMP-TRIPPDF-005b: day is a table with a thead header that repeats on overflow pages (#1471)', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    const srcdoc = iframe!.srcdoc
+    // The day is a real <table> whose <thead> is repeated by the browser's print
+    // engine on every page an overflowing day spills onto.
+    expect(srcdoc).toContain('<table class="day-section')
+    expect(srcdoc).toContain('<thead class="day-header">')
+    expect(srcdoc).toContain('<tbody class="day-body-group">')
+    // The dark bar (background/padding/flex) lives in an inner wrapper inside the thead.
+    expect(srcdoc).toContain('class="day-header-bar"')
+    // Day content still renders inside the new structure.
+    expect(srcdoc).toContain('Rome Day')
+    expect(srcdoc).toContain('Colosseum')
+  })
+
+  it('FE-COMP-TRIPPDF-005c: the gap under the day header lives in the repeated thead cell (#1531)', async () => {
+    await downloadTripPDF(richArgs)
+    const iframe = getIframe()
+    const srcdoc = iframe!.srcdoc
+    // The thead is repeated on every overflow page, so the spacing below the header bar
+    // must be declared on its cell...
+    expect(srcdoc).toContain('.day-header > tr > td { padding-bottom: 12px; }')
+    // ...and not as a block-start padding on .day-body, which the print engine only paints
+    // on the first fragment of the (fragmented) body cell.
+    expect(srcdoc).toContain('.day-body  { padding: 0 28px 6px; }')
+  })
+
   it('FE-COMP-TRIPPDF-006: escHtml prevents XSS in trip title', async () => {
     const args = {
       ...minimalArgs,
@@ -255,13 +291,104 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('CONF999')
   })
 
-  it('FE-COMP-TRIPPDF-016: renders place description and price chip', async () => {
+  it('FE-COMP-TRIPPDF-016: renders place description and a currency-formatted 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')
+    // richArgs trip has no explicit currency, place has no currency override —
+    // formatMoney falls back to EUR, formatted via Intl (symbol, not literal "EUR" text).
+    expect(iframe!.srcdoc).toContain('15,00')
+    expect(iframe!.srcdoc).toContain('€')
+  })
+
+  it('FE-COMP-TRIPPDF-016b: formats price chip and totals in the trip currency, not EUR', async () => {
+    const usdArgs = {
+      ...richArgs,
+      trip: { ...richArgs.trip, currency: 'USD' },
+    }
+    await downloadTripPDF(usdArgs)
+    const iframe = getIframe()
+    // Place price chip: place has no currency override, falls back to trip.currency (USD).
+    expect(iframe!.srcdoc).toContain('$15.00')
+    // No literal "EUR" text should leak into a USD trip's export.
+    expect(iframe!.srcdoc).not.toContain('EUR')
+    // Price chip icon must stay currency-neutral — not the euro-shaped glyph.
+    expect(iframe!.srcdoc).not.toContain('M14 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c2.17 0 4.1-.99 5.4-2.55')
+  })
+
+  it('FE-COMP-TRIPPDF-016c: a place with its own currency overrides the trip currency for its price chip', async () => {
+    const mixedArgs = {
+      ...richArgs,
+      trip: { ...richArgs.trip, currency: 'EUR' },
+      assignments: {
+        '10': [{
+          ...assignmentForDay,
+          place: { ...placeWithDetails, currency: 'JPY', price: '1500' },
+        }],
+      } as any,
+    }
+    await downloadTripPDF(mixedArgs)
+    const iframe = getIframe()
+    // JPY is a zero-decimal currency (currencyDecimals) and uses its own symbol, not EUR.
+    // Note: Intl renders JPY with the fullwidth yen sign (U+FFE5 "￥"), not U+00A5 "¥".
+    expect(iframe!.srcdoc).toContain('￥1,500')
+  })
+
+  it('FE-COMP-TRIPPDF-016d: converts foreign-currency prices into the trip currency for day and cover totals (#1561)', async () => {
+    server.use(http.get('https://api.frankfurter.dev/v2/rates', ({ request }) => {
+      expect(new URL(request.url).searchParams.get('base')).toBe('NOK')
+      return HttpResponse.json([{ quote: 'USD', rate: 0.1 }]) // 1 NOK = 0.1 USD
+    }))
+    const mixedArgs = {
+      ...richArgs,
+      trip: { ...richArgs.trip, currency: 'NOK' },
+      assignments: {
+        '10': [
+          { ...assignmentForDay, place: { ...placeWithDetails, currency: 'USD', price: '273' } },
+          { ...assignmentForDay, id: 201, place: { ...placeWithDetails, id: 101, name: 'Museum', currency: null, price: '2500' } },
+        ],
+      } as any,
+    }
+    await downloadTripPDF(mixedArgs)
+    const srcdoc = getIframe()!.srcdoc.replace(/[\u00A0\u202F]/g, ' ')
+    // 2500 NOK + 273 USD / 0.1 = 5230 NOK, marked approximate, in day header AND cover stat.
+    expect(srcdoc).toContain('≈ 5 230,00 kr')
+    expect((srcdoc.match(/≈ 5 230,00 kr/g) || []).length).toBeGreaterThanOrEqual(2)
+  })
+
+  it('FE-COMP-TRIPPDF-016e: falls back to per-currency breakdowns when the FX fetch fails (#1561)', async () => {
+    server.use(http.get('https://api.frankfurter.dev/v2/rates', () => HttpResponse.error()))
+    const mixedArgs = {
+      ...richArgs,
+      trip: { ...richArgs.trip, currency: 'NOK' },
+      assignments: {
+        '10': [
+          { ...assignmentForDay, place: { ...placeWithDetails, currency: 'USD', price: '2730.27' } },
+          { ...assignmentForDay, id: 201, place: { ...placeWithDetails, id: 101, name: 'Museum', currency: null, price: '2500' } },
+        ],
+      } as any,
+    }
+    // Export still resolves — a dead FX endpoint must never break the PDF.
+    await expect(downloadTripPDF(mixedArgs)).resolves.not.toThrow()
+    const srcdoc = getIframe()!.srcdoc.replace(/[\u00A0\u202F]/g, ' ')
+    // Honest breakdown, base currency first; the USD amount is never NOK-labeled.
+    expect(srcdoc).toContain('2 500,00 kr + $2,730.27')
+    expect(srcdoc).not.toContain('≈')
+    expect(srcdoc).not.toMatch(/5 ?230/)
+  })
+
+  it('FE-COMP-TRIPPDF-016f: an all-same-currency trip makes no FX request', async () => {
+    let fxCalled = false
+    server.use(http.get('https://api.frankfurter.dev/v2/rates', () => {
+      fxCalled = true
+      return HttpResponse.json([])
+    }))
+    await downloadTripPDF({ ...richArgs, trip: { ...richArgs.trip, currency: 'EUR' } })
+    expect(fxCalled).toBe(false)
+    // Totals render exactly as before for the single-currency case.
+    const srcdoc = getIframe()!.srcdoc.replace(/[\u00A0\u202F]/g, ' ')
+    expect(srcdoc).toContain('15,00 €')
+    expect(srcdoc).not.toContain('≈')
   })
 
   it('FE-COMP-TRIPPDF-017: renders trip description on cover', async () => {
@@ -356,4 +483,35 @@ describe('downloadTripPDF', () => {
     // The empty-day div should appear (contains the translation key for empty day)
     expect(iframe!.srcdoc).toContain('dayplan.emptyDay')
   })
+
+  it('FE-COMP-TRIPPDF-021: appends plugin pdf sections after the days, escaped', async () => {
+    server.use(
+      http.get('/api/pdf-sections/:tripId', () =>
+        HttpResponse.json({
+          sections: [{
+            pluginId: 'weather',
+            title: 'Weather <b>Forecast</b>',
+            paragraphs: ['Sunny all week'],
+            table: { headers: ['Day', 'Temp'], rows: [['Mon', '24°C']] },
+          }],
+        })
+      ),
+    )
+    await downloadTripPDF(richArgs)
+    const srcdoc = getIframe()!.srcdoc
+    expect(srcdoc).toContain('class="plugin-section"')
+    // Plugin text is escHtml'd like the core content — no markup passes through.
+    expect(srcdoc).not.toContain('<b>Forecast</b>')
+    expect(srcdoc).toContain('Weather &lt;b&gt;Forecast&lt;/b&gt;')
+    expect(srcdoc).toContain('Sunny all week')
+    expect(srcdoc).toContain('24°C')
+    // Sections come after the last day section.
+    expect(srcdoc.indexOf('class="plugin-sections')).toBeGreaterThan(srcdoc.lastIndexOf('class="day-section'))
+  })
+
+  it('FE-COMP-TRIPPDF-022: renders no plugin block when the sections fetch fails (fail-safe)', async () => {
+    server.use(http.get('/api/pdf-sections/:tripId', () => HttpResponse.error()))
+    await expect(downloadTripPDF(minimalArgs)).resolves.not.toThrow()
+    expect(getIframe()!.srcdoc).not.toContain('class="plugin-sections')
+  })
 })

client/src/components/PDF/TripPDF.tsx

@@ -2,10 +2,11 @@
 import { createElement } from 'react'
 import { getCategoryIcon } from '../shared/categoryIcons'
 import { FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship, Sailboat, Bike, CarTaxiFront, Route, 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 { accommodationsApi, mapsApi, pluginsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
 import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
-import { splitReservationDateTime } from '../../utils/formatters'
+import { formatMoney, formatMoneySum, splitReservationDateTime, type MoneyEntry } from '../../utils/formatters'
+import { fetchExchangeRates } from '../../hooks/useExchangeRates'
 import { getFlightLegs, getTrainLegs } from '../../utils/flightLegs'
 
 function renderLucideIcon(icon:LucideIcon, props = {}) {
@@ -40,7 +41,7 @@ const svgPin   = `<svg width="11" height="11" viewBox="0 0 24 24" fill="#94a3b8"
 const svgClock = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#374151" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
 const svgClock2= `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>`
 const svgCheck = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5L19 7"/></svg>`
-const svgEuro  = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2" stroke-linecap="round"><path d="M14 5c-3.87 0-7 3.13-7 7s3.13 7 7 7c2.17 0 4.1-.99 5.4-2.55"/><path d="M5 11h8M5 13h8"/></svg>`
+const svgMoney = `<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#059669" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12h6" stroke-linecap="round"/></svg>`
 
 function escHtml(str) {
   if (!str) return ''
@@ -92,9 +93,15 @@ function longDateRange(days, locale) {
   return `${f.toLocaleDateString(locale, { day: 'numeric', month: 'long', timeZone: 'UTC' })} – ${l.toLocaleDateString(locale, { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' })}`
 }
 
-function dayCost(assignments, dayId, locale) {
-  const total = (assignments[String(dayId)] || []).reduce((s, a) => s + (parseFloat(a.place?.price) || 0), 0)
-  return total > 0 ? `${total.toLocaleString(locale)} EUR` : null
+// Day totals render in the trip's currency; foreign-currency place prices are
+// converted via the pre-fetched rates, or listed per-currency when rates are
+// unavailable (#1561).
+function dayCost(assignments, dayId, locale, tripCurrency, rates) {
+  const entries: MoneyEntry[] = (assignments[String(dayId)] || []).map(a => ({
+    amount: parseFloat(a.place?.price) || 0,
+    currency: a.place?.currency || tripCurrency,
+  }))
+  return formatMoneySum(entries, tripCurrency, locale || 'en', rates)
 }
 
 // Pre-fetch place photos for all assigned places.
@@ -149,14 +156,29 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
   const accommodations = await accommodationsApi.list(trip.id);
 
+  // Sections contributed by pdfSectionProvider plugins — server-normalized plain
+  // text (counts + lengths capped), appended after the days. Fail-safe: an error
+  // just means no extra sections, the core export is untouched.
+  const pluginSections = await pluginsApi.pdfSections(trip.id).then(r => r.sections || []).catch(() => [])
+
   // Pre-fetch place photos (Google, OSM and coords-only places)
   const photoMap = await fetchPlacePhotos(assignments, places)
 
   const totalAssigned = new Set(
     Object.values(assignments || {}).flatMap(a => a.map(x => x.place?.id)).filter(Boolean)
   ).size
-  const totalCost = Object.values(assignments || {})
-    .flatMap(a => a).reduce((s, a) => s + (Number(a.place?.price) || 0), 0)
+  // The PDF is a trip-scoped, shareable document, so totals stay in the trip's
+  // own currency. Rates are resolved ONCE before any HTML is built so the cover
+  // stat and every day header agree; all-same-currency trips skip the FX fetch
+  // entirely (offline export keeps working), and a failed fetch degrades to
+  // per-currency breakdowns instead of mislabeled sums (#1561).
+  const tripCur = (trip?.currency || 'EUR').toUpperCase()
+  const allCostEntries: MoneyEntry[] = Object.values(assignments || {})
+    .flatMap(a => a)
+    .map(a => ({ amount: Number(a.place?.price) || 0, currency: a.place?.currency || tripCur }))
+  const needsFx = allCostEntries.some(e => e.amount > 0 && e.currency.toUpperCase() !== tripCur)
+  const fxRates = needsFx ? await fetchExchangeRates(tripCur) : null
+  const totalCostLabel = formatMoneySum(allCostEntries, tripCur, loc || 'en', fxRates)
 
   // Span helpers for multi-day transport (mirrors DayPlanSidebar logic)
   const pdfGetDayOrder = (d: Day) => d.day_number
@@ -199,7 +221,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   const daysHtml = sorted.map((day, di) => {
     const assigned = assignments[String(day.id)] || []
     const notes = (dayNotes || []).filter(n => n.day_id === day.id)
-    const cost = dayCost(assignments, day.id, loc)
+    const cost = dayCost(assignments, day.id, loc, tripCur, fxRates)
 
     // Reservations for this day (hotel rendered via accommodations block; car middle-phase rendered in sidebar header only)
     const dayReservations = pdfGetTransportForDay(day.id)
@@ -315,7 +337,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
 
           const chips = [
             place.place_time ? `<span class="chip">${svgClock}${escHtml(place.place_time)}</span>` : '',
-            place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgEuro}${Number(place.price).toLocaleString(loc)} EUR</span>` : '',
+            place.price && parseFloat(place.price) > 0 ? `<span class="chip chip-green">${svgMoney}${formatMoney(Number(place.price), place.currency || trip.currency, loc)}</span>` : '',
           ].filter(Boolean).join('')
 
           return `
@@ -375,18 +397,41 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
         </div>`
       : ''
 
+    // A real <table> so the browser repeats the <thead> day header at the top of
+    // every page an overflowing day spills onto (#1471). CSS `table-header-group`
+    // on a <div> is NOT repeated by Chromium's print engine — only real thead is.
     return `
-      <div class="day-section${di > 0 ? ' page-break' : ''}">
-        <div class="day-header">
-          <span class="day-tag">${escHtml(tr('dayplan.dayN', { n: day.day_number })).toUpperCase()}</span>
-          <span class="day-title">${escHtml(day.title || tr('dayplan.dayN', { n: day.day_number }))}</span>
-          ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
-          ${cost ? `<span class="day-cost">${cost}</span>` : ''}
-        </div>
-        <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
-      </div>`  
+      <table class="day-section${di > 0 ? ' page-break' : ''}">
+        <thead class="day-header"><tr><td>
+          <div class="day-header-bar">
+            <span class="day-tag">${escHtml(tr('dayplan.dayN', { n: day.day_number })).toUpperCase()}</span>
+            <span class="day-title">${escHtml(day.title || tr('dayplan.dayN', { n: day.day_number }))}</span>
+            ${day.date ? `<span class="day-date">${shortDate(day.date, loc)}</span>` : ''}
+            ${cost ? `<span class="day-cost">${cost}</span>` : ''}
+          </div>
+        </td></tr></thead>
+        <tbody class="day-body-group"><tr><td>
+          <div class="day-body">${accommodationsHtml}${itemsHtml}</div>
+        </td></tr></tbody>
+      </table>`
   }).join('')
 
+  // Plugin sections after the days — every value is host-vetted plain text and
+  // still escHtml'd here (same treatment as the core content above).
+  const pluginSectionsHtml = pluginSections.length === 0 ? '' : `
+    <div class="plugin-sections page-break">
+      ${pluginSections.map(s => `
+      <div class="plugin-section">
+        <div class="plugin-section-title">${escHtml(s.title)}</div>
+        ${(s.paragraphs || []).map(p => `<p class="plugin-section-text">${escHtml(p)}</p>`).join('')}
+        ${s.table ? `
+        <table class="plugin-section-table">
+          <thead><tr>${s.table.headers.map(h => `<th>${escHtml(h)}</th>`).join('')}</tr></thead>
+          <tbody>${s.table.rows.map(row => `<tr>${row.map(cell => `<td>${escHtml(cell)}</td>`).join('')}</tr>`).join('')}</tbody>
+        </table>` : ''}
+      </div>`).join('')}
+    </div>`
+
   const html = `<!DOCTYPE html>
 <html lang="${loc.split('-')[0]}">
 <head>
@@ -456,8 +501,10 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   .cover-stat-lbl { font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.4); letter-spacing: 1px; margin-top: 4px; text-transform: uppercase; }
 
   /* ── Day ───────────────────────────────────────── */
+  /* .day-section is a real <table>; its <thead> day header repeats on overflow pages. */
   .page-break { page-break-before: always; }
-  .day-header {
+  .day-section { width: 100%; border-collapse: collapse; table-layout: fixed; }
+  .day-header-bar {
     background: #0f172a; padding: 11px 28px;
     display: flex; align-items: center; gap: 8px;
   }
@@ -465,7 +512,11 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
   .day-title { font-size: 13px; font-weight: 600; color: #fff; flex: 1; }
   .day-date  { font-size: 9px; color: rgba(255,255,255,0.45); }
   .day-cost  { font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.65); }
-  .day-body  { padding: 12px 28px 6px; }
+  /* The gap under the header bar must sit inside the repeated <thead> cell: a block-start
+     padding on .day-body is only painted on the box's first fragment, so overflow pages
+     would render their first card flush against the bar (#1531). */
+  .day-header > tr > td { padding-bottom: 12px; }
+  .day-body  { padding: 0 28px 6px; }
 
   /* accommodation info */
   .day-accommodations-overview { font-size: 12px; }
@@ -538,6 +589,15 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
 
   .empty-day { font-size: 9.5px; color: #cbd5e1; font-style: italic; text-align: center; padding: 14px 0; }
 
+  /* ── Plugin sections ───────────────────────────── */
+  .plugin-sections { padding: 16px 28px 6px; }
+  .plugin-section { margin-bottom: 16px; page-break-inside: avoid; }
+  .plugin-section-title { font-size: 12px; font-weight: 600; color: #1e293b; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #e2e8f0; }
+  .plugin-section-text { font-size: 9.5px; color: #334155; line-height: 1.55; margin-bottom: 5px; }
+  .plugin-section-table { width: 100%; border-collapse: collapse; margin-top: 6px; }
+  .plugin-section-table th { font-size: 8px; font-weight: 600; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; text-align: left; padding: 4px 8px; border-bottom: 1px solid #e2e8f0; }
+  .plugin-section-table td { font-size: 9px; color: #334155; padding: 4px 8px; border-bottom: 1px solid #f1f5f9; }
+
   /* ── Print ─────────────────────────────────────── */
   @media print {
     body { margin: 0; }
@@ -581,8 +641,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
         <div class="cover-stat-num">${totalAssigned}</div>
         <div class="cover-stat-lbl">${escHtml(tr('pdf.planned'))}</div>
       </div>
-      ${totalCost > 0 ? `<div>
-        <div class="cover-stat-num">${totalCost.toLocaleString(loc)}</div>
+      ${totalCostLabel ? `<div>
+        <div class="cover-stat-num">${totalCostLabel}</div>
         <div class="cover-stat-lbl">${escHtml(tr('pdf.costLabel'))}</div>
       </div>` : ''}
     </div>
@@ -591,7 +651,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
 
 <!-- Days -->
 ${daysHtml}
-
+${pluginSectionsHtml}
 </body></html>`
 
   // Open in modal with srcdoc iframe (no URL loading = no X-Frame-Options issue)

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -13,13 +13,14 @@ interface Template {
 
 interface ApplyTemplateButtonProps {
   tripId: number
+  visibility: 'common' | 'personal'
   style: React.CSSProperties
   className?: string
 }
 
 // Dropdown-Button um ein Packing-Template auf den aktuellen Trip anzuwenden.
 // Rendert nichts wenn keine Templates existieren.
-export default function ApplyTemplateButton({ tripId, style, className }: ApplyTemplateButtonProps): React.ReactElement | null {
+export default function ApplyTemplateButton({ tripId, visibility, style, className }: ApplyTemplateButtonProps): React.ReactElement | null {
   const [templates, setTemplates] = useState<Template[]>([])
   const [open, setOpen] = useState(false)
   const [applying, setApplying] = useState(false)
@@ -43,7 +44,7 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
   const handleApply = async (templateId: number) => {
     setApplying(true)
     try {
-      const data = await packingApi.applyTemplate(tripId, templateId)
+      const data = await packingApi.applyTemplate(tripId, templateId, visibility)
       useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
       toast.success(t('packing.templateApplied', { count: data.count }))
       setOpen(false)

client/src/components/Packing/PackingListPanel.test.tsx

@@ -159,17 +159,17 @@ describe('PackingListPanel', () => {
     expect(screen.getByText('Documents')).toBeInTheDocument();
   });
 
-  it('FE-COMP-PACKING-014: Add category button is shown', () => {
+  it('FE-COMP-PACKING-014: Add list button is shown', () => {
     render(<PackingListPanel tripId={1} items={[]} />);
-    // The "Add category" button should be present in the toolbar
-    expect(screen.getByText('Add category')).toBeInTheDocument();
+    // The "Add list" button should be present in the toolbar
+    expect(screen.getByText('Add list')).toBeInTheDocument();
   });
 
   it('FE-COMP-PACKING-015: clicking Add Category shows the category name input', async () => {
     const user = userEvent.setup();
     render(<PackingListPanel tripId={1} items={[]} />);
-    await user.click(screen.getByText('Add category'));
-    await screen.findByPlaceholderText('Category name (e.g. Clothing)');
+    await user.click(screen.getByText('Add list'));
+    await screen.findByPlaceholderText('List name (e.g. Clothing)');
   });
 
   it('FE-COMP-PACKING-016: delete item button exists and triggers API call', async () => {
@@ -340,8 +340,8 @@ describe('PackingListPanel', () => {
     );
     render(<PackingListPanel tripId={1} items={[]} />);
 
-    await user.click(screen.getByText('Add category'));
-    const input = await screen.findByPlaceholderText('Category name (e.g. Clothing)');
+    await user.click(screen.getByText('Add list'));
+    const input = await screen.findByPlaceholderText('List name (e.g. Clothing)');
     await user.type(input, 'Valuables');
     await user.keyboard('{Enter}');
 
@@ -496,7 +496,7 @@ describe('PackingListPanel', () => {
     // Click "Rename" in the menu
     await user.click(await screen.findByText('Rename'));
 
-    // Category name input appears — type new name and save
+    // List name input appears — type new name and save
     const catInput = screen.getByDisplayValue('Clothing');
     await user.clear(catInput);
     await user.type(catInput, 'Apparel');
@@ -858,8 +858,8 @@ describe('PackingListPanel', () => {
     // It's rendered inside the action buttons group (sm:opacity-0 sm:group-hover:opacity-100)
     // In jsdom, CSS classes don't apply so the buttons are accessible
     // The dot button has a circle span inside with category color
-    // Find all buttons with the 'Change Category' title
-    const catChangeBtn = screen.getAllByTitle('Change Category');
+    // Find all buttons with the 'Move to List' title
+    const catChangeBtn = screen.getAllByTitle('Move to List');
     expect(catChangeBtn.length).toBeGreaterThan(0);
     await user.click(catChangeBtn[0]);
 
@@ -999,10 +999,10 @@ describe('PackingListPanel', () => {
     );
     const { container } = render(<PackingListPanel tripId={1} items={[item1, item2]} />);
 
-    // Open context menu and click Delete Category
+    // Open context menu and click Delete List
     const moreBtn = container.querySelector('svg.lucide-more-horizontal')?.closest('button');
     await user.click(moreBtn!);
-    await user.click(await screen.findByText('Delete Category'));
+    await user.click(await screen.findByText('Delete List'));
 
     await waitFor(() => {
       expect(deletedIds).toContain(100);
@@ -1059,7 +1059,7 @@ describe('PackingListPanel', () => {
     render(<PackingListPanel tripId={1} items={[itemA, itemB]} />);
 
     // Use fireEvent (no pointer events) to open the category picker — avoids mouseLeave closing picker
-    const catChangeBtns = screen.getAllByTitle('Change Category');
+    const catChangeBtns = screen.getAllByTitle('Move to List');
     fireEvent.click(catChangeBtns[0]);
 
     // Picker shows available categories — find and click the 'Documents' button (role=button, text=Documents)
@@ -1159,6 +1159,48 @@ describe('PackingListPanel', () => {
     await waitFor(() => expect(applyCalled).toBe(true));
   });
 
+  // #1565: the template used to always land in the shared pool, whichever tab was open.
+  it('FE-COMP-PACKING-061a: applying a template from "My List" sends the personal view', async () => {
+    const user = userEvent.setup();
+    let applyBody: Record<string, unknown> | null = null;
+    server.use(
+      http.get('/api/trips/:id/packing/templates', () =>
+        HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
+      ),
+      http.post('/api/trips/1/packing/apply-template/5', async ({ request }) => {
+        applyBody = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ items: [], count: 12 });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[]} />);
+
+    await user.click(await screen.findByText('My list'));
+    await user.click(await screen.findByText('Apply template'));
+    await user.click(await screen.findByText('Beach Trip'));
+
+    await waitFor(() => expect(applyBody).toEqual({ visibility: 'personal' }));
+  });
+
+  it('FE-COMP-PACKING-061b: applying a template from the shared tab sends the common view', async () => {
+    const user = userEvent.setup();
+    let applyBody: Record<string, unknown> | null = null;
+    server.use(
+      http.get('/api/trips/:id/packing/templates', () =>
+        HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
+      ),
+      http.post('/api/trips/1/packing/apply-template/5', async ({ request }) => {
+        applyBody = (await request.json()) as Record<string, unknown>;
+        return HttpResponse.json({ items: [], count: 12 });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[]} />);
+
+    await user.click(await screen.findByText('Apply template'));
+    await user.click(await screen.findByText('Beach Trip'));
+
+    await waitFor(() => expect(applyBody).toEqual({ visibility: 'common' }));
+  });
+
   it('FE-COMP-PACKING-062: handleBulkImport calls import API and closes modal', async () => {
     const user = userEvent.setup();
     let importBody: Record<string, unknown> | null = null;

client/src/components/Packing/PackingListPanelCategoryGroup.tsx

@@ -10,6 +10,7 @@ import type { PackingItem, PackingBag } from '../../types'
 import { katColor } from './packingListPanel.helpers'
 import type { TripMember, CategoryAssignee } from './usePackingListPanel'
 import { ArtikelZeile } from './PackingListPanelItemRow'
+import { usePluginViewContributions, PluginCardFooter } from '../Plugins/PluginContributions'
 import GuestBadge from '../shared/GuestBadge'
 
 interface KategorieGruppeProps {
@@ -44,6 +45,7 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
   const [offen, setOffen] = useState(true)
   const [dragId, setDragId] = useState<number | null>(null)
   const [overId, setOverId] = useState<number | null>(null)
+  const contribFor = usePluginViewContributions('packing', tripId)
 
   const handleReorderDrop = (targetId: number) => {
     const from = dragId
@@ -265,18 +267,24 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
 
       {offen && (
         <div style={{ padding: '4px 4px 6px' }}>
-          {items.map(item => (
-            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} onDelete={onDeleteItem} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit}
-              tripMembers={tripMembers} currentUserId={currentUserId} onSetSharing={onSetSharing} onClone={onClone} onJoin={onJoin} onLeave={onLeave}
-              drag={canEdit ? {
-                isDragging: dragId === item.id,
-                isOver: overId === item.id && dragId !== null && dragId !== item.id,
-                onStart: (id) => { setDragId(id); setOverId(null) },
-                onOver: (id) => setOverId(id),
-                onEnd: () => { setDragId(null); setOverId(null) },
-                onDrop: handleReorderDrop,
-              } : undefined} />
-          ))}
+          {items.map(item => {
+            const contributions = contribFor(item.id)
+            return (
+              <React.Fragment key={item.id}>
+                <ArtikelZeile item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} onDelete={onDeleteItem} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit}
+                  tripMembers={tripMembers} currentUserId={currentUserId} onSetSharing={onSetSharing} onClone={onClone} onJoin={onJoin} onLeave={onLeave}
+                  drag={canEdit ? {
+                    isDragging: dragId === item.id,
+                    isOver: overId === item.id && dragId !== null && dragId !== item.id,
+                    onStart: (id) => { setDragId(id); setOverId(null) },
+                    onOver: (id) => setOverId(id),
+                    onEnd: () => { setDragId(null); setOverId(null) },
+                    onDrop: handleReorderDrop,
+                  } : undefined} />
+                {contributions.length > 0 && <div style={{ padding: '0 8px 2px' }}><PluginCardFooter items={contributions} tripId={tripId} /></div>}
+              </React.Fragment>
+            )
+          })}
           {/* Inline add item */}
           {canEdit && (showAddItem ? (
             <div style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '4px 8px' }}>

client/src/components/Packing/PackingListPanelItemRow.tsx

@@ -1,9 +1,10 @@
-import { useState } from 'react'
+import { useRef, useState, type ReactNode } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import {
   CheckSquare, Square, Trash2, Plus, Pencil, Package, GripVertical, UserRound, Users, HandHelping,
+  MoreHorizontal,
 } from 'lucide-react'
 import type { PackingItem, PackingBag } from '../../types'
 import { katColor } from './packingListPanel.helpers'
@@ -11,6 +12,7 @@ import { PACKING_PLACEHOLDER_NAME } from './packingListPanel.constants'
 import { QuantityInput } from './PackingListPanelQuantityInput'
 import PackingShareControl from './PackingShareControl'
 import type { TripMember } from './usePackingListPanel'
+import { NumericInput } from '../shared/NumericInput'
 
 interface ArtikelZeileProps {
   item: PackingItem
@@ -40,15 +42,18 @@ interface ArtikelZeileProps {
   }
 }
 
-export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDelete, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true, tripMembers = [], currentUserId, onSetSharing, onClone, onJoin, onLeave, drag }: ArtikelZeileProps) {
+export function ArtikelZeile({ item, tripId, categories, onCategoryChange: _onCategoryChange, onDelete, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true, tripMembers = [], currentUserId, onSetSharing, onClone, onJoin, onLeave, drag }: ArtikelZeileProps) {
   const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
   const [editing, setEditing] = useState(false)
   const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
   const [hovered, setHovered] = useState(false)
   const [showCatPicker, setShowCatPicker] = useState(false)
   const [showBagPicker, setShowBagPicker] = useState(false)
+  const [showItemMenu, setShowItemMenu] = useState(false)
+  const [showMenuCategories, setShowMenuCategories] = useState(false)
   const [bagInlineCreate, setBagInlineCreate] = useState(false)
   const [bagInlineName, setBagInlineName] = useState('')
+  const itemMenuBtnRef = useRef<HTMLButtonElement>(null)
   const { togglePackingItem, updatePackingItem, deletePackingItem } = useTripStore()
   const toast = useToast()
   const { t } = useTranslation()
@@ -79,16 +84,19 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
 
   const handleCatChange = async (cat: string) => {
     setShowCatPicker(false)
+    setShowMenuCategories(false)
+    setShowItemMenu(false)
     if (cat === item.category) return
     try { await updatePackingItem(tripId, item.id, { category: cat }) }
     catch { toast.error(t('common.error')) }
   }
 
   const canDrag = canEdit && !isPlaceholder && !!drag
+  const selectedBag = bags.find(b => b.id === item.bag_id)
 
   return (
     <div
-      className="group"
+      className="group packing-item-row"
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => { setHovered(false); setShowCatPicker(false); setShowBagPicker(false) }}
       onDragOver={canDrag ? (e => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; drag!.onOver(item.id) }) : undefined}
@@ -141,13 +149,14 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
           onChange={e => setEditName(e.target.value)}
           onBlur={handleSaveName}
           onKeyDown={e => { if (e.key === 'Enter') handleSaveName(); if (e.key === 'Escape') { setEditing(false); setEditName(isPlaceholder ? '' : item.name) } }}
-          style={{ flex: 1, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
+          style={{ flex: 1, minWidth: 0, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))', padding: '2px 8px', borderRadius: 6, border: '1px solid var(--border-primary)', outline: 'none', fontFamily: 'inherit' }}
         />
       ) : (
         <span
           onClick={() => canEdit && !item.checked && setEditing(true)}
           style={{
-            flex: 1, fontSize: 'calc(13.5px * var(--fs-scale-body, 1))',
+            flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+            fontSize: 'calc(13.5px * var(--fs-scale-body, 1))',
             cursor: !canEdit || item.checked ? 'default' : 'text',
             color: isPlaceholder ? 'var(--text-faint)' : (item.checked ? 'var(--text-faint)' : 'var(--text-primary)'),
             transition: 'color 200ms cubic-bezier(0.23,1,0.32,1)',
@@ -160,38 +169,37 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
 
       {/* Sharing badges (#858 three-tier) */}
       {!isPlaceholder && sharedToMe && (
-        <span title={t('packing.takenCareOf', { name: item.owner_username || '' })}
+        <span className="packing-row-badge" title={t('packing.takenCareOf', { name: item.owner_username || '' })}
           style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--accent)', background: 'color-mix(in srgb, var(--accent) 12%, transparent)', padding: '1px 7px', borderRadius: 99 }}>
           <HandHelping size={10} /> {t('packing.takenCareOf', { name: item.owner_username || '' })}
         </span>
       )}
       {!isPlaceholder && sharedByMe && (
-        <span title={recipients.map(r => r.username).join(', ')}
+        <span className="packing-row-badge" title={recipients.map(r => r.username).join(', ')}
           style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-muted)', background: 'var(--bg-tertiary)', padding: '1px 7px', borderRadius: 99 }}>
           <UserRound size={10} /> {t('packing.sharedWithCount', { count: recipients.length })}
         </span>
       )}
       {!isPlaceholder && broughtBy && (
-        <span title={t('packing.broughtBy', { name: broughtBy })}
+        <span className="packing-row-badge" title={t('packing.broughtBy', { name: broughtBy })}
           style={{ display: 'inline-flex', alignItems: 'center', gap: 3, flexShrink: 0, fontSize: 'calc(10px * var(--fs-scale-caption, 1))', fontWeight: 600, color: 'var(--text-faint)', padding: '1px 4px' }}>
           <Users size={10} /> {broughtBy}{contributors.length > 0 ? ` +${contributors.length}` : ''}
         </span>
       )}
 
-      {/* Quantity */}
-      {canEdit && <QuantityInput value={item.quantity || 1} onSave={qty => updatePackingItem(tripId, item.id, { quantity: qty })} />}
+      <div className="packing-row-inline-actions" style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
+        {/* Quantity */}
+        {canEdit && <QuantityInput value={item.quantity || 1} onSave={qty => updatePackingItem(tripId, item.id, { quantity: qty })} />}
 
-      {/* Weight + Bag (when enabled) */}
-      {bagTrackingEnabled && (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 6, flexShrink: 0 }}>
+        {/* Weight + Bag (when enabled) */}
+        {bagTrackingEnabled && (
+          <>
           <div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent' }}>
-            <input
-              type="text" inputMode="numeric"
+            <NumericInput
               value={item.weight_grams ?? ''}
               readOnly={!canEdit}
-              onChange={async e => {
+              onValueChange={async raw => {
                 if (!canEdit) return
-                const raw = e.target.value.replace(/[^0-9]/g, '')
                 const v = raw === '' ? null : parseInt(raw)
                 try { await updatePackingItem(tripId, item.id, { weight_grams: v }) } catch { toast.error(t('packing.toast.saveError')) }
               }}
@@ -205,8 +213,8 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
               onClick={() => canEdit && setShowBagPicker(p => !p)}
               style={{
                 width: 22, height: 22, borderRadius: '50%', cursor: canEdit ? 'pointer' : 'default', padding: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
-                border: item.bag_id ? `2.5px solid ${bags.find(b => b.id === item.bag_id)?.color || 'var(--border-primary)'}` : '2px dashed var(--border-primary)',
-                background: item.bag_id ? `${bags.find(b => b.id === item.bag_id)?.color || 'var(--border-primary)'}30` : 'transparent',
+                border: item.bag_id ? `2.5px solid ${selectedBag?.color || 'var(--border-primary)'}` : '2px dashed var(--border-primary)',
+                background: item.bag_id ? `${selectedBag?.color || 'var(--border-primary)'}30` : 'transparent',
               }}
             >
               {!item.bag_id && <Package size={9} className="text-content-faint" />}
@@ -275,11 +283,12 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
               </div>
             )}
           </div>
-        </div>
-      )}
+          </>
+        )}
+      </div>
 
       {canEdit && (
-      <div style={{ display: 'flex', gap: 2, alignItems: 'center', flexShrink: 0 }}>
+      <div className="packing-row-inline-actions" style={{ display: 'flex', gap: 2, alignItems: 'center', flexShrink: 0 }}>
         <div style={{ position: 'relative' }}>
           <button
             onClick={() => setShowCatPicker(p => !p)}
@@ -332,6 +341,138 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDel
         </button>
       </div>
       )}
+
+      {canEdit && (
+        <div className="packing-row-overflow" style={{ display: 'none', flexShrink: 0, position: 'relative' }}>
+          <button
+            ref={itemMenuBtnRef}
+            onClick={() => setShowItemMenu(m => !m)}
+            title={t('common.showMore')}
+            style={{ width: 30, height: 30, borderRadius: 8, border: 'none', background: 'transparent', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--text-faint)', padding: 0 }}
+          >
+            <MoreHorizontal size={16} />
+          </button>
+          {showItemMenu && (() => {
+            const rect = itemMenuBtnRef.current?.getBoundingClientRect()
+            return (
+              <>
+                <div style={{ position: 'fixed', inset: 0, zIndex: 1098 }} onClick={() => { setShowItemMenu(false); setShowMenuCategories(false) }} />
+                <div className="trek-menu-enter" style={{
+                  position: 'fixed',
+                  right: rect ? Math.max(8, window.innerWidth - rect.right) : 8,
+                  top: rect ? rect.bottom + 4 : 0,
+                  zIndex: 1099,
+                  width: 'min(260px, calc(100vw - 16px))',
+                  maxHeight: '70vh',
+                  overflowY: 'auto',
+                  background: 'var(--bg-card)',
+                  border: '1px solid var(--border-primary)',
+                  borderRadius: 10,
+                  boxShadow: '0 8px 28px rgba(0,0,0,0.18)',
+                  padding: 6,
+                }}>
+                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '6px 8px' }}>
+                    <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0 }}>{t('packing.quantity')}</span>
+                    <QuantityInput value={item.quantity || 1} onSave={qty => updatePackingItem(tripId, item.id, { quantity: qty })} />
+                  </div>
+
+                  {bagTrackingEnabled && (
+                    <>
+                      <div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
+                      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '6px 8px' }}>
+                        <span style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', fontWeight: 700, color: 'var(--text-faint)', textTransform: 'uppercase', letterSpacing: 0 }}>{t('packing.totalWeight')}</span>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent' }}>
+                          <NumericInput
+                            value={item.weight_grams ?? ''}
+                            readOnly={!canEdit}
+                            onValueChange={async raw => {
+                              const v = raw === '' ? null : parseInt(raw)
+                              try { await updatePackingItem(tripId, item.id, { weight_grams: v }) } catch { toast.error(t('packing.toast.saveError')) }
+                            }}
+                            placeholder="—"
+                            style={{ width: 42, border: 'none', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'right', fontFamily: 'inherit', outline: 'none', color: 'var(--text-secondary)', background: 'transparent', padding: 0 }}
+                          />
+                          <span style={{ fontSize: 'calc(10px * var(--fs-scale-caption, 1))', color: 'var(--text-faint)', userSelect: 'none' }}>g</span>
+                        </div>
+                      </div>
+                      <div style={{ padding: '2px 0' }}>
+                        <OverflowMenuItem icon={<Package size={13} />} label={selectedBag?.name || t('packing.noBag')} onClick={async () => {
+                          if (item.bag_id) {
+                            try { await updatePackingItem(tripId, item.id, { bag_id: null }) } catch { toast.error(t('packing.toast.saveError')) }
+                          }
+                        }} />
+                        {bags.map(b => (
+                          <OverflowMenuItem key={b.id} icon={<span style={{ width: 10, height: 10, borderRadius: '50%', background: b.color, display: 'inline-block' }} />} label={b.name} active={item.bag_id === b.id} onClick={async () => {
+                            setShowItemMenu(false)
+                            try { await updatePackingItem(tripId, item.id, { bag_id: b.id }) } catch { toast.error(t('packing.toast.saveError')) }
+                          }} />
+                        ))}
+                      </div>
+                    </>
+                  )}
+
+                  <div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
+                  <OverflowMenuItem icon={<span style={{ width: 9, height: 9, borderRadius: '50%', background: katColor(item.category || t('packing.defaultCategory'), categories), display: 'inline-block' }} />} label={t('packing.changeCategory')} onClick={() => setShowMenuCategories(v => !v)} />
+                  {showMenuCategories && (
+                    <div style={{ padding: '2px 0 4px 18px' }}>
+                      {categories.map(cat => (
+                        <OverflowMenuItem key={cat} icon={<span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(cat, categories), display: 'inline-block' }} />} label={cat} active={cat === (item.category || t('packing.defaultCategory'))} onClick={() => handleCatChange(cat)} />
+                      ))}
+                    </div>
+                  )}
+
+                  {canShare && onClone && onJoin && onLeave && (
+                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '6px 8px' }}>
+                      <span style={{ fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', color: 'var(--text-secondary)' }}>{t('packing.share')}</span>
+                      <PackingShareControl
+                        item={item}
+                        tripMembers={tripMembers}
+                        currentUserId={currentUserId}
+                        onSetSharing={onSetSharing!}
+                        onClone={onClone}
+                        onJoin={onJoin}
+                        onLeave={onLeave}
+                      />
+                    </div>
+                  )}
+
+                  <div style={{ height: 1, background: 'var(--bg-tertiary)', margin: '4px 0' }} />
+                  <OverflowMenuItem icon={<Pencil size={13} />} label={t('common.rename')} onClick={() => { setEditing(true); setShowItemMenu(false) }} />
+                  <OverflowMenuItem icon={<Trash2 size={13} />} label={t('common.delete')} danger onClick={() => { setShowItemMenu(false); handleDelete() }} />
+                </div>
+              </>
+            )
+          })()}
+        </div>
+      )}
     </div>
   )
 }
+
+interface OverflowMenuItemProps {
+  icon: ReactNode
+  label: string
+  onClick: () => void
+  active?: boolean
+  danger?: boolean
+}
+
+function OverflowMenuItem({ icon, label, onClick, active = false, danger = false }: OverflowMenuItemProps) {
+  return (
+    <button
+      onClick={onClick}
+      style={{
+        display: 'flex', alignItems: 'center', gap: 8, width: '100%',
+        padding: '7px 9px', borderRadius: 7, border: 'none', cursor: 'pointer',
+        background: active ? 'var(--bg-tertiary)' : 'none',
+        color: danger ? '#ef4444' : 'var(--text-secondary)',
+        fontFamily: 'inherit', fontSize: 'calc(12.5px * var(--fs-scale-body, 1))', textAlign: 'left',
+      }}
+      onMouseEnter={e => { if (!active) e.currentTarget.style.background = danger ? '#fef2f2' : 'var(--bg-tertiary)' }}
+      onMouseLeave={e => { if (!active) e.currentTarget.style.background = 'none' }}
+    >
+      <span style={{ width: 14, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>{icon}</span>
+      <span style={{ flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+    </button>
+  )
+}

client/src/components/Packing/PackingListPanelQuantityInput.test.tsx

@@ -0,0 +1,47 @@
+// FE-COMP-PACKING-082 to FE-COMP-PACKING-083
+import { vi } from 'vitest';
+import { render, screen, waitFor, fireEvent } from '../../../tests/helpers/render';
+import { QuantityInput } from './PackingListPanelQuantityInput';
+
+describe('QuantityInput', () => {
+  it('FE-COMP-PACKING-082: selects the current value on focus so typing replaces it', async () => {
+    render(<QuantityInput value={1} onSave={() => {}} />);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.focus(input);
+
+    await waitFor(() => {
+      expect(input.selectionStart).toBe(0);
+      expect(input.selectionEnd).toBe(1);
+    });
+  });
+
+  it('FE-COMP-PACKING-083: commits the typed quantity on blur', async () => {
+    const onSave = vi.fn();
+    render(<QuantityInput value={1} onSave={onSave} />);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: '6' } });
+    fireEvent.blur(input);
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith(6));
+  });
+
+  it('FE-COMP-PACKING-084: #1513 focus-then-type replaces the value instead of appending to it', async () => {
+    // The end-to-end shape of the bug: with the caret parked at the end, typing 6 over a
+    // quantity of 1 committed 16. Selecting on focus makes the keystroke overwrite.
+    const onSave = vi.fn();
+    render(<QuantityInput value={1} onSave={onSave} />);
+    const input = screen.getByRole('textbox') as HTMLInputElement;
+
+    fireEvent.focus(input);
+    await waitFor(() => expect(input.selectionEnd).toBe(1));
+
+    // A selected value means the browser replaces it — simulate the resulting input event.
+    fireEvent.change(input, { target: { value: '6' } });
+    fireEvent.blur(input);
+
+    await waitFor(() => expect(onSave).toHaveBeenCalledWith(6));
+    expect(onSave).not.toHaveBeenCalledWith(16);
+  });
+});

client/src/components/Packing/PackingListPanelQuantityInput.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { NumericInput } from '../shared/NumericInput'
 
 export function QuantityInput({ value, onSave }: { value: number; onSave: (qty: number) => void }) {
   const [local, setLocal] = useState(String(value))
@@ -12,10 +13,9 @@ export function QuantityInput({ value, onSave }: { value: number; onSave: (qty:
 
   return (
     <div style={{ display: 'flex', alignItems: 'center', gap: 2, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '3px 6px', background: 'transparent', flexShrink: 0 }}>
-      <input
-        type="text" inputMode="numeric"
+      <NumericInput
         value={local}
-        onChange={e => setLocal(e.target.value.replace(/\D/g, ''))}
+        onValueChange={setLocal}
         onBlur={commit}
         onKeyDown={e => { if (e.key === 'Enter') { commit(); (e.target as HTMLInputElement).blur() } }}
         style={{ width: 24, border: 'none', outline: 'none', background: 'transparent', fontSize: 'calc(12px * var(--fs-scale-body, 1))', textAlign: 'right', fontFamily: 'inherit', color: 'var(--text-secondary)', padding: 0 }}

client/src/components/Packing/usePackingListPanel.ts

@@ -33,6 +33,9 @@ export interface PackingListPanelProps {
   clearCheckedSignal?: number
   saveTemplateSignal?: number
   inlineHeader?: boolean
+  // Lifted so an out-of-panel Apply Template button knows the active view (#1565).
+  view?: 'common' | 'personal'
+  onViewChange?: (view: 'common' | 'personal') => void
 }
 
 /**
@@ -42,11 +45,13 @@ export interface PackingListPanelProps {
  * sections below render header, filters, the grouped list, the bag sidebar/
  * modal and the import dialog.
  */
-export function usePackingList({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true }: PackingListPanelProps) {
+export function usePackingList({ tripId, items, openImportSignal = 0, clearCheckedSignal = 0, saveTemplateSignal = 0, inlineHeader = true, view: viewProp, onViewChange }: PackingListPanelProps) {
   const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
   // Three-tier sharing (#858): 'common' = the group pool (where existing items
   // live — non-breaking), 'personal' = my own list (private + shared-to-me).
-  const [view, setView] = useState<'common' | 'personal'>('common')
+  const [ownView, setOwnView] = useState<'common' | 'personal'>('common')
+  const view = viewProp ?? ownView
+  const setView = onViewChange ?? setOwnView
   const [addingCategory, setAddingCategory] = useState(false)
   const [newCatName, setNewCatName] = useState('')
   const { addPackingItem, updatePackingItem, deletePackingItem, togglePackingItem, reorderPackingItems,
@@ -307,7 +312,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const handleApplyTemplate = async (templateId: number) => {
     setApplyingTemplate(true)
     try {
-      const data = await packingApi.applyTemplate(tripId, templateId)
+      const data = await packingApi.applyTemplate(tripId, templateId, view)
       useTripStore.setState(s => ({ packingItems: [...s.packingItems, ...(data.items || [])] }))
       toast.success(t('packing.templateApplied', { count: data.count }))
       setShowTemplateDropdown(false)

client/src/components/Planner/AddressInput.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useRef, useState } from 'react'
+import { MapPin } from 'lucide-react'
+import { mapsApi } from '../../api/client'
+import { useTranslation } from '../../i18n'
+
+interface Props {
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  className?: string
+}
+
+// Free-text address input with location autocomplete, backed by the same maps
+// search as LocationSelect. Unlike LocationSelect the typed text is
+// authoritative: every keystroke reaches the parent so a hand-written address
+// is never lost, and picking a suggestion just replaces the text (#1496).
+export default function AddressInput({ value, onChange, placeholder, className }: Props) {
+  const { t, locale } = useTranslation()
+  const [open, setOpen] = useState(false)
+  const [results, setResults] = useState<any[]>([])
+  const [highlight, setHighlight] = useState(-1)
+  const [loading, setLoading] = useState(false)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+    }
+    if (open) document.addEventListener('mousedown', handler)
+    return () => document.removeEventListener('mousedown', handler)
+  }, [open])
+
+  useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current) }, [])
+
+  // Search on typing only (not on focus or external value changes), so opening
+  // a modal with a saved address doesn't fire a request.
+  const search = (text: string) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    const trimmed = text.trim()
+    if (trimmed.length < 3) { setResults([]); setLoading(false); return }
+    debounceRef.current = setTimeout(async () => {
+      setLoading(true)
+      try {
+        const data = await mapsApi.search(trimmed, locale)
+        setResults(data.places || [])
+        setHighlight(-1)
+      } catch {
+        setResults([])
+      } finally {
+        setLoading(false)
+      }
+    }, 320)
+  }
+
+  const pick = (r: any) => {
+    if (debounceRef.current) clearTimeout(debounceRef.current)
+    onChange(r.address || r.name || '')
+    setOpen(false)
+    setResults([])
+    setLoading(false)
+  }
+
+  const onKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!open || results.length === 0) return
+    if (e.key === 'ArrowDown') { e.preventDefault(); setHighlight(h => Math.min(h + 1, results.length - 1)) }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setHighlight(h => Math.max(h - 1, 0)) }
+    else if (e.key === 'Enter' && highlight >= 0) { e.preventDefault(); pick(results[highlight]) }
+    else if (e.key === 'Escape') setOpen(false)
+  }
+
+  return (
+    <div ref={wrapRef} style={{ position: 'relative' }}>
+      <input
+        type="text"
+        value={value}
+        placeholder={placeholder}
+        onChange={e => { onChange(e.target.value); setOpen(true); search(e.target.value) }}
+        onFocus={() => setOpen(true)}
+        onKeyDown={onKey}
+        className={className}
+      />
+      {open && (loading || results.length > 0) && (
+        <div className="bg-surface-card" style={{ position: 'absolute', top: 'calc(100% + 4px)', left: 0, right: 0, border: '1px solid var(--border-primary)', borderRadius: 10, boxShadow: '0 8px 24px rgba(0,0,0,0.18)', maxHeight: 260, overflowY: 'auto', zIndex: 1000 }}>
+          {loading && results.length === 0 && (
+            <div className="text-content-faint" style={{ padding: 10, fontSize: 'calc(12px * var(--fs-scale-body, 1))' }}>{t('common.loading')}</div>
+          )}
+          {results.map((r, i) => (
+            <button
+              key={`${r.osm_id || r.google_place_id || i}`}
+              type="button"
+              onClick={() => pick(r)}
+              onMouseEnter={() => setHighlight(i)}
+              className={`text-content ${i === highlight ? 'bg-surface-hover' : 'bg-transparent'}`}
+              style={{
+                display: 'flex', alignItems: 'flex-start', gap: 8, width: '100%',
+                padding: '8px 12px', border: 'none', cursor: 'pointer', textAlign: 'left',
+                fontFamily: 'inherit',
+              }}
+            >
+              <MapPin size={12} className="text-content-faint" style={{ marginTop: 2, flexShrink: 0 }} />
+              <span style={{ flex: 1, minWidth: 0 }}>
+                <div style={{ fontSize: 'calc(13px * var(--fs-scale-body, 1))', fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.name || r.address}</div>
+                {r.address && r.name !== r.address && (
+                  <div className="text-content-faint" style={{ fontSize: 'calc(11px * var(--fs-scale-caption, 1))', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.address}</div>
+                )}
+              </span>
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/Planner/AirTrailImportModal.test.tsx

@@ -0,0 +1,202 @@
+// FE-PLANNER-AIRTRAIL-001 to FE-PLANNER-AIRTRAIL-008
+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, buildReservation } from '../../../tests/helpers/factories';
+import type { AirtrailFlight } from '@trek/shared';
+import AirTrailImportModal, { detectConnections } from './AirTrailImportModal';
+
+const flight = (over: Partial<AirtrailFlight> = {}): AirtrailFlight => ({
+  id: '101',
+  fromCode: 'BRU',
+  fromName: 'Brussels',
+  toCode: 'HEL',
+  toName: 'Helsinki-Vantaa',
+  date: '2026-08-01',
+  departure: '2026-08-01T06:00:00.000+00:00',
+  arrival: '2026-08-01T09:30:00.000+00:00',
+  airline: 'Finnair',
+  flightNumber: 'AY1502',
+  aircraft: null,
+  seatClass: 'economy',
+  ...over,
+});
+
+const legHelJfk = (): AirtrailFlight =>
+  flight({
+    id: '102',
+    fromCode: 'HEL',
+    fromName: 'Helsinki-Vantaa',
+    toCode: 'JFK',
+    toName: 'John F. Kennedy Intl.',
+    departure: '2026-08-01T11:00:00.000+00:00',
+    arrival: '2026-08-01T19:00:00.000+00:00',
+    flightNumber: 'AY15',
+  });
+
+const unrelatedFlight = (): AirtrailFlight =>
+  flight({
+    id: '103',
+    fromCode: 'LHR',
+    fromName: 'London Heathrow',
+    toCode: 'JFK',
+    toName: 'John F. Kennedy Intl.',
+    date: '2026-08-05',
+    departure: '2026-08-05T10:00:00.000+00:00',
+    arrival: '2026-08-05T18:00:00.000+00:00',
+    flightNumber: 'BA117',
+  });
+
+describe('detectConnections (#1535)', () => {
+  it('FE-PLANNER-AIRTRAIL-001: chains flights that connect at the same airport within 24h', () => {
+    const chains = detectConnections([legHelJfk(), flight(), unrelatedFlight()]);
+    expect(chains).toHaveLength(1);
+    expect(chains[0].map(f => f.id)).toEqual(['101', '102']);
+  });
+
+  it('FE-PLANNER-AIRTRAIL-002: does not chain when the layover exceeds 24h', () => {
+    const late = { ...legHelJfk(), date: '2026-08-03', departure: '2026-08-03T11:00:00.000+00:00', arrival: '2026-08-03T19:00:00.000+00:00' };
+    expect(detectConnections([flight(), late])).toHaveLength(0);
+  });
+
+  it('FE-PLANNER-AIRTRAIL-003: skips flights without instants instead of guessing', () => {
+    expect(detectConnections([flight({ departure: null, arrival: null }), legHelJfk()])).toHaveLength(0);
+  });
+
+  it('FE-PLANNER-AIRTRAIL-009: does not chain an out-and-back return into a bogus connection', () => {
+    const returnFlight = flight({
+      id: '105',
+      fromCode: 'HEL',
+      fromName: 'Helsinki-Vantaa',
+      toCode: 'BRU',
+      toName: 'Brussels',
+      departure: '2026-08-01T18:00:00.000+00:00',
+      arrival: '2026-08-01T21:30:00.000+00:00',
+      flightNumber: 'AY1503',
+    });
+    expect(detectConnections([flight(), returnFlight])).toHaveLength(0);
+  });
+});
+
+describe('AirTrailImportModal', () => {
+  const defaultProps = { isOpen: true, onClose: vi.fn(), tripId: 1 };
+
+  beforeEach(() => {
+    resetAllStores();
+    seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true });
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1, start_date: '2026-08-01', end_date: '2026-08-10' }),
+      reservations: [],
+    });
+    server.use(
+      http.get('/api/integrations/airtrail/flights', () =>
+        HttpResponse.json({ flights: [flight(), legHelJfk(), unrelatedFlight()] }),
+      ),
+      http.get('/api/trips/1/reservations', () => HttpResponse.json({ reservations: [] })),
+    );
+  });
+
+  it('FE-PLANNER-AIRTRAIL-004: offers to join a detected connection, on by default', async () => {
+    render(<AirTrailImportModal {...defaultProps} />);
+    const joinRow = await screen.findByText(/one flight with a layover in HEL/i);
+    expect(joinRow).toBeInTheDocument();
+    // No join offer for the unrelated flight.
+    expect(screen.queryByText(/layover in JFK/i)).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-AIRTRAIL-005: sends the chain as a connection on import', async () => {
+    const user = userEvent.setup();
+    let body: any = null;
+    server.use(
+      http.post('/api/trips/1/reservations/import/airtrail', async ({ request }) => {
+        body = await request.json();
+        return HttpResponse.json({ imported: body.flightIds, skipped: [] });
+      }),
+    );
+    render(<AirTrailImportModal {...defaultProps} />);
+    await screen.findByText(/one flight with a layover in HEL/i);
+    await user.click(screen.getByRole('button', { name: /Import 3/i }));
+    await waitFor(() => expect(body).not.toBeNull());
+    expect([...body.flightIds].sort()).toEqual(['101', '102', '103']);
+    expect(body.connections).toEqual([['101', '102']]);
+  });
+
+  it('FE-PLANNER-AIRTRAIL-006: sends no connection when the join is toggled off', async () => {
+    const user = userEvent.setup();
+    let body: any = null;
+    server.use(
+      http.post('/api/trips/1/reservations/import/airtrail', async ({ request }) => {
+        body = await request.json();
+        return HttpResponse.json({ imported: body.flightIds, skipped: [] });
+      }),
+    );
+    render(<AirTrailImportModal {...defaultProps} />);
+    await user.click(await screen.findByText(/one flight with a layover in HEL/i));
+    await user.click(screen.getByRole('button', { name: /Import 3/i }));
+    await waitFor(() => expect(body).not.toBeNull());
+    expect(body.connections).toBeUndefined();
+  });
+
+  it('FE-PLANNER-AIRTRAIL-007: re-enabling the join selects all of its legs', async () => {
+    const user = userEvent.setup();
+    render(<AirTrailImportModal {...defaultProps} />);
+    const joinRow = await screen.findByText(/one flight with a layover in HEL/i);
+    // Deselect one member — the join reads unchecked, one click brings both back.
+    await user.click(screen.getByText('Finnair AY15'));
+    expect(screen.getByRole('button', { name: /Import 2/i })).toBeInTheDocument();
+    await user.click(joinRow);
+    expect(screen.getByRole('button', { name: /Import 3/i })).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-AIRTRAIL-010: a surviving sub-chain keeps its join offer when a later leg was already imported', async () => {
+    const legJfkLax = flight({
+      id: '106',
+      fromCode: 'JFK',
+      fromName: 'John F. Kennedy Intl.',
+      toCode: 'LAX',
+      toName: 'Los Angeles Intl.',
+      departure: '2026-08-01T21:00:00.000+00:00',
+      arrival: '2026-08-02T00:30:00.000+00:00',
+      flightNumber: 'AY99',
+    });
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1, start_date: '2026-08-01', end_date: '2026-08-10' }),
+      reservations: [
+        buildReservation({ type: 'flight', external_source: 'airtrail', external_id: '106' }) as any,
+      ],
+    });
+    server.use(
+      http.get('/api/integrations/airtrail/flights', () =>
+        HttpResponse.json({ flights: [flight(), legHelJfk(), legJfkLax] }),
+      ),
+    );
+    render(<AirTrailImportModal {...defaultProps} />);
+    // BRU→HEL→JFK still connects even though JFK→LAX is gone from the pool.
+    expect(await screen.findByText(/one flight with a layover in HEL/i)).toBeInTheDocument();
+    expect(screen.getByText(/^Imported$/)).toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-AIRTRAIL-008: legs of a joined import are marked imported via metadata.airtrail_ids', async () => {
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1, start_date: '2026-08-01', end_date: '2026-08-10' }),
+      reservations: [
+        buildReservation({
+          type: 'flight',
+          external_source: 'airtrail',
+          external_id: '101',
+          metadata: JSON.stringify({ airtrail_ids: ['101', '102'] }),
+        }) as any,
+      ],
+    });
+    render(<AirTrailImportModal {...defaultProps} />);
+    await screen.findByText('Finnair AY1502');
+    // Both legs disabled — including the one whose id only lives in the metadata.
+    expect(screen.getAllByText(/^Imported$/)).toHaveLength(2);
+    // A chain with an imported member cannot be joined again.
+    expect(screen.queryByText(/one flight with a layover/i)).not.toBeInTheDocument();
+  });
+});

client/src/components/Planner/AirTrailImportModal.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
 import { airtrailApi, reservationsApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
+import { parseReservationMetadata } from '../../utils/flightLegs'
 
 interface AirTrailImportModalProps {
   isOpen: boolean
@@ -15,6 +16,40 @@ interface AirTrailImportModalProps {
   pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
 }
 
+/**
+ * Ordered chains of connecting flights — each arrives where the next departs,
+ * onward within 24 h — that the picker offers to import as ONE multi-leg
+ * booking with the connection as a layover stop (#1535). A flight landing back
+ * at the chain's origin is a return, not a connection, so a same-day
+ * out-and-back never gets a join offer. Same rules the server re-validates
+ * with.
+ */
+export function detectConnections(flights: AirtrailFlight[]): AirtrailFlight[][] {
+  const sorted = flights
+    .filter(f => f.departure && f.arrival && f.fromCode && f.toCode)
+    .sort((a, b) => Date.parse(a.departure!) - Date.parse(b.departure!))
+  const chains: AirtrailFlight[][] = []
+  let chain: AirtrailFlight[] = []
+  for (const f of sorted) {
+    const prev = chain[chain.length - 1]
+    if (prev) {
+      const gap = Date.parse(f.departure!) - Date.parse(prev.arrival!)
+      if (
+        prev.toCode!.toUpperCase() === f.fromCode!.toUpperCase() &&
+        f.toCode!.toUpperCase() !== chain[0].fromCode!.toUpperCase() &&
+        gap >= 0 && gap <= 24 * 3600 * 1000
+      ) {
+        chain.push(f)
+        continue
+      }
+    }
+    if (chain.length > 1) chains.push(chain)
+    chain = [f]
+  }
+  if (chain.length > 1) chains.push(chain)
+  return chains
+}
+
 /** Locale-aware date (e.g. de → 13.06.2026, en-US → 06/13/2026). */
 function fmtDate(d: string | null, locale: string): string {
   if (!d) return ''
@@ -44,11 +79,16 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
   const [flights, setFlights] = useState<AirtrailFlight[]>([])
   const [selected, setSelected] = useState<Set<string>>(() => new Set())
 
-  // AirTrail flight ids already linked to a reservation in this trip.
+  // AirTrail flight ids already linked to a reservation in this trip. A joined
+  // multi-leg import carries only its first leg in external_id — the other legs
+  // sit in metadata.airtrail_ids (#1535).
   const importedIds = useMemo(() => {
     const set = new Set<string>()
     for (const r of reservations) {
-      if (r.external_source === 'airtrail' && r.external_id) set.add(String(r.external_id))
+      if (r.external_source !== 'airtrail') continue
+      if (r.external_id) set.add(String(r.external_id))
+      const ids = parseReservationMetadata(r).airtrail_ids
+      if (Array.isArray(ids)) for (const id of ids) set.add(String(id))
     }
     return set
   }, [reservations])
@@ -56,10 +96,27 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
   const inRange = (f: AirtrailFlight): boolean =>
     !!(f.date && trip?.start_date && trip?.end_date && f.date >= trip.start_date && f.date <= trip.end_date)
 
+  // Detected connection chains that can still be joined. Already-imported
+  // flights are excluded BEFORE detection so a surviving sub-chain (e.g. the
+  // first two legs when the third was imported earlier) still gets its offer.
+  // Joining is on by default; joinOff remembers the chains the user opted out of.
+  const chains = useMemo(
+    () => detectConnections(flights.filter(f => !importedIds.has(f.id))),
+    [flights, importedIds],
+  )
+  const chainKey = (chain: AirtrailFlight[]) => chain.map(f => f.id).join('+')
+  const chainOf = useMemo(() => {
+    const map = new Map<string, AirtrailFlight[]>()
+    for (const chain of chains) for (const f of chain) map.set(f.id, chain)
+    return map
+  }, [chains])
+  const [joinOff, setJoinOff] = useState<Set<string>>(() => new Set())
+
   useEffect(() => {
     if (!isOpen) return
     setError('')
     setSelected(new Set())
+    setJoinOff(new Set())
     setLoading(true)
     airtrailApi
       .flights()
@@ -94,6 +151,28 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
     })
   }
 
+  const chainJoined = (chain: AirtrailFlight[]) =>
+    !joinOff.has(chainKey(chain)) && chain.every(f => selected.has(f.id))
+
+  const toggleJoin = (chain: AirtrailFlight[]) => {
+    const key = chainKey(chain)
+    if (chainJoined(chain)) {
+      setJoinOff(prev => new Set(prev).add(key))
+    } else {
+      // Turning the join on implies wanting all of its legs.
+      setJoinOff(prev => {
+        const next = new Set(prev)
+        next.delete(key)
+        return next
+      })
+      setSelected(prev => {
+        const next = new Set(prev)
+        for (const f of chain) next.add(f.id)
+        return next
+      })
+    }
+  }
+
   const handleClose = () => { onClose() }
 
   const handleImport = async () => {
@@ -102,7 +181,8 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
     setImporting(true)
     setError('')
     try {
-      const result: AirtrailImportResult = await airtrailApi.import(tripId, ids)
+      const connections = chains.filter(chainJoined).map(chain => chain.map(f => f.id))
+      const result: AirtrailImportResult = await airtrailApi.import(tripId, ids, connections)
       await loadReservations(tripId)
 
       const imported = result.imported ?? []
@@ -175,6 +255,58 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
     )
   }
 
+  const renderChain = (chain: AirtrailFlight[]) => {
+    const joined = chainJoined(chain)
+    const stops = chain.slice(0, -1).map(f => f.toCode ?? f.toName ?? '?').join(', ')
+    return (
+      <div key={chainKey(chain)} style={{ border: '1px solid var(--border-primary)', borderRadius: 12, padding: '8px 8px 0', marginBottom: 8 }}>
+        {chain.map(renderFlight)}
+        <button
+          onClick={() => toggleJoin(chain)}
+          className="bg-transparent"
+          style={{
+            display: 'flex', alignItems: 'center', gap: 10, width: '100%', textAlign: 'left',
+            border: 'none', borderTop: '1px solid var(--border-faint)', borderRadius: 0,
+            padding: '9px 4px 10px', cursor: 'pointer', fontFamily: 'inherit',
+          }}
+        >
+          <span style={{
+            flexShrink: 0, width: 16, height: 16, borderRadius: 5,
+            border: `1.5px solid ${joined ? 'var(--accent)' : 'var(--border-primary)'}`,
+            background: joined ? 'var(--accent)' : 'transparent',
+            display: 'flex', alignItems: 'center', justifyContent: 'center',
+          }}>
+            {joined && <Check size={11} color="var(--accent-text)" strokeWidth={3} />}
+          </span>
+          <span style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', color: 'var(--text-primary)' }}>
+            {t('reservations.airtrail.joinConnection', { stops })}
+          </span>
+        </button>
+      </div>
+    )
+  }
+
+  // A chain renders once as a group, at the position of its first listed leg —
+  // its other legs are swallowed wherever else they would appear. Computed per
+  // section up front so a chain straddling the trip range can't leave the other
+  // section holding nothing but its header.
+  const sectionItems = useMemo(() => {
+    const rendered = new Set<string>()
+    const build = (list: AirtrailFlight[]) =>
+      list.flatMap((f): Array<{ key: string; chain?: AirtrailFlight[]; flight?: AirtrailFlight }> => {
+        const chain = chainOf.get(f.id)
+        if (!chain) return [{ key: f.id, flight: f }]
+        const key = chain.map(c => c.id).join('+')
+        if (rendered.has(key)) return []
+        rendered.add(key)
+        return [{ key, chain }]
+      })
+    return { during: build(during), others: build(others) }
+  }, [during, others, chainOf])
+
+  const renderItem = (item: { chain?: AirtrailFlight[]; flight?: AirtrailFlight }) =>
+    item.chain ? renderChain(item.chain) : renderFlight(item.flight!)
+
   return ReactDOM.createPortal(
     <div
       className="bg-[rgba(0,0,0,0.4)]"
@@ -213,21 +345,21 @@ export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo
             </div>
           )}
 
-          {!loading && during.length > 0 && (
+          {!loading && sectionItems.during.length > 0 && (
             <>
               <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-primary)', margin: '2px 0 8px' }}>
                 {t('reservations.airtrail.duringTrip')}
               </div>
-              {during.map(renderFlight)}
+              {sectionItems.during.map(renderItem)}
             </>
           )}
 
-          {!loading && others.length > 0 && (
+          {!loading && sectionItems.others.length > 0 && (
             <>
-              <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-faint)', margin: `${during.length > 0 ? 14 : 2}px 0 8px` }}>
+              <div style={{ fontSize: 'calc(12px * var(--fs-scale-body, 1))', fontWeight: 700, color: 'var(--text-faint)', margin: `${sectionItems.during.length > 0 ? 14 : 2}px 0 8px` }}>
                 {t('reservations.airtrail.otherFlights')}
               </div>
-              {others.map(renderFlight)}
+              {sectionItems.others.map(renderItem)}
             </>
           )}
 

client/src/components/Planner/DayDetailPanel.test.tsx

@@ -564,6 +564,30 @@ describe('DayDetailPanel', () => {
     });
   });
 
+  it('FE-PLANNER-DAYDETAIL-067: hotel picker defaults check-out to the day AFTER check-in', async () => {
+    const day2 = buildDay({ id: 2, trip_id: 1, date: '2025-06-16', title: 'Day 2' });
+    const day3 = buildDay({ id: 3, trip_id: 1, date: '2025-06-17', title: 'Day 3' });
+    render(<DayDetailPanel {...defaultProps} days={[day, day2, day3]} />);
+    await userEvent.click(await screen.findByText(/Add accommodation/i));
+    await waitFor(() => {
+      const portal = document.body.querySelector('[style*="z-index: 99999"]');
+      // Closed selects render only their chosen label: check-in on the opened
+      // day, check-out on the following one — nobody stays a few hours.
+      expect(portal?.textContent).toContain('Day in Paris');
+      expect(portal?.textContent).toContain('Day 2');
+      expect(portal?.textContent).not.toContain('Day 3');
+    });
+  });
+
+  it('FE-PLANNER-DAYDETAIL-068: hotel picker falls back to a same-day range on the last trip day', async () => {
+    render(<DayDetailPanel {...defaultProps} days={[day]} />);
+    await userEvent.click(await screen.findByText(/Add accommodation/i));
+    await waitFor(() => {
+      const portal = document.body.querySelector('[style*="z-index: 99999"]');
+      expect(portal?.textContent?.match(/Day in Paris/g)).toHaveLength(2);
+    });
+  });
+
   it('FE-PLANNER-DAYDETAIL-034: accommodation with all fields shows full details grid', async () => {
     server.use(
       http.get('/api/trips/1/accommodations', () =>