chore: release v0.1.0.109

Preserve existing summaries when crew edits entries and show a read-only hint in the editor.

Co-authored-by: Cursor <cursoragent@cursor.com>

.cursor/skills/merge/SKILL.md

@@ -0,0 +1,182 @@
+---
+name: merge
+description: >-
+  Merge Git branches safely — fetch latest, merge or rebase onto master, resolve
+  conflicts intelligently, and verify the result. Use when the user asks to merge
+  branches, sync with master, resolve merge conflicts, or bring a feature branch
+  up to date.
+---
+
+# Git Merge
+
+Führe Branch-Merges sicher und nachvollziehbar aus. Für PR-Review, CI und
+Comment-Triage siehe den **babysit**-Skill — dieser Skill deckt die Git-Merge-
+Operation selbst ab.
+
+## Projekt-Kontext
+
+- **Basis-Branch:** `master` (nicht `main`)
+- **Monorepo:** `client/` (React PWA) und `server/` (Express API) — Konflikte
+  können in beiden liegen
+
+## Sicherheitsregeln (immer einhalten)
+
+- **Niemals** `git config` ändern
+- **Niemals** `--no-verify`, `--no-gpg-sign` o.ä. ohne explizite Anfrage
+- **Niemals** `push --force` auf `master` — bei Bedarf warnen und abbrechen
+- **Niemals** destruktive Befehle (`reset --hard`, `clean -fd`) ohne explizite Anfrage
+- **Niemals** interaktive Git-Befehle (`-i`-Flags) — nicht unterstützt
+- **Kein Commit** ohne explizite Anfrage des Users
+- **Kein Push** ohne explizite Anfrage des Users
+
+## Workflow
+
+### 1. Ausgangslage klären
+
+Parallel ausführen:
+
+```bash
+git status
+git branch -vv
+git log --oneline -5
+```
+
+Ermittle:
+
+- Aktueller Branch
+- Ziel-Branch (Standard: `master`)
+- Ob uncommittete Änderungen vorliegen
+- Ob der Branch einen Remote-Tracking-Branch hat
+
+**Bei uncommitteten Änderungen:** Stashen (`git stash push -m "pre-merge"`) nur
+mit Zustimmung oder wenn der User es verlangt hat. Sonst stoppen und melden.
+
+### 2. Merge-Strategie wählen
+
+| Situation | Empfehlung |
+|-----------|------------|
+| Feature-Branch aktuell halten | `git merge origin/master` (Merge-Commit) |
+| Linearer Verlauf gewünscht | `git rebase origin/master` (nur wenn User Rebase verlangt) |
+| Zwei Feature-Branches zusammenführen | `git merge <branch>` auf Ziel-Branch |
+
+**Standard:** Merge (nicht Rebase), es sei denn der User verlangt Rebase.
+
+### 3. Remote aktualisieren
+
+```bash
+git fetch origin
+```
+
+Vor dem Merge prüfen, wie weit der Branch hinter `origin/master` liegt:
+
+```bash
+git log --oneline HEAD..origin/master
+git log --oneline origin/master..HEAD
+```
+
+### 4. Merge ausführen
+
+**Feature-Branch mit master synchronisieren** (häuigster Fall):
+
+```bash
+git checkout <feature-branch>
+git merge origin/master
+```
+
+**Branch in master mergen** (nur wenn User das ausdrücklich will — normalerweise
+passiert das via PR):
+
+```bash
+git checkout master
+git pull origin master
+git merge <feature-branch>
+```
+
+Merge-Commit-Nachricht kurz und sachlich halten, z.B.:
+`Merge branch 'master' into feature/push-notifications-owner`
+
+### 5. Konflikte lösen
+
+Konfliktdateien finden:
+
+```bash
+git diff --name-only --diff-filter=U
+```
+
+**Pro Konfliktdatei:**
+
+1. Datei lesen und beide Seiten verstehen (HEAD = eigener Branch, incoming = gemergter Branch)
+2. Intent beider Änderungen erhalten — nicht blind eine Seite wählen
+3. Konfliktmarker entfernen (`<<<<<<<`, `=======`, `>>>>>>>`)
+4. Bei widersprüchlicher Intent: Merge abbrechen und User fragen
+
+```bash
+git merge --abort   # oder: git rebase --abort
+```
+
+**Typische Konflikt-Muster in diesem Projekt:**
+
+| Bereich | Hinweis |
+|---------|---------|
+| `package-lock.json` | Nach manueller Lösung `npm install` im betroffenen Paket (`client/` oder `server/`) ausführen |
+| i18n (`client/src/i18n/`) | Beide Sprachkeys (DE + EN) behalten, keine Keys verlieren |
+| Prisma/Schema | Migrationen beider Seiten zusammenführen, nicht überschreiben |
+| Verschlüsselung/Auth | Vorsichtig — keine Sicherheitslogik stillschweigend vereinfachen |
+
+Nach jeder gelösten Datei:
+
+```bash
+git add <file>
+```
+
+Merge abschließen (nur wenn User Commit verlangt hat):
+
+```bash
+git commit -m "$(cat <<'EOF'
+Merge branch 'master' into <feature-branch>
+
+EOF
+)"
+```
+
+### 6. Verifizieren
+
+Nach erfolgreichem Merge:
+
+```bash
+git status
+git log --oneline -5
+```
+
+Relevante Checks je nach betroffenen Bereichen:
+
+```bash
+# Client
+cd client && npm run build
+
+# Server
+cd server && npm run build
+```
+
+Bei Lockfile-Konflikten oder Dependency-Änderungen: Build in beiden Paketen prüfen.
+
+### 7. Abschluss
+
+- Ergebnis dem User mitteilen: welche Branches, wie viele Konflikte, was gelöst wurde
+- Bei `git stash`: erinnern, Stash wieder anzuwenden (`git stash pop`)
+- Push nur auf explizite Anfrage: `git push origin <branch>`
+
+## Wann abbrechen und fragen
+
+- Widersprüchliche fachliche Intent (z.B. beide Seiten ändern dieselbe Logik unterschiedlich)
+- Konflikte in Krypto-, Auth- oder Sync-Kernlogik ohne klares „richtig“
+- Merge würde `.env`, Credentials oder Secrets einschließen
+- User wollte nur Status prüfen, nicht tatsächlich mergen
+
+## Abgrenzung zu anderen Skills
+
+| Skill | Wann |
+|-------|------|
+| **merge** (dieser) | Git merge/rebase, Konflikte, Branch sync |
+| **babysit** | PR merge-ready: Comments, CI, PR-Konflikte im PR-Kontext |
+| **creating-pull-requests** | PR erstellen und pushen |

.env.example

@@ -1,7 +1,49 @@
 OpenWeatherMapAPIKey=<owm_api_key>
 
+# OpenRouter API (AI travel day summaries — server-side proxy)
+OpenRouterAPIKey=
+# Optional model override (default: anthropic/claude-3.5-haiku)
+# Valid examples: anthropic/claude-3.5-haiku, anthropic/claude-3-haiku, anthropic/claude-haiku-4.5
+# OpenRouterModel=anthropic/claude-3.5-haiku
+
+# DeepL API (for scripts/translate-locales.mjs and scripts/translate-flyer.mjs)
+# Free plan keys use api-free.deepl.com automatically (suffix :fx)
+DeepLAPIKey=
+
 # Passkey configuration (WebAuthn Relying Party ID and Origin)
-# For local dev: localhost and http://localhost
-# For production: e.g. kapteins-daagbok.eu and https://kapteins-daagbok.eu
+# For local dev: use localhost (NOT 127.0.0.1 — browsers reject IP addresses for Passkeys)
+# Production (kapteins-daagbok.eu):
+#   RP_ID=kapteins-daagbok.eu
+#   ORIGIN=https://kapteins-daagbok.eu
 RP_ID=localhost
-ORIGIN=http://localhost
+# Must match the frontend URL exactly (Vite dev: http://localhost:5173; Docker: http://localhost)
+ORIGIN=http://localhost:5173
+
+# Behind reverse proxy — see docs/deployment/npm-security.md
+# Docker Compose (NPM → frontend nginx → backend): TRUST_PROXY=1
+# TRUST_PROXY=1
+
+# Docker Compose database (required for production deploy)
+# Generate: openssl rand -hex 24
+# Rotate on running server: ./scripts/rotate-postgres-password.sh (see docs/deployment/postgres-password.md)
+# POSTGRES_USER=postgres
+# POSTGRES_PASSWORD=
+# POSTGRES_DB=daagbox
+# Optional: comma-separated CORS origins (defaults to ORIGIN; 127.0.0.1 may be allowed for CORS but not for login)
+# CORS_ORIGINS=http://localhost:5173
+
+# API session signing (min. 32 chars; required in production)
+# Generate: openssl rand -base64 48
+SESSION_SECRET=
+
+# Web Push (VAPID) — generate with: npx web-push generate-vapid-keys
+# Public key may also be set on the client as VITE_VAPID_PUBLIC_KEY
+VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+VAPID_SUBJECT=mailto:support@kapteins-daagbok.eu
+
+# Feedback via Ntfy (https://ntfy.sh or self-hosted)
+# NTFY_TOPIC: topic name only (not the full URL)
+NTFY_SERVER=https://ntfy.sh
+NTFY_TOPIC=kapteins-daagbok-feedback
+NTFY_TOKEN=tk_example_ntfy_access_token

.gitignore

@@ -11,3 +11,5 @@ server/dist/
 .env.local
 .env.*.local
 *.log
+
+userfeedback/

.planning/designs/HYBRID-ELECTRONIC-SIGNATURES.md

@@ -168,7 +168,7 @@ Beim Laden eines Eintrags: `computedHash !== sig.entryHash` → UI-Warnung.
 
 Neuer Router: `server/src/routes/sign.ts` → Mount unter `/api/sign`
 
-Auth wie bestehend: Header `X-User-Id` (siehe `sync.ts`).
+Auth wie bestehend: HttpOnly-Session-Cookie `daagbok_session` nach WebAuthn (`server/src/middleware/auth.ts`, Client `apiFetch` mit `credentials: 'include'`).
 
 ### 4.1 `POST /api/sign/options`
 
@@ -472,7 +472,7 @@ test('isSignatureValidForEntry')
 | WebAuthn Login | `client/src/services/auth.ts`, `server/src/routes/auth.ts` |
 | Collaborators | `server/src/routes/collaboration.ts`, `SettingsForm.tsx` |
 | E2E-Einträge | `EntryPayload` in `server/prisma/schema.prisma` |
-| Auth-Header | `X-User-Id` in `server/src/routes/sync.ts` |
+| API-Auth | Session-Cookie via `requireUser` in `server/src/middleware/auth.ts` |
 
 ---
 

README.md

@@ -1,8 +1,8 @@
 # Kapteins Daagbok
 
-Digitales Yacht-Logbuch als Progressive Web App (PWA) — offline-fähig, End-to-End-verschlüsselt und mit Passkey-Anmeldung.
+Digitales Yacht-Logbuch als Progressive Web App (PWA) — **kostenlos**, **werbefrei**, offline-fähig, End-to-End-verschlüsselt und mit Passkey-Anmeldung.
 
-**Live:** [kapteins-daagbok.eu](https://kapteins-daagbok.eu)
+**Live:** [kapteins-daagbok.eu](https://kapteins-daagbok.eu) · **Demo:** [kapteins-daagbok.eu/demo](https://kapteins-daagbok.eu/demo)
 
 ## Überblick
 
@@ -13,23 +13,36 @@ Alle sensiblen Inhalte werden **clientseitig verschlüsselt** (Web Crypto API).
 ## Funktionen
 
 - **Passkey-Authentifizierung** (WebAuthn) mit optionaler Recovery-Phrase und lokalem PIN-Fallback
-- **Mehrere Logbücher** pro Benutzerkonto
+- **Mehrere Logbücher** pro Benutzerkonto — eigene Logbücher und per Einladung geteilte Logbücher (Crew-Zugang) klar getrennt
 - **Reisetage** mit Hafen, Wetter, Tankständen, Ereignissen und Tagesnummer
+- **Kompass-Dial** für MgK- und RwK-Kurse — Ring-Eingabe, Gradfeld, Schrittweite 1°/5°/10° (maritime Orientierung: 0° = Nord)
 - **GPS-Tracks** (GPX/KML/GeoJSON-Upload, Karte, Statistiken)
 - **Foto-Anhänge** pro Reisetag
 - **Passkey-Signaturen** für Skipper und Crew (hybride elektronische Signatur)
 - **Schiffsdaten** und **Crew-Profile** (Skipper + Mitglieder)
-- **Kollaboration** — Crew per Einladungslink einladen
+- **Statistik-Dashboard** — Strecken, Verbrauch, Segel/Motor, Hafenkette (pro Logbuch oder accountweit)
+- **Benutzerprofil** — kontoweite Einstellungen: Darstellung (Theme, Hell/Dunkel), OpenWeatherMap-API-Key, Web Push, PWA-Installation, Onboarding-Tour, Passkey-Verwaltung, Account-Statistik
+- **Kollaboration** — Crew per Einladungslink einladen (Schreib- oder Lesezugriff)
+- **Push-Benachrichtigungen** (optional) — Logbuch-Eigner per Web Push informieren, wenn Crew Änderungen synchronisiert (ohne Klartext-Inhalte; Opt-in im Benutzerprofil)
 - **Read-only-Freigabe** — öffentlicher Lese-Link für Dritte
 - **Export** — PDF pro Reisetag, CSV-Download/-Teilen
+- **Backup & Wiederherstellung** — vollständiges verschlüsseltes Logbuch-Backup (Einträge, Fotos, GPS, Crew, Schiff) als `.daagbok.json`; Restore auf gleichem oder neuem Account
+- **Feedback** — Bug-, Feature- und allgemeine Rückmeldungen aus der App (serverseitig via [Ntfy](https://ntfy.sh) oder self-hosted)
 - **PWA** — installierbar auf iOS/Android, Offline-Modus, Update-Hinweise
 - **Mehrsprachig** — Deutsch und Englisch
-- **Demo-Logbuch & Onboarding-Tour** für neue Nutzer
+- **Demo-Logbuch & Onboarding-Tour** für neue Nutzer (auch unter `/demo` ohne Anmeldung)
+
+### Benutzerprofil vs. Logbuch-Einstellungen
+
+| Bereich | Inhalt |
+|---------|--------|
+| **Benutzerprofil** | Theme, Farbschema, Wetter-API-Key, Push, PWA, Tour, Passkeys, Account löschen |
+| **Logbuch-Einstellungen** | Crew-Einladungen, öffentliche Freigabe, Backup & Wiederherstellung (nur Eigner) |
 
 ## Architektur
 
 ```
-┌─────────────────┐     HTTPS/API      ┌─────────────────┐
+┌─────────────────┐     HTTPS/API        ┌─────────────────┐
 │  React PWA      │ ◄──────────────────► │  Express API    │
 │  Vite + Dexie   │   (nur ciphertext)   │  Prisma + PG    │
 │  IndexedDB      │                      │  PostgreSQL     │
@@ -42,8 +55,75 @@ Alle sensiblen Inhalte werden **clientseitig verschlüsselt** (Web Crypto API).
 | Lokaler Speicher | Dexie.js (IndexedDB), Hintergrund-Sync |
 | Backend | Node.js, Express, Prisma |
 | Datenbank | PostgreSQL 16 |
-| Auth | WebAuthn (Passkeys) via `@simplewebauthn` |
+| Auth | WebAuthn (Passkeys) + signiertes HttpOnly-Session-Cookie (`daagbok_session`) |
 | Krypto | Web Crypto API (AES-GCM), BIP39 Recovery |
+| Push (optional) | Web Push (VAPID), Custom Service Worker (`injectManifest`) |
+| Feedback (optional) | Ntfy (HTTP Publish) |
+
+### Rollen & Zugriff
+
+| Rolle | Bedeutung |
+|-------|-----------|
+| **Owner** | Logbuch angelegt; voller Zugriff, Einladungen, Backup, Löschen; optional Push bei Crew-Änderungen |
+| **Collaborator (WRITE)** | Per Einladung; Einträge bearbeiten und als Crew signieren |
+| **Collaborator (READ)** | Nur Lesen (z. B. öffentlicher Share-Link) |
+
+Skipper- und Crew-Profile im Logbuch sind **Inhaltsdaten** (verschlüsselt), nicht an den Account gebunden. Ein Account kann gleichzeitig Owner eines eigenen und Collaborator in fremden Logbüchern sein.
+
+### Authentifizierung & Session
+
+| Schicht | Verhalten |
+|---------|-----------|
+| **Login** | WebAuthn (`/api/auth/login-verify`) — danach HttpOnly-Cookie, 7 Tage gültig |
+| **API-Aufrufe** | Cookie `credentials: 'include'` (Client: `apiFetch`) — kein `X-User-Id` |
+| **Master-Key** | Nur im RAM; nach Reload Entsperren per Passkey oder lokalem PIN |
+| **Step-up** | Konto löschen, PRF-Enrollment: frische Passkey-Bestätigung (`/api/auth/reauth-*`) |
+| **Sync WRITE** | Server lehnt Schreib-Sync für Collaborator mit `READ` ab |
+
+Öffentliche Routen (ohne Session): Registrierung/Login-Optionen, Einladungsdetails, Read-only-Share (`share-pull`), Health-Check, VAPID-Public-Key.
+
+## Backup & Wiederherstellung
+
+Nur der **Logbuch-Eigner** kann unter **Logbuch-Einstellungen → Backup & Wiederherstellung** ein vollständiges Backup erstellen:
+
+1. Backup-Passphrase wählen (min. 8 Zeichen, getrennt von der Datei aufbewahren)
+2. Download als `.daagbok.json` — enthält alle verschlüsselten Payloads inkl. **Fotos** und GPS-Tracks
+3. **Wiederherstellen** in einem beliebigen Account (nach Registrierung/Login): Datei + Passphrase
+
+Vor dem Löschen eines Logbuchs weist die App auf diese Funktion hin. Crew-Einladungen und Passkey-Signaturen werden nicht mitübertragen — Inhalte bleiben lesbar, Signaturen auf neuem Account ggf. nicht mehr verifizierbar.
+
+## Push-Benachrichtigungen (optional)
+
+Logbuch-**Eigner** können im **Benutzerprofil** Web Push aktivieren. Sobald ein eingeladenes Crewmitglied mit Schreibrechten (`WRITE`) Änderungen synchronisiert, erhält der Owner eine **generische** Benachrichtigung — der Server kennt keine Logbuch-Inhalte (Zero-Knowledge).
+
+| Aspekt | Verhalten |
+|--------|-----------|
+| Auslöser | Erfolgreicher Sync-Push durch Collaborator (`create`/`update`) |
+| Aggregation | Mehrere Änderungen in einem Sync → eine Benachrichtigung pro Logbuch |
+| Drosselung | Max. eine Push-Nachricht pro Logbuch alle 3 Minuten |
+| Klick | Öffnet die App auf dem betroffenen Logbuch |
+
+**Voraussetzungen:**
+
+- HTTPS (Produktion)
+- VAPID-Schlüssel auf dem Server (`VAPID_PUBLIC_KEY`, `VAPID_PRIVATE_KEY`, `VAPID_SUBJECT`)
+- Browser-Berechtigung „Benachrichtigungen“; auf **iOS** installierte PWA ab iOS 16.4+
+
+Schlüssel erzeugen: `npx web-push generate-vapid-keys` (im `server/`-Verzeichnis oder global).
+
+Ausführlicher Implementierungs- und Testplan: [docs/push-notifications-plan.md](docs/push-notifications-plan.md).
+
+## Feedback (optional)
+
+Eingeloggte Nutzer können über das Feedback-Formular in der App Rückmeldungen senden. Der Server leitet sie an einen **Ntfy**-Topic weiter (kein Klartext-Logbuch auf dem Server).
+
+| Variable | Bedeutung |
+|----------|-----------|
+| `NTFY_SERVER` | Basis-URL (Standard: `https://ntfy.sh`) |
+| `NTFY_TOPIC` | Topic-Name (ohne URL) |
+| `NTFY_TOKEN` | Optional: Access-Token für geschützte Topics |
+
+Ohne `NTFY_TOPIC` antwortet die API mit „nicht konfiguriert“. Rate-Limiting und einfacher Spam-Schutz sind serverseitig aktiv.
 
 ## Projektstruktur
 
@@ -51,14 +131,16 @@ Alle sensiblen Inhalte werden **clientseitig verschlüsselt** (Web Crypto API).
 kapteins-daagbok/
 ├── client/              # React-PWA (Frontend)
 │   ├── src/
-│   │   ├── components/  # UI-Komponenten
-│   │   ├── services/    # Auth, Sync, Krypto, Analytics, …
+│   │   ├── components/  # UI (u. a. CourseDialInput, UserProfilePage, FeedbackModal)
+│   │   ├── services/    # Auth, Sync, Krypto, Backup, Push, Analytics, …
+│   │   ├── sw.ts        # Service Worker (Precache + Web Push)
 │   │   └── i18n/        # DE/EN-Übersetzungen
 │   └── Dockerfile       # Nginx-Produktions-Image
 ├── server/              # Express-API + Prisma
-│   ├── src/routes/      # auth, logbooks, sync, collaboration, sign
+│   ├── src/routes/      # auth, logbooks, sync, collaboration, sign, push, feedback, weather
+│   ├── src/services/    # z. B. pushNotify, ntfyNotify
 │   └── prisma/          # Datenbankschema
-├── docs/                # Projektdokumentation (z. B. Plausible Events)
+├── docs/                # Projektdokumentation
 ├── scripts/             # Dev- und Deploy-Skripte
 ├── docker-compose.yml   # Produktions-Stack (DB + Backend + Frontend)
 └── VERSION              # App-Version (Build & Footer)
@@ -69,7 +151,9 @@ kapteins-daagbok/
 - **Node.js** 20+
 - **npm**
 - **Docker** (für PostgreSQL in der Entwicklung oder den vollständigen Stack)
-- Optional: OpenWeatherMap-API-Key (Wetter-Abruf in den Einstellungen)
+- Optional: eigener OpenWeatherMap-API-Key im **Benutzerprofil** (sonst serverseitiger Key aus `.env`)
+- Optional: VAPID-Schlüssel für Web Push (siehe Abschnitt Push-Benachrichtigungen)
+- Optional: Ntfy-Topic für Feedback (siehe Abschnitt Feedback)
 
 ## Lokale Entwicklung
 
@@ -86,16 +170,34 @@ cd client && npm ci && cd ..
 cp .env.example .env
 ```
 
-Für lokale Passkeys: `RP_ID=localhost`, `ORIGIN=http://localhost:5173` (bzw. die tatsächliche Frontend-URL).
+Kopiere `.env.example` nach `.env` und passe mindestens an:
 
-Im `server/`-Verzeichnis eine `.env` mit `DATABASE_URL` anlegen, z. B.:
+| Variable | Dev (Vite) | Produktion |
+|----------|------------|------------|
+| `RP_ID` | `localhost` | `kapteins-daagbok.eu` |
+| `ORIGIN` | `http://localhost:5173` | `https://kapteins-daagbok.eu` |
+| `SESSION_SECRET` | empfohlen (≥ 32 Zeichen) | **Pflicht** |
+
+`ORIGIN` muss **exakt** der Frontend-URL entsprechen (CORS + Session-Cookie). Das Backend lädt `.env` aus dem Projektroot und optional `server/.env`.
 
 ```
 DATABASE_URL="postgresql://postgres:postgres@localhost:5432/daagbox?schema=public"
+OpenWeatherMapAPIKey=          # Fallback für Wetter-Abruf, wenn Nutzer keinen eigenen Key hat
 RP_ID=localhost
 ORIGIN=http://localhost:5173
+SESSION_SECRET=                 # openssl rand -base64 48 (in Prod Pflicht)
+# Optional — Web Push (npx web-push generate-vapid-keys)
+VAPID_PUBLIC_KEY=
+VAPID_PRIVATE_KEY=
+VAPID_SUBJECT=mailto:support@kapteins-daagbok.eu
+# Optional — Feedback via Ntfy
+NTFY_SERVER=https://ntfy.sh
+NTFY_TOPIC=
+NTFY_TOKEN=
 ```
 
+`./scripts/start-dev.sh` prüft `ORIGIN` und `SESSION_SECRET` beim Start und gibt Hinweise aus.
+
 ### 3. Datenbank & Schema
 
 Das Dev-Skript startet PostgreSQL in Docker (`postgres-daagbox`). Schema anwenden:
@@ -115,6 +217,21 @@ cd server && npx prisma db push && cd ..
 | Frontend (Vite) | http://localhost:5173 |
 | Backend API | http://localhost:5000 |
 | Health Check | http://localhost:5000/api/health |
+| Public Demo | http://localhost:5173/demo |
+
+### 5. Qualität & Tests
+
+Vor jedem Deploy auf [kapteins-daagbok.eu](https://kapteins-daagbok.eu/) (kein externes CI):
+
+```bash
+npm run check
+# oder: ./scripts/predeploy-check.sh
+```
+
+Einzeln: `npm test` (Client + Server) · `npm run build` · optional `npm run lint` (Client, noch nicht in `check`)
+
+- **Client:** Vitest für Utils, i18n, Services
+- **Server:** Smoke-Tests (`/api/health`, Auth-Guards) mit Supertest — siehe `server/src/api.smoke.test.ts`
 
 ## Docker (produktionsnah)
 
@@ -124,13 +241,14 @@ Gesamten Stack lokal bauen und starten:
 ./scripts/start-dev-docker.sh
 ```
 
-Frontend: http://localhost · API: http://localhost/api/health
+Frontend: http://localhost · API: http://localhost/api/health · Demo: http://localhost/demo
 
-Umgebungsvariablen für Passkeys in `.env` setzen (`RP_ID`, `ORIGIN`).
+Umgebungsvariablen in `.env` setzen — mindestens `RP_ID`, `ORIGIN` (z. B. `http://localhost`), `SESSION_SECRET` und für Docker Compose `POSTGRES_PASSWORD`. Für Push die VAPID-Variablen an den Backend-Container durchreichen (`docker-compose.yml` → `backend.environment`). Für Feedback `NTFY_*` setzen.
 
 ## Deployment
 
-Produktions-Update auf den Server (konfigurierbar via Umgebungsvariablen):
+Produktions-Update auf den Server (konfigurierbar via Umgebungsvariablen). Führt vor dem SSH-Deploy automatisch [`predeploy-check.sh`](scripts/predeploy-check.sh) aus (`npm run check`):
+
 
 ```bash
 ./scripts/update-prod.sh
@@ -138,11 +256,21 @@ Produktions-Update auf den Server (konfigurierbar via Umgebungsvariablen):
 
 Standard-Ziel: `root@10.0.0.25:/opt/kapteins-daagbok` — per `REMOTE_HOST`, `REMOTE_USER`, `REMOTE_DIR` überschreibbar.
 
+Auf dem Server müssen `.env` u. a. `POSTGRES_PASSWORD`, `RP_ID`, `ORIGIN` (`https://kapteins-daagbok.eu`), `SESSION_SECRET` (≥ 32 Zeichen), `TRUST_PROXY` (NPM, z. B. `172.16.10.10` oder `1`) und bei Push `VAPID_*` enthalten. Optional `NTFY_*` für Feedback. Nach Schema-Änderungen: `npx prisma db push` im Backend-Container.
+
+Hinter **Nginx Proxy Manager**: [docs/deployment/npm-security.md](docs/deployment/npm-security.md).
+
 ## Dokumentation
 
 | Dokument | Inhalt |
 |----------|--------|
+| [docs/deployment/npm-security.md](docs/deployment/npm-security.md) | NPM, TLS, `trust proxy`, Security-Header |
+| [docs/deployment/predeploy.md](docs/deployment/predeploy.md) | Pre-Deploy-Checks ohne CI |
+| [docs/deployment/postgres-password.md](docs/deployment/postgres-password.md) | PostgreSQL-Passwort rotieren / App-Rolle |
 | [docs/plausible-events.md](docs/plausible-events.md) | Custom Events für Plausible Analytics |
+| [docs/push-notifications-plan.md](docs/push-notifications-plan.md) | Web Push: Architektur, API, Testplan |
+| [docs/plan-compass-course-dial.md](docs/plan-compass-course-dial.md) | Kompass-Dial: UX- und Implementierungsplan |
+| [docs/marketing/kapteins-daagbok-beta-flyer.pdf](docs/marketing/kapteins-daagbok-beta-flyer.pdf) | Beta-Flyer (DIN A4) zum Ausdrucken — Quelle: `docs/marketing/beta-flyer.html`, neu erzeugen: `cd client && npm run generate:flyer` |
 | [.planning/PROJECT.md](.planning/PROJECT.md) | Produktvision und Anforderungen (GSD) |
 
 ## Analytics
@@ -155,4 +283,4 @@ Aktuelle Version: siehe [VERSION](VERSION) (wird im App-Footer und beim Docker-B
 
 ---
 
-© 2026 Markus F.J. Busche · [kapteins-daagbok.eu](https://kapteins-daagbok.eu)
+© 2026 KnorrLabs/Markus F.J. Busche · [kapteins-daagbok.eu](https://kapteins-daagbok.eu)

VERSION

@@ -1 +1 @@
-0.1.0.15
+0.1.0.110

client/index.html

@@ -4,34 +4,42 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Digitales Yacht-Logbuch mit End-to-End-Verschlüsselung und Passkey-Anmeldung. Reisetage, GPS-Tracks, Crew und Schiffsdaten sicher dokumentieren – auch offline als PWA." />
-    <meta name="keywords" content="Yacht-Logbuch, Schiffstagebuch, Bordlogbuch, Segeln, Passkey, E2E-Verschlüsselung, GPS-Track, maritimes Logbuch" />
+    <meta name="description" content="Kostenloses, werbefreies digitales Yacht-Logbuch mit End-to-End-Verschlüsselung und Passkey-Anmeldung. Reisetage, GPS-Tracks, Crew und Schiffsdaten sicher dokumentieren – auch offline als PWA." />
+    <meta name="keywords" content="Yacht-Logbuch, Schiffstagebuch, Bordlogbuch, Segeln, Passkey, E2E-Verschlüsselung, GPS-Track, maritimes Logbuch, kostenlos, werbefrei, gratis, ohne Werbung, yacht logbook, sailing log, ad-free" />
     <meta name="author" content="Markus F.J. Busche" />
     <meta name="robots" content="index, follow" />
     <meta name="application-name" content="Kapteins Daagbok" />
     <link rel="canonical" href="https://kapteins-daagbok.eu/" />
+    <link rel="alternate" hreflang="de" href="https://kapteins-daagbok.eu/?lng=de" />
+    <link rel="alternate" hreflang="en" href="https://kapteins-daagbok.eu/?lng=en" />
+    <link rel="alternate" hreflang="da" href="https://kapteins-daagbok.eu/?lng=da" />
+    <link rel="alternate" hreflang="sv" href="https://kapteins-daagbok.eu/?lng=sv" />
+    <link rel="alternate" hreflang="nb" href="https://kapteins-daagbok.eu/?lng=nb" />
+    <link rel="alternate" hreflang="x-default" href="https://kapteins-daagbok.eu/" />
     <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="Daagbok" />
-    <meta name="theme-color" content="#1e293b" />
+    <meta name="theme-color" content="#0b0c10" />
+    <script src="/appearance-bootstrap.js"></script>
+    <script src="/bootstrap-watchdog.js"></script>
     <link rel="apple-touch-icon" href="/logo.png" />
     <meta property="og:type" content="website" />
     <meta property="og:site_name" content="Kapteins Daagbok" />
-    <meta property="og:title" content="Kapteins Daagbok – Digitales Yacht-Logbuch" />
-    <meta property="og:description" content="Sicheres, E2E-verschlüsseltes Logbuch für Skipper: Reisetage, GPS-Tracks, Crew- und Schiffsdaten – mit Passkey-Anmeldung und Offline-PWA." />
+    <meta property="og:title" content="Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch" />
+    <meta property="og:description" content="Kostenlos und werbefrei: sicheres, E2E-verschlüsseltes Logbuch für Skipper. Reisetage, GPS-Tracks, Crew- und Schiffsdaten – Passkey-Anmeldung und Offline-PWA." />
     <meta property="og:url" content="https://kapteins-daagbok.eu/" />
     <meta property="og:image" content="https://kapteins-daagbok.eu/logo.png" />
     <meta property="og:image:alt" content="Kapteins Daagbok Logo" />
     <meta property="og:locale" content="de_DE" />
     <meta property="og:locale:alternate" content="en_US" />
     <meta name="twitter:card" content="summary" />
-    <meta name="twitter:title" content="Kapteins Daagbok – Digitales Yacht-Logbuch" />
-    <meta name="twitter:description" content="Sicheres, E2E-verschlüsseltes Logbuch für Skipper: Reisetage, GPS-Tracks, Crew- und Schiffsdaten – mit Passkey-Anmeldung und Offline-PWA." />
+    <meta name="twitter:title" content="Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch" />
+    <meta name="twitter:description" content="Kostenlos und werbefrei: sicheres, E2E-verschlüsseltes Logbuch für Skipper. Reisetage, GPS-Tracks, Crew- und Schiffsdaten – Passkey-Anmeldung und Offline-PWA." />
     <meta name="twitter:image" content="https://kapteins-daagbok.eu/logo.png" />
     <meta name="twitter:image:alt" content="Kapteins Daagbok Logo" />
     <script defer data-domain="kapteins-daagbok.eu" src="https://plausible.elpatron.me/js/script.tagged-events.js"></script>
-    <title>Kapteins Daagbok – Digitales Yacht-Logbuch</title>
+    <title>Kapteins Daagbok – Kostenloses digitales Yacht-Logbuch (werbefrei)</title>
   </head>
   <body>
     <div id="root"></div>

client/nginx.conf

@@ -3,15 +3,32 @@ server {
     server_name localhost;
     client_max_body_size 50M;
 
+    # Security headers (TLS/HSTS at NPM — see docs/deployment/npm-security.md)
+    add_header X-Content-Type-Options "nosniff" always;
+    add_header X-Frame-Options "SAMEORIGIN" always;
+    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+    add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=()" always;
+    add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
+
     # Service worker and app shell must revalidate so PWA updates are detected
-    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest)$ {
+    location ~* ^/(sw\.js|workbox-.*\.js|manifest\.webmanifest|version\.json)$ {
         root /usr/share/nginx/html;
-        add_header Cache-Control "no-cache, no-store, must-revalidate";
+        add_header Cache-Control "no-cache, no-store, must-revalidate" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=()" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
     }
 
     location = /index.html {
         root /usr/share/nginx/html;
-        add_header Cache-Control "no-cache, must-revalidate";
+        add_header Cache-Control "no-cache, must-revalidate" always;
+        add_header X-Content-Type-Options "nosniff" always;
+        add_header X-Frame-Options "SAMEORIGIN" always;
+        add_header Referrer-Policy "strict-origin-when-cross-origin" always;
+        add_header Permissions-Policy "camera=(self), geolocation=(self), microphone=()" always;
+        add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://plausible.elpatron.me; connect-src 'self' https://plausible.elpatron.me; img-src 'self' data: blob: https://*.tile.openstreetmap.org; style-src 'self' 'unsafe-inline'; font-src 'self'; object-src 'none'; base-uri 'self'; frame-ancestors 'self';" always;
     }
 
     location / {
@@ -26,6 +43,9 @@ server {
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection 'upgrade';
         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_cache_bypass $http_upgrade;
     }
 }

client/package.json

@@ -7,7 +7,15 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "test": "vitest run",
+    "preview": "vite preview",
+    "generate:flyer": "node ../scripts/generate-beta-flyer.mjs",
+    "generate:flyer:png": "node ../scripts/generate-beta-flyer.mjs --png",
+    "generate:flyer:all": "node ../scripts/generate-beta-flyer.mjs --all",
+    "generate:flyer:setup": "playwright install chromium",
+    "translate:locales": "node ../scripts/translate-locales.mjs",
+    "translate:flyer": "node ../scripts/translate-flyer.mjs",
+    "validate:i18n": "node ../scripts/validate-i18n-keys.mjs"
   },
   "dependencies": {
     "@simplewebauthn/browser": "^13.3.0",
@@ -21,22 +29,30 @@
     "lucide-react": "^1.16.0",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",
-    "react-i18next": "^17.0.8"
+    "react-i18next": "^17.0.8",
+    "qrcode": "^1.5.4"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
     "@types/leaflet": "^1.9.21",
     "@types/node": "^24.12.3",
+    "@types/qrcode": "^1.5.5",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
+    "@vitejs/plugin-react": "^4.7.0",
     "eslint": "^10.3.0",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-react-refresh": "^0.5.2",
     "globals": "^17.6.0",
+    "happy-dom": "^20.9.0",
+    "playwright": "^1.51.0",
     "typescript": "~6.0.2",
     "typescript-eslint": "^8.59.2",
-    "vite": "^8.0.12",
-    "vite-plugin-pwa": "^1.3.0"
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.1",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=20.0.0"
   }
 }

client/public/appearance-bootstrap.js

@@ -0,0 +1,44 @@
+/**
+ * Applies saved appearance classes before CSS/JS bundle loads (prevents wrong flash on PWA).
+ * Logic mirrors client/src/services/appearance.ts + userPreferences.ts.
+ */
+(function () {
+  try {
+    var uid = localStorage.getItem('active_userid')
+    var theme = 'auto'
+    var scheme = 'auto'
+
+    if (uid) {
+      theme =
+        localStorage.getItem('user_pref_theme_' + uid) ||
+        localStorage.getItem('active_theme') ||
+        'auto'
+      scheme =
+        localStorage.getItem('user_pref_color_scheme_' + uid) ||
+        localStorage.getItem('active_color_scheme') ||
+        'auto'
+    } else {
+      theme = localStorage.getItem('active_theme') || 'auto'
+      scheme = localStorage.getItem('active_color_scheme') || 'auto'
+    }
+
+    var resolvedTheme = theme
+    if (resolvedTheme !== 'ocean' && resolvedTheme !== 'material' && resolvedTheme !== 'cupertino') {
+      var ua = navigator.userAgent || navigator.vendor || ''
+      if (/iPad|iPhone|iPod|Macintosh/.test(ua)) resolvedTheme = 'cupertino'
+      else if (/Android|Linux/.test(ua)) resolvedTheme = 'material'
+      else resolvedTheme = 'ocean'
+    }
+
+    var resolvedScheme = scheme
+    if (resolvedScheme !== 'light' && resolvedScheme !== 'dark') {
+      resolvedScheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+    }
+
+    var root = document.documentElement
+    root.classList.add('theme-' + resolvedTheme, 'scheme-' + resolvedScheme)
+    root.style.colorScheme = resolvedScheme
+  } catch (_) {
+    /* ignore storage / matchMedia errors */
+  }
+})()

client/public/bootstrap-watchdog.js

@@ -0,0 +1,221 @@
+/**
+ * Boot watchdog for production PWAs.
+ * Recovers from white/black screens when stale HTML points to missing JS chunks.
+ * Does not clear caches automatically while offline to protect unsynced data.
+ */
+(function () {
+  if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
+    return
+  }
+
+  var BOOT_TIMEOUT_MS = 12000
+  var ATTEMPT_WINDOW_MS = 120000
+  var ATTEMPT_COUNT_KEY = 'pwa_boot_watchdog_attempt_count'
+  var ATTEMPT_LAST_KEY = 'pwa_boot_watchdog_attempt_last_ts'
+  var PENDING_EVENTS_KEY = 'pwa_boot_pending_events'
+  var MAX_PENDING_EVENTS = 12
+
+  function enqueueEvent(name, props) {
+    try {
+      var current = JSON.parse(sessionStorage.getItem(PENDING_EVENTS_KEY) || '[]')
+      if (!Array.isArray(current)) current = []
+      current.push({ name: name, props: props, ts: Date.now() })
+      if (current.length > MAX_PENDING_EVENTS) {
+        current = current.slice(current.length - MAX_PENDING_EVENTS)
+      }
+      sessionStorage.setItem(PENDING_EVENTS_KEY, JSON.stringify(current))
+    } catch (_) {
+      /* ignore analytics queue errors */
+    }
+  }
+
+  function emit(name, props) {
+    if (typeof window.plausible === 'function') {
+      if (props && Object.keys(props).length > 0) {
+        window.plausible(name, { props: props })
+      } else {
+        window.plausible(name)
+      }
+      return
+    }
+    enqueueEvent(name, props)
+  }
+
+  function hasBootstrapped() {
+    return window.__KDB_APP_BOOTSTRAPPED === true
+  }
+
+  function resetAttempts() {
+    try {
+      sessionStorage.removeItem(ATTEMPT_COUNT_KEY)
+      sessionStorage.removeItem(ATTEMPT_LAST_KEY)
+    } catch (_) {
+      /* ignore storage errors */
+    }
+  }
+
+  function nextAttempt() {
+    try {
+      var now = Date.now()
+      var last = Number(sessionStorage.getItem(ATTEMPT_LAST_KEY) || '0')
+      var count = Number(sessionStorage.getItem(ATTEMPT_COUNT_KEY) || '0')
+      if (now - last > ATTEMPT_WINDOW_MS) {
+        count = 0
+      }
+      count += 1
+      sessionStorage.setItem(ATTEMPT_COUNT_KEY, String(count))
+      sessionStorage.setItem(ATTEMPT_LAST_KEY, String(now))
+      return count
+    } catch (_) {
+      return 1
+    }
+  }
+
+  function createRecoveryUrl(reason) {
+    try {
+      var url = new URL(location.href)
+      url.searchParams.set('boot_recover', reason)
+      url.searchParams.set('_', String(Date.now()))
+      return url.toString()
+    } catch (_) {
+      return location.href
+    }
+  }
+
+  async function clearServiceWorkerCaches() {
+    if ('serviceWorker' in navigator) {
+      try {
+        var registrations = await navigator.serviceWorker.getRegistrations()
+        await Promise.all(
+          registrations.map(function (registration) {
+            return registration.unregister()
+          })
+        )
+      } catch (_) {
+        /* ignore SW cleanup errors */
+      }
+    }
+    if ('caches' in window) {
+      try {
+        var keys = await caches.keys()
+        await Promise.all(
+          keys.map(function (key) {
+            return caches.delete(key)
+          })
+        )
+      } catch (_) {
+        /* ignore cache cleanup errors */
+      }
+    }
+  }
+
+  function renderFallback(isOffline) {
+    var root = document.getElementById('root')
+    if (!root) return
+
+    root.innerHTML =
+      '<div class="auth-screen">' +
+      '<div class="auth-card glass" role="alert" style="max-width:460px">' +
+      '<h2 style="margin-top:0">Kapteins Daagbok</h2>' +
+      '<p style="color:var(--app-text-muted);line-height:1.5;margin-bottom:8px">' +
+      (isOffline
+        ? 'Die App konnte offline nicht sauber starten. Deine lokalen, nicht synchronisierten Daten bleiben erhalten.'
+        : 'Die App konnte nicht sauber starten. Deine lokalen, nicht synchronisierten Daten bleiben erhalten.') +
+      '</p>' +
+      '<p style="color:var(--app-text-muted);line-height:1.5;margin-top:0">' +
+      (isOffline
+        ? 'Bitte neu laden. Wenn wieder Netz verfügbar ist, kann die App-Engine automatisch repariert werden.'
+        : 'Du kannst jetzt eine App-Reparatur ausfuehren, ohne IndexedDB-Logbuchdaten zu loeschen.') +
+      '</p>' +
+      '<button type="button" class="btn primary" id="boot-reload-btn" style="width:100%">' +
+      'Neu laden' +
+      '</button>' +
+      (!isOffline
+        ? '<button type="button" class="btn secondary" id="boot-repair-btn" style="width:100%;margin-top:12px">' +
+          'App-Reparatur (Cache + Service Worker)' +
+          '</button>'
+        : '') +
+      '</div>' +
+      '</div>'
+
+    var reloadBtn = document.getElementById('boot-reload-btn')
+    if (reloadBtn) {
+      reloadBtn.addEventListener('click', function () {
+        location.replace(createRecoveryUrl('retry'))
+      })
+    }
+
+    var repairBtn = document.getElementById('boot-repair-btn')
+    if (repairBtn) {
+      repairBtn.addEventListener('click', function () {
+        emit('PWA Boot Watchdog Manual Repair', {
+          attempt: Number(sessionStorage.getItem(ATTEMPT_COUNT_KEY) || '0'),
+          online: navigator.onLine
+        })
+        Promise.resolve()
+          .then(clearServiceWorkerCaches)
+          .finally(function () {
+            resetAttempts()
+            location.replace(createRecoveryUrl('manual-hard-recovery'))
+          })
+      })
+    }
+  }
+
+  function runWatchdog() {
+    window.setTimeout(function () {
+      if (hasBootstrapped()) {
+        resetAttempts()
+        return
+      }
+
+      var attempt = nextAttempt()
+      var online = navigator.onLine
+
+      if (attempt === 1) {
+        emit('PWA Boot Watchdog Soft', {
+          attempt: attempt,
+          online: online,
+          reason: online ? 'soft-reload' : 'offline-retry'
+        })
+        Promise.resolve()
+          .then(function () {
+            if ('serviceWorker' in navigator && navigator.serviceWorker.getRegistration) {
+              return navigator.serviceWorker.getRegistration().then(function (registration) {
+                if (registration) {
+                  return registration.update().catch(function () {})
+                }
+              })
+            }
+          })
+          .finally(function () {
+            location.replace(createRecoveryUrl(online ? 'soft-reload' : 'offline-retry'))
+          })
+        return
+      }
+
+      if (attempt === 2 && online) {
+        emit('PWA Boot Watchdog Hard', {
+          attempt: attempt,
+          online: online,
+          reason: 'hard-recovery'
+        })
+        Promise.resolve()
+          .then(clearServiceWorkerCaches)
+          .finally(function () {
+            location.replace(createRecoveryUrl('hard-recovery'))
+          })
+        return
+      }
+
+      emit('PWA Boot Watchdog Fallback', {
+        attempt: attempt,
+        online: online,
+        reason: online ? 'retries-exhausted' : 'offline-retries-exhausted'
+      })
+      renderFallback(!online)
+    }, BOOT_TIMEOUT_MS)
+  }
+
+  runWatchdog()
+})()

client/src/App.tsx

@@ -1,10 +1,14 @@
-import { useState, useEffect } from 'react'
-import './App.css'
+import { useState, useEffect, useCallback, useRef } from 'react'
 import { DialogProvider } from './components/ModalDialog.tsx'
 import AuthOnboarding from './components/AuthOnboarding.tsx'
+import UserProfilePage from './components/UserProfilePage.tsx'
 import LogbookDashboard from './components/LogbookDashboard.tsx'
-import VesselForm from './components/VesselForm.tsx'
-import CrewForm from './components/CrewForm.tsx'
+import LogbookVesselPicker from './components/LogbookVesselPicker.tsx'
+import LogbookCrewPicker from './components/LogbookCrewPicker.tsx'
+import { migrateLegacyCrewToPoolIfNeeded } from './services/crewMigration.js'
+import { migrateLegacyYachtsToPoolIfNeeded } from './services/vesselMigration.js'
+import { syncVesselPool } from './services/vesselPoolSync.js'
+import { syncPersonPool } from './services/personPoolSync.js'
 // Compass Deviation Table — für Freizeit-Skipper vorerst deaktiviert (Komponente bleibt erhalten)
 // import DeviationForm from './components/DeviationForm.tsx'
 import LogEntriesList from './components/LogEntriesList.tsx'
@@ -13,7 +17,14 @@ import SettingsForm from './components/SettingsForm.tsx'
 import InvitationAcceptance from './components/InvitationAcceptance.tsx'
 import AppTourOverlay from './components/AppTourOverlay.tsx'
 import { AppTourProvider, useAppTour, type AppTab } from './context/AppTourContext.tsx'
-import { getActiveMasterKey, logoutUser } from './services/auth.js'
+import { UnsavedChangesProvider, useUnsavedChangesContext } from './context/UnsavedChangesContext.tsx'
+import {
+  logoutUser,
+  checkServerSession,
+  hasUnlockedLocalSession,
+  persistSessionUserId
+} from './services/auth.js'
+import AppErrorBoundary from './components/AppErrorBoundary.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from './services/analytics.js'
 import {
   applyAppearanceToDocument,
@@ -21,44 +32,115 @@ import {
   resolveColorScheme,
   subscribeToSystemColorScheme
 } from './services/appearance.js'
+import { syncAppearancePrefs } from './services/appearancePrefs.js'
 import { startBackgroundSync, stopBackgroundSync, syncAllLogbooks, subscribeToSyncState } from './services/sync.js'
 import ReadOnlyViewer from './components/ReadOnlyViewer.tsx'
+import DemoViewer from './components/DemoViewer.tsx'
 import PwaInstallPrompt from './components/PwaInstallPrompt.tsx'
 import PwaUpdatePrompt from './components/PwaUpdatePrompt.tsx'
 import AppFooter from './components/AppFooter.tsx'
+import LogbookRoleBadge from './components/LogbookRoleBadge.tsx'
+import BetaBadge from './components/BetaBadge.tsx'
 import { db } from './services/db.js'
+import { getLogbookAccess } from './services/logbookAccess.js'
+import type { LogbookAccessRole } from './services/logbook.js'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { Ship, LogOut, ChevronLeft, Users, FileText, Settings, Wifi, WifiOff, Languages, BarChart2 } from 'lucide-react'
 import DisclaimerHeaderButton from './components/DisclaimerHeaderButton.tsx'
+import FeedbackHeaderButton from './components/FeedbackHeaderButton.tsx'
+import ProfileHeaderButton from './components/ProfileHeaderButton.tsx'
 import { useTranslation } from 'react-i18next'
+import { cycleAppLanguage } from './utils/i18nLanguages.js'
 import {
-  getStoredDemoFirstEntryId,
+  resolveTourLogbookContext,
   seedDemoLogbookIfNeeded
 } from './services/demoLogbook.js'
+import { fetchLogbooks, parseCollaborationRole } from './services/logbook.js'
+import { ensurePushSubscriptionIfEnabled } from './services/pushNotifications.js'
+import SyncConflictBanner from './components/SyncConflictBanner.tsx'
+import { requestPersistentStorage } from './utils/storagePersist.js'
+
+const PENDING_PUSH_LOGBOOK_KEY = 'pending_push_logbook_id'
 
 function App() {
   const { t, i18n } = useTranslation()
-  const { registerNavigation, requestStartAfterLogin } = useAppTour()
+  const { confirmLeave } = useUnsavedChangesContext()
+  const { registerNavigation, registerDemoTourContext, requestStartAfterLogin, isActive, currentStepId } = useAppTour()
   const [isAuthenticated, setIsAuthenticated] = useState(false)
   const [activeLogbookId, setActiveLogbookId] = useState<string | null>(null)
   const [activeLogbookTitle, setActiveLogbookTitle] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState<AppTab>('logs')
   const [tourSelectedEntryId, setTourSelectedEntryId] = useState<string | null>(null)
+  const [tourFeedbackOpen, setTourFeedbackOpen] = useState(false)
   const [demoHighlightEntryId, setDemoHighlightEntryId] = useState<string | null>(null)
   const [online, setOnline] = useState(navigator.onLine)
   const [isSyncing, setIsSyncing] = useState(false)
   const [isAcceptingInvite, setIsAcceptingInvite] = useState(false)
+  const [showUserProfile, setShowUserProfile] = useState(false)
+  const [storagePersistHint, setStoragePersistHint] = useState(false)
+  const tourLogbookRef = useRef<{ id: string; title: string } | null>(null)
+  const activeLogbookRef = useRef<{ id: string | null; title: string | null }>({
+    id: activeLogbookId,
+    title: activeLogbookTitle
+  })
+  activeLogbookRef.current = { id: activeLogbookId, title: activeLogbookTitle }
 
   // Viewer mode for read-only shared links
   const [isViewerMode, setIsViewerMode] = useState(false)
   const [shareToken, setShareToken] = useState('')
   const [shareKey, setShareKey] = useState('')
 
+  // Public demo mode (no account required)
+  const [isDemoMode, setIsDemoMode] = useState(() => window.location.pathname === '/demo')
+
   const syncQueueCount = useLiveQuery(
     () => activeLogbookId ? db.syncQueue.where({ logbookId: activeLogbookId }).count() : db.syncQueue.count(),
     [activeLogbookId]
   )
 
+  const activeLogbookRecord = useLiveQuery(
+    () => (activeLogbookId ? db.logbooks.get(activeLogbookId) : undefined),
+    [activeLogbookId]
+  )
+
+  const [activeAccessRole, setActiveAccessRole] = useState<LogbookAccessRole | null>(null)
+
+  useEffect(() => {
+    if (!activeLogbookId) {
+      setActiveAccessRole('OWNER')
+      return
+    }
+
+    if (!activeLogbookRecord) {
+      setActiveAccessRole(null)
+      return
+    }
+
+    if (activeLogbookRecord.isShared !== 1) {
+      setActiveAccessRole('OWNER')
+      return
+    }
+
+    const cachedRole = activeLogbookRecord.collaborationRole
+    setActiveAccessRole(
+      cachedRole ? parseCollaborationRole(cachedRole, `logbook ${activeLogbookId}`) : null
+    )
+
+    let cancelled = false
+    getLogbookAccess(activeLogbookId)
+      .then((access) => {
+        if (cancelled || !access) return
+        setActiveAccessRole(access.role)
+      })
+      .catch((err) => {
+        console.warn('Failed to resolve logbook access role:', err)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [activeLogbookId, activeLogbookRecord])
+
   useEffect(() => {
     const syncAppearance = () => {
       applyAppearanceToDocument(resolveAppTheme(), resolveColorScheme())
@@ -78,6 +160,15 @@ function App() {
     })
   }, [])
 
+  useEffect(() => {
+    if (!isAuthenticated) return
+    const userId = localStorage.getItem('active_userid')
+    if (!userId) return
+    void syncAppearancePrefs(userId)
+    void migrateLegacyCrewToPoolIfNeeded().then(() => syncPersonPool())
+    void migrateLegacyYachtsToPoolIfNeeded().then(() => syncVesselPool())
+  }, [isAuthenticated])
+
   useEffect(() => {
     const handleOnline = () => {
       setOnline(true)
@@ -103,59 +194,262 @@ function App() {
     }
   }, [isAuthenticated])
 
-  useEffect(() => {
+  const syncRouteFromLocation = useCallback(() => {
     const params = new URLSearchParams(window.location.search)
     const hashParams = new URLSearchParams(window.location.hash.substring(1))
+    const path = window.location.pathname
 
-    if (window.location.pathname === '/share' && params.has('token') && hashParams.has('key')) {
-      setShareToken(params.get('token') || '')
-      setShareKey(hashParams.get('key') || '')
-      setIsViewerMode(true)
+    if (path === '/demo') {
+      setIsDemoMode(true)
+      setIsViewerMode(false)
+      setIsAcceptingInvite(false)
       return
     }
 
-    if (params.has('token')) {
-      setIsAcceptingInvite(true)
+    setIsDemoMode(false)
+
+    if (path === '/share' && params.has('token') && hashParams.has('key')) {
+      setShareToken(params.get('token') || '')
+      setShareKey(hashParams.get('key') || '')
+      setIsViewerMode(true)
+      setIsAcceptingInvite(false)
+      return
     }
 
-    const savedUser = localStorage.getItem('active_username')
-    const key = getActiveMasterKey()
-    if (savedUser && key) {
-      setIsAuthenticated(true)
-      const savedLogbookId = localStorage.getItem('active_logbook_id')
-      const savedLogbookTitle = localStorage.getItem('active_logbook_title')
-      if (savedLogbookId && savedLogbookTitle) {
-        setActiveLogbookId(savedLogbookId)
-        setActiveLogbookTitle(savedLogbookTitle)
-      }
+    setIsViewerMode(false)
+
+    if (params.has('token')) {
+      setIsAcceptingInvite(true)
+      return
+    }
+
+    setIsAcceptingInvite(false)
+
+    const openLogbookId = params.get('logbook')
+    if (openLogbookId) {
+      sessionStorage.setItem(PENDING_PUSH_LOGBOOK_KEY, openLogbookId)
+      const cleanUrl = new URL(window.location.href)
+      cleanUrl.searchParams.delete('logbook')
+      window.history.replaceState(
+        {},
+        document.title,
+        `${cleanUrl.pathname}${cleanUrl.search}${cleanUrl.hash}`
+      )
     }
   }, [])
 
-  useEffect(() => {
-    registerNavigation({
-      setActiveTab,
-      setSelectedEntryId: setTourSelectedEntryId
-    })
-  }, [registerNavigation])
+  const clearAuthenticatedAppState = useCallback(() => {
+    setIsAuthenticated(false)
+    setActiveLogbookId(null)
+    setActiveLogbookTitle(null)
+    setShowUserProfile(false)
+    setTourSelectedEntryId(null)
+    setDemoHighlightEntryId(null)
+  }, [])
 
-  useEffect(() => {
-    if (isAuthenticated && activeLogbookId) {
-      setDemoHighlightEntryId(getStoredDemoFirstEntryId())
+  /** After PWA/bfcache resume, React state may still say "logged in" while the master key is gone. */
+  const enforceUnlockedSession = useCallback(() => {
+    if (isViewerMode || isDemoMode || isAcceptingInvite) return
+    // Require full local session (incl. userId) so API calls are not left headless.
+    if (isAuthenticated && !hasUnlockedLocalSession()) {
+      clearAuthenticatedAppState()
     }
-  }, [isAuthenticated, activeLogbookId])
+  }, [
+    isAuthenticated,
+    isViewerMode,
+    isDemoMode,
+    isAcceptingInvite,
+    clearAuthenticatedAppState
+  ])
 
-  const selectLogbook = (id: string, title: string) => {
+  useEffect(() => {
+    enforceUnlockedSession()
+  }, [enforceUnlockedSession])
+
+  useEffect(() => {
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) {
+        enforceUnlockedSession()
+      }
+    }
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') {
+        enforceUnlockedSession()
+      }
+    }
+    window.addEventListener('pageshow', onPageShow)
+    document.addEventListener('visibilitychange', onVisibility)
+    return () => {
+      window.removeEventListener('pageshow', onPageShow)
+      document.removeEventListener('visibilitychange', onVisibility)
+    }
+  }, [enforceUnlockedSession])
+
+  useEffect(() => {
+    let cancelled = false
+
+    ;(async () => {
+      try {
+        const session = await checkServerSession()
+        if (cancelled) return
+
+        if (session.authenticated) {
+          persistSessionUserId(session.userId)
+        }
+
+        // Cookie alone is insufficient — need in-memory master key, username, and userId for API.
+        if (session.authenticated && hasUnlockedLocalSession()) {
+          setIsAuthenticated(true)
+          const savedLogbookId = localStorage.getItem('active_logbook_id')
+          const savedLogbookTitle = localStorage.getItem('active_logbook_title')
+          if (savedLogbookId && savedLogbookTitle) {
+            setActiveLogbookId(savedLogbookId)
+            setActiveLogbookTitle(savedLogbookTitle)
+          }
+        }
+        // authenticated + crypto but no userId: stay on login (enforceUnlockedSession guards active UI)
+      } catch (err) {
+        if (!cancelled) {
+          console.warn('Session restore failed:', err)
+        }
+      }
+    })()
+
+    return () => {
+      cancelled = true
+    }
+  }, [clearAuthenticatedAppState])
+
+  useEffect(() => {
+    syncRouteFromLocation()
+    window.addEventListener('popstate', syncRouteFromLocation)
+    return () => window.removeEventListener('popstate', syncRouteFromLocation)
+  }, [syncRouteFromLocation])
+
+  const openDemo = useCallback(() => {
+    window.history.pushState({}, document.title, '/demo')
+    setIsDemoMode(true)
+    setIsViewerMode(false)
+    setIsAcceptingInvite(false)
+  }, [])
+
+  const selectLogbook = useCallback((id: string, title: string) => {
     setActiveLogbookId(id)
     setActiveLogbookTitle(title)
     setActiveTab('logs')
     setTourSelectedEntryId(null)
     localStorage.setItem('active_logbook_id', id)
     localStorage.setItem('active_logbook_title', title)
-  }
+  }, [])
+
+  const ensureTourLogbookOpen = useCallback(async () => {
+    const ctx = await resolveTourLogbookContext(tourLogbookRef.current?.id)
+    if (!ctx) return
+
+    if (activeLogbookRef.current.id !== ctx.logbookId) {
+      selectLogbook(ctx.logbookId, ctx.title)
+    }
+
+    if (ctx.firstEntryId) {
+      setDemoHighlightEntryId(ctx.firstEntryId)
+      registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+    }
+  }, [registerDemoTourContext, selectLogbook])
+
+  useEffect(() => {
+    registerNavigation({
+      setActiveTab,
+      setSelectedEntryId: setTourSelectedEntryId,
+      setFeedbackOpen: setTourFeedbackOpen,
+      setProfileOpen: setShowUserProfile,
+      ensureLogbookForTour: ensureTourLogbookOpen,
+      setLogbookActive: (active) => {
+        if (active) {
+          void ensureTourLogbookOpen()
+          return
+        }
+
+        const { id, title } = activeLogbookRef.current
+        if (id && title) {
+          tourLogbookRef.current = { id, title }
+        }
+        setActiveLogbookId(null)
+        setActiveLogbookTitle(null)
+        setTourSelectedEntryId(null)
+        localStorage.removeItem('active_logbook_id')
+        localStorage.removeItem('active_logbook_title')
+      }
+    })
+  }, [ensureTourLogbookOpen, registerNavigation])
+
+  useEffect(() => {
+    if (!isAuthenticated || !activeLogbookId) return
+    void (async () => {
+      const ctx = await resolveTourLogbookContext()
+      if (!ctx || ctx.logbookId !== activeLogbookId) return
+      if (ctx.firstEntryId) {
+        setDemoHighlightEntryId(ctx.firstEntryId)
+        registerDemoTourContext({ firstEntryId: ctx.firstEntryId })
+      }
+    })()
+  }, [isAuthenticated, activeLogbookId, registerDemoTourContext])
+
+  const openLogbookById = useCallback(
+    async (logbookId: string) => {
+      try {
+        const books = await fetchLogbooks()
+        const match = books.find((b) => b.id === logbookId)
+        if (match) {
+          selectLogbook(match.id, match.title)
+          return
+        }
+      } catch (err) {
+        console.error('Failed to resolve logbook from push:', err)
+      }
+      selectLogbook(logbookId, `${logbookId.slice(0, 8)}…`)
+    },
+    [selectLogbook]
+  )
+
+  const consumePendingPushLogbook = useCallback(() => {
+    const pending = sessionStorage.getItem(PENDING_PUSH_LOGBOOK_KEY)
+    if (!pending) return
+    sessionStorage.removeItem(PENDING_PUSH_LOGBOOK_KEY)
+    void openLogbookById(pending)
+  }, [openLogbookById])
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      consumePendingPushLogbook()
+    }
+  }, [isAuthenticated, consumePendingPushLogbook])
+
+  useEffect(() => {
+    if (!isAuthenticated || !('serviceWorker' in navigator)) return
+
+    const onSwMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'OPEN_LOGBOOK' && typeof event.data.logbookId === 'string') {
+        void openLogbookById(event.data.logbookId)
+      }
+    }
+
+    navigator.serviceWorker.addEventListener('message', onSwMessage)
+    return () => navigator.serviceWorker.removeEventListener('message', onSwMessage)
+  }, [isAuthenticated, openLogbookById])
+
+  useEffect(() => {
+    if (!isAuthenticated) return
+    if (sessionStorage.getItem('storage_persist_hint_dismissed')) return
+    void requestPersistentStorage().then(({ persisted, supported }) => {
+      if (supported && !persisted) setStoragePersistHint(true)
+    })
+  }, [isAuthenticated])
 
   const handleAuthenticated = async () => {
     setIsAuthenticated(true)
     trackPlausibleEvent(PlausibleEvents.LOGGED_IN)
+    void ensurePushSubscriptionIfEnabled()
+    void requestPersistentStorage()
 
     try {
       const demo = await seedDemoLogbookIfNeeded()
@@ -165,6 +459,7 @@ function App() {
           setDemoHighlightEntryId(demo.firstEntryId)
         }
         requestStartAfterLogin()
+        consumePendingPushLogbook()
         return
       }
     } catch (err) {
@@ -174,23 +469,45 @@ function App() {
     const savedLogbookId = localStorage.getItem('active_logbook_id')
     const savedLogbookTitle = localStorage.getItem('active_logbook_title')
     if (savedLogbookId && savedLogbookTitle) {
-      setActiveLogbookId(savedLogbookId)
-      setActiveLogbookTitle(savedLogbookTitle)
+      try {
+        const books = await fetchLogbooks()
+        const match = books.find((b) => b.id === savedLogbookId)
+        if (match) {
+          setActiveLogbookId(match.id)
+          setActiveLogbookTitle(match.title)
+        } else {
+          localStorage.removeItem('active_logbook_id')
+          localStorage.removeItem('active_logbook_title')
+        }
+      } catch {
+        setActiveLogbookId(savedLogbookId)
+        setActiveLogbookTitle(savedLogbookTitle)
+      }
     }
+    consumePendingPushLogbook()
   }
 
-  const handleLogout = () => {
-    logoutUser()
+  const handleTabChange = async (tab: AppTab) => {
+    if (tab === activeTab) return
+    if (!(await confirmLeave())) return
+    setActiveTab(tab)
+  }
+
+  const handleLogout = async () => {
+    if (!(await confirmLeave())) return
+    void logoutUser()
     setIsAuthenticated(false)
     setActiveLogbookId(null)
     setActiveLogbookTitle(null)
+    setShowUserProfile(false)
     setTourSelectedEntryId(null)
     setDemoHighlightEntryId(null)
     localStorage.removeItem('active_logbook_id')
     localStorage.removeItem('active_logbook_title')
   }
 
-  const handleBackToDashboard = () => {
+  const handleBackToDashboard = async () => {
+    if (!(await confirmLeave())) return
     setActiveLogbookId(null)
     setActiveLogbookTitle(null)
     setTourSelectedEntryId(null)
@@ -199,8 +516,20 @@ function App() {
   }
 
   const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
+    cycleAppLanguage(i18n)
+  }
+
+  const handleExitDemo = () => {
+    window.history.replaceState({}, document.title, '/')
+    syncRouteFromLocation()
+  }
+
+  if (isDemoMode) {
+    return (
+      <div style={{ display: 'contents' }}>
+        <DemoViewer onExit={handleExitDemo} />
+      </div>
+    )
   }
 
   if (isViewerMode) {
@@ -235,12 +564,30 @@ function App() {
   if (!isAuthenticated) {
     return (
       <div className="auth-screen">
-        <AuthOnboarding onAuthenticated={handleAuthenticated} />
+        <AuthOnboarding onAuthenticated={handleAuthenticated} onOpenDemo={openDemo} />
       </div>
     )
   }
 
-  const pwaInstallBanner = <PwaInstallPrompt variant="banner" />
+  const pwaInstallBanner = !isActive ? <PwaInstallPrompt variant="banner" /> : null
+
+  const logbookReadOnly =
+    activeLogbookRecord?.isShared === 1 && activeAccessRole === 'READ'
+  const isLogbookOwner =
+    activeAccessRole === 'OWNER' ||
+    (activeLogbookRecord != null && activeLogbookRecord.isShared !== 1)
+
+  if (showUserProfile) {
+    return (
+      <div style={{ display: 'contents' }}>
+        {pwaInstallBanner}
+        <UserProfilePage
+          onBack={() => setShowUserProfile(false)}
+          onLogout={handleLogout}
+        />
+      </div>
+    )
+  }
 
   if (!activeLogbookId) {
     return (
@@ -249,6 +596,7 @@ function App() {
         <LogbookDashboard
           onSelectLogbook={selectLogbook}
           onLogout={handleLogout}
+          onOpenProfile={() => setShowUserProfile(true)}
         />
       </div>
     )
@@ -262,13 +610,23 @@ function App() {
         {/* Active Logbook Header */}
         <header className="app-header">
           <div className="app-header-left">
-            <button className="btn-back" onClick={handleBackToDashboard}>
+            <button className="btn-back" onClick={handleBackToDashboard} title={t('nav.dashboard')}>
               <ChevronLeft size={16} />
-              {t('nav.dashboard')}
+              <span className="hide-mobile">{t('nav.dashboard')}</span>
             </button>
             <div className="app-title-area">
-              <h2>{activeLogbookTitle}</h2>
-              <p className="app-subtitle">{t('app.name')} / {activeLogbookId.substring(0, 8)}...</p>
+              <div className="app-title-row">
+                <h2>{activeLogbookTitle}</h2>
+                <BetaBadge />
+                {activeAccessRole && activeAccessRole !== 'OWNER' && (
+                  <LogbookRoleBadge role={activeAccessRole} />
+                )}
+              </div>
+              <p className="app-subtitle">
+                {activeAccessRole && activeAccessRole !== 'OWNER'
+                  ? t('dashboard.section_shared_hint')
+                  : t('app.tagline')}
+              </p>
             </div>
           </div>
 
@@ -289,21 +647,49 @@ function App() {
               <Languages size={18} />
             </button>
 
+            <ProfileHeaderButton onClick={() => setShowUserProfile(true)} />
+
             <DisclaimerHeaderButton />
 
+            <FeedbackHeaderButton
+              logbookId={activeLogbookId}
+              logbookTitle={activeLogbookTitle}
+              tourOpen={tourFeedbackOpen}
+              onTourOpenChange={setTourFeedbackOpen}
+              tourHighlight={isActive && currentStepId === 'nav_feedback'}
+            />
+
             <button className="btn-icon logout" onClick={handleLogout} title={t('dashboard.logout')}>
               <LogOut size={18} />
             </button>
           </div>
         </header>
 
+        <SyncConflictBanner logbookId={activeLogbookId} />
+
+        {storagePersistHint && (
+          <div className="storage-persist-hint glass" role="status">
+            <p>{t('pwa.storage_persist_hint')}</p>
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={() => {
+                sessionStorage.setItem('storage_persist_hint_dismissed', '1')
+                setStoragePersistHint(false)
+              }}
+            >
+              {t('pwa.later')}
+            </button>
+          </div>
+        )}
+
       {/* Active Workspace */}
       <div className="app-body">
         {/* Navigation Sidebar */}
-        <aside className="app-sidebar">
+        <aside className="app-sidebar" aria-label={t('nav.dashboard')}>
           <button
             className={`sidebar-btn ${activeTab === 'logs' ? 'active' : ''}`}
-            onClick={() => setActiveTab('logs')}
+            onClick={() => void handleTabChange('logs')}
             data-tour="nav-logs"
           >
             <FileText size={18} />
@@ -312,7 +698,7 @@ function App() {
           
           <button
             className={`sidebar-btn ${activeTab === 'vessel' ? 'active' : ''}`}
-            onClick={() => setActiveTab('vessel')}
+            onClick={() => void handleTabChange('vessel')}
             data-tour="nav-vessel"
           >
             <Ship size={18} />
@@ -321,8 +707,8 @@ function App() {
 
           <button
             className={`sidebar-btn ${activeTab === 'crew' ? 'active' : ''}`}
-            onClick={() => setActiveTab('crew')}
-            data-tour="nav-crew"
+            onClick={() => void handleTabChange('crew')}
+            data-tour="nav-logbook-crew"
           >
             <Users size={18} />
             {t('nav.crew')}
@@ -340,7 +726,8 @@ function App() {
 
           <button
             className={`sidebar-btn ${activeTab === 'stats' ? 'active' : ''}`}
-            onClick={() => setActiveTab('stats')}
+            onClick={() => void handleTabChange('stats')}
+            data-tour="nav-stats"
           >
             <BarChart2 size={18} />
             {t('nav.stats')}
@@ -348,7 +735,7 @@ function App() {
 
           <button
             className={`sidebar-btn ${activeTab === 'settings' ? 'active' : ''}`}
-            onClick={() => setActiveTab('settings')}
+            onClick={() => void handleTabChange('settings')}
           >
             <Settings size={18} />
             {t('nav.settings')}
@@ -360,6 +747,7 @@ function App() {
           {activeTab === 'logs' && (
             <LogEntriesList
               logbookId={activeLogbookId}
+              readOnly={logbookReadOnly}
               controlledSelectedEntryId={tourSelectedEntryId}
               onSelectedEntryIdChange={setTourSelectedEntryId}
               highlightEntryId={demoHighlightEntryId}
@@ -367,11 +755,20 @@ function App() {
           )}
 
           {activeTab === 'vessel' && (
-            <VesselForm logbookId={activeLogbookId} />
+            <LogbookVesselPicker
+              logbookId={activeLogbookId}
+              readOnly={logbookReadOnly || !isLogbookOwner}
+              selectionOnly={!isLogbookOwner && activeLogbookRecord?.isShared === 1}
+              onOpenProfile={isLogbookOwner ? () => setShowUserProfile(true) : undefined}
+            />
           )}
 
           {activeTab === 'crew' && (
-            <CrewForm logbookId={activeLogbookId} />
+            <LogbookCrewPicker
+              logbookId={activeLogbookId}
+              readOnly={logbookReadOnly}
+              selectionOnly={!isLogbookOwner && activeLogbookRecord?.isShared === 1}
+            />
           )}
 
           {activeTab === 'stats' && activeLogbookId && activeLogbookTitle && (
@@ -385,9 +782,59 @@ function App() {
           */}
 
           {activeTab === 'settings' && (
-            <SettingsForm logbookId={activeLogbookId} />
+            <SettingsForm
+              logbookId={activeLogbookId}
+              onLogbookRestored={selectLogbook}
+            />
           )}
         </main>
+
+        <nav className="app-bottom-nav" aria-label={t('nav.dashboard')}>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'logs' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('logs')}
+            data-tour="nav-logs"
+          >
+            <FileText size={20} />
+            <span>{t('nav.logs')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'vessel' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('vessel')}
+            data-tour="nav-vessel"
+          >
+            <Ship size={20} />
+            <span>{t('nav.vessel')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'crew' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('crew')}
+            data-tour="nav-logbook-crew"
+          >
+            <Users size={20} />
+            <span>{t('nav.crew')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'stats' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('stats')}
+            data-tour="nav-stats"
+          >
+            <BarChart2 size={20} />
+            <span>{t('nav.stats')}</span>
+          </button>
+          <button
+            type="button"
+            className={`bottom-nav-btn ${activeTab === 'settings' ? 'active' : ''}`}
+            onClick={() => void handleTabChange('settings')}
+          >
+            <Settings size={20} />
+            <span>{t('nav.settings')}</span>
+          </button>
+        </nav>
       </div>
     </div>
   </div>
@@ -396,13 +843,17 @@ function App() {
 
 export default function AppWrapper() {
   return (
-    <DialogProvider>
-      <AppTourProvider>
-        <PwaUpdatePrompt />
-        <App />
-        <AppTourOverlay />
-      </AppTourProvider>
-      <AppFooter />
-    </DialogProvider>
+    <AppErrorBoundary>
+      <DialogProvider>
+        <UnsavedChangesProvider>
+          <AppTourProvider>
+            <PwaUpdatePrompt />
+            <App />
+            <AppTourOverlay />
+          </AppTourProvider>
+          <AppFooter />
+        </UnsavedChangesProvider>
+      </DialogProvider>
+    </AppErrorBoundary>
   )
 }

client/src/components/AccountDangerZone.tsx

@@ -46,6 +46,7 @@ export default function AccountDangerZone({ className = '' }: AccountDangerZoneP
       </div>
 
       <p className="account-danger-zone__desc">{t('settings.danger_zone_desc')}</p>
+      <p className="account-danger-zone__hint">{t('settings.delete_backup_hint')}</p>
 
       <div className="form-actions account-danger-zone__actions">
         <button

client/src/components/AppErrorBoundary.tsx

@@ -0,0 +1,42 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  error: Error | null
+}
+
+export default class AppErrorBoundary extends Component<Props, State> {
+  state: State = { error: null }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { error }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Unhandled app error:', error, info.componentStack)
+  }
+
+  render() {
+    if (!this.state.error) {
+      return this.props.children
+    }
+
+    return (
+      <div className="auth-screen">
+        <div className="auth-card glass" role="alert">
+          <h2 style={{ marginTop: 0 }}>Kapteins Daagbok</h2>
+          <p style={{ color: 'var(--app-text-muted)', lineHeight: 1.5 }}>
+            Die App ist nach dem Neustart in einen fehlerhaften Zustand geraten. Bitte neu laden
+            oder die App vollständig beenden und erneut öffnen.
+          </p>
+          <button type="button" className="btn primary" style={{ width: '100%', marginTop: 16 }} onClick={() => window.location.reload()}>
+            Neu laden
+          </button>
+        </div>
+      </div>
+    )
+  }
+}

client/src/components/AppFooter.tsx

@@ -1,3 +1,5 @@
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
 const APP_VERSION = typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : 'dev'
 
 export default function AppFooter() {
@@ -7,9 +9,15 @@ export default function AppFooter() {
       <span className="app-version-footer__sep" aria-hidden="true">
         ·
       </span>
-      <a className="app-version-footer__copyright" href="mailto:elpatron+kd@mailbox.org">
-        © 2026 Markus F.J. Busche
-      </a>
+      <span className="app-version-footer__copyright">
+        © 2026 KnorrLabs/
+        <a
+          href="mailto:elpatron+kd@mailbox.org"
+          onClick={() => trackPlausibleEvent(PlausibleEvents.FOOTER_LINK_CLICKED)}
+        >
+          Markus F.J. Busche
+        </a>
+      </span>
     </footer>
   )
 }

client/src/components/AppTourOverlay.tsx

@@ -4,6 +4,7 @@ import { X, ChevronLeft, ChevronRight } from 'lucide-react'
 import {
   getTourStepCopy,
   getTourTargetSelector,
+  getTourTargetRetryDelay,
   isCenteredTourStep,
   useAppTour
 } from '../context/AppTourContext.tsx'
@@ -15,19 +16,72 @@ interface SpotlightRect {
   height: number
 }
 
+const TOOLTIP_EDGE_MARGIN = 16
+const TOOLTIP_ESTIMATED_HEIGHT = 240
+const TOOLTIP_WIDTH = 420
+const TARGET_VIEWPORT_MARGIN = 24
+
+function clampTooltipTop(preferred: number): number {
+  const maxTop = window.innerHeight - TOOLTIP_EDGE_MARGIN - TOOLTIP_ESTIMATED_HEIGHT
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(preferred, maxTop))
+}
+
+function computeTooltipLeft(spotlight: SpotlightRect): number {
+  const tooltipWidth = Math.min(TOOLTIP_WIDTH, window.innerWidth - TOOLTIP_EDGE_MARGIN * 2)
+  const ideal = spotlight.left + spotlight.width / 2 - tooltipWidth / 2
+  const maxLeft = window.innerWidth - TOOLTIP_EDGE_MARGIN - tooltipWidth
+  return Math.max(TOOLTIP_EDGE_MARGIN, Math.min(ideal, maxLeft))
+}
+
 function buildCutoutClipPath(rect: SpotlightRect): string {
   const right = rect.left + rect.width
   const bottom = rect.top + rect.height
   return `polygon(evenodd, 0 0, 100vw 0, 100vw 100vh, 0 100vh, 0 0, ${rect.left}px ${rect.top}px, ${right}px ${rect.top}px, ${right}px ${bottom}px, ${rect.left}px ${bottom}px, ${rect.left}px ${rect.top}px)`
 }
 
+function computeTooltipTop(spotlight: SpotlightRect): number {
+  const viewportBottom = window.innerHeight - TOOLTIP_EDGE_MARGIN
+  const below = spotlight.top + spotlight.height + 12
+  if (below + TOOLTIP_ESTIMATED_HEIGHT <= viewportBottom) {
+    return clampTooltipTop(below)
+  }
+
+  const above = spotlight.top - 12 - TOOLTIP_ESTIMATED_HEIGHT
+  if (above >= TOOLTIP_EDGE_MARGIN) {
+    return clampTooltipTop(above)
+  }
+
+  return clampTooltipTop(below)
+}
+
+function isTargetVisibleInViewport(rect: DOMRect): boolean {
+  return (
+    rect.top >= TARGET_VIEWPORT_MARGIN &&
+    rect.bottom <= window.innerHeight - TARGET_VIEWPORT_MARGIN
+  )
+}
+
+function measureSpotlight(el: Element): SpotlightRect | null {
+  const rect = el.getBoundingClientRect()
+  if (rect.width <= 0 || rect.height <= 0) return null
+  const padding = 8
+  return {
+    top: Math.max(8, rect.top - padding),
+    left: Math.max(8, rect.left - padding),
+    width: rect.width + padding * 2,
+    height: rect.height + padding * 2
+  }
+}
+
 export default function AppTourOverlay() {
   const { t } = useTranslation()
   const {
     isActive,
+    isDemoTour,
     currentStepId,
     currentStepIndex,
     totalSteps,
+    layoutTick,
     nextStep,
     prevStep,
     skipTour
@@ -43,7 +97,10 @@ export default function AppTourOverlay() {
       return
     }
 
+    let cancelled = false
+
     const updateSpotlight = () => {
+      if (cancelled) return
       const selector = getTourTargetSelector(currentStepId)
       if (!selector) {
         setSpotlight(null)
@@ -54,27 +111,38 @@ export default function AppTourOverlay() {
         setSpotlight(null)
         return
       }
+
       const rect = el.getBoundingClientRect()
-      const padding = 8
-      setSpotlight({
-        top: Math.max(8, rect.top - padding),
-        left: Math.max(8, rect.left - padding),
-        width: rect.width + padding * 2,
-        height: rect.height + padding * 2
-      })
+      if (!isTargetVisibleInViewport(rect)) {
+        el.scrollIntoView({ behavior: 'instant', block: 'center', inline: 'nearest' })
+        window.requestAnimationFrame(() => {
+          if (cancelled) return
+          const next = measureSpotlight(el)
+          setSpotlight(next)
+        })
+        return
+      }
+
+      setSpotlight(measureSpotlight(el))
     }
 
     updateSpotlight()
     window.addEventListener('resize', updateSpotlight)
     window.addEventListener('scroll', updateSpotlight, true)
-    const timer = window.setTimeout(updateSpotlight, 120)
+
+    const retryDelays =
+      currentStepId === 'entry_track'
+        ? [400, 700, 1100, 1600]
+        : [getTourTargetRetryDelay(currentStepId), 120, 280, 480]
+    const timers = retryDelays.map((delay) => window.setTimeout(updateSpotlight, delay))
 
     return () => {
-      window.clearTimeout(timer)
+      cancelled = true
+      for (const timer of timers) window.clearTimeout(timer)
       window.removeEventListener('resize', updateSpotlight)
       window.removeEventListener('scroll', updateSpotlight, true)
     }
-  }, [currentStepId, isActive])
+  }, [currentStepId, isActive, layoutTick])
 
   useEffect(() => {
     if (!isActive) return
@@ -104,18 +172,22 @@ export default function AppTourOverlay() {
 
   if (!isActive || !currentStepId) return null
 
-  const { title, body } = getTourStepCopy(currentStepId, t)
+  const { title, body } = getTourStepCopy(currentStepId, t, { demoMode: isDemoTour })
   const centered = isCenteredTourStep(currentStepId)
 
   const tooltipStyle = centered
     ? undefined
     : spotlight
-      ? {
-          top: Math.min(window.innerHeight - 220, spotlight.top + spotlight.height + 12),
-          left: Math.min(window.innerWidth - 340, Math.max(16, spotlight.left)),
-          maxWidth: '420px'
-        }
-      : { top: '20%', left: '50%', transform: 'translateX(-50%)', maxWidth: '420px' }
+      ? { top: computeTooltipTop(spotlight), left: computeTooltipLeft(spotlight) }
+      : { top: '20%' }
+
+  const tooltipClassName = [
+    'app-tour-tooltip',
+    centered ? 'centered' : '',
+    !centered && spotlight ? 'app-tour-tooltip--anchored' : ''
+  ]
+    .filter(Boolean)
+    .join(' ')
 
   const backdropStyle = spotlight && !centered
     ? { clipPath: buildCutoutClipPath(spotlight) }
@@ -141,7 +213,7 @@ export default function AppTourOverlay() {
         />
       )}
 
-      <div className={`app-tour-tooltip${centered ? ' centered' : ''}`} style={tooltipStyle}>
+      <div className={tooltipClassName} style={tooltipStyle}>
         <button type="button" className="app-tour-close" onClick={skipTour} aria-label={t('tour.skip')}>
           <X size={18} />
         </button>

client/src/components/AuthOnboarding.tsx

@@ -1,24 +1,35 @@
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { 
-  registerUser, 
-  loginUser, 
-  completeLoginWithRecovery, 
-  setLocalPin, 
-  hasLocalPin, 
-  decryptWithLocalPin, 
+import { cycleAppLanguage, getNextLanguage } from '../utils/i18nLanguages.js'
+import {
+  registerUser,
+  loginUser,
+  completeLoginWithRecovery,
+  setLocalPin,
+  hasLocalPin,
+  decryptWithLocalPin,
   getActiveMasterKey,
   getKnownUsernames,
-  forgetUsername
+  forgetUsername,
+  hasUnlockedLocalSession,
+  logoutUser
 } from '../services/auth.js'
 import { KeyRound, ShieldAlert, Languages, HelpCircle, UserRound, X } from 'lucide-react'
 import RegistrationDisclaimer from './RegistrationDisclaimer.tsx'
+import DisclaimerModal from './DisclaimerModal.tsx'
+import BetaBadge from './BetaBadge.tsx'
+import {
+  isPasskeyCompatibleLocation,
+  localizeWebAuthnError,
+  toPasskeyCompatibleUrl
+} from '../utils/passkeyHost.ts'
 
 interface AuthOnboardingProps {
   onAuthenticated: () => void
+  onOpenDemo?: () => void
 }
 
-export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps) {
+export default function AuthOnboarding({ onAuthenticated, onOpenDemo }: AuthOnboardingProps) {
   const { t, i18n } = useTranslation()
   const [username, setUsername] = useState('')
   const [loading, setLoading] = useState(false)
@@ -48,6 +59,17 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
 
   const [isNewRegistration, setIsNewRegistration] = useState(false)
   const [showDisclaimer, setShowDisclaimer] = useState(false)
+  const [showHelp, setShowHelp] = useState(false)
+
+  const passkeyHostOk = isPasskeyCompatibleLocation()
+  const passkeyCompatibleUrl = passkeyHostOk ? null : toPasskeyCompatibleUrl(window.location.href)
+
+  const formatAuthError = (message: string) =>
+    localizeWebAuthnError(message, {
+      invalidHost: t('auth.error_invalid_host'),
+      cancelled: t('auth.error_passkey_cancelled'),
+      invalidRpId: t('auth.error_invalid_rp_id')
+    })
 
   const finishAuth = () => {
     if (isNewRegistration) {
@@ -76,7 +98,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
         setRecoveryPhrase(result.recoveryPhrase)
       }
     } catch (err: any) {
-      setError(err.message || 'Registration failed')
+      setError(formatAuthError(err.message || 'Registration failed'))
     } finally {
       setLoading(false)
     }
@@ -116,7 +138,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
         }
       }
     } catch (err: any) {
-      setError(err.message || 'Login failed')
+      setError(formatAuthError(err.message || 'Login failed'))
     } finally {
       setLoading(false)
     }
@@ -180,19 +202,33 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
 
   const handlePinLoginSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (!pinLoginInput.trim()) return
+    if (!pinLoginInput.trim() || loading) return
+
+    const resolvedUser =
+      username.trim() ||
+      encryptedPayloads?.username ||
+      localStorage.getItem('active_username') ||
+      ''
+    if (!resolvedUser) {
+      setError(t('auth.error_session_incomplete'))
+      return
+    }
 
     setLoading(true)
     setError(null)
     try {
-      const resolvedUser = username.trim() || encryptedPayloads?.username
       const key = await decryptWithLocalPin(pinLoginInput.trim(), resolvedUser)
-      if (key) {
-        onAuthenticated()
-      } else {
+      if (!key) {
         setError(t('auth.error_incorrect_pin'))
+        return
       }
-    } catch (err: any) {
+      if (!hasUnlockedLocalSession()) {
+        setError(t('auth.error_session_incomplete'))
+        return
+      }
+      setShowPinLogin(false)
+      onAuthenticated()
+    } catch {
       setError(t('auth.error_incorrect_pin'))
     } finally {
       setLoading(false)
@@ -205,8 +241,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
   }
 
   const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
+    cycleAppLanguage(i18n)
   }
 
   const copyToClipboard = () => {
@@ -271,6 +306,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
             </label>
             <input
               type="password"
+              name="new-pin"
               inputMode="numeric"
               pattern="[0-9]*"
               maxLength={8}
@@ -280,6 +316,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
               onChange={(e) => setPinInput(e.target.value.replace(/\D/g, ''))}
               disabled={loading}
               required
+              autoComplete="new-password"
               style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
             />
           </div>
@@ -320,6 +357,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
           <div className="input-group">
             <input
               type="password"
+              name="pin"
               inputMode="numeric"
               pattern="[0-9]*"
               maxLength={8}
@@ -329,6 +367,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
               onChange={(e) => setPinLoginInput(e.target.value.replace(/\D/g, ''))}
               disabled={loading}
               required
+              autoComplete="current-password"
               style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
             />
           </div>
@@ -353,6 +392,24 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
             >
               {t('auth.use_recovery_instead')}
             </button>
+
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={() => {
+                void (async () => {
+                  setShowPinLogin(false)
+                  setPinLoginInput('')
+                  setEncryptedPayloads(null)
+                  setError(null)
+                  await logoutUser()
+                })()
+              }}
+              disabled={loading}
+              style={{ width: '100%' }}
+            >
+              {t('auth.back')}
+            </button>
           </div>
         </form>
       </div>
@@ -371,16 +428,37 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
           {t('auth.recovery_fallback_warning')}
         </p>
 
-        <form onSubmit={handleRecoverySubmit} className="auth-form">
-          <textarea
-            className="input-textarea"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            disabled={loading}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} className="auth-form" autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              disabled={loading}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>
 
           {error && <div className="auth-error">{error}</div>}
 
@@ -404,20 +482,33 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
 
   // Render 3: Standard Login / Registration options form
   return (
+    <>
     <div className="auth-card glass">
       <div className="auth-brand">
         <img src="/logo.png" alt="Kapteins Daagbok" className="auth-logo-img" />
-        <h1>{t('app.name')}</h1>
+        <div className="auth-brand-title-row">
+          <h1>{t('app.name')}</h1>
+          <BetaBadge />
+        </div>
         <p className="tagline">{t('auth.tagline')}</p>
       </div>
 
       <div className="auth-form" style={{ width: '100%', display: 'flex', flexDirection: 'column', gap: '20px' }}>
+        {!passkeyHostOk && passkeyCompatibleUrl && (
+          <div className="auth-error" role="alert">
+            <p style={{ margin: '0 0 8px' }}>{t('auth.error_invalid_host')}</p>
+            <a href={passkeyCompatibleUrl} className="btn secondary" style={{ display: 'inline-block', textDecoration: 'none' }}>
+              {t('auth.use_localhost_link')}
+            </a>
+          </div>
+        )}
+
         {/* Prominent Login button */}
         <button
           type="button"
           className="btn primary"
           onClick={() => handleLogin()}
-          disabled={loading}
+          disabled={loading || !passkeyHostOk}
           style={{ width: '100%', padding: '16px' }}
         >
           {loading
@@ -523,6 +614,16 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
           <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.1)' }}></div>
         </div>
 
+        <button
+          type="button"
+          className="btn secondary"
+          onClick={() => onOpenDemo?.()}
+          disabled={loading}
+          style={{ width: '100%' }}
+        >
+          {t('auth.explore_demo')}
+        </button>
+
         {/* Registration form */}
         <form onSubmit={handleRegister} style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
           <div className="input-group">
@@ -540,7 +641,7 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
           <button
             type="submit"
             className="btn secondary"
-            disabled={loading || !username.trim()}
+            disabled={loading || !username.trim() || !passkeyHostOk}
             style={{ width: '100%' }}
           >
             {t('auth.register')}
@@ -551,15 +652,23 @@ export default function AuthOnboarding({ onAuthenticated }: AuthOnboardingProps)
       </div>
 
       <div className="auth-footer">
-        <button className="btn-icon-text" onClick={toggleLanguage}>
+        <button type="button" className="btn-icon-text" onClick={toggleLanguage}>
           <Languages size={18} />
-          {i18n.language.startsWith('de') ? 'English' : 'Deutsch'}
+          {t(`languages.${getNextLanguage(i18n.language)}`)}
         </button>
-        <a href="#help" className="btn-icon-text link-sec">
+        <button
+          type="button"
+          className="btn-icon-text link-sec"
+          onClick={() => setShowHelp(true)}
+          title={t('disclaimer.button_title')}
+          aria-label={t('disclaimer.button_title')}
+        >
           <HelpCircle size={18} />
           {t('auth.help')}
-        </a>
+        </button>
       </div>
     </div>
+    <DisclaimerModal open={showHelp} onClose={() => setShowHelp(false)} />
+    </>
   )
 }

client/src/components/BetaBadge.tsx

@@ -0,0 +1,19 @@
+import { useTranslation } from 'react-i18next'
+
+interface BetaBadgeProps {
+  className?: string
+}
+
+export default function BetaBadge({ className = '' }: BetaBadgeProps) {
+  const { t } = useTranslation()
+
+  return (
+    <span
+      className={`beta-badge ${className}`.trim()}
+      title={t('app.beta_hint')}
+      aria-label={t('app.beta_hint')}
+    >
+      {t('app.beta')}
+    </span>
+  )
+}

client/src/components/CourseDialInput.tsx

@@ -0,0 +1,285 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  type CourseOutputMode,
+  type CourseStep,
+  dialDegreesToStorageValue,
+  formatCourseAngle,
+  formatCourseDisplay,
+  isCardinalDirection,
+  loadCourseDialStep,
+  parseCourseAngle,
+  pointerAngleToDegrees,
+  resolveCourseOutputMode,
+  saveCourseDialStep,
+  snapDegrees,
+  valueToDialDegrees
+} from '../utils/courseAngle.js'
+
+interface CourseDialInputProps {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  step?: CourseStep
+  allowCardinal?: boolean
+  displayMode?: 'degrees' | 'cardinal' | 'auto'
+  size?: 'md' | 'sm'
+  'aria-label': string
+  id?: string
+}
+
+const TICK_DEGREES = [0, 30, 60, 90, 120, 150, 180, 210, 240, 270, 300, 330]
+
+function polarPoint(degrees: number, radius: number): { x: number; y: number } {
+  const rad = (degrees * Math.PI) / 180
+  return {
+    x: 100 + Math.sin(rad) * radius,
+    y: 100 - Math.cos(rad) * radius
+  }
+}
+
+export default function CourseDialInput({
+  value,
+  onChange,
+  disabled = false,
+  step: stepProp,
+  allowCardinal = false,
+  displayMode = 'degrees',
+  size = 'md',
+  'aria-label': ariaLabel,
+  id: idProp
+}: CourseDialInputProps) {
+  const { t } = useTranslation()
+  const generatedId = useId()
+  const inputId = idProp ?? `${generatedId}-input`
+  const svgRef = useRef<SVGSVGElement>(null)
+  const [step, setStep] = useState<CourseStep>(() => stepProp ?? loadCourseDialStep())
+  const [inputDraft, setInputDraft] = useState<string | null>(null)
+  const [inputError, setInputError] = useState<string | null>(null)
+  const [outputModeOverride, setOutputModeOverride] = useState<CourseOutputMode | null>(null)
+
+  const effectiveStep = stepProp ?? step
+  const outputMode =
+    outputModeOverride ??
+    resolveCourseOutputMode(value, displayMode, allowCardinal)
+
+  const dialDegrees = useMemo(
+    () => snapDegrees(valueToDialDegrees(value, allowCardinal), effectiveStep),
+    [value, allowCardinal, effectiveStep]
+  )
+
+  const centerLabel = useMemo(
+    () => formatCourseDisplay(value, allowCardinal),
+    [value, allowCardinal]
+  )
+
+  const tickLabel = useCallback(
+    (degrees: number) => {
+      if (degrees === 0) return t('logs.compass_n')
+      if (degrees === 90) return t('logs.compass_e')
+      if (degrees === 180) return t('logs.compass_s')
+      if (degrees === 270) return t('logs.compass_w')
+      return String(degrees).padStart(3, '0')
+    },
+    [t]
+  )
+
+  const applyDegrees = useCallback(
+    (degrees: number) => {
+      onChange(dialDegreesToStorageValue(degrees, outputMode, effectiveStep))
+      setInputDraft(null)
+      setInputError(null)
+    },
+    [onChange, outputMode, effectiveStep]
+  )
+
+  const updateFromPointer = useCallback(
+    (clientX: number, clientY: number) => {
+      const svg = svgRef.current
+      if (!svg || disabled) return
+      const rect = svg.getBoundingClientRect()
+      const cx = rect.left + rect.width / 2
+      const cy = rect.top + rect.height / 2
+      const raw = pointerAngleToDegrees(clientX, clientY, cx, cy)
+      applyDegrees(raw)
+    },
+    [applyDegrees, disabled]
+  )
+
+  const handlePointerDown = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (disabled) return
+    e.preventDefault()
+    e.currentTarget.setPointerCapture(e.pointerId)
+    updateFromPointer(e.clientX, e.clientY)
+  }
+
+  const handlePointerMove = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return
+    updateFromPointer(e.clientX, e.clientY)
+  }
+
+  const handlePointerUp = (e: React.PointerEvent<SVGSVGElement>) => {
+    if (e.currentTarget.hasPointerCapture(e.pointerId)) {
+      e.currentTarget.releasePointerCapture(e.pointerId)
+    }
+  }
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setInputDraft(e.target.value)
+  }
+
+  const commitInput = () => {
+    const draft = (inputDraft ?? value).trim()
+    setInputDraft(null)
+    if (!draft) {
+      onChange('')
+      setInputError(null)
+      return
+    }
+    if (allowCardinal && outputMode === 'cardinal' && isCardinalDirection(draft)) {
+      onChange(draft.toUpperCase())
+      setInputError(null)
+      return
+    }
+    const parsed = parseCourseAngle(draft)
+    if (parsed === null) {
+      setInputError(t('logs.course_invalid'))
+      return
+    }
+    onChange(formatCourseAngle(snapDegrees(parsed, effectiveStep)))
+    setInputError(null)
+  }
+
+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      commitInput()
+      return
+    }
+    if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+      e.preventDefault()
+      const base = parseCourseAngle(value) ?? dialDegrees
+      const delta = e.key === 'ArrowUp' ? effectiveStep : -effectiveStep
+      applyDegrees(base + delta)
+    }
+  }
+
+  const handleStepChange = (next: CourseStep) => {
+    if (stepProp !== undefined) return
+    setStep(next)
+    saveCourseDialStep(next)
+    const parsed = parseCourseAngle(value)
+    if (parsed !== null) {
+      onChange(formatCourseAngle(snapDegrees(parsed, next)))
+    }
+  }
+
+  const toggleOutputMode = () => {
+    const next: CourseOutputMode = outputMode === 'cardinal' ? 'degrees' : 'cardinal'
+    setOutputModeOverride(next)
+    const deg = valueToDialDegrees(value, allowCardinal)
+    onChange(dialDegreesToStorageValue(deg, next, effectiveStep))
+  }
+
+  const inputValue = inputDraft ?? value
+  const sliderNow = dialDegrees
+
+  return (
+    <div
+      className={`course-dial course-dial--${size}${disabled ? ' course-dial--disabled' : ''}`}
+    >
+      {!stepProp && (
+        <div className="course-dial__step-toolbar" role="group" aria-label={t('logs.course_dial_step_label')}>
+          {([1, 5, 10] as const).map((s) => (
+            <button
+              key={s}
+              type="button"
+              className={`course-dial__step-btn${effectiveStep === s ? ' is-active' : ''}`}
+              onClick={() => handleStepChange(s)}
+              disabled={disabled}
+              aria-pressed={effectiveStep === s}
+            >
+              {s === 1 ? t('logs.course_step_fine') : s === 5 ? t('logs.course_step_medium') : t('logs.course_step_coarse')}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div
+        className="course-dial__ring-wrap"
+        role="slider"
+        aria-label={ariaLabel}
+        aria-valuemin={0}
+        aria-valuemax={360}
+        aria-valuenow={sliderNow}
+        aria-disabled={disabled}
+      >
+        <svg
+          ref={svgRef}
+          className="course-dial__svg"
+          viewBox="0 0 200 200"
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+          onPointerUp={handlePointerUp}
+          onPointerCancel={handlePointerUp}
+        >
+          <circle className="course-dial__track" cx="100" cy="100" r="88" />
+          {TICK_DEGREES.map((deg) => {
+            const inner = polarPoint(deg, 76)
+            const outer = polarPoint(deg, 88)
+            const label = polarPoint(deg, 64)
+            return (
+              <g key={deg}>
+                <line className="course-dial__tick" x1={inner.x} y1={inner.y} x2={outer.x} y2={outer.y} />
+                <text className="course-dial__label" x={label.x} y={label.y} textAnchor="middle" dominantBaseline="middle">
+                  {tickLabel(deg)}
+                </text>
+              </g>
+            )
+          })}
+          <g className="course-dial__needle" transform={`rotate(${dialDegrees} 100 100)`}>
+            <line x1="100" y1="100" x2="100" y2="28" />
+            <circle cx="100" cy="100" r="6" />
+          </g>
+          <text className="course-dial__center" x="100" y="100" textAnchor="middle" dominantBaseline="middle">
+            {centerLabel}
+          </text>
+        </svg>
+      </div>
+
+      <p className="course-dial__hint">{t('logs.course_dial_hint')}</p>
+
+      <input
+        id={inputId}
+        type="text"
+        inputMode="numeric"
+        className="input-text course-dial__input"
+        value={inputValue}
+        onChange={handleInputChange}
+        onBlur={commitInput}
+        onKeyDown={handleInputKeyDown}
+        disabled={disabled}
+        placeholder={
+          outputMode === 'cardinal'
+            ? t('logs.course_placeholder_cardinal')
+            : t('logs.course_placeholder_degrees')
+        }
+        aria-label={ariaLabel}
+        aria-invalid={inputError ? true : undefined}
+      />
+
+      {inputError && <p className="course-dial__error">{inputError}</p>}
+
+      {allowCardinal && displayMode === 'auto' && (
+        <button
+          type="button"
+          className="course-dial__mode-toggle"
+          onClick={toggleOutputMode}
+          disabled={disabled}
+        >
+          {outputMode === 'cardinal' ? t('logs.wind_mode_degrees') : t('logs.wind_mode_cardinal')}
+        </button>
+      )}
+    </div>
+  )
+}

client/src/components/CrewForm.tsx

@@ -6,12 +6,14 @@ import { getLogbookKey } from '../services/logbookKeys.js'
 import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { MAX_POOL_CREW_MEMBERS } from '../types/person.js'
 import { useDialog } from './ModalDialog.tsx'
 import { Users, User, Plus, Trash2, Edit2, Save, X, Check, Camera } from 'lucide-react'
 
 interface CrewFormProps {
   logbookId: string
   readOnly?: boolean
+  skipperReadOnly?: boolean
   preloadedData?: any[]
 }
 
@@ -34,9 +36,15 @@ interface DecryptedCrew {
   data: CrewMemberData
 }
 
-export default function CrewForm({ logbookId, readOnly = false, preloadedData }: CrewFormProps) {
+export default function CrewForm({
+  logbookId,
+  readOnly = false,
+  skipperReadOnly = false,
+  preloadedData
+}: CrewFormProps) {
   const { t } = useTranslation()
   const { showConfirm } = useDialog()
+  const skipperFormReadOnly = readOnly || skipperReadOnly
 
   // Skipper profile state
   const [skipName, setSkipName] = useState('')
@@ -192,7 +200,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
 
   const handleSaveSkipper = async (e: React.FormEvent) => {
     e.preventDefault()
-    if (readOnly) return
+    if (skipperFormReadOnly) return
     setSavingSkipper(true)
     setError(null)
     setSkipperSuccess(false)
@@ -397,10 +405,14 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
 
         {error && <div className="auth-error mb-4">{error}</div>}
 
+        {skipperReadOnly && !readOnly && (
+          <p className="help-text mb-4">{t('crew.skipper_read_only_hint')}</p>
+        )}
+
         <form onSubmit={handleSaveSkipper} className="vessel-form">
           <div className="form-grid">
             <div className="vessel-photo-wrapper">
-              <div className="vessel-photo-preview" onClick={readOnly ? undefined : () => skipFileInputRef.current?.click()} style={{ cursor: readOnly ? 'default' : 'pointer' }}>
+              <div className="vessel-photo-preview" onClick={skipperFormReadOnly ? undefined : () => skipFileInputRef.current?.click()} style={{ cursor: skipperFormReadOnly ? 'default' : 'pointer' }}>
                 {skipPhoto ? (
                   <img src={skipPhoto} alt={skipName || 'Skipper'} className="vessel-photo" />
                 ) : (
@@ -408,7 +420,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                     <User size={48} className="placeholder-icon" />
                   </div>
                 )}
-                {!readOnly && (
+                {!skipperFormReadOnly && (
                   <div className="vessel-photo-overlay">
                     <Camera size={24} />
                     <span>{skipPhoto ? t('vessel.photo_change') : t('vessel.photo_add')}</span>
@@ -416,7 +428,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 )}
               </div>
               
-              {!readOnly && (
+              {!skipperFormReadOnly && (
                 <div className="vessel-photo-actions">
                   <button
                     type="button"
@@ -473,7 +485,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipName}
                 onChange={(e) => setSkipName(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
                 required
               />
             </div>
@@ -485,7 +497,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipAddress}
                 onChange={(e) => setSkipAddress(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -496,7 +508,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipBirthDate}
                 onChange={(e) => setSkipBirthDate(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -507,7 +519,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipPhone}
                 onChange={(e) => setSkipPhone(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -518,7 +530,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipNationality}
                 onChange={(e) => setSkipNationality(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -529,7 +541,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipPassport}
                 onChange={(e) => setSkipPassport(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -540,7 +552,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipBloodType}
                 onChange={(e) => setSkipBloodType(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -551,7 +563,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipAllergies}
                 onChange={(e) => setSkipAllergies(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
 
@@ -562,12 +574,12 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
                 className="input-text"
                 value={skipDiseases}
                 onChange={(e) => setSkipDiseases(e.target.value)}
-                disabled={savingSkipper || readOnly}
+                disabled={savingSkipper || skipperFormReadOnly}
               />
             </div>
           </div>
 
-          {!readOnly && (
+          {!skipperFormReadOnly && (
             <div className="form-actions">
               {skipperSuccess && (
                 <div className="success-toast">
@@ -592,7 +604,7 @@ export default function CrewForm({ logbookId, readOnly = false, preloadedData }:
             <Users size={24} className="form-icon" />
             <h2>{t('crew.crew_section')}</h2>
           </div>
-          {!readOnly && crewList.length < 5 && !showMemberForm && (
+          {!readOnly && crewList.length < MAX_POOL_CREW_MEMBERS && !showMemberForm && (
             <button className="btn primary" onClick={openAddMember} style={{ width: 'auto', padding: '8px 16px' }}>
               <Plus size={16} />
               {t('crew.add_crew')}

client/src/components/DemoViewer.tsx

@@ -0,0 +1,190 @@
+import { useState, useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import { cycleAppLanguage, getNextLanguage } from '../utils/i18nLanguages.js'
+import LogbookVesselPicker from './LogbookVesselPicker.tsx'
+import LogbookCrewPicker from './LogbookCrewPicker.tsx'
+import type { LogbookCrewSelectionData } from '../types/person.js'
+import { personToSnapshot } from '../utils/personSnapshots.js'
+import LogEntriesList from './LogEntriesList.tsx'
+import { Ship, Users, FileText, Lock, Globe, ChevronLeft, UserPlus } from 'lucide-react'
+import { buildPublicDemoFixture, type PublicDemoFixture } from '../services/demoLogbookData.js'
+import type { VesselData } from '../types/vessel.js'
+import type { LogbookVesselSelectionData } from '../types/vessel.js'
+import { useAppTour, type AppTab } from '../context/AppTourContext.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+interface DemoViewerProps {
+  onExit: () => void
+}
+
+export default function DemoViewer({ onExit }: DemoViewerProps) {
+  const { t, i18n } = useTranslation()
+  const { registerNavigation, registerDemoTourContext, startTour } = useAppTour()
+  const [activeTab, setActiveTab] = useState<AppTab>('logs')
+  const [tourSelectedEntryId, setTourSelectedEntryId] = useState<string | null>(null)
+  const [fixture, setFixture] = useState<PublicDemoFixture>(() => buildPublicDemoFixture())
+
+  useEffect(() => {
+    trackPlausibleEvent(PlausibleEvents.DEMO_OPENED)
+  }, [])
+
+  useEffect(() => {
+    setFixture(buildPublicDemoFixture())
+  }, [i18n.language])
+
+  useEffect(() => {
+    registerNavigation({
+      setActiveTab,
+      setSelectedEntryId: setTourSelectedEntryId,
+      setFeedbackOpen: () => {},
+      setLogbookActive: () => {},
+      setProfileOpen: () => {}
+    })
+    registerDemoTourContext({ firstEntryId: fixture.firstEntryId })
+
+    const timer = window.setTimeout(() => {
+      startTour({ force: true, demoMode: true })
+    }, 400)
+
+    return () => {
+      window.clearTimeout(timer)
+      registerDemoTourContext(null)
+    }
+  }, [registerNavigation, registerDemoTourContext, startTour, fixture.firstEntryId])
+
+  const toggleLanguage = () => {
+    cycleAppLanguage(i18n)
+  }
+
+  const {
+    title,
+    yacht,
+    vesselPool,
+    logbookVesselSelection,
+    personPool,
+    logbookCrewSelection,
+    entries,
+    gpsTracks,
+    photos,
+    firstEntryId
+  } = fixture
+
+  const demoSelection: LogbookCrewSelectionData = {
+    activeSkipperId: logbookCrewSelection.activeSkipperId,
+    activeCrewIds: logbookCrewSelection.activeCrewIds,
+    snapshotsById: Object.fromEntries(
+      Object.entries(logbookCrewSelection.snapshotsById).map(([id, snap]) => [
+        id,
+        personToSnapshot(id, snap)
+      ])
+    )
+  }
+
+  return (
+    <div className="app-layout">
+      <div className="sync-progress-bar" style={{ height: '4px', background: 'linear-gradient(90deg, #f59e0b, #3b82f6)' }} />
+
+      <header className="app-header" style={{ borderBottom: '1px solid rgba(245, 158, 11, 0.25)' }}>
+        <div className="app-header-left">
+          <button className="btn-back" onClick={onExit}>
+            <ChevronLeft size={16} />
+            {t('demo.back_to_login')}
+          </button>
+          <div className="app-title-area">
+            <div className="app-title-row">
+              <h2>{title}</h2>
+              <span className="demo-badge">{t('demo.badge')}</span>
+            </div>
+            <p className="app-subtitle" style={{ color: '#f59e0b', display: 'flex', alignItems: 'center', gap: '4px' }}>
+              <Lock size={12} />
+              <span>{t('demo.public_banner')}</span>
+            </p>
+          </div>
+        </div>
+
+        <div className="header-actions">
+          <button
+            className="btn primary"
+            onClick={onExit}
+            style={{ width: 'auto', padding: '6px 14px', fontSize: '13px' }}
+          >
+            <UserPlus size={14} style={{ marginRight: '4px' }} />
+            {t('demo.cta_register')}
+          </button>
+          <button className="btn secondary" onClick={toggleLanguage} style={{ width: 'auto', padding: '6px 12px', fontSize: '13px' }}>
+            <Globe size={14} style={{ marginRight: '4px' }} />
+            {t(`languages.${getNextLanguage(i18n.language)}`)}
+          </button>
+        </div>
+      </header>
+
+      <div className="app-body">
+        <aside className="app-sidebar">
+          <button
+            className={`sidebar-btn ${activeTab === 'logs' ? 'active' : ''}`}
+            onClick={() => setActiveTab('logs')}
+            data-tour="nav-logs"
+          >
+            <FileText size={18} />
+            {t('nav.logs')}
+          </button>
+
+          <button
+            className={`sidebar-btn ${activeTab === 'vessel' ? 'active' : ''}`}
+            onClick={() => setActiveTab('vessel')}
+            data-tour="nav-vessel"
+          >
+            <Ship size={18} />
+            {t('nav.vessel')}
+          </button>
+
+          <button
+            className={`sidebar-btn ${activeTab === 'crew' ? 'active' : ''}`}
+            onClick={() => setActiveTab('crew')}
+            data-tour="nav-logbook-crew"
+          >
+            <Users size={18} />
+            {t('nav.crew')}
+          </button>
+        </aside>
+
+        <main className="app-content">
+          {activeTab === 'logs' && (
+            <LogEntriesList
+              logbookId="demo"
+              readOnly={true}
+              preloadedYacht={yacht}
+              preloadedEntries={entries}
+              preloadedPhotos={photos}
+              preloadedGpsTracks={gpsTracks}
+              controlledSelectedEntryId={tourSelectedEntryId}
+              onSelectedEntryIdChange={setTourSelectedEntryId}
+              highlightEntryId={firstEntryId}
+            />
+          )}
+
+          {activeTab === 'vessel' && (
+            <LogbookVesselPicker
+              logbookId="demo"
+              readOnly={true}
+              preloadedPool={vesselPool.map((v) => ({
+                payloadId: v.payloadId,
+                data: v.data as VesselData
+              }))}
+              preloadedSelection={logbookVesselSelection as LogbookVesselSelectionData}
+            />
+          )}
+
+          {activeTab === 'crew' && (
+            <LogbookCrewPicker
+              logbookId="demo"
+              readOnly={true}
+              preloadedPool={personPool}
+              preloadedSelection={demoSelection}
+            />
+          )}
+        </main>
+      </div>
+    </div>
+  )
+}

client/src/components/DisclaimerModal.tsx

@@ -13,7 +13,12 @@ export default function DisclaimerModal({ open, onClose }: DisclaimerModalProps)
       if (event.key === 'Escape') onClose()
     }
     window.addEventListener('keydown', onKeyDown)
-    return () => window.removeEventListener('keydown', onKeyDown)
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      document.body.style.overflow = prevOverflow
+    }
   }, [open, onClose])
 
   if (!open) return null

client/src/components/EntryCrewSection.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Users } from 'lucide-react'
+import type { EntryCrewFields, PersonSnapshot } from '../types/person.js'
+import { loadPersonPool } from '../services/personPool.js'
+import { loadLogbookCrewSelection } from '../services/logbookCrewSelection.js'
+import { buildSnapshotsForSelection } from '../utils/personSnapshots.js'
+import type { PersonData } from '../types/person.js'
+
+export interface EntryCrewSectionProps {
+  logbookId: string
+  readOnly?: boolean
+  value: EntryCrewFields
+  onChange: (next: EntryCrewFields) => void
+  /** Demo: fixed pool */
+  preloadedPool?: Map<string, PersonData>
+}
+
+export default function EntryCrewSection({
+  logbookId,
+  readOnly = false,
+  value,
+  onChange,
+  preloadedPool
+}: EntryCrewSectionProps) {
+  const { t } = useTranslation()
+  const [pool, setPool] = useState<Map<string, PersonData>>(preloadedPool ?? new Map())
+
+  useEffect(() => {
+    if (preloadedPool) {
+      setPool(preloadedPool)
+      return
+    }
+    let cancelled = false
+    void (async () => {
+      try {
+        const people = await loadPersonPool()
+        if (cancelled) return
+        setPool(new Map(people.map((p) => [p.payloadId, p.data])))
+      } catch {
+        /* use snapshots only */
+      }
+    })()
+    return () => {
+      cancelled = true
+    }
+  }, [preloadedPool])
+
+  const displayPool = useMemo(() => {
+    const merged = new Map(pool)
+    for (const snap of Object.values(value.crewSnapshotsById)) {
+      if (!merged.has(snap.id)) {
+        merged.set(snap.id, {
+          name: snap.name,
+          address: snap.address,
+          birthDate: snap.birthDate,
+          phone: snap.phone,
+          nationality: snap.nationality,
+          passportNumber: snap.passportNumber,
+          bloodType: snap.bloodType,
+          allergies: snap.allergies,
+          diseases: snap.diseases,
+          role: snap.role,
+          photo: snap.photo
+        })
+      }
+    }
+    return merged
+  }, [pool, value.crewSnapshotsById])
+
+  const skippers = [...displayPool.entries()].filter(([, d]) => d.role === 'skipper')
+  const crewEntries = [...displayPool.entries()].filter(([, d]) => d.role === 'crew')
+
+  const applyChange = (skipperId: string | null, crewIds: string[]) => {
+    const snapshots = buildSnapshotsForSelection(skipperId, crewIds, displayPool)
+    onChange({
+      selectedSkipperId: skipperId,
+      selectedCrewIds: crewIds,
+      crewSnapshotsById: snapshots
+    })
+  }
+
+  const toggleCrew = (id: string) => {
+    if (readOnly) return
+    const next = value.selectedCrewIds.includes(id)
+      ? value.selectedCrewIds.filter((x) => x !== id)
+      : [...value.selectedCrewIds, id]
+    applyChange(value.selectedSkipperId, next)
+  }
+
+  return (
+    <div className="form-card" data-tour="entry-crew">
+      <div className="form-header">
+        <Users size={22} className="form-icon" />
+        <h3>{t('entry_crew.title')}</h3>
+      </div>
+      <p className="help-text mb-3">{t('entry_crew.subtitle')}</p>
+
+      <div className="input-group mb-3">
+        <label>{t('entry_crew.day_skipper')}</label>
+        {skippers.length === 0 ? (
+          <p className="help-text">{t('entry_crew.no_skipper')}</p>
+        ) : (
+          <div className="crew-selection-list">
+            {skippers.map(([id, data]) => (
+              <label key={id} className="crew-selection-item">
+                <input
+                  type="radio"
+                  name={`entry-skipper-${logbookId}`}
+                  checked={value.selectedSkipperId === id}
+                  onChange={() => !readOnly && applyChange(id, value.selectedCrewIds)}
+                  disabled={readOnly}
+                />
+                <span>{data.name || t('logbook_crew.unnamed')}</span>
+              </label>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <div className="input-group">
+        <label>{t('entry_crew.day_crew')}</label>
+        {crewEntries.length === 0 ? (
+          <p className="help-text">{t('entry_crew.no_crew')}</p>
+        ) : (
+          <div className="crew-selection-list">
+            {crewEntries.map(([id, data]) => (
+              <label key={id} className="crew-selection-item">
+                <input
+                  type="checkbox"
+                  checked={value.selectedCrewIds.includes(id)}
+                  onChange={() => toggleCrew(id)}
+                  disabled={readOnly}
+                />
+                <span>{data.name || t('logbook_crew.unnamed')}</span>
+              </label>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export async function loadDefaultEntryCrewForNewDay(
+  logbookId: string,
+  previousEntry: Record<string, unknown> | null
+): Promise<EntryCrewFields> {
+  if (previousEntry) {
+    const selectedSkipperId =
+      typeof previousEntry.selectedSkipperId === 'string' ? previousEntry.selectedSkipperId : null
+    const selectedCrewIds = Array.isArray(previousEntry.selectedCrewIds)
+      ? previousEntry.selectedCrewIds.filter((id): id is string => typeof id === 'string')
+      : []
+    const crewSnapshotsById =
+      previousEntry.crewSnapshotsById && typeof previousEntry.crewSnapshotsById === 'object'
+        ? (previousEntry.crewSnapshotsById as Record<string, PersonSnapshot>)
+        : {}
+    return { selectedSkipperId, selectedCrewIds, crewSnapshotsById }
+  }
+
+  const selection = await loadLogbookCrewSelection(logbookId)
+  return {
+    selectedSkipperId: selection.activeSkipperId,
+    selectedCrewIds: [...selection.activeCrewIds],
+    crewSnapshotsById: { ...selection.snapshotsById }
+  }
+}

client/src/components/EntrySkipperSignBadge.tsx

@@ -0,0 +1,31 @@
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from 'lucide-react'
+import CaptainCap from './icons/CaptainCap.tsx'
+import type { SkipperSignStatus } from '../utils/signatures.js'
+
+interface EntrySkipperSignBadgeProps {
+  status: SkipperSignStatus
+}
+
+export default function EntrySkipperSignBadge({ status }: EntrySkipperSignBadgeProps) {
+  const { t } = useTranslation()
+
+  if (status === 'none') return null
+
+  const isValid = status === 'valid'
+  const label = isValid
+    ? t('logs.sign_badge_skipper_title_valid')
+    : t('logs.sign_badge_skipper_title_invalid')
+
+  return (
+    <span
+      className={`entry-sign-badge entry-sign-badge--skipper ${isValid ? 'valid' : 'invalid'}`}
+      title={label}
+    >
+      {isValid ? <CaptainCap size={14} aria-hidden /> : <AlertTriangle size={12} aria-hidden />}
+      <span className={isValid ? 'entry-sign-badge__sr-label' : undefined}>
+        {isValid ? t('logs.sign_badge_skipper') : t('logs.sign_badge_skipper_invalid')}
+      </span>
+    </span>
+  )
+}

client/src/components/EventTimeInput24h.tsx

@@ -0,0 +1,81 @@
+import { useId, useMemo } from 'react'
+import { joinTimeHHMM, splitTimeHHMM } from '../utils/logEntryPayload.js'
+import { preferNativeCameraPicker } from '../utils/captureVideoFrame.js'
+
+const HOURS = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'))
+const MINUTES = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'))
+
+interface EventTimeInput24hProps {
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  'aria-label'?: string
+}
+
+export default function EventTimeInput24h({
+  value,
+  onChange,
+  disabled = false,
+  'aria-label': ariaLabel
+}: EventTimeInput24hProps) {
+  const baseId = useId()
+  const useNativePicker = preferNativeCameraPicker()
+  const { hours, minutes } = useMemo(() => splitTimeHHMM(value), [value])
+  const timeValue = useMemo(() => joinTimeHHMM(hours, minutes), [hours, minutes])
+
+  if (useNativePicker) {
+    return (
+      <div className="time-input-24h">
+        <input
+          id={baseId}
+          type="time"
+          step={60}
+          className="input-text time-input-24h__native"
+          value={timeValue}
+          onChange={(e) => {
+            const next = e.target.value
+            if (next) onChange(next.slice(0, 5))
+          }}
+          disabled={disabled}
+          aria-label={ariaLabel}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="time-input-24h">
+      <select
+        id={`${baseId}-hours`}
+        className="input-text time-input-24h__select"
+        value={hours}
+        onChange={(e) => onChange(joinTimeHHMM(e.target.value, minutes))}
+        disabled={disabled}
+        aria-label={ariaLabel ? `${ariaLabel} (h)` : undefined}
+      >
+        {HOURS.map((hour) => (
+          <option key={hour} value={hour}>
+            {hour}
+          </option>
+        ))}
+      </select>
+      <span className="time-input-24h__sep" aria-hidden="true">
+        :
+      </span>
+      <select
+        id={`${baseId}-minutes`}
+        className="input-text time-input-24h__select"
+        value={minutes}
+        onChange={(e) => onChange(joinTimeHHMM(hours, e.target.value))}
+        disabled={disabled}
+        aria-label={ariaLabel ? `${ariaLabel} (min)` : undefined}
+      >
+        {MINUTES.map((minute) => (
+          <option key={minute} value={minute}>
+            {minute}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

client/src/components/FeedbackHeaderButton.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { MessageSquarePlus } from 'lucide-react'
+import FeedbackModal from './FeedbackModal.tsx'
+
+interface FeedbackHeaderButtonProps {
+  logbookId?: string | null
+  logbookTitle?: string | null
+  tourOpen?: boolean
+  onTourOpenChange?: (open: boolean) => void
+  tourHighlight?: boolean
+}
+
+export default function FeedbackHeaderButton({
+  logbookId,
+  logbookTitle,
+  tourOpen = false,
+  onTourOpenChange,
+  tourHighlight = false
+}: FeedbackHeaderButtonProps) {
+  const { t } = useTranslation()
+  const [userOpen, setUserOpen] = useState(false)
+  const open = tourOpen || userOpen
+
+  const handleClose = () => {
+    setUserOpen(false)
+    onTourOpenChange?.(false)
+  }
+
+  return (
+    <>
+      <button
+        type="button"
+        className="btn-icon"
+        onClick={() => setUserOpen(true)}
+        title={t('feedback.button_title')}
+        aria-label={t('feedback.button_title')}
+        data-tour="feedback-button"
+      >
+        <MessageSquarePlus size={18} />
+      </button>
+      <FeedbackModal
+        open={open}
+        onClose={handleClose}
+        logbookId={logbookId}
+        logbookTitle={logbookTitle}
+        tourMode={tourHighlight}
+      />
+    </>
+  )
+}

client/src/components/FeedbackModal.tsx

@@ -0,0 +1,241 @@
+import { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { CheckCircle2, MessageSquarePlus, X } from 'lucide-react'
+import { FeedbackApiError, sendFeedback, type FeedbackCategory } from '../services/feedback.js'
+
+const SUCCESS_CLOSE_DELAY_MS = 1800
+
+interface FeedbackModalProps {
+  open: boolean
+  onClose: () => void
+  logbookId?: string | null
+  logbookTitle?: string | null
+  tourMode?: boolean
+}
+
+type SubmitState = 'idle' | 'submitting' | 'success' | 'error'
+
+export default function FeedbackModal({
+  open,
+  onClose,
+  logbookId,
+  logbookTitle,
+  tourMode = false
+}: FeedbackModalProps) {
+  const { t } = useTranslation()
+  const [category, setCategory] = useState<FeedbackCategory>('general')
+  const [contactEmail, setContactEmail] = useState('')
+  const [message, setMessage] = useState('')
+  const [website, setWebsite] = useState('')
+  const [submitState, setSubmitState] = useState<SubmitState>('idle')
+  const [statusMessage, setStatusMessage] = useState<string | null>(null)
+  const closeTimerRef = useRef<number | null>(null)
+  const openedAtRef = useRef<number>(Date.now())
+
+  const isBusy = submitState === 'submitting' || submitState === 'success'
+
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current !== null) {
+      window.clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+  }
+
+  useEffect(() => {
+    return () => clearCloseTimer()
+  }, [])
+
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !isBusy) onClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [open, onClose, isBusy])
+
+  useEffect(() => {
+    if (!open) {
+      clearCloseTimer()
+      setCategory('general')
+      setContactEmail('')
+      setMessage('')
+      setWebsite('')
+      setSubmitState('idle')
+      setStatusMessage(null)
+      return
+    }
+    openedAtRef.current = Date.now()
+  }, [open])
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault()
+    if (!message.trim() || submitState === 'submitting' || submitState === 'success') return
+
+    setSubmitState('submitting')
+    setStatusMessage(null)
+
+    try {
+      await sendFeedback({
+        category,
+        message: message.trim(),
+        contactEmail: contactEmail.trim() || undefined,
+        logbookId,
+        logbookTitle,
+        openedAt: openedAtRef.current,
+        website
+      })
+      setSubmitState('success')
+      setStatusMessage(t('feedback.success'))
+      closeTimerRef.current = window.setTimeout(() => {
+        closeTimerRef.current = null
+        onClose()
+      }, SUCCESS_CLOSE_DELAY_MS)
+    } catch (error) {
+      setSubmitState('error')
+      setStatusMessage(
+        error instanceof FeedbackApiError && error.code === 'NOT_CONFIGURED'
+          ? t('feedback.error_not_configured')
+          : error instanceof FeedbackApiError && error.code === 'INVALID_EMAIL'
+            ? t('feedback.error_invalid_email')
+            : error instanceof FeedbackApiError && error.code === 'RATE_LIMITED'
+              ? t('feedback.error_rate_limited')
+              : error instanceof FeedbackApiError && error.code === 'SPAM_DETECTED'
+                ? t('feedback.error_spam')
+                : t('feedback.error_send')
+      )
+    }
+  }
+
+  if (!open) return null
+
+  return (
+    <div
+      className={`disclaimer-modal-overlay${tourMode ? ' feedback-modal-overlay--tour' : ''}`}
+      onClick={isBusy || tourMode ? undefined : onClose}
+    >
+      <div className="disclaimer-modal-panel" onClick={(event) => event.stopPropagation()}>
+        <div
+          className="auth-card glass registration-disclaimer registration-disclaimer--modal feedback-modal"
+          data-tour="feedback-form"
+        >
+          <button
+            type="button"
+            className="registration-disclaimer__close feedback-modal__close"
+            onClick={onClose}
+            disabled={isBusy || tourMode}
+            aria-label={t('feedback.cancel')}
+          >
+            <X size={18} />
+          </button>
+
+          <div className="auth-header">
+            <MessageSquarePlus className="auth-icon accent" size={48} />
+            <h2>{t('feedback.title')}</h2>
+          </div>
+
+          {submitState === 'success' ? (
+            <div className="feedback-status feedback-status--success" role="status" aria-live="polite">
+              <CheckCircle2 size={40} aria-hidden="true" />
+              <p>{statusMessage}</p>
+            </div>
+          ) : (
+            <>
+              <p className="registration-disclaimer__intro">{t('feedback.intro')}</p>
+
+              {statusMessage && submitState === 'error' && (
+                <div className="feedback-status feedback-status--error" role="alert">
+                  <p>{statusMessage}</p>
+                </div>
+              )}
+
+              <form className="feedback-form" onSubmit={handleSubmit}>
+                <label className="feedback-form__honeypot" aria-hidden="true">
+                  <span>Website</span>
+                  <input
+                    type="text"
+                    name="website"
+                    value={website}
+                    onChange={(event) => setWebsite(event.target.value)}
+                    tabIndex={-1}
+                    autoComplete="off"
+                  />
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.category_label')}</span>
+                  <select
+                    value={category}
+                    onChange={(event) => setCategory(event.target.value as FeedbackCategory)}
+                    disabled={submitState === 'submitting'}
+                  >
+                    <option value="general">{t('feedback.category_general')}</option>
+                    <option value="bug">{t('feedback.category_bug')}</option>
+                    <option value="feature">{t('feedback.category_feature')}</option>
+                    <option value="translation">{t('feedback.category_translation')}</option>
+                  </select>
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.contact_label')}</span>
+                  <input
+                    type="email"
+                    value={contactEmail}
+                    onChange={(event) => {
+                      setContactEmail(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
+                    placeholder={t('feedback.contact_placeholder')}
+                    autoComplete="email"
+                    maxLength={254}
+                    disabled={submitState === 'submitting'}
+                  />
+                </label>
+
+                <label className="feedback-form__field">
+                  <span>{t('feedback.message_label')}</span>
+                  <textarea
+                    value={message}
+                    onChange={(event) => {
+                      setMessage(event.target.value)
+                      if (submitState === 'error') {
+                        setSubmitState('idle')
+                        setStatusMessage(null)
+                      }
+                    }}
+                    placeholder={t('feedback.message_placeholder')}
+                    rows={6}
+                    maxLength={2000}
+                    required
+                    disabled={submitState === 'submitting'}
+                  />
+                </label>
+
+                <div className="auth-actions feedback-form__actions">
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={onClose}
+                    disabled={submitState === 'submitting' || tourMode}
+                  >
+                    {t('feedback.cancel')}
+                  </button>
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={submitState === 'submitting' || !message.trim()}
+                  >
+                    {submitState === 'submitting' ? t('feedback.sending') : t('feedback.send')}
+                  </button>
+                </div>
+              </form>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/InvitationAcceptance.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { cycleAppLanguage, getNextLanguage } from '../utils/i18nLanguages.js'
 import { Ship, LogIn, UserPlus, AlertTriangle, ShieldCheck, Languages, ArrowRight, KeyRound } from 'lucide-react'
 import {
   getActiveMasterKey,
@@ -10,15 +11,36 @@ import {
 } from '../services/auth.js'
 import { decryptJson, encryptBuffer } from '../services/crypto.js'
 import { saveLogbookKey } from '../services/logbookKeys.js'
+import { parseCollaborationRole } from '../services/logbook.js'
 import { syncLogbook } from '../services/sync.js'
 import { db } from '../services/db.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { apiJson } from '../services/api.js'
 
 interface InvitationAcceptanceProps {
   onAccepted: (logbookId: string, title: string) => void
   onCancel: () => void
 }
 
+type LocalizedError =
+  | { source: 'i18n'; key: string }
+  | { source: 'raw'; text: string }
+
+const resolveLocalizedError = (
+  error: LocalizedError | null,
+  t: (key: string) => string
+): string | null => {
+  if (!error) return null
+  return error.source === 'i18n' ? t(error.key) : error.text
+}
+
+const localizedErrorFromMessage = (
+  message: string | undefined,
+  fallbackKey: string
+): LocalizedError => {
+  return message ? { source: 'raw', text: message } : { source: 'i18n', key: fallbackKey }
+}
+
 const hexToBuffer = (hex: string): ArrayBuffer => {
   const bytes = new Uint8Array(hex.length / 2)
   for (let i = 0; i < bytes.length; i++) {
@@ -32,7 +54,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
 
   const [loading, setLoading] = useState(true)
   const [accepting, setAccepting] = useState(false)
-  const [error, setError] = useState<string | null>(null)
+  const [error, setError] = useState<LocalizedError | null>(null)
 
   const [token, setToken] = useState('')
   const [logbookKey, setLogbookKey] = useState<ArrayBuffer | null>(null)
@@ -46,7 +68,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
   const [username, setUsername] = useState('')
   const [loginMode, setLoginMode] = useState<'options' | 'register'>('options')
   const [regUsername, setRegUsername] = useState('')
-  const [authError, setAuthError] = useState<string | null>(null)
+  const [authError, setAuthError] = useState<LocalizedError | null>(null)
 
   const [recoveryPhrase, setRecoveryPhrase] = useState<string | null>(null)
   const [showRecoveryFallback, setShowRecoveryFallback] = useState(false)
@@ -55,7 +77,8 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
 
   const autoAcceptStarted = useRef(false)
 
-  const isDe = i18n.language.startsWith('de')
+  const errorText = resolveLocalizedError(error, t)
+  const authErrorText = resolveLocalizedError(authError, t)
 
   const sessionReady = (): boolean => {
     return !!(getActiveMasterKey() && localStorage.getItem('active_userid'))
@@ -81,19 +104,15 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
         setLogbookKey(hexToBuffer(hexKey))
       } catch (err) {
         console.error('Invalid key in URL fragment:', err)
-        setError(isDe
-          ? 'Der Einladungslink ist kryptografisch ungültig (Schlüssel fehlerhaft).'
-          : 'The invitation link is cryptographically invalid (corrupted key).')
+        setError({ source: 'i18n', key: 'invitation.error_invalid_key' })
       }
     } else {
-      setError(isDe
-        ? 'Der Einladungslink enthält keinen Entschlüsselungsschlüssel (#key=...). Bitte den vollständigen Link vom Eigner verwenden.'
-        : 'The invitation link is missing the decryption key (#key=...). Please use the complete link from the owner.')
+      setError({ source: 'i18n', key: 'invitation.error_missing_key' })
     }
 
     const rand = Math.floor(1000 + Math.random() * 9000)
     setRegUsername(`CrewSkipper_${rand}`)
-  }, [isDe])
+  }, [])
 
   useEffect(() => {
     if (token && logbookKey) {
@@ -108,14 +127,13 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       const res = await fetch(`/api/collaboration/invite-details?token=${token}`)
 
       if (res.status === 410) {
-        setError(isDe
-          ? 'Diese Einladung ist abgelaufen (48 Stunden gültig).'
-          : 'This invitation link has expired (valid for 48 hours only).')
+        setError({ source: 'i18n', key: 'invitation.error_expired' })
         return
       }
 
       if (!res.ok) {
-        throw new Error(isDe ? 'Einladungstoken ungültig.' : 'Failed to verify invitation token.')
+        setError({ source: 'i18n', key: 'invitation.error_invalid_token' })
+        return
       }
 
       const details = await res.json()
@@ -128,7 +146,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       setDecryptedTitle(title)
     } catch (err: any) {
       console.error('Failed to load invitation details:', err)
-      setError(err.message || (isDe ? 'Einladungsdetails konnten nicht geladen werden.' : 'Invitation details could not be retrieved.'))
+      setError(localizedErrorFromMessage(err.message, 'invitation.error_load_failed'))
     } finally {
       setLoading(false)
     }
@@ -139,9 +157,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
     const activeUserId = localStorage.getItem('active_userid')
     if (!masterKey || !activeUserId) {
       autoAcceptStarted.current = false
-      setError(isDe
-        ? 'Sitzung unvollständig — bitte erneut anmelden (Benutzer-ID fehlt).'
-        : 'Incomplete session — please log in again (user ID missing).')
+      setError({ source: 'i18n', key: 'invitation.error_incomplete_session' })
       setIsLoggedIn(false)
       return
     }
@@ -163,12 +179,8 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       )
       const encrypted = await encryptBuffer(logbookKey, aesMasterKey)
 
-      const res = await fetch('/api/collaboration/accept', {
+      const acceptResult = await apiJson<{ role: string; logbookId: string }>('/api/collaboration/accept', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': activeUserId
-        },
         body: JSON.stringify({
           token,
           encryptedLogbookKey: encrypted.ciphertext,
@@ -176,11 +188,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
           tag: encrypted.tag
         })
       })
-
-      if (!res.ok) {
-        const serverError = await res.json().catch(() => ({}))
-        throw new Error(serverError.error || (isDe ? 'Beitritt auf dem Server fehlgeschlagen.' : 'Failed to join logbook on the server.'))
-      }
+      const collaborationRole = parseCollaborationRole(acceptResult.role, 'invitation accept')
 
       await saveLogbookKey(logbookId, logbookKey)
 
@@ -190,7 +198,8 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
           encryptedTitle: rawEncryptedTitle,
           updatedAt: new Date().toISOString(),
           isSynced: 1,
-          isShared: 1
+          isShared: 1,
+          collaborationRole
         })
       }
 
@@ -199,12 +208,12 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       onAccepted(logbookId, decryptedTitle)
     } catch (err: any) {
       console.error('Accepting invitation failed:', err)
-      setError(err.message || (isDe ? 'Beitritt fehlgeschlagen.' : 'Acceptance failed.'))
+      setError(localizedErrorFromMessage(err.message, 'invitation.error_accept_failed'))
       autoAcceptStarted.current = false
     } finally {
       setAccepting(false)
     }
-  }, [logbookId, logbookKey, token, rawEncryptedTitle, decryptedTitle, onAccepted, isDe])
+  }, [logbookId, logbookKey, token, rawEncryptedTitle, decryptedTitle, onAccepted])
 
   useEffect(() => {
     if (loading || accepting || autoAcceptStarted.current) return
@@ -240,7 +249,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       if (resolvedUser) setUsername(resolvedUser)
       setShowRecoveryFallback(true)
     } catch (err: any) {
-      setAuthError(err.message || (isDe ? 'Passkey-Anmeldung fehlgeschlagen.' : 'Passkey authentication failed.'))
+      setAuthError(localizedErrorFromMessage(err.message, 'invitation.error_login_failed'))
     } finally {
       setLoading(false)
     }
@@ -252,9 +261,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
 
     const resolvedUser = (username.trim() || encryptedPayloads.username || '').trim()
     if (!resolvedUser) {
-      setAuthError(isDe
-        ? 'Benutzername konnte nicht ermittelt werden — bitte erneut anmelden.'
-        : 'Could not determine username — please try logging in again.')
+      setAuthError({ source: 'i18n', key: 'invitation.error_username_missing' })
       return
     }
 
@@ -267,10 +274,10 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
         setIsLoggedIn(true)
         setUsername(resolvedUser)
       } else {
-        setAuthError(t('auth.error_incorrect_recovery'))
+        setAuthError({ source: 'i18n', key: 'auth.error_incorrect_recovery' })
       }
     } catch (err: any) {
-      setAuthError(err.message || t('auth.error_decryption_failed'))
+      setAuthError(localizedErrorFromMessage(err.message, 'auth.error_decryption_failed'))
     } finally {
       setLoading(false)
     }
@@ -290,7 +297,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
         setRecoveryPhrase(result.recoveryPhrase)
       }
     } catch (err: any) {
-      setAuthError(err.message || (isDe ? 'Registrierung fehlgeschlagen.' : 'Registration failed.'))
+      setAuthError(localizedErrorFromMessage(err.message, 'invitation.error_register_failed'))
     } finally {
       setLoading(false)
     }
@@ -302,7 +309,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
   }
 
   const toggleLanguage = () => {
-    i18n.changeLanguage(i18n.language.startsWith('de') ? 'en' : 'de')
+    cycleAppLanguage(i18n)
   }
 
   if (recoveryPhrase) {
@@ -338,25 +345,46 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
           <h2>{t('auth.enter_recovery')}</h2>
         </div>
         <p className="recovery-warning">{t('auth.recovery_fallback_warning')}</p>
-        <form onSubmit={handleRecoverySubmit}>
-          <textarea
-            className="input-text"
-            placeholder={t('auth.recovery_placeholder')}
-            value={recoveryInput}
-            onChange={(e) => setRecoveryInput(e.target.value)}
-            rows={3}
-            required
-          />
+        <form onSubmit={handleRecoverySubmit} autoComplete="on">
+          {(username.trim() || encryptedPayloads?.username) && (
+            <input
+              type="text"
+              name="username"
+              autoComplete="username"
+              value={username.trim() || encryptedPayloads?.username || ''}
+              readOnly
+              tabIndex={-1}
+              aria-hidden="true"
+              style={{ position: 'absolute', width: 0, height: 0, opacity: 0, pointerEvents: 'none' }}
+            />
+          )}
+          <div className="input-group">
+            <label htmlFor="invitation-recovery-key" className="input-label" style={{ display: 'block', marginBottom: '8px', color: '#94a3b8' }}>
+              {t('auth.enter_recovery')}
+            </label>
+            <input
+              id="invitation-recovery-key"
+              name="recovery-key"
+              type="password"
+              className="input-text"
+              placeholder={t('auth.recovery_placeholder')}
+              value={recoveryInput}
+              onChange={(e) => setRecoveryInput(e.target.value)}
+              required
+              autoComplete="current-password"
+              style={{ width: '100%', padding: '12px', boxSizing: 'border-box' }}
+            />
+          </div>
           <div className="auth-actions mt-4">
             <button type="button" className="btn secondary" onClick={() => setShowRecoveryFallback(false)}>
-              {isDe ? 'Zurück' : 'Back'}
+              {t('auth.back')}
             </button>
             <button type="submit" className="btn primary" disabled={loading}>
               {t('auth.decrypt_logbook')}
             </button>
           </div>
         </form>
-        {authError && <div className="auth-error mt-4">{authError}</div>}
+        {authErrorText && <div className="auth-error mt-4">{authErrorText}</div>}
       </div>
     )
   }
@@ -366,12 +394,10 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       <div className="auth-card glass">
         <div className="auth-header">
           <Ship className="auth-icon accent spin" size={48} />
-          <h2>{accepting ? (isDe ? 'Beitritt...' : 'Joining...') : (isDe ? 'Einladung wird geprüft...' : 'Checking Invitation...')}</h2>
+          <h2>{accepting ? t('invitation.loading_joining') : t('invitation.loading_checking')}</h2>
         </div>
         <p className="recovery-warning">
-          {accepting
-            ? (isDe ? 'Logbuch wird freigeschaltet und synchronisiert...' : 'Unlocking logbook and syncing data...')
-            : (isDe ? 'Lade Verschlüsselungsschlüssel...' : 'Retrieving encryption key...')}
+          {accepting ? t('invitation.loading_unlocking') : t('invitation.loading_retrieving_key')}
         </p>
       </div>
     )
@@ -382,12 +408,12 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       <div className="auth-card glass">
         <div className="auth-header">
           <AlertTriangle className="auth-icon warn" size={48} />
-          <h2>{isDe ? 'Einladungsfehler' : 'Invitation Error'}</h2>
+          <h2>{t('invitation.error_title')}</h2>
         </div>
-        <p className="recovery-warning" style={{ color: '#ef4444' }}>{error}</p>
+        <p className="recovery-warning" style={{ color: '#ef4444' }}>{errorText}</p>
         <div className="auth-actions mt-6">
           <button className="btn primary" onClick={onCancel} style={{ width: '100%' }}>
-            {isDe ? 'Zurück zum Start' : 'Back to Dashboard'}
+            {t('invitation.back_to_start')}
           </button>
         </div>
       </div>
@@ -398,18 +424,18 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
     <div className="auth-card glass">
       <div className="auth-header">
         <ShieldCheck className="auth-icon success" size={48} style={{ color: '#10b981' }} />
-        <h2>{isDe ? 'Logbuch-Einladung' : 'Logbook Invitation'}</h2>
+        <h2>{t('invitation.title')}</h2>
       </div>
 
       <div style={{ textAlign: 'center', margin: '20px 0', padding: '16px', background: 'rgba(255,255,255,0.03)', borderRadius: '12px' }}>
         <p style={{ margin: '0 0 8px 0', fontSize: '13px', color: '#64748b', textTransform: 'uppercase' }}>
-          {isDe ? 'Einladung von' : 'INVITED BY'}
+          {t('invitation.invited_by')}
         </p>
         <p style={{ margin: '0 0 16px 0', fontSize: '18px', fontWeight: 600, color: '#f1f5f9' }}>
           Skipper {ownerUsername}
         </p>
         <p style={{ margin: '0 0 8px 0', fontSize: '13px', color: '#64748b', textTransform: 'uppercase' }}>
-          {isDe ? 'Schiff / Logbuch' : 'VESSEL / LOGBOOK'}
+          {t('invitation.vessel_logbook')}
         </p>
         <p style={{ margin: 0, fontSize: '20px', fontWeight: 700, color: '#fbbf24' }}>
           {decryptedTitle}
@@ -419,12 +445,10 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
       {isLoggedIn ? (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '100%' }}>
           <p style={{ fontSize: '14px', color: '#94a3b8', textAlign: 'center', lineHeight: '145%' }}>
-            {isDe
-              ? `Angemeldet als ${username}. Beitritt wird vorbereitet...`
-              : `Signed in as ${username}. Preparing to join...`}
+            {t('invitation.signed_in_preparing', { username })}
           </p>
           <button className="btn primary" onClick={handleAccept} disabled={accepting} style={{ width: '100%' }}>
-            {accepting ? (isDe ? 'Beitritt...' : 'Joining...') : (isDe ? 'Erneut beitreten' : 'Join again')}
+            {accepting ? t('invitation.loading_joining') : t('invitation.join_again')}
             <ArrowRight size={16} />
           </button>
         </div>
@@ -433,27 +457,25 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
           {loginMode === 'options' && (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
               <p style={{ fontSize: '13.5px', color: '#94a3b8', textAlign: 'center', lineHeight: '145%' }}>
-                {isDe
-                  ? 'Melden Sie sich an oder registrieren Sie ein Konto, um dem Logbuch beizutreten.'
-                  : 'Sign in or register an account to join this logbook.'}
+                {t('invitation.login_or_register_hint')}
               </p>
 
               <button className="btn primary" onClick={handleLogin} disabled={loading} style={{ width: '100%', padding: '14px' }}>
                 <LogIn size={16} />
-                {isDe ? 'Mit Passkey anmelden' : 'Log In with Passkey'}
+                {t('auth.login')}
               </button>
 
               <div style={{ display: 'flex', alignItems: 'center', margin: '8px 0' }}>
                 <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.08)' }} />
                 <span style={{ padding: '0 10px', fontSize: '12px', color: '#64748b' }}>
-                  {isDe ? 'ODER NEU REGISTRIEREN' : 'OR SIGN UP'}
+                  {t('invitation.or_sign_up')}
                 </span>
                 <div style={{ flex: 1, height: '1px', background: 'rgba(255,255,255,0.08)' }} />
               </div>
 
               <button className="btn secondary" onClick={() => setLoginMode('register')} style={{ width: '100%' }}>
                 <UserPlus size={16} />
-                {isDe ? 'Neues Crew-Konto erstellen' : 'Register New Crew Account'}
+                {t('invitation.register_crew_account')}
               </button>
             </div>
           )}
@@ -462,7 +484,7 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
             <form onSubmit={handleRegister} style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
               <div className="input-group">
                 <label style={{ display: 'block', fontSize: '13px', color: '#94a3b8', marginBottom: '6px' }}>
-                  {isDe ? 'Benutzername' : 'Username'}
+                  {t('invitation.username_label')}
                 </label>
                 <input
                   type="text"
@@ -474,23 +496,23 @@ export default function InvitationAcceptance({ onAccepted, onCancel }: Invitatio
               </div>
               <div className="auth-actions">
                 <button type="button" className="btn secondary" onClick={() => setLoginMode('options')}>
-                  {isDe ? 'Zurück' : 'Back'}
+                  {t('auth.back')}
                 </button>
                 <button type="submit" className="btn primary" disabled={!regUsername.trim() || loading}>
-                  {isDe ? 'Passkey erstellen' : 'Create Passkey'}
+                  {t('invitation.create_passkey')}
                 </button>
               </div>
             </form>
           )}
 
-          {authError && <div className="auth-error mt-4" style={{ fontSize: '13px' }}>{authError}</div>}
+          {authErrorText && <div className="auth-error mt-4" style={{ fontSize: '13px' }}>{authErrorText}</div>}
         </div>
       )}
 
       <div className="auth-footer" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '16px', marginTop: '24px' }}>
         <button className="btn-icon-text" onClick={toggleLanguage}>
           <Languages size={18} />
-          {isDe ? 'English' : 'Deutsch'}
+          {t(`languages.${getNextLanguage(i18n.language)}`)}
         </button>
       </div>
     </div>

client/src/components/LinkQrCode.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import QRCode from 'qrcode'
+
+interface LinkQrCodeProps {
+  value: string
+  size?: number
+}
+
+export default function LinkQrCode({ value, size = 200 }: LinkQrCodeProps) {
+  const { t } = useTranslation()
+  const [dataUrl, setDataUrl] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!value.trim()) {
+      setDataUrl(null)
+      return
+    }
+
+    let cancelled = false
+    void QRCode.toDataURL(value, {
+      width: size,
+      margin: 2,
+      errorCorrectionLevel: 'M',
+      color: { dark: '#0f172a', light: '#ffffff' }
+    })
+      .then((url) => {
+        if (!cancelled) setDataUrl(url)
+      })
+      .catch((err) => {
+        console.error('QR code generation failed:', err)
+        if (!cancelled) setDataUrl(null)
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [value, size])
+
+  if (!value.trim() || !dataUrl) return null
+
+  return (
+    <div className="link-qr-block">
+      <p className="link-qr-label">{t('settings.link_qr_hint')}</p>
+      <img
+        src={dataUrl}
+        width={size}
+        height={size}
+        className="link-qr-image"
+        alt={t('settings.link_qr_alt')}
+      />
+    </div>
+  )
+}

client/src/components/LiveCameraCapture.tsx

@@ -0,0 +1,323 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Camera, X } from 'lucide-react'
+import {
+  captureVideoFrame,
+  preferNativeCameraPicker
+} from '../utils/captureVideoFrame.js'
+
+interface LiveCameraCaptureProps {
+  open: boolean
+  busy?: boolean
+  caption?: string
+  onCaptionChange?: (value: string) => void
+  onClose: () => void
+  onCapture: (blob: Blob) => void
+}
+
+type Phase = 'live' | 'preview' | 'native'
+
+export default function LiveCameraCapture({
+  open,
+  busy = false,
+  caption = '',
+  onCaptionChange,
+  onClose,
+  onCapture
+}: LiveCameraCaptureProps) {
+  const { t } = useTranslation()
+  const videoRef = useRef<HTMLVideoElement | null>(null)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const streamRef = useRef<MediaStream | null>(null)
+  const previewUrlRef = useRef<string | null>(null)
+
+  const [cameraError, setCameraError] = useState<string | null>(null)
+  const [ready, setReady] = useState(false)
+  const [capturing, setCapturing] = useState(false)
+  const [phase, setPhase] = useState<Phase>(() => (preferNativeCameraPicker() ? 'native' : 'live'))
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null)
+  const [previewBlob, setPreviewBlob] = useState<Blob | null>(null)
+  const [streamGeneration, setStreamGeneration] = useState(0)
+
+  const clearPreview = useCallback(() => {
+    if (previewUrlRef.current) {
+      URL.revokeObjectURL(previewUrlRef.current)
+      previewUrlRef.current = null
+    }
+    setPreviewUrl(null)
+    setPreviewBlob(null)
+  }, [])
+
+  const stopStream = useCallback(() => {
+    for (const track of streamRef.current?.getTracks() ?? []) {
+      track.stop()
+    }
+    streamRef.current = null
+    if (videoRef.current) {
+      videoRef.current.srcObject = null
+    }
+    setReady(false)
+  }, [])
+
+  const enterPreview = useCallback((blob: Blob) => {
+    stopStream()
+    clearPreview()
+    const url = URL.createObjectURL(blob)
+    previewUrlRef.current = url
+    setPreviewBlob(blob)
+    setPreviewUrl(url)
+    setPhase('preview')
+  }, [stopStream, clearPreview])
+
+  const resetToLive = useCallback(() => {
+    clearPreview()
+    setCameraError(null)
+    setCapturing(false)
+    if (preferNativeCameraPicker()) {
+      setPhase('native')
+    } else {
+      setPhase('live')
+      setStreamGeneration((n) => n + 1)
+    }
+  }, [clearPreview])
+
+  useEffect(() => {
+    if (!open) {
+      stopStream()
+      clearPreview()
+      setCameraError(null)
+      setCapturing(false)
+      setPhase(preferNativeCameraPicker() ? 'native' : 'live')
+      return
+    }
+    setPhase(preferNativeCameraPicker() ? 'native' : 'live')
+    clearPreview()
+  }, [open, stopStream, clearPreview])
+
+  useEffect(() => {
+    if (!open || phase !== 'live') {
+      stopStream()
+      return
+    }
+
+    let cancelled = false
+
+    const start = async () => {
+      setCameraError(null)
+      setReady(false)
+      if (!navigator.mediaDevices?.getUserMedia) {
+        setCameraError(t('logs.live_photo_camera_unavailable'))
+        return
+      }
+
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: { ideal: 'environment' },
+            width: { ideal: 1280 },
+            height: { ideal: 720 }
+          },
+          audio: false
+        })
+        if (cancelled) {
+          for (const track of stream.getTracks()) track.stop()
+          return
+        }
+        streamRef.current = stream
+        const video = videoRef.current
+        if (!video) return
+
+        const markReady = () => {
+          if (cancelled) return
+          if (video.videoWidth > 0 && video.videoHeight > 0) {
+            setReady(true)
+          }
+        }
+
+        video.onloadedmetadata = markReady
+        video.srcObject = stream
+        await video.play()
+        markReady()
+      } catch (err) {
+        console.error('Camera access failed:', err)
+        if (!cancelled) {
+          setCameraError(t('logs.live_photo_camera_denied'))
+        }
+      }
+    }
+
+    void start()
+    return () => {
+      cancelled = true
+      stopStream()
+    }
+  }, [open, phase, streamGeneration, stopStream, t])
+
+  const handleCapture = async () => {
+    const video = videoRef.current
+    if (!video || !ready || busy || capturing) return
+
+    setCapturing(true)
+    setCameraError(null)
+    try {
+      const blob = await captureVideoFrame(video)
+      enterPreview(blob)
+    } catch (err) {
+      console.error('Live camera capture failed:', err)
+      setCameraError(t('logs.live_photo_capture_failed'))
+    } finally {
+      setCapturing(false)
+    }
+  }
+
+  const handleNativeFile = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    e.target.value = ''
+    if (!file || busy) return
+
+    setCameraError(null)
+    try {
+      enterPreview(file)
+    } catch (err) {
+      console.error('Live camera file pick failed:', err)
+      setCameraError(t('logs.live_photo_capture_failed'))
+    }
+  }
+
+  const handleSave = () => {
+    if (!previewBlob || busy) return
+    onCapture(previewBlob)
+  }
+
+  const handleRetake = () => {
+    if (busy) return
+    resetToLive()
+  }
+
+  const openNativePicker = () => {
+    if (busy) return
+    fileInputRef.current?.click()
+  }
+
+  if (!open) return null
+
+  const showPreview = phase === 'preview' && previewUrl
+
+  return (
+    <div
+      className="live-log-modal-backdrop live-camera-backdrop"
+      onClick={(e) => { if (e.target === e.currentTarget && !busy) onClose() }}
+    >
+      <div className="live-log-modal live-camera-modal" onClick={(e) => e.stopPropagation()}>
+        <div className="live-camera-header">
+          <h3>{t('logs.live_photo_btn')}</h3>
+          <button
+            type="button"
+            className="btn secondary live-camera-close"
+            onClick={onClose}
+            disabled={busy}
+            aria-label={t('logs.confirm_no')}
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          capture="environment"
+          className="live-camera-file-input"
+          onChange={(e) => void handleNativeFile(e)}
+        />
+
+        {cameraError && (
+          <p className="live-log-modal-hint auth-error">{cameraError}</p>
+        )}
+
+        {showPreview ? (
+          <div className="live-camera-preview-wrap">
+            <img
+              src={previewUrl}
+              alt=""
+              className="live-camera-preview live-camera-preview-still"
+            />
+          </div>
+        ) : phase === 'native' ? (
+          <div className="live-camera-native-prompt">
+            <p className="live-log-modal-hint">{t('logs.live_photo_native_hint')}</p>
+            <button
+              type="button"
+              className="btn primary live-camera-open-native"
+              onClick={openNativePicker}
+              disabled={busy}
+            >
+              <Camera size={18} />
+              {t('logs.live_photo_open_camera_btn')}
+            </button>
+          </div>
+        ) : cameraError && !ready ? null : (
+          <div className="live-camera-preview-wrap">
+            <video
+              ref={videoRef}
+              className="live-camera-preview"
+              playsInline
+              muted
+              autoPlay
+            />
+            {!ready && (
+              <p className="live-camera-loading">{t('logs.live_photo_camera_starting')}</p>
+            )}
+          </div>
+        )}
+
+        {onCaptionChange && (
+          <div className="input-group live-camera-caption">
+            <label>{t('logs.photo_caption_label')}</label>
+            <input
+              type="text"
+              className="input-text"
+              placeholder={t('logs.photo_caption_placeholder')}
+              value={caption}
+              onChange={(e) => onCaptionChange(e.target.value)}
+              disabled={busy}
+            />
+          </div>
+        )}
+
+        <div className="live-log-modal-actions live-camera-actions">
+          <button type="button" className="btn secondary" onClick={onClose} disabled={busy}>
+            {t('logs.confirm_no')}
+          </button>
+
+          {showPreview ? (
+            <>
+              <button type="button" className="btn secondary" onClick={handleRetake} disabled={busy}>
+                {t('logs.live_photo_retake_btn')}
+              </button>
+              <button
+                type="button"
+                className="btn primary live-camera-shutter"
+                onClick={handleSave}
+                disabled={busy || !previewBlob}
+              >
+                <Camera size={18} />
+                {busy ? t('logs.photo_processing') : t('logs.live_photo_save_btn')}
+              </button>
+            </>
+          ) : phase === 'native' ? null : (
+            <button
+              type="button"
+              className="btn primary live-camera-shutter"
+              onClick={() => void handleCapture()}
+              disabled={busy || capturing || !ready || !!cameraError}
+            >
+              <Camera size={18} />
+              {capturing ? t('logs.photo_processing') : t('logs.live_photo_capture_btn')}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/LogEntriesList.tsx

@@ -3,14 +3,25 @@ import { useTranslation } from 'react-i18next'
 import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
 import { getLogbookKey } from '../services/logbookKeys.js'
-import { decryptJson, encryptJson } from '../services/crypto.js'
+import { encryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { downloadCsv, shareCsv } from '../services/csvExport.js'
 import { downloadLogbookPagePdf } from '../services/pdfExport.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { getErrorMessage } from '../utils/errors.js'
+import { findTodayEntryId, tryDecryptEntryPayload } from '../services/quickEventLog.js'
 import LogEntryEditor from './LogEntryEditor.tsx'
+import LiveLogView from './LiveLogView.tsx'
+import EntrySkipperSignBadge from './EntrySkipperSignBadge.tsx'
 import { useDialog } from './ModalDialog.tsx'
-import { FileText, Plus, Trash2, ChevronRight, Calendar, Download, Share2 } from 'lucide-react'
+import { getSkipperSignStatus, type SkipperSignStatus } from '../utils/signatures.js'
+import {
+  buildEntryListCache,
+  entryListItemFromLocal,
+  putEntryRecord
+} from '../utils/entryListCache.js'
+import { forEachInBatches } from '../utils/yieldToMain.js'
+import { FileText, Plus, Trash2, ChevronRight, Calendar, Download, Share2, Radio, List } from 'lucide-react'
 import {
   carryOverFromPreviousDay,
   compareTravelDaysChronological,
@@ -34,6 +45,8 @@ interface LogEntriesListProps {
   highlightEntryId?: string | null
 }
 
+type LogsViewMode = 'list' | 'live'
+
 interface DecryptedEntryItem {
   id: string
   date: string
@@ -41,6 +54,7 @@ interface DecryptedEntryItem {
   departure: string
   destination: string
   updatedAt: string
+  skipperSignStatus: SkipperSignStatus
 }
 
 export default function LogEntriesList({
@@ -72,6 +86,8 @@ export default function LogEntriesList({
   const [loading, setLoading] = useState(false)
   const [exporting, setExporting] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [viewMode, setViewMode] = useState<LogsViewMode>('list')
+  const [returnToLiveAfterEditor, setReturnToLiveAfterEditor] = useState(false)
   const prevSelectedEntryIdRef = useRef<string | null | undefined>(undefined)
 
   const loadEntries = useCallback(async () => {
@@ -79,14 +95,18 @@ export default function LogEntriesList({
     setError(null)
     try {
       if (readOnly && preloadedEntries) {
-        const list = preloadedEntries.map((entry: any) => ({
-          id: entry.payloadId || entry.id,
-          date: entry.date || '',
-          dayOfTravel: entry.dayOfTravel || '',
-          departure: entry.departure || '',
-          destination: entry.destination || '',
-          updatedAt: entry.updatedAt || new Date().toISOString()
-        }))
+        const list: DecryptedEntryItem[] = []
+        for (const entry of preloadedEntries) {
+          list.push({
+            id: entry.payloadId || entry.id,
+            date: entry.date || '',
+            dayOfTravel: entry.dayOfTravel || '',
+            departure: entry.departure || '',
+            destination: entry.destination || '',
+            updatedAt: entry.updatedAt || new Date().toISOString(),
+            skipperSignStatus: await getSkipperSignStatus(entry)
+          })
+        }
 
         list.sort((a, b) => {
           const dateCompare = new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -102,23 +122,34 @@ export default function LogEntriesList({
       if (!masterKey) throw new Error('Encryption key not found. Please log in.')
 
       const local = await db.entries.where({ logbookId }).toArray()
-      
+
       const list: DecryptedEntryItem[] = []
-      
+      const needsDecrypt: typeof local = []
+
       for (const entry of local) {
-        const decrypted = await decryptJson(entry.encryptedData, entry.iv, entry.tag, masterKey)
-        if (decrypted) {
-          list.push({
-            id: entry.payloadId,
-            date: decrypted.date || '',
-            dayOfTravel: decrypted.dayOfTravel || '',
-            departure: decrypted.departure || '',
-            destination: decrypted.destination || '',
-            updatedAt: entry.updatedAt
-          })
+        const cached = entryListItemFromLocal(entry)
+        if (cached) {
+          list.push(cached)
+        } else {
+          needsDecrypt.push(entry)
         }
       }
 
+      await forEachInBatches(needsDecrypt, 8, async (entry) => {
+        const decrypted = await tryDecryptEntryPayload(entry, masterKey)
+        if (!decrypted) return
+
+        const listCache = await buildEntryListCache(decrypted as Record<string, unknown>)
+        list.push({
+          id: entry.payloadId,
+          ...listCache,
+          updatedAt: entry.updatedAt
+        })
+        void db.entries.update(entry.payloadId, { listCache }).catch((err) => {
+          console.warn('Failed to persist entry list cache:', err)
+        })
+      })
+
       // Sort chronological descending (by date, or dayOfTravel numerical)
       list.sort((a, b) => {
         const dateCompare = new Date(b.date).getTime() - new Date(a.date).getTime()
@@ -129,24 +160,26 @@ export default function LogEntriesList({
       setEntries(list)
     } catch (err: any) {
       console.error('Failed to load log entries:', err)
-      setError(err.message || 'Decryption failed. Could not load journal list.')
+      setError(getErrorMessage(err, t('errors.load_failed')))
     } finally {
       setLoading(false)
     }
   }, [logbookId, readOnly, preloadedEntries])
 
   useEffect(() => {
+    if (viewMode === 'live') return
     loadEntries()
-  }, [loadEntries])
+  }, [loadEntries, viewMode])
 
   useEffect(() => {
+    if (viewMode === 'live') return
     const prevSelectedEntryId = prevSelectedEntryIdRef.current
     prevSelectedEntryIdRef.current = selectedEntryId
 
     if (prevSelectedEntryId !== undefined && prevSelectedEntryId !== null && selectedEntryId === null) {
       loadEntries()
     }
-  }, [selectedEntryId, loadEntries])
+  }, [selectedEntryId, loadEntries, viewMode])
 
   const handleDownloadCsv = async () => {
     setExporting(true)
@@ -161,7 +194,7 @@ export default function LogEntriesList({
       trackPlausibleEvent(PlausibleEvents.CSV_EXPORTED)
     } catch (err: any) {
       console.error('Failed to download CSV:', err)
-      setError(err.message || 'Failed to generate CSV export.')
+      setError(getErrorMessage(err, t('errors.export_failed')))
     } finally {
       setExporting(false)
     }
@@ -189,7 +222,7 @@ export default function LogEntriesList({
         setError(t('logs.share_unsupported'))
       } else {
         console.error('Failed to share CSV:', err)
-        setError(err.message || 'Failed to share CSV export.')
+        setError(getErrorMessage(err, t('errors.export_failed')))
       }
     } finally {
       setExporting(false)
@@ -210,7 +243,7 @@ export default function LogEntriesList({
       trackPlausibleEvent(PlausibleEvents.PDF_EXPORTED, { scope: 'entry' })
     } catch (err: any) {
       console.error('Failed to download PDF:', err)
-      setError(err.message || 'Failed to generate PDF export.')
+      setError(getErrorMessage(err, t('errors.export_failed')))
     } finally {
       setExporting(false)
     }
@@ -223,24 +256,31 @@ export default function LogEntriesList({
       const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
       if (!masterKey) throw new Error('Encryption key not found. Please log in.')
 
+      const existingTodayId = await findTodayEntryId(logbookId)
+      if (existingTodayId) {
+        setSelectedEntryId(existingTodayId)
+        return
+      }
+
       const localEntries = await db.entries.where({ logbookId }).toArray()
       const decryptedEntries: Array<LogEntryTankSource & TravelDaySortable> = []
 
       for (const entry of localEntries) {
-        const decrypted = await decryptJson(entry.encryptedData, entry.iv, entry.tag, masterKey)
+        const decrypted = await tryDecryptEntryPayload(entry, masterKey)
         if (decrypted) decryptedEntries.push(decrypted as LogEntryTankSource & TravelDaySortable)
       }
 
       decryptedEntries.sort(compareTravelDaysChronological)
       const previousEntry = decryptedEntries.at(-1) ?? null
-      let { freshwater, fuel, departure } = carryOverFromPreviousDay(previousEntry)
+      let { freshwater, fuel, greywaterLevel, departure } = carryOverFromPreviousDay(previousEntry)
 
-      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, departure })) {
+      if (previousEntry && hasCarryOverFromPreviousDay({ freshwater, fuel, greywaterLevel, departure })) {
         const confirmed = await showConfirm(
           t('logs.carry_over_tanks_confirm', {
             departure: departure || '—',
             fw: formatTankLiters(freshwater.morning),
-            fuel: formatTankLiters(fuel.morning)
+            fuel: formatTankLiters(fuel.morning),
+            greywater: formatTankLiters(greywaterLevel)
           }),
           t('logs.carry_over_tanks_title'),
           t('logs.carry_over_tanks_yes'),
@@ -249,6 +289,7 @@ export default function LogEntriesList({
         if (!confirmed) {
           freshwater = emptyTankLevels()
           fuel = emptyTankLevels()
+          greywaterLevel = 0
           departure = ''
         }
       }
@@ -259,6 +300,12 @@ export default function LogEntriesList({
       const nowStr = new Date().toISOString()
       const todayStr = nowStr.substring(0, 10)
 
+      const { loadDefaultEntryCrewForNewDay } = await import('./EntryCrewSection.js')
+      const entryCrew = await loadDefaultEntryCrewForNewDay(
+        logbookId,
+        previousEntry as Record<string, unknown> | null
+      )
+
       const initialPayload = {
         date: todayStr,
         dayOfTravel: getNextTravelDayNumber(decryptedEntries),
@@ -266,6 +313,10 @@ export default function LogEntriesList({
         destination: '',
         freshwater,
         fuel,
+        ...(greywaterLevel > 0 ? { greywater: { level: greywaterLevel } } : {}),
+        selectedSkipperId: entryCrew.selectedSkipperId,
+        selectedCrewIds: entryCrew.selectedCrewIds,
+        crewSnapshotsById: entryCrew.crewSnapshotsById,
         signSkipper: '',
         signCrew: '',
         events: []
@@ -274,14 +325,17 @@ export default function LogEntriesList({
       const encrypted = await encryptJson(initialPayload, masterKey)
 
       // Save locally
-      await db.entries.put({
-        payloadId: localId,
-        logbookId,
-        encryptedData: encrypted.ciphertext,
-        iv: encrypted.iv,
-        tag: encrypted.tag,
-        updatedAt: nowStr
-      })
+      await putEntryRecord(
+        {
+          payloadId: localId,
+          logbookId,
+          encryptedData: encrypted.ciphertext,
+          iv: encrypted.iv,
+          tag: encrypted.tag,
+          updatedAt: nowStr
+        },
+        initialPayload
+      )
 
       // Queue for background sync
       await db.syncQueue.put({
@@ -299,7 +353,7 @@ export default function LogEntriesList({
       syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
     } catch (err: any) {
       console.error('Failed to create entry:', err)
-      setError(err.message || 'Failed to create new log entry.')
+      setError(getErrorMessage(err, t('errors.save_failed')))
     } finally {
       setLoading(false)
     }
@@ -329,7 +383,7 @@ export default function LogEntriesList({
         syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
       } catch (err: any) {
         console.error('Failed to delete log entry:', err)
-        setError(err.message || 'Failed to delete log entry.')
+        setError(getErrorMessage(err, t('errors.delete_failed')))
       }
     }
   }
@@ -339,7 +393,13 @@ export default function LogEntriesList({
       <LogEntryEditor
         entryId={selectedEntryId}
         logbookId={logbookId}
-        onBack={() => setSelectedEntryId(null)}
+        onBack={() => {
+          setSelectedEntryId(null)
+          if (returnToLiveAfterEditor) {
+            setViewMode('live')
+            setReturnToLiveAfterEditor(false)
+          }
+        }}
         readOnly={readOnly}
         preloadedEntry={preloadedEntries?.find(entry => (entry.payloadId || entry.id) === selectedEntryId)}
         preloadedPhotos={preloadedPhotos}
@@ -348,6 +408,22 @@ export default function LogEntriesList({
     )
   }
 
+  if (viewMode === 'live' && !readOnly) {
+    return (
+      <LiveLogView
+        logbookId={logbookId}
+        onOpenEditor={(entryId) => {
+          setReturnToLiveAfterEditor(true)
+          setSelectedEntryId(entryId)
+        }}
+        onSwitchToList={() => {
+          setViewMode('list')
+          void loadEntries()
+        }}
+      />
+    )
+  }
+
   if (loading) {
     return (
       <div className="tab-placeholder">
@@ -357,14 +433,42 @@ export default function LogEntriesList({
     )
   }
 
+  const tourFirstEntryId =
+    highlightEntryId && entries.some((e) => e.id === highlightEntryId)
+      ? highlightEntryId
+      : entries[0]?.id ?? null
+
   return (
-    <div className="form-card">
+    <div className="logs-journal">
       <div className="section-title-bar mb-6">
         <div className="form-header" style={{ margin: 0 }}>
           <Calendar size={24} className="form-icon" />
           <h2>{t('logs.title')}</h2>
         </div>
-        <div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
+        <div className="section-toolbar">
+          {!readOnly && (
+            <div className="logs-view-toggle" role="group" aria-label={t('logs.view_mode_label')}>
+              <button
+                type="button"
+                className={`btn secondary logs-view-toggle-btn ${viewMode === 'list' ? 'is-active' : ''}`}
+                onClick={() => setViewMode('list')}
+                title={t('logs.view_list')}
+              >
+                <List size={16} />
+                <span className="hide-mobile">{t('logs.view_list')}</span>
+              </button>
+              <button
+                type="button"
+                className={`btn secondary logs-view-toggle-btn ${viewMode === 'live' ? 'is-active' : ''}`}
+                onClick={() => setViewMode('live')}
+                title={t('logs.live_mode')}
+              >
+                <Radio size={16} />
+                <span className="hide-mobile">{t('logs.live_mode')}</span>
+              </button>
+            </div>
+          )}
+
           <button className="btn secondary" onClick={handleDownloadCsv} disabled={loading || exporting || entries.length === 0} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.export_csv')}>
             <Download size={16} />
             <span className="hide-mobile">{exporting ? t('logs.exporting') : t('logs.export_csv')}</span>
@@ -376,9 +480,9 @@ export default function LogEntriesList({
           </button>
 
           {!readOnly && (
-            <button className="btn primary" onClick={handleCreate} disabled={loading || exporting} style={{ width: 'auto', padding: '8px 16px' }}>
+            <button className="btn primary" onClick={handleCreate} disabled={loading || exporting} style={{ width: 'auto', padding: '8px 16px' }} title={t('logs.new_entry')}>
               <Plus size={16} />
-              {t('logs.new_entry')}
+              <span className="hide-mobile">{t('logs.new_entry')}</span>
             </button>
           )}
         </div>
@@ -394,10 +498,20 @@ export default function LogEntriesList({
             <div
               key={item.id}
               className="logbook-card glass"
-              data-tour={highlightEntryId === item.id ? 'entry-first' : undefined}
-              onClick={() => setSelectedEntryId(item.id)}
+              data-tour={tourFirstEntryId === item.id ? 'entry-first' : undefined}
             >
-              <div className="card-icon">
+              <button
+                type="button"
+                className="logbook-card-select"
+                onClick={() => setSelectedEntryId(item.id)}
+                aria-label={
+                  item.departure && item.destination
+                    ? `${item.departure} → ${item.destination}, ${t('logs.travel_day_number', { number: item.dayOfTravel })}`
+                    : `${t('logs.new_entry')}, ${t('logs.travel_day_number', { number: item.dayOfTravel })}`
+                }
+              />
+
+              <div className="card-icon" aria-hidden>
                 <FileText size={24} />
               </div>
 
@@ -409,14 +523,17 @@ export default function LogEntriesList({
                 </h3>
                 <div className="card-meta">
                   <span className="sync-badge synced">
-                    {t('logs.day_of_travel')} {item.dayOfTravel}
+                    {t('logs.travel_day_number', { number: item.dayOfTravel })}
                   </span>
+                  <EntrySkipperSignBadge status={item.skipperSignStatus} />
                   <span className="date-badge">
                     {new Date(item.date).toLocaleDateString()}
                   </span>
                 </div>
               </div>
 
+              <ChevronRight size={18} className="logbook-card-chevron" aria-hidden />
+
               <button className="btn-pdf" onClick={(e) => handleDownloadPdf(item.id, item.date, e)} title={t('logs.export_pdf')} disabled={exporting}>
                 <Download size={18} />
               </button>
@@ -426,8 +543,6 @@ export default function LogEntriesList({
                   <Trash2 size={18} />
                 </button>
               )}
-              
-              <ChevronRight size={18} style={{ color: '#475569', marginLeft: 'auto' }} />
             </div>
           ))}
         </div>

client/src/components/LogbookBackupPanel.tsx

@@ -0,0 +1,346 @@
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Archive, Download, Upload, Check, AlertTriangle } from 'lucide-react'
+import { useDialog } from './ModalDialog.tsx'
+import {
+  downloadBackupBlob,
+  exportLogbookBackup,
+  parseLogbookBackupFile,
+  previewLogbookBackup,
+  restoreLogbookBackup,
+  type LogbookBackupFile,
+  type LogbookBackupPreview
+} from '../services/logbookBackup.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
+
+interface LogbookBackupPanelProps {
+  logbookId: string
+  onRestored?: (logbookId: string, title: string) => void
+}
+
+function mapBackupError(code: string, t: (key: string) => string): string {
+  switch (code) {
+    case 'BACKUP_PASSPHRASE_TOO_SHORT':
+      return t('settings.backup_passphrase_short')
+    case 'BACKUP_NOT_OWNER':
+      return t('settings.backup_not_owner')
+    case 'BACKUP_INVALID_JSON':
+      return t('settings.backup_invalid_json')
+    case 'BACKUP_INVALID_FORMAT':
+      return t('settings.backup_invalid_format')
+    case 'BACKUP_NOT_AUTHENTICATED':
+      return t('settings.backup_not_authenticated')
+    case 'BACKUP_ID_CONFLICT':
+      return t('settings.backup_id_conflict')
+    default:
+      if (code.includes('decrypt') || code.includes('operation')) {
+        return t('settings.backup_wrong_passphrase')
+      }
+      return code
+  }
+}
+
+export default function LogbookBackupPanel({ logbookId, onRestored }: LogbookBackupPanelProps) {
+  const { t, i18n } = useTranslation()
+  const { showConfirm } = useDialog()
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const [exportPassphrase, setExportPassphrase] = useState('')
+  const [exportConfirm, setExportConfirm] = useState('')
+  const [exporting, setExporting] = useState(false)
+
+  const [importPassphrase, setImportPassphrase] = useState('')
+  const [importFile, setImportFile] = useState<File | null>(null)
+  const [importPreview, setImportPreview] = useState<LogbookBackupPreview | null>(null)
+  const [parsedBackup, setParsedBackup] = useState<LogbookBackupFile | null>(null)
+  const [importing, setImporting] = useState(false)
+  const [previewing, setPreviewing] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [success, setSuccess] = useState<string | null>(null)
+
+  const handleExportSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await handleExport()
+  }
+
+  const handleImportSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    await handleRestore()
+  }
+
+  const handleExport = async () => {
+    setError(null)
+    setSuccess(null)
+
+    if (exportPassphrase.length < 8) {
+      setError(t('settings.backup_passphrase_short'))
+      return
+    }
+    if (exportPassphrase !== exportConfirm) {
+      setError(t('settings.backup_passphrase_mismatch'))
+      return
+    }
+
+    setExporting(true)
+    try {
+      const { blob, filename, backup } = await exportLogbookBackup(logbookId, exportPassphrase)
+      downloadBackupBlob(blob, filename)
+      setSuccess(t('settings.backup_export_success', { count: backup.counts.entries }))
+      setExportPassphrase('')
+      setExportConfirm('')
+      trackPlausibleEvent(PlausibleEvents.BACKUP_EXPORTED, {
+        entries: backup.counts.entries,
+        photos: backup.counts.photos
+      })
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(mapBackupError(message, t))
+    } finally {
+      setExporting(false)
+    }
+  }
+
+  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    setError(null)
+    setSuccess(null)
+    setImportPreview(null)
+    setParsedBackup(null)
+    const file = e.target.files?.[0]
+    setImportFile(file ?? null)
+    if (!file) return
+
+    try {
+      const backup = await parseLogbookBackupFile(file)
+      setParsedBackup(backup)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(mapBackupError(message, t))
+      setImportFile(null)
+    }
+  }
+
+  const handlePreviewImport = async () => {
+    if (!parsedBackup || !importPassphrase) return
+    setPreviewing(true)
+    setError(null)
+    try {
+      const preview = await previewLogbookBackup(parsedBackup, importPassphrase)
+      setImportPreview(preview)
+    } catch (err: unknown) {
+      setImportPreview(null)
+      setError(t('settings.backup_wrong_passphrase'))
+    } finally {
+      setPreviewing(false)
+    }
+  }
+
+  const handleRestore = async (options: { overwrite?: boolean; assignNewId?: boolean } = {}) => {
+    if (!parsedBackup || !importPassphrase) return
+
+    setImporting(true)
+    setError(null)
+    try {
+      const result = await restoreLogbookBackup(parsedBackup, importPassphrase, options)
+      setSuccess(t('settings.backup_restore_success', { title: result.title }))
+      setImportFile(null)
+      setImportPassphrase('')
+      setImportPreview(null)
+      setParsedBackup(null)
+      if (fileInputRef.current) fileInputRef.current.value = ''
+      trackPlausibleEvent(PlausibleEvents.BACKUP_RESTORED, {
+        entries: parsedBackup.counts.entries,
+        photos: parsedBackup.counts.photos,
+        mode: options.overwrite ? 'overwrite' : options.assignNewId ? 'new_id' : 'same_id'
+      })
+      onRestored?.(result.logbookId, result.title)
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err)
+      if (message === 'BACKUP_ID_CONFLICT') {
+        const overwrite = await showConfirm(
+          t('settings.backup_overwrite_confirm'),
+          t('settings.backup_restore_title'),
+          t('logs.confirm_yes'),
+          t('logs.confirm_no')
+        )
+        if (overwrite) {
+          setImporting(false)
+          return handleRestore({ overwrite: true })
+        }
+        const asNew = await showConfirm(
+          t('settings.backup_new_id_confirm'),
+          t('settings.backup_restore_title'),
+          t('logs.confirm_yes'),
+          t('logs.confirm_no')
+        )
+        if (asNew) {
+          setImporting(false)
+          return handleRestore({ assignNewId: true })
+        }
+        setError(t('settings.backup_restore_cancelled'))
+      } else {
+        setError(mapBackupError(message, t))
+      }
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  return (
+    <div className="member-editor-card glass mt-6 backup-panel" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+        <Archive size={20} style={{ color: '#38bdf8' }} />
+        <h3 style={{ margin: 0, color: '#38bdf8', fontSize: '16px' }}>
+          {t('settings.backup_title')}
+        </h3>
+      </div>
+
+      <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 20px 0' }}>
+        {t('settings.backup_desc')}
+      </p>
+
+      {error && (
+        <div className="auth-error mb-4" role="alert">
+          <AlertTriangle size={16} style={{ display: 'inline', marginRight: 6, verticalAlign: 'text-bottom' }} />
+          {error}
+        </div>
+      )}
+
+      {success && (
+        <div className="success-toast mb-4">
+          <Check size={16} />
+          <span>{success}</span>
+        </div>
+      )}
+
+      <section className="backup-section" aria-labelledby="backup-export-heading">
+        <h4 id="backup-export-heading" className="backup-section-title">
+          <Download size={16} aria-hidden="true" />
+          {t('settings.backup_export_title')}
+        </h4>
+        <p className="text-muted backup-section-desc">{t('settings.backup_export_desc')}</p>
+
+        <form onSubmit={handleExportSubmit} className="backup-export-form">
+          <div className="input-group">
+            <label htmlFor="backup-export-passphrase">{t('settings.backup_passphrase')}</label>
+            <input
+              id="backup-export-passphrase"
+              name="backup-export-passphrase"
+              type="password"
+              className="input-text"
+              value={exportPassphrase}
+              onChange={(e) => setExportPassphrase(e.target.value)}
+              placeholder={t('settings.backup_passphrase_placeholder')}
+              autoComplete="new-password"
+              disabled={exporting}
+              required
+            />
+          </div>
+          <div className="input-group">
+            <label htmlFor="backup-export-confirm">{t('settings.backup_passphrase_confirm')}</label>
+            <input
+              id="backup-export-confirm"
+              name="backup-export-confirm"
+              type="password"
+              className="input-text"
+              value={exportConfirm}
+              onChange={(e) => setExportConfirm(e.target.value)}
+              autoComplete="new-password"
+              disabled={exporting}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="btn primary"
+            disabled={exporting || !exportPassphrase || !exportConfirm}
+          >
+            <Download size={16} />
+            {exporting ? t('settings.backup_exporting') : t('settings.backup_export_btn')}
+          </button>
+        </form>
+      </section>
+
+      <section className="backup-section backup-section--import" aria-labelledby="backup-import-heading">
+        <h4 id="backup-import-heading" className="backup-section-title">
+          <Upload size={16} aria-hidden="true" />
+          {t('settings.backup_restore_title')}
+        </h4>
+        <p className="text-muted backup-section-desc">{t('settings.backup_restore_desc')}</p>
+
+        <form onSubmit={handleImportSubmit} className="backup-import-form">
+          <div className="input-group">
+            <label htmlFor="backup-import-file">{t('settings.backup_file_label')}</label>
+            <input
+              id="backup-import-file"
+              ref={fileInputRef}
+              type="file"
+              accept=".daagbok.json,application/json"
+              className="input-text"
+              onChange={handleFileChange}
+              disabled={importing}
+            />
+          </div>
+
+          {importFile && (
+            <>
+              <div className="input-group">
+                <label htmlFor="backup-import-passphrase">{t('settings.backup_passphrase')}</label>
+                <input
+                  id="backup-import-passphrase"
+                  name="backup-import-passphrase"
+                  type="password"
+                  className="input-text"
+                  value={importPassphrase}
+                  onChange={(e) => {
+                    setImportPassphrase(e.target.value)
+                    setImportPreview(null)
+                  }}
+                  autoComplete="current-password"
+                  disabled={importing}
+                  required
+                />
+              </div>
+
+              <div className="backup-actions-row">
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={handlePreviewImport}
+                  disabled={previewing || importing || !importPassphrase}
+                >
+                  {previewing ? t('settings.backup_previewing') : t('settings.backup_preview_btn')}
+                </button>
+                <button
+                  type="submit"
+                  className="btn primary"
+                  disabled={importing || !importPassphrase}
+                >
+                  <Upload size={16} />
+                  {importing ? t('settings.backup_restoring') : t('settings.backup_restore_btn')}
+                </button>
+              </div>
+            </>
+          )}
+        </form>
+
+        {importPreview && (
+          <div className="backup-preview glass">
+            <p className="backup-preview-title">{importPreview.title}</p>
+            <ul className="backup-preview-stats">
+              <li>{t('settings.backup_stat_entries', { count: importPreview.counts.entries })}</li>
+              <li>{t('settings.backup_stat_photos', { count: importPreview.counts.photos })}</li>
+              <li>{t('settings.backup_stat_crew', { count: importPreview.counts.crews })}</li>
+              <li>{t('settings.backup_stat_tracks', { count: importPreview.counts.gpsTracks })}</li>
+            </ul>
+            <p className="text-muted backup-preview-date">
+              {t('settings.backup_exported_at', {
+                date: formatAppDateTime(importPreview.exportedAt, i18n.language)
+              })}
+            </p>
+          </div>
+        )}
+      </section>
+    </div>
+  )
+}

client/src/components/LogbookCrewPicker.tsx

@@ -0,0 +1,224 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Users, User, Save, Check } from 'lucide-react'
+import type { LogbookCrewSelectionData, PersonSnapshot } from '../types/person.js'
+import type { DecryptedPerson } from '../services/personPool.js'
+import { loadPersonPool, filterSkippers, filterCrew } from '../services/personPool.js'
+import { loadLogbookCrewSelection, saveLogbookCrewSelectionFromIds } from '../services/logbookCrewSelection.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export interface LogbookCrewPickerProps {
+  logbookId: string
+  readOnly?: boolean
+  /** Demo / share: in-memory pool */
+  preloadedPool?: Array<{ payloadId: string; data: DecryptedPerson['data'] }>
+  preloadedSelection?: LogbookCrewSelectionData
+  /** Shared logbook: only people from selection snapshots */
+  selectionOnly?: boolean
+}
+
+function snapshotsToPoolList(
+  selection: LogbookCrewSelectionData
+): Array<{ payloadId: string; data: DecryptedPerson['data'] }> {
+  return Object.values(selection.snapshotsById).map((snap) => ({
+    payloadId: snap.id,
+    data: {
+      name: snap.name,
+      address: snap.address,
+      birthDate: snap.birthDate,
+      phone: snap.phone,
+      nationality: snap.nationality,
+      passportNumber: snap.passportNumber,
+      bloodType: snap.bloodType,
+      allergies: snap.allergies,
+      diseases: snap.diseases,
+      role: snap.role,
+      photo: snap.photo
+    }
+  }))
+}
+
+export default function LogbookCrewPicker({
+  logbookId,
+  readOnly = false,
+  preloadedPool,
+  preloadedSelection,
+  selectionOnly = false
+}: LogbookCrewPickerProps) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(!preloadedSelection)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pool, setPool] = useState<DecryptedPerson[]>([])
+  const [activeSkipperId, setActiveSkipperId] = useState<string | null>(null)
+  const [activeCrewIds, setActiveCrewIds] = useState<string[]>([])
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const selection =
+        preloadedSelection ??
+        (logbookId === 'demo' ? null : await loadLogbookCrewSelection(logbookId))
+
+      if (selection) {
+        setActiveSkipperId(selection.activeSkipperId)
+        setActiveCrewIds([...selection.activeCrewIds])
+      }
+
+      if (preloadedPool) {
+        setPool(
+          preloadedPool.map((p) => ({
+            payloadId: p.payloadId,
+            data: p.data
+          }))
+        )
+      } else if (selectionOnly && selection) {
+        setPool(snapshotsToPoolList(selection))
+      } else {
+        setPool(await loadPersonPool())
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load crew selection')
+    } finally {
+      setLoading(false)
+    }
+  }, [logbookId, preloadedPool, preloadedSelection, selectionOnly])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  const skippers = useMemo(() => filterSkippers(pool), [pool])
+  const crewMembers = useMemo(() => filterCrew(pool), [pool])
+
+  const toggleCrew = (id: string) => {
+    if (readOnly) return
+    setActiveCrewIds((prev) =>
+      prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+    )
+  }
+
+  const handleSave = async () => {
+    if (readOnly || logbookId === 'demo') return
+    setSaving(true)
+    setError(null)
+    setSaved(false)
+    try {
+      await saveLogbookCrewSelectionFromIds(logbookId, activeSkipperId, activeCrewIds)
+      setSaved(true)
+      trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { context: 'logbook_selection' })
+      setTimeout(() => setSaved(false), 3000)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Users className="header-logo spin" size={48} />
+        <p>{t('person_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="crew-dashboard-layout" data-tour="logbook-crew-picker">
+      <div className="form-card">
+        <div className="form-header">
+          <Users size={24} className="form-icon" />
+          <h2>{t('logbook_crew.title')}</h2>
+        </div>
+        <p className="help-text mb-4">{t('logbook_crew.subtitle')}</p>
+        {selectionOnly && <p className="help-text mb-4">{t('logbook_crew.selection_only_hint')}</p>}
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        <div className="input-group mb-4">
+          <label>{t('logbook_crew.active_skipper')}</label>
+          {skippers.length === 0 ? (
+            <p className="help-text">{t('logbook_crew.no_skippers_in_pool')}</p>
+          ) : (
+            <div className="crew-selection-list">
+              {skippers.map((s) => (
+                <label key={s.payloadId} className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`skipper-${logbookId}`}
+                    checked={activeSkipperId === s.payloadId}
+                    onChange={() => !readOnly && setActiveSkipperId(s.payloadId)}
+                    disabled={readOnly}
+                  />
+                  <User size={16} aria-hidden="true" />
+                  <span>{s.data.name || t('logbook_crew.unnamed')}</span>
+                </label>
+              ))}
+              {!readOnly && (
+                <label className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`skipper-${logbookId}`}
+                    checked={activeSkipperId === null}
+                    onChange={() => setActiveSkipperId(null)}
+                  />
+                  <span>{t('logbook_crew.no_skipper')}</span>
+                </label>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="input-group mb-4">
+          <label>{t('logbook_crew.active_crew')}</label>
+          {crewMembers.length === 0 ? (
+            <p className="help-text">{t('logbook_crew.no_crew_in_pool')}</p>
+          ) : (
+            <div className="crew-selection-list">
+              {crewMembers.map((c) => (
+                <label key={c.payloadId} className="crew-selection-item">
+                  <input
+                    type="checkbox"
+                    checked={activeCrewIds.includes(c.payloadId)}
+                    onChange={() => toggleCrew(c.payloadId)}
+                    disabled={readOnly}
+                  />
+                  <span>{c.data.name || t('logbook_crew.unnamed')}</span>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {!readOnly && logbookId !== 'demo' && (
+          <div className="form-actions">
+            {saved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('logbook_crew.saved')}</span>
+              </div>
+            )}
+            <button type="button" className="btn primary" onClick={() => void handleSave()} disabled={saving}>
+              <Save size={18} />
+              {t('logbook_crew.save')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function selectionFromSnapshots(
+  snapshotsById: Record<string, PersonSnapshot>
+): LogbookCrewSelectionData {
+  const snapshots = Object.values(snapshotsById)
+  const skipper = snapshots.find((s) => s.role === 'skipper')
+  return {
+    activeSkipperId: skipper?.id ?? null,
+    activeCrewIds: snapshots.filter((s) => s.role === 'crew').map((s) => s.id),
+    snapshotsById
+  }
+}

client/src/components/LogbookDashboard.tsx

@@ -1,33 +1,68 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useLiveQuery } from 'dexie-react-hooks'
-import { db } from '../services/db.js'
-import { fetchLogbooks, createLogbook, deleteLogbook, type DecryptedLogbook } from '../services/logbook.js'
+import { cycleAppLanguage } from '../utils/i18nLanguages.js'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
+import { fetchLogbooks, createLogbook, deleteLogbook, updateLogbookTitle, type DecryptedLogbook } from '../services/logbook.js'
+import { loadLogbookSearchFieldsBatch } from '../services/logbookSearchIndex.js'
+import { logbookMatchesFilter, type LogbookSearchFields } from '../utils/logbookFilter.js'
+import LogbookRoleBadge from './LogbookRoleBadge.tsx'
+import BetaBadge from './BetaBadge.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { getErrorMessage } from '../utils/errors.js'
 import { logoutUser } from '../services/auth.js'
 import { useDialog } from './ModalDialog.tsx'
-import AccountDangerZone from './AccountDangerZone.tsx'
-import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, User, Wifi, WifiOff } from 'lucide-react'
+import { BookOpen, Plus, Trash2, LogOut, Languages, RefreshCw, Ship, Wifi, WifiOff, Search, X, CalendarDays, CaseSensitive, ArrowUp, ArrowDown } from 'lucide-react'
 import DisclaimerHeaderButton from './DisclaimerHeaderButton.tsx'
+import FeedbackHeaderButton from './FeedbackHeaderButton.tsx'
+import ProfileHeaderButton from './ProfileHeaderButton.tsx'
 
 interface LogbookDashboardProps {
   onSelectLogbook: (id: string, title: string) => void
   onLogout: () => void
+  onOpenProfile: () => void
 }
 
-export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookDashboardProps) {
+type LogbookSortKey = 'name' | 'date'
+type LogbookSortDirection = 'asc' | 'desc'
+
+function sortLogbooks(
+  items: DecryptedLogbook[],
+  sortBy: LogbookSortKey,
+  direction: LogbookSortDirection,
+  locale: string
+): DecryptedLogbook[] {
+  const sorted = [...items]
+  sorted.sort((a, b) => {
+    const cmp =
+      sortBy === 'name'
+        ? a.title.localeCompare(b.title, locale, { sensitivity: 'base' })
+        : new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime()
+    return direction === 'asc' ? cmp : -cmp
+  })
+  return sorted
+}
+
+export default function LogbookDashboard({ onSelectLogbook, onLogout, onOpenProfile }: LogbookDashboardProps) {
   const { t, i18n } = useTranslation()
   const { showConfirm } = useDialog()
   const [logbooks, setLogbooks] = useState<DecryptedLogbook[]>([])
   const [newTitle, setNewTitle] = useState('')
+  const [editingLogbookId, setEditingLogbookId] = useState<string | null>(null)
+  const [editingTitleDraft, setEditingTitleDraft] = useState('')
+  const titleInputRef = useRef<HTMLInputElement>(null)
   const [loading, setLoading] = useState(false)
   const [refreshing, setRefreshing] = useState(false)
   const [error, setError] = useState<string | null>(null)
+  const [filterQuery, setFilterQuery] = useState('')
+  const [searchFieldsByLogbookId, setSearchFieldsByLogbookId] = useState<Map<string, LogbookSearchFields>>(
+    () => new Map()
+  )
+  const [sortBy, setSortBy] = useState<LogbookSortKey>('date')
+  const [sortDirection, setSortDirection] = useState<LogbookSortDirection>('desc')
+  const filterInputRef = useRef<HTMLInputElement>(null)
   const [online, setOnline] = useState(navigator.onLine)
-  const [username] = useState(localStorage.getItem('active_username') || 'Skipper')
 
-  // Reactive sync queue count
-  const pendingCount = useLiveQuery(() => db.syncQueue.count()) || 0
+  const { pendingCount, showSpinner, showPendingWarning, connStatusClassName } = useSyncIndicator()
 
   // Listen to connectivity changes
   useEffect(() => {
@@ -46,6 +81,23 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
     loadLogbooks()
   }, [])
 
+  useEffect(() => {
+    const ids = logbooks.map((lb) => lb.id)
+    if (ids.length === 0) {
+      setSearchFieldsByLogbookId(new Map())
+      return
+    }
+
+    let cancelled = false
+    void loadLogbookSearchFieldsBatch(ids).then((index) => {
+      if (!cancelled) setSearchFieldsByLogbookId(index)
+    })
+
+    return () => {
+      cancelled = true
+    }
+  }, [logbooks])
+
   const loadLogbooks = async (isRefresh = false) => {
     if (isRefresh) setRefreshing(true)
     else setLoading(true)
@@ -53,8 +105,8 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
     try {
       const data = await fetchLogbooks()
       setLogbooks(data)
-    } catch (err: any) {
-      setError(err.message || 'Failed to load logbooks')
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, t('errors.load_failed')))
     } finally {
       setLoading(false)
       setRefreshing(false)
@@ -72,8 +124,8 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
       setLogbooks((prev) => [created, ...prev])
       setNewTitle('')
       trackPlausibleEvent(PlausibleEvents.LOGBOOK_CREATED)
-    } catch (err: any) {
-      setError(err.message || 'Failed to create logbook')
+    } catch (err: unknown) {
+      setError(getErrorMessage(err, t('errors.save_failed')))
     } finally {
       setLoading(false)
     }
@@ -82,30 +134,204 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
   const handleDelete = async (id: string, e: React.MouseEvent) => {
     e.stopPropagation() // Prevent selecting the logbook when clicking delete
     
-    if (await showConfirm(t('dashboard.delete_confirm'), t('dashboard.title'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
+    if (await showConfirm(t('dashboard.delete_confirm'), t('dashboard.delete_btn'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
       setLoading(true)
       setError(null)
       try {
         await deleteLogbook(id)
         setLogbooks((prev) => prev.filter((lb) => lb.id !== id))
       } catch (err: any) {
-        setError(err.message || 'Failed to delete logbook')
+        setError(getErrorMessage(err, t('errors.delete_failed')))
       } finally {
         setLoading(false)
       }
     }
   }
 
+  useEffect(() => {
+    if (editingLogbookId) {
+      titleInputRef.current?.focus()
+      titleInputRef.current?.select()
+    }
+  }, [editingLogbookId])
+
+  const startTitleEdit = (lb: DecryptedLogbook, e: React.MouseEvent) => {
+    e.stopPropagation()
+    setEditingLogbookId(lb.id)
+    setEditingTitleDraft(lb.title)
+  }
+
+  const cancelTitleEdit = () => {
+    setEditingLogbookId(null)
+    setEditingTitleDraft('')
+  }
+
+  const commitTitleEdit = async (id: string) => {
+    if (editingLogbookId !== id) return
+
+    const lb = logbooks.find((item) => item.id === id)
+    const trimmedTitle = editingTitleDraft.trim()
+    cancelTitleEdit()
+
+    if (!lb || !trimmedTitle || trimmedTitle === lb.title.trim()) return
+
+    setLoading(true)
+    setError(null)
+    try {
+      await updateLogbookTitle(id, trimmedTitle)
+      setLogbooks((prev) =>
+        prev.map((item) =>
+          item.id === id ? { ...item, title: trimmedTitle, updatedAt: new Date().toISOString() } : item
+        )
+      )
+    } catch (err: any) {
+      setError(getErrorMessage(err, t('errors.save_failed')))
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const handleLogout = () => {
-    logoutUser()
+    void logoutUser()
     onLogout()
   }
 
   const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
+    cycleAppLanguage(i18n)
   }
 
+  const ownedLogbooks = logbooks.filter((lb) => !lb.isShared)
+  const sharedLogbooks = logbooks.filter((lb) => lb.isShared)
+
+  const filterActive = filterQuery.trim().length > 0
+  const filteredOwnedLogbooks = useMemo(
+    () =>
+      ownedLogbooks.filter((lb) =>
+        logbookMatchesFilter(lb, filterQuery, i18n.language, searchFieldsByLogbookId.get(lb.id))
+      ),
+    [ownedLogbooks, filterQuery, i18n.language, searchFieldsByLogbookId]
+  )
+  const filteredSharedLogbooks = useMemo(
+    () =>
+      sharedLogbooks.filter((lb) =>
+        logbookMatchesFilter(lb, filterQuery, i18n.language, searchFieldsByLogbookId.get(lb.id))
+      ),
+    [sharedLogbooks, filterQuery, i18n.language, searchFieldsByLogbookId]
+  )
+  const sortedOwnedLogbooks = useMemo(
+    () => sortLogbooks(filteredOwnedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredOwnedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const sortedSharedLogbooks = useMemo(
+    () => sortLogbooks(filteredSharedLogbooks, sortBy, sortDirection, i18n.language),
+    [filteredSharedLogbooks, sortBy, sortDirection, i18n.language]
+  )
+  const filteredLogbookCount = sortedOwnedLogbooks.length + sortedSharedLogbooks.length
+
+  const renderLogbookCard = (lb: DecryptedLogbook) => {
+    const isEditingTitle = editingLogbookId === lb.id
+
+    return (
+    <div
+      key={lb.id}
+      className={`logbook-card glass${lb.isShared ? ' logbook-card--shared' : ''}${isEditingTitle ? ' logbook-card--editing-title' : ''}`}
+    >
+      {!isEditingTitle && (
+        <button
+          type="button"
+          className="logbook-card-select"
+          onClick={() => onSelectLogbook(lb.id, lb.title)}
+          aria-label={t('dashboard.open_logbook', { title: lb.title })}
+        />
+      )}
+
+      <div className="card-icon" aria-hidden>
+        <BookOpen size={24} />
+      </div>
+
+      <div className="card-info">
+        <div className="card-title-row">
+          {isEditingTitle ? (
+            <input
+              ref={titleInputRef}
+              type="text"
+              className="logbook-title-inline-edit input-text"
+              value={editingTitleDraft}
+              onChange={(e) => setEditingTitleDraft(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  void commitTitleEdit(lb.id)
+                } else if (e.key === 'Escape') {
+                  e.preventDefault()
+                  cancelTitleEdit()
+                }
+              }}
+              onBlur={() => void commitTitleEdit(lb.id)}
+              disabled={loading}
+              aria-label={t('dashboard.edit_title')}
+            />
+          ) : (
+            <h3
+              className={lb.isShared ? undefined : 'logbook-title-editable'}
+              onClick={lb.isShared ? undefined : (e) => startTitleEdit(lb, e)}
+              title={lb.isShared ? undefined : t('dashboard.edit_title')}
+            >
+              {lb.title}
+            </h3>
+          )}
+          <LogbookRoleBadge role={lb.accessRole} />
+        </div>
+        <div className="card-meta">
+          <span className={`sync-badge ${lb.isSynced ? 'synced' : 'local'}`}>
+            {lb.isSynced ? t('dashboard.status_synced') : t('dashboard.status_local')}
+          </span>
+          {lb.isDemo && (
+            <span className="demo-badge">{t('demo.badge')}</span>
+          )}
+          <span className="date-badge">
+            {new Date(lb.updatedAt).toLocaleDateString(i18n.language, {
+              year: 'numeric',
+              month: 'short',
+              day: 'numeric'
+            })}
+          </span>
+        </div>
+      </div>
+
+      {!lb.isShared && (
+        <div className="logbook-card-actions">
+          <button
+            type="button"
+            className="btn-delete"
+            onClick={(e) => handleDelete(lb.id, e)}
+            title={t('dashboard.delete_btn')}
+            aria-label={t('dashboard.delete_btn')}
+          >
+            <Trash2 size={18} />
+          </button>
+        </div>
+      )}
+    </div>
+    )
+  }
+
+  const renderLogbookSection = (
+    title: string,
+    items: DecryptedLogbook[],
+    hint?: string
+  ) => (
+    <div className="logbook-section">
+      <div className="logbook-section-header">
+        <h3>{title}</h3>
+        {hint && <p className="logbook-section-hint">{hint}</p>}
+      </div>
+      <div className="logbooks-grid">
+        {items.map(renderLogbookCard)}
+      </div>
+    </div>
+  )
+
   return (
     <div className="dashboard-container">
       {/* Premium Dashboard Header */}
@@ -113,18 +339,37 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
         <div className="header-brand">
           <Ship className="header-logo" size={32} />
           <div>
-            <h1>{t('app.name')}</h1>
+            <div className="header-brand-title-row">
+              <h1>{t('app.name')}</h1>
+              <BetaBadge />
+            </div>
             <p className="subtitle">{t('app.tagline')}</p>
           </div>
         </div>
 
         <div className="header-actions">
           {/* Connection Indicator */}
-          <div className={`conn-status ${online ? (pendingCount > 0 ? 'unsynced' : 'online') : 'offline'}`} title={online ? (pendingCount > 0 ? 'Pending Sync' : 'Synced') : 'Offline'}>
+          <div
+            className={connStatusClassName(online)}
+            title={
+              online
+                ? showSpinner
+                  ? 'Syncing'
+                  : pendingCount > 0
+                    ? 'Pending Sync'
+                    : 'Synced'
+                : 'Offline'
+            }
+          >
             {online ? (
-              pendingCount > 0 ? (
+              showSpinner ? (
                 <>
                   <RefreshCw size={18} className="spin" />
+                  <span>{t('sync.status_syncing')}</span>
+                </>
+              ) : showPendingWarning ? (
+                <>
+                  <RefreshCw size={18} />
                   <span>{t('sync.status_unsynced')} ({pendingCount})</span>
                 </>
               ) : (
@@ -141,11 +386,7 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
             )}
           </div>
 
-          {/* Skipper profile */}
-          <div className="skipper-badge">
-            <User size={16} />
-            <span>{username}</span>
-          </div>
+          <ProfileHeaderButton onClick={onOpenProfile} />
 
           {/* Lang toggle */}
           <button className="btn-icon" onClick={toggleLanguage} title="Switch Language">
@@ -154,6 +395,8 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
 
           <DisclaimerHeaderButton />
 
+          <FeedbackHeaderButton />
+
           {/* Logout */}
           <button className="btn-icon logout" onClick={handleLogout} title={t('dashboard.logout')}>
             <LogOut size={18} />
@@ -201,50 +444,118 @@ export default function LogbookDashboard({ onSelectLogbook, onLogout }: LogbookD
           ) : logbooks.length === 0 ? (
             <div className="dashboard-status-msg glass">{t('dashboard.no_logbooks')}</div>
           ) : (
-            <div className="logbooks-grid">
-              {logbooks.map((lb) => (
-                <div key={lb.id} className="logbook-card glass" onClick={() => onSelectLogbook(lb.id, lb.title)}>
-                  <div className="card-icon">
-                    <BookOpen size={24} />
+            <>
+              <div className="dashboard-list-controls">
+                <div className="dashboard-filter-bar">
+                  <label className="dashboard-filter-label" htmlFor="logbook-list-filter">
+                    {t('dashboard.filter_label')}
+                  </label>
+                  <div className="dashboard-filter-input-wrap">
+                    <Search size={18} className="dashboard-filter-icon" aria-hidden="true" />
+                    <input
+                      ref={filterInputRef}
+                      id="logbook-list-filter"
+                      type="search"
+                      className="input-text dashboard-filter-input"
+                      placeholder={t('dashboard.filter_placeholder')}
+                      value={filterQuery}
+                      onChange={(e) => setFilterQuery(e.target.value)}
+                      autoComplete="off"
+                      spellCheck={false}
+                      aria-describedby={filterActive ? 'logbook-filter-status' : undefined}
+                    />
+                    {filterActive && (
+                      <button
+                        type="button"
+                        className="dashboard-filter-clear"
+                        onClick={() => {
+                          setFilterQuery('')
+                          filterInputRef.current?.focus()
+                        }}
+                        title={t('dashboard.filter_clear')}
+                        aria-label={t('dashboard.filter_clear')}
+                      >
+                        <X size={16} aria-hidden="true" />
+                      </button>
+                    )}
                   </div>
-                  
-                  <div className="card-info">
-                    <h3>{lb.title}</h3>
-                    <div className="card-meta">
-                      <span className={`sync-badge ${lb.isSynced ? 'synced' : 'local'}`}>
-                        {lb.isSynced ? t('dashboard.status_synced') : t('dashboard.status_local')}
-                      </span>
-                      {lb.isDemo && (
-                        <span className="demo-badge">{t('demo.badge')}</span>
-                      )}
-                      <span className="date-badge">
-                        {new Date(lb.updatedAt).toLocaleDateString(i18n.language, {
-                          year: 'numeric',
-                          month: 'short',
-                          day: 'numeric'
-                        })}
-                      </span>
+                  {filterActive && (
+                    <p id="logbook-filter-status" className="dashboard-filter-meta" role="status">
+                      {t('dashboard.filter_results', { count: filteredLogbookCount })}
+                    </p>
+                  )}
+                </div>
+
+                <div className="dashboard-sort-bar">
+                  <span className="dashboard-sort-label">{t('dashboard.sort_label')}</span>
+                  <div className="dashboard-sort-row">
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_by_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'name' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('name')}
+                        aria-pressed={sortBy === 'name'}
+                        aria-label={t('dashboard.sort_by_name')}
+                        title={t('dashboard.sort_by_name')}
+                      >
+                        <CaseSensitive size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortBy === 'date' ? ' is-active' : ''}`}
+                        onClick={() => setSortBy('date')}
+                        aria-pressed={sortBy === 'date'}
+                        aria-label={t('dashboard.sort_by_date')}
+                        title={t('dashboard.sort_by_date')}
+                      >
+                        <CalendarDays size={16} aria-hidden="true" />
+                      </button>
+                    </div>
+                    <div className="dashboard-sort-group" role="group" aria-label={t('dashboard.sort_dir_label')}>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'asc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('asc')}
+                        aria-pressed={sortDirection === 'asc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_asc') : t('dashboard.sort_date_asc')}
+                      >
+                        <ArrowUp size={16} aria-hidden="true" />
+                      </button>
+                      <button
+                        type="button"
+                        className={`dashboard-sort-btn${sortDirection === 'desc' ? ' is-active' : ''}`}
+                        onClick={() => setSortDirection('desc')}
+                        aria-pressed={sortDirection === 'desc'}
+                        aria-label={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                        title={sortBy === 'name' ? t('dashboard.sort_name_desc') : t('dashboard.sort_date_desc')}
+                      >
+                        <ArrowDown size={16} aria-hidden="true" />
+                      </button>
                     </div>
                   </div>
-
-                  <button
-                    className="btn-delete"
-                    onClick={(e) => handleDelete(lb.id, e)}
-                    title={t('dashboard.delete_btn')}
-                    style={{ visibility: lb.isShared ? 'hidden' : 'visible' }}
-                  >
-                    <Trash2 size={18} />
-                  </button>
                 </div>
-              ))}
-            </div>
+              </div>
+
+              {filterActive && filteredLogbookCount === 0 ? (
+                <div className="dashboard-status-msg glass">{t('dashboard.filter_no_results')}</div>
+              ) : (
+                <div className="logbook-sections">
+                  {sortedOwnedLogbooks.length > 0 && renderLogbookSection(
+                    sortedSharedLogbooks.length > 0 ? t('dashboard.section_owned') : t('dashboard.title'),
+                    sortedOwnedLogbooks
+                  )}
+                  {sortedSharedLogbooks.length > 0 && renderLogbookSection(
+                    t('dashboard.section_shared'),
+                    sortedSharedLogbooks,
+                    t('dashboard.section_shared_hint')
+                  )}
+                </div>
+              )}
+            </>
           )}
         </section>
       </main>
-
-      <section className="dashboard-account-section" aria-label={t('settings.danger_zone_title')}>
-        <AccountDangerZone />
-      </section>
     </div>
   )
 }

client/src/components/LogbookRoleBadge.tsx

@@ -0,0 +1,37 @@
+import { useTranslation } from 'react-i18next'
+import { Anchor, Eye, Users } from 'lucide-react'
+import type { LogbookAccessRole } from '../services/logbook.js'
+
+interface LogbookRoleBadgeProps {
+  role: LogbookAccessRole
+  className?: string
+}
+
+export default function LogbookRoleBadge({ role, className = '' }: LogbookRoleBadgeProps) {
+  const { t } = useTranslation()
+
+  if (role === 'OWNER') {
+    return (
+      <span className={`role-badge role-badge--owner ${className}`.trim()} title={t('dashboard.role_owner_hint')}>
+        <Anchor size={12} aria-hidden="true" />
+        {t('dashboard.role_owner')}
+      </span>
+    )
+  }
+
+  if (role === 'READ') {
+    return (
+      <span className={`role-badge role-badge--read ${className}`.trim()} title={t('dashboard.role_read_hint')}>
+        <Eye size={12} aria-hidden="true" />
+        {t('dashboard.role_read')}
+      </span>
+    )
+  }
+
+  return (
+    <span className={`role-badge role-badge--crew ${className}`.trim()} title={t('dashboard.role_crew_hint')}>
+      <Users size={12} aria-hidden="true" />
+      {t('dashboard.role_crew')}
+    </span>
+  )
+}

client/src/components/LogbookVesselPicker.tsx

@@ -0,0 +1,199 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Ship, Save, Check } from 'lucide-react'
+import type { LogbookVesselSelectionData, VesselData } from '../types/vessel.js'
+import type { DecryptedVessel } from '../services/vesselPool.js'
+import { loadVesselPool } from '../services/vesselPool.js'
+import { loadLogbookVesselSelection, saveLogbookVesselSelectionFromId } from '../services/logbookVesselSelection.js'
+import { resolveVesselForLogbook } from '../services/resolveVessel.js'
+import { vesselDataFromSnapshot } from '../utils/vesselSnapshot.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export interface LogbookVesselPickerProps {
+  logbookId: string
+  readOnly?: boolean
+  preloadedPool?: Array<{ payloadId: string; data: VesselData }>
+  preloadedSelection?: LogbookVesselSelectionData
+  selectionOnly?: boolean
+  onOpenProfile?: () => void
+}
+
+export default function LogbookVesselPicker({
+  logbookId,
+  readOnly = false,
+  preloadedPool,
+  preloadedSelection,
+  selectionOnly = false,
+  onOpenProfile
+}: LogbookVesselPickerProps) {
+  const { t } = useTranslation()
+  const [loading, setLoading] = useState(!preloadedSelection)
+  const [saving, setSaving] = useState(false)
+  const [saved, setSaved] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const [pool, setPool] = useState<DecryptedVessel[]>([])
+  const [activeVesselId, setActiveVesselId] = useState<string | null>(null)
+  const [resolvedVessel, setResolvedVessel] = useState<VesselData | null>(null)
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const selection =
+        preloadedSelection ??
+        (logbookId === 'demo' ? null : await loadLogbookVesselSelection(logbookId))
+
+      if (selection) {
+        setActiveVesselId(selection.activeVesselId)
+      }
+
+      if (preloadedPool) {
+        setPool(preloadedPool.map((p) => ({ payloadId: p.payloadId, data: p.data })))
+      } else if (selectionOnly && selection?.vesselSnapshot) {
+        const data = vesselDataFromSnapshot(selection.vesselSnapshot)
+        if (data) {
+          setPool([{ payloadId: selection.vesselSnapshot.id, data }])
+        }
+      } else {
+        setPool(await loadVesselPool())
+      }
+
+      const vessel = await resolveVesselForLogbook(logbookId, {
+        preloadedSelection: selection ?? undefined
+      })
+      setResolvedVessel(vessel)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load vessel selection')
+    } finally {
+      setLoading(false)
+    }
+  }, [logbookId, preloadedPool, preloadedSelection, selectionOnly])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  const handleSave = async () => {
+    if (readOnly || logbookId === 'demo') return
+    setSaving(true)
+    setError(null)
+    setSaved(false)
+    try {
+      const selection = await saveLogbookVesselSelectionFromId(logbookId, activeVesselId)
+      const vessel = vesselDataFromSnapshot(selection.vesselSnapshot)
+      setResolvedVessel(vessel)
+      setSaved(true)
+      trackPlausibleEvent(PlausibleEvents.VESSEL_SAVED, { context: 'logbook_selection' })
+      setTimeout(() => setSaved(false), 3000)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to save')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Ship className="header-logo spin" size={48} />
+        <p>{t('vessel_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="crew-dashboard-layout" data-tour="logbook-vessel-picker">
+      <div className="form-card">
+        <div className="form-header">
+          <Ship size={24} className="form-icon" />
+          <h2>{t('logbook_vessel.title')}</h2>
+        </div>
+        <p className="help-text mb-4">{t('logbook_vessel.subtitle')}</p>
+        {selectionOnly && <p className="help-text mb-4">{t('logbook_vessel.selection_only_hint')}</p>}
+        {!selectionOnly && !readOnly && onOpenProfile && (
+          <p className="help-text mb-4">
+            <button type="button" className="btn-link" onClick={onOpenProfile}>
+              {t('logbook_vessel.manage_in_profile')}
+            </button>
+          </p>
+        )}
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        <div className="input-group mb-4">
+          <label>{t('logbook_vessel.active_vessel')}</label>
+          {pool.length === 0 ? (
+            <p className="help-text">{t('logbook_vessel.no_vessels_in_pool')}</p>
+          ) : (
+            <div className="crew-selection-list">
+              {pool.map((v) => (
+                <label key={v.payloadId} className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`vessel-${logbookId}`}
+                    checked={activeVesselId === v.payloadId}
+                    onChange={() => !readOnly && setActiveVesselId(v.payloadId)}
+                    disabled={readOnly}
+                  />
+                  <Ship size={16} aria-hidden="true" />
+                  <span>{v.data.name || t('logbook_vessel.unnamed')}</span>
+                </label>
+              ))}
+              {!readOnly && (
+                <label className="crew-selection-item">
+                  <input
+                    type="radio"
+                    name={`vessel-${logbookId}`}
+                    checked={activeVesselId === null}
+                    onChange={() => setActiveVesselId(null)}
+                  />
+                  <span>{t('logbook_vessel.no_vessel')}</span>
+                </label>
+              )}
+            </div>
+          )}
+        </div>
+
+        {resolvedVessel && (
+          <div className="member-editor-card glass mb-4 logbook-vessel-summary">
+            <h3 className="mb-2">{resolvedVessel.name}</h3>
+            <dl className="profile-dl">
+              {resolvedVessel.homePort && (
+                <div className="profile-dl-row">
+                  <dt>{t('vessel.port')}</dt>
+                  <dd>{resolvedVessel.homePort}</dd>
+                </div>
+              )}
+              {resolvedVessel.registrationNumber && (
+                <div className="profile-dl-row">
+                  <dt>{t('vessel.registration')}</dt>
+                  <dd>{resolvedVessel.registrationNumber}</dd>
+                </div>
+              )}
+              {resolvedVessel.mmsi && (
+                <div className="profile-dl-row">
+                  <dt>{t('vessel.mmsi')}</dt>
+                  <dd>{resolvedVessel.mmsi}</dd>
+                </div>
+              )}
+            </dl>
+          </div>
+        )}
+
+        {!readOnly && logbookId !== 'demo' && (
+          <div className="form-actions">
+            {saved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('logbook_vessel.saved')}</span>
+              </div>
+            )}
+            <button type="button" className="btn primary" onClick={() => void handleSave()} disabled={saving}>
+              <Save size={18} />
+              {t('logbook_vessel.save')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/MetricRangeInput.tsx

@@ -0,0 +1,196 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+
+export interface MetricRangeInputProps {
+  id?: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  disabled?: boolean
+  min?: number
+  max?: number
+  step?: number
+  discreteValues?: readonly number[]
+  parse: (value: string) => number | null
+  format: (numeric: number) => string
+  defaultNumeric: number
+  /** Shown next to the label (current value). */
+  formatDisplay: (numeric: number, unset: boolean) => string
+  numberMin?: number
+  numberMax?: number
+  numberStep?: number | 'any'
+  numberPlaceholder?: string
+  allowLegacyText?: boolean
+  hideNumberInput?: boolean
+}
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n))
+}
+
+export default function MetricRangeInput({
+  id,
+  label,
+  value,
+  onChange,
+  disabled = false,
+  min,
+  max,
+  discreteValues,
+  parse,
+  format,
+  defaultNumeric,
+  formatDisplay,
+  numberMin,
+  numberMax,
+  numberStep = 'any',
+  numberPlaceholder,
+  allowLegacyText = false,
+  hideNumberInput = false
+}: MetricRangeInputProps) {
+  const { t } = useTranslation()
+  const unsetLabel = t('logs.weather_slider_unset', { defaultValue: '—' })
+
+  const isLegacyText =
+    allowLegacyText && value.trim() !== '' && parse(value) === null
+
+  const emitNumeric = useCallback(
+    (numeric: number) => {
+      onChange(format(numeric))
+    },
+    [onChange, format]
+  )
+
+  const parsed = parse(value)
+  const unset = parsed === null
+  const sliderNumeric = unset ? defaultNumeric : parsed
+
+  const useDiscrete = discreteValues != null && discreteValues.length > 1
+
+  let sliderMin = 0
+  let sliderMax = 0
+  let sliderValue = 0
+
+  if (useDiscrete) {
+    sliderMin = 0
+    sliderMax = discreteValues.length - 1
+    if (unset) {
+      sliderValue = 0
+    } else {
+      let bestIdx = 0
+      let bestDiff = Math.abs(discreteValues[0] - sliderNumeric)
+      for (let i = 1; i < discreteValues.length; i++) {
+        const diff = Math.abs(discreteValues[i] - sliderNumeric)
+        if (diff < bestDiff) {
+          bestDiff = diff
+          bestIdx = i
+        }
+      }
+      sliderValue = bestIdx
+    }
+  } else if (min != null && max != null) {
+    sliderMin = min
+    sliderMax = max
+    sliderValue = clamp(sliderNumeric, min, max)
+  }
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const idx = Number(e.target.value)
+    if (useDiscrete && discreteValues) {
+      emitNumeric(discreteValues[clamp(idx, 0, discreteValues.length - 1)])
+      return
+    }
+    if (min != null && max != null) {
+      emitNumeric(Number(e.target.value))
+    }
+  }
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  const handleNumberBlur = () => {
+    const next = parse(value)
+    if (next == null) {
+      if (!value.trim()) onChange('')
+      return
+    }
+    onChange(format(next))
+  }
+
+  const hintNumeric = useDiscrete && discreteValues
+    ? discreteValues[sliderValue]
+    : sliderValue
+
+  const displayLabel = unset ? unsetLabel : formatDisplay(hintNumeric, false)
+
+  if (isLegacyText) {
+    return (
+      <div className="input-group metric-range-input metric-range-input--compact">
+        <div className="metric-range-header">
+          <label htmlFor={id}>{label}</label>
+        </div>
+        <input
+          id={id}
+          type="text"
+          className="input-text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          disabled={disabled}
+          placeholder={numberPlaceholder}
+        />
+      </div>
+    )
+  }
+
+  const hasSlider = useDiscrete || (min != null && max != null)
+
+  return (
+    <div className="input-group metric-range-input metric-range-input--compact">
+      <div className="metric-range-header">
+        <label htmlFor={hideNumberInput ? undefined : id}>{label}</label>
+        {hasSlider && (
+          <span className="metric-range-value" aria-live="polite">
+            {displayLabel}
+          </span>
+        )}
+      </div>
+      {hasSlider && (
+        <div className="metric-range-control-row">
+          <input
+            type="range"
+            className="tank-liter-slider metric-range-slider"
+            min={sliderMin}
+            max={sliderMax}
+            step={1}
+            value={sliderValue}
+            onChange={handleSliderChange}
+            disabled={disabled}
+            aria-valuemin={sliderMin}
+            aria-valuemax={sliderMax}
+            aria-valuenow={sliderValue}
+            aria-label={label}
+            aria-valuetext={displayLabel}
+          />
+          {!hideNumberInput && (
+            <input
+              id={id}
+              type="number"
+              className="input-text metric-range-number"
+              value={unset ? '' : value.replace(/\s*hPa\s*$/i, '').replace(/°\s*$/, '')}
+              onChange={handleNumberChange}
+              onBlur={handleNumberBlur}
+              disabled={disabled}
+              min={numberMin}
+              max={numberMax}
+              step={numberStep}
+              placeholder={numberPlaceholder}
+              inputMode="decimal"
+              aria-label={label}
+            />
+          )}
+        </div>
+      )}
+    </div>
+  )
+}

client/src/components/ModalDialog.tsx

@@ -1,8 +1,28 @@
-import React, { createContext, useContext, useState, useRef } from 'react'
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useRef,
+  useCallback,
+  useMemo,
+  useEffect,
+  useId
+} from 'react'
+import { useTranslation } from 'react-i18next'
+
+export type ConfirmLeaveChoice = 'stay' | 'save' | 'discard'
 
 interface DialogContextType {
   showAlert: (message: string, title?: string, confirmText?: string) => Promise<void>
   showConfirm: (message: string, title?: string, confirmText?: string, cancelText?: string) => Promise<boolean>
+  showConfirmLeave: (
+    message: string,
+    title?: string,
+    stayLabel?: string,
+    saveLabel?: string,
+    discardLabel?: string,
+    options?: { showSave?: boolean }
+  ) => Promise<ConfirmLeaveChoice>
 }
 
 const DialogContext = createContext<DialogContextType | undefined>(undefined)
@@ -16,73 +36,204 @@ export function useDialog() {
 }
 
 export function DialogProvider({ children }: { children: React.ReactNode }) {
+  const { t } = useTranslation()
+  const titleId = useId()
+  const messageId = useId()
+  const confirmRef = useRef<HTMLButtonElement>(null)
+
   const [isOpen, setIsOpen] = useState(false)
   const [title, setTitle] = useState('')
   const [message, setMessage] = useState('')
-  const [type, setType] = useState<'alert' | 'confirm'>('alert')
+  const [type, setType] = useState<'alert' | 'confirm' | 'confirm-leave'>('alert')
   const [confirmLabel, setConfirmLabel] = useState('OK')
   const [cancelLabel, setCancelLabel] = useState('Cancel')
+  const [saveLabel, setSaveLabel] = useState('')
+  const [discardLabel, setDiscardLabel] = useState('')
+  const [showSaveOption, setShowSaveOption] = useState(false)
 
-  const resolveRef = useRef<((val: any) => void) | null>(null)
+  const alertResolveRef = useRef<(() => void) | null>(null)
+  const confirmResolveRef = useRef<((val: boolean) => void) | null>(null)
+  const confirmLeaveResolveRef = useRef<((val: ConfirmLeaveChoice) => void) | null>(null)
 
-  const showAlert = (msg: string, headerTitle?: string, btnText?: string): Promise<void> => {
+  const showAlert = useCallback((msg: string, headerTitle?: string, btnText?: string): Promise<void> => {
     setMessage(msg)
     setTitle(headerTitle || '')
     setType('alert')
-    setConfirmLabel(btnText || 'OK')
+    setConfirmLabel(btnText || t('dialog.ok'))
     setIsOpen(true)
 
     return new Promise<void>((resolve) => {
-      resolveRef.current = resolve
+      alertResolveRef.current = resolve
     })
-  }
+  }, [t])
 
-  const showConfirm = (msg: string, headerTitle?: string, btnConfirm?: string, btnCancel?: string): Promise<boolean> => {
+  const showConfirm = useCallback((
+    msg: string,
+    headerTitle?: string,
+    btnConfirm?: string,
+    btnCancel?: string
+  ): Promise<boolean> => {
     setMessage(msg)
     setTitle(headerTitle || '')
     setType('confirm')
-    setConfirmLabel(btnConfirm || 'Yes')
-    setCancelLabel(btnCancel || 'No')
+    setConfirmLabel(btnConfirm || t('dialog.yes'))
+    setCancelLabel(btnCancel || t('dialog.no'))
     setIsOpen(true)
 
     return new Promise<boolean>((resolve) => {
-      resolveRef.current = resolve
+      confirmResolveRef.current = resolve
     })
-  }
+  }, [t])
 
-  const handleConfirm = () => {
-    setIsOpen(false)
-    if (resolveRef.current) {
-      resolveRef.current(type === 'confirm' ? true : undefined)
-      resolveRef.current = null
-    }
-  }
+  const showConfirmLeave = useCallback((
+    msg: string,
+    headerTitle?: string,
+    btnStay?: string,
+    btnSave?: string,
+    btnDiscard?: string,
+    options?: { showSave?: boolean }
+  ): Promise<ConfirmLeaveChoice> => {
+    setMessage(msg)
+    setTitle(headerTitle || '')
+    setType('confirm-leave')
+    setCancelLabel(btnStay || t('common.unsaved_changes_stay'))
+    setSaveLabel(btnSave || t('common.unsaved_changes_save_leave'))
+    setDiscardLabel(btnDiscard || t('common.unsaved_changes_discard'))
+    setShowSaveOption(options?.showSave !== false)
+    setIsOpen(true)
 
-  const handleCancel = () => {
+    return new Promise<ConfirmLeaveChoice>((resolve) => {
+      confirmLeaveResolveRef.current = resolve
+    })
+  }, [t])
+
+  const closeConfirmLeave = useCallback((choice: ConfirmLeaveChoice) => {
     setIsOpen(false)
-    if (resolveRef.current) {
-      resolveRef.current(false)
-      resolveRef.current = null
+    if (confirmLeaveResolveRef.current) {
+      confirmLeaveResolveRef.current(choice)
+      confirmLeaveResolveRef.current = null
     }
-  }
+  }, [])
+
+  const handleConfirm = useCallback(() => {
+    setIsOpen(false)
+    if (type === 'confirm' && confirmResolveRef.current) {
+      confirmResolveRef.current(true)
+      confirmResolveRef.current = null
+    } else if (alertResolveRef.current) {
+      alertResolveRef.current()
+      alertResolveRef.current = null
+    }
+  }, [type])
+
+  const handleCancel = useCallback(() => {
+    if (type === 'confirm-leave') {
+      closeConfirmLeave('stay')
+      return
+    }
+    setIsOpen(false)
+    if (confirmResolveRef.current) {
+      confirmResolveRef.current(false)
+      confirmResolveRef.current = null
+    }
+  }, [type, closeConfirmLeave])
+
+  useEffect(() => {
+    if (!isOpen) return
+    confirmRef.current?.focus()
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        if (type === 'confirm' || type === 'confirm-leave') handleCancel()
+        else handleConfirm()
+      }
+    }
+    window.addEventListener('keydown', onKeyDown)
+    return () => window.removeEventListener('keydown', onKeyDown)
+  }, [isOpen, type, handleCancel, handleConfirm])
+
+  const contextValue = useMemo(
+    () => ({ showAlert, showConfirm, showConfirmLeave }),
+    [showAlert, showConfirm, showConfirmLeave]
+  )
 
   return (
-    <DialogContext.Provider value={{ showAlert, showConfirm }}>
+    <DialogContext.Provider value={contextValue}>
       {children}
       {isOpen && (
-        <div className="custom-dialog-overlay" onClick={type === 'alert' ? handleConfirm : undefined}>
-          <div className="custom-dialog-card glass scale-in" onClick={(e) => e.stopPropagation()}>
-            {title && <h3 className="custom-dialog-title">{title}</h3>}
-            <p className="custom-dialog-message">{message}</p>
+        <div
+          className="custom-dialog-overlay"
+          onClick={type === 'confirm' || type === 'confirm-leave' ? handleCancel : handleConfirm}
+        >
+          <div
+            className="custom-dialog-card glass scale-in"
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={title ? titleId : undefined}
+            aria-describedby={messageId}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {title && (
+              <h3 id={titleId} className="custom-dialog-title">
+                {title}
+              </h3>
+            )}
+            <p id={messageId} className="custom-dialog-message">
+              {message}
+            </p>
             <div className="custom-dialog-actions">
-              {type === 'confirm' && (
-                <button type="button" className="btn secondary" onClick={handleCancel} style={{ width: 'auto', padding: '8px 20px', margin: 0 }}>
-                  {cancelLabel}
-                </button>
+              {type === 'confirm-leave' ? (
+                <>
+                  <button
+                    ref={confirmRef}
+                    type="button"
+                    className="btn secondary"
+                    onClick={handleCancel}
+                    style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                  >
+                    {cancelLabel}
+                  </button>
+                  {showSaveOption && (
+                    <button
+                      type="button"
+                      className="btn primary"
+                      onClick={() => closeConfirmLeave('save')}
+                      style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                    >
+                      {saveLabel}
+                    </button>
+                  )}
+                  <button
+                    type="button"
+                    className="btn danger"
+                    onClick={() => closeConfirmLeave('discard')}
+                    style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                  >
+                    {discardLabel}
+                  </button>
+                </>
+              ) : (
+                <>
+                  {type === 'confirm' && (
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={handleCancel}
+                      style={{ width: 'auto', padding: '8px 20px', margin: 0 }}
+                    >
+                      {cancelLabel}
+                    </button>
+                  )}
+                  <button
+                    ref={confirmRef}
+                    type="button"
+                    className="btn primary"
+                    onClick={handleConfirm}
+                    style={{ width: 'auto', minWidth: '80px', padding: '8px 20px', margin: 0 }}
+                  >
+                    {confirmLabel}
+                  </button>
+                </>
               )}
-              <button type="button" className="btn primary" onClick={handleConfirm} style={{ width: 'auto', minWidth: '80px', padding: '8px 20px', margin: 0 }}>
-                {confirmLabel}
-              </button>
             </div>
           </div>
         </div>

client/src/components/NmeaImportWizard.tsx

@@ -0,0 +1,333 @@
+import { useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
+import { useTranslation } from 'react-i18next'
+import { FileText, X } from 'lucide-react'
+import type { LogEventPayload } from '../utils/logEntryPayload.js'
+import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
+import { parseNmeaFile, nmeaPointsToWaypoints } from '../services/nmea/nmeaParse.js'
+import { filterPointsForDate } from '../services/nmea/nmeaTimeSeries.js'
+import { generateNmeaJournalCandidates } from '../services/nmea/nmeaJournalGenerator.js'
+import type { NmeaImportMode, NmeaParseResult } from '../services/nmea/nmeaTypes.js'
+import { saveNmeaArchive, recordNmeaFileImport, type NmeaArchiveRecord } from '../services/nmeaArchive.js'
+import { nmeaFileCrc32 } from '../utils/crc32.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import type { TrackWaypoint } from '../services/trackUpload.js'
+
+interface NmeaImportWizardProps {
+  open: boolean
+  onClose: () => void
+  logbookId: string
+  entryId: string
+  entryDate: string
+  nmeaArchive: NmeaArchiveRecord | null
+  onImport: (events: LogEventPayload[], waypoints?: TrackWaypoint[]) => void
+}
+
+type WizardStep = 'config' | 'preview' | 'archive'
+
+export default function NmeaImportWizard({
+  open,
+  onClose,
+  logbookId,
+  entryId,
+  entryDate,
+  nmeaArchive,
+  onImport
+}: NmeaImportWizardProps) {
+  const { t } = useTranslation()
+  const [step, setStep] = useState<WizardStep>('config')
+  const [parseResult, setParseResult] = useState<NmeaParseResult | null>(null)
+  const [mode, setMode] = useState<NmeaImportMode>('both')
+  const [intervalMinutes, setIntervalMinutes] = useState(60)
+  const [importTrack, setImportTrack] = useState(true)
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
+  const [error, setError] = useState<string | null>(null)
+  const [pendingRaw, setPendingRaw] = useState<{ filename: string; text: string } | null>(null)
+  const [duplicateFile, setDuplicateFile] = useState(false)
+
+  const filteredPoints = useMemo(() => {
+    if (!parseResult) return []
+    return filterPointsForDate(parseResult.points, entryDate)
+  }, [parseResult, entryDate])
+
+  const candidates = useMemo(() => {
+    if (!parseResult || filteredPoints.length === 0) return []
+    return generateNmeaJournalCandidates({
+      points: filteredPoints,
+      mode,
+      intervalMinutes,
+      t
+    }).candidates
+  }, [parseResult, filteredPoints, mode, intervalMinutes, t])
+
+  const reset = () => {
+    setStep('config')
+    setParseResult(null)
+    setMode('both')
+    setIntervalMinutes(60)
+    setImportTrack(true)
+    setSelectedIds(new Set())
+    setError(null)
+    setDuplicateFile(false)
+    setPendingRaw(null)
+  }
+
+  const handleClose = () => {
+    reset()
+    onClose()
+  }
+
+  const handleFile = (file: File) => {
+    setError(null)
+    setDuplicateFile(false)
+    const reader = new FileReader()
+    reader.onload = () => {
+      try {
+        const text = String(reader.result ?? '')
+        const crc32 = nmeaFileCrc32(text)
+        const alreadyImported = nmeaArchive?.importedFiles.some((item) => item.crc32 === crc32) ?? false
+        setDuplicateFile(alreadyImported)
+        const result = parseNmeaFile(text, file.name)
+        if (result.points.length === 0) {
+          setError(t('logs.nmea_error_no_samples'))
+          return
+        }
+        setParseResult(result)
+        setPendingRaw({ filename: file.name, text })
+        const generated = generateNmeaJournalCandidates({
+          points: filterPointsForDate(result.points, entryDate),
+          mode,
+          intervalMinutes,
+          t
+        }).candidates
+        setSelectedIds(new Set(generated.map((c) => c.id)))
+        trackPlausibleEvent(PlausibleEvents.NMEA_UPLOADED, {
+          duplicate: alreadyImported,
+          lines: result.stats.parsedLines,
+          candidates: generated.length,
+          has_position: !result.warnings.includes('no_position')
+        })
+      } catch (err) {
+        setError(err instanceof Error ? err.message : t('logs.nmea_error_parse'))
+      }
+    }
+    reader.onerror = () => setError(t('logs.nmea_error_read'))
+    reader.readAsText(file)
+  }
+
+  const toggleAll = (checked: boolean) => {
+    setSelectedIds(checked ? new Set(candidates.map((c) => c.id)) : new Set())
+  }
+
+  const toggleOne = (id: string) => {
+    setSelectedIds((prev) => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const goPreview = () => {
+    if (!parseResult) {
+      setError(t('logs.nmea_error_no_file'))
+      return
+    }
+    const generated = generateNmeaJournalCandidates({
+      points: filteredPoints,
+      mode,
+      intervalMinutes,
+      t
+    }).candidates
+    setSelectedIds(new Set(generated.map((c) => c.id)))
+    setStep('preview')
+  }
+
+  const applyImport = async () => {
+    const picked = candidates.filter((c) => selectedIds.has(c.id)).map((c) => c.event)
+    if (picked.length === 0) {
+      setError(t('logs.nmea_error_no_selection'))
+      return
+    }
+    const waypoints = importTrack ? nmeaPointsToWaypoints(filteredPoints) : undefined
+    onImport(sortLogEventsByTime(picked), waypoints)
+    if (pendingRaw) {
+      try {
+        await recordNmeaFileImport(logbookId, entryId, pendingRaw.filename, pendingRaw.text)
+      } catch (err) {
+        console.warn('NMEA import CRC record failed:', err)
+      }
+    }
+    trackPlausibleEvent(PlausibleEvents.NMEA_IMPORTED, {
+      mode,
+      events: picked.length,
+      track: importTrack && (waypoints?.length ?? 0) > 0
+    })
+    setStep('archive')
+  }
+
+  const finishArchive = async (archive: boolean) => {
+    try {
+      if (archive && pendingRaw) {
+        await saveNmeaArchive(logbookId, entryId, pendingRaw.filename, pendingRaw.text)
+      }
+    } catch (err) {
+      console.warn('NMEA archive save failed:', err)
+    }
+    handleClose()
+  }
+
+  useEffect(() => {
+    if (!open) return
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') handleClose()
+    }
+    window.addEventListener('keydown', onKeyDown)
+    const prevOverflow = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+      document.body.style.overflow = prevOverflow
+    }
+  }, [open])
+
+  if (!open) return null
+
+  return createPortal(
+    <div className="disclaimer-modal-overlay" onClick={handleClose}>
+      <div className="disclaimer-modal-panel" onClick={(e) => e.stopPropagation()}>
+        <div className="auth-card glass registration-disclaimer registration-disclaimer--modal feedback-modal">
+          <button
+            type="button"
+            className="registration-disclaimer__close feedback-modal__close"
+            onClick={handleClose}
+            aria-label={t('logs.nmea_cancel')}
+          >
+            <X size={18} />
+          </button>
+
+          <div className="auth-header">
+            <FileText className="auth-icon accent" size={40} />
+            <h2>{t('logs.nmea_import_title')}</h2>
+          </div>
+
+          {error && <div className="track-error-msg">{error}</div>}
+
+          {duplicateFile && (
+            <div className="nmea-import-warning" role="status">
+              {t('logs.nmea_warn_duplicate_file')}
+            </div>
+          )}
+
+          {step === 'config' && (
+            <>
+              <p className="registration-disclaimer__intro">{t('logs.nmea_import_intro')}</p>
+              <label className="feedback-form__field">
+                <span>{t('logs.nmea_file_label')}</span>
+                <input
+                  type="file"
+                  accept=".nmea,.log,.txt"
+                  onChange={(e) => {
+                    const file = e.target.files?.[0]
+                    if (file) handleFile(file)
+                  }}
+                />
+              </label>
+
+              {parseResult && (
+                <div className="nmea-import-summary">
+                  <p>{t('logs.nmea_stats', {
+                    lines: parseResult.stats.parsedLines,
+                    types: parseResult.stats.sentenceTypes.join(', ')
+                  })}</p>
+                  {parseResult.warnings.includes('no_position') && (
+                    <p>{t('logs.nmea_warn_no_position')}</p>
+                  )}
+                </div>
+              )}
+
+              <fieldset className="nmea-import-mode">
+                <legend>{t('logs.nmea_mode_label')}</legend>
+                <label><input type="radio" name="nmea-mode" checked={mode === 'interval'} onChange={() => setMode('interval')} /> {t('logs.nmea_mode_interval')}</label>
+                <label><input type="radio" name="nmea-mode" checked={mode === 'change'} onChange={() => setMode('change')} /> {t('logs.nmea_mode_change')}</label>
+                <label><input type="radio" name="nmea-mode" checked={mode === 'both'} onChange={() => setMode('both')} /> {t('logs.nmea_mode_both')}</label>
+              </fieldset>
+
+              {(mode === 'interval' || mode === 'both') && (
+                <label className="feedback-form__field">
+                  <span>{t('logs.nmea_interval_label')}</span>
+                  <select value={intervalMinutes} onChange={(e) => setIntervalMinutes(Number(e.target.value))}>
+                    <option value={30}>30 min</option>
+                    <option value={60}>60 min</option>
+                    <option value={90}>90 min</option>
+                    <option value={120}>120 min</option>
+                  </select>
+                </label>
+              )}
+
+              <label className="nmea-import-checkbox">
+                <input type="checkbox" checked={importTrack} onChange={(e) => setImportTrack(e.target.checked)} />
+                {t('logs.nmea_import_track')}
+              </label>
+
+              <div className="auth-actions feedback-form__actions">
+                <button type="button" className="btn secondary" onClick={handleClose}>{t('logs.nmea_cancel')}</button>
+                <button type="button" className="btn primary" onClick={goPreview} disabled={!parseResult}>
+                  {t('logs.nmea_preview')}
+                </button>
+              </div>
+            </>
+          )}
+
+          {step === 'preview' && (
+            <>
+              <p>{t('logs.nmea_preview_hint', { count: candidates.length })}</p>
+              <div className="nmea-preview-actions">
+                <button type="button" className="btn secondary" onClick={() => toggleAll(true)}>{t('logs.nmea_select_all')}</button>
+                <button type="button" className="btn secondary" onClick={() => toggleAll(false)}>{t('logs.nmea_select_none')}</button>
+              </div>
+              <div className="nmea-preview-list">
+                {candidates.map((c) => (
+                  <label key={c.id} className="nmea-preview-row">
+                    <input
+                      type="checkbox"
+                      className="nmea-preview-row__check"
+                      checked={selectedIds.has(c.id)}
+                      onChange={() => toggleOne(c.id)}
+                    />
+                    <div className="nmea-preview-row__body">
+                      <div className="nmea-preview-row__meta">
+                        <span className="nmea-preview-time">{c.event.time}</span>
+                        <span className="nmea-preview-source">{t(`logs.nmea_source_${c.source}`)}</span>
+                      </div>
+                      <span className="nmea-preview-remarks">{c.event.remarks || c.event.mgk || '—'}</span>
+                    </div>
+                  </label>
+                ))}
+              </div>
+              <div className="auth-actions feedback-form__actions">
+                <button type="button" className="btn secondary" onClick={() => setStep('config')}>{t('logs.nmea_back')}</button>
+                <button type="button" className="btn primary" onClick={applyImport}>{t('logs.nmea_apply')}</button>
+              </div>
+            </>
+          )}
+
+          {step === 'archive' && (
+            <>
+              <p>{t('logs.nmea_archive_question')}</p>
+              <div className="auth-actions feedback-form__actions">
+                <button type="button" className="btn secondary" onClick={() => finishArchive(false)}>
+                  {t('logs.nmea_archive_discard')}
+                </button>
+                <button type="button" className="btn primary" onClick={() => finishArchive(true)}>
+                  {t('logs.nmea_archive_keep')}
+                </button>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}

client/src/components/PasskeySignButton.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Fingerprint, Loader2, AlertTriangle } from 'lucide-react'
 import type { PasskeySignature } from '../types/signatures.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 interface PasskeySignButtonProps {
   label: string
@@ -42,9 +43,7 @@ export default function PasskeySignButton({
     }
   }
 
-  const formattedDate = signature
-    ? new Date(signature.signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
-    : ''
+  const formattedDate = signature ? formatAppDateTime(signature.signedAt, i18n.language) : ''
 
   return (
     <div className="passkey-sign-block">

client/src/components/PersonPoolForm.tsx

@@ -0,0 +1,313 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Users, User, Plus, Trash2, Edit2, X, Camera, Save } from 'lucide-react'
+import { useDialog } from './ModalDialog.tsx'
+import { resizeImageFile } from '../utils/resizeImageFile.js'
+import type { PersonData, PersonRole } from '../types/person.js'
+import { MAX_POOL_CREW_MEMBERS } from '../types/person.js'
+import {
+  loadPersonPool,
+  savePerson,
+  deletePerson,
+  filterSkippers,
+  filterCrew,
+  type DecryptedPerson
+} from '../services/personPool.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+const emptyPerson = (role: PersonRole): PersonData => ({
+  name: '',
+  address: '',
+  birthDate: '',
+  phone: '',
+  nationality: '',
+  passportNumber: '',
+  bloodType: '',
+  allergies: '',
+  diseases: '',
+  role,
+  photo: null
+})
+
+export default function PersonPoolForm() {
+  const { t } = useTranslation()
+  const { showConfirm } = useDialog()
+  const [people, setPeople] = useState<DecryptedPerson[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [formRole, setFormRole] = useState<PersonRole>('crew')
+  const [form, setForm] = useState<PersonData>(emptyPerson('crew'))
+  const [saving, setSaving] = useState(false)
+  const [photoError, setPhotoError] = useState<string | null>(null)
+  const fileRef = React.useRef<HTMLInputElement>(null)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setPeople(await loadPersonPool())
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void reload()
+  }, [reload])
+
+  const openAdd = (role: PersonRole) => {
+    setEditingId(null)
+    setFormRole(role)
+    setForm(emptyPerson(role))
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const openEdit = (person: DecryptedPerson) => {
+    setEditingId(person.payloadId)
+    setFormRole(person.data.role)
+    setForm({ ...person.data })
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!form.name.trim()) return
+    setSaving(true)
+    setError(null)
+    try {
+      const id = editingId ?? window.crypto.randomUUID()
+      await savePerson(id, { ...form, role: formRole }, !editingId)
+      setShowForm(false)
+      trackPlausibleEvent(PlausibleEvents.CREW_SAVED, { role: formRole, context: 'person_pool' })
+      await reload()
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'MAX_CREW') {
+        setError(t('crew.max_crew'))
+      } else {
+        setError(err instanceof Error ? err.message : 'Failed to save')
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (
+      !(await showConfirm(
+        t('person_pool.delete_confirm'),
+        t('person_pool.title'),
+        t('logs.confirm_yes'),
+        t('logs.confirm_no')
+      ))
+    ) {
+      return
+    }
+    try {
+      await deletePerson(id)
+      await reload()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete')
+    }
+  }
+
+  const skippers = filterSkippers(people)
+  const crewList = filterCrew(people)
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Users className="header-logo spin" size={48} />
+        <p>{t('person_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  const renderCard = (person: DecryptedPerson) => (
+    <div key={person.payloadId} className="crew-member-card glass">
+      <div className="crew-card-header">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+          {person.data.photo ? (
+            <img src={person.data.photo} alt="" className="crew-card-avatar" />
+          ) : (
+            <div className="crew-card-avatar-placeholder">
+              <User size={18} />
+            </div>
+          )}
+          <h4>{person.data.name}</h4>
+        </div>
+        <div className="card-actions">
+          <button type="button" className="btn-icon" onClick={() => openEdit(person)} title="Edit">
+            <Edit2 size={14} />
+          </button>
+          <button
+            type="button"
+            className="btn-icon logout"
+            onClick={() => void handleDelete(person.payloadId)}
+            title="Delete"
+          >
+            <Trash2 size={14} />
+          </button>
+        </div>
+      </div>
+      {person.data.phone && (
+        <p className="help-text">
+          <strong>{t('crew.phone')}:</strong> {person.data.phone}
+        </p>
+      )}
+    </div>
+  )
+
+  return (
+    <section className="form-card" data-tour="profile-crew-pool">
+      <div className="form-header">
+        <Users size={24} className="form-icon" />
+        <h2>{t('person_pool.title')}</h2>
+      </div>
+      <p className="help-text mb-4">{t('person_pool.subtitle')}</p>
+      {error && <div className="auth-error mb-4">{error}</div>}
+
+      <div className="section-title-bar mb-4">
+        <h3>{t('person_pool.skippers_section')}</h3>
+        {!showForm && (
+          <button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={() => openAdd('skipper')}>
+            <Plus size={16} />
+            {t('person_pool.add_skipper')}
+          </button>
+        )}
+      </div>
+      {skippers.length === 0 ? (
+        <p className="help-text mb-4">{t('person_pool.no_skippers')}</p>
+      ) : (
+        <div className="crew-grid mb-6">{skippers.map(renderCard)}</div>
+      )}
+
+      <div className="section-title-bar mb-4">
+        <h3>{t('person_pool.crew_section')}</h3>
+        {!showForm && crewList.length < MAX_POOL_CREW_MEMBERS && (
+          <button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={() => openAdd('crew')}>
+            <Plus size={16} />
+            {t('person_pool.add_crew')}
+          </button>
+        )}
+      </div>
+      {crewList.length === 0 ? (
+        <p className="help-text">{t('person_pool.no_crew')}</p>
+      ) : (
+        <div className="crew-grid">{crewList.map(renderCard)}</div>
+      )}
+
+      {showForm && (
+        <form onSubmit={(e) => void handleSave(e)} className="member-editor-card glass mt-6">
+          <div className="editor-header mb-4">
+            <h3>
+              {editingId
+                ? formRole === 'skipper'
+                  ? t('person_pool.edit_skipper')
+                  : t('crew.edit_crew')
+                : formRole === 'skipper'
+                  ? t('person_pool.add_skipper')
+                  : t('crew.add_crew')}
+            </h3>
+            <button type="button" className="btn-icon" onClick={() => setShowForm(false)}>
+              <X size={16} />
+            </button>
+          </div>
+          <div className="form-grid">
+            <div className="vessel-photo-wrapper">
+              <div className="vessel-photo-preview" onClick={() => fileRef.current?.click()}>
+                {form.photo ? (
+                  <img src={form.photo} alt="" className="vessel-photo" />
+                ) : (
+                  <div className="vessel-photo-placeholder">
+                    <User size={48} />
+                  </div>
+                )}
+                <div className="vessel-photo-overlay">
+                  <Camera size={24} />
+                </div>
+              </div>
+              <input
+                ref={fileRef}
+                type="file"
+                accept="image/*"
+                style={{ display: 'none' }}
+                onChange={(e) => {
+                  const file = e.target.files?.[0]
+                  if (!file) return
+                  void resizeImageFile(file)
+                    .then((photo) => setForm((f) => ({ ...f, photo })))
+                    .catch((err: unknown) => {
+                      setPhotoError(err instanceof Error ? err.message : 'Image error')
+                    })
+                }}
+              />
+              {photoError && <div className="auth-error mt-2">{photoError}</div>}
+            </div>
+            <div className="input-group">
+              <label>{t('crew.name')} *</label>
+              <input
+                className="input-text"
+                value={form.name}
+                onChange={(e) => setForm((f) => ({ ...f, name: e.target.value }))}
+                required
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.address')}</label>
+              <input
+                className="input-text"
+                value={form.address}
+                onChange={(e) => setForm((f) => ({ ...f, address: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.birthdate')}</label>
+              <input
+                type="date"
+                className="input-text"
+                value={form.birthDate}
+                onChange={(e) => setForm((f) => ({ ...f, birthDate: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.phone')}</label>
+              <input
+                className="input-text"
+                value={form.phone}
+                onChange={(e) => setForm((f) => ({ ...f, phone: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.nationality')}</label>
+              <input
+                className="input-text"
+                value={form.nationality}
+                onChange={(e) => setForm((f) => ({ ...f, nationality: e.target.value }))}
+              />
+            </div>
+            <div className="input-group">
+              <label>{t('crew.passport')}</label>
+              <input
+                className="input-text"
+                value={form.passportNumber}
+                onChange={(e) => setForm((f) => ({ ...f, passportNumber: e.target.value }))}
+              />
+            </div>
+          </div>
+          <div className="editor-actions mt-4">
+            <button type="submit" className="btn primary" disabled={saving || !form.name.trim()}>
+              <Save size={18} />
+              {t('crew.save_member')}
+            </button>
+          </div>
+        </form>
+      )}
+    </section>
+  )
+}

client/src/components/PhotoCapture.tsx

@@ -3,9 +3,9 @@ import { useTranslation } from 'react-i18next'
 import { db } from '../services/db.js'
 import { getActiveMasterKey } from '../services/auth.js'
 import { getLogbookKey } from '../services/logbookKeys.js'
-import { encryptJson, decryptJson } from '../services/crypto.js'
-import { syncLogbook } from '../services/sync.js'
-import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { decryptJson } from '../services/crypto.js'
+import { saveEntryPhoto, deleteEntryPhoto } from '../services/photoAttachments.js'
+import { fileToCompressedJpegDataUrl } from '../utils/imageCompress.js'
 import { useLiveQuery } from 'dexie-react-hooks'
 import { useDialog } from './ModalDialog.tsx'
 import { Camera, Trash2 } from 'lucide-react'
@@ -90,109 +90,30 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
     setUploading(true)
     setError(null)
 
-    const reader = new FileReader()
-    reader.onload = (event) => {
-      const img = new Image()
-      img.onload = async () => {
-        try {
-          const canvas = document.createElement('canvas')
-          const ctx = canvas.getContext('2d')
-          if (!ctx) throw new Error('Could not get canvas context')
-
-          let width = img.width
-          let height = img.height
-          const MAX_WIDTH = 1280
-          const MAX_HEIGHT = 720
-
-          // Calculate resizing conserving aspect ratio
-          if (width > MAX_WIDTH || height > MAX_HEIGHT) {
-            const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)
-            width = Math.round(width * ratio)
-            height = Math.round(height * ratio)
-          }
-
-          canvas.width = width
-          canvas.height = height
-          ctx.drawImage(img, 0, 0, width, height)
-
-          // Compress to JPEG, 70% quality
-          const compressedBase64 = canvas.toDataURL('image/jpeg', 0.7)
-
-          // Encrypt
-          const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
-          if (!masterKey) throw new Error('Encryption key not found. Please log in.')
-
-          const photoId = window.crypto.randomUUID()
-          const photoPayload = {
-            image: compressedBase64,
-            caption: caption.trim()
-          }
-
-          const encrypted = await encryptJson(photoPayload, masterKey)
-          const now = new Date().toISOString()
-
-          // Store locally
-          await db.photos.put({
-            payloadId: photoId,
-            entryId,
-            logbookId,
-            encryptedData: encrypted.ciphertext,
-            iv: encrypted.iv,
-            tag: encrypted.tag,
-            caption: '', // stored encrypted inside payload
-            updatedAt: now
-          })
-
-          // Queue for background sync
-          await db.syncQueue.put({
-            action: 'create',
-            type: 'photo',
-            payloadId: photoId,
-            logbookId,
-            data: JSON.stringify({
-              encryptedData: encrypted.ciphertext,
-              iv: encrypted.iv,
-              tag: encrypted.tag,
-              entryId
-            }),
-            updatedAt: now
-          })
-
-          setCaption('')
-          if (fileInputRef.current) fileInputRef.current.value = ''
-          trackPlausibleEvent(PlausibleEvents.PHOTO_UPLOADED, { context: 'logbook' })
-
-          syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
-        } catch (err: any) {
-          console.error('Failed to process image:', err)
-          setError(err.message || 'Failed to process image')
-        } finally {
-          setUploading(false)
-        }
-      }
-      img.src = event.target?.result as string
+    try {
+      const compressedBase64 = await fileToCompressedJpegDataUrl(file)
+      await saveEntryPhoto({
+        logbookId,
+        entryId,
+        imageDataUrl: compressedBase64,
+        caption: caption.trim(),
+        analyticsContext: 'logbook'
+      })
+      setCaption('')
+      if (fileInputRef.current) fileInputRef.current.value = ''
+    } catch (err: unknown) {
+      console.error('Failed to process image:', err)
+      setError(err instanceof Error ? err.message : 'Failed to process image')
+    } finally {
+      setUploading(false)
     }
-    reader.readAsDataURL(file)
   }
 
   const handleDelete = async (photoId: string) => {
     if (await showConfirm(t('logs.photo_delete_confirm'), t('logs.photos_title'), t('logs.confirm_yes'), t('logs.confirm_no'))) {
       try {
-        const now = new Date().toISOString()
-        
-        await db.photos.delete(photoId)
-        
-        await db.syncQueue.put({
-          action: 'delete',
-          type: 'photo',
-          payloadId: photoId,
-          logbookId,
-          data: '',
-          updatedAt: now
-        })
-
-        syncLogbook(logbookId).catch((err) => console.warn('Background sync failed:', err))
-      } catch (err: any) {
+        await deleteEntryPhoto(logbookId, photoId)
+      } catch (err: unknown) {
         console.error('Failed to delete photo:', err)
       }
     }
@@ -233,7 +154,6 @@ export default function PhotoCapture({ entryId, logbookId, readOnly = false, pre
             <input
               type="file"
               accept="image/*"
-              capture="environment"
               ref={fileInputRef}
               onChange={handleFileChange}
               style={{ display: 'none' }}

client/src/components/ProfileAccordionSection.tsx

@@ -0,0 +1,36 @@
+import { ChevronDown } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+interface ProfileAccordionSectionProps {
+  id: string
+  title: string
+  icon?: ReactNode
+  defaultOpen?: boolean
+  /** When set, forces the section open (e.g. during onboarding tour). */
+  forceOpen?: boolean
+  children: ReactNode
+}
+
+export default function ProfileAccordionSection({
+  id,
+  title,
+  icon,
+  defaultOpen = false,
+  forceOpen,
+  children
+}: ProfileAccordionSectionProps) {
+  const isOpen = forceOpen !== undefined ? forceOpen : defaultOpen
+
+  return (
+    <details className="profile-accordion" open={isOpen || undefined} data-section={id}>
+      <summary className="profile-accordion__summary">
+        <span className="profile-accordion__title">
+          {icon}
+          <span>{title}</span>
+        </span>
+        <ChevronDown size={20} className="profile-accordion__chevron" aria-hidden="true" />
+      </summary>
+      <div className="profile-accordion__body">{children}</div>
+    </details>
+  )
+}

client/src/components/ProfileHeaderButton.tsx

@@ -0,0 +1,25 @@
+import { useTranslation } from 'react-i18next'
+import { User } from 'lucide-react'
+
+interface ProfileHeaderButtonProps {
+  onClick: () => void
+}
+
+export default function ProfileHeaderButton({ onClick }: ProfileHeaderButtonProps) {
+  const { t } = useTranslation()
+  const username = localStorage.getItem('active_username') || 'Skipper'
+
+  return (
+    <button
+      type="button"
+      className="btn-icon skipper-badge"
+      onClick={onClick}
+      title={t('dashboard.open_profile', { name: username })}
+      aria-label={t('dashboard.open_profile', { name: username })}
+      data-tour="nav-profile"
+    >
+      <User size={18} aria-hidden="true" />
+      <span className="skipper-badge__name">{username}</span>
+    </button>
+  )
+}

client/src/components/PushNotificationSettings.tsx

@@ -0,0 +1,138 @@
+import { useCallback, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Bell, BellOff } from 'lucide-react'
+import {
+  disableCollaboratorChangePush,
+  enableCollaboratorChangePush,
+  fetchPushPrefs,
+  getNotificationPermission,
+  isPushSupported,
+  preloadPushService
+} from '../services/pushNotifications.js'
+import { isIosDevice, isRunningStandalone } from '../hooks/usePwaInstall.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { useDialog } from './ModalDialog.tsx'
+
+export default function PushNotificationSettings() {
+  const { t } = useTranslation()
+  const { showAlert } = useDialog()
+  const [enabled, setEnabled] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [toggling, setToggling] = useState(false)
+
+  const supported = isPushSupported()
+  const permission = getNotificationPermission()
+  const iosNeedsInstall = isIosDevice() && !isRunningStandalone()
+
+  const loadPrefs = useCallback(async () => {
+    if (!supported) {
+      setLoading(false)
+      return
+    }
+    void preloadPushService()
+    try {
+      const prefs = await fetchPushPrefs()
+      setEnabled(prefs.collaboratorChangesEnabled)
+    } catch (err) {
+      console.error('Failed to load push prefs:', err)
+    } finally {
+      setLoading(false)
+    }
+  }, [supported])
+
+  useEffect(() => {
+    void loadPrefs()
+  }, [loadPrefs])
+
+  const handleToggle = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const next = e.target.checked
+    setToggling(true)
+    try {
+      if (next) {
+        await enableCollaboratorChangePush()
+        setEnabled(true)
+        trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
+      } else {
+        await disableCollaboratorChangePush()
+        setEnabled(false)
+        trackPlausibleEvent(PlausibleEvents.PUSH_DISABLED)
+      }
+    } catch (err: unknown) {
+      console.error('Failed to toggle push notifications:', err)
+      const message = err instanceof Error ? `${err.name}: ${err.message}` : String(err)
+      showAlert(message)
+      void loadPrefs()
+    } finally {
+      setToggling(false)
+    }
+  }
+
+  if (!supported) {
+    return (
+      <div className="member-editor-card glass mt-4">
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+          <BellOff size={20} style={{ color: '#94a3b8' }} />
+          <h3 style={{ margin: 0, color: '#94a3b8', fontSize: '16px' }}>{t('profile.push_title')}</h3>
+        </div>
+        <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: 0 }}>
+          {t('profile.push_unsupported')}
+        </p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="member-editor-card glass mt-4">
+      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
+        <Bell size={20} style={{ color: 'var(--app-accent-light)' }} />
+        <h3 style={{ margin: 0, color: 'var(--app-accent-light)', fontSize: '16px' }}>
+          {t('profile.push_title')}
+        </h3>
+      </div>
+
+      <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
+        {t('profile.push_desc')}
+      </p>
+
+      {iosNeedsInstall && (
+        <p className="text-muted" style={{ fontSize: '13px', margin: '0 0 12px 0' }}>
+          {t('profile.push_ios_install_hint')}
+        </p>
+      )}
+
+      {permission === 'denied' && (
+        <p style={{ fontSize: '13px', color: '#f87171', margin: '0 0 12px 0' }}>
+          {t('profile.push_denied_hint')}
+        </p>
+      )}
+
+      <label
+        className="switch-label"
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          cursor: loading || toggling || iosNeedsInstall ? 'not-allowed' : 'pointer',
+          fontSize: '14px',
+          color: '#f1f5f9',
+          opacity: loading || iosNeedsInstall ? 0.6 : 1
+        }}
+      >
+        <input
+          type="checkbox"
+          checked={enabled}
+          onChange={handleToggle}
+          disabled={loading || toggling || iosNeedsInstall}
+          style={{ width: '18px', height: '18px', cursor: 'inherit' }}
+        />
+        <span>{t('profile.push_enable')}</span>
+      </label>
+
+      {enabled && permission === 'granted' && (
+        <p className="text-muted" style={{ fontSize: '12px', margin: '12px 0 0 0' }}>
+          {t('profile.push_active')}
+        </p>
+      )}
+    </div>
+  )
+}

client/src/components/ReadOnlyViewer.tsx

@@ -1,8 +1,16 @@
 import { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
+import { cycleAppLanguage, getNextLanguage, isGermanLocale } from '../utils/i18nLanguages.js'
 import { decryptJson } from '../services/crypto.js'
-import VesselForm from './VesselForm.tsx'
-import CrewForm from './CrewForm.tsx'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import LogbookVesselPicker from './LogbookVesselPicker.tsx'
+import LogbookCrewPicker from './LogbookCrewPicker.tsx'
+import type { LogbookVesselSelectionData } from '../types/vessel.js'
+import { emptyLogbookVesselSelection } from '../types/vessel.js'
+import type { LogbookCrewSelectionData } from '../types/person.js'
+import { emptyLogbookCrewSelection } from '../types/person.js'
+import { legacyCrewRecordsToLogbookSelection } from '../utils/personSnapshots.js'
+import type { PersonData } from '../types/person.js'
 import LogEntriesList from './LogEntriesList.tsx'
 import { Ship, Users, FileText, Lock, AlertCircle, Globe } from 'lucide-react'
 
@@ -29,7 +37,13 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
   // Logbook data states
   const [logbookTitle, setLogbookTitle] = useState('Logbook')
   const [yacht, setYacht] = useState<any>(null)
-  const [crews, setCrews] = useState<any[]>([])
+  const [logbookCrewSelection, setLogbookCrewSelection] = useState<LogbookCrewSelectionData>(
+    emptyLogbookCrewSelection()
+  )
+  const [logbookVesselSelection, setLogbookVesselSelection] = useState<LogbookVesselSelectionData>(
+    emptyLogbookVesselSelection()
+  )
+  const [legacyCrews, setLegacyCrews] = useState<any[]>([])
   const [entries, setEntries] = useState<any[]>([])
   const [photos, setPhotos] = useState<any[]>([])
   const [gpsTracks, setGpsTracks] = useState<any[]>([])
@@ -47,9 +61,9 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
       const res = await fetch(`/api/collaboration/share-pull?token=${token}`)
       if (!res.ok) {
         if (res.status === 410) {
-          throw new Error(i18n.language.startsWith('de') ? 'Dieser Freigabelink ist abgelaufen.' : 'This share link has expired.')
+          throw new Error(isGermanLocale(i18n.language) ? 'Dieser Freigabelink ist abgelaufen.' : 'This share link has expired.')
         }
-        throw new Error(i18n.language.startsWith('de') ? 'Fehler beim Laden des freigegebenen Logbuchs.' : 'Failed to fetch shared logbook data.')
+        throw new Error(isGermanLocale(i18n.language) ? 'Fehler beim Laden des freigegebenen Logbuchs.' : 'Failed to fetch shared logbook data.')
       }
 
       const data = await res.json()
@@ -69,18 +83,67 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
       }
       setYacht(decYacht)
 
-      // Decrypt Crews
-      const decCrews = []
-      if (data.crews) {
-        for (const c of data.crews) {
-          const dec = await decryptJson(c.encryptedData, c.iv, c.tag, keyBuffer)
-          decCrews.push({
-            payloadId: c.payloadId,
-            data: dec
+      if (data.logbookCrewSelection) {
+        const decSel = await decryptJson(
+          data.logbookCrewSelection.encryptedData,
+          data.logbookCrewSelection.iv,
+          data.logbookCrewSelection.tag,
+          keyBuffer
+        )
+        if (decSel) {
+          setLogbookCrewSelection({
+            activeSkipperId: decSel.activeSkipperId ?? null,
+            activeCrewIds: Array.isArray(decSel.activeCrewIds) ? decSel.activeCrewIds : [],
+            snapshotsById:
+              decSel.snapshotsById && typeof decSel.snapshotsById === 'object'
+                ? decSel.snapshotsById
+                : {}
           })
         }
       }
-      setCrews(decCrews)
+
+      if (data.logbookVesselSelection) {
+        const decVessel = await decryptJson(
+          data.logbookVesselSelection.encryptedData,
+          data.logbookVesselSelection.iv,
+          data.logbookVesselSelection.tag,
+          keyBuffer
+        )
+        if (decVessel) {
+          setLogbookVesselSelection({
+            activeVesselId: decVessel.activeVesselId ?? null,
+            vesselSnapshot: decVessel.vesselSnapshot ?? null
+          })
+        }
+      } else if (decYacht) {
+        const legacy = decYacht as Record<string, unknown>
+        setLogbookVesselSelection({
+          activeVesselId: 'legacy-yacht',
+          vesselSnapshot: {
+            id: 'legacy-yacht',
+            name: typeof legacy.name === 'string' ? legacy.name : '',
+            ...legacy
+          } as import('../types/vessel.js').VesselSnapshot
+        })
+      }
+
+      const decCrews: Array<{ payloadId: string; data: PersonData }> = []
+      if (data.crews) {
+        for (const c of data.crews) {
+          const dec = await decryptJson(c.encryptedData, c.iv, c.tag, keyBuffer)
+          if (dec) {
+            decCrews.push({
+              payloadId: c.payloadId,
+              data: dec as PersonData
+            })
+          }
+        }
+      }
+      setLegacyCrews(decCrews)
+
+      if (!data.logbookCrewSelection && decCrews.length > 0) {
+        setLogbookCrewSelection(legacyCrewRecordsToLogbookSelection(decCrews))
+      }
 
       // Decrypt Entries
       const decEntries = []
@@ -124,6 +187,7 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
         }
       }
       setGpsTracks(decGpsTracks)
+      trackPlausibleEvent(PlausibleEvents.PUBLIC_LINK_OPENED)
 
     } catch (err: any) {
       console.error(err)
@@ -134,15 +198,14 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
   }
 
   const toggleLanguage = () => {
-    const nextLang = i18n.language.startsWith('de') ? 'en' : 'de'
-    i18n.changeLanguage(nextLang)
+    cycleAppLanguage(i18n)
   }
 
   if (loading) {
     return (
       <div className="tab-placeholder" style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
         <Ship className="header-logo spin" size={48} />
-        <p>{i18n.language.startsWith('de') ? 'Lade freigegebenes Logbuch...' : 'Loading shared logbook...'}</p>
+        <p>{isGermanLocale(i18n.language) ? 'Lade freigegebenes Logbuch...' : 'Loading shared logbook...'}</p>
       </div>
     )
   }
@@ -151,10 +214,10 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
     return (
       <div style={{ height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', padding: '20px', textAlign: 'center' }}>
         <AlertCircle size={48} style={{ color: '#ef4444', marginBottom: '16px' }} />
-        <h2 style={{ color: '#f1f5f9', marginBottom: '8px' }}>{i18n.language.startsWith('de') ? 'Verbindungsfehler' : 'Access Error'}</h2>
+        <h2 style={{ color: '#f1f5f9', marginBottom: '8px' }}>{isGermanLocale(i18n.language) ? 'Verbindungsfehler' : 'Access Error'}</h2>
         <p style={{ color: '#94a3b8', maxWidth: '400px', marginBottom: '24px' }}>{error}</p>
         <button className="btn primary" onClick={loadData} style={{ width: 'auto' }}>
-          {i18n.language.startsWith('de') ? 'Erneut versuchen' : 'Retry'}
+          {isGermanLocale(i18n.language) ? 'Erneut versuchen' : 'Retry'}
         </button>
       </div>
     )
@@ -171,7 +234,7 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
             <h2>{logbookTitle}</h2>
             <p className="app-subtitle" style={{ color: '#10b981', display: 'flex', alignItems: 'center', gap: '4px' }}>
               <Lock size={12} />
-              <span>{i18n.language.startsWith('de') ? 'Schreibgeschützte Ansicht (Ende-zu-Ende verschlüsselt)' : 'Read-Only View (End-to-End Encrypted)'}</span>
+              <span>{isGermanLocale(i18n.language) ? 'Schreibgeschützte Ansicht (Ende-zu-Ende verschlüsselt)' : 'Read-Only View (End-to-End Encrypted)'}</span>
             </p>
           </div>
         </div>
@@ -179,7 +242,7 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
         <div className="header-actions">
           <button className="btn secondary" onClick={toggleLanguage} style={{ width: 'auto', padding: '6px 12px', fontSize: '13px' }}>
             <Globe size={14} style={{ marginRight: '4px' }} />
-            {i18n.language.startsWith('de') ? 'English' : 'Deutsch'}
+            {t(`languages.${getNextLanguage(i18n.language)}`)}
           </button>
         </div>
       </header>
@@ -224,18 +287,21 @@ export default function ReadOnlyViewer({ token, hexKey }: ReadOnlyViewerProps) {
           )}
 
           {activeTab === 'vessel' && (
-            <VesselForm
+            <LogbookVesselPicker
               logbookId="shared"
               readOnly={true}
-              preloadedData={yacht}
+              selectionOnly={true}
+              preloadedSelection={logbookVesselSelection}
             />
           )}
 
           {activeTab === 'crew' && (
-            <CrewForm
+            <LogbookCrewPicker
               logbookId="shared"
               readOnly={true}
-              preloadedData={crews}
+              selectionOnly={true}
+              preloadedPool={legacyCrews.length > 0 ? legacyCrews : undefined}
+              preloadedSelection={logbookCrewSelection}
             />
           )}
         </main>

client/src/components/RegistrationDisclaimer.tsx

@@ -28,19 +28,19 @@ export default function RegistrationDisclaimer({
       className={`auth-card glass registration-disclaimer${variant === 'view' ? ' registration-disclaimer--modal' : ''}`}
       role="document"
     >
+      {variant === 'view' && (
+        <button
+          type="button"
+          className="registration-disclaimer__close"
+          onClick={onDismiss}
+          aria-label={t('disclaimer.close')}
+        >
+          <X size={18} />
+        </button>
+      )}
       <div className="auth-header">
         <ScrollText className="auth-icon accent" size={48} />
         <h2>{t('disclaimer.title')}</h2>
-        {variant === 'view' && (
-          <button
-            type="button"
-            className="registration-disclaimer__close"
-            onClick={onDismiss}
-            aria-label={t('disclaimer.close')}
-          >
-            <X size={18} />
-          </button>
-        )}
       </div>
 
       <p className="registration-disclaimer__intro">{t('disclaimer.intro')}</p>

client/src/components/SettingsForm.tsx

@@ -1,17 +1,23 @@
 import React, { useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Settings as SettingsIcon, Save, Check, Users, Trash2, Copy, Link as LinkIcon, Compass } from 'lucide-react'
+import { Settings as SettingsIcon, Check, Users, Trash2, Copy, Link as LinkIcon } from 'lucide-react'
 import { ensureLogbookKey } from '../services/logbookKeys.js'
-import AccountDangerZone from './AccountDangerZone.tsx'
-import PwaInstallPrompt from './PwaInstallPrompt.tsx'
+import LogbookBackupPanel from './LogbookBackupPanel.tsx'
+import LinkQrCode from './LinkQrCode.tsx'
 import { useDialog } from './ModalDialog.tsx'
-import { notifyAppearanceChanged } from '../services/appearance.js'
-import ThemedSelect from './ThemedSelect.tsx'
-import { useAppTour } from '../context/AppTourContext.tsx'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+import { apiFetch } from '../services/api.js'
+import {
+  enableCollaboratorChangePush,
+  isCollaboratorPushActive,
+  isPushSupported,
+  preloadPushService
+} from '../services/pushNotifications.js'
+import { isIosDevice, isRunningStandalone } from '../hooks/usePwaInstall.js'
 
 interface SettingsFormProps {
   logbookId?: string | null
+  onLogbookRestored?: (logbookId: string, title: string) => void
 }
 
 interface Collaborator {
@@ -22,24 +28,16 @@ interface Collaborator {
   createdAt: string
 }
 
-// Convert ArrayBuffer to Hex String for URL fragment
 const bufferToHex = (buffer: ArrayBuffer): string => {
   return Array.from(new Uint8Array(buffer))
     .map(b => b.toString(16).padStart(2, '0'))
     .join('')
 }
 
-export default function SettingsForm({ logbookId }: SettingsFormProps) {
+export default function SettingsForm({ logbookId, onLogbookRestored }: SettingsFormProps) {
   const { t } = useTranslation()
   const { showConfirm, showAlert } = useDialog()
-  const { restartTour } = useAppTour()
-  const [apiKey, setApiKey] = useState(localStorage.getItem('owm_api_key') || '')
-  const [theme, setTheme] = useState(localStorage.getItem('active_theme') || 'auto')
-  const [colorScheme, setColorScheme] = useState(localStorage.getItem('active_color_scheme') || 'auto')
-  const [saving, setSaving] = useState(false)
-  const [success, setSuccess] = useState(false)
 
-  // Collaboration States
   const [collaborators, setCollaborators] = useState<Collaborator[]>([])
   const [isOwner, setIsOwner] = useState(true)
   const [inviteLink, setInviteLink] = useState('')
@@ -48,7 +46,6 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
   const [collabError, setCollabError] = useState<string | null>(null)
   const [loadingCollabs, setLoadingCollabs] = useState(false)
 
-  // Public Share Link States
   const [shareEnabled, setShareEnabled] = useState(false)
   const [shareLink, setShareLink] = useState('')
   const [shareCopied, setShareCopied] = useState(false)
@@ -59,20 +56,16 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
       loadCollaborators()
       loadShareLink()
     }
+    void preloadPushService()
   }, [logbookId])
 
   const loadShareLink = async () => {
     if (!logbookId) return
     setLoadingShareLink(true)
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return
 
     try {
-      const res = await fetch(`/api/collaboration/share-link?logbookId=${logbookId}`, {
-        headers: {
-          'X-User-Id': userId
-        }
-      })
+      const res = await apiFetch(`/api/collaboration/share-link?logbookId=${logbookId}`)
 
       if (res.ok) {
         const data = await res.json()
@@ -96,17 +89,12 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
   const handleToggleShare = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!logbookId) return
     const checked = e.target.checked
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return
 
     setLoadingShareLink(true)
     try {
-      const res = await fetch('/api/collaboration/share-link', {
+      const res = await apiFetch('/api/collaboration/share-link', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': userId
-        },
         body: JSON.stringify({ logbookId, enabled: checked })
       })
 
@@ -117,6 +105,7 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           const logbookKey = await ensureLogbookKey(logbookId)
           const hexKey = bufferToHex(logbookKey)
           setShareLink(`${window.location.origin}/share?token=${data.token}#key=${hexKey}`)
+          trackPlausibleEvent(PlausibleEvents.LOGBOOK_SHARED)
           showAlert('Public share link enabled!')
         } else {
           setShareEnabled(false)
@@ -126,9 +115,9 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
       } else {
         throw new Error('Failed to toggle public share link.')
       }
-    } catch (err: any) {
+    } catch (err: unknown) {
       console.error('Toggle share link failed:', err)
-      showAlert(err.message || 'Failed to update public share link.')
+      showAlert(err instanceof Error ? err.message : 'Failed to update public share link.')
     } finally {
       setLoadingShareLink(false)
     }
@@ -142,19 +131,13 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
     }
   }
 
-
   const loadCollaborators = async () => {
     setLoadingCollabs(true)
     setCollabError(null)
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return
 
     try {
-      const res = await fetch(`/api/collaboration/collaborators?logbookId=${logbookId}`, {
-        headers: {
-          'X-User-Id': userId
-        }
-      })
+      const res = await apiFetch(`/api/collaboration/collaborators?logbookId=${logbookId}`)
 
       if (res.status === 403) {
         setIsOwner(false)
@@ -177,24 +160,55 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
     }
   }
 
+  const promptPushAfterInviteCreated = async () => {
+    if (!isPushSupported()) return
+    if (await isCollaboratorPushActive()) return
+
+    const iosNeedsInstall = isIosDevice() && !isRunningStandalone()
+
+    if (iosNeedsInstall) {
+      await showAlert(
+        t('settings.invite_push_prompt_ios_message'),
+        t('settings.invite_push_prompt_title'),
+        t('settings.invite_push_prompt_later')
+      )
+      return
+    }
+
+    const enable = await showConfirm(
+      t('settings.invite_push_prompt_message'),
+      t('settings.invite_push_prompt_title'),
+      t('settings.invite_push_prompt_enable'),
+      t('settings.invite_push_prompt_later')
+    )
+
+    if (!enable) return
+
+    try {
+      await enableCollaboratorChangePush()
+      await showAlert(
+        t('settings.invite_push_prompt_success'),
+        t('settings.invite_push_prompt_title')
+      )
+      trackPlausibleEvent(PlausibleEvents.PUSH_ENABLED)
+    } catch (err: unknown) {
+      console.error('Failed to enable push after invite:', err)
+      const message = err instanceof Error ? `${err.name}: ${err.message}` : String(err)
+      await showAlert(message)
+    }
+  }
+
   const handleGenerateInvite = async () => {
     if (!logbookId) return
     setGeneratingInvite(true)
     setInviteLink('')
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return
 
     try {
-      // 1. Ensure logbook has an E2E key (upgrades legacy logbooks if needed)
       const logbookKey = await ensureLogbookKey(logbookId)
 
-      // 2. Create invite token on server
-      const res = await fetch('/api/collaboration/invite', {
+      const res = await apiFetch('/api/collaboration/invite', {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': userId
-        },
         body: JSON.stringify({ logbookId, role: 'WRITE' })
       })
 
@@ -203,16 +217,15 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
       }
 
       const invite = await res.json()
-      
-      // 3. Format link containing token (URL params) and key (URL hash anchor)
       const hexKey = bufferToHex(logbookKey)
       const link = `${window.location.origin}/invite?token=${invite.token}#key=${hexKey}`
-      
+
       setInviteLink(link)
       trackPlausibleEvent(PlausibleEvents.INVITE_GENERATED)
-    } catch (err: any) {
+      await promptPushAfterInviteCreated()
+    } catch (err: unknown) {
       console.error('Failed to generate invite:', err)
-      showAlert(err.message || 'Failed to generate invite link.')
+      showAlert(err instanceof Error ? err.message : 'Failed to generate invite link.')
     } finally {
       setGeneratingInvite(false)
     }
@@ -227,16 +240,12 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
   }
 
   const handleRevoke = async (collabId: string, collName: string) => {
-    const userId = localStorage.getItem('active_userid')
-    if (!userId) return
+    if (!localStorage.getItem('active_userid')) return
 
     if (await showConfirm(t('logs.revoke_confirm'), collName, t('logs.confirm_yes'), t('logs.confirm_no'))) {
       try {
-        const res = await fetch(`/api/collaboration/collaborators/${collabId}`, {
-          method: 'DELETE',
-          headers: {
-            'X-User-Id': userId
-          }
+        const res = await apiFetch(`/api/collaboration/collaborators/${collabId}`, {
+          method: 'DELETE'
         })
 
         if (res.ok) {
@@ -245,40 +254,26 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
         } else {
           throw new Error('Failed to revoke collaborator access.')
         }
-      } catch (err: any) {
+      } catch (err: unknown) {
         console.error('Revocation failed:', err)
-        showAlert(err.message || 'Failed to revoke access.')
+        showAlert(err instanceof Error ? err.message : 'Failed to revoke access.')
       }
     }
   }
 
-  const persistAppearance = (nextTheme: string, nextColorScheme: string) => {
-    localStorage.setItem('active_theme', nextTheme)
-    localStorage.setItem('active_color_scheme', nextColorScheme)
-    notifyAppearanceChanged()
-  }
-
-  const handleThemeChange = (nextTheme: string) => {
-    setTheme(nextTheme)
-    persistAppearance(nextTheme, colorScheme)
-  }
-
-  const handleColorSchemeChange = (nextColorScheme: string) => {
-    setColorScheme(nextColorScheme)
-    persistAppearance(theme, nextColorScheme)
-  }
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    setSaving(true)
-    setSuccess(false)
-    
-    localStorage.setItem('owm_api_key', apiKey.trim())
-    persistAppearance(theme, colorScheme)
-    
-    setSaving(false)
-    setSuccess(true)
-    setTimeout(() => setSuccess(false), 3000)
+  if (!logbookId) {
+    return (
+      <div className="form-card">
+        <div className="form-header">
+          <SettingsIcon size={24} className="form-icon" />
+          <div>
+            <h2>{t('settings.title')}</h2>
+            <p className="form-subtitle">{t('settings.subtitle')}</p>
+          </div>
+        </div>
+        <p className="text-muted mt-4">{t('settings.select_logbook_hint')}</p>
+      </div>
+    )
   }
 
   return (
@@ -287,125 +282,12 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
         <SettingsIcon size={24} className="form-icon" />
         <div>
           <h2>{t('settings.title')}</h2>
-          <p className="form-subtitle" style={{ margin: '4px 0 0 0', fontSize: '13px', color: '#94a3b8' }}>
-            {t('settings.subtitle')}
-          </p>
+          <p className="form-subtitle">{t('settings.subtitle')}</p>
         </div>
       </div>
 
-      <form onSubmit={handleSubmit} className="vessel-form mt-6">
-        <PwaInstallPrompt variant="inline" />
-
-        {/* Weather Integration card */}
-        <div className="member-editor-card glass">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: '#fbbf24', fontSize: '16px' }}>
-            {t('settings.owm_title')}
-          </h3>
-          <p style={{ fontSize: '13.5px', color: '#94a3b8', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.key_help')}
-          </p>
-
-          <div className="input-group">
-            <label htmlFor="owm-api-key" style={{ display: 'block', fontSize: '13.5px', color: '#94a3b8', marginBottom: '6px', fontWeight: 500 }}>
-              {t('settings.owm_key')}
-            </label>
-            <input
-              id="owm-api-key"
-              type="password"
-              className="input-text"
-              placeholder="e.g. 8b6a7f...d8"
-              value={apiKey}
-              onChange={(e) => setApiKey(e.target.value)}
-              disabled={saving}
-            />
-          </div>
-        </div>
-
-        {/* Theme customization card */}
-        <div className="member-editor-card glass mt-4">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: '#fbbf24', fontSize: '16px' }}>
-            {t('settings.theme_title')}
-          </h3>
-          <p style={{ fontSize: '13.5px', color: '#94a3b8', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.theme_label')}
-          </p>
-
-          <div className="input-group">
-            <ThemedSelect
-              id="app-theme"
-              value={theme}
-              disabled={saving}
-              onChange={handleThemeChange}
-              options={[
-                { value: 'auto', label: t('settings.theme_auto') },
-                { value: 'ocean', label: t('settings.theme_ocean') },
-                { value: 'material', label: t('settings.theme_material') },
-                { value: 'cupertino', label: t('settings.theme_cupertino') }
-              ]}
-            />
-          </div>
-        </div>
-
-        <div className="member-editor-card glass mt-4">
-          <h3 style={{ marginTop: 0, marginBottom: '12px', color: 'var(--app-accent-light)', fontSize: '16px' }}>
-            {t('settings.color_scheme_title')}
-          </h3>
-          <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.color_scheme_label')}
-          </p>
-
-          <div className="input-group">
-            <ThemedSelect
-              id="app-color-scheme"
-              value={colorScheme}
-              disabled={saving}
-              onChange={handleColorSchemeChange}
-              options={[
-                { value: 'auto', label: t('settings.color_scheme_auto') },
-                { value: 'light', label: t('settings.color_scheme_light') },
-                { value: 'dark', label: t('settings.color_scheme_dark') }
-              ]}
-            />
-          </div>
-        </div>
-
-        <div className="member-editor-card glass mt-4">
-          <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
-            <Compass size={20} style={{ color: 'var(--app-accent-light)' }} />
-            <h3 style={{ margin: 0, color: 'var(--app-accent-light)', fontSize: '16px' }}>
-              {t('settings.tour_title')}
-            </h3>
-          </div>
-          <p className="text-muted" style={{ fontSize: '13.5px', lineHeight: '145%', margin: '0 0 16px 0' }}>
-            {t('settings.tour_desc')}
-          </p>
-          <button
-            type="button"
-            className="btn secondary"
-            onClick={() => restartTour()}
-          >
-            {t('settings.tour_restart')}
-          </button>
-        </div>
-
-        <div className="form-actions mt-4 mb-6">
-          {success && (
-            <div className="success-toast">
-              <Check size={16} />
-              <span>{t('settings.saved')}</span>
-            </div>
-          )}
-          
-          <button type="submit" className="btn primary" disabled={saving}>
-            <Save size={18} />
-            {saving ? t('settings.saving') : t('settings.save')}
-          </button>
-        </div>
-      </form>
-
-      {/* Public Share Link Card (Only visible to Logbook Owner) */}
       {logbookId && isOwner && (
-        <div className="member-editor-card glass mt-6" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
+        <div className="member-editor-card glass mt-6">
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
             <LinkIcon size={20} style={{ color: '#fbbf24' }} />
             <h3 style={{ margin: 0, color: '#fbbf24', fontSize: '16px' }}>
@@ -417,6 +299,10 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
             {t('settings.share_desc')}
           </p>
 
+          <p className="signature-lock-notice" style={{ marginBottom: '16px' }}>
+            {t('settings.share_privacy_warning')}
+          </p>
+
           <div style={{ display: 'flex', alignItems: 'center', gap: '10px', marginBottom: '20px' }}>
             <label className="switch-label" style={{ display: 'flex', alignItems: 'center', gap: '10px', cursor: 'pointer', fontSize: '14px', color: '#f1f5f9' }}>
               <input
@@ -432,29 +318,36 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           </div>
 
           {shareEnabled && shareLink && (
-            <div className="input-group mb-4" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-              <input
-                type="text"
-                readOnly
-                value={shareLink}
-                className="input-text font-mono text-xs"
-                style={{ flex: 1, padding: '10px' }}
-                onClick={(e) => (e.target as HTMLInputElement).select()}
-              />
-              <button
-                type="button"
-                className="btn secondary"
-                onClick={handleCopyShareLink}
-                style={{ width: 'auto', padding: '10px' }}
-              >
-                {shareCopied ? <Check size={16} /> : <Copy size={16} />}
-              </button>
+            <div className="link-with-qr mb-4">
+              <div className="input-group copy-link-row">
+                <input
+                  type="text"
+                  readOnly
+                  value={shareLink}
+                  className="input-text font-mono text-xs"
+                  style={{ flex: 1, padding: '10px' }}
+                  onClick={(e) => (e.target as HTMLInputElement).select()}
+                />
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={handleCopyShareLink}
+                  style={{ width: 'auto', padding: '10px' }}
+                  title={t('settings.share_copy_btn')}
+                >
+                  {shareCopied ? <Check size={16} /> : <Copy size={16} />}
+                </button>
+              </div>
+              <LinkQrCode value={shareLink} />
             </div>
           )}
         </div>
       )}
 
-      {/* Crew Collaboration Card (Only visible to Logbook Owner) */}
+      {logbookId && isOwner && (
+        <LogbookBackupPanel logbookId={logbookId} onRestored={onLogbookRestored} />
+      )}
+
       {logbookId && isOwner && (
         <div className="member-editor-card glass mt-6" style={{ borderTop: '1px solid rgba(255,255,255,0.05)', paddingTop: '24px' }}>
           <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '12px' }}>
@@ -468,7 +361,7 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
             {t('logs.invite_link_desc')}
           </p>
 
-          <div className="form-actions" style={{ justifyContent: 'flex-start', gap: '12px', marginBottom: '20px' }}>
+          <div className="form-actions form-actions--start" style={{ gap: '12px', marginBottom: '20px' }}>
             <button
               type="button"
               className="btn primary"
@@ -482,27 +375,30 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           </div>
 
           {inviteLink && (
-            <div className="input-group mb-6" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-              <input
-                type="text"
-                readOnly
-                value={inviteLink}
-                className="input-text font-mono text-xs"
-                style={{ flex: 1, padding: '10px' }}
-                onClick={(e) => (e.target as HTMLInputElement).select()}
-              />
-              <button
-                type="button"
-                className="btn secondary"
-                onClick={handleCopyInvite}
-                style={{ width: 'auto', padding: '10px' }}
-              >
-                {inviteCopied ? <Check size={16} /> : <Copy size={16} />}
-              </button>
+            <div className="link-with-qr mb-6">
+              <div className="input-group copy-link-row">
+                <input
+                  type="text"
+                  readOnly
+                  value={inviteLink}
+                  className="input-text font-mono text-xs"
+                  style={{ flex: 1, padding: '10px' }}
+                  onClick={(e) => (e.target as HTMLInputElement).select()}
+                />
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={handleCopyInvite}
+                  style={{ width: 'auto', padding: '10px' }}
+                  title={t('settings.share_copy_btn')}
+                >
+                  {inviteCopied ? <Check size={16} /> : <Copy size={16} />}
+                </button>
+              </div>
+              <LinkQrCode value={inviteLink} />
             </div>
           )}
 
-          {/* Collaborator List */}
           <h4 style={{ color: '#fbbf24', fontSize: '14px', marginBottom: '12px' }}>
             {t('logs.collaborators_list')}
           </h4>
@@ -548,8 +444,6 @@ export default function SettingsForm({ logbookId }: SettingsFormProps) {
           )}
         </div>
       )}
-      {/* Danger Zone / Account Deletion */}
-      <AccountDangerZone className="mt-6" />
     </div>
   )
 }

client/src/components/SignatureSection.tsx

@@ -4,7 +4,8 @@ import { Check } from 'lucide-react'
 import SignaturePad from './SignaturePad.tsx'
 import PasskeySignButton from './PasskeySignButton.tsx'
 import type { PasskeySignature, SignatureValue } from '../types/signatures.js'
-import { isPasskeySignature } from '../utils/signatures.js'
+import { isPasskeySignature, getSignaturePayload, getSignatureAttribution } from '../utils/signatures.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 type SignatureMode = 'passkey' | 'classic'
 
@@ -13,7 +14,7 @@ interface SignatureSectionProps {
   disabled?: boolean
   isOnline: boolean
   canSignSkipper: boolean
-  hasWriteCollaborators: boolean
+  canSignCrew: boolean
   signSkipper: SignatureValue | ''
   signCrew: SignatureValue | ''
   skipperSignatureValid: boolean
@@ -25,14 +26,28 @@ interface SignatureSectionProps {
   onBeforeSign?: () => Promise<boolean>
 }
 
+function SignerAttributionBadge({ value }: { value: SignatureValue | '' }) {
+  const { t, i18n } = useTranslation()
+  const attribution = getSignatureAttribution(value)
+  if (!attribution) return null
+
+  const formattedDate = formatAppDateTime(attribution.signedAt, i18n.language)
+
+  return (
+    <div className="passkey-sign-badge valid signature-attribution-badge">
+      <span>{t('logs.sign_passkey_signed', { username: attribution.username })}</span>
+      <span className="passkey-sign-date">{formattedDate}</span>
+    </div>
+  )
+}
+
 function padValue(value: SignatureValue | ''): string {
-  if (!value || isPasskeySignature(value)) return ''
-  return value
+  return getSignaturePayload(value)
 }
 
 function modeFromValue(value: SignatureValue | '', passkeyAvailable: boolean): SignatureMode {
   if (isPasskeySignature(value)) return 'passkey'
-  if (value) return 'classic'
+  if (getSignaturePayload(value)) return 'classic'
   return passkeyAvailable ? 'passkey' : 'classic'
 }
 
@@ -108,6 +123,7 @@ function RoleSignatureBlock({
     }
     return (
       <div className="signature-role-block">
+        <SignerAttributionBadge value={value} />
         <SignaturePad
           id={padId}
           label={roleLabel}
@@ -162,6 +178,7 @@ function RoleSignatureBlock({
 
       {showClassicPanel && (
         <>
+          <SignerAttributionBadge value={value} />
           <SignaturePad
             id={padId}
             label={roleLabel}
@@ -189,7 +206,7 @@ export default function SignatureSection({
   disabled = false,
   isOnline,
   canSignSkipper,
-  hasWriteCollaborators,
+  canSignCrew,
   signSkipper,
   signCrew,
   skipperSignatureValid,
@@ -203,7 +220,7 @@ export default function SignatureSection({
   const { t } = useTranslation()
 
   const showSkipperPasskey = canSignSkipper && isOnline
-  const showCrewPasskey = hasWriteCollaborators && isOnline
+  const showCrewPasskey = canSignCrew && isOnline
   const hasSignature = !!(signSkipper || signCrew)
 
   return (
@@ -228,7 +245,7 @@ export default function SignatureSection({
           passkeySignature={isPasskeySignature(signSkipper) ? signSkipper : undefined}
           signatureValid={skipperSignatureValid}
           showPasskey={showSkipperPasskey}
-          readOnly={readOnly}
+          readOnly={readOnly || !canSignSkipper}
           disabled={disabled}
           classicHint={showSkipperPasskey ? t('logs.sign_classic_or_passkey') : undefined}
           offlineHint={!isOnline && canSignSkipper ? t('logs.sign_offline_hint') : undefined}
@@ -245,7 +262,7 @@ export default function SignatureSection({
           passkeySignature={isPasskeySignature(signCrew) ? signCrew : undefined}
           signatureValid={crewSignatureValid}
           showPasskey={showCrewPasskey}
-          readOnly={readOnly}
+          readOnly={readOnly || !canSignCrew}
           disabled={disabled}
           classicHint={showCrewPasskey ? t('logs.sign_crew_passkey_hint') : undefined}
           onChange={onSignCrewChange}

client/src/components/StatsDashboard.tsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import { BarChart2, Anchor, Droplets, Fuel, Sailboat, Gauge } from 'lucide-react'
+import { BarChart2, Anchor, Droplets, Fuel, Sailboat, Gauge, Timer } from 'lucide-react'
 import MultiTrackMap from './MultiTrackMap.tsx'
 import {
   formatLiters,
+  formatHours,
   formatNm,
   loadAccountStats,
   loadLogbookStats,
@@ -12,6 +13,12 @@ import {
   type TravelDayStats
 } from '../services/statsAggregation.js'
 import { compareTravelDaysChronological } from '../utils/logEntryTankLevels.js'
+import { formatFuelPerMotorHour } from '../utils/fuelStats.js'
+import {
+  loadLogbookEventSeries,
+  type EventSeriesPoint,
+  type EventSeriesSummary
+} from '../services/eventSeriesAggregation.js'
 
 interface StatsDashboardProps {
   logbookId: string
@@ -78,12 +85,26 @@ function TotalsGrid({ totals }: { totals: StatsTotals }) {
         value={formatNm(totals.motorDistanceNm)}
         unit={t('stats.unit_nm')}
       />
+      <KpiCard
+        icon={<Timer size={20} />}
+        label={t('stats.motor_hours_total')}
+        value={formatHours(totals.totalMotorHours)}
+        unit={t('stats.unit_h')}
+      />
       <KpiCard
         icon={<Fuel size={20} />}
         label={t('stats.fuel_total')}
         value={formatLiters(totals.totalFuelL)}
         unit={t('stats.unit_l')}
       />
+      {totals.fuelPerMotorHourL != null && (
+        <KpiCard
+          icon={<Timer size={20} />}
+          label={t('stats.fuel_per_motor_hour')}
+          value={formatFuelPerMotorHour(totals.fuelPerMotorHourL)}
+          unit={`${t('stats.unit_l')}/${t('stats.unit_h')}`}
+        />
+      )}
       <KpiCard
         icon={<Droplets size={20} />}
         label={t('stats.water_total')}
@@ -201,7 +222,62 @@ function PropulsionBreakdown({ totals }: { totals: StatsTotals }) {
   )
 }
 
-function LogbookScopeView({ summary }: { summary: LogbookStatsSummary }) {
+function EventSeriesList({ title, points, emptyLabel }: { title: string; points: EventSeriesPoint[]; emptyLabel: string }) {
+  if (points.length === 0) {
+    return (
+      <div className="stats-event-series-block">
+        <h4 className="stats-section-subtitle">{title}</h4>
+        <p className="stats-section-sub">{emptyLabel}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="stats-event-series-block">
+      <h4 className="stats-section-subtitle">{title}</h4>
+      <ul className="stats-event-series-list">
+        {points.map((point, idx) => (
+          <li key={`${point.entryId}-${point.time}-${idx}`} className="stats-event-series-item">
+            <span className="stats-event-series-when">
+              {new Date(point.date).toLocaleDateString(undefined, { day: '2-digit', month: '2-digit' })}
+              {' · '}
+              {point.time}
+            </span>
+            <span className="stats-event-series-value">{point.summary}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+function EventSeriesPanel({ series }: { series: EventSeriesSummary }) {
+  const { t } = useTranslation()
+  const motorPoints = series.motor.map((point) => ({
+    ...point,
+    summary: point.summary === 'start'
+      ? t('logs.live_motor_start')
+      : t('logs.live_motor_stop')
+  }))
+
+  return (
+    <div className="member-editor-card glass mt-6">
+      <h3 className="stats-section-title">{t('stats.event_series_title')}</h3>
+      <p className="stats-section-sub">{t('stats.event_series_hint')}</p>
+      <EventSeriesList title={t('stats.event_series_pressure')} points={series.pressure} emptyLabel={t('stats.event_series_empty')} />
+      <EventSeriesList title={t('stats.event_series_wind')} points={series.wind} emptyLabel={t('stats.event_series_empty')} />
+      <EventSeriesList title={t('stats.event_series_motor')} points={motorPoints} emptyLabel={t('stats.event_series_empty')} />
+    </div>
+  )
+}
+
+function LogbookScopeView({
+  summary,
+  eventSeries
+}: {
+  summary: LogbookStatsSummary
+  eventSeries: EventSeriesSummary | null
+}) {
   const { t } = useTranslation()
   const { travelDays, routePorts, trackSegments, totals } = summary
 
@@ -247,6 +323,36 @@ function LogbookScopeView({ summary }: { summary: LogbookStatsSummary }) {
         />
       </div>
 
+      <div className="member-editor-card glass mt-6">
+        <h3 className="stats-section-title">{t('stats.daily_motor_hours')}</h3>
+        <p className="stats-section-sub">
+          {t('stats.avg_motor_hours')}: {formatHours(totals.avgMotorHoursPerDay)} {t('stats.unit_h')}
+          {totals.fuelPerMotorHourL != null && (
+            <>
+              {' · '}
+              {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+            </>
+          )}
+        </p>
+        <DailyBarChart
+          days={travelDays}
+          valueFn={(d) => d.motorHours}
+          barClass="stats-bar--motor-hours"
+          formatValue={formatHours}
+        />
+        {travelDays.some((d) => d.fuelPerMotorHourL != null) && (
+          <>
+            <h4 className="stats-section-subtitle mt-4">{t('stats.daily_fuel_per_motor_hour')}</h4>
+            <DailyBarChart
+              days={travelDays}
+              valueFn={(d) => d.fuelPerMotorHourL ?? 0}
+              barClass="stats-bar--fuel-per-hour"
+              formatValue={(v) => formatFuelPerMotorHour(v > 0 ? v : null)}
+            />
+          </>
+        )}
+      </div>
+
       <div className="member-editor-card glass mt-6">
         <h3 className="stats-section-title">{t('stats.daily_consumption')}</h3>
         <p className="stats-section-sub">
@@ -256,6 +362,9 @@ function LogbookScopeView({ summary }: { summary: LogbookStatsSummary }) {
           {totals.fuelPerNmL != null && (
             <> · {t('stats.fuel_per_nm')}: {totals.fuelPerNmL} {t('stats.unit_l')}/{t('stats.unit_nm')}</>
           )}
+          {totals.fuelPerMotorHourL != null && (
+            <> · {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}</>
+          )}
         </p>
         <ConsumptionChart days={travelDays} />
       </div>
@@ -264,6 +373,8 @@ function LogbookScopeView({ summary }: { summary: LogbookStatsSummary }) {
         <h3 className="stats-section-title">{t('stats.propulsion_title')}</h3>
         <PropulsionBreakdown totals={totals} />
       </div>
+
+      {eventSeries && <EventSeriesPanel series={eventSeries} />}
     </>
   )
 }
@@ -274,18 +385,21 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
   const [loading, setLoading] = useState(true)
   const [error, setError] = useState<string | null>(null)
   const [logbookStats, setLogbookStats] = useState<LogbookStatsSummary | null>(null)
+  const [eventSeries, setEventSeries] = useState<EventSeriesSummary | null>(null)
   const [accountStats, setAccountStats] = useState<Awaited<ReturnType<typeof loadAccountStats>> | null>(null)
 
   const loadData = useCallback(async () => {
     setLoading(true)
     setError(null)
     try {
-      const [lb, acc] = await Promise.all([
+      const [lb, acc, series] = await Promise.all([
         loadLogbookStats(logbookId, logbookTitle, true),
-        loadAccountStats(false)
+        loadAccountStats(false),
+        loadLogbookEventSeries(logbookId)
       ])
       setLogbookStats(lb)
       setAccountStats(acc)
+      setEventSeries(series)
     } catch (err: unknown) {
       console.error('Failed to load statistics:', err)
       setError(err instanceof Error ? err.message : 'Failed to load statistics.')
@@ -310,7 +424,7 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
   }, [accountStats])
 
   return (
-    <div className="form-card">
+    <div className="form-card" data-tour="stats-dashboard">
       <div className="form-header">
         <BarChart2 size={24} className="form-icon" />
         <div>
@@ -348,7 +462,7 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
           <p>{t('stats.loading')}</p>
         </div>
       ) : scope === 'logbook' && logbookStats ? (
-        <LogbookScopeView summary={logbookStats} />
+        <LogbookScopeView summary={logbookStats} eventSeries={eventSeries} />
       ) : scope === 'account' && accountStats ? (
         <>
           <TotalsGrid totals={accountStats.totals} />
@@ -367,6 +481,7 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
                         <th>{t('stats.travel_days')}</th>
                         <th>{t('stats.total_distance')}</th>
                         <th>{t('stats.fuel_total')}</th>
+                        <th>{t('stats.motor_hours_total')}</th>
                         <th>{t('stats.water_total')}</th>
                       </tr>
                     </thead>
@@ -377,6 +492,7 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
                           <td>{lb.totals.travelDayCount}</td>
                           <td>{formatNm(lb.totals.totalDistanceNm)} {t('stats.unit_nm')}</td>
                           <td>{formatLiters(lb.totals.totalFuelL)} {t('stats.unit_l')}</td>
+                          <td>{formatHours(lb.totals.totalMotorHours)} {t('stats.unit_h')}</td>
                           <td>{formatLiters(lb.totals.totalFreshwaterL)} {t('stats.unit_l')}</td>
                         </tr>
                       ))}
@@ -397,8 +513,39 @@ export default function StatsDashboard({ logbookId, logbookTitle }: StatsDashboa
                     />
                   </div>
 
+                  <div className="member-editor-card glass mt-6">
+                    <h3 className="stats-section-title">{t('stats.daily_motor_hours')}</h3>
+                    {accountStats.totals.fuelPerMotorHourL != null && (
+                      <p className="stats-section-sub">
+                        {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(accountStats.totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+                      </p>
+                    )}
+                    <DailyBarChart
+                      days={allAccountDays}
+                      valueFn={(d) => d.motorHours}
+                      barClass="stats-bar--motor-hours"
+                      formatValue={formatHours}
+                    />
+                    {allAccountDays.some((d) => d.fuelPerMotorHourL != null) && (
+                      <>
+                        <h4 className="stats-section-subtitle mt-4">{t('stats.daily_fuel_per_motor_hour')}</h4>
+                        <DailyBarChart
+                          days={allAccountDays}
+                          valueFn={(d) => d.fuelPerMotorHourL ?? 0}
+                          barClass="stats-bar--fuel-per-hour"
+                          formatValue={(v) => formatFuelPerMotorHour(v > 0 ? v : null)}
+                        />
+                      </>
+                    )}
+                  </div>
+
                   <div className="member-editor-card glass mt-6">
                     <h3 className="stats-section-title">{t('stats.daily_consumption')}</h3>
+                    {accountStats.totals.fuelPerMotorHourL != null && (
+                      <p className="stats-section-sub">
+                        {t('stats.fuel_per_motor_hour')}: {formatFuelPerMotorHour(accountStats.totals.fuelPerMotorHourL)} {t('stats.unit_l')}/{t('stats.unit_h')}
+                      </p>
+                    )}
                     <ConsumptionChart days={allAccountDays} />
                   </div>
 

client/src/components/SyncConflictBanner.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { AlertTriangle } from 'lucide-react'
+import {
+  getSyncConflicts,
+  subscribeSyncConflicts,
+  type SyncConflict
+} from '../services/syncConflicts.js'
+import {
+  resolveSyncConflictKeepLocal,
+  resolveSyncConflictUseServer
+} from '../services/sync.js'
+
+interface SyncConflictBannerProps {
+  logbookId: string | null
+}
+
+export default function SyncConflictBanner({ logbookId }: SyncConflictBannerProps) {
+  const { t } = useTranslation()
+  const [items, setItems] = useState<SyncConflict[]>([])
+
+  useEffect(() => {
+    const refresh = () => {
+      setItems(logbookId ? getSyncConflicts(logbookId) : getSyncConflicts())
+    }
+    refresh()
+    return subscribeSyncConflicts(refresh)
+  }, [logbookId])
+
+  if (items.length === 0) return null
+
+  const first = items[0]
+
+  return (
+    <div className="sync-conflict-banner" role="alert">
+      <AlertTriangle size={20} aria-hidden />
+      <div className="sync-conflict-banner__body">
+        <strong>{t('sync.conflict_title')}</strong>
+        <p>
+          {t('sync.conflict_message', {
+            count: items.length,
+            id: first.payloadId.slice(0, 8)
+          })}
+        </p>
+        <div className="sync-conflict-banner__actions">
+          <button
+            type="button"
+            className="btn secondary"
+            onClick={() => void resolveSyncConflictUseServer(first)}
+          >
+            {t('sync.conflict_use_server')}
+          </button>
+          <button
+            type="button"
+            className="btn primary"
+            onClick={() => void resolveSyncConflictKeepLocal(first)}
+          >
+            {t('sync.conflict_keep_local')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

client/src/components/TankLiterInput.tsx

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { clampTankLiters } from '../utils/tankCapacity.js'
+
+interface TankLiterInputProps {
+  id?: string
+  label: string
+  value: string
+  onChange: (value: string) => void
+  maxLiters?: number
+  disabled?: boolean
+  titleTooltip?: string
+}
+
+function parseInputLiters(value: string): number {
+  const trimmed = value.trim().replace(',', '.')
+  if (!trimmed) return 0
+  const parsed = Number(trimmed)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+export default function TankLiterInput({
+  id,
+  label,
+  value,
+  onChange,
+  maxLiters,
+  disabled = false,
+  titleTooltip
+}: TankLiterInputProps) {
+  const { t } = useTranslation()
+  const useSlider = maxLiters != null && maxLiters > 0
+
+  const emitValue = useCallback(
+    (liters: number) => {
+      const clamped = clampTankLiters(liters, useSlider ? maxLiters : undefined)
+      const str =
+        Number.isInteger(clamped) ? String(clamped) : String(Number(clamped.toFixed(1)))
+      onChange(str)
+    },
+    [onChange, maxLiters, useSlider]
+  )
+
+  const handleNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value)
+  }
+
+  const handleNumberBlur = () => {
+    if (!useSlider) return
+    emitValue(parseInputLiters(value))
+  }
+
+  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    emitValue(Number(e.target.value))
+  }
+
+  const numericValue = parseInputLiters(value)
+  const sliderValue = useSlider ? clampTankLiters(numericValue, maxLiters) : 0
+
+  return (
+    <div className="input-group tank-liter-input">
+      <label htmlFor={id} title={titleTooltip}>{label}</label>
+      {useSlider && (
+        <>
+          <input
+            type="range"
+            className="tank-liter-slider"
+            min={0}
+            max={maxLiters}
+            step={1}
+            value={sliderValue}
+            onChange={handleSliderChange}
+            disabled={disabled}
+            title={titleTooltip}
+            aria-valuemin={0}
+            aria-valuemax={maxLiters}
+            aria-valuenow={sliderValue}
+            aria-label={label}
+          />
+          <div className="tank-liter-slider-hint" aria-hidden="true">
+            {t('logs.tank_slider_of_max', {
+              current: sliderValue,
+              max: maxLiters
+            })}
+          </div>
+        </>
+      )}
+      <input
+        id={id}
+        type="number"
+        className="input-text"
+        value={value}
+        onChange={handleNumberChange}
+        onBlur={handleNumberBlur}
+        disabled={disabled}
+        min={0}
+        max={useSlider ? maxLiters : undefined}
+        step="any"
+        title={titleTooltip}
+      />
+    </div>
+  )
+}

client/src/components/UserProfilePage.tsx

@@ -0,0 +1,844 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { useSyncIndicator } from '../hooks/useSyncIndicator.js'
+import {
+  User,
+  ChevronLeft,
+  LogOut,
+  KeyRound,
+  Copy,
+  Check,
+  Plus,
+  Trash2,
+  BookOpen,
+  Anchor,
+  Gauge,
+  Sailboat,
+  Ship,
+  Timer,
+  Share2,
+  Calendar,
+  Lock,
+  BarChart2,
+  Shield,
+  Smartphone,
+  RefreshCw,
+  Wifi,
+  WifiOff,
+  CircleCheck,
+  CircleAlert
+} from 'lucide-react'
+import AccountDangerZone from './AccountDangerZone.tsx'
+import UserProfilePreferences from './UserProfilePreferences.tsx'
+import PersonPoolForm from './PersonPoolForm.tsx'
+import VesselPoolForm from './VesselPoolForm.tsx'
+import ProfileAccordionSection from './ProfileAccordionSection.tsx'
+import { useAppTour } from '../context/AppTourContext.tsx'
+import BetaBadge from './BetaBadge.tsx'
+import { useDialog } from './ModalDialog.tsx'
+import {
+  addPasskey,
+  fetchUserProfile,
+  forgetUsername,
+  getActiveMasterKey,
+  getKnownUsernames,
+  hasLocalPin,
+  removeLocalPin,
+  removePasskey,
+  renamePasskey,
+  rotateRecoveryPhrase,
+  setLocalPin,
+  type UserProfile
+} from '../services/auth.js'
+import {
+  formatHours,
+  formatNm,
+  loadAccountStats,
+  type AccountStatsSummary
+} from '../services/statsAggregation.js'
+import { db } from '../services/db.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+interface UserProfilePageProps {
+  onBack: () => void
+  onLogout: () => void
+}
+
+function formatAccountAge(createdAt: string, locale: string): string {
+  const created = new Date(createdAt)
+  if (Number.isNaN(created.getTime())) return createdAt
+  return created.toLocaleDateString(locale, {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric'
+  })
+}
+
+function KpiCard({
+  icon,
+  label,
+  value,
+  unit
+}: {
+  icon: React.ReactNode
+  label: string
+  value: string
+  unit?: string
+}) {
+  return (
+    <div className="stats-kpi-card glass">
+      <div className="stats-kpi-icon">{icon}</div>
+      <div className="stats-kpi-body">
+        <span className="stats-kpi-label">{label}</span>
+        <span className="stats-kpi-value">
+          {value}
+          {unit ? <span className="stats-kpi-unit">{unit}</span> : null}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+function SecurityCheckItem({ ok, label }: { ok: boolean; label: string }) {
+  return (
+    <li className={`profile-security-item ${ok ? 'profile-security-item--ok' : 'profile-security-item--warn'}`}>
+      {ok ? <CircleCheck size={18} aria-hidden="true" /> : <CircleAlert size={18} aria-hidden="true" />}
+      <span>{label}</span>
+    </li>
+  )
+}
+
+export default function UserProfilePage({ onBack, onLogout }: UserProfilePageProps) {
+  const { t, i18n } = useTranslation()
+  const { showConfirm, showAlert } = useDialog()
+  const username = localStorage.getItem('active_username') || 'Skipper'
+
+  const [profile, setProfile] = useState<UserProfile | null>(null)
+  const [accountStats, setAccountStats] = useState<AccountStatsSummary | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [copiedUserId, setCopiedUserId] = useState(false)
+  const [passkeyBusy, setPasskeyBusy] = useState(false)
+  const [pinBusy, setPinBusy] = useState(false)
+  const [pinInput, setPinInput] = useState('')
+  const [pinConfirm, setPinConfirm] = useState('')
+  const [pinActive, setPinActive] = useState(() => hasLocalPin(username))
+  const [newPasskeyLabel, setNewPasskeyLabel] = useState('')
+  const [passkeyLabels, setPasskeyLabels] = useState<Record<string, string>>({})
+  const [online, setOnline] = useState(navigator.onLine)
+  const [isKnownDevice, setIsKnownDevice] = useState(() =>
+    getKnownUsernames().some((u) => u.toLowerCase() === username.toLowerCase())
+  )
+  const [recoveryBusy, setRecoveryBusy] = useState(false)
+  const [pendingRecoveryPhrase, setPendingRecoveryPhrase] = useState<string | null>(null)
+  const [recoveryCopied, setRecoveryCopied] = useState(false)
+
+  const {
+    pendingCount: pendingSyncCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName
+  } = useSyncIndicator()
+
+  const { isActive: tourActive, currentStepId: tourStepId } = useAppTour()
+  const fleetSectionTourOpen =
+    tourActive &&
+    (tourStepId === 'profile_vessel_pool' || tourStepId === 'profile_crew_pool')
+
+  const sharedLogbookCount = useLiveQuery(
+    () => db.logbooks.filter((lb) => lb.isShared === 1).count(),
+    []
+  ) ?? 0
+
+  const loadData = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      const profileData = await fetchUserProfile()
+      setProfile(profileData)
+
+      try {
+        const stats = await loadAccountStats(false)
+        setAccountStats(stats)
+      } catch (statsErr) {
+        console.error('Failed to load account stats for profile:', statsErr)
+        setAccountStats(null)
+      }
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.load_error'))
+    } finally {
+      setLoading(false)
+    }
+  }, [t])
+
+  useEffect(() => {
+    void loadData()
+  }, [loadData])
+
+  useEffect(() => {
+    trackPlausibleEvent(PlausibleEvents.PROFILE_OPENED)
+  }, [])
+
+  useEffect(() => {
+    const handleOnline = () => setOnline(true)
+    const handleOffline = () => setOnline(false)
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+    return () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!profile) return
+    const labels: Record<string, string> = {}
+    for (const cred of profile.credentials) {
+      labels[cred.id] = cred.label ?? ''
+    }
+    setPasskeyLabels(labels)
+  }, [profile])
+
+  const statsTotals = accountStats?.totals
+  const logbookCount =
+    accountStats?.logbooks.length ?? profile?.serverMeta.ownedLogbookCount ?? 0
+
+  const accountAgeLabel = useMemo(() => {
+    if (!profile?.createdAt) return '—'
+    return formatAccountAge(profile.createdAt, i18n.language)
+  }, [profile?.createdAt, i18n.language])
+
+  const handleCopyUserId = async () => {
+    if (!profile?.userId) return
+    try {
+      await navigator.clipboard.writeText(profile.userId)
+      setCopiedUserId(true)
+      window.setTimeout(() => setCopiedUserId(false), 2000)
+    } catch {
+      showAlert(t('profile.copy_failed'))
+    }
+  }
+
+  const handleAddPasskey = async () => {
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      const hadLabel = Boolean(newPasskeyLabel.trim())
+      await addPasskey(newPasskeyLabel)
+      setNewPasskeyLabel('')
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_ADDED, { labeled: hadLabel })
+      showAlert(t('profile.add_passkey_success'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.add_passkey_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleRenamePasskey = async (credentialId: string) => {
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      await renamePasskey(credentialId, passkeyLabels[credentialId] ?? '')
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_RENAMED)
+      showAlert(t('profile.passkey_rename_success'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.passkey_rename_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleForgetDevice = async () => {
+    const confirmed = await showConfirm(
+      t('profile.device_forget_confirm_desc'),
+      t('profile.device_forget_confirm_title'),
+      t('profile.device_forget_confirm_yes'),
+      t('profile.device_forget_confirm_no')
+    )
+    if (!confirmed) return
+
+    forgetUsername(username)
+    setIsKnownDevice(false)
+    trackPlausibleEvent(PlausibleEvents.DEVICE_FORGOTTEN)
+  }
+
+  const handleRemovePasskey = async (credentialId: string) => {
+    if (profile && profile.credentials.length <= 1) {
+      trackPlausibleEvent(PlausibleEvents.LAST_PASSKEY_REMOVE_HINTED)
+      await showAlert(
+        t('profile.remove_passkey_last_desc'),
+        t('profile.remove_passkey_last_title')
+      )
+      return
+    }
+
+    const confirmed = await showConfirm(
+      t('profile.remove_passkey_confirm_desc'),
+      t('profile.remove_passkey_confirm_title'),
+      t('profile.remove_passkey_confirm_yes'),
+      t('profile.remove_passkey_confirm_no')
+    )
+    if (!confirmed) return
+
+    setPasskeyBusy(true)
+    setError(null)
+    try {
+      await removePasskey(credentialId)
+      await loadData()
+      trackPlausibleEvent(PlausibleEvents.PASSKEY_REMOVED)
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.remove_passkey_failed'))
+    } finally {
+      setPasskeyBusy(false)
+    }
+  }
+
+  const handleSavePin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (pinInput.length < 4) {
+      setError(t('profile.pin_length_error'))
+      return
+    }
+    if (pinInput !== pinConfirm) {
+      setError(t('profile.pin_mismatch'))
+      return
+    }
+
+    const masterKey = getActiveMasterKey()
+    if (!masterKey) {
+      setError(t('profile.pin_no_session'))
+      return
+    }
+
+    const pinAction = pinActive ? 'change' : 'set'
+
+    setPinBusy(true)
+    setError(null)
+    try {
+      await setLocalPin(pinInput.trim(), username, masterKey)
+      setPinActive(true)
+      setPinInput('')
+      setPinConfirm('')
+      trackPlausibleEvent(PlausibleEvents.LOCAL_PIN_SET, { action: pinAction })
+      showAlert(t('profile.pin_saved'))
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : t('profile.pin_save_failed'))
+    } finally {
+      setPinBusy(false)
+    }
+  }
+
+  const handleRemovePin = async () => {
+    const confirmed = await showConfirm(
+      t('profile.remove_pin_confirm_desc'),
+      t('profile.remove_pin_confirm_title'),
+      t('profile.remove_pin_confirm_yes'),
+      t('profile.remove_pin_confirm_no')
+    )
+    if (!confirmed) return
+
+    removeLocalPin(username)
+    setPinActive(false)
+    setPinInput('')
+    setPinConfirm('')
+    trackPlausibleEvent(PlausibleEvents.LOCAL_PIN_REMOVED)
+  }
+
+  const handleRotateRecovery = async () => {
+    const confirmed = await showConfirm(
+      t('profile.recovery_rotate_confirm_desc'),
+      t('profile.recovery_rotate_confirm_title'),
+      t('profile.recovery_rotate_confirm_yes'),
+      t('profile.recovery_rotate_confirm_no')
+    )
+    if (!confirmed) return
+
+    if (!getActiveMasterKey()) {
+      setError(t('profile.recovery_rotate_no_session'))
+      return
+    }
+
+    setRecoveryBusy(true)
+    setError(null)
+    try {
+      const phrase = await rotateRecoveryPhrase()
+      setPendingRecoveryPhrase(phrase)
+      trackPlausibleEvent(PlausibleEvents.RECOVERY_ROTATED)
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'NO_ACTIVE_MASTER_KEY') {
+        setError(t('profile.recovery_rotate_no_session'))
+      } else {
+        setError(err instanceof Error ? err.message : t('profile.recovery_rotate_failed'))
+      }
+    } finally {
+      setRecoveryBusy(false)
+    }
+  }
+
+  const handleCopyRecoveryPhrase = async () => {
+    if (!pendingRecoveryPhrase) return
+    try {
+      await navigator.clipboard.writeText(pendingRecoveryPhrase)
+      setRecoveryCopied(true)
+      window.setTimeout(() => setRecoveryCopied(false), 2000)
+    } catch {
+      showAlert(t('profile.copy_failed'))
+    }
+  }
+
+  const handleConfirmRecoverySaved = () => {
+    setPendingRecoveryPhrase(null)
+    setRecoveryCopied(false)
+  }
+
+  return (
+    <div className="dashboard-container">
+      <header className="dashboard-header dashboard-header--profile">
+        <div className="header-brand profile-header-brand">
+          <button className="btn-back profile-back-btn" onClick={onBack} title={t('profile.back')}>
+            <ChevronLeft size={16} />
+            <span>{t('profile.back')}</span>
+          </button>
+          <div>
+            <div className="header-brand-title-row">
+              <h1>{t('profile.title')}</h1>
+              <BetaBadge />
+            </div>
+            <p className="subtitle">{t('profile.subtitle', { name: username })}</p>
+          </div>
+        </div>
+
+        <div className="header-actions">
+          <button className="btn-icon logout" onClick={onLogout} title={t('dashboard.logout')}>
+            <LogOut size={18} />
+          </button>
+        </div>
+      </header>
+
+      <main className="profile-main">
+        {error && <div className="auth-error mb-4">{error}</div>}
+
+        {loading ? (
+          <div className="tab-placeholder">
+            <User className="header-logo spin" size={48} />
+            <p>{t('profile.loading')}</p>
+          </div>
+        ) : pendingRecoveryPhrase ? (
+          <section className="form-card profile-recovery-card">
+            <div className="form-header">
+              <KeyRound size={24} className="form-icon" />
+              <h2>{t('auth.recovery_title')}</h2>
+            </div>
+            <p className="profile-recovery-warning">{t('profile.recovery_rotate_new_warning')}</p>
+            <div className="phrase-grid">
+              {pendingRecoveryPhrase.split(' ').map((word, idx) => (
+                <div key={idx} className="phrase-word">
+                  <span className="word-num">{idx + 1}</span>
+                  {word}
+                </div>
+              ))}
+            </div>
+            <div className="form-actions profile-recovery-actions">
+              <button type="button" className="btn secondary" onClick={() => void handleCopyRecoveryPhrase()}>
+                {recoveryCopied ? t('auth.copied') : t('auth.copy_phrase')}
+              </button>
+              <button type="button" className="btn primary" onClick={handleConfirmRecoverySaved}>
+                {t('auth.confirm_recovery')}
+              </button>
+            </div>
+          </section>
+        ) : profile ? (
+          <>
+            <ProfileAccordionSection
+              id="account"
+              title={t('profile.sections.account')}
+              icon={<User size={20} aria-hidden="true" />}
+              defaultOpen
+            >
+            <div data-tour="profile-preferences">
+            <section className="form-card profile-accordion-inner-card">
+              <div className="form-header">
+                <User size={24} className="form-icon" />
+                <h2>{t('profile.identity_title')}</h2>
+              </div>
+
+              <dl className="profile-dl">
+                <div className="profile-dl-row">
+                  <dt>{t('profile.username')}</dt>
+                  <dd>{profile.username}</dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.user_id')}</dt>
+                  <dd className="profile-user-id">
+                    <code>{profile.userId}</code>
+                    <button
+                      type="button"
+                      className="btn-icon profile-copy-btn"
+                      onClick={() => void handleCopyUserId()}
+                      title={t('profile.copy_user_id')}
+                    >
+                      {copiedUserId ? <Check size={16} /> : <Copy size={16} />}
+                    </button>
+                  </dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.account_since')}</dt>
+                  <dd>{accountAgeLabel}</dd>
+                </div>
+                <div className="profile-dl-row">
+                  <dt>{t('profile.prf_status')}</dt>
+                  <dd>
+                    {profile.hasPrfEncryption
+                      ? t('profile.prf_active')
+                      : t('profile.prf_inactive')}
+                  </dd>
+                </div>
+              </dl>
+            </section>
+
+            <UserProfilePreferences userId={profile.userId} />
+            </div>
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="fleet"
+              title={t('profile.sections.fleet')}
+              icon={<Ship size={20} aria-hidden="true" />}
+              defaultOpen
+              forceOpen={fleetSectionTourOpen ? true : undefined}
+            >
+            <VesselPoolForm />
+            <PersonPoolForm />
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="security"
+              title={t('profile.sections.security')}
+              icon={<Shield size={20} aria-hidden="true" />}
+            >
+            <section className="member-editor-card glass profile-accordion-inner-card">
+              <div className="profile-section-header">
+                <Shield size={20} />
+                <h3>{t('profile.security_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.security_desc')}</p>
+              <ul className="profile-security-list">
+                <SecurityCheckItem
+                  ok={profile.credentials.length > 0}
+                  label={
+                    profile.credentials.length > 0
+                      ? t('profile.security_passkeys_ok')
+                      : t('profile.security_passkeys_missing')
+                  }
+                />
+                <SecurityCheckItem
+                  ok={profile.hasPrfEncryption}
+                  label={
+                    profile.hasPrfEncryption
+                      ? t('profile.security_prf_ok')
+                      : t('profile.security_prf_missing')
+                  }
+                />
+                <SecurityCheckItem
+                  ok={pinActive}
+                  label={pinActive ? t('profile.security_pin_ok') : t('profile.security_pin_missing')}
+                />
+                <SecurityCheckItem ok label={t('profile.security_recovery_ok')} />
+              </ul>
+              <p className="profile-section-desc profile-recovery-hint">{t('profile.security_recovery_hint')}</p>
+              <div className="form-actions profile-recovery-actions">
+                <button
+                  type="button"
+                  className="btn secondary"
+                  onClick={() => void handleRotateRecovery()}
+                  disabled={recoveryBusy || passkeyBusy || pinBusy}
+                >
+                  {recoveryBusy ? t('profile.processing') : t('profile.recovery_rotate_btn')}
+                </button>
+              </div>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Smartphone size={20} />
+                <h3>{t('profile.device_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.device_desc')}</p>
+              <div className={`profile-device-status ${connStatusClassName(online)}`}>
+                {online ? (
+                  showSpinner ? (
+                    <>
+                      <RefreshCw size={16} className="spin" aria-hidden="true" />
+                      <span>{t('sync.status_syncing')}</span>
+                    </>
+                  ) : showPendingWarning ? (
+                    <>
+                      <RefreshCw size={16} aria-hidden="true" />
+                      <span>{t('profile.device_sync_pending', { count: pendingSyncCount })}</span>
+                    </>
+                  ) : (
+                    <>
+                      <Wifi size={16} aria-hidden="true" />
+                      <span>{t('profile.device_sync_ok')}</span>
+                    </>
+                  )
+                ) : (
+                  <>
+                    <WifiOff size={16} aria-hidden="true" />
+                    <span>{t('sync.status_offline')}</span>
+                  </>
+                )}
+              </div>
+              <p className="profile-pin-status">
+                {isKnownDevice ? t('profile.device_remembered') : t('profile.device_not_remembered')}
+              </p>
+              {isKnownDevice && (
+                <div className="form-actions">
+                  <button
+                    type="button"
+                    className="btn secondary"
+                    onClick={() => void handleForgetDevice()}
+                  >
+                    {t('profile.device_forget_btn')}
+                  </button>
+                </div>
+              )}
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <Lock size={20} />
+                <h3>{t('profile.pin_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('auth.setup_pin_warning')}</p>
+              <p className="profile-pin-status">
+                {t('profile.pin_status')}:{' '}
+                <strong>{pinActive ? t('profile.pin_active') : t('profile.pin_inactive')}</strong>
+              </p>
+
+              <form onSubmit={(e) => void handleSavePin(e)} className="profile-pin-form">
+                <div className="input-group">
+                  <label htmlFor="profile-pin">{t('auth.pin_label')}</label>
+                  <input
+                    id="profile-pin"
+                    type="password"
+                    inputMode="numeric"
+                    autoComplete="new-password"
+                    className="input-text"
+                    placeholder={t('auth.pin_placeholder')}
+                    value={pinInput}
+                    onChange={(e) => setPinInput(e.target.value)}
+                    disabled={pinBusy}
+                  />
+                </div>
+                <div className="input-group">
+                  <label htmlFor="profile-pin-confirm">{t('profile.pin_confirm_label')}</label>
+                  <input
+                    id="profile-pin-confirm"
+                    type="password"
+                    inputMode="numeric"
+                    autoComplete="new-password"
+                    className="input-text"
+                    placeholder={t('profile.pin_confirm_placeholder')}
+                    value={pinConfirm}
+                    onChange={(e) => setPinConfirm(e.target.value)}
+                    disabled={pinBusy}
+                  />
+                </div>
+                <div className="form-actions">
+                  <button
+                    type="submit"
+                    className="btn primary"
+                    disabled={pinBusy || pinInput.length < 4 || pinConfirm.length < 4}
+                  >
+                    {pinActive ? t('profile.pin_change_btn') : t('profile.pin_set_btn')}
+                  </button>
+                  {pinActive && (
+                    <button
+                      type="button"
+                      className="btn secondary"
+                      onClick={() => void handleRemovePin()}
+                      disabled={pinBusy}
+                    >
+                      {t('profile.pin_remove_btn')}
+                    </button>
+                  )}
+                </div>
+              </form>
+            </section>
+
+            <section className="member-editor-card glass">
+              <div className="profile-section-header">
+                <KeyRound size={20} />
+                <h3>{t('profile.passkeys_title')}</h3>
+              </div>
+              <p className="profile-section-desc">{t('profile.passkeys_desc')}</p>
+
+              {profile.credentials.length === 0 ? (
+                <p className="profile-empty">{t('profile.passkeys_empty')}</p>
+              ) : (
+                <ul className="profile-passkey-list">
+                  {profile.credentials.map((cred) => (
+                    <li key={cred.id} className="profile-passkey-item">
+                      <div className="profile-passkey-main">
+                        <span className="profile-passkey-label">
+                          {cred.label || t('profile.passkey_unnamed')}
+                        </span>
+                        <span className="profile-passkey-id">{cred.credentialIdPreview}</span>
+                        {cred.transports.length > 0 && (
+                          <span className="profile-passkey-transports">
+                            {cred.transports.join(', ')}
+                          </span>
+                        )}
+                        <div className="profile-passkey-rename">
+                          <input
+                            type="text"
+                            className="input-text"
+                            value={passkeyLabels[cred.id] ?? ''}
+                            onChange={(e) =>
+                              setPasskeyLabels((prev) => ({ ...prev, [cred.id]: e.target.value }))
+                            }
+                            placeholder={t('profile.passkey_label_placeholder')}
+                            disabled={passkeyBusy}
+                            maxLength={64}
+                          />
+                          <button
+                            type="button"
+                            className="btn secondary"
+                            onClick={() => void handleRenamePasskey(cred.id)}
+                            disabled={passkeyBusy}
+                          >
+                            {t('profile.passkey_rename_btn')}
+                          </button>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        className="btn-icon danger"
+                        onClick={() => void handleRemovePasskey(cred.id)}
+                        disabled={passkeyBusy}
+                        title={t('profile.remove_passkey_btn')}
+                      >
+                        <Trash2 size={16} />
+                      </button>
+                    </li>
+                  ))}
+                </ul>
+              )}
+
+              <div className="profile-add-passkey">
+                <div className="input-group">
+                  <label htmlFor="profile-new-passkey-label">{t('profile.passkey_label')}</label>
+                  <input
+                    id="profile-new-passkey-label"
+                    type="text"
+                    className="input-text"
+                    value={newPasskeyLabel}
+                    onChange={(e) => setNewPasskeyLabel(e.target.value)}
+                    placeholder={t('profile.passkey_label_placeholder')}
+                    disabled={passkeyBusy}
+                    maxLength={64}
+                  />
+                </div>
+              </div>
+
+              <div className="form-actions mt-4">
+                <button
+                  type="button"
+                  className="btn primary"
+                  onClick={() => void handleAddPasskey()}
+                  disabled={passkeyBusy}
+                >
+                  <Plus size={16} />
+                  {passkeyBusy ? t('profile.processing') : t('profile.add_passkey_btn')}
+                </button>
+              </div>
+            </section>
+
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="stats"
+              title={t('profile.sections.stats')}
+              icon={<BarChart2 size={20} aria-hidden="true" />}
+            >
+            <section className="form-card profile-stats-section profile-accordion-inner-card">
+              <div className="form-header">
+                <BarChart2 size={24} className="form-icon" />
+                <div>
+                  <h2>{t('profile.stats_title')}</h2>
+                  <p className="stats-subtitle">{t('profile.stats_subtitle')}</p>
+                </div>
+              </div>
+
+              {(statsTotals || profile) && (
+                <div className="stats-kpi-grid profile-stats-kpi-grid">
+                  <KpiCard
+                    icon={<BookOpen size={20} />}
+                    label={t('profile.stats_logbooks')}
+                    value={String(logbookCount)}
+                  />
+                  {statsTotals && (
+                    <>
+                      <KpiCard
+                        icon={<Anchor size={20} />}
+                        label={t('stats.travel_days')}
+                        value={String(statsTotals.travelDayCount)}
+                      />
+                      <KpiCard
+                        icon={<Gauge size={20} />}
+                        label={t('stats.total_distance')}
+                        value={formatNm(statsTotals.totalDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Sailboat size={20} />}
+                        label={t('stats.sail_distance')}
+                        value={formatNm(statsTotals.sailDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Gauge size={20} />}
+                        label={t('stats.motor_distance')}
+                        value={formatNm(statsTotals.motorDistanceNm)}
+                        unit={t('stats.unit_nm')}
+                      />
+                      <KpiCard
+                        icon={<Timer size={20} />}
+                        label={t('stats.motor_hours_total')}
+                        value={formatHours(statsTotals.totalMotorHours)}
+                        unit={t('stats.unit_h')}
+                      />
+                      <KpiCard
+                        icon={<Share2 size={20} />}
+                        label={t('profile.stats_shared_logbooks')}
+                        value={String(sharedLogbookCount)}
+                      />
+                    </>
+                  )}
+                  <KpiCard
+                    icon={<Calendar size={20} />}
+                    label={t('profile.stats_account_since')}
+                    value={accountAgeLabel}
+                  />
+                </div>
+              )}
+            </section>
+            </ProfileAccordionSection>
+
+            <ProfileAccordionSection
+              id="danger"
+              title={t('profile.sections.danger')}
+            >
+            <AccountDangerZone className="profile-accordion-inner-card" />
+            </ProfileAccordionSection>
+          </>
+        ) : null}
+      </main>
+    </div>
+  )
+}

client/src/components/UserProfilePreferences.tsx

@@ -0,0 +1,159 @@
+import { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Compass, Palette, Save, Check, Cloud } from 'lucide-react'
+import ThemedSelect from './ThemedSelect.tsx'
+import PushNotificationSettings from './PushNotificationSettings.tsx'
+import PwaInstallPrompt from './PwaInstallPrompt.tsx'
+import { notifyAppearanceChanged } from '../services/appearance.js'
+import { saveAppearancePrefsToServer } from '../services/appearancePrefs.js'
+import { useAppTour } from '../context/AppTourContext.tsx'
+import {
+  getColorSchemePreference,
+  getOwmApiKey,
+  getThemePreference,
+  setColorSchemePreference,
+  setOwmApiKey,
+  setThemePreference
+} from '../services/userPreferences.js'
+
+interface UserProfilePreferencesProps {
+  userId: string
+}
+
+export default function UserProfilePreferences({ userId }: UserProfilePreferencesProps) {
+  const { t } = useTranslation()
+  const { restartTour } = useAppTour()
+  const [apiKey, setApiKey] = useState(() => getOwmApiKey(userId))
+  const [theme, setTheme] = useState(() => getThemePreference(userId))
+  const [colorScheme, setColorScheme] = useState(() => getColorSchemePreference(userId))
+  const [savingOwm, setSavingOwm] = useState(false)
+  const [owmSaved, setOwmSaved] = useState(false)
+
+  const persistAppearance = (nextTheme: string, nextColorScheme: string) => {
+    setThemePreference(userId, nextTheme)
+    setColorSchemePreference(userId, nextColorScheme)
+    notifyAppearanceChanged()
+    void saveAppearancePrefsToServer(nextTheme, nextColorScheme).catch((err) => {
+      console.warn('Failed to save appearance prefs to server:', err)
+    })
+  }
+
+  const handleThemeChange = (nextTheme: string) => {
+    setTheme(nextTheme)
+    persistAppearance(nextTheme, colorScheme)
+  }
+
+  const handleColorSchemeChange = (nextColorScheme: string) => {
+    setColorScheme(nextColorScheme)
+    persistAppearance(theme, nextColorScheme)
+  }
+
+  const handleSaveOwm = (e: React.FormEvent) => {
+    e.preventDefault()
+    setSavingOwm(true)
+    setOwmSaved(false)
+    setOwmApiKey(userId, apiKey)
+    setSavingOwm(false)
+    setOwmSaved(true)
+    window.setTimeout(() => setOwmSaved(false), 3000)
+  }
+
+  return (
+    <>
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Palette size={20} />
+          <h3>{t('profile.appearance_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.appearance_desc')}</p>
+
+        <div className="input-group">
+          <label htmlFor="profile-app-theme" className="profile-field-label">
+            {t('profile.theme_label')}
+          </label>
+          <ThemedSelect
+            id="profile-app-theme"
+            value={theme}
+            onChange={handleThemeChange}
+            options={[
+              { value: 'auto', label: t('profile.theme_auto') },
+              { value: 'ocean', label: t('profile.theme_ocean') },
+              { value: 'material', label: t('profile.theme_material') },
+              { value: 'cupertino', label: t('profile.theme_cupertino') }
+            ]}
+          />
+        </div>
+
+        <div className="input-group mt-4">
+          <label htmlFor="profile-color-scheme" className="profile-field-label">
+            {t('profile.color_scheme_label')}
+          </label>
+          <ThemedSelect
+            id="profile-color-scheme"
+            value={colorScheme}
+            onChange={handleColorSchemeChange}
+            options={[
+              { value: 'auto', label: t('profile.color_scheme_auto') },
+              { value: 'light', label: t('profile.color_scheme_light') },
+              { value: 'dark', label: t('profile.color_scheme_dark') }
+            ]}
+          />
+        </div>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Compass size={20} />
+          <h3>{t('profile.tour_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.tour_desc')}</p>
+        <div className="form-actions">
+          <button type="button" className="btn secondary" onClick={() => restartTour()}>
+            {t('profile.tour_restart')}
+          </button>
+        </div>
+      </section>
+
+      <section className="member-editor-card glass">
+        <div className="profile-section-header">
+          <Cloud size={20} />
+          <h3>{t('profile.integrations_title')}</h3>
+        </div>
+        <p className="profile-section-desc">{t('profile.owm_help')}</p>
+        <form onSubmit={handleSaveOwm}>
+          <div className="input-group">
+            <label htmlFor="profile-owm-api-key" className="profile-field-label">
+              {t('profile.owm_key')}
+            </label>
+            <input
+              id="profile-owm-api-key"
+              name="owm-api-key"
+              type="password"
+              className="input-text"
+              placeholder="e.g. 8b6a7f...d8"
+              value={apiKey}
+              onChange={(e) => setApiKey(e.target.value)}
+              disabled={savingOwm}
+              autoComplete="off"
+            />
+          </div>
+          <div className="form-actions mt-4">
+            {owmSaved && (
+              <div className="success-toast">
+                <Check size={16} />
+                <span>{t('profile.prefs_saved')}</span>
+              </div>
+            )}
+            <button type="submit" className="btn primary" disabled={savingOwm}>
+              <Save size={18} />
+              {savingOwm ? t('profile.prefs_saving') : t('profile.prefs_save')}
+            </button>
+          </div>
+        </form>
+      </section>
+
+      <PushNotificationSettings />
+      <PwaInstallPrompt variant="inline" />
+    </>
+  )
+}

client/src/components/VesselDataFields.tsx

@@ -0,0 +1,328 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { Ship, Camera, Trash2, Plus, X } from 'lucide-react'
+import type { VesselFormInputs } from '../utils/vesselFormUtils.js'
+
+export interface VesselDataFieldsProps {
+  inputs: VesselFormInputs
+  onChange: (next: VesselFormInputs) => void
+  readOnly?: boolean
+  saving?: boolean
+  newSailName: string
+  onNewSailNameChange: (value: string) => void
+  onAddSail: () => void
+  onRemoveSail: (index: number) => void
+  photoError?: string | null
+  onPhotoChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onRemovePhoto: () => void
+  fileInputRef: React.RefObject<HTMLInputElement | null>
+}
+
+export default function VesselDataFields({
+  inputs,
+  onChange,
+  readOnly = false,
+  saving = false,
+  newSailName,
+  onNewSailNameChange,
+  onAddSail,
+  onRemoveSail,
+  photoError,
+  onPhotoChange,
+  onRemovePhoto,
+  fileInputRef
+}: VesselDataFieldsProps) {
+  const { t } = useTranslation()
+  const set = (patch: Partial<VesselFormInputs>) => onChange({ ...inputs, ...patch })
+
+  const triggerFileInput = () => {
+    if (!readOnly) fileInputRef.current?.click()
+  }
+
+  return (
+    <div className="form-grid">
+      <div className="vessel-photo-wrapper">
+        <div
+          className="vessel-photo-preview"
+          onClick={triggerFileInput}
+          style={{ cursor: readOnly ? 'default' : 'pointer' }}
+        >
+          {inputs.photo ? (
+            <img src={inputs.photo} alt={inputs.name || 'Vessel'} className="vessel-photo" />
+          ) : (
+            <div className="vessel-photo-placeholder">
+              <Ship size={48} className="placeholder-icon" />
+            </div>
+          )}
+          {!readOnly && (
+            <div className="vessel-photo-overlay">
+              <Camera size={24} />
+              <span>{inputs.photo ? t('vessel.photo_change') : t('vessel.photo_add')}</span>
+            </div>
+          )}
+        </div>
+        {!readOnly && (
+          <div className="vessel-photo-actions">
+            <button type="button" className="btn secondary btn-sm" onClick={triggerFileInput} disabled={saving}>
+              <Camera size={16} />
+              {inputs.photo ? t('vessel.photo_change') : t('vessel.photo_add')}
+            </button>
+            {inputs.photo && (
+              <button type="button" className="btn danger btn-sm" onClick={onRemovePhoto} disabled={saving}>
+                <Trash2 size={16} />
+                {t('vessel.photo_delete')}
+              </button>
+            )}
+          </div>
+        )}
+        <input
+          type="file"
+          ref={fileInputRef}
+          onChange={onPhotoChange}
+          accept="image/*"
+          style={{ display: 'none' }}
+        />
+        {photoError && <div className="auth-error mt-2">{photoError}</div>}
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.name')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.name}
+          onChange={(e) => set({ name: e.target.value })}
+          disabled={saving || readOnly}
+          required
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.type')}</label>
+        <select
+          className="input-text"
+          value={inputs.vesselType}
+          onChange={(e) => set({ vesselType: e.target.value })}
+          disabled={saving || readOnly}
+        >
+          <option value="">{t('vessel.type_unset')}</option>
+          <option value="sailing">{t('vessel.type_sailing')}</option>
+          <option value="motor">{t('vessel.type_motor')}</option>
+        </select>
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.length_m')}</label>
+        <input
+          type="text"
+          inputMode="decimal"
+          className="input-text"
+          value={inputs.lengthM}
+          onChange={(e) => set({ lengthM: e.target.value })}
+          disabled={saving || readOnly}
+          placeholder="0.00"
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.draft_m')}</label>
+        <input
+          type="text"
+          inputMode="decimal"
+          className="input-text"
+          value={inputs.draftM}
+          onChange={(e) => set({ draftM: e.target.value })}
+          disabled={saving || readOnly}
+          placeholder="0.00"
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.air_draft_m')}</label>
+        <input
+          type="text"
+          inputMode="decimal"
+          className="input-text"
+          value={inputs.airDraftM}
+          onChange={(e) => set({ airDraftM: e.target.value })}
+          disabled={saving || readOnly}
+          placeholder="0.00"
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.port')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.homePort}
+          onChange={(e) => set({ homePort: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.owner')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.owner}
+          onChange={(e) => set({ owner: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.charter')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.charterCompany}
+          onChange={(e) => set({ charterCompany: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.registration')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.registrationNumber}
+          onChange={(e) => set({ registrationNumber: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.callsign')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.callSign}
+          onChange={(e) => set({ callSign: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.atis')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.atis}
+          onChange={(e) => set({ atis: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="input-group">
+        <label>{t('vessel.mmsi')}</label>
+        <input
+          type="text"
+          className="input-text"
+          value={inputs.mmsi}
+          onChange={(e) => set({ mmsi: e.target.value })}
+          disabled={saving || readOnly}
+        />
+      </div>
+
+      <div className="vessel-tanks-section">
+        <h3>{t('vessel.tanks_section')}</h3>
+        <p className="vessel-tanks-help">{t('vessel.tanks_help')}</p>
+        <div className="vessel-tanks-grid">
+          <div className="input-group">
+            <label>{t('vessel.freshwater_capacity_l')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={inputs.freshwaterCapacityL}
+              onChange={(e) => set({ freshwaterCapacityL: e.target.value })}
+              disabled={saving || readOnly}
+              placeholder="0"
+            />
+          </div>
+          <div className="input-group">
+            <label>{t('vessel.fuel_capacity_l')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={inputs.fuelCapacityL}
+              onChange={(e) => set({ fuelCapacityL: e.target.value })}
+              disabled={saving || readOnly}
+              placeholder="0"
+            />
+          </div>
+          <div className="input-group">
+            <label>{t('vessel.greywater_capacity_l')}</label>
+            <input
+              type="text"
+              inputMode="decimal"
+              className="input-text"
+              value={inputs.greywaterCapacityL}
+              onChange={(e) => set({ greywaterCapacityL: e.target.value })}
+              disabled={saving || readOnly}
+              placeholder="0"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="sails-section">
+        <h3>{t('vessel.sails_list')}</h3>
+        <p className="help-text">{t('vessel.sails_help')}</p>
+        <div className="sails-badges-grid">
+          {inputs.sails.length === 0 ? (
+            <span className="no-sails-msg">{t('vessel.no_sails')}</span>
+          ) : (
+            inputs.sails.map((sail, idx) => (
+              <span key={idx} className="sail-badge">
+                {sail}
+                {!readOnly && (
+                  <button
+                    type="button"
+                    className="remove-btn"
+                    onClick={() => onRemoveSail(idx)}
+                    disabled={saving}
+                  >
+                    <X size={14} />
+                  </button>
+                )}
+              </span>
+            ))
+          )}
+        </div>
+        {!readOnly && (
+          <div className="add-sail-form">
+            <input
+              type="text"
+              className="input-text"
+              placeholder={t('vessel.sail_name_placeholder')}
+              value={newSailName}
+              onChange={(e) => onNewSailNameChange(e.target.value)}
+              disabled={saving}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  onAddSail()
+                }
+              }}
+            />
+            <button
+              type="button"
+              className="btn secondary"
+              onClick={onAddSail}
+              disabled={saving || !newSailName.trim()}
+              style={{ width: 'auto' }}
+            >
+              <Plus size={16} />
+              {t('vessel.add_sail')}
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

client/src/components/VesselForm.tsx

@@ -7,6 +7,7 @@ import { encryptJson, decryptJson } from '../services/crypto.js'
 import { syncLogbook } from '../services/sync.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
 import { Ship, Save, Check, Plus, X, Camera, Trash2 } from 'lucide-react'
+import { parseOptionalTankLiters, tankCapacityInputFromStored } from '../utils/tankCapacity.js'
 
 interface VesselFormProps {
   logbookId: string
@@ -47,6 +48,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
   const [mmsi, setMmsi] = useState('')
   const [sails, setSails] = useState<string[]>([])
   const [newSailName, setNewSailName] = useState('')
+  const [freshwaterCapacityL, setFreshwaterCapacityL] = useState('')
+  const [fuelCapacityL, setFuelCapacityL] = useState('')
+  const [greywaterCapacityL, setGreywaterCapacityL] = useState('')
 
   const fileInputRef = React.useRef<HTMLInputElement>(null)
   const [photo, setPhoto] = useState<string | null>(null)
@@ -78,6 +82,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
           setMmsi(preloadedData.mmsi || '')
           setSails(preloadedData.sails || [])
           setPhoto(preloadedData.photo || null)
+          setFreshwaterCapacityL(tankCapacityInputFromStored(preloadedData.freshwaterCapacityL))
+          setFuelCapacityL(tankCapacityInputFromStored(preloadedData.fuelCapacityL))
+          setGreywaterCapacityL(tankCapacityInputFromStored(preloadedData.greywaterCapacityL))
           return
         }
 
@@ -103,6 +110,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
             setMmsi(decrypted.mmsi || '')
             setSails(decrypted.sails || [])
             setPhoto(decrypted.photo || null)
+            setFreshwaterCapacityL(tankCapacityInputFromStored(decrypted.freshwaterCapacityL))
+            setFuelCapacityL(tankCapacityInputFromStored(decrypted.fuelCapacityL))
+            setGreywaterCapacityL(tankCapacityInputFromStored(decrypted.greywaterCapacityL))
           }
         }
       } catch (err: any) {
@@ -201,12 +211,19 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
       let parsedLengthM: number | undefined
       let parsedDraftM: number | undefined
       let parsedAirDraftM: number | undefined
+      let parsedFreshwaterCapacityL: number | undefined
+      let parsedFuelCapacityL: number | undefined
+      let parsedGreywaterCapacityL: number | undefined
       try {
         parsedLengthM = parseOptionalMetricMeters(lengthM)
         parsedDraftM = parseOptionalMetricMeters(draftM)
         parsedAirDraftM = parseOptionalMetricMeters(airDraftM)
-      } catch {
-        setError(t('vessel.invalid_metric'))
+        parsedFreshwaterCapacityL = parseOptionalTankLiters(freshwaterCapacityL)
+        parsedFuelCapacityL = parseOptionalTankLiters(fuelCapacityL)
+        parsedGreywaterCapacityL = parseOptionalTankLiters(greywaterCapacityL)
+      } catch (err: unknown) {
+        const msg = err instanceof Error ? err.message : ''
+        setError(msg === 'invalid_tank_liters' ? t('vessel.invalid_tank_liters') : t('vessel.invalid_metric'))
         setSaving(false)
         return
       }
@@ -217,6 +234,9 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
         lengthM: parsedLengthM,
         draftM: parsedDraftM,
         airDraftM: parsedAirDraftM,
+        freshwaterCapacityL: parsedFreshwaterCapacityL,
+        fuelCapacityL: parsedFuelCapacityL,
+        greywaterCapacityL: parsedGreywaterCapacityL,
         homePort: homePort.trim(),
         charterCompany: charterCompany.trim(),
         owner: owner.trim(),
@@ -480,6 +500,49 @@ export default function VesselForm({ logbookId, readOnly = false, preloadedData
             />
           </div>
 
+          <div className="vessel-tanks-section">
+            <h3>{t('vessel.tanks_section')}</h3>
+            <p className="vessel-tanks-help">{t('vessel.tanks_help')}</p>
+            <div className="vessel-tanks-grid">
+              <div className="input-group">
+                <label>{t('vessel.freshwater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={freshwaterCapacityL}
+                  onChange={(e) => setFreshwaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.fuel_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={fuelCapacityL}
+                  onChange={(e) => setFuelCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+              <div className="input-group">
+                <label>{t('vessel.greywater_capacity_l')}</label>
+                <input
+                  type="text"
+                  inputMode="decimal"
+                  className="input-text"
+                  value={greywaterCapacityL}
+                  onChange={(e) => setGreywaterCapacityL(e.target.value)}
+                  disabled={saving || readOnly}
+                  placeholder="0"
+                />
+              </div>
+            </div>
+          </div>
+
           <div className="sails-section">
             <h3>{t('vessel.sails_list')}</h3>
             <p className="help-text">{t('vessel.sails_help')}</p>

client/src/components/VesselPoolForm.tsx

@@ -0,0 +1,244 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Ship, Plus, Trash2, Edit2, X, Save } from 'lucide-react'
+import { useDialog } from './ModalDialog.tsx'
+import VesselDataFields from './VesselDataFields.tsx'
+import type { VesselFormInputs } from '../utils/vesselFormUtils.js'
+import { parseVesselFormInputs, vesselDataToFormInputs } from '../utils/vesselFormUtils.js'
+import { emptyVesselData } from '../types/vessel.js'
+import { loadVesselPool, saveVessel, deleteVessel, type DecryptedVessel } from '../services/vesselPool.js'
+import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
+
+export default function VesselPoolForm() {
+  const { t } = useTranslation()
+  const { showConfirm } = useDialog()
+  const [vessels, setVessels] = useState<DecryptedVessel[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [showForm, setShowForm] = useState(false)
+  const [editingId, setEditingId] = useState<string | null>(null)
+  const [inputs, setInputs] = useState<VesselFormInputs>(vesselDataToFormInputs(emptyVesselData()))
+  const [newSailName, setNewSailName] = useState('')
+  const [saving, setSaving] = useState(false)
+  const [photoError, setPhotoError] = useState<string | null>(null)
+  const fileRef = useRef<HTMLInputElement>(null)
+
+  const reload = useCallback(async () => {
+    setLoading(true)
+    setError(null)
+    try {
+      setVessels(await loadVesselPool())
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to load')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    void reload()
+  }, [reload])
+
+  const openAdd = () => {
+    setEditingId(null)
+    setInputs(vesselDataToFormInputs(emptyVesselData()))
+    setNewSailName('')
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const openEdit = (vessel: DecryptedVessel) => {
+    setEditingId(vessel.payloadId)
+    setInputs(vesselDataToFormInputs(vessel.data))
+    setNewSailName('')
+    setPhotoError(null)
+    setShowForm(true)
+  }
+
+  const handleAddSail = () => {
+    const trimmed = newSailName.trim()
+    if (trimmed && !inputs.sails.includes(trimmed)) {
+      setInputs((prev) => ({ ...prev, sails: [...prev.sails, trimmed] }))
+    }
+    setNewSailName('')
+  }
+
+  const handlePhotoChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    setPhotoError(null)
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const img = new Image()
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas')
+          const ctx = canvas.getContext('2d')
+          if (!ctx) throw new Error('Could not get canvas context')
+          let width = img.width
+          let height = img.height
+          const MAX_WIDTH = 800
+          const MAX_HEIGHT = 600
+          if (width > MAX_WIDTH || height > MAX_HEIGHT) {
+            const ratio = Math.min(MAX_WIDTH / width, MAX_HEIGHT / height)
+            width = Math.round(width * ratio)
+            height = Math.round(height * ratio)
+          }
+          canvas.width = width
+          canvas.height = height
+          ctx.drawImage(img, 0, 0, width, height)
+          setInputs((prev) => ({ ...prev, photo: canvas.toDataURL('image/jpeg', 0.7) }))
+        } catch (err: unknown) {
+          setPhotoError(err instanceof Error ? err.message : 'Failed to process image')
+        }
+      }
+      img.onerror = () => setPhotoError('Invalid image file')
+      img.src = event.target?.result as string
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!inputs.name.trim()) return
+    setSaving(true)
+    setError(null)
+    try {
+      const data = parseVesselFormInputs(inputs)
+      const id = editingId ?? window.crypto.randomUUID()
+      await saveVessel(id, data, !editingId)
+      setShowForm(false)
+      trackPlausibleEvent(PlausibleEvents.VESSEL_SAVED, { context: 'vessel_pool' })
+      await reload()
+    } catch (err: unknown) {
+      if (err instanceof Error && err.message === 'MAX_VESSELS') {
+        setError(t('vessel_pool.max_vessels'))
+      } else if (err instanceof Error && err.message === 'invalid_metric') {
+        setError(t('vessel.invalid_metric'))
+      } else if (err instanceof Error && err.message === 'invalid_tank_liters') {
+        setError(t('vessel.invalid_tank_liters'))
+      } else {
+        setError(err instanceof Error ? err.message : 'Failed to save')
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async (id: string) => {
+    if (
+      !(await showConfirm(
+        t('vessel_pool.delete_confirm'),
+        t('vessel_pool.title'),
+        t('logs.confirm_yes'),
+        t('logs.confirm_no')
+      ))
+    ) {
+      return
+    }
+    try {
+      await deleteVessel(id)
+      await reload()
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : 'Failed to delete')
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="tab-placeholder">
+        <Ship className="header-logo spin" size={48} />
+        <p>{t('vessel_pool.loading')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div data-tour="profile-vessel-pool">
+      <div className="section-title-bar mb-4">
+        <h3>{t('vessel_pool.section_title')}</h3>
+        {!showForm && (
+          <button type="button" className="btn primary" style={{ width: 'auto', padding: '8px 16px' }} onClick={openAdd}>
+            <Plus size={16} />
+            {t('vessel_pool.add_vessel')}
+          </button>
+        )}
+      </div>
+      <p className="help-text mb-4">{t('vessel_pool.subtitle')}</p>
+      {error && <div className="auth-error mb-4">{error}</div>}
+
+      {vessels.length === 0 ? (
+        <p className="help-text mb-4">{t('vessel_pool.no_vessels')}</p>
+      ) : (
+        <div className="crew-grid mb-6">
+          {vessels.map((v) => (
+            <div key={v.payloadId} className="crew-member-card glass">
+              <div className="crew-card-header">
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                  {v.data.photo ? (
+                    <img src={v.data.photo} alt="" className="crew-card-avatar" />
+                  ) : (
+                    <div className="crew-card-avatar-placeholder">
+                      <Ship size={18} />
+                    </div>
+                  )}
+                  <div>
+                    <h4>{v.data.name}</h4>
+                    {v.data.homePort && <p className="help-text">{v.data.homePort}</p>}
+                  </div>
+                </div>
+                <div className="card-actions">
+                  <button type="button" className="btn-icon" onClick={() => openEdit(v)}>
+                    <Edit2 size={14} />
+                  </button>
+                  <button
+                    type="button"
+                    className="btn-icon logout"
+                    onClick={() => void handleDelete(v.payloadId)}
+                  >
+                    <Trash2 size={14} />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {showForm && (
+        <form onSubmit={(e) => void handleSave(e)} className="member-editor-card glass">
+          <div className="editor-header mb-4">
+            <h3>{editingId ? t('vessel_pool.edit_vessel') : t('vessel_pool.add_vessel')}</h3>
+            <button type="button" className="btn-icon" onClick={() => setShowForm(false)}>
+              <X size={16} />
+            </button>
+          </div>
+          <VesselDataFields
+            inputs={inputs}
+            onChange={setInputs}
+            saving={saving}
+            newSailName={newSailName}
+            onNewSailNameChange={setNewSailName}
+            onAddSail={handleAddSail}
+            onRemoveSail={(idx) =>
+              setInputs((prev) => ({ ...prev, sails: prev.sails.filter((_, i) => i !== idx) }))
+            }
+            photoError={photoError}
+            onPhotoChange={handlePhotoChange}
+            onRemovePhoto={() => {
+              setInputs((prev) => ({ ...prev, photo: null }))
+              if (fileRef.current) fileRef.current.value = ''
+            }}
+            fileInputRef={fileRef}
+          />
+          <div className="form-actions mt-4">
+            <button type="submit" className="btn primary" disabled={saving || !inputs.name.trim()}>
+              <Save size={18} />
+              {saving ? t('vessel.saving') : t('vessel.save')}
+            </button>
+          </div>
+        </form>
+      )}
+    </div>
+  )
+}

client/src/components/icons/CaptainCap.tsx

@@ -0,0 +1,29 @@
+import type { SVGProps } from 'react'
+
+interface CaptainCapProps extends SVGProps<SVGSVGElement> {
+  size?: number | string
+}
+
+/** Skipper-/Kapitänsmütze im Lucide-Strichstil (nicht in lucide-react enthalten). */
+export default function CaptainCap({ size = 24, ...props }: CaptainCapProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={2}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+      {...props}
+    >
+      <path d="M5 11c0-3.5 3-6 7-6s7 2.5 7 6" />
+      <path d="M4 11h16" />
+      <path d="M4 11c0 2.5 3.2 4.5 8 4.5S20 13.5 20 11" />
+      <path d="M8 11h8" />
+    </svg>
+  )
+}

client/src/context/AppTourContext.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from 'vitest'
+import {
+  DEMO_EXCLUDED_STEPS,
+  DEMO_STEP_ORDER,
+  FULL_STEP_ORDER,
+  getTourScrollRetryDelays,
+  getTourTargetRetryDelay,
+  tourStepOpensEntry
+} from './AppTourContext.tsx'
+
+describe('AppTourContext step order', () => {
+  it('includes profile steps before finish in full tour', () => {
+    const profileIndex = FULL_STEP_ORDER.indexOf('nav_profile')
+    const prefsIndex = FULL_STEP_ORDER.indexOf('profile_preferences')
+    const finishIndex = FULL_STEP_ORDER.indexOf('finish')
+
+    expect(profileIndex).toBeGreaterThan(FULL_STEP_ORDER.indexOf('nav_feedback'))
+    expect(prefsIndex).toBe(profileIndex + 1)
+    expect(finishIndex).toBe(prefsIndex + 1)
+    expect(FULL_STEP_ORDER).toContain('profile_vessel_pool')
+    expect(FULL_STEP_ORDER).toContain('profile_crew_pool')
+    expect(FULL_STEP_ORDER).toContain('nav_logbook_crew')
+    expect(FULL_STEP_ORDER.indexOf('profile_vessel_pool')).toBeLessThan(
+      FULL_STEP_ORDER.indexOf('profile_crew_pool')
+    )
+    expect(FULL_STEP_ORDER).toHaveLength(14)
+  })
+
+  it('excludes profile, stats and feedback from demo tour', () => {
+    for (const step of DEMO_EXCLUDED_STEPS) {
+      expect(DEMO_STEP_ORDER).not.toContain(step)
+    }
+    expect(DEMO_STEP_ORDER).toContain('finish')
+    expect(DEMO_STEP_ORDER).toHaveLength(FULL_STEP_ORDER.length - DEMO_EXCLUDED_STEPS.length)
+  })
+
+  it('only opens entry editor on entry_track step', () => {
+    expect(tourStepOpensEntry('entry_open')).toBe(false)
+    expect(tourStepOpensEntry('entry_list')).toBe(false)
+    expect(tourStepOpensEntry('entry_track')).toBe(true)
+  })
+
+  it('retries scroll for entry_track while editor mounts', () => {
+    expect(getTourTargetRetryDelay('entry_track')).toBeGreaterThanOrEqual(400)
+    expect(getTourScrollRetryDelays('entry_track').length).toBeGreaterThan(1)
+  })
+})

client/src/context/AppTourContext.tsx

@@ -11,7 +11,8 @@ import {
 import {
   clearTourCompleted,
   isTourCompleted,
-  markTourCompleted
+  markTourCompleted,
+  resolveTourUserId
 } from '../services/appTourStorage.js'
 import { getStoredDemoFirstEntryId } from '../services/demoLogbook.js'
 import { PlausibleEvents, trackPlausibleEvent } from '../services/analytics.js'
@@ -25,47 +26,130 @@ export type TourStepId =
   | 'entry_open'
   | 'entry_track'
   | 'nav_vessel'
-  | 'nav_crew'
+  | 'profile_vessel_pool'
+  | 'profile_crew_pool'
+  | 'nav_logbook_crew'
+  | 'nav_stats'
+  | 'nav_feedback'
+  | 'nav_profile'
+  | 'profile_preferences'
   | 'finish'
 
 interface TourNavigation {
   setActiveTab: (tab: AppTab) => void
   setSelectedEntryId: (entryId: string | null) => void
+  setFeedbackOpen: (open: boolean) => void
+  setLogbookActive: (active: boolean) => void
+  setProfileOpen: (open: boolean) => void
+  ensureLogbookForTour?: () => Promise<void>
+}
+
+interface DemoTourContext {
+  firstEntryId: string
 }
 
 interface AppTourContextValue {
   isActive: boolean
+  isDemoTour: boolean
   currentStepId: TourStepId | null
   currentStepIndex: number
   totalSteps: number
-  startTour: (options?: { force?: boolean }) => void
+  layoutTick: number
+  startTour: (options?: { force?: boolean; demoMode?: boolean }) => void
   stopTour: () => void
   restartTour: () => void
   nextStep: () => void
   prevStep: () => void
   skipTour: () => void
   registerNavigation: (navigation: TourNavigation) => void
+  registerDemoTourContext: (context: DemoTourContext | null) => void
   requestStartAfterLogin: () => void
 }
 
-const STEP_ORDER: TourStepId[] = [
+export const FULL_STEP_ORDER: TourStepId[] = [
   'welcome',
   'nav_logs',
   'entry_list',
   'entry_open',
   'entry_track',
   'nav_vessel',
-  'nav_crew',
+  'profile_vessel_pool',
+  'profile_crew_pool',
+  'nav_logbook_crew',
+  'nav_stats',
+  'nav_feedback',
+  'nav_profile',
+  'profile_preferences',
   'finish'
 ]
 
+/** Public demo has no stats/feedback/profile UI — skip those steps. */
+export const DEMO_EXCLUDED_STEPS: TourStepId[] = [
+  'profile_crew_pool',
+  'nav_stats',
+  'nav_feedback',
+  'nav_profile',
+  'profile_preferences'
+]
+
+export const DEMO_STEP_ORDER: TourStepId[] = FULL_STEP_ORDER.filter(
+  (id) => !DEMO_EXCLUDED_STEPS.includes(id)
+)
+
+const LOGBOOK_TOUR_STEPS = new Set<TourStepId>([
+  'nav_logs',
+  'entry_list',
+  'entry_open',
+  'entry_track',
+  'nav_vessel',
+  'nav_logbook_crew',
+  'nav_stats',
+  'nav_feedback'
+])
+
+function getStepOrder(demoMode: boolean): TourStepId[] {
+  return demoMode ? DEMO_STEP_ORDER : FULL_STEP_ORDER
+}
+
 const TARGET_BY_STEP: Partial<Record<TourStepId, string>> = {
   nav_logs: '[data-tour="nav-logs"]',
   entry_list: '[data-tour="entry-list"]',
   entry_open: '[data-tour="entry-first"]',
   entry_track: '[data-tour="entry-track"]',
   nav_vessel: '[data-tour="nav-vessel"]',
-  nav_crew: '[data-tour="nav-crew"]'
+  profile_vessel_pool: '[data-tour="profile-vessel-pool"]',
+  profile_crew_pool: '[data-tour="profile-crew-pool"]',
+  nav_logbook_crew: '[data-tour="nav-logbook-crew"]',
+  nav_stats: '[data-tour="stats-dashboard"]',
+  nav_feedback: '[data-tour="feedback-form"]',
+  nav_profile: '[data-tour="nav-profile"]',
+  profile_preferences: '[data-tour="profile-preferences"]'
+}
+
+/** Whether a tour step opens the first log entry editor (not the list card). */
+export function tourStepOpensEntry(stepId: TourStepId): boolean {
+  return stepId === 'entry_track'
+}
+
+export function getTourTargetDelay(stepId: TourStepId): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'nav_feedback') return 180
+  if (
+    stepId === 'nav_profile' ||
+    stepId === 'profile_preferences' ||
+    stepId === 'profile_vessel_pool' ||
+    stepId === 'profile_crew_pool'
+  ) {
+    return 250
+  }
+  return 0
+}
+
+/** Extra scroll attempts while async UI (e.g. entry editor) mounts. */
+export function getTourScrollRetryDelays(stepId: TourStepId): number[] {
+  if (stepId === 'entry_track') return [400, 700, 1100, 1600]
+  const initial = getTourTargetDelay(stepId)
+  return initial > 0 ? [initial] : [0]
 }
 
 const AppTourContext = createContext<AppTourContextValue | null>(null)
@@ -74,59 +158,131 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
   const [isActive, setIsActive] = useState(false)
   const [stepIndex, setStepIndex] = useState(0)
   const [pendingAfterLogin, setPendingAfterLogin] = useState(false)
+  const [isDemoTour, setIsDemoTour] = useState(false)
+  const [layoutTick, setLayoutTick] = useState(0)
   const navigationRef = useRef<TourNavigation | null>(null)
+  const demoContextRef = useRef<DemoTourContext | null>(null)
+  const tourModeRef = useRef<{ demoMode: boolean }>({ demoMode: false })
 
-  const currentStepId = isActive ? STEP_ORDER[stepIndex] ?? null : null
+  const stepOrder = getStepOrder(isDemoTour)
+  const currentStepId = isActive ? stepOrder[stepIndex] ?? null : null
+
+  const resolveFirstEntryId = useCallback((): string | null => {
+    return demoContextRef.current?.firstEntryId ?? getStoredDemoFirstEntryId()
+  }, [])
 
   const applyStepSideEffects = useCallback((stepId: TourStepId) => {
     const nav = navigationRef.current
     if (!nav) return
 
+    if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(true)
+    }
+
     if (stepId === 'nav_logs' || stepId === 'entry_list' || stepId === 'entry_open' || stepId === 'entry_track') {
       nav.setActiveTab('logs')
     }
-    if (stepId === 'entry_open' || stepId === 'entry_track') {
-      const firstEntryId = getStoredDemoFirstEntryId()
+
+    if (stepId === 'entry_list' || stepId === 'entry_open') {
+      nav.setSelectedEntryId(null)
+    } else if (tourStepOpensEntry(stepId)) {
+      const firstEntryId = resolveFirstEntryId()
       if (firstEntryId) nav.setSelectedEntryId(firstEntryId)
+    } else if (LOGBOOK_TOUR_STEPS.has(stepId)) {
+      nav.setSelectedEntryId(null)
     }
+
     if (stepId === 'nav_vessel') {
       nav.setSelectedEntryId(null)
       nav.setActiveTab('vessel')
     }
-    if (stepId === 'nav_crew') {
+    if (stepId === 'profile_vessel_pool' || stepId === 'profile_crew_pool') {
       nav.setSelectedEntryId(null)
+      nav.setLogbookActive(false)
+      nav.setProfileOpen(true)
+    }
+    if (stepId === 'nav_logbook_crew') {
+      nav.setSelectedEntryId(null)
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(true)
       nav.setActiveTab('crew')
     }
-  }, [])
+    if (stepId === 'nav_stats') {
+      nav.setSelectedEntryId(null)
+      nav.setActiveTab('stats')
+    }
+    if (stepId === 'nav_feedback') {
+      nav.setSelectedEntryId(null)
+      nav.setFeedbackOpen(true)
+    } else {
+      nav.setFeedbackOpen(false)
+    }
+
+    if (stepId === 'nav_profile') {
+      nav.setProfileOpen(false)
+      nav.setLogbookActive(false)
+    }
+    if (stepId === 'profile_preferences') {
+      nav.setLogbookActive(false)
+      nav.setProfileOpen(true)
+    }
+  }, [resolveFirstEntryId])
 
   const scrollToCurrentTarget = useCallback((stepId: TourStepId | null) => {
     if (!stepId) return
     const selector = TARGET_BY_STEP[stepId]
     if (!selector) return
-    window.requestAnimationFrame(() => {
-      const el = document.querySelector(selector)
-      el?.scrollIntoView({ behavior: 'smooth', block: 'center', inline: 'nearest' })
-    })
+
+    for (const delayMs of getTourScrollRetryDelays(stepId)) {
+      window.setTimeout(() => {
+        window.requestAnimationFrame(() => {
+          const el = document.querySelector(selector)
+          el?.scrollIntoView({
+            behavior: stepId === 'entry_track' ? 'instant' : 'smooth',
+            block: 'center',
+            inline: 'nearest'
+          })
+        })
+      }, delayMs)
+    }
   }, [])
 
-  const startTour = useCallback((options?: { force?: boolean }) => {
-    const userId = localStorage.getItem('active_userid')
+  const startTour = useCallback((options?: { force?: boolean; demoMode?: boolean }) => {
+    const demoMode = options?.demoMode === true
+    const userId = resolveTourUserId({ demoMode })
     if (!userId) return
     if (!options?.force && isTourCompleted(userId)) return
 
+    tourModeRef.current = { demoMode }
+    setIsDemoTour(demoMode)
     setStepIndex(0)
     setIsActive(true)
   }, [])
 
   const dismissTour = useCallback((outcome: 'completed' | 'skipped', stepIndexAtDismiss: number) => {
-    const userId = localStorage.getItem('active_userid')
+    const userId = resolveTourUserId({ demoMode: tourModeRef.current.demoMode })
     if (userId) markTourCompleted(userId)
+
+    const tourProps = tourModeRef.current.demoMode ? { mode: 'demo' } : undefined
     if (outcome === 'completed') {
-      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_COMPLETED)
+      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_COMPLETED, tourProps)
+      const nav = navigationRef.current
+      if (nav && !tourModeRef.current.demoMode) {
+        nav.setProfileOpen(false)
+        nav.setLogbookActive(true)
+        nav.setSelectedEntryId(null)
+        nav.setActiveTab('stats')
+      }
     } else {
-      const step = STEP_ORDER[stepIndexAtDismiss] ?? 'welcome'
-      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_SKIPPED, { step })
+      const step = getStepOrder(tourModeRef.current.demoMode)[stepIndexAtDismiss] ?? 'welcome'
+      trackPlausibleEvent(PlausibleEvents.ONBOARDING_TOUR_SKIPPED, { step, ...tourProps })
     }
+
+    tourModeRef.current = { demoMode: false }
+    navigationRef.current?.setFeedbackOpen(false)
+    navigationRef.current?.setProfileOpen(false)
+    setIsDemoTour(false)
     setIsActive(false)
     setStepIndex(0)
   }, [])
@@ -140,12 +296,13 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
   }, [dismissTour, stepIndex])
 
   const nextStep = useCallback(() => {
-    if (stepIndex + 1 >= STEP_ORDER.length) {
+    const order = getStepOrder(isDemoTour)
+    if (stepIndex + 1 >= order.length) {
       dismissTour('completed', stepIndex)
       return
     }
     setStepIndex(stepIndex + 1)
-  }, [dismissTour, stepIndex])
+  }, [dismissTour, isDemoTour, stepIndex])
 
   const prevStep = useCallback(() => {
     setStepIndex((current) => Math.max(0, current - 1))
@@ -153,11 +310,28 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
 
   useEffect(() => {
     if (!isActive) return
-    const stepId = STEP_ORDER[stepIndex]
+    const stepId = getStepOrder(isDemoTour)[stepIndex]
     if (!stepId) return
-    applyStepSideEffects(stepId)
-    scrollToCurrentTarget(stepId)
-  }, [isActive, stepIndex, applyStepSideEffects, scrollToCurrentTarget])
+
+    let cancelled = false
+    const run = async () => {
+      if (LOGBOOK_TOUR_STEPS.has(stepId) && !isDemoTour) {
+        await navigationRef.current?.ensureLogbookForTour?.()
+      }
+      if (cancelled) return
+      applyStepSideEffects(stepId)
+      scrollToCurrentTarget(stepId)
+      setLayoutTick((tick) => tick + 1)
+      window.setTimeout(() => {
+        if (!cancelled) setLayoutTick((tick) => tick + 1)
+      }, 150)
+    }
+    void run()
+
+    return () => {
+      cancelled = true
+    }
+  }, [isActive, isDemoTour, stepIndex, applyStepSideEffects, scrollToCurrentTarget])
 
   const restartTour = useCallback(() => {
     const userId = localStorage.getItem('active_userid')
@@ -170,6 +344,10 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
     navigationRef.current = navigation
   }, [])
 
+  const registerDemoTourContext = useCallback((context: DemoTourContext | null) => {
+    demoContextRef.current = context
+  }, [])
+
   const requestStartAfterLogin = useCallback(() => {
     setPendingAfterLogin(true)
   }, [])
@@ -191,9 +369,11 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
   const value = useMemo<AppTourContextValue>(
     () => ({
       isActive,
+      isDemoTour,
       currentStepId,
       currentStepIndex: stepIndex,
-      totalSteps: STEP_ORDER.length,
+      totalSteps: stepOrder.length,
+      layoutTick,
       startTour,
       stopTour,
       restartTour,
@@ -201,19 +381,24 @@ export function AppTourProvider({ children }: { children: ReactNode }) {
       prevStep,
       skipTour,
       registerNavigation,
+      registerDemoTourContext,
       requestStartAfterLogin
     }),
     [
       currentStepId,
       isActive,
+      isDemoTour,
       nextStep,
       prevStep,
+      registerDemoTourContext,
       registerNavigation,
       requestStartAfterLogin,
       restartTour,
       skipTour,
       startTour,
       stepIndex,
+      stepOrder.length,
+      layoutTick,
       stopTour
     ]
   )
@@ -231,8 +416,15 @@ export function useAppTour(): AppTourContextValue {
 
 export function getTourStepCopy(
   stepId: TourStepId,
-  t: (key: string) => string
+  t: (key: string) => string,
+  options?: { demoMode?: boolean }
 ): { title: string; body: string } {
+  if (stepId === 'welcome' && options?.demoMode) {
+    return {
+      title: t('tour.steps.welcome_public.title'),
+      body: t('tour.steps.welcome_public.body')
+    }
+  }
   return {
     title: t(`tour.steps.${stepId}.title`),
     body: t(`tour.steps.${stepId}.body`)
@@ -247,3 +439,10 @@ export function getTourTargetSelector(stepId: TourStepId | null): string | null
 export function isCenteredTourStep(stepId: TourStepId | null): boolean {
   return stepId === 'welcome' || stepId === 'finish'
 }
+
+export function getTourTargetRetryDelay(stepId: TourStepId | null): number {
+  if (stepId === 'entry_track') return 400
+  if (stepId === 'profile_preferences') return 300
+  if (stepId === 'nav_profile') return 200
+  return 120
+}

client/src/context/UnsavedChangesContext.tsx

@@ -0,0 +1,122 @@
+import {
+  createContext,
+  useContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useMemo,
+  type ReactNode
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDialog } from '../components/ModalDialog.tsx'
+
+interface UnsavedChangesContextValue {
+  setDirty: (source: string, dirty: boolean) => void
+  registerSaveHandler: (source: string, handler: (() => Promise<void>) | null) => void
+  confirmLeave: () => Promise<boolean>
+}
+
+const UnsavedChangesContext = createContext<UnsavedChangesContextValue | null>(null)
+
+export function UnsavedChangesProvider({ children }: { children: ReactNode }) {
+  const { t } = useTranslation()
+  const { showConfirmLeave, showAlert } = useDialog()
+  const dirtySources = useRef(new Set<string>())
+  const saveHandlers = useRef(new Map<string, () => Promise<void>>())
+
+  const setDirty = useCallback((source: string, dirty: boolean) => {
+    if (dirty) dirtySources.current.add(source)
+    else dirtySources.current.delete(source)
+  }, [])
+
+  const registerSaveHandler = useCallback((source: string, handler: (() => Promise<void>) | null) => {
+    if (handler) saveHandlers.current.set(source, handler)
+    else saveHandlers.current.delete(source)
+  }, [])
+
+  const confirmLeave = useCallback(async (): Promise<boolean> => {
+    if (dirtySources.current.size === 0) return true
+
+    const canSave = [...dirtySources.current].some((source) => saveHandlers.current.has(source))
+    const choice = await showConfirmLeave(
+      t('common.unsaved_changes_message'),
+      t('common.unsaved_changes_title'),
+      t('common.unsaved_changes_stay'),
+      t('common.unsaved_changes_save_leave'),
+      t('common.unsaved_changes_discard'),
+      { showSave: canSave }
+    )
+
+    if (choice === 'stay') return false
+    if (choice === 'discard') return true
+
+    const handlers = [...dirtySources.current]
+      .map((source) => saveHandlers.current.get(source))
+      .filter((handler): handler is () => Promise<void> => handler != null)
+
+    try {
+      for (const handler of handlers) {
+        await handler()
+      }
+      return true
+    } catch (err) {
+      console.error('Failed to save before leaving:', err)
+      await showAlert(t('errors.save_failed'))
+      return false
+    }
+  }, [showConfirmLeave, showAlert, t])
+
+  useEffect(() => {
+    const handler = (e: BeforeUnloadEvent) => {
+      if (dirtySources.current.size === 0) return
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', handler)
+    return () => window.removeEventListener('beforeunload', handler)
+  }, [])
+
+  const value = useMemo(
+    () => ({ setDirty, registerSaveHandler, confirmLeave }),
+    [setDirty, registerSaveHandler, confirmLeave]
+  )
+
+  return (
+    <UnsavedChangesContext.Provider value={value}>
+      {children}
+    </UnsavedChangesContext.Provider>
+  )
+}
+
+export function useUnsavedChangesContext(): UnsavedChangesContextValue {
+  const ctx = useContext(UnsavedChangesContext)
+  if (!ctx) {
+    throw new Error('useUnsavedChangesContext must be used within UnsavedChangesProvider')
+  }
+  return ctx
+}
+
+/** Register a form/view as having unsaved changes (cleared automatically on unmount). */
+export function useRegisterUnsavedChanges(
+  source: string,
+  isDirty: boolean,
+  onSave?: () => Promise<void>
+) {
+  const { setDirty, registerSaveHandler, confirmLeave } = useUnsavedChangesContext()
+
+  useEffect(() => {
+    setDirty(source, isDirty)
+    return () => setDirty(source, false)
+  }, [source, isDirty, setDirty])
+
+  useEffect(() => {
+    if (!onSave) {
+      registerSaveHandler(source, null)
+      return
+    }
+    registerSaveHandler(source, onSave)
+    return () => registerSaveHandler(source, null)
+  }, [source, onSave, registerSaveHandler])
+
+  return { confirmLeave }
+}

client/src/hooks/usePwaUpdate.ts

@@ -1,11 +1,19 @@
 import { useEffect, useRef } from 'react'
 import { useRegisterSW } from 'virtual:pwa-register/react'
+import {
+  forcePwaRecovery,
+  markReloadAttempt,
+  recentlyAttemptedReload,
+  triggerServiceWorkerUpdate
+} from '../services/pwaStartup.js'
+import { isDeployedVersionNewer } from '../services/pwaVersion.js'
 
-const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000
+const UPDATE_CHECK_INTERVAL_MS = 15 * 60 * 1000
 const UPDATE_SUPPRESS_KEY = 'pwa_update_suppress_until'
 const UPDATE_SUPPRESS_MS = 30_000
-const UPDATE_DISMISS_SUPPRESS_MS = 60 * 60 * 1000
-const UPDATE_RELOAD_FALLBACK_MS = 2000
+const UPDATE_DISMISS_SUPPRESS_MS = 15 * 60 * 1000
+const UPDATE_RELOAD_FALLBACK_MS = 2_000
+const UPDATE_HARD_RECOVERY_MS = 5_000
 
 function isUpdateSuppressed(): boolean {
   const suppressUntil = Number(sessionStorage.getItem(UPDATE_SUPPRESS_KEY) || '0')
@@ -20,64 +28,121 @@ function clearUpdateSuppression(): void {
   sessionStorage.removeItem(UPDATE_SUPPRESS_KEY)
 }
 
-function scheduleUpdateChecks(registration: ServiceWorkerRegistration): () => void {
+function scheduleUpdateChecks(
+  registration: ServiceWorkerRegistration,
+  onOutdated: () => void
+): () => void {
   const checkForUpdate = () => {
     if (isUpdateSuppressed()) return
     registration.update().catch(() => {})
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) onOutdated()
+    })
   }
 
   const onVisibilityChange = () => {
     if (document.visibilityState === 'visible') {
-      checkForUpdate()
+      // Delay check on wake-up to allow the mobile network stack to stabilize
+      setTimeout(checkForUpdate, 2000)
     }
   }
 
+  const onOnline = () => {
+    // Small delay to ensure connection is fully established
+    setTimeout(checkForUpdate, 500)
+  }
+
   document.addEventListener('visibilitychange', onVisibilityChange)
-  const intervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+  window.addEventListener('online', onOnline)
+  const updateIntervalId = window.setInterval(checkForUpdate, UPDATE_CHECK_INTERVAL_MS)
+
+  checkForUpdate()
 
   return () => {
     document.removeEventListener('visibilitychange', onVisibilityChange)
-    window.clearInterval(intervalId)
+    window.removeEventListener('online', onOnline)
+    window.clearInterval(updateIntervalId)
   }
 }
 
+function reloadForServiceWorkerTakeover(): void {
+  if (recentlyAttemptedReload()) return
+  markReloadAttempt()
+  clearUpdateSuppression()
+  window.location.reload()
+}
+
 export function usePwaUpdate() {
   const cleanupRef = useRef<(() => void) | null>(null)
+  const reloadFallbackTimerRef = useRef<number | null>(null)
+  const forceRecoveryTimerRef = useRef<number | null>(null)
+  const setNeedRefreshRef = useRef<((value: boolean) => void) | null>(null)
+  const pendingNeedRefreshRef = useRef<boolean | null>(null)
+
+  const applyNeedRefresh = (value: boolean) => {
+    if (setNeedRefreshRef.current) {
+      setNeedRefreshRef.current(value)
+      return
+    }
+    pendingNeedRefreshRef.current = value
+  }
 
   const {
     needRefresh: [needRefresh, setNeedRefresh],
     updateServiceWorker
   } = useRegisterSW({
-    immediate: true,
+    immediate: !import.meta.env.DEV,
     onNeedReload() {
-      clearUpdateSuppression()
-      setNeedRefresh(false)
-      window.location.reload()
+      if (isUpdateSuppressed()) return
+      applyNeedRefresh(true)
     },
     onNeedRefresh() {
       if (isUpdateSuppressed()) return
-      setNeedRefresh(true)
+      applyNeedRefresh(true)
     },
     onRegisteredSW(_swUrl: string, registration: ServiceWorkerRegistration | undefined) {
       if (!registration) return
 
       if (isUpdateSuppressed() || !registration.waiting) {
-        setNeedRefresh(false)
+        applyNeedRefresh(false)
       }
 
       cleanupRef.current?.()
-      cleanupRef.current = scheduleUpdateChecks(registration)
+      cleanupRef.current = scheduleUpdateChecks(registration, () => {
+        if (isUpdateSuppressed()) return
+        applyNeedRefresh(true)
+      })
     }
   })
 
+  setNeedRefreshRef.current = setNeedRefresh
+
   useEffect(() => {
     if (isUpdateSuppressed()) {
       setNeedRefresh(false)
+    } else if (pendingNeedRefreshRef.current !== null) {
+      const pending = pendingNeedRefreshRef.current
+      pendingNeedRefreshRef.current = null
+      setNeedRefresh(pending)
     }
 
+    void isDeployedVersionNewer().then((outdated) => {
+      if (outdated) {
+        setNeedRefresh(true)
+      }
+    })
+
     return () => {
       cleanupRef.current?.()
       cleanupRef.current = null
+      if (reloadFallbackTimerRef.current !== null) {
+        window.clearTimeout(reloadFallbackTimerRef.current)
+        reloadFallbackTimerRef.current = null
+      }
+      if (forceRecoveryTimerRef.current !== null) {
+        window.clearTimeout(forceRecoveryTimerRef.current)
+        forceRecoveryTimerRef.current = null
+      }
     }
   }, [setNeedRefresh])
 
@@ -86,11 +151,24 @@ export function usePwaUpdate() {
     suppressUpdatePrompt()
 
     await updateServiceWorker(true)
+    await triggerServiceWorkerUpdate()
 
-    // vite-plugin-pwa reloads via the "controlling" event; fallback if that does not fire.
-    window.setTimeout(() => {
-      window.location.reload()
+    if (reloadFallbackTimerRef.current !== null) {
+      window.clearTimeout(reloadFallbackTimerRef.current)
+    }
+    if (forceRecoveryTimerRef.current !== null) {
+      window.clearTimeout(forceRecoveryTimerRef.current)
+    }
+
+    reloadFallbackTimerRef.current = window.setTimeout(() => {
+      reloadFallbackTimerRef.current = null
+      reloadForServiceWorkerTakeover()
     }, UPDATE_RELOAD_FALLBACK_MS)
+
+    forceRecoveryTimerRef.current = window.setTimeout(() => {
+      forceRecoveryTimerRef.current = null
+      void forcePwaRecovery()
+    }, UPDATE_HARD_RECOVERY_MS)
   }
 
   const dismissUpdate = () => {

client/src/hooks/useSyncIndicator.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { useLiveQuery } from 'dexie-react-hooks'
+import { db } from '../services/db.js'
+import { subscribeToSyncState } from '../services/sync.js'
+
+export type SyncConnStatusVariant = 'offline' | 'syncing' | 'pending' | 'online'
+
+/** Maps sync/online state to conn-status CSS modifier classes. */
+export function syncConnStatusClassName(
+  online: boolean,
+  showSpinner: boolean,
+  pendingCount: number
+): string {
+  if (!online) return 'conn-status offline'
+  if (showSpinner) return 'conn-status syncing'
+  if (pendingCount > 0) return 'conn-status warning'
+  return 'conn-status online'
+}
+
+/** Sync queue depth and whether a sync pass is running (for header indicators). */
+export function useSyncIndicator(logbookId?: string | null) {
+  const [isSyncing, setIsSyncing] = useState(false)
+
+  const pendingCount =
+    useLiveQuery(
+      () =>
+        logbookId
+          ? db.syncQueue.where({ logbookId }).count()
+          : db.syncQueue.count(),
+      [logbookId]
+    ) ?? 0
+
+  useEffect(() => {
+    return subscribeToSyncState(setIsSyncing)
+  }, [])
+
+  const showSpinner = isSyncing
+  const showPendingWarning = pendingCount > 0 && !isSyncing
+
+  return {
+    isSyncing,
+    pendingCount,
+    showSpinner,
+    showPendingWarning,
+    connStatusClassName: (online: boolean) =>
+      syncConnStatusClassName(online, showSpinner, pendingCount)
+  }
+}

client/src/i18n/courseDialKeys.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from 'vitest'
+import deJson from './locales/de.json'
+import enJson from './locales/en.json'
+
+const resources = {
+  de: { translation: deJson.translation },
+  en: { translation: enJson.translation }
+}
+
+describe('course dial i18n keys', () => {
+  it.each([
+    'logs.event_course_section',
+    'logs.course_tab_mgk',
+    'logs.course_tab_rwk',
+    'logs.course_dial_hint',
+    'logs.course_step_fine',
+    'logs.wind_mode_cardinal'
+  ])('resolves %s in de and en bundles', async (key) => {
+    const { default: i18n } = await import('i18next')
+    await i18n.init({ lng: 'de', resources, defaultNS: 'translation' })
+    expect(i18n.t(key)).not.toBe(key)
+    await i18n.changeLanguage('en')
+    expect(i18n.t(key)).not.toBe(key)
+  })
+})

client/src/i18n/index.ts

@@ -1,25 +1,43 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
 import LanguageDetector from 'i18next-browser-languagedetector'
-import enTranslation from './locales/en.json'
-import deTranslation from './locales/de.json'
+import enJson from './locales/en.json'
+import deJson from './locales/de.json'
+import daJson from './locales/da.json'
+import svJson from './locales/sv.json'
+import nbJson from './locales/nb.json'
+import { initSeo } from '../utils/seo.js'
+import { SUPPORTED_LANGUAGES } from '../utils/i18nLanguages.js'
+
+/** JSON files wrap strings in `translation` — register that namespace explicitly. */
+const resources = {
+  en: { translation: enJson.translation },
+  de: { translation: deJson.translation },
+  da: { translation: daJson.translation },
+  sv: { translation: svJson.translation },
+  nb: { translation: nbJson.translation }
+}
 
 i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    resources: {
-      en: enTranslation,
-      de: deTranslation
-    },
+    resources,
+    defaultNS: 'translation',
     fallbackLng: 'en',
+    supportedLngs: [...SUPPORTED_LANGUAGES],
+    nonExplicitSupportedLngs: true,
+    load: 'languageOnly',
     interpolation: {
       escapeValue: false // React already escapes values (prevents XSS)
     },
     detection: {
-      order: ['localStorage', 'navigator'],
+      order: ['querystring', 'localStorage', 'navigator'],
+      lookupQuerystring: 'lng',
       caches: ['localStorage']
     }
   })
 
+initSeo(i18n)
+
 export default i18n

client/src/i18n/localeKeys.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import deJson from '../i18n/locales/de.json'
+import enJson from '../i18n/locales/en.json'
+import daJson from '../i18n/locales/da.json'
+import svJson from '../i18n/locales/sv.json'
+import nbJson from '../i18n/locales/nb.json'
+
+function collectKeys(obj: Record<string, unknown>, prefix = ''): string[] {
+  const keys: string[] = []
+  for (const [key, value] of Object.entries(obj)) {
+    const path = prefix ? `${prefix}.${key}` : key
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      keys.push(...collectKeys(value as Record<string, unknown>, path))
+    } else {
+      keys.push(path)
+    }
+  }
+  return keys.sort()
+}
+
+const bundles = {
+  de: deJson.translation,
+  en: enJson.translation,
+  da: daJson.translation,
+  sv: svJson.translation,
+  nb: nbJson.translation
+} as const
+
+describe('i18n locale key parity', () => {
+  const masterKeys = collectKeys(bundles.de)
+
+  it.each(Object.keys(bundles).filter((lang) => lang !== 'de'))(
+    '%s has the same keys as de',
+    (lang) => {
+      const keys = collectKeys(bundles[lang as keyof typeof bundles])
+      expect(keys).toEqual(masterKeys)
+    }
+  )
+})

client/src/i18n/locales/en.json

@@ -2,12 +2,40 @@
   "translation": {
     "app": {
       "name": "Kapteins Daagbok",
-      "tagline": "Private Yacht Logbook"
+      "tagline": "Private Yacht Logbook",
+      "beta": "Beta",
+      "beta_hint": "Beta release — features may still change"
+    },
+    "languages": {
+      "de": "Deutsch",
+      "en": "English",
+      "da": "Dansk",
+      "sv": "Svenska",
+      "nb": "Norsk"
+    },
+    "dialog": {
+      "ok": "OK",
+      "yes": "Yes",
+      "no": "No"
+    },
+    "errors": {
+      "load_failed": "Could not load data.",
+      "save_failed": "Could not save changes.",
+      "delete_failed": "Could not delete.",
+      "export_failed": "Export failed."
+    },
+    "common": {
+      "unsaved_changes_title": "Unsaved changes",
+      "unsaved_changes_message": "You have unsaved changes. Leave this page anyway? Your changes will be lost.",
+      "unsaved_changes_stay": "Stay",
+      "unsaved_changes_save_leave": "Save & leave",
+      "unsaved_changes_discard": "Discard",
+      "unsaved_changes_leave": "Leave"
     },
     "nav": {
       "dashboard": "Dashboard",
       "vessel": "Vessel Profile",
-      "crew": "Crew List",
+      "crew": "Crew",
       "deviation": "Deviation Table",
       "logs": "Logbook Entries",
       "stats": "Statistics",
@@ -38,6 +66,7 @@
       "error_incorrect_recovery": "Incorrect recovery phrase. Decryption failed.",
       "error_decryption_failed": "Decryption failed. Please check your recovery phrase.",
       "or_register": "or register",
+      "explore_demo": "Explore demo without account",
       "username_placeholder": "Username / Skipper Name",
       "processing": "Processing...",
       "help": "Help",
@@ -52,7 +81,12 @@
       "enter_pin_placeholder": "Enter your PIN...",
       "decrypt_with_pin": "Decrypt",
       "use_recovery_instead": "Use recovery phrase instead",
-      "error_incorrect_pin": "Incorrect PIN. Decryption failed."
+      "error_incorrect_pin": "Incorrect PIN. Decryption failed.",
+      "error_invalid_host": "Passkeys do not work on 127.0.0.1. Please open the app via localhost.",
+      "use_localhost_link": "Switch to localhost",
+      "error_passkey_cancelled": "Passkey sign-in was cancelled or timed out. Please try again.",
+      "error_invalid_rp_id": "Passkey domain mismatch (RP ID). For local dev use http://localhost:5173 with RP_ID=localhost in .env.",
+      "error_session_incomplete": "Sign-in incomplete. Please sign in with your passkey again."
     },
     "pwa": {
       "title": "Install app",
@@ -71,12 +105,18 @@
       "update_title": "Update available",
       "update_desc": "A new version of Kapteins Daagbok is ready. Reload to get the latest changes.",
       "update_now": "Reload now",
-      "update_reloading": "Reloading…"
+      "update_reloading": "Reloading…",
+      "storage_persist_hint": "Your browser may delete offline data. Allow persistent storage to keep your logbook safe (browser settings or when prompted)."
     },
     "sync": {
       "status_synced": "Synced",
+      "status_syncing": "Syncing…",
       "status_offline": "Offline Cache",
-      "status_unsynced": "Unsynced changes"
+      "status_unsynced": "Unsynced changes",
+      "conflict_title": "Sync conflict",
+      "conflict_message": "{{count}} change(s) could not be synced (entry {{id}}…). Choose which version to keep.",
+      "conflict_use_server": "Use server version",
+      "conflict_keep_local": "Keep my version"
     },
     "vessel": {
       "title": "Vessel Master Data",
@@ -107,20 +147,38 @@
       "no_sails": "No sails defined.",
       "photo_add": "Add Photo",
       "photo_change": "Change Photo",
-      "photo_delete": "Delete Photo"
+      "photo_delete": "Delete Photo",
+      "tanks_section": "Tanks (capacity)",
+      "tanks_help": "Optional, in liters — enables sliders in the journal when tank sizes are known.",
+      "freshwater_capacity_l": "Freshwater (liters)",
+      "fuel_capacity_l": "Fuel (liters)",
+      "greywater_capacity_l": "Greywater (liters)",
+      "invalid_tank_liters": "Invalid number — please enter capacity in liters (e.g. 200)."
     },
     "logs": {
       "title": "Logbook Journal",
       "new_entry": "New Travel Day",
       "travel_details": "Travel Details",
       "add_event": "Add Event Log Record",
+      "add_event_btn": "Add Event Entry",
+      "edit_event": "Edit event",
+      "save_event_btn": "Save changes",
+      "cancel_event_edit": "Cancel",
+      "delete_event": "Delete event",
+      "sign_cleared_skipper_re_sign_title": "Skipper signature removed",
+      "sign_cleared_skipper_re_sign": "The event log was changed. The skipper signature was removed. Please sign again.",
       "date": "Date",
-      "day_of_travel": "Day of Travel",
+      "day_of_travel": "Travel day",
+      "travel_day_number": "Travel day {{number}}",
       "departure": "Departure Port (von)",
       "destination": "Destination Port (nach)",
       "route": "Route / Journey",
       "freshwater": "Freshwater (Liters)",
       "fuel": "Fuel (Liters)",
+      "greywater": "Greywater (Liters)",
+      "greywater_level": "Fill level",
+      "tank_slider_of_max": "{{current}} / {{max}} L",
+      "tank_capacity_tooltip": "If tank capacities (liters) are set in vessel master data, you can enter fill levels here using sliders.",
       "morning": "Morning Level",
       "refilled": "Refilled",
       "evening": "Evening Level",
@@ -135,12 +193,17 @@
       "sign_passkey_signing": "Requesting Passkey…",
       "sign_passkey_signed": "Signed by {{username}}",
       "sign_passkey_export": "Passkey: {{username}} ({{date}})",
+      "sign_attribution_export": "{{username}} ({{date}})",
       "sign_passkey_clear": "Remove Passkey signature",
       "sign_mode_passkey": "Passkey",
       "sign_mode_classic": "Classic",
       "sign_passkey_failed": "Passkey signing failed",
       "sign_passkey_cancelled": "Passkey signing cancelled",
       "sign_invalid": "Signature invalid — entry content changed",
+      "sign_badge_skipper": "Skipper",
+      "sign_badge_skipper_invalid": "Invalid",
+      "sign_badge_skipper_title_valid": "Signed by skipper",
+      "sign_badge_skipper_title_invalid": "Skipper signature invalid — entry content changed",
       "sign_classic_or_passkey": "Optional: sign classically below or use Passkey above",
       "sign_crew_passkey_hint": "Write collaborators can sign with their Passkey",
       "sign_offline_hint": "Passkey signing requires internet — classic signature works offline",
@@ -158,10 +221,102 @@
       "saving": "Saving...",
       "saved": "Logbook page saved successfully!",
       "loading": "Loading journal...",
+      "view_mode_label": "View",
+      "view_list": "List",
+      "live_mode": "Live",
+      "live_title": "Live Journal",
+      "live_loading": "Loading live journal...",
+      "live_retry": "Try again",
+      "live_load_error": "Could not load live journal.",
+      "live_action_error": "Could not save entry.",
+      "live_open_editor": "Full editor",
+      "live_actions_label": "Quick actions",
+      "live_stream_label": "Event log",
+      "live_stream_title": "Journal",
+      "live_no_events": "No entries yet — tap an action.",
+      "live_motor_start": "Engine Start",
+      "live_motor_stop": "Engine Stop",
+      "live_cast_off": "Cast off",
+      "live_moor": "Moor",
+      "live_sails_btn": "Sails",
+      "live_sails_pick": "Select sails",
+      "live_sails_pick_hint": "Tap multiple sails (tap again to deselect), then log.",
+      "live_sails_selected": "Selected: {{sails}}",
+      "live_sails_confirm": "Log entry",
+      "live_sails_confirm_count": "Log entry ({{count}})",
+      "live_sails": "Sails: {{sails}}",
+      "live_fix": "Fix",
+      "live_fix_coords": "Fix {{lat}}, {{lng}}",
+      "live_fix_manual_hint": "GPS unavailable. Enter latitude and longitude manually, or try again with the GPS button.",
+      "live_fix_gps_loading": "Getting GPS position…",
+      "live_fix_invalid": "Please enter valid coordinates (latitude −90…90, longitude −180…180).",
+      "live_fix_lat_placeholder": "Latitude (Lat)",
+      "live_fix_lng_placeholder": "Longitude (Lng)",
+      "live_photo_btn": "Photo (camera)",
+      "live_photo_capture_btn": "Capture",
+      "live_photo_save_btn": "Save",
+      "live_photo_retake_btn": "Retake",
+      "live_photo_capture_failed": "Capture failed. Please try again.",
+      "live_photo_open_camera_btn": "Open camera",
+      "live_photo_native_hint": "Take a photo with your device camera, then save it here.",
+      "live_photo_camera_starting": "Starting camera…",
+      "live_photo_camera_denied": "Camera access denied or unavailable.",
+      "live_photo_camera_unavailable": "Camera is not supported in this browser.",
+      "live_photo_error": "Could not save photo.",
+      "live_photo_entry": "Photo: {{caption}}",
+      "live_photo_entry_plain": "Photo captured",
+      "live_undo_photo_hint": "Photo saved",
+      "live_comment_btn": "Comment",
+      "live_comment_placeholder": "Enter text…",
+      "live_comment_confirm": "Log entry",
+      "live_gps_error": "Could not determine GPS position.",
+      "live_gps_start_hint": "Always start your day's voyage with a position fix.",
+      "live_event_generic": "Event",
+      "live_weather_btn": "Weather",
+      "live_weather_owm_btn": "Fetch OpenWeatherMap weather",
+      "live_weather_owm_loading": "Loading weather…",
+      "live_weather_fix_required": "Log a GPS fix first (Fix button) to fetch OpenWeatherMap weather. The position must be at most 6 hours old.",
+      "live_weather_fix_stale": "The last GPS fix is older than 6 hours. Log a new fix before fetching weather.",
+      "live_wind_btn": "Wind",
+      "live_temp_btn": "Temp °C",
+      "live_pressure_btn": "Pressure",
+      "live_precip_btn": "Precipitation",
+      "live_sea_state_btn": "Sea state",
+      "live_visibility_btn": "Visibility",
+      "live_course_btn": "Course",
+      "live_fuel_btn": "Fuel",
+      "live_water_btn": "Water",
+      "live_wind_entry": "Wind {{value}}",
+      "live_temp_entry": "Temperature {{temp}} °C",
+      "live_pressure_entry": "Pressure {{value}} hPa",
+      "live_precip_entry": "Precipitation {{value}}",
+      "live_sea_state_entry": "Sea state {{value}}",
+      "live_visibility_entry": "Visibility {{value}}",
+      "live_course_entry": "Course {{course}}",
+      "live_fuel_entry": "Fuel +{{liters}} L",
+      "live_water_entry": "Water +{{liters}} L",
+      "live_auto_position": "Auto position",
+      "live_undo_hint": "Entry saved",
+      "live_undo_btn": "Undo",
+      "live_pressure_placeholder": "e.g. 1013",
+      "live_temp_placeholder": "e.g. 18",
+      "live_precip_placeholder": "e.g. light rain",
+      "live_sea_state_placeholder": "e.g. 3",
+      "live_visibility_placeholder": "e.g. 10 km",
+      "live_course_placeholder": "e.g. 245",
+      "live_fuel_placeholder": "Liters refilled",
+      "live_water_placeholder": "Liters refilled",
+      "live_sog_btn": "SOG",
+      "live_stw_btn": "STW",
+      "live_sog_entry": "SOG {{speed}} kn",
+      "live_stw_entry": "STW {{speed}} kn",
+      "live_sog_placeholder": "e.g. 5.2",
+      "live_stw_placeholder": "e.g. 4.8",
+      "live_sog_hint": "Speed over ground (kn) — prefilled from GPS when available.",
       "delete_entry": "Delete Day",
       "delete_confirm": "Are you sure you want to permanently delete this travel day?",
       "carry_over_tanks_title": "Carry over from previous day?",
-      "carry_over_tanks_confirm": "Use the previous travel day's destination as departure port and closing tank levels as morning levels?\n\nDeparture port: {{departure}}\nFreshwater: {{fw}} L\nFuel: {{fuel}} L",
+      "carry_over_tanks_confirm": "Use the previous travel day's destination as departure port and closing tank levels as morning levels?\n\nDeparture port: {{departure}}\nFreshwater: {{fw}} L\nFuel: {{fuel}} L\nGreywater: {{greywater}} L",
       "carry_over_tanks_yes": "Carry over",
       "carry_over_tanks_no": "Start at 0",
       "event_title": "Chronological Event Logbook",
@@ -169,9 +324,32 @@
       "event_time": "Time",
       "event_mgk": "MgK Course",
       "event_rwk": "RwK Course",
+      "event_course_section": "Course",
+      "course_dial_hint": "Drag the ring or enter degrees",
+      "course_dial_step_label": "Step size",
+      "course_step_fine": "1°",
+      "course_step_medium": "5°",
+      "course_step_coarse": "10°",
+      "course_tab_mgk": "MgK",
+      "course_tab_rwk": "rwK",
+      "course_invalid": "Invalid course (0–360)",
+      "course_placeholder_degrees": "e.g. 180",
+      "course_placeholder_cardinal": "e.g. NW",
+      "compass_n": "N",
+      "compass_e": "E",
+      "compass_s": "S",
+      "compass_w": "W",
+      "wind_mode_cardinal": "Cardinal",
+      "wind_mode_degrees": "As degrees",
       "event_wind_direction": "Wind Dir",
       "event_wind_strength": "Wind Str",
       "event_sea_state": "Sea State",
+      "event_visibility": "Visibility",
+      "event_visibility_placeholder": "e.g. 10 km",
+      "weather_slider_unset": "—",
+      "weather_slider_pressure": "{{value}} hPa",
+      "weather_slider_sea_state": "State {{value}}",
+      "weather_slider_heel": "{{value}}°",
       "event_weather": "Weather",
       "event_log": "Log (nm)",
       "event_gps": "GPS Position",
@@ -180,15 +358,32 @@
       "event_remarks": "Remarks / Events",
       "gps_btn": "Get GPS Location",
       "weather_btn": "Fetch OpenWeatherMap Weather",
+      "weather_offline": "OpenWeatherMap requires an internet connection. You are currently offline.",
       "event_wind_pressure": "Barometer (hPa)",
       "event_heel": "Heel Angle (°)",
       "event_sails": "Sails / Motor Status",
       "motor_propulsion": "Engine Propulsion",
+      "sails_picker_show_more": "Show all sails",
+      "sails_picker_show_less": "Show less",
+      "motor_hours": "Engine hours (total)",
+      "fuel_per_motor_hour": "Consumption per engine hour",
       "event_distance": "Distance (nm)",
       "export_csv": "Download CSV",
       "share_csv": "Share CSV",
       "export_pdf": "Download PDF",
       "exporting_pdf": "Generating PDF...",
+      "ai_summary_title": "AI Summary",
+      "ai_summary_read_only": "Created by the skipper — read-only for crew.",
+      "ai_summary_empty": "No summary yet.",
+      "ai_summary_generate": "Generate summary",
+      "ai_summary_regenerate": "Regenerate",
+      "ai_summary_generating": "Generating…",
+      "ai_summary_attempts_remaining": "{{remaining}} of {{max}} attempts remaining",
+      "ai_summary_error": "AI summary failed. Please try again later.",
+      "ai_summary_error_no_key": "No OpenRouter API key configured on the server.",
+      "ai_summary_error_rate_limited": "Maximum number of generations reached for this travel day.",
+      "ai_summary_error_forbidden": "Only the skipper may generate AI summaries.",
+      "ai_summary_offline": "AI summary generation requires an internet connection. You are currently offline.",
       "photos_title": "Photo Attachments (E2E Encrypted)",
       "photo_caption_label": "Photo Caption / Label (Optional)",
       "photo_caption_placeholder": "e.g. Setting sails near harbor entrance",
@@ -213,6 +408,56 @@
       "track_map_end": "End",
       "track_map_speed_slow": "slow",
       "track_map_speed_fast": "fast",
+      "nmea_import_title": "Import NMEA log",
+      "nmea_import_intro": "Upload a .nmea file from your onboard logger. The app suggests journal entries — you choose what to import.",
+      "nmea_import_btn": "Import NMEA",
+      "nmea_file_label": "NMEA file",
+      "nmea_stats": "{{lines}} sentences parsed · types: {{types}}",
+      "nmea_warn_no_position": "No position sentences found — track and GPS fields may stay empty.",
+      "nmea_warn_duplicate_file": "This NMEA file has already been imported. Importing the same file again will add duplicate journal entries.",
+      "nmea_mode_label": "Generate journal entries",
+      "nmea_mode_interval": "By time interval",
+      "nmea_mode_change": "On significant change",
+      "nmea_mode_both": "Both (merge)",
+      "nmea_interval_label": "Interval (minutes)",
+      "nmea_import_track": "Import GPS track from NMEA",
+      "nmea_preview": "Preview",
+      "nmea_preview_hint": "{{count}} suggested journal entries",
+      "nmea_select_all": "Select all",
+      "nmea_select_none": "Select none",
+      "nmea_source_interval": "Interval",
+      "nmea_source_change": "Event",
+      "nmea_apply": "Apply to journal",
+      "nmea_back": "Back",
+      "nmea_cancel": "Cancel",
+      "nmea_archive_question": "Archive raw log locally? (This device only, not synced.)",
+      "nmea_archive_keep": "Archive",
+      "nmea_archive_discard": "Discard",
+      "nmea_archive_stored": "NMEA archived: {{name}}",
+      "nmea_archive_delete_confirm": "Delete archived NMEA log from this device?",
+      "nmea_error_no_samples": "No usable NMEA sentences in the file.",
+      "nmea_error_parse": "Could not read NMEA file.",
+      "nmea_error_read": "Could not read file.",
+      "nmea_error_no_file": "Please choose an NMEA file first.",
+      "nmea_error_no_selection": "Please select at least one journal entry.",
+      "nmea_remark_interval": "NMEA interval",
+      "nmea_remark_uncertain": "uncertain",
+      "nmea_remark_depth": "Depth {{depth}} m",
+      "nmea_change_course": "Course change {{from}}° → {{to}}°",
+      "nmea_change_wind": "Wind {{from}}° → {{to}}°",
+      "nmea_change_wind_speed": "Wind {{from}} → {{to}} kn",
+      "nmea_change_pressure": "Pressure {{from}} → {{to}} hPa",
+      "nmea_change_depth": "Depth {{from}} → {{to}} m",
+      "nmea_change_engine_start": "Engine on ({{rpm}} rpm)",
+      "nmea_change_engine_stop": "Engine off",
+      "nmea_change_autopilot_on": "Autopilot on",
+      "nmea_change_autopilot_off": "Autopilot off",
+      "nmea_change_gps_lost": "GPS fix lost",
+      "nmea_change_gps_regained": "GPS fix restored",
+      "nmea_change_water_temp": "Water temp. {{from}} → {{to}} °C",
+      "nmea_change_departure": "Departure / underway",
+      "nmea_change_anchor": "Anchored / stop",
+      "nmea_change_speed": "Speed {{from}} → {{to}} kn",
       "track_map_error": "Could not load map.",
       "exporting": "Exporting...",
       "share_unsupported": "Web sharing is not supported on this device. File downloaded instead.",
@@ -231,21 +476,236 @@
       "create_btn": "Create Logbook",
       "new_logbook_placeholder": "Logbook or Yacht Name",
       "logout": "Logout",
-      "delete_confirm": "Are you sure you want to permanently delete this logbook? All local cache and server backups will be destroyed.",
+      "logged_in_as": "Signed in as {{name}}",
+      "delete_confirm": "Are you sure you want to permanently delete this logbook? All local data and server copies will be destroyed.\n\nTip: Create a backup first under Settings → Backup & restore (.daagbok.json) if you may need the data later.",
       "no_logbooks": "No logbooks found. Create your first logbook to begin!",
       "loading": "Loading logbooks...",
       "status_synced": "Synced",
       "status_local": "Local Cache Only",
-      "delete_btn": "Delete logbook"
+      "delete_btn": "Delete logbook",
+      "section_owned": "My logbooks",
+      "section_shared": "Shared logbooks",
+      "section_shared_hint": "You were invited as crew. Skipper profile and settings belong to the owner.",
+      "role_owner": "Own logbook",
+      "role_owner_hint": "You own this logbook and act as skipper",
+      "role_crew": "Crew access",
+      "role_crew_hint": "Invited logbook — you can collaborate and sign as crew",
+      "role_read": "Read only",
+      "role_read_hint": "Shared logbook — view only, no editing",
+      "open_profile": "Open profile for {{name}}",
+      "open_logbook": "Open logbook “{{title}}”",
+      "edit_title": "Rename Logbook",
+      "edit_placeholder": "New name of the logbook",
+      "edit_success": "Logbook renamed successfully",
+      "edit_btn": "Rename",
+      "filter_label": "Filter logbooks",
+      "filter_placeholder": "Name, year, date, crew or vessel …",
+      "filter_clear": "Clear filter",
+      "filter_results": "{{count}} matches",
+      "filter_no_results": "No logbooks match your search. Try a different name or year.",
+      "sort_label": "Sort",
+      "sort_by_label": "Sort by",
+      "sort_by_name": "Name",
+      "sort_by_date": "Date",
+      "sort_dir_label": "Order",
+      "sort_asc": "Ascending",
+      "sort_desc": "Descending",
+      "sort_name_asc": "Name A to Z",
+      "sort_name_desc": "Name Z to A",
+      "sort_date_asc": "Oldest first",
+      "sort_date_desc": "Newest first"
+    },
+    "profile": {
+      "title": "User profile",
+      "subtitle": "Account, passkeys and statistics for {{name}}",
+      "back": "Back to dashboard",
+      "loading": "Loading profile…",
+      "load_error": "Could not load profile.",
+      "copy_failed": "Copy failed.",
+      "processing": "Processing…",
+      "identity_title": "Account identity",
+      "username": "Username",
+      "user_id": "User ID",
+      "copy_user_id": "Copy user ID",
+      "account_since": "Account since",
+      "prf_status": "Passkey key derivation (PRF)",
+      "prf_active": "Active",
+      "prf_inactive": "Not configured",
+      "passkeys_title": "Passkeys",
+      "passkeys_desc": "Register a passkey on each device you use. This helps when switching platforms or browsers.",
+      "passkeys_empty": "No passkeys found.",
+      "add_passkey_btn": "Add new passkey",
+      "add_passkey_success": "Passkey added successfully.",
+      "add_passkey_failed": "Could not add passkey.",
+      "remove_passkey_btn": "Remove passkey",
+      "remove_passkey_last_title": "Last passkey",
+      "remove_passkey_last_desc": "The only passkey cannot be removed without losing access to your account. To delete the account entirely, use the danger zone at the bottom of this page.",
+      "remove_passkey_failed": "Could not remove passkey.",
+      "remove_passkey_confirm_title": "Remove passkey?",
+      "remove_passkey_confirm_desc": "This device will no longer be able to sign in with this passkey.",
+      "remove_passkey_confirm_yes": "Remove",
+      "remove_passkey_confirm_no": "Cancel",
+      "pin_title": "Local PIN",
+      "pin_status": "Status",
+      "pin_active": "Active on this device",
+      "pin_inactive": "Not configured",
+      "pin_confirm_label": "Confirm PIN",
+      "pin_confirm_placeholder": "Re-enter PIN",
+      "pin_set_btn": "Set PIN",
+      "pin_change_btn": "Change PIN",
+      "pin_remove_btn": "Remove PIN",
+      "pin_saved": "PIN saved.",
+      "pin_save_failed": "Could not save PIN.",
+      "pin_mismatch": "PIN entries do not match.",
+      "pin_length_error": "PIN must be at least 4 characters.",
+      "pin_no_session": "Session expired — please sign in again.",
+      "remove_pin_confirm_title": "Remove PIN?",
+      "remove_pin_confirm_desc": "You will need to sign in on this device with passkey or recovery phrase again.",
+      "remove_pin_confirm_yes": "Remove PIN",
+      "remove_pin_confirm_no": "Cancel",
+      "security_title": "Security checklist",
+      "security_desc": "Overview of the most important protections for your account.",
+      "security_passkeys_ok": "At least one passkey registered",
+      "security_passkeys_missing": "No passkey registered",
+      "security_prf_ok": "PRF key derivation active",
+      "security_prf_missing": "PRF not configured",
+      "security_pin_ok": "Local PIN on this device",
+      "security_pin_missing": "No local PIN",
+      "security_recovery_ok": "Recovery phrase configured",
+      "security_recovery_hint": "The 12 words were shown at registration. Store them offline and separately from this device. You can create a new phrase below — the old one will then be invalidated.",
+      "recovery_rotate_btn": "Create new recovery phrase",
+      "recovery_rotate_confirm_title": "Create new recovery phrase?",
+      "recovery_rotate_confirm_desc": "Your previous 12-word phrase will be invalidated immediately. Make sure you can store the new phrase securely before continuing.",
+      "recovery_rotate_confirm_yes": "Create new phrase",
+      "recovery_rotate_confirm_no": "Cancel",
+      "recovery_rotate_new_warning": "IMPORTANT: Write down these 12 words and store them offline. Your previous recovery phrase is no longer valid.",
+      "recovery_rotate_failed": "Could not create a new recovery phrase.",
+      "recovery_rotate_no_session": "Encryption session expired — please sign out and sign in again, then retry.",
+      "device_title": "This device",
+      "device_desc": "Local cache, sync status, and quick login on this browser.",
+      "device_sync_pending": "{{count}} pending sync items",
+      "device_sync_ok": "All local changes synced",
+      "device_remembered": "Account saved for quick login on this device",
+      "device_not_remembered": "Account not in the quick-login list",
+      "device_forget_btn": "Forget account on this device",
+      "device_forget_confirm_title": "Remove quick login?",
+      "device_forget_confirm_desc": "The account will be removed from the quick-login list on this device. Your session and local logbooks stay on this device.",
+      "device_forget_confirm_yes": "Remove",
+      "device_forget_confirm_no": "Cancel",
+      "passkey_label": "Name for new passkey (optional)",
+      "passkey_label_placeholder": "e.g. MacBook, iPhone",
+      "passkey_rename_btn": "Save name",
+      "passkey_rename_success": "Passkey name saved.",
+      "passkey_rename_failed": "Could not save passkey name.",
+      "passkey_unnamed": "Unnamed passkey",
+      "stats_title": "Statistics",
+      "stats_subtitle": "Across all your logbooks on this device",
+      "stats_logbooks": "Logbooks",
+      "stats_account_since": "Account since",
+      "stats_shared_logbooks": "Shared logbooks",
+      "appearance_title": "App & appearance",
+      "appearance_desc": "Theme and color scheme apply to the entire app on this device.",
+      "theme_label": "Application style / theme",
+      "theme_auto": "Auto (OS detect)",
+      "theme_ocean": "Ocean (glassmorphism)",
+      "theme_material": "Material (Android)",
+      "theme_cupertino": "Cupertino (iOS)",
+      "color_scheme_label": "Light or dark mode",
+      "color_scheme_auto": "Auto (system)",
+      "color_scheme_light": "Light",
+      "color_scheme_dark": "Dark",
+      "integrations_title": "Integrations",
+      "owm_key": "OpenWeatherMap API key",
+      "owm_help": "Optional: your own OpenWeatherMap API key. If left empty, the operator-configured server key is used.",
+      "prefs_save": "Save",
+      "prefs_saving": "Saving…",
+      "prefs_saved": "Saved",
+      "tour_title": "App tour",
+      "tour_desc": "Take a guided walkthrough of the main areas of the app again.",
+      "tour_restart": "Restart tour",
+      "push_title": "Push notifications",
+      "push_desc": "As logbook owner you are notified when invited crew members sync changes. No logbook content is sent in plain text.",
+      "push_enable": "Notify on crew changes",
+      "push_active": "Push notifications are active on this device.",
+      "push_unsupported": "Push notifications are not supported in this browser.",
+      "push_denied_hint": "Notifications are blocked. Allow them in your browser or device settings.",
+      "push_ios_install_hint": "On iPhone/iPad: add the app to your Home Screen (iOS 16.4+) to use push notifications.",
+      "push_error": "Could not enable push notifications.",
+      "sections": {
+        "account": "Account & settings",
+        "fleet": "Fleet & crew",
+        "security": "Security & device",
+        "stats": "Statistics",
+        "danger": "Danger zone"
+      }
+    },
+    "vessel_pool": {
+      "title": "Vessel fleet",
+      "section_title": "Your vessels",
+      "subtitle": "Maintain all vessels for your logbooks here. Select the active vessel per logbook from this list.",
+      "loading": "Loading vessel fleet…",
+      "add_vessel": "Add vessel",
+      "edit_vessel": "Edit vessel",
+      "no_vessels": "No vessels in the pool yet.",
+      "delete_confirm": "Remove this vessel from the fleet?",
+      "max_vessels": "Maximum of 20 vessels in the pool reached."
+    },
+    "logbook_vessel": {
+      "title": "Vessel for this logbook",
+      "subtitle": "Choose the vessel for this logbook. Travel days use sails and tank data from the selected vessel.",
+      "active_vessel": "Vessel for this logbook",
+      "no_vessels_in_pool": "No vessel in the fleet — add one in your user profile first.",
+      "no_vessel": "No vessel selected",
+      "unnamed": "Unnamed",
+      "save": "Save vessel",
+      "saved": "Logbook vessel saved.",
+      "selection_only_hint": "You see the vessel chosen by the owner (shared logbook).",
+      "manage_in_profile": "Manage vessels in user profile"
+    },
+    "person_pool": {
+      "title": "Core Crew & skippers",
+      "subtitle": "Maintain your person pool here — skippers and crew for all logbooks. Select active crew per logbook and travel day from this pool.",
+      "loading": "Loading person pool…",
+      "skippers_section": "Skippers",
+      "crew_section": "Core Crew",
+      "add_skipper": "Add skipper",
+      "add_crew": "Add crew member",
+      "edit_skipper": "Edit skipper",
+      "no_skippers": "No skippers in the pool yet.",
+      "no_crew": "No crew members in the pool yet.",
+      "delete_confirm": "Remove this person from the pool?"
+    },
+    "logbook_crew": {
+      "title": "Crew for this logbook",
+      "subtitle": "Choose skipper and crew for this logbook. New travel days inherit this selection by default.",
+      "loading": "Loading crew…",
+      "active_skipper": "Skipper for this logbook",
+      "active_crew": "Crew for this logbook",
+      "no_skippers_in_pool": "No skipper in the pool — add one in your user profile first.",
+      "no_crew_in_pool": "No crew in the pool — add members in your user profile first.",
+      "no_skipper": "No skipper selected",
+      "unnamed": "Unnamed",
+      "save": "Save crew",
+      "saved": "Logbook crew saved.",
+      "selection_only_hint": "You see the crew set by the owner (shared logbook)."
+    },
+    "entry_crew": {
+      "title": "Crew on this travel day",
+      "subtitle": "May differ from the logbook default. Following days inherit from the previous day.",
+      "day_skipper": "Skipper on this day",
+      "day_crew": "Crew on this day",
+      "no_skipper": "No skipper selected",
+      "no_crew": "No crew selected"
     },
     "crew": {
       "title": "Skipper & Crew Profiles",
       "skipper_section": "Skipper Profile",
+      "skipper_read_only_hint": "The skipper profile can only be edited by the logbook owner.",
       "crew_section": "Crew List",
       "add_crew": "Add Crew Member",
       "edit_crew": "Edit Crew Member",
       "no_crew": "No crew members added yet.",
-      "max_crew": "Maximum of 5 crew members reached.",
+      "max_crew": "Maximum of 12 crew members in the pool reached.",
       "name": "Full Name",
       "address": "Address",
       "birthdate": "Date of Birth",
@@ -272,35 +732,22 @@
       "loading": "Loading calibration table..."
     },
     "settings": {
-      "title": "System Settings",
-      "subtitle": "Configure external integrations and client credentials.",
-      "owm_title": "Weather Integration",
-      "owm_key": "OpenWeatherMap API Key",
-      "save": "Save Configuration",
-      "saving": "Saving...",
-      "saved": "Settings saved successfully!",
-      "key_help": "An API key is required to automatically fetch real-time weather and sea state parameters based on your vessel's GPS coordinates.",
-      "no_key": "Please set your OpenWeatherMap API Key in settings to enable weather auto-fill.",
+      "title": "Logbook settings",
+      "subtitle": "Sharing, backup, and collaboration for this logbook.",
+      "select_logbook_hint": "Select a logbook to edit its settings.",
+      "no_key": "No OpenWeatherMap API key available. Add your own key in your user profile or contact the operator.",
       "weather_success": "Weather details fetched successfully!",
       "weather_error": "Failed to fetch weather. Check your API key and connection.",
       "weather_date_mismatch": "Weather data can only be fetched for today ({{today}}). This logbook entry is dated {{date}}.",
       "gps_error": "Please enter a location or fetch GPS coordinates first.",
-      "theme_title": "UI Customization",
-      "theme_label": "Application Style / Theme",
-      "theme_auto": "Auto (OS Detect)",
-      "theme_ocean": "Ocean (Glassmorphism)",
-      "theme_material": "Material (Android)",
-      "theme_cupertino": "Cupertino (iOS)",
-      "color_scheme_title": "Appearance",
-      "color_scheme_label": "Light or dark mode (default: follow system)",
-      "color_scheme_auto": "Auto (System)",
-      "color_scheme_light": "Light",
-      "color_scheme_dark": "Dark",
       "share_title": "Share Logbook (Read-Only)",
       "share_desc": "Enable this to generate a public, read-only link. Anyone with the link can view your travels, yacht profile, and crew members. Decryption keys are never transmitted to the server (they stay in the hash part of the URL).",
+      "share_privacy_warning": "Recommendation: Share this link only privately (e.g. via email or messenger), not on social media.",
       "share_enable": "Enable Public Link",
       "share_copied": "Link copied!",
       "share_copy_btn": "Copy Link",
+      "link_qr_hint": "Scan this QR code with your phone",
+      "link_qr_alt": "QR code for the link",
       "danger_zone_title": "Danger Zone",
       "danger_zone_desc": "Deleting your account will permanently delete all your passkeys, logbooks, vessel data, crew profiles, travel logs, and E2E keys. This action cannot be undone.",
       "delete_account_btn": "Permanently Delete Account",
@@ -309,10 +756,48 @@
       "delete_account_confirm_yes": "Yes, Delete Account and All Data",
       "delete_account_confirm_no": "Cancel",
       "delete_account_failed": "Failed to delete account. Please try again.",
+      "delete_backup_hint": "Tip: Before deleting, create backups of your logbooks (.daagbok.json) in each logbook's settings.",
       "deleting_account": "Deleting account…",
-      "tour_title": "App tour",
-      "tour_desc": "Take a guided walkthrough of the main areas of the app again.",
-      "tour_restart": "Restart tour"
+      "invite_push_prompt_title": "Enable push notifications?",
+      "invite_push_prompt_message": "When invited crew members sync changes, you can be notified via push. No logbook content is sent in plain text.",
+      "invite_push_prompt_ios_message": "When crew members sync changes, you can get push notifications. On iPhone/iPad: add the app to your Home Screen (iOS 16.4+), then enable push in your user profile.",
+      "invite_push_prompt_enable": "Enable now",
+      "invite_push_prompt_later": "Later",
+      "invite_push_prompt_success": "Push notifications are active on this device.",
+      "backup_title": "Backup & restore",
+      "backup_desc": "Full encrypted backup of this logbook (entries, photos, GPS tracks, crew, vessel). Protected with a backup passphrase — restore on this or a new account.",
+      "backup_export_title": "Create backup",
+      "backup_export_desc": "Downloads all local data as a .daagbok.json file. Keep the file and passphrase separate and secure.",
+      "backup_restore_title": "Restore backup",
+      "backup_restore_desc": "Restores a backup into your current account — including after registering a new account.",
+      "backup_passphrase": "Backup passphrase",
+      "backup_passphrase_placeholder": "At least 8 characters",
+      "backup_passphrase_confirm": "Confirm passphrase",
+      "backup_passphrase_short": "The backup passphrase must be at least 8 characters.",
+      "backup_passphrase_mismatch": "Passphrases do not match.",
+      "backup_wrong_passphrase": "Wrong passphrase or corrupted backup.",
+      "backup_export_btn": "Download backup",
+      "backup_exporting": "Creating backup…",
+      "backup_export_success": "Backup created ({{count}} travel days).",
+      "backup_file_label": "Backup file (.daagbok.json)",
+      "backup_preview_btn": "Verify contents",
+      "backup_previewing": "Verifying…",
+      "backup_restore_btn": "Restore",
+      "backup_restoring": "Restoring…",
+      "backup_restore_success": "Logbook “{{title}}” has been restored.",
+      "backup_restore_cancelled": "Restore cancelled.",
+      "backup_invalid_json": "The file is not valid JSON.",
+      "backup_invalid_format": "Unknown or outdated backup format.",
+      "backup_not_owner": "Only the logbook owner can create backups.",
+      "backup_not_authenticated": "Please sign in to restore a backup.",
+      "backup_id_conflict": "A logbook with this ID already exists.",
+      "backup_overwrite_confirm": "The existing logbook with the same ID will be replaced. Continue?",
+      "backup_new_id_confirm": "Import the backup as a new logbook with a new ID?",
+      "backup_stat_entries": "{{count}} travel days",
+      "backup_stat_photos": "{{count}} photos",
+      "backup_stat_crew": "{{count}} crew records",
+      "backup_stat_tracks": "{{count}} GPS tracks",
+      "backup_exported_at": "Exported: {{date}}"
     },
     "disclaimer": {
       "title": "Important notice",
@@ -334,9 +819,65 @@
       "close": "Close",
       "button_title": "Legal notice & disclaimer"
     },
+    "feedback": {
+      "button_title": "Send feedback",
+      "title": "Feedback",
+      "intro": "Share bugs, ideas or general feedback. Your message is sent to the project team via a secure notification channel.",
+      "category_label": "Category",
+      "category_general": "General",
+      "category_bug": "Bug report",
+      "category_feature": "Feature request",
+      "category_translation": "Translation error",
+      "contact_label": "Email (optional)",
+      "contact_placeholder": "your@email.example",
+      "message_label": "Message",
+      "message_placeholder": "Describe your feedback…",
+      "send": "Send",
+      "sending": "Sending…",
+      "cancel": "Cancel",
+      "success": "Thank you! Your feedback has been sent.",
+      "error_send": "Could not send feedback. Please try again later.",
+      "error_invalid_email": "Please enter a valid email address.",
+      "error_not_configured": "Feedback is not available on this server.",
+      "error_rate_limited": "Too many feedback messages in a short time. Please wait a few minutes.",
+      "error_spam": "This message could not be sent. Please rephrase it and try again."
+    },
     "demo": {
       "logbook_title": "Baltic Sea Demo Logbook",
-      "badge": "Demo"
+      "badge": "Demo",
+      "public_banner": "Read-only demo view",
+      "cta_register": "Create account",
+      "back_to_login": "Back to login"
+    },
+    "invitation": {
+      "error_invalid_key": "The invitation link is cryptographically invalid (corrupted key).",
+      "error_missing_key": "The invitation link is missing the decryption key (#key=...). Please use the complete link from the owner.",
+      "error_expired": "This invitation link has expired (valid for 48 hours only).",
+      "error_invalid_token": "Failed to verify invitation token.",
+      "error_load_failed": "Invitation details could not be retrieved.",
+      "error_incomplete_session": "Incomplete session — please log in again (user ID missing).",
+      "error_accept_failed": "Acceptance failed.",
+      "error_login_failed": "Passkey authentication failed.",
+      "error_username_missing": "Could not determine username — please try logging in again.",
+      "error_register_failed": "Registration failed.",
+      "loading_joining": "Joining...",
+      "loading_checking": "Checking Invitation...",
+      "loading_unlocking": "Unlocking logbook and syncing data...",
+      "loading_retrieving_key": "Retrieving encryption key...",
+      "error_title": "Invitation Error",
+      "back_to_start": "Back to Dashboard",
+      "title": "Logbook Invitation",
+      "invited_by": "INVITED BY",
+      "vessel_logbook": "VESSEL / LOGBOOK",
+      "signed_in_preparing": "Signed in as {{username}}. Preparing to join...",
+      "join_again": "Join again",
+      "login_or_register_hint": "Sign in or register an account to join this logbook.",
+      "or_sign_up": "OR SIGN UP",
+      "register_crew_account": "Register New Crew Account",
+      "username_label": "Username",
+      "create_passkey": "Create Passkey",
+      "switch_language_en": "English",
+      "switch_language_de": "Deutsch"
     },
     "stats": {
       "title": "Statistics",
@@ -350,6 +891,9 @@
       "travel_days": "Travel days",
       "sail_distance": "Under sail",
       "motor_distance": "Engine",
+      "motor_hours_total": "Total engine hours",
+      "daily_motor_hours": "Engine hours per travel day",
+      "avg_motor_hours": "Avg. engine hours per travel day",
       "unknown_propulsion": "Unknown",
       "fuel_total": "Total fuel",
       "water_total": "Total water",
@@ -363,13 +907,22 @@
       "avg_fuel": "Avg. fuel",
       "avg_water": "Avg. water",
       "fuel_per_nm": "Fuel per nm",
+      "fuel_per_motor_hour": "Fuel per engine hour",
+      "daily_fuel_per_motor_hour": "Fuel consumption per engine hour by travel day",
       "fuel_legend": "Fuel",
       "water_legend": "Water",
       "unit_nm": "nm",
+      "unit_h": "h",
       "unit_l": "L",
       "day_label": "Day {{day}}",
       "account_logbooks": "Logbooks overview",
-      "col_logbook": "Logbook"
+      "col_logbook": "Logbook",
+      "event_series_title": "Event series",
+      "event_series_hint": "Chronological values from the event log.",
+      "event_series_pressure": "Barometric pressure",
+      "event_series_wind": "Wind",
+      "event_series_motor": "Engine",
+      "event_series_empty": "No entries yet."
     },
     "tour": {
       "skip": "Skip tour",
@@ -380,7 +933,11 @@
       "steps": {
         "welcome": {
           "title": "Welcome aboard!",
-          "body": "We created a demo logbook with three travel days in Kiel Bay. This short tour shows you the key features."
+          "body": "We created a demo logbook with three travel days in Kiel Bay. You can delete the sample entries anytime when you're ready to start your own logbook. This short tour shows you the key features."
+        },
+        "welcome_public": {
+          "title": "Welcome aboard!",
+          "body": "Explore our demo logbook with three travel days in Kiel Bay — no account required. The tour covers log entries and vessel and crew selection for this logbook. Manage your fleet and core crew later in your user profile."
         },
         "nav_logs": {
           "title": "Log entries",
@@ -399,18 +956,48 @@
           "body": "Upload GPX files or view saved routes on the map – including distance and speed stats."
         },
         "nav_vessel": {
-          "title": "Vessel data",
-          "body": "Enter your yacht's name, dimensions, and technical details – fill once, use on every travel day."
+          "title": "Vessel for logbook",
+          "body": "Choose a vessel from your fleet for this logbook. Manage vessels in your user profile under Fleet & crew."
         },
-        "nav_crew": {
-          "title": "Crew list",
-          "body": "Manage crew members and assign them to travel days later."
+        "profile_vessel_pool": {
+          "title": "Vessel fleet",
+          "body": "In your user profile you add all your vessels — charter yachts, your own boat, etc. Then pick the right vessel per logbook."
+        },
+        "profile_crew_pool": {
+          "title": "Core Crew & skippers",
+          "body": "In your user profile you maintain a person pool — multiple skippers (e.g. charter) and crew for all logbooks."
+        },
+        "nav_logbook_crew": {
+          "title": "Crew per logbook",
+          "body": "Pick skipper and crew from the pool for this logbook. Travel days inherit this selection by default."
+        },
+        "nav_stats": {
+          "title": "Statistics dashboard",
+          "body": "View travel distances, consumption, route maps, and propulsion breakdown — calculated automatically from your log entries."
+        },
+        "nav_feedback": {
+          "title": "Send feedback",
+          "body": "Use this form to report bugs, ideas, or general feedback to the project team — you can also open it anytime later via the icon in the top right."
+        },
+        "nav_profile": {
+          "title": "Your user profile",
+          "body": "Tap the skipper button at the top to open your personal profile — independent of the current logbook."
+        },
+        "profile_preferences": {
+          "title": "Account & appearance",
+          "body": "Manage your account identity, theme, and light/dark mode here. You can restart the app tour anytime. Passkeys and security settings are further down on the profile page."
         },
         "finish": {
           "title": "You're all set!",
-          "body": "You can restart the tour anytime in Settings. Fair winds!"
+          "body": "You'll land on the statistics dashboard next. You can restart the tour anytime from your user profile. Fair winds!"
         }
       }
+    },
+    "seo": {
+      "title": "Kapteins Daagbok – Free Digital Yacht Logbook (Ad-Free)",
+      "description": "Free, ad-free digital yacht logbook with end-to-end encryption and Passkey sign-in. Document travel days, GPS tracks, crew and vessel data securely — offline-capable PWA.",
+      "keywords": "yacht logbook, ship logbook, sailing log, maritime logbook, passkey, E2E encryption, GPS track, free, ad-free, offline PWA",
+      "ogImageAlt": "Kapteins Daagbok logo"
     }
   }
 }

client/src/index.css

@@ -1,64 +1,8 @@
-:root {
-  --text: #6b6375;
-  --text-h: #08060d;
-  --bg: #fff;
-  --border: #e5e4e7;
-  --code-bg: #f4f3ec;
-  --accent: #aa3bff;
-  --accent-bg: rgba(170, 59, 255, 0.1);
-  --accent-border: rgba(170, 59, 255, 0.5);
-  --social-bg: rgba(244, 243, 236, 0.5);
-  --shadow:
-    rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.05) 0 4px 6px -2px;
+/* Minimal app shell — component styles live in App.css / themes.css */
 
-  --sans: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --heading: system-ui, 'Segoe UI', Roboto, sans-serif;
-  --mono: ui-monospace, Consolas, monospace;
-
-  font: 18px/145% var(--sans);
-  letter-spacing: 0.18px;
-  color-scheme: light dark;
-  color: var(--text);
-  background: var(--bg);
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  @media (max-width: 1024px) {
-    font-size: 16px;
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --text: #9ca3af;
-    --text-h: #f3f4f6;
-    --bg: #16171d;
-    --border: #2e303a;
-    --code-bg: #1f2028;
-    --accent: #c084fc;
-    --accent-bg: rgba(192, 132, 252, 0.15);
-    --accent-border: rgba(192, 132, 252, 0.5);
-    --social-bg: rgba(47, 48, 58, 0.5);
-    --shadow:
-      rgba(0, 0, 0, 0.4) 0 10px 15px -3px, rgba(0, 0, 0, 0.25) 0 4px 6px -2px;
-  }
-
-  #social .button-icon {
-    filter: invert(1) brightness(2);
-  }
-}
-
-#root {
-  width: 1126px;
-  max-width: 100%;
-  margin: 0 auto;
-  text-align: center;
-  border-inline: 1px solid var(--border);
-  min-height: 100svh;
-  display: flex;
-  flex-direction: column;
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -66,46 +10,70 @@ body {
   margin: 0;
 }
 
-h1,
-h2 {
-  font-family: var(--heading);
-  font-weight: 500;
-  color: var(--text-h);
+#root {
+  width: 100%;
+  max-width: 100%;
+  min-height: 100svh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-h1 {
-  font-size: 56px;
-  letter-spacing: -1.68px;
-  margin: 32px 0;
-  @media (max-width: 1024px) {
-    font-size: 36px;
-    margin: 20px 0;
+/* Scrollbars — auf Touch-Geräten breiter und besser sichtbar */
+:root {
+  --app-scrollbar-size: 10px;
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  :root {
+    --app-scrollbar-size: 14px;
   }
 }
-h2 {
-  font-size: 24px;
-  line-height: 118%;
-  letter-spacing: -0.24px;
-  margin: 0 0 8px;
-  @media (max-width: 1024px) {
-    font-size: 20px;
+
+html {
+  scrollbar-width: auto;
+  scrollbar-color: var(--app-accent-light) var(--app-surface-inset);
+  -webkit-overflow-scrolling: touch;
+}
+
+html::-webkit-scrollbar,
+body::-webkit-scrollbar,
+*::-webkit-scrollbar {
+  width: var(--app-scrollbar-size);
+  height: var(--app-scrollbar-size);
+}
+
+html::-webkit-scrollbar-track,
+body::-webkit-scrollbar-track,
+*::-webkit-scrollbar-track {
+  background: var(--app-surface-inset);
+  border-radius: calc(var(--app-scrollbar-size) / 2);
+}
+
+html::-webkit-scrollbar-thumb,
+body::-webkit-scrollbar-thumb,
+*::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--app-accent-light) 55%, transparent);
+  border-radius: calc(var(--app-scrollbar-size) / 2);
+  min-height: 48px;
+}
+
+html::-webkit-scrollbar-thumb:hover,
+body::-webkit-scrollbar-thumb:hover,
+*::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, var(--app-accent-light) 80%, transparent);
+}
+
+@media (hover: none), (pointer: coarse), (max-width: 768px) {
+  html::-webkit-scrollbar-thumb,
+  body::-webkit-scrollbar-thumb,
+  *::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--app-accent-light) 70%, transparent);
+  }
+
+  html::-webkit-scrollbar-thumb:active,
+  body::-webkit-scrollbar-thumb:active,
+  *::-webkit-scrollbar-thumb:active {
+    background: var(--app-accent-light);
   }
 }
-p {
-  margin: 0;
-}
-
-code,
-.counter {
-  font-family: var(--mono);
-  display: inline-flex;
-  border-radius: 4px;
-  color: var(--text-h);
-}
-
-code {
-  font-size: 15px;
-  line-height: 135%;
-  padding: 4px 8px;
-  background: var(--code-bg);
-}

client/src/main.tsx

@@ -3,14 +3,104 @@ import { createRoot } from 'react-dom/client'
 import 'leaflet/dist/leaflet.css'
 import './themes.css'
 import './index.css'
-import App from './App.tsx'
+import './App.css'
 import './i18n'
+import App from './App.tsx'
 import { applyAppearanceToDocument } from './services/appearance.ts'
+import { flushPendingPwaBootEvents } from './services/analytics.ts'
+import {
+  installStaleAssetRecovery,
+  markReloadAttempt,
+  reconcileVersionOnStartup
+} from './services/pwaStartup.ts'
+import { redirectToPasskeyCompatibleHostIfNeeded } from './utils/passkeyHost.ts'
 
-applyAppearanceToDocument()
+declare global {
+  interface Window {
+    __KDB_MAIN_MODULE_LOADED?: boolean
+    __KDB_APP_BOOTSTRAPPED?: boolean
+  }
+}
 
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+window.__KDB_MAIN_MODULE_LOADED = true
+
+/** Stale PWA precache on localhost can shadow Vite dev modules. */
+async function clearDevServiceWorkerCaches(): Promise<void> {
+  if (!import.meta.env.DEV || !('serviceWorker' in navigator)) return
+  const regs = await navigator.serviceWorker.getRegistrations()
+  await Promise.all(regs.map((r) => r.unregister()))
+  if ('caches' in window) {
+    const keys = await caches.keys()
+    await Promise.all(keys.map((k) => caches.delete(k)))
+  }
+}
+
+function renderBootstrapError(message: string): void {
+  const root = document.getElementById('root')
+  if (!root) return
+  root.innerHTML = `
+    <div class="auth-screen">
+      <div class="auth-card glass" role="alert" style="max-width:420px">
+        <h2 style="margin-top:0">Kapteins Daagbok</h2>
+        <p style="color:var(--app-text-muted);line-height:1.5">${message}</p>
+        <button type="button" class="btn primary" style="width:100%;margin-top:16px" onclick="location.reload()">
+          Neu laden
+        </button>
+      </div>
+    </div>`
+}
+
+async function bootstrap(): Promise<void> {
+  if (redirectToPasskeyCompatibleHostIfNeeded()) {
+    return
+  }
+
+  applyAppearanceToDocument()
+  installStaleAssetRecovery()
+  flushPendingPwaBootEvents()
+  window.addEventListener('load', () => {
+    flushPendingPwaBootEvents()
+  }, { once: true })
+  await clearDevServiceWorkerCaches()
+
+  const startupResult = await reconcileVersionOnStartup()
+  if (startupResult === 'reload') {
+    markReloadAttempt()
+    window.location.reload()
+    return
+  }
+  if (startupResult === 'recovered') {
+    return
+  }
+
+  if ('serviceWorker' in navigator && !import.meta.env.DEV) {
+    navigator.serviceWorker
+      .register('/sw.js', { scope: '/' })
+      .then((reg) => {
+        console.log('Service Worker registered successfully with scope:', reg.scope)
+      })
+      .catch((err) => {
+        console.error('Service Worker registration failed:', err)
+      })
+  }
+
+  const rootEl = document.getElementById('root')
+  if (!rootEl) {
+    throw new Error('Missing #root element')
+  }
+
+  createRoot(rootEl).render(
+    <StrictMode>
+      <App />
+    </StrictMode>,
+  )
+  window.__KDB_APP_BOOTSTRAPPED = true
+}
+
+void bootstrap().catch((err) => {
+  console.error('App bootstrap failed:', err)
+  renderBootstrapError(
+    'Die App konnte nicht gestartet werden. Bitte neu laden oder die App vollständig beenden und erneut öffnen.',
+  )
+  window.__KDB_APP_BOOTSTRAPPED = false
+})

client/src/services/aiSummary.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest'
+import { buildTravelDayContext } from './aiSummary.js'
+import type { LogEventPayload } from '../utils/logEntryPayload.js'
+
+const t = ((key: string, opts?: Record<string, unknown>) => {
+  if (key === 'logs.live_motor_start') return 'Motor started'
+  if (key === 'logs.live_event_generic') return 'Event'
+  if (opts && 'course' in opts) return `Course ${opts.course}`
+  return key
+}) as any
+
+describe('buildTravelDayContext', () => {
+  it('includes route metadata and formatted events', () => {
+    const events: LogEventPayload[] = [
+      {
+        time: '09:00',
+        mgk: '180',
+        rwk: '',
+        windPressure: '',
+        windDirection: '',
+        windStrength: '',
+        seaState: '',
+        visibility: '',
+        weatherIcon: '',
+        current: '',
+        heel: '',
+        sailsOrMotor: 'Genua',
+        logReading: '',
+        distance: '',
+        gpsLat: '',
+        gpsLng: '',
+        remarks: '__live:motor_start'
+      }
+    ]
+
+    const context = buildTravelDayContext(
+      {
+        date: '2026-06-03',
+        dayOfTravel: '5',
+        departure: 'Kiel',
+        destination: 'Copenhagen',
+        freshwater: { morning: 100, refilled: 0, evening: 80, consumption: 20 },
+        fuel: { morning: 50, refilled: 10, evening: 40, consumption: 20 },
+        greywaterLevel: 0,
+        trackDistanceNm: 42.5,
+        motorHours: 3.5,
+        events
+      },
+      t
+    )
+
+    expect(context.departure).toBe('Kiel')
+    expect(context.destination).toBe('Copenhagen')
+    expect(context.trackDistanceNm).toBe(42.5)
+    expect(context.motorHours).toBe(3.5)
+    expect(context.events).toHaveLength(1)
+    expect(context.events[0].summary).toBe('Motor started')
+    expect(context.events[0].sailsOrMotor).toBe('Genua')
+    expect(context.greywater).toBeUndefined()
+  })
+})

client/src/services/aiSummary.ts

@@ -0,0 +1,178 @@
+import type { TFunction } from 'i18next'
+import { apiFetch } from './api.js'
+import { formatEventSummary } from '../utils/formatEventSummary.js'
+import { sortLogEventsByTime, type LogEventPayload } from '../utils/logEntryPayload.js'
+import { PlausibleEvents, trackPlausibleEvent } from './analytics.js'
+
+export class TravelDaySummaryApiError extends Error {
+  code: 'NO_KEY' | 'FORBIDDEN' | 'RATE_LIMITED' | 'OFFLINE' | 'REQUEST_FAILED'
+
+  constructor(
+    message: string,
+    code: 'NO_KEY' | 'FORBIDDEN' | 'RATE_LIMITED' | 'OFFLINE' | 'REQUEST_FAILED' = 'REQUEST_FAILED'
+  ) {
+    super(message)
+    this.name = 'TravelDaySummaryApiError'
+    this.code = code
+  }
+}
+
+export interface TravelDaySummaryContext {
+  date: string
+  dayOfTravel: string
+  departure: string
+  destination: string
+  trackDistanceNm?: number
+  trackSpeedMaxKn?: number
+  trackSpeedAvgKn?: number
+  motorHours?: number
+  freshwater?: {
+    morning: number
+    refilled: number
+    evening: number
+    consumption: number
+  }
+  fuel?: {
+    morning: number
+    refilled: number
+    evening: number
+    consumption: number
+  }
+  greywater?: { level: number }
+  events: Array<{
+    time: string
+    summary: string
+    sailsOrMotor?: string
+    mgk?: string
+    windDirection?: string
+    windStrength?: string
+    windPressure?: string
+    seaState?: string
+    visibility?: string
+    distance?: string
+  }>
+}
+
+export interface TravelDaySummaryInput {
+  date: string
+  dayOfTravel: string
+  departure: string
+  destination: string
+  trackDistanceNm?: number
+  trackSpeedMaxKn?: number
+  trackSpeedAvgKn?: number
+  motorHours?: number
+  freshwater: { morning: number; refilled: number; evening: number; consumption: number }
+  fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  greywaterLevel?: number
+  events: LogEventPayload[]
+}
+
+const SUMMARY_FETCH_TIMEOUT_MS = 90_000
+
+export function buildTravelDayContext(
+  input: TravelDaySummaryInput,
+  t: TFunction
+): TravelDaySummaryContext {
+  const context: TravelDaySummaryContext = {
+    date: input.date,
+    dayOfTravel: input.dayOfTravel,
+    departure: input.departure,
+    destination: input.destination,
+    freshwater: input.freshwater,
+    fuel: input.fuel,
+    events: sortLogEventsByTime(input.events).map((event) => ({
+      time: event.time,
+      summary: formatEventSummary(event, t),
+      ...(event.sailsOrMotor ? { sailsOrMotor: event.sailsOrMotor } : {}),
+      ...(event.mgk ? { mgk: event.mgk } : {}),
+      ...(event.windDirection ? { windDirection: event.windDirection } : {}),
+      ...(event.windStrength ? { windStrength: event.windStrength } : {}),
+      ...(event.windPressure ? { windPressure: event.windPressure } : {}),
+      ...(event.seaState ? { seaState: event.seaState } : {}),
+      ...(event.visibility ? { visibility: event.visibility } : {}),
+      ...(event.distance ? { distance: event.distance } : {})
+    }))
+  }
+
+  if (input.trackDistanceNm !== undefined) context.trackDistanceNm = input.trackDistanceNm
+  if (input.trackSpeedMaxKn !== undefined) context.trackSpeedMaxKn = input.trackSpeedMaxKn
+  if (input.trackSpeedAvgKn !== undefined) context.trackSpeedAvgKn = input.trackSpeedAvgKn
+  if (input.motorHours !== undefined && input.motorHours > 0) context.motorHours = input.motorHours
+  if (input.greywaterLevel !== undefined && input.greywaterLevel > 0) {
+    context.greywater = { level: input.greywaterLevel }
+  }
+
+  return context
+}
+
+function mapApiError(status: number, data: unknown): TravelDaySummaryApiError {
+  const code =
+    typeof data === 'object' && data !== null && 'code' in data
+      ? String((data as { code?: string }).code)
+      : ''
+
+  if (status === 503 || code === 'NO_KEY') {
+    return new TravelDaySummaryApiError('No OpenRouter API key configured', 'NO_KEY')
+  }
+  if (status === 403) {
+    return new TravelDaySummaryApiError('Forbidden', 'FORBIDDEN')
+  }
+  if (status === 429 || code === 'RATE_LIMITED') {
+    return new TravelDaySummaryApiError('Rate limit exceeded', 'RATE_LIMITED')
+  }
+
+  const message =
+    typeof data === 'object' && data !== null && 'error' in data && typeof (data as { error: unknown }).error === 'string'
+      ? (data as { error: string }).error
+      : 'Request failed'
+  return new TravelDaySummaryApiError(message, 'REQUEST_FAILED')
+}
+
+export async function fetchTravelDaySummaryUsage(
+  logbookId: string,
+  entryId: string
+): Promise<{ remainingAttempts: number; maxAttempts: number }> {
+  const params = new URLSearchParams({ logbookId, entryId })
+  const res = await apiFetch(`/api/ai/usage?${params.toString()}`)
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw mapApiError(res.status, data)
+  return data as { remainingAttempts: number; maxAttempts: number }
+}
+
+export async function generateTravelDaySummary(params: {
+  logbookId: string
+  entryId: string
+  language: string
+  context: TravelDaySummaryContext
+}): Promise<{ summary: string; remainingAttempts: number; maxAttempts: number }> {
+  if (!navigator.onLine) {
+    throw new TravelDaySummaryApiError('Offline', 'OFFLINE')
+  }
+
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), SUMMARY_FETCH_TIMEOUT_MS)
+
+  let res: Response
+  try {
+    res = await apiFetch('/api/ai/summary', {
+      method: 'POST',
+      body: JSON.stringify(params),
+      signal: controller.signal
+    })
+  } catch (err) {
+    if (err instanceof DOMException && err.name === 'AbortError') {
+      throw new TravelDaySummaryApiError('AI summary request timed out')
+    }
+    throw err
+  } finally {
+    window.clearTimeout(timeoutId)
+  }
+
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) throw mapApiError(res.status, data)
+
+  trackPlausibleEvent(PlausibleEvents.AI_SUMMARY_GENERATED)
+
+  return data as { summary: string; remainingAttempts: number; maxAttempts: number }
+}

client/src/services/analytics.ts

@@ -14,15 +14,54 @@ export const PlausibleEvents = {
   ONBOARDING_TOUR_SKIPPED: 'Onboarding Tour Skipped',
   INVITE_GENERATED: 'Invite Generated',
   INVITE_ACCEPTED: 'Invite Accepted',
+  LOGBOOK_SHARED: 'Logbook Shared',
+  PUBLIC_LINK_OPENED: 'Public Link Opened',
   PDF_EXPORTED: 'PDF Exported',
   CSV_EXPORTED: 'CSV Exported',
   CSV_SHARED: 'CSV Shared',
-  PHOTO_UPLOADED: 'Photo Uploaded'
+  PHOTO_UPLOADED: 'Photo Uploaded',
+  BACKUP_EXPORTED: 'Backup Exported',
+  BACKUP_RESTORED: 'Backup Restored',
+  DEMO_OPENED: 'Demo Opened',
+  PUSH_ENABLED: 'Push Enabled',
+  PUSH_DISABLED: 'Push Disabled',
+  FOOTER_LINK_CLICKED: 'Footer Link Clicked',
+  PROFILE_OPENED: 'Profile Opened',
+  PASSKEY_ADDED: 'Passkey Added',
+  PASSKEY_REMOVED: 'Passkey Removed',
+  PASSKEY_RENAMED: 'Passkey Renamed',
+  LAST_PASSKEY_REMOVE_HINTED: 'Last Passkey Remove Hinted',
+  LOCAL_PIN_SET: 'Local PIN Set',
+  LOCAL_PIN_REMOVED: 'Local PIN Removed',
+  DEVICE_FORGOTTEN: 'Device Forgotten',
+  RECOVERY_ROTATED: 'Recovery Rotated',
+  LANGUAGE_CHANGED: 'Language Changed',
+  NMEA_IMPORTED: 'NMEA Imported',
+  NMEA_UPLOADED: 'NMEA Uploaded',
+  LIVE_LOG_OPENED: 'Live Log Opened',
+  LIVE_LOG_EVENT_LOGGED: 'Live Log Event Logged',
+  LIVE_LOG_PHOTO_UPLOADED: 'Live Log Photo Uploaded',
+  OWM_WEATHER_FETCHED: 'OWM Weather Fetched',
+  AI_SUMMARY_GENERATED: 'AI Summary Generated',
+  PWA_BOOT_WATCHDOG_SOFT: 'PWA Boot Watchdog Soft',
+  PWA_BOOT_WATCHDOG_HARD: 'PWA Boot Watchdog Hard',
+  PWA_BOOT_WATCHDOG_FALLBACK: 'PWA Boot Watchdog Fallback',
+  PWA_BOOT_WATCHDOG_MANUAL_REPAIR: 'PWA Boot Watchdog Manual Repair'
 } as const
 
+/** Where a successful OpenWeatherMap API call originated (no coordinates or place names). */
+export type OwmAnalyticsSource = 'live_log' | 'entry_editor' | 'entry_editor_gps_lookup'
+
 export type PlausibleEventName = (typeof PlausibleEvents)[keyof typeof PlausibleEvents]
 
 export type PlausibleEventProps = Record<string, string | number | boolean>
+type PendingPwaBootEvent = {
+  name: PlausibleEventName
+  props?: PlausibleEventProps
+  ts?: number
+}
+
+const PWA_BOOT_PENDING_EVENTS_KEY = 'pwa_boot_pending_events'
 
 export function trackPlausibleEvent(name: PlausibleEventName, props?: PlausibleEventProps): void {
   if (typeof window.plausible !== 'function') return
@@ -32,3 +71,52 @@ export function trackPlausibleEvent(name: PlausibleEventName, props?: PlausibleE
   }
   window.plausible(name)
 }
+
+export function flushPendingPwaBootEvents(): number {
+  if (typeof window.plausible !== 'function') return 0
+
+  let raw: string | null = null
+  try {
+    raw = sessionStorage.getItem(PWA_BOOT_PENDING_EVENTS_KEY)
+  } catch {
+    return 0
+  }
+  if (!raw) return 0
+
+  let pending: PendingPwaBootEvent[]
+  try {
+    pending = JSON.parse(raw) as PendingPwaBootEvent[]
+  } catch {
+    try {
+      sessionStorage.removeItem(PWA_BOOT_PENDING_EVENTS_KEY)
+    } catch {
+      /* ignore storage errors */
+    }
+    return 0
+  }
+
+  if (!Array.isArray(pending) || pending.length === 0) {
+    try {
+      sessionStorage.removeItem(PWA_BOOT_PENDING_EVENTS_KEY)
+    } catch {
+      /* ignore storage errors */
+    }
+    return 0
+  }
+
+  for (const event of pending) {
+    if (!event || typeof event.name !== 'string') continue
+    if (event.props && Object.keys(event.props).length > 0) {
+      window.plausible(event.name, { props: event.props })
+    } else {
+      window.plausible(event.name)
+    }
+  }
+
+  try {
+    sessionStorage.removeItem(PWA_BOOT_PENDING_EVENTS_KEY)
+  } catch {
+    /* ignore storage errors */
+  }
+  return pending.length
+}

client/src/services/api.ts

@@ -0,0 +1,59 @@
+export class ApiError extends Error {
+  status: number
+
+  constructor(message: string, status: number) {
+    super(message)
+    this.name = 'ApiError'
+    this.status = status
+  }
+}
+
+export async function apiFetch(
+  input: string,
+  init: RequestInit = {},
+  timeoutMs = 15000
+): Promise<Response> {
+  const headers = new Headers(init.headers)
+  if (init.body !== undefined && !headers.has('Content-Type')) {
+    headers.set('Content-Type', 'application/json')
+  }
+
+  const controller = new AbortController()
+  const timeoutId = setTimeout(() => controller.abort(), timeoutMs)
+
+  if (init.signal) {
+    if (init.signal.aborted) {
+      controller.abort()
+    } else {
+      init.signal.addEventListener('abort', () => controller.abort())
+    }
+  }
+
+  try {
+    return await fetch(input, {
+      ...init,
+      headers,
+      credentials: 'include',
+      signal: controller.signal
+    })
+  } finally {
+    clearTimeout(timeoutId)
+  }
+}
+
+export async function apiJson<T>(
+  input: string,
+  init: RequestInit = {},
+  timeoutMs = 15000
+): Promise<T> {
+  const res = await apiFetch(input, init, timeoutMs)
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) {
+    const message =
+      typeof data === 'object' && data && 'error' in data && typeof data.error === 'string'
+        ? data.error
+        : `Request failed (${res.status})`
+    throw new ApiError(message, res.status)
+  }
+  return data as T
+}

client/src/services/appTourStorage.ts

@@ -1,3 +1,5 @@
+export const PUBLIC_DEMO_TOUR_USER_ID = '__public_demo__'
+
 export function getTourCompletedKey(userId: string): string {
   return `app_tour_completed_${userId}`
 }
@@ -14,3 +16,10 @@ export function markTourCompleted(userId: string): void {
 export function clearTourCompleted(userId: string): void {
   localStorage.removeItem(getTourCompletedKey(userId))
 }
+
+export function resolveTourUserId(options?: { demoMode?: boolean }): string | null {
+  const activeUserId = localStorage.getItem('active_userid')
+  if (activeUserId) return activeUserId
+  if (options?.demoMode) return PUBLIC_DEMO_TOUR_USER_ID
+  return null
+}

client/src/services/appearance.test.ts

@@ -0,0 +1,70 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  applyAppearanceToDocument,
+  resolveAppTheme,
+  resolveColorScheme,
+  type AppTheme,
+  type ResolvedColorScheme
+} from './appearance.js'
+import { setColorSchemePreference } from './userPreferences.js'
+
+const USER_ID = 'appearance-test-user'
+
+const COMBOS: Array<{ theme: AppTheme; scheme: ResolvedColorScheme }> = [
+  { theme: 'ocean', scheme: 'dark' },
+  { theme: 'ocean', scheme: 'light' },
+  { theme: 'material', scheme: 'dark' },
+  { theme: 'material', scheme: 'light' },
+  { theme: 'cupertino', scheme: 'dark' },
+  { theme: 'cupertino', scheme: 'light' }
+]
+
+describe('appearance', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    document.documentElement.className = ''
+    document.documentElement.style.colorScheme = ''
+    document.head.querySelector('meta[name="theme-color"]')?.remove()
+  })
+
+  it.each(COMBOS)('applies $theme · $scheme classes to document', ({ theme, scheme }) => {
+    applyAppearanceToDocument(theme, scheme)
+
+    const root = document.documentElement
+    expect(root.classList.contains(`theme-${theme}`)).toBe(true)
+    expect(root.classList.contains(`scheme-${scheme}`)).toBe(true)
+    expect(root.style.colorScheme).toBe(scheme)
+  })
+
+  it('replaces previous theme classes when switching appearance', () => {
+    applyAppearanceToDocument('ocean', 'dark')
+    applyAppearanceToDocument('material', 'light')
+
+    const root = document.documentElement
+    expect(root.classList.contains('theme-material')).toBe(true)
+    expect(root.classList.contains('theme-ocean')).toBe(false)
+    expect(root.classList.contains('scheme-light')).toBe(true)
+    expect(root.classList.contains('scheme-dark')).toBe(false)
+  })
+
+  it('resolves stored light scheme even when system prefers dark', () => {
+    vi.stubGlobal(
+      'matchMedia',
+      vi.fn().mockReturnValue({ matches: true, addEventListener: vi.fn(), removeEventListener: vi.fn() })
+    )
+    localStorage.setItem('active_userid', USER_ID)
+    setColorSchemePreference(USER_ID, 'light')
+
+    expect(resolveColorScheme()).toBe('light')
+    applyAppearanceToDocument('material', resolveColorScheme())
+    expect(document.documentElement.classList.contains('scheme-light')).toBe(true)
+  })
+
+  it('auto theme picks material on Android user agent', () => {
+    vi.stubGlobal('navigator', {
+      ...navigator,
+      userAgent: 'Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36'
+    })
+    expect(resolveAppTheme()).toBe('material')
+  })
+})

client/src/services/appearance.ts

@@ -1,3 +1,5 @@
+import { getColorSchemePreference as getStoredColorScheme, getThemePreference } from './userPreferences.js'
+
 export type ColorSchemePreference = 'auto' | 'light' | 'dark'
 export type ResolvedColorScheme = 'light' | 'dark'
 export type AppTheme = 'ocean' | 'material' | 'cupertino'
@@ -6,7 +8,7 @@ const THEME_CLASSES = ['theme-ocean', 'theme-material', 'theme-cupertino'] as co
 const SCHEME_CLASSES = ['scheme-light', 'scheme-dark'] as const
 
 export function getColorSchemePreference(): ColorSchemePreference {
-  const stored = localStorage.getItem('active_color_scheme')
+  const stored = getStoredColorScheme()
   if (stored === 'light' || stored === 'dark' || stored === 'auto') return stored
   return 'auto'
 }
@@ -19,7 +21,7 @@ export function resolveColorScheme(pref?: ColorSchemePreference): ResolvedColorS
 }
 
 export function resolveAppTheme(): AppTheme {
-  const configTheme = localStorage.getItem('active_theme') || 'auto'
+  const configTheme = getThemePreference() || 'auto'
   if (configTheme === 'material' || configTheme === 'cupertino' || configTheme === 'ocean') {
     return configTheme
   }
@@ -29,6 +31,18 @@ export function resolveAppTheme(): AppTheme {
   return 'ocean'
 }
 
+function updateThemeColorMeta(root: HTMLElement): void {
+  const color = getComputedStyle(root).getPropertyValue('--app-theme-color').trim()
+  if (!color) return
+  let meta = document.querySelector('meta[name="theme-color"]')
+  if (!meta) {
+    meta = document.createElement('meta')
+    meta.setAttribute('name', 'theme-color')
+    document.head.appendChild(meta)
+  }
+  meta.setAttribute('content', color)
+}
+
 export function applyAppearanceToDocument(
   theme: AppTheme = resolveAppTheme(),
   scheme: ResolvedColorScheme = resolveColorScheme()
@@ -37,6 +51,7 @@ export function applyAppearanceToDocument(
   root.classList.remove(...THEME_CLASSES, ...SCHEME_CLASSES)
   root.classList.add(`theme-${theme}`, `scheme-${scheme}`)
   root.style.colorScheme = scheme
+  updateThemeColorMeta(root)
 }
 
 export function subscribeToSystemColorScheme(onChange: () => void): () => void {

client/src/services/appearancePrefs.test.ts

@@ -0,0 +1,96 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  fetchAppearancePrefs,
+  saveAppearancePrefsToServer,
+  syncAppearancePrefs
+} from './appearancePrefs.js'
+import { setThemePreference } from './userPreferences.js'
+
+const USER_ID = 'appearance-sync-user'
+
+vi.mock('./api.js', () => ({
+  apiJson: vi.fn()
+}))
+
+import { apiJson } from './api.js'
+
+const mockedApiJson = vi.mocked(apiJson)
+
+describe('appearancePrefs', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    vi.clearAllMocks()
+  })
+
+  it('fetchAppearancePrefs returns defaults when not authenticated', async () => {
+    await expect(fetchAppearancePrefs()).resolves.toEqual({
+      theme: 'auto',
+      colorScheme: 'auto',
+      persisted: false
+    })
+    expect(mockedApiJson).not.toHaveBeenCalled()
+  })
+
+  it('syncAppearancePrefs applies server prefs after cache wipe', async () => {
+    localStorage.setItem('active_userid', USER_ID)
+    mockedApiJson.mockResolvedValueOnce({
+      theme: 'ocean',
+      colorScheme: 'dark',
+      persisted: true
+    })
+
+    const changed = vi.fn()
+    window.addEventListener('appearance-changed', changed)
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('ocean')
+    expect(localStorage.getItem(`user_pref_color_scheme_${USER_ID}`)).toBe('dark')
+    expect(changed).toHaveBeenCalledTimes(1)
+  })
+
+  it('syncAppearancePrefs uploads local prefs when server has none', async () => {
+    localStorage.setItem('active_userid', USER_ID)
+    setThemePreference(USER_ID, 'material')
+    mockedApiJson
+      .mockResolvedValueOnce({ theme: 'auto', colorScheme: 'auto', persisted: false })
+      .mockResolvedValueOnce({ theme: 'material', colorScheme: 'auto', persisted: true })
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(mockedApiJson).toHaveBeenCalledTimes(2)
+    expect(mockedApiJson).toHaveBeenLastCalledWith('/api/auth/appearance-prefs', {
+      method: 'PUT',
+      body: JSON.stringify({ theme: 'material', colorScheme: 'auto' })
+    })
+  })
+
+  it('saveAppearancePrefsToServer skips when not authenticated', async () => {
+    await saveAppearancePrefsToServer('ocean', 'light')
+    expect(mockedApiJson).not.toHaveBeenCalled()
+  })
+
+  it('syncAppearancePrefs skips server sync when userId does not match active session', async () => {
+    localStorage.setItem('active_userid', 'session-user')
+    setThemePreference('other-user', 'ocean')
+    mockedApiJson.mockResolvedValue({
+      theme: 'material',
+      colorScheme: 'dark',
+      persisted: true
+    })
+
+    await syncAppearancePrefs('other-user')
+
+    expect(mockedApiJson).not.toHaveBeenCalled()
+    expect(localStorage.getItem('user_pref_theme_other-user')).toBe('ocean')
+  })
+
+  it('syncAppearancePrefs skips server sync when active session is missing', async () => {
+    setThemePreference(USER_ID, 'ocean')
+
+    await syncAppearancePrefs(USER_ID)
+
+    expect(mockedApiJson).not.toHaveBeenCalled()
+    expect(localStorage.getItem(`user_pref_theme_${USER_ID}`)).toBe('ocean')
+  })
+})

client/src/services/appearancePrefs.ts

@@ -0,0 +1,76 @@
+import { apiJson } from './api.js'
+import { notifyAppearanceChanged } from './appearance.js'
+import {
+  getActiveUserId,
+  getColorSchemePreference,
+  getThemePreference,
+  setColorSchemePreference,
+  setThemePreference
+} from './userPreferences.js'
+
+const API_BASE = '/api/auth/appearance-prefs'
+
+export interface AppearancePrefs {
+  theme: string
+  colorScheme: string
+  persisted: boolean
+}
+
+function hasLocalAppearancePrefs(userId: string): boolean {
+  return (
+    localStorage.getItem(`user_pref_theme_${userId}`) != null ||
+    localStorage.getItem(`user_pref_color_scheme_${userId}`) != null
+  )
+}
+
+function resolveSyncedUserId(userId?: string | null): string | null {
+  const id = userId?.trim() || getActiveUserId()?.trim() || null
+  if (!id) return null
+
+  const activeId = getActiveUserId()?.trim() || null
+  if (!activeId || activeId !== id) return null
+
+  return id
+}
+
+export async function fetchAppearancePrefs(userId?: string | null): Promise<AppearancePrefs> {
+  if (!resolveSyncedUserId(userId)) {
+    return { theme: 'auto', colorScheme: 'auto', persisted: false }
+  }
+
+  return apiJson<AppearancePrefs>(API_BASE)
+}
+
+export async function saveAppearancePrefsToServer(
+  theme: string,
+  colorScheme: string,
+  userId?: string | null
+): Promise<void> {
+  if (!resolveSyncedUserId(userId)) return
+
+  await apiJson<AppearancePrefs>(API_BASE, {
+    method: 'PUT',
+    body: JSON.stringify({ theme, colorScheme })
+  })
+}
+
+/** Merge server-stored appearance with local cache (server wins after cache wipe). */
+export async function syncAppearancePrefs(userId?: string | null): Promise<void> {
+  const id = resolveSyncedUserId(userId)
+  if (!id) return
+
+  try {
+    const server = await fetchAppearancePrefs(id)
+
+    if (server.persisted) {
+      setThemePreference(id, server.theme)
+      setColorSchemePreference(id, server.colorScheme)
+    } else if (hasLocalAppearancePrefs(id)) {
+      await saveAppearancePrefsToServer(getThemePreference(id), getColorSchemePreference(id), id)
+    }
+  } catch (err) {
+    console.warn('Failed to sync appearance preferences:', err)
+  }
+
+  notifyAppearanceChanged()
+}

client/src/services/auth.ts

@@ -6,27 +6,23 @@ import {
   deriveKeyFromPin,
   encryptBuffer,
   decryptBuffer,
-  generateRecoveryPhrase,
-  base64ToBuffer,
-  bufferToBase64
+  generateRecoveryPhrase
 } from './crypto.js'
 import { clearLogbookKeysCache } from './logbookKeys.js'
 import { PlausibleEvents, trackPlausibleEvent } from './analytics.js'
 import { db } from './db.js'
+import { apiFetch, apiJson } from './api.js'
+import { isWebAuthnUserAbortError } from '../utils/passkeyHost.js'
 
 const API_BASE = '/api/auth'
 
-// Shared in-memory container for the active user's session master key
+// Master key lives in memory only (never localStorage — XSS-resistant).
 let activeMasterKey: ArrayBuffer | null = null
 
-// Restore key from localStorage on load if present (survives reload/restart)
 try {
-  const savedKey = localStorage.getItem('active_master_key')
-  if (savedKey) {
-    activeMasterKey = base64ToBuffer(savedKey)
-  }
-} catch (e) {
-  console.error('Failed to restore active master key:', e)
+  localStorage.removeItem('active_master_key')
+} catch {
+  /* ignore */
 }
 
 export function getActiveMasterKey(): ArrayBuffer | null {
@@ -35,17 +31,57 @@ export function getActiveMasterKey(): ArrayBuffer | null {
 
 export function setActiveMasterKey(key: ArrayBuffer | null) {
   activeMasterKey = key
-  if (key) {
-    try {
-      localStorage.setItem('active_master_key', bufferToBase64(key))
-    } catch (e) {
-      console.error('Failed to save master key to localStorage:', e)
-    }
-  } else {
-    localStorage.removeItem('active_master_key')
+}
+
+export async function checkServerSession(): Promise<{ authenticated: boolean; userId?: string }> {
+  const controller = new AbortController()
+  const timeoutId = window.setTimeout(() => controller.abort(), 8_000)
+  try {
+    return await apiJson<{ authenticated: boolean; userId?: string }>(`${API_BASE}/session`, {
+      signal: controller.signal
+    })
+  } catch {
+    return { authenticated: false }
+  } finally {
+    window.clearTimeout(timeoutId)
   }
 }
 
+/** Master key + username in memory/storage — enough to stay in the unlocked UI. */
+export function hasUnlockedLocalCrypto(): boolean {
+  return !!(getActiveMasterKey() && localStorage.getItem('active_username'))
+}
+
+/** Crypto unlock plus user id for authenticated API calls (userId may already be in localStorage). */
+export function hasUnlockedLocalSession(): boolean {
+  return hasUnlockedLocalCrypto() && !!localStorage.getItem('active_userid')
+}
+
+/** Persist server session user id when the /session response includes it. */
+export function persistSessionUserId(userId: string | undefined): void {
+  if (userId) {
+    localStorage.setItem('active_userid', userId)
+  }
+}
+
+export async function reauthWithPasskey(): Promise<boolean> {
+  const options = await apiJson<any>(`${API_BASE}/reauth-options`, {
+    method: 'POST'
+  })
+
+  const credentialResponse = await startAuthentication({ optionsJSON: options })
+
+  await apiJson(`${API_BASE}/reauth-verify`, {
+    method: 'POST',
+    body: JSON.stringify({
+      credentialResponse,
+      challenge: options.challenge
+    })
+  })
+
+  return true
+}
+
 // PIN fallback mechanism functions
 export async function setLocalPin(pin: string, username: string, masterKey: ArrayBuffer): Promise<void> {
   const pinKey = await deriveKeyFromPin(pin, username)
@@ -152,19 +188,11 @@ export interface RegistrationResult {
 
 export async function registerUser(username: string): Promise<RegistrationResult> {
   // 1. Get registration options
-  const optionsRes = await fetch(`${API_BASE}/register-options`, {
+  const options = await apiJson<any>(`${API_BASE}/register-options`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ username })
   })
 
-  if (!optionsRes.ok) {
-    const err = await optionsRes.json()
-    throw new Error(err.error || 'Failed to fetch registration options')
-  }
-
-  const options = await optionsRes.json()
-
   // Request the PRF extension WITH an evaluation salt. This must match the
   // salt used during login (PRF_SALT), otherwise the PRF-derived key produced
   // at login would never match what was stored here and every login would fall
@@ -229,9 +257,8 @@ export async function registerUser(username: string): Promise<RegistrationResult
   const encryptedRecovery = await encryptBuffer(masterKey, recoveryKey)
 
   // 4. Verify registration on the server
-  const verifyRes = await fetch(`${API_BASE}/register-verify`, {
+  const result = await apiJson<{ verified: boolean; userId: string }>(`${API_BASE}/register-verify`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       username,
       credentialResponse,
@@ -243,13 +270,6 @@ export async function registerUser(username: string): Promise<RegistrationResult
       encryptedMasterKeyRecTag: encryptedRecovery.tag
     })
   })
-
-  if (!verifyRes.ok) {
-    const err = await verifyRes.json()
-    throw new Error(err.error || 'Failed to verify registration response')
-  }
-
-  const result = await verifyRes.json()
   if (result.verified) {
     setActiveMasterKey(masterKey)
     localStorage.setItem('active_username', username)
@@ -292,19 +312,11 @@ export async function loginUser(username?: string): Promise<LoginResult> {
   }
 
   // 1. Get authentication options
-  const optionsRes = await fetch(`${API_BASE}/login-options`, {
+  const options = await apiJson<any>(`${API_BASE}/login-options`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({ username })
   })
 
-  if (!optionsRes.ok) {
-    const err = await optionsRes.json()
-    throw new Error(err.error || 'Failed to fetch login options')
-  }
-
-  const options = await optionsRes.json()
-
   // Add PRF extension evaluation input.
   // When the server returned a concrete allowCredentials list we use
   // `evalByCredential` (keyed by the base64url credential id), which is the
@@ -350,7 +362,11 @@ export async function loginUser(username?: string): Promise<LoginResult> {
   const prfRequested = !!options.extensions?.prf
   try {
     credentialResponse = await startAuthentication({ optionsJSON: options })
-  } catch (err: any) {
+  } catch (err: unknown) {
+    // User cancelled or timed out — never open a second platform prompt.
+    if (isWebAuthnUserAbortError(err)) {
+      throw err
+    }
     if (prfRequested) {
       console.warn('Passkey authentication with PRF extension failed, retrying without PRF:', err)
       if (options.extensions) {
@@ -366,21 +382,23 @@ export async function loginUser(username?: string): Promise<LoginResult> {
   }
 
   // 3. Verify assertion on the server
-  const verifyRes = await fetch(`${API_BASE}/login-verify`, {
+  const result = await apiJson<{
+    verified: boolean
+    userId: string
+    username: string
+    encryptedMasterKeyPrf: string | null
+    encryptedMasterKeyPrfIv: string | null
+    encryptedMasterKeyPrfTag: string | null
+    encryptedMasterKeyRec: string
+    encryptedMasterKeyRecIv: string
+    encryptedMasterKeyRecTag: string
+  }>(`${API_BASE}/login-verify`, {
     method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
       credentialResponse,
       challenge: options.challenge
     })
   })
-
-  if (!verifyRes.ok) {
-    const err = await verifyRes.json()
-    throw new Error(err.error || 'Failed to verify login response')
-  }
-
-  const result = await verifyRes.json()
   if (!result.verified) {
     return { verified: false, prfSuccess: false }
   }
@@ -407,7 +425,12 @@ export async function loginUser(username?: string): Promise<LoginResult> {
     console.log('PRF extension results first present:', !!prfResults.results?.first)
   }
 
-  if (prfResults?.results?.first && result.encryptedMasterKeyPrf) {
+  if (
+    prfResults?.results?.first &&
+    result.encryptedMasterKeyPrf &&
+    result.encryptedMasterKeyPrfIv &&
+    result.encryptedMasterKeyPrfTag
+  ) {
     try {
       const firstBuffer = typeof prfResults.results.first === 'string'
         ? base64urlToBuffer(prfResults.results.first)
@@ -475,22 +498,14 @@ export async function completeLoginWithRecovery(
         const prfKey = await deriveKeyFromPrf(firstBuffer)
         const encryptedPrf = await encryptBuffer(decryptedMaster, prfKey)
         console.log('Sending PRF credentials to server...')
-        const enrollRes = await fetch(`${API_BASE}/enroll-prf`, {
+        await apiJson(`${API_BASE}/enroll-prf`, {
           method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-            'X-User-Id': encryptedPayloads.userId
-          },
           body: JSON.stringify({
             encryptedMasterKeyPrf: encryptedPrf.ciphertext,
             encryptedMasterKeyPrfIv: encryptedPrf.iv,
             encryptedMasterKeyPrfTag: encryptedPrf.tag
           })
         })
-        console.log('Enrollment response status:', enrollRes.status)
-        if (!enrollRes.ok) {
-          console.warn('Server rejected PRF enrollment')
-        }
       } catch (err) {
         console.error('Failed to encrypt/enroll master key with PRF key:', err)
       }
@@ -508,25 +523,26 @@ export async function completeLoginWithRecovery(
   }
 }
 
-export function logoutUser() {
+export async function logoutUser() {
   setActiveMasterKey(null)
   clearLogbookKeysCache()
   localStorage.removeItem('active_username')
   localStorage.removeItem('active_userid')
+  try {
+    await apiFetch(`${API_BASE}/logout`, { method: 'POST' })
+  } catch {
+    /* ignore network errors on logout */
+  }
 }
 
 export async function deleteAccount(): Promise<boolean> {
-  const userId = localStorage.getItem('active_userid')
   const username = localStorage.getItem('active_username')
-  if (!userId) return false
+  if (!localStorage.getItem('active_userid')) return false
 
   try {
-    const res = await fetch(`${API_BASE}/delete-account`, {
-      method: 'DELETE',
-      headers: {
-        'X-User-Id': userId
-      }
-    })
+    await reauthWithPasskey()
+
+    const res = await apiFetch(`${API_BASE}/delete-account`, { method: 'DELETE' })
 
     if (res.ok) {
       if (username) {
@@ -542,11 +558,16 @@ export async function deleteAccount(): Promise<boolean> {
         db.photos.clear(),
         db.gpsTracks.clear(),
         db.syncQueue.clear(),
-        db.logbookKeys.clear()
+        db.logbookKeys.clear(),
+        db.personPool.clear(),
+        db.vesselPool.clear(),
+        db.logbookCrewSelections.clear(),
+        db.logbookVesselSelections.clear(),
+        db.userSyncQueue.clear()
       ])
 
       // Wipe localStorage and session variables
-      logoutUser()
+      await logoutUser()
       trackPlausibleEvent(PlausibleEvents.ACCOUNT_DELETED)
       return true
     }
@@ -555,3 +576,137 @@ export async function deleteAccount(): Promise<boolean> {
   }
   return false
 }
+
+export interface UserProfileCredential {
+  id: string
+  label: string | null
+  credentialIdPreview: string
+  transports: string[]
+}
+
+export interface UserProfile {
+  userId: string
+  username: string
+  createdAt: string
+  hasPrfEncryption: boolean
+  credentials: UserProfileCredential[]
+  serverMeta: {
+    ownedLogbookCount: number
+    collaborationCount: number
+  }
+}
+
+export async function fetchUserProfile(): Promise<UserProfile> {
+  return apiJson<UserProfile>(`${API_BASE}/profile`)
+}
+
+async function enrollPrfFromMasterKey(masterKey: ArrayBuffer, prfFirst: ArrayBuffer): Promise<void> {
+  const prfKey = await deriveKeyFromPrf(prfFirst)
+  const encryptedPrf = await encryptBuffer(masterKey, prfKey)
+  await apiJson(`${API_BASE}/enroll-prf`, {
+    method: 'POST',
+    body: JSON.stringify({
+      encryptedMasterKeyPrf: encryptedPrf.ciphertext,
+      encryptedMasterKeyPrfIv: encryptedPrf.iv,
+      encryptedMasterKeyPrfTag: encryptedPrf.tag
+    })
+  })
+}
+
+export async function addPasskey(label?: string): Promise<void> {
+  await reauthWithPasskey()
+
+  const options = await apiJson<any>(`${API_BASE}/add-credential-options`, {
+    method: 'POST'
+  })
+
+  if (!options.extensions) {
+    options.extensions = {}
+  }
+  options.extensions.prf = { eval: { first: PRF_SALT.buffer } }
+
+  let credentialResponse
+  const prfRequested = !!options.extensions?.prf
+  try {
+    credentialResponse = await startRegistration({ optionsJSON: options })
+  } catch (err: any) {
+    const isOptionError = err.name === 'NotSupportedError' ||
+      err.message?.toLowerCase().includes('options') ||
+      err.message?.toLowerCase().includes('process') ||
+      err.message?.toLowerCase().includes('unable to')
+    if (prfRequested && isOptionError) {
+      console.warn('Add passkey with PRF extension failed, retrying without PRF:', err)
+      if (options.extensions) {
+        delete options.extensions.prf
+      }
+      credentialResponse = await startRegistration({ optionsJSON: options })
+    } else {
+      throw err
+    }
+  }
+
+  await apiJson(`${API_BASE}/add-credential-verify`, {
+    method: 'POST',
+    body: JSON.stringify({
+      credentialResponse,
+      challenge: options.challenge,
+      ...(label?.trim() ? { label: label.trim() } : {})
+    })
+  })
+
+  const masterKey = getActiveMasterKey()
+  const prfFirstBuffer = extractPrfFirst(credentialResponse.clientExtensionResults || {})
+  if (masterKey && prfFirstBuffer) {
+    try {
+      await enrollPrfFromMasterKey(masterKey, prfFirstBuffer)
+    } catch (err) {
+      console.error('Failed to enroll PRF after adding passkey:', err)
+    }
+  }
+}
+
+export async function removePasskey(credentialDbId: string): Promise<void> {
+  await reauthWithPasskey()
+
+  const res = await apiFetch(`${API_BASE}/credentials/${credentialDbId}`, {
+    method: 'DELETE'
+  })
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.error || 'Failed to remove passkey')
+  }
+}
+
+export async function renamePasskey(credentialDbId: string, label: string): Promise<void> {
+  await reauthWithPasskey()
+
+  await apiJson(`${API_BASE}/credentials/${credentialDbId}`, {
+    method: 'PATCH',
+    body: JSON.stringify({ label })
+  })
+}
+
+export async function rotateRecoveryPhrase(): Promise<string> {
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) {
+    throw new Error('NO_ACTIVE_MASTER_KEY')
+  }
+
+  await reauthWithPasskey()
+
+  const recoveryPhrase = generateRecoveryPhrase()
+  const recoveryKey = await deriveKeyFromPhrase(recoveryPhrase)
+  const encryptedRecovery = await encryptBuffer(masterKey, recoveryKey)
+
+  await apiJson(`${API_BASE}/rotate-recovery`, {
+    method: 'POST',
+    body: JSON.stringify({
+      encryptedMasterKeyRec: encryptedRecovery.ciphertext,
+      encryptedMasterKeyRecIv: encryptedRecovery.iv,
+      encryptedMasterKeyRecTag: encryptedRecovery.tag
+    })
+  })
+
+  return recoveryPhrase
+}

client/src/services/authSession.test.ts

@@ -0,0 +1,53 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  hasUnlockedLocalCrypto,
+  hasUnlockedLocalSession,
+  setActiveMasterKey
+} from './auth.js'
+
+describe('local session unlock checks', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    setActiveMasterKey(null)
+  })
+
+  it('hasUnlockedLocalCrypto with master key and username only', () => {
+    setActiveMasterKey(new ArrayBuffer(32))
+    localStorage.setItem('active_username', 'skipper')
+    expect(hasUnlockedLocalCrypto()).toBe(true)
+    expect(hasUnlockedLocalSession()).toBe(false)
+  })
+
+  it('hasUnlockedLocalSession when userId is present', () => {
+    setActiveMasterKey(new ArrayBuffer(32))
+    localStorage.setItem('active_username', 'skipper')
+    localStorage.setItem('active_userid', 'user-1')
+    expect(hasUnlockedLocalCrypto()).toBe(true)
+    expect(hasUnlockedLocalSession()).toBe(true)
+  })
+
+  it('hasUnlockedLocalCrypto false without master key', () => {
+    localStorage.setItem('active_username', 'skipper')
+    localStorage.setItem('active_userid', 'user-1')
+    expect(hasUnlockedLocalCrypto()).toBe(false)
+  })
+})
+
+describe('persistSessionUserId', () => {
+  beforeEach(() => {
+    localStorage.clear()
+  })
+
+  it('stores userId when provided', async () => {
+    const { persistSessionUserId } = await import('./auth.js')
+    persistSessionUserId('user-42')
+    expect(localStorage.getItem('active_userid')).toBe('user-42')
+  })
+
+  it('does not clear existing userId when omitted', async () => {
+    const { persistSessionUserId } = await import('./auth.js')
+    localStorage.setItem('active_userid', 'user-1')
+    persistSessionUserId(undefined)
+    expect(localStorage.getItem('active_userid')).toBe('user-1')
+  })
+})

client/src/services/crewMigration.ts

@@ -0,0 +1,125 @@
+import { db } from './db.js'
+import { getActiveMasterKey } from './auth.js'
+import { decryptJson, encryptJson } from './crypto.js'
+import { getLogbookKey } from './logbookKeys.js'
+import type { PersonData } from '../types/person.js'
+import { buildLogbookCrewSelection, pickActiveSkipperId } from '../utils/personSnapshots.js'
+import { entryCrewFromLogbookSelection } from '../utils/personSnapshots.js'
+import { saveLogbookCrewSelection } from './logbookCrewSelection.js'
+const MIGRATION_FLAG = 'crew_pool_migration_v1_done'
+
+export async function migrateLegacyCrewToPoolIfNeeded(): Promise<void> {
+  const userId = localStorage.getItem('active_userid')
+  if (!userId || localStorage.getItem(MIGRATION_FLAG) === userId) return
+
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) return
+
+  try {
+    const ownedLogbooks = await db.logbooks.filter((lb) => lb.isShared !== 1).toArray()
+    const poolByLegacyKey = new Map<string, string>()
+    const poolData = new Map<string, PersonData>()
+
+    for (const logbook of ownedLogbooks) {
+      const logbookKey = (await getLogbookKey(logbook.id)) || masterKey
+      const legacyCrews = await db.crews.where({ logbookId: logbook.id }).toArray()
+
+      const legacyIds: { skipperIds: string[]; crewIds: string[] } = {
+        skipperIds: [],
+        crewIds: []
+      }
+
+      for (const record of legacyCrews) {
+        const data = (await decryptJson(record.encryptedData, record.iv, record.tag, logbookKey)) as
+          | PersonData
+          | null
+        if (!data) continue
+
+        const role = record.payloadId === 'skipper' ? 'skipper' : 'crew'
+        const personData: PersonData = { ...data, role }
+        const dedupeKey = `${role}:${personData.name}:${personData.passportNumber}`
+
+        let poolId = poolByLegacyKey.get(dedupeKey)
+        if (!poolId) {
+          poolId = record.payloadId === 'skipper' ? 'skipper' : record.payloadId
+          const existing = await db.personPool.get(poolId)
+          if (!existing) {
+            const encrypted = await encryptJson(personData, masterKey)
+            const now = new Date().toISOString()
+            await db.personPool.put({
+              payloadId: poolId,
+              encryptedData: encrypted.ciphertext,
+              iv: encrypted.iv,
+              tag: encrypted.tag,
+              updatedAt: now
+            })
+            await db.userSyncQueue.put({
+              action: 'create',
+              type: 'person',
+              payloadId: poolId,
+              data: JSON.stringify(encrypted),
+              updatedAt: now
+            })
+          }
+          poolByLegacyKey.set(dedupeKey, poolId)
+          poolData.set(poolId, personData)
+        }
+
+        if (role === 'skipper') {
+          if (!legacyIds.skipperIds.includes(poolId)) legacyIds.skipperIds.push(poolId)
+        } else {
+          legacyIds.crewIds.push(poolId)
+        }
+      }
+
+      const activeSkipperId = pickActiveSkipperId(legacyIds.skipperIds)
+      const existingSelection = await db.logbookCrewSelections.get(logbook.id)
+      if (!existingSelection && (activeSkipperId || legacyIds.crewIds.length > 0)) {
+        const selection = buildLogbookCrewSelection(
+          activeSkipperId,
+          legacyIds.crewIds,
+          poolData
+        )
+        await saveLogbookCrewSelection(logbook.id, selection)
+
+        const entryCrew = entryCrewFromLogbookSelection(selection)
+        const entries = await db.entries.where({ logbookId: logbook.id }).toArray()
+        for (const entry of entries) {
+          const dec = (await decryptJson(entry.encryptedData, entry.iv, entry.tag, logbookKey)) as Record<
+            string,
+            unknown
+          > | null
+          if (!dec) continue
+          if (dec.selectedSkipperId != null || (Array.isArray(dec.selectedCrewIds) && dec.selectedCrewIds.length > 0)) {
+            continue
+          }
+          const updated = {
+            ...dec,
+            ...entryCrew
+          }
+          const encrypted = await encryptJson(updated, logbookKey)
+          const now = new Date().toISOString()
+          await db.entries.put({
+            ...entry,
+            encryptedData: encrypted.ciphertext,
+            iv: encrypted.iv,
+            tag: encrypted.tag,
+            updatedAt: now
+          })
+          await db.syncQueue.put({
+            action: 'update',
+            type: 'entry',
+            payloadId: entry.payloadId,
+            logbookId: logbook.id,
+            data: JSON.stringify(encrypted),
+            updatedAt: now
+          })
+        }
+      }
+    }
+
+    localStorage.setItem(MIGRATION_FLAG, userId)
+  } catch (err) {
+    console.warn('Crew pool migration failed:', err)
+  }
+}

client/src/services/csvExport.ts

@@ -3,7 +3,9 @@ import { getActiveMasterKey } from './auth.js'
 import { getLogbookKey } from './logbookKeys.js'
 import { decryptJson } from './crypto.js'
 import { formatSignatureForExport, normalizeSignature } from '../utils/signatures.js'
+import { sortLogEventsByTime } from '../utils/logEntryPayload.js'
 import i18n from '../i18n/index.js'
+import { formatAppDateTime } from '../utils/dateTimeFormat.js'
 
 function escapeCsvValue(val: string | number | undefined | null): string {
   if (val === null || val === undefined) return '';
@@ -35,22 +37,17 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
       throw new Error('Encryption key not found. User must log in.')
     }
 
-    // 1. Fetch Yacht details
-    const yachtRecord = await db.yachts.get(logbookId);
-    if (yachtRecord) {
-      try {
-        const yacht = await decryptJson(yachtRecord.encryptedData, yachtRecord.iv, yachtRecord.tag, masterKey);
-        yachtName = yacht.name || '';
-        homePort = yacht.port || '';
-        owner = yacht.owner || '';
-        charter = yacht.charter || '';
-        registration = yacht.registration || '';
-        callsign = yacht.callsign || '';
-        atis = yacht.atis || '';
-        mmsi = yacht.mmsi || '';
-      } catch (e) {
-        console.error('Failed to decrypt yacht details for CSV:', e);
-      }
+    const { resolveVesselForLogbook } = await import('./resolveVessel.js')
+    const yacht = await resolveVesselForLogbook(logbookId)
+    if (yacht) {
+      yachtName = yacht.name || ''
+      homePort = yacht.homePort || ''
+      owner = yacht.owner || ''
+      charter = yacht.charterCompany || ''
+      registration = yacht.registrationNumber || ''
+      callsign = yacht.callSign || ''
+      atis = yacht.atis || ''
+      mmsi = yacht.mmsi || ''
     }
 
     // 2. Fetch logbook entries
@@ -77,15 +74,16 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
 
   // Headers matching the requested event fields & metadata
   const headers = [
-    'Date', 'Day of Travel', 'Departure Port', 'Destination Port',
+    'Date', 'Day of Travel', 'Departure Port', 'Destination Port', 'AI Summary',
     'Skipper Signature', 'Crew Signature',
-    'Track Distance (nm)', 'Track Max Speed (kn)', 'Track Avg Speed (kn)',
+    'Track Distance (nm)', 'Track Max Speed (kn)', 'Track Avg Speed (kn)', 'Motor Hours (h)',
     'Event Time', 'MgK Course', 'RwK Course',
-    'Wind Dir', 'Wind Str', 'Barometer (hPa)', 'Sea State',
+    'Wind Dir', 'Wind Str', 'Barometer (hPa)', 'Sea State', 'Visibility',
     'Current', 'Heel Angle', 'Sails/Motor', 'Log (nm)', 'Distance (nm)',
     'Latitude', 'Longitude', 'Remarks',
     'Freshwater Morning (L)', 'Freshwater Refilled (L)', 'Freshwater Evening (L)', 'Freshwater Consumption (L)',
     'Fuel Morning (L)', 'Fuel Refilled (L)', 'Fuel Evening (L)', 'Fuel Consumption (L)',
+    'Greywater Level (L)',
     'Yacht Name', 'Home Port', 'Owner', 'Charter Company', 'Registration', 'Callsign', 'ATIS', 'MMSI'
   ];
 
@@ -93,8 +91,12 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
   const exportLabels = {
     imagePlaceholder: i18n.t('logs.sign_export_image'),
     passkeyLabel: (username: string, signedAt: string) => {
-      const date = new Date(signedAt).toLocaleString(i18n.language === 'de' ? 'de-DE' : 'en-GB')
+      const date = formatAppDateTime(signedAt, i18n.language)
       return i18n.t('logs.sign_passkey_export', { username, date })
+    },
+    attributionLabel: (username: string, signedAt: string) => {
+      const date = formatAppDateTime(signedAt, i18n.language)
+      return i18n.t('logs.sign_attribution_export', { username, date })
     }
   };
 
@@ -108,6 +110,7 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
     const trackDist = entry.trackDistanceNm ?? '';
     const trackMax = entry.trackSpeedMaxKn ?? '';
     const trackAvg = entry.trackSpeedAvgKn ?? '';
+    const motorH = entry.motorHours ?? '';
     const fwM = entry.freshwater?.morning ?? '';
     const fwR = entry.freshwater?.refilled ?? '';
     const fwE = entry.freshwater?.evening ?? '';
@@ -116,36 +119,41 @@ export async function exportLogbookToCsv(logbookId: string, preloadedData?: { ya
     const fuelR = entry.fuel?.refilled ?? '';
     const fuelE = entry.fuel?.evening ?? '';
     const fuelCons = entry.fuel?.consumption ?? '';
+    const greywaterLevel = entry.greywater?.level ?? '';
+    const aiSummary = entry.aiSummary ?? '';
 
     const eventsList = entry.events || [];
     if (eventsList.length === 0) {
       // Create one row even if there are no events for the day
       rows.push([
-        dateVal, travelDay, dep, dest,
+        dateVal, travelDay, dep, dest, aiSummary,
         signS, signC,
-        trackDist, trackMax, trackAvg,
+        trackDist, trackMax, trackAvg, motorH,
         '', '', '',
-        '', '', '', '',
+        '', '', '', '', '',
         '', '', '', '', '',
         '', '', '',
         fwM, fwR, fwE, fwCons,
         fuelM, fuelR, fuelE, fuelCons,
+        greywaterLevel,
         yachtName, homePort, owner, charter, registration, callsign, atis, mmsi
       ].map(escapeCsvValue));
     } else {
       // Sort events chronologically by time
-      const sortedEvents = [...eventsList].sort((a, b) => (a.time || '').localeCompare(b.time || ''));
+      const sortedEvents = sortLogEventsByTime(eventsList);
       for (const ev of sortedEvents) {
         rows.push([
-          dateVal, travelDay, dep, dest,
+          dateVal, travelDay, dep, dest, aiSummary,
           signS, signC,
-          trackDist, trackMax, trackAvg,
+          trackDist, trackMax, trackAvg, motorH,
           ev.time || '', ev.mgk || '', ev.rwk || '',
           ev.windDirection || '', ev.windStrength || '', ev.windPressure || '', ev.seaState || '',
+          ev.visibility || '',
           ev.current || '', ev.heel || '', ev.sailsOrMotor || '', ev.logReading || '', ev.distance || '',
           ev.gpsLat || '', ev.gpsLng || '', ev.remarks || '',
           fwM, fwR, fwE, fwCons,
           fuelM, fuelR, fuelE, fuelCons,
+          greywaterLevel,
           yachtName, homePort, owner, charter, registration, callsign, atis, mmsi
         ].map(escapeCsvValue));
       }

client/src/services/db.ts

@@ -7,6 +7,7 @@ export interface LocalLogbook {
   isSynced: number // 1 = yes, 0 = pending local modifications
   isShared?: number // 1 = collaborator copy, 0 or unset = owned
   isDemo?: number // 1 = demo logbook seeded at registration
+  collaborationRole?: 'READ' | 'WRITE' // set when isShared = 1
 }
 
 export interface LocalYacht {
@@ -34,6 +35,14 @@ export interface LocalDeviation {
   updatedAt: string
 }
 
+export interface EntryListCache {
+  date: string
+  dayOfTravel: string
+  departure: string
+  destination: string
+  skipperSignStatus: 'none' | 'valid' | 'invalid'
+}
+
 export interface LocalEntry {
   payloadId: string
   logbookId: string
@@ -41,6 +50,8 @@ export interface LocalEntry {
   iv: string
   tag: string
   updatedAt: string
+  /** Plaintext list fields — avoids full decrypt when opening the journal list. */
+  listCache?: EntryListCache
 }
 
 export interface LocalPhoto {
@@ -63,6 +74,15 @@ export interface LocalGpsTrack {
   updatedAt: string
 }
 
+export interface LocalNmeaArchive {
+  entryId: string
+  logbookId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
 export interface LocalLogbookKey {
   logbookId: string
   encryptedKey: string
@@ -70,16 +90,75 @@ export interface LocalLogbookKey {
   tag: string
 }
 
+export interface LocalPerson {
+  payloadId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
+export interface LocalVessel {
+  payloadId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
+export interface LocalLogbookCrewSelection {
+  logbookId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
+export interface LocalLogbookVesselSelection {
+  logbookId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
 export interface SyncQueueItem {
   id?: number
   action: 'create' | 'update' | 'delete'
-  type: 'yacht' | 'crew' | 'deviation' | 'entry' | 'logbook' | 'photo' | 'gpsTrack'
+  type:
+    | 'yacht'
+    | 'crew'
+    | 'deviation'
+    | 'entry'
+    | 'logbook'
+    | 'photo'
+    | 'gpsTrack'
+    | 'logbookCrew'
+    | 'logbookVessel'
   payloadId: string // payloadId or logbookId depending on the type
   logbookId: string
   data: string // JSON representation of the local record
   updatedAt: string
 }
 
+export interface UserSyncQueueItem {
+  id?: number
+  action: 'create' | 'update' | 'delete'
+  type: 'person' | 'vessel'
+  payloadId: string
+  data: string
+  updatedAt: string
+}
+
+export interface EntryDraftRecord {
+  logbookId: string
+  entryId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
 class DaagboxDatabase extends Dexie {
   logbooks!: Table<LocalLogbook>
   yachts!: Table<LocalYacht>
@@ -88,8 +167,15 @@ class DaagboxDatabase extends Dexie {
   entries!: Table<LocalEntry>
   photos!: Table<LocalPhoto>
   gpsTracks!: Table<LocalGpsTrack>
+  nmeaArchives!: Table<LocalNmeaArchive>
   logbookKeys!: Table<LocalLogbookKey>
+  personPool!: Table<LocalPerson>
+  vesselPool!: Table<LocalVessel>
+  logbookCrewSelections!: Table<LocalLogbookCrewSelection>
+  logbookVesselSelections!: Table<LocalLogbookVesselSelection>
   syncQueue!: Table<SyncQueueItem>
+  userSyncQueue!: Table<UserSyncQueueItem>
+  entryDrafts!: Table<EntryDraftRecord, [string, string]>
 
   constructor() {
     super('DaagboxDatabase')
@@ -144,6 +230,65 @@ class DaagboxDatabase extends Dexie {
       gpsTracks: 'entryId, logbookId, updatedAt',
       logbookKeys: 'logbookId'
     })
+    this.version(6).stores({
+      logbooks: 'id, encryptedTitle, updatedAt, isSynced, isShared, isDemo',
+      yachts: 'logbookId, updatedAt',
+      crews: 'payloadId, logbookId, updatedAt',
+      deviations: 'logbookId, updatedAt',
+      entries: 'payloadId, logbookId, updatedAt',
+      syncQueue: '++id, action, type, payloadId, logbookId',
+      photos: 'payloadId, entryId, logbookId, updatedAt',
+      gpsTracks: 'entryId, logbookId, updatedAt',
+      nmeaArchives: 'entryId, logbookId, updatedAt',
+      logbookKeys: 'logbookId'
+    })
+    this.version(7).stores({
+      logbooks: 'id, encryptedTitle, updatedAt, isSynced, isShared, isDemo',
+      yachts: 'logbookId, updatedAt',
+      crews: 'payloadId, logbookId, updatedAt',
+      deviations: 'logbookId, updatedAt',
+      entries: 'payloadId, logbookId, updatedAt',
+      syncQueue: '++id, action, type, payloadId, logbookId',
+      photos: 'payloadId, entryId, logbookId, updatedAt',
+      gpsTracks: 'entryId, logbookId, updatedAt',
+      nmeaArchives: 'entryId, logbookId, updatedAt',
+      logbookKeys: 'logbookId',
+      entryDrafts: '[logbookId+entryId], updatedAt'
+    })
+    this.version(8).stores({
+      logbooks: 'id, encryptedTitle, updatedAt, isSynced, isShared, isDemo',
+      yachts: 'logbookId, updatedAt',
+      crews: 'payloadId, logbookId, updatedAt',
+      deviations: 'logbookId, updatedAt',
+      entries: 'payloadId, logbookId, updatedAt',
+      syncQueue: '++id, action, type, payloadId, logbookId',
+      photos: 'payloadId, entryId, logbookId, updatedAt',
+      gpsTracks: 'entryId, logbookId, updatedAt',
+      nmeaArchives: 'entryId, logbookId, updatedAt',
+      logbookKeys: 'logbookId',
+      personPool: 'payloadId, updatedAt',
+      logbookCrewSelections: 'logbookId, updatedAt',
+      userSyncQueue: '++id, action, type, payloadId',
+      entryDrafts: '[logbookId+entryId], updatedAt'
+    })
+    this.version(9).stores({
+      logbooks: 'id, encryptedTitle, updatedAt, isSynced, isShared, isDemo',
+      yachts: 'logbookId, updatedAt',
+      crews: 'payloadId, logbookId, updatedAt',
+      deviations: 'logbookId, updatedAt',
+      entries: 'payloadId, logbookId, updatedAt',
+      syncQueue: '++id, action, type, payloadId, logbookId',
+      photos: 'payloadId, entryId, logbookId, updatedAt',
+      gpsTracks: 'entryId, logbookId, updatedAt',
+      nmeaArchives: 'entryId, logbookId, updatedAt',
+      logbookKeys: 'logbookId',
+      personPool: 'payloadId, updatedAt',
+      vesselPool: 'payloadId, updatedAt',
+      logbookCrewSelections: 'logbookId, updatedAt',
+      logbookVesselSelections: 'logbookId, updatedAt',
+      userSyncQueue: '++id, action, type, payloadId',
+      entryDrafts: '[logbookId+entryId], updatedAt'
+    })
   }
 }
 

client/src/services/demoLogbook.test.ts

@@ -0,0 +1,36 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import {
+  clearDemoLogbookRefs,
+  getDemoFirstEntryStorageKey,
+  getDemoLogbookStorageKey
+} from './demoLogbook.js'
+
+describe('clearDemoLogbookRefs', () => {
+  const userId = 'user-1'
+
+  beforeEach(() => {
+    localStorage.clear()
+    localStorage.setItem('active_userid', userId)
+  })
+
+  it('removes demo logbook and first-entry keys for the user', () => {
+    const logbookId = 'lb-demo'
+    localStorage.setItem(getDemoLogbookStorageKey(userId), logbookId)
+    localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
+
+    clearDemoLogbookRefs(userId, logbookId)
+
+    expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBeNull()
+    expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBeNull()
+  })
+
+  it('does not clear refs when logbookId does not match stored demo id', () => {
+    localStorage.setItem(getDemoLogbookStorageKey(userId), 'other-logbook')
+    localStorage.setItem(getDemoFirstEntryStorageKey(userId), 'entry-1')
+
+    clearDemoLogbookRefs(userId, 'deleted-logbook')
+
+    expect(localStorage.getItem(getDemoLogbookStorageKey(userId))).toBe('other-logbook')
+    expect(localStorage.getItem(getDemoFirstEntryStorageKey(userId))).toBe('entry-1')
+  })
+})

client/src/services/demoLogbook.ts

@@ -3,14 +3,17 @@ import { db } from './db.js'
 import { getActiveMasterKey } from './auth.js'
 import { getLogbookKey } from './logbookKeys.js'
 import { encryptJson } from './crypto.js'
-import { parseTrackFile } from './trackUpload.js'
 import { syncLogbook } from './sync.js'
-import { computeTrackStats } from '../utils/trackStats.js'
+import { putEntryRecord } from '../utils/entryListCache.js'
+import { syncPersonPool } from './personPoolSync.js'
 import i18n from '../i18n/index.js'
-
-import kielLaboeGpx from '../assets/demo/kiel-laboe.gpx?raw'
-import laboeDampGpx from '../assets/demo/laboe-damp.gpx?raw'
-import dampSchleimuendeGpx from '../assets/demo/damp-schleimuende.gpx?raw'
+import type { PersonData } from '../types/person.js'
+import { buildLogbookCrewSelection } from '../utils/personSnapshots.js'
+import {
+  buildDemoPersonPool,
+  buildDemoEntryPayloads,
+  buildDemoYachtData
+} from './demoLogbookData.js'
 
 export const SEED_DEMO_FLAG = 'seed_demo_logbook'
 
@@ -22,124 +25,10 @@ export function getDemoFirstEntryStorageKey(userId: string): string {
   return `demo_first_entry_id_${userId}`
 }
 
-interface DemoDaySpec {
-  date: string
-  dayOfTravel: string
-  departure: string
-  destination: string
-  gpx: string
-  filename: string
-  freshwater: { morning: number; refilled: number; evening: number; consumption: number }
-  fuel: { morning: number; refilled: number; evening: number; consumption: number }
-  events: Array<Record<string, string>>
-}
-
-function buildDemoDays(): DemoDaySpec[] {
-  const isDe = i18n.language.startsWith('de')
-  return [
-    {
-      date: '2026-05-29',
-      dayOfTravel: '1',
-      departure: isDe ? 'Kiel' : 'Kiel',
-      destination: isDe ? 'Laboe' : 'Laboe',
-      gpx: kielLaboeGpx,
-      filename: 'kiel-laboe.gpx',
-      freshwater: { morning: 120, refilled: 0, evening: 105, consumption: 15 },
-      fuel: { morning: 85, refilled: 0, evening: 78, consumption: 7 },
-      events: [
-        {
-          time: '10:15',
-          mgk: '042',
-          rwk: '038',
-          windDirection: isDe ? 'NW' : 'NW',
-          windStrength: '4 Bft',
-          seaState: isDe ? 'leicht bewegt' : 'slight',
-          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
-          remarks: isDe ? 'Abfahrt Kiellinie' : 'Departure Kiellinie'
-        },
-        {
-          time: '11:20',
-          mgk: '030',
-          rwk: '028',
-          windDirection: 'N',
-          windStrength: '3 Bft',
-          seaState: isDe ? 'ruhig' : 'calm',
-          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
-          remarks: isDe ? 'Ankunft Laboe' : 'Arrival Laboe'
-        }
-      ]
-    },
-    {
-      date: '2026-05-30',
-      dayOfTravel: '2',
-      departure: 'Laboe',
-      destination: 'Damp',
-      gpx: laboeDampGpx,
-      filename: 'laboe-damp.gpx',
-      freshwater: { morning: 105, refilled: 25, evening: 110, consumption: 20 },
-      fuel: { morning: 78, refilled: 0, evening: 70, consumption: 8 },
-      events: [
-        {
-          time: '09:00',
-          mgk: '055',
-          rwk: '050',
-          windDirection: 'NE',
-          windStrength: '3 Bft',
-          seaState: isDe ? 'leicht bewegt' : 'slight',
-          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
-          remarks: isDe ? 'Auslaufen aus Laboe' : 'Departing Laboe'
-        },
-        {
-          time: '12:30',
-          mgk: '075',
-          rwk: '068',
-          windDirection: 'E',
-          windStrength: '4 Bft',
-          seaState: isDe ? 'mäßig bewegt' : 'moderate',
-          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
-          remarks: isDe ? 'Kurs entlang der Küste' : 'Coastal passage'
-        }
-      ]
-    },
-    {
-      date: '2026-05-31',
-      dayOfTravel: '3',
-      departure: 'Damp',
-      destination: isDe ? 'Schleimünde' : 'Schleimünde',
-      gpx: dampSchleimuendeGpx,
-      filename: 'damp-schleimuende.gpx',
-      freshwater: { morning: 110, refilled: 0, evening: 95, consumption: 15 },
-      fuel: { morning: 70, refilled: 15, evening: 80, consumption: 5 },
-      events: [
-        {
-          time: '08:30',
-          mgk: '290',
-          rwk: '285',
-          windDirection: 'W',
-          windStrength: '4 Bft',
-          seaState: isDe ? 'mäßig bewegt' : 'moderate',
-          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
-          remarks: isDe ? 'Passage zur Schlei' : 'Passage toward Schlei'
-        },
-        {
-          time: '14:00',
-          mgk: '310',
-          rwk: '305',
-          windDirection: 'NW',
-          windStrength: '3 Bft',
-          seaState: isDe ? 'leicht bewegt' : 'slight',
-          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
-          remarks: isDe ? 'Ziel Schleimünde' : 'Destination Schleimünde'
-        }
-      ]
-    }
-  ]
-}
-
 async function putEncryptedRecord(
   logbookId: string,
   key: ArrayBuffer,
-  type: 'entry' | 'crew' | 'yacht' | 'gpsTrack',
+  type: 'entry' | 'yacht' | 'gpsTrack' | 'logbookCrew',
   payloadId: string,
   data: unknown,
   now: string
@@ -147,23 +36,17 @@ async function putEncryptedRecord(
   const encrypted = await encryptJson(data, key)
 
   if (type === 'entry') {
-    await db.entries.put({
-      payloadId,
-      logbookId,
-      encryptedData: encrypted.ciphertext,
-      iv: encrypted.iv,
-      tag: encrypted.tag,
-      updatedAt: now
-    })
-  } else if (type === 'crew') {
-    await db.crews.put({
-      payloadId,
-      logbookId,
-      encryptedData: encrypted.ciphertext,
-      iv: encrypted.iv,
-      tag: encrypted.tag,
-      updatedAt: now
-    })
+    await putEntryRecord(
+      {
+        payloadId,
+        logbookId,
+        encryptedData: encrypted.ciphertext,
+        iv: encrypted.iv,
+        tag: encrypted.tag,
+        updatedAt: now
+      },
+      data as Record<string, unknown>
+    )
   } else if (type === 'yacht') {
     await db.yachts.put({
       logbookId,
@@ -181,57 +64,62 @@ async function putEncryptedRecord(
       tag: encrypted.tag,
       updatedAt: now
     })
+  } else if (type === 'logbookCrew') {
+    await db.logbookCrewSelections.put({
+      logbookId,
+      encryptedData: encrypted.ciphertext,
+      iv: encrypted.iv,
+      tag: encrypted.tag,
+      updatedAt: now
+    })
   }
 
   await db.syncQueue.put({
-    action: type === 'yacht' ? 'update' : 'create',
+    action: type === 'yacht' || type === 'logbookCrew' ? 'update' : 'create',
     type,
-    payloadId: type === 'yacht' ? logbookId : payloadId,
+    payloadId: type === 'yacht' || type === 'logbookCrew' ? logbookId : payloadId,
     logbookId,
     data: JSON.stringify(encrypted),
     updatedAt: now
   })
 }
 
-async function seedYachtAndCrew(logbookId: string, key: ArrayBuffer, now: string): Promise<void> {
-  const isDe = i18n.language.startsWith('de')
-  const yachtData = {
-    name: isDe ? 'Seeadler' : 'Seeadler',
-    vesselType: isDe ? 'Segelyacht' : 'Sailing yacht',
-    lengthM: 12.5,
-    draftM: 1.9,
-    airDraftM: 18,
-    homePort: 'Kiel',
-    charterCompany: '',
-    owner: isDe ? 'Demo Skipper' : 'Demo Skipper',
-    registrationNumber: 'D-KI 1234',
-    callSign: 'DA1234',
-    atis: '',
-    mmsi: '',
-    sails: isDe
-      ? ['Großsegel', 'Genua', 'Spinnaker']
-      : ['Mainsail', 'Genoa', 'Spinnaker'],
-    photo: null
+async function seedPersonPool(masterKey: ArrayBuffer, now: string): Promise<Map<string, PersonData>> {
+  const poolMap = new Map<string, PersonData>()
+  for (const person of buildDemoPersonPool()) {
+    poolMap.set(person.payloadId, person.data)
+    const encrypted = await encryptJson(person.data, masterKey)
+    await db.personPool.put({
+      payloadId: person.payloadId,
+      encryptedData: encrypted.ciphertext,
+      iv: encrypted.iv,
+      tag: encrypted.tag,
+      updatedAt: now
+    })
+    await db.userSyncQueue.put({
+      action: 'create',
+      type: 'person',
+      payloadId: person.payloadId,
+      data: JSON.stringify(encrypted),
+      updatedAt: now
+    })
   }
+  syncPersonPool().catch((err) => console.warn('Demo person pool sync failed:', err))
+  return poolMap
+}
 
+async function seedYachtAndCrew(logbookId: string, key: ArrayBuffer, now: string): Promise<void> {
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) throw new Error('Encryption key not available')
+
+  const yachtData = buildDemoYachtData()
   await putEncryptedRecord(logbookId, key, 'yacht', logbookId, yachtData, now)
 
-  const crewId = crypto.randomUUID()
-  const crewData = {
-    name: isDe ? 'Anna Müller' : 'Anna Müller',
-    address: isDe ? 'Hafenstraße 1, 24103 Kiel' : 'Harbour St 1, 24103 Kiel',
-    birthDate: '1988-04-12',
-    phone: '+49 431 123456',
-    nationality: isDe ? 'Deutsch' : 'German',
-    passportNumber: 'C01X00T47',
-    bloodType: 'A+',
-    allergies: '',
-    diseases: '',
-    role: 'crew',
-    photo: null
-  }
-
-  await putEncryptedRecord(logbookId, key, 'crew', crewId, crewData, now)
+  const poolMap = await seedPersonPool(masterKey, now)
+  const skipperId = [...poolMap.entries()].find(([, d]) => d.role === 'skipper')?.[0] ?? null
+  const crewIds = [...poolMap.entries()].filter(([, d]) => d.role === 'crew').map(([id]) => id)
+  const selection = buildLogbookCrewSelection(skipperId, crewIds, poolMap)
+  await putEncryptedRecord(logbookId, key, 'logbookCrew', logbookId, selection, now)
 }
 
 export interface DemoSeedResult {
@@ -255,6 +143,7 @@ export async function seedDemoLogbookIfNeeded(): Promise<DemoSeedResult | null>
       const title = i18n.t('demo.logbook_title')
       return { logbookId: existingId, title, firstEntryId }
     }
+    clearDemoLogbookRefs(userId, existingId)
   }
 
   if (!shouldSeed) return null
@@ -273,42 +162,12 @@ export async function seedDemoLogbookIfNeeded(): Promise<DemoSeedResult | null>
   const now = new Date().toISOString()
   await seedYachtAndCrew(logbookId, key, now)
 
-  const days = buildDemoDays()
+  const entryPayloads = buildDemoEntryPayloads()
   let firstEntryId = ''
 
-  for (const day of days) {
-    const entryId = crypto.randomUUID()
+  for (const { entryId, entryPayload, trackData } of entryPayloads) {
     if (!firstEntryId) firstEntryId = entryId
-
-    const { waypoints } = parseTrackFile(day.gpx, day.filename)
-    const stats = computeTrackStats(waypoints)
-
-    const entryPayload: Record<string, unknown> = {
-      date: day.date,
-      dayOfTravel: day.dayOfTravel,
-      departure: day.departure,
-      destination: day.destination,
-      freshwater: { ...day.freshwater },
-      fuel: { ...day.fuel },
-      signSkipper: '',
-      signCrew: '',
-      events: day.events
-    }
-
-    if (stats) {
-      entryPayload.trackDistanceNm = stats.distanceNm
-      entryPayload.trackSpeedMaxKn = stats.speedMaxKn
-      entryPayload.trackSpeedAvgKn = stats.speedAvgKn
-    }
-
     await putEncryptedRecord(logbookId, key, 'entry', entryId, entryPayload, now)
-
-    const trackData = {
-      waypoints,
-      gpxContent: day.gpx,
-      filename: day.filename,
-      fileType: 'gpx'
-    }
     await putEncryptedRecord(logbookId, key, 'gpsTrack', entryId, trackData, now)
   }
 
@@ -329,3 +188,66 @@ export function getStoredDemoFirstEntryId(): string | null {
   if (!userId) return null
   return localStorage.getItem(getDemoFirstEntryStorageKey(userId))
 }
+
+/** Remove persisted demo logbook pointers when the logbook no longer exists. */
+export function clearDemoLogbookRefs(userId: string, logbookId?: string): void {
+  const storedId = localStorage.getItem(getDemoLogbookStorageKey(userId))
+  if (logbookId && storedId && storedId !== logbookId) return
+  localStorage.removeItem(getDemoLogbookStorageKey(userId))
+  localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
+}
+
+export async function entryExistsInLogbook(logbookId: string, entryId: string): Promise<boolean> {
+  const entry = await db.entries.get(entryId)
+  return entry?.logbookId === logbookId
+}
+
+export interface TourLogbookContext {
+  logbookId: string
+  title: string
+  firstEntryId: string | null
+}
+
+/** Pick a logbook + first entry for the onboarding tour (handles deleted demo data). */
+export async function resolveTourLogbookContext(
+  preferLogbookId?: string | null
+): Promise<TourLogbookContext | null> {
+  const userId = localStorage.getItem('active_userid')
+  if (!userId || !getActiveMasterKey()) return null
+
+  const demoId = localStorage.getItem(getDemoLogbookStorageKey(userId))
+  if (demoId && !(await db.logbooks.get(demoId))) {
+    clearDemoLogbookRefs(userId, demoId)
+  }
+
+  const { fetchLogbooks } = await import('./logbook.js')
+  const books = await fetchLogbooks()
+  if (books.length === 0) return null
+
+  const activeId = localStorage.getItem('active_logbook_id')
+  const pick =
+    (preferLogbookId ? books.find((b) => b.id === preferLogbookId) : undefined) ??
+    (activeId ? books.find((b) => b.id === activeId) : undefined) ??
+    (demoId ? books.find((b) => b.id === demoId) : undefined) ??
+    books[0]
+
+  const firstEntryId = await resolveTourFirstEntryId(pick.id, userId)
+  return { logbookId: pick.id, title: pick.title, firstEntryId }
+}
+
+async function resolveTourFirstEntryId(logbookId: string, userId: string): Promise<string | null> {
+  const stored = localStorage.getItem(getDemoFirstEntryStorageKey(userId))
+  if (stored && (await entryExistsInLogbook(logbookId, stored))) {
+    return stored
+  }
+
+  if (stored) {
+    localStorage.removeItem(getDemoFirstEntryStorageKey(userId))
+  }
+
+  const localEntries = await db.entries.where({ logbookId }).toArray()
+  if (localEntries.length === 0) return null
+
+  localEntries.sort((a, b) => b.updatedAt.localeCompare(a.updatedAt))
+  return localEntries[0]?.payloadId ?? null
+}

client/src/services/demoLogbookData.ts

@@ -0,0 +1,412 @@
+import { parseTrackFile } from './trackUpload.js'
+import { computeTrackStats } from '../utils/trackStats.js'
+import i18n from '../i18n/index.js'
+import { isGermanLocale } from '../utils/i18nLanguages.js'
+
+import kielLaboeGpx from '../assets/demo/kiel-laboe.gpx?raw'
+import laboeDampGpx from '../assets/demo/laboe-damp.gpx?raw'
+import dampSchleimuendeGpx from '../assets/demo/damp-schleimuende.gpx?raw'
+
+/** Stable ID for the first demo travel day (public demo tour highlight). */
+export const PUBLIC_DEMO_FIRST_ENTRY_ID = 'a0000001-0000-4000-8000-000000000001'
+
+const PUBLIC_DEMO_ENTRY_IDS = [
+  PUBLIC_DEMO_FIRST_ENTRY_ID,
+  'a0000001-0000-4000-8000-000000000002',
+  'a0000001-0000-4000-8000-000000000003'
+] as const
+
+export const PUBLIC_DEMO_SKIPPER_ID = 'skipper'
+export const PUBLIC_DEMO_VESSEL_ID = 'demo-vessel-1'
+const PUBLIC_DEMO_CREW_MEMBER_ID = 'a0000001-0000-4000-8000-000000000010'
+
+export interface DemoDaySpec {
+  date: string
+  dayOfTravel: string
+  departure: string
+  destination: string
+  gpx: string
+  filename: string
+  freshwater: { morning: number; refilled: number; evening: number; consumption: number }
+  fuel: { morning: number; refilled: number; evening: number; consumption: number }
+  greywaterLevel?: number
+  motorHours?: number
+  events: Array<Record<string, string>>
+}
+
+export interface DemoCrewRecord {
+  payloadId: string
+  data: {
+    name: string
+    address: string
+    birthDate: string
+    phone: string
+    nationality: string
+    passportNumber: string
+    bloodType: string
+    allergies: string
+    diseases: string
+    role: 'skipper' | 'crew'
+    photo: string | null
+  }
+}
+
+export interface DemoVesselRecord {
+  payloadId: string
+  data: Record<string, unknown> & { name: string }
+}
+
+export interface PublicDemoFixture {
+  title: string
+  yacht: Record<string, unknown>
+  vesselPool: DemoVesselRecord[]
+  logbookVesselSelection: {
+    activeVesselId: string | null
+    vesselSnapshot: Record<string, unknown> | null
+  }
+  /** @deprecated legacy share payload */
+  crews: DemoCrewRecord[]
+  personPool: DemoCrewRecord[]
+  logbookCrewSelection: {
+    activeSkipperId: string
+    activeCrewIds: string[]
+    snapshotsById: Record<string, DemoCrewRecord['data'] & { id: string }>
+  }
+  entries: Array<Record<string, unknown> & { payloadId: string }>
+  gpsTracks: Array<{ entryId: string; waypoints: unknown[]; filename: string; gpxContent?: string; fileType: string }>
+  photos: never[]
+  firstEntryId: string
+}
+
+export function buildDemoDays(): DemoDaySpec[] {
+  const isDe = isGermanLocale(i18n.language)
+  return [
+    {
+      date: '2026-05-29',
+      dayOfTravel: '1',
+      departure: 'Kiel',
+      destination: 'Laboe',
+      gpx: kielLaboeGpx,
+      filename: 'kiel-laboe.gpx',
+      freshwater: { morning: 120, refilled: 0, evening: 105, consumption: 15 },
+      fuel: { morning: 85, refilled: 0, evening: 78, consumption: 7 },
+      greywaterLevel: 25,
+      events: [
+        {
+          time: '10:15',
+          mgk: '042',
+          rwk: '038',
+          windDirection: 'NW',
+          windStrength: '4 Bft',
+          seaState: isDe ? 'leicht bewegt' : 'slight',
+          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
+          remarks: isDe ? 'Abfahrt Kiellinie' : 'Departure Kiellinie'
+        },
+        {
+          time: '11:20',
+          mgk: '030',
+          rwk: '028',
+          windDirection: 'N',
+          windStrength: '3 Bft',
+          seaState: isDe ? 'ruhig' : 'calm',
+          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
+          remarks: isDe ? 'Ankunft Laboe' : 'Arrival Laboe'
+        }
+      ]
+    },
+    {
+      date: '2026-05-30',
+      dayOfTravel: '2',
+      departure: 'Laboe',
+      destination: 'Damp',
+      gpx: laboeDampGpx,
+      filename: 'laboe-damp.gpx',
+      freshwater: { morning: 105, refilled: 25, evening: 110, consumption: 20 },
+      fuel: { morning: 78, refilled: 0, evening: 70, consumption: 8 },
+      greywaterLevel: 38,
+      motorHours: 1.5,
+      events: [
+        {
+          time: '09:00',
+          mgk: '055',
+          rwk: '050',
+          windDirection: 'NE',
+          windStrength: '3 Bft',
+          seaState: isDe ? 'leicht bewegt' : 'slight',
+          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
+          remarks: isDe ? 'Auslaufen aus Laboe' : 'Departing Laboe'
+        },
+        {
+          time: '12:30',
+          mgk: '075',
+          rwk: '068',
+          windDirection: 'E',
+          windStrength: '4 Bft',
+          seaState: isDe ? 'mäßig bewegt' : 'moderate',
+          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
+          remarks: isDe ? 'Kurs entlang der Küste' : 'Coastal passage'
+        }
+      ]
+    },
+    {
+      date: '2026-05-31',
+      dayOfTravel: '3',
+      departure: 'Damp',
+      destination: 'Schleimünde',
+      gpx: dampSchleimuendeGpx,
+      filename: 'damp-schleimuende.gpx',
+      freshwater: { morning: 110, refilled: 0, evening: 95, consumption: 15 },
+      fuel: { morning: 70, refilled: 15, evening: 80, consumption: 5 },
+      greywaterLevel: 52,
+      events: [
+        {
+          time: '08:30',
+          mgk: '290',
+          rwk: '285',
+          windDirection: 'W',
+          windStrength: '4 Bft',
+          seaState: isDe ? 'mäßig bewegt' : 'moderate',
+          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
+          remarks: isDe ? 'Passage zur Schlei' : 'Passage toward Schlei'
+        },
+        {
+          time: '14:00',
+          mgk: '310',
+          rwk: '305',
+          windDirection: 'NW',
+          windStrength: '3 Bft',
+          seaState: isDe ? 'leicht bewegt' : 'slight',
+          sailsOrMotor: isDe ? 'Großsegel + Genua' : 'Mainsail + Genoa',
+          remarks: isDe ? 'Ziel Schleimünde' : 'Destination Schleimünde'
+        }
+      ]
+    }
+  ]
+}
+
+export function buildDemoYachtData(): Record<string, unknown> {
+  const isDe = isGermanLocale(i18n.language)
+  return {
+    name: 'Seeadler',
+    vesselType: isDe ? 'Segelyacht' : 'Sailing yacht',
+    lengthM: 12.5,
+    draftM: 1.9,
+    airDraftM: 18,
+    homePort: 'Kiel',
+    charterCompany: '',
+    owner: 'Demo Skipper',
+    registrationNumber: 'D-KI 1234',
+    callSign: 'DA1234',
+    atis: '',
+    mmsi: '',
+    sails: isDe ? ['Großsegel', 'Genua', 'Spinnaker'] : ['Mainsail', 'Genoa', 'Spinnaker'],
+    photo: null,
+    freshwaterCapacityL: 200,
+    fuelCapacityL: 100,
+    greywaterCapacityL: 80
+  }
+}
+
+export function buildDemoPersonPool(): DemoCrewRecord[] {
+  return buildDemoCrewRecords()
+}
+
+export function buildDemoCrewRecords(): DemoCrewRecord[] {
+  const isDe = isGermanLocale(i18n.language)
+  return [
+    {
+      payloadId: PUBLIC_DEMO_SKIPPER_ID,
+      data: {
+        name: 'Demo Skipper',
+        address: isDe ? 'Am Hafen 12, 24103 Kiel' : 'Harbour Quay 12, 24103 Kiel',
+        birthDate: '1980-06-15',
+        phone: '+49 431 987654',
+        nationality: isDe ? 'Deutsch' : 'German',
+        passportNumber: 'C12X34Y56',
+        bloodType: '0+',
+        allergies: '',
+        diseases: '',
+        role: 'skipper',
+        photo: null
+      }
+    },
+    {
+      payloadId: PUBLIC_DEMO_CREW_MEMBER_ID,
+      data: {
+        name: 'Anna Müller',
+        address: isDe ? 'Hafenstraße 1, 24103 Kiel' : 'Harbour St 1, 24103 Kiel',
+        birthDate: '1988-04-12',
+        phone: '+49 431 123456',
+        nationality: isDe ? 'Deutsch' : 'German',
+        passportNumber: 'C01X00T47',
+        bloodType: 'A+',
+        allergies: '',
+        diseases: '',
+        role: 'crew',
+        photo: null
+      }
+    }
+  ]
+}
+
+function buildDemoVesselPool(yacht: Record<string, unknown>): DemoVesselRecord[] {
+  return [
+    {
+      payloadId: PUBLIC_DEMO_VESSEL_ID,
+      data: { name: String(yacht.name ?? 'Demo'), ...yacht }
+    }
+  ]
+}
+
+function buildDemoLogbookVesselSelection(
+  yacht: Record<string, unknown>
+): PublicDemoFixture['logbookVesselSelection'] {
+  return {
+    activeVesselId: PUBLIC_DEMO_VESSEL_ID,
+    vesselSnapshot: { id: PUBLIC_DEMO_VESSEL_ID, ...yacht }
+  }
+}
+
+function buildDemoLogbookCrewSelection(pool: DemoCrewRecord[]) {
+  const skipper = pool.find((p) => p.data.role === 'skipper')
+  const crew = pool.filter((p) => p.data.role === 'crew')
+  const snapshotsById: Record<string, DemoCrewRecord['data'] & { id: string }> = {}
+  for (const p of pool) {
+    snapshotsById[p.payloadId] = { id: p.payloadId, ...p.data }
+  }
+  return {
+    activeSkipperId: skipper?.payloadId ?? PUBLIC_DEMO_SKIPPER_ID,
+    activeCrewIds: crew.map((c) => c.payloadId),
+    snapshotsById
+  }
+}
+
+export function buildPublicDemoFixture(): PublicDemoFixture {
+  const title = i18n.t('demo.logbook_title')
+  const yacht = buildDemoYachtData()
+  const vesselPool = buildDemoVesselPool(yacht)
+  const logbookVesselSelection = buildDemoLogbookVesselSelection(yacht)
+  const personPool = buildDemoPersonPool()
+  const crews = personPool
+  const logbookCrewSelection = buildDemoLogbookCrewSelection(personPool)
+  const days = buildDemoDays()
+  const entries: PublicDemoFixture['entries'] = []
+  const gpsTracks: PublicDemoFixture['gpsTracks'] = []
+
+  days.forEach((day, index) => {
+    const entryId = PUBLIC_DEMO_ENTRY_IDS[index] ?? crypto.randomUUID()
+    const { waypoints } = parseTrackFile(day.gpx, day.filename)
+    const stats = computeTrackStats(waypoints)
+
+    const entryPayload: Record<string, unknown> = {
+      payloadId: entryId,
+      date: day.date,
+      dayOfTravel: day.dayOfTravel,
+      departure: day.departure,
+      destination: day.destination,
+      freshwater: { ...day.freshwater },
+      fuel: { ...day.fuel },
+      selectedSkipperId: logbookCrewSelection.activeSkipperId,
+      selectedCrewIds: [...logbookCrewSelection.activeCrewIds],
+      crewSnapshotsById: { ...logbookCrewSelection.snapshotsById },
+      signSkipper: '',
+      signCrew: '',
+      events: day.events
+    }
+
+    if (day.greywaterLevel != null && day.greywaterLevel > 0) {
+      entryPayload.greywater = { level: day.greywaterLevel }
+    }
+
+    if (stats) {
+      entryPayload.trackDistanceNm = stats.distanceNm
+      entryPayload.trackSpeedMaxKn = stats.speedMaxKn
+      entryPayload.trackSpeedAvgKn = stats.speedAvgKn
+    }
+    if (day.motorHours != null && day.motorHours > 0) {
+      entryPayload.motorHours = day.motorHours
+    }
+
+    entries.push(entryPayload as PublicDemoFixture['entries'][number])
+
+    gpsTracks.push({
+      entryId,
+      waypoints,
+      filename: day.filename,
+      gpxContent: day.gpx,
+      fileType: 'gpx'
+    })
+  })
+
+  return {
+    title,
+    yacht,
+    vesselPool,
+    logbookVesselSelection,
+    crews,
+    personPool,
+    logbookCrewSelection,
+    entries,
+    gpsTracks,
+    photos: [],
+    firstEntryId: PUBLIC_DEMO_FIRST_ENTRY_ID
+  }
+}
+
+export function getPublicDemoFirstEntryId(): string {
+  return PUBLIC_DEMO_FIRST_ENTRY_ID
+}
+
+/** Payloads for encrypted seeding (without payloadId on entries). */
+export function buildDemoEntryPayloads(): Array<{
+  entryId: string
+  entryPayload: Record<string, unknown>
+  trackData: { waypoints: unknown[]; gpxContent: string; filename: string; fileType: string }
+}> {
+  const logbookCrewSelection = buildDemoLogbookCrewSelection(buildDemoPersonPool())
+  const days = buildDemoDays()
+  return days.map((day) => {
+    const entryId = crypto.randomUUID()
+    const { waypoints } = parseTrackFile(day.gpx, day.filename)
+    const stats = computeTrackStats(waypoints)
+
+    const entryPayload: Record<string, unknown> = {
+      date: day.date,
+      dayOfTravel: day.dayOfTravel,
+      departure: day.departure,
+      destination: day.destination,
+      freshwater: { ...day.freshwater },
+      fuel: { ...day.fuel },
+      selectedSkipperId: logbookCrewSelection.activeSkipperId,
+      selectedCrewIds: [...logbookCrewSelection.activeCrewIds],
+      crewSnapshotsById: { ...logbookCrewSelection.snapshotsById },
+      signSkipper: '',
+      signCrew: '',
+      events: day.events
+    }
+
+    if (day.greywaterLevel != null && day.greywaterLevel > 0) {
+      entryPayload.greywater = { level: day.greywaterLevel }
+    }
+
+    if (stats) {
+      entryPayload.trackDistanceNm = stats.distanceNm
+      entryPayload.trackSpeedMaxKn = stats.speedMaxKn
+      entryPayload.trackSpeedAvgKn = stats.speedAvgKn
+    }
+    if (day.motorHours != null && day.motorHours > 0) {
+      entryPayload.motorHours = day.motorHours
+    }
+
+    return {
+      entryId,
+      entryPayload,
+      trackData: {
+        waypoints,
+        gpxContent: day.gpx,
+        filename: day.filename,
+        fileType: 'gpx'
+      }
+    }
+  })
+}

client/src/services/entryDraft.ts

@@ -0,0 +1,53 @@
+import { db } from './db.js'
+import { encryptJson, decryptJson } from './crypto.js'
+import { getActiveMasterKey } from './auth.js'
+
+export interface EntryDraftRecord {
+  logbookId: string
+  entryId: string
+  encryptedData: string
+  iv: string
+  tag: string
+  updatedAt: string
+}
+
+export async function saveEntryDraft(
+  logbookId: string,
+  entryId: string,
+  payload: unknown
+): Promise<void> {
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) return
+
+  const { ciphertext, iv, tag } = await encryptJson(payload, masterKey)
+  await db.entryDrafts.put({
+    logbookId,
+    entryId,
+    encryptedData: ciphertext,
+    iv,
+    tag,
+    updatedAt: new Date().toISOString()
+  })
+}
+
+export async function loadEntryDraft<T = unknown>(
+  logbookId: string,
+  entryId: string
+): Promise<T | null> {
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) return null
+
+  const row = await db.entryDrafts.get([logbookId, entryId])
+  if (!row) return null
+
+  try {
+    return (await decryptJson(row.encryptedData, row.iv, row.tag, masterKey)) as T
+  } catch {
+    await db.entryDrafts.delete([logbookId, entryId])
+    return null
+  }
+}
+
+export async function clearEntryDraft(logbookId: string, entryId: string): Promise<void> {
+  await db.entryDrafts.delete([logbookId, entryId])
+}

client/src/services/entrySigning.ts

@@ -1,5 +1,6 @@
 import { startAuthentication } from '@simplewebauthn/browser'
 import type { PasskeySignature } from '../types/signatures.js'
+import { apiJson } from './api.js'
 
 export async function signLogEntry(params: {
   logbookId: string
@@ -7,32 +8,22 @@ export async function signLogEntry(params: {
   entryHash: string
   role: 'skipper' | 'crew'
 }): Promise<PasskeySignature> {
-  const userId = localStorage.getItem('active_userid')
-  if (!userId) throw new Error('User not authenticated')
+  if (!localStorage.getItem('active_userid')) throw new Error('User not authenticated')
 
-  const optionsRes = await fetch('/api/sign/options', {
+  const options = await apiJson<any>('/api/sign/options', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-User-Id': userId
-    },
     body: JSON.stringify(params)
   })
 
-  if (!optionsRes.ok) {
-    const err = await optionsRes.json().catch(() => ({}))
-    throw new Error(err.error || 'Failed to start passkey signing')
-  }
-
-  const options = await optionsRes.json()
   const credentialResponse = await startAuthentication({ optionsJSON: options })
 
-  const verifyRes = await fetch('/api/sign/verify', {
+  const result = await apiJson<{
+    userId: string
+    username: string
+    credentialId: string
+    signedAt: string
+  }>('/api/sign/verify', {
     method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-User-Id': userId
-    },
     body: JSON.stringify({
       credentialResponse,
       challenge: options.challenge,
@@ -43,13 +34,6 @@ export async function signLogEntry(params: {
     })
   })
 
-  if (!verifyRes.ok) {
-    const err = await verifyRes.json().catch(() => ({}))
-    throw new Error(err.error || 'Passkey signature verification failed')
-  }
-
-  const result = await verifyRes.json()
-
   return {
     kind: 'passkey',
     version: 1,

client/src/services/eventSeriesAggregation.ts

@@ -0,0 +1,106 @@
+import { db } from './db.js'
+import { getActiveMasterKey } from './auth.js'
+import { getLogbookKey } from './logbookKeys.js'
+import { decryptJson } from './crypto.js'
+import { compareTravelDaysChronological } from '../utils/logEntryTankLevels.js'
+import type { LogEventPayload } from '../utils/logEntryPayload.js'
+import { LIVE_EVENT_CODES } from '../utils/liveEventCodes.js'
+
+export interface EventSeriesPoint {
+  entryId: string
+  date: string
+  dayOfTravel: string
+  time: string
+  summary: string
+}
+
+export interface EventSeriesSummary {
+  pressure: EventSeriesPoint[]
+  wind: EventSeriesPoint[]
+  motor: EventSeriesPoint[]
+}
+
+function sortPoints(points: EventSeriesPoint[]): EventSeriesPoint[] {
+  return [...points].sort((a, b) => {
+    const dateCompare = a.date.localeCompare(b.date)
+    if (dateCompare !== 0) return dateCompare
+    return a.time.localeCompare(b.time)
+  })
+}
+
+export async function loadLogbookEventSeries(logbookId: string): Promise<EventSeriesSummary> {
+  const masterKey = await getLogbookKey(logbookId) || getActiveMasterKey()
+  if (!masterKey) throw new Error('Encryption key not found. Please log in.')
+
+  const local = await db.entries.where({ logbookId }).toArray()
+  const decryptedEntries: Array<{
+    entryId: string
+    date: string
+    dayOfTravel: string
+    events: LogEventPayload[]
+  }> = []
+
+  for (const entry of local) {
+    const decrypted = await decryptJson(entry.encryptedData, entry.iv, entry.tag, masterKey)
+    if (!decrypted) continue
+    decryptedEntries.push({
+      entryId: entry.payloadId,
+      date: String(decrypted.date || ''),
+      dayOfTravel: String(decrypted.dayOfTravel || ''),
+      events: (decrypted.events as LogEventPayload[]) || []
+    })
+  }
+
+  decryptedEntries.sort((a, b) =>
+    compareTravelDaysChronological(
+      { date: a.date, dayOfTravel: a.dayOfTravel },
+      { date: b.date, dayOfTravel: b.dayOfTravel }
+    )
+  )
+
+  const pressure: EventSeriesPoint[] = []
+  const wind: EventSeriesPoint[] = []
+  const motor: EventSeriesPoint[] = []
+
+  for (const entry of decryptedEntries) {
+    for (const event of entry.events) {
+      const base = {
+        entryId: entry.entryId,
+        date: entry.date,
+        dayOfTravel: entry.dayOfTravel,
+        time: event.time
+      }
+
+      if (event.windPressure?.trim()) {
+        pressure.push({
+          ...base,
+          summary: `${event.windPressure} hPa`
+        })
+      }
+
+      if (event.windDirection?.trim() || event.windStrength?.trim()) {
+        wind.push({
+          ...base,
+          summary: [event.windDirection, event.windStrength].filter(Boolean).join(' ')
+        })
+      }
+
+      const code = event.remarks?.trim() ?? ''
+      if (
+        code === LIVE_EVENT_CODES.MOTOR_START ||
+        code === LIVE_EVENT_CODES.MOTOR_STOP
+      ) {
+        motor.push({
+          ...base,
+          summary: code === LIVE_EVENT_CODES.MOTOR_START ? 'start' : 'stop'
+        })
+      }
+    }
+  }
+
+  return {
+    pressure: sortPoints(pressure),
+    wind: sortPoints(wind),
+    motor: sortPoints(motor)
+  }
+}

client/src/services/feedback.ts

@@ -0,0 +1,69 @@
+import { apiFetch } from './api.js'
+
+export type FeedbackCategory = 'bug' | 'feature' | 'general' | 'translation'
+
+export class FeedbackApiError extends Error {
+  code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' | 'INVALID_EMAIL' | 'RATE_LIMITED' | 'SPAM_DETECTED'
+
+  constructor(
+    message: string,
+    code: 'NOT_CONFIGURED' | 'REQUEST_FAILED' | 'INVALID_EMAIL' | 'RATE_LIMITED' | 'SPAM_DETECTED' = 'REQUEST_FAILED'
+  ) {
+    super(message)
+    this.name = 'FeedbackApiError'
+    this.code = code
+  }
+}
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+export function isValidFeedbackEmail(email: string): boolean {
+  return EMAIL_PATTERN.test(email.trim())
+}
+
+export async function sendFeedback(payload: {
+  category: FeedbackCategory
+  message: string
+  contactEmail?: string | null
+  logbookId?: string | null
+  logbookTitle?: string | null
+  openedAt: number
+  website?: string
+}): Promise<void> {
+  const contactEmail = payload.contactEmail?.trim()
+  if (contactEmail && !isValidFeedbackEmail(contactEmail)) {
+    throw new FeedbackApiError('Invalid email address', 'INVALID_EMAIL')
+  }
+
+  const res = await apiFetch('/api/feedback', {
+    method: 'POST',
+    body: JSON.stringify({
+      category: payload.category,
+      message: payload.message,
+      contactEmail: contactEmail || undefined,
+      username: localStorage.getItem('active_username') || undefined,
+      logbookId: payload.logbookId || undefined,
+      logbookTitle: payload.logbookTitle || undefined,
+      appVersion: typeof __APP_VERSION__ !== 'undefined' ? __APP_VERSION__ : undefined,
+      pageUrl: window.location.href,
+      openedAt: payload.openedAt,
+      website: payload.website || undefined
+    })
+  })
+
+  if (res.status === 503) {
+    throw new FeedbackApiError('Feedback is not configured on this server', 'NOT_CONFIGURED')
+  }
+
+  if (res.status === 429) {
+    throw new FeedbackApiError('Too many feedback submissions', 'RATE_LIMITED')
+  }
+
+  const data = await res.json().catch(() => ({}))
+  if (!res.ok) {
+    throw new FeedbackApiError(
+      data.error || 'Failed to send feedback',
+      data.code === 'SPAM_DETECTED' ? 'SPAM_DETECTED' : 'REQUEST_FAILED'
+    )
+  }
+}

client/src/services/logbook.ts

@@ -3,15 +3,36 @@ import { getActiveMasterKey } from './auth.js'
 import { encryptJson, decryptJson, encryptBuffer, decryptBuffer } from './crypto.js'
 import { getLogbookKey, saveLogbookKey, generateLogbookKey } from './logbookKeys.js'
 import { PlausibleEvents, trackPlausibleEvent } from './analytics.js'
+import { apiFetch } from './api.js'
+import { clearDemoLogbookRefs, getDemoLogbookStorageKey } from './demoLogbook.js'
 
 const API_BASE = '/api/logbooks'
 
+export type LogbookAccessRole = 'OWNER' | 'READ' | 'WRITE'
+export type CollaborationRole = 'READ' | 'WRITE'
+
+/** Validates server/cached collaboration role; warns and falls back to WRITE if missing or invalid. */
+export function parseCollaborationRole(role: unknown, context: string): CollaborationRole {
+  if (role === 'READ' || role === 'WRITE') {
+    return role
+  }
+
+  if (role === undefined || role === null || role === '') {
+    console.warn(`[collaboration] Missing role in ${context}; defaulting to WRITE.`)
+  } else {
+    console.warn(`[collaboration] Unexpected role in ${context}:`, role, '— defaulting to WRITE.')
+  }
+
+  return 'WRITE'
+}
+
 export interface DecryptedLogbook {
   id: string
   title: string
   updatedAt: string
   isSynced: boolean
   isShared: boolean
+  accessRole: LogbookAccessRole
   isDemo?: boolean
 }
 
@@ -47,13 +68,7 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
 
   if (navigator.onLine) {
     try {
-      const response = await fetch(API_BASE, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': userId
-        }
-      })
+      const response = await apiFetch(API_BASE, { method: 'GET' })
 
       if (response.ok) {
         const serverLogbooks = await response.json()
@@ -101,14 +116,20 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
 
         // Update Dexie database cache
         const localById = new Map(localLogbooksArray.map((lb) => [lb.id, lb]))
-        const localLogbooks: LocalLogbook[] = serverLogbooks.map((lb: any) => ({
-          id: lb.id,
-          encryptedTitle: lb.encryptedTitle,
-          updatedAt: lb.updatedAt || new Date().toISOString(),
-          isSynced: 1,
-          isShared: lb.userId !== userId ? 1 : 0,
-          isDemo: localById.get(lb.id)?.isDemo
-        }))
+        const localLogbooks: LocalLogbook[] = serverLogbooks.map((lb: any) => {
+          const isShared = lb.userId !== userId
+          return {
+            id: lb.id,
+            encryptedTitle: lb.encryptedTitle,
+            updatedAt: lb.updatedAt || new Date().toISOString(),
+            isSynced: 1,
+            isShared: isShared ? 1 : 0,
+            collaborationRole: isShared
+              ? parseCollaborationRole(lb.collaborators?.[0]?.role, `fetch logbook ${lb.id}`)
+              : undefined,
+            isDemo: localById.get(lb.id)?.isDemo
+          }
+        })
 
         // Clear existing cache for this user and insert new ones
         await db.logbooks.bulkPut(localLogbooks)
@@ -131,6 +152,9 @@ export async function fetchLogbooks(): Promise<DecryptedLogbook[]> {
       updatedAt: lb.updatedAt,
       isSynced: lb.isSynced === 1,
       isShared: lb.isShared === 1,
+      accessRole: lb.isShared === 1
+        ? parseCollaborationRole(lb.collaborationRole, `cached logbook ${lb.id}`)
+        : 'OWNER',
       isDemo: lb.isDemo === 1
     })
   }
@@ -180,12 +204,8 @@ export async function createLogbook(title: string): Promise<DecryptedLogbook> {
 
   if (navigator.onLine) {
     try {
-      const response = await fetch(API_BASE, {
+      const response = await apiFetch(API_BASE, {
         method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-User-Id': userId
-        },
         body: JSON.stringify({
           id: localId,
           ...payloadData
@@ -194,6 +214,10 @@ export async function createLogbook(title: string): Promise<DecryptedLogbook> {
 
       if (response.ok) {
         const serverLb = await response.json()
+        if (serverLb.id !== localId) {
+          await saveLogbookKey(serverLb.id, logbookKey)
+          await db.logbookKeys.delete(localId)
+        }
         await db.logbooks.put({
           id: serverLb.id,
           encryptedTitle: serverLb.encryptedTitle,
@@ -207,7 +231,8 @@ export async function createLogbook(title: string): Promise<DecryptedLogbook> {
           title,
           updatedAt: serverLb.updatedAt,
           isSynced: true,
-          isShared: false
+          isShared: false,
+          accessRole: 'OWNER'
         }
       }
     } catch (error) {
@@ -238,7 +263,8 @@ export async function createLogbook(title: string): Promise<DecryptedLogbook> {
     title,
     updatedAt: now,
     isSynced: false,
-    isShared: false
+    isShared: false,
+    accessRole: 'OWNER'
   }
 }
 
@@ -271,12 +297,7 @@ export async function deleteLogbook(id: string): Promise<void> {
 
   if (navigator.onLine) {
     try {
-      const response = await fetch(`${API_BASE}/${id}`, {
-        method: 'DELETE',
-        headers: {
-          'X-User-Id': userId
-        }
-      })
+      const response = await apiFetch(`${API_BASE}/${id}`, { method: 'DELETE' })
       if (!response.ok) {
         console.warn('Server deletion failed or was rejected')
       }
@@ -304,5 +325,69 @@ export async function deleteLogbook(id: string): Promise<void> {
 
   // Perform local cascading cleanup
   await deleteLocalLogbookCache(id)
+  if (userId && id === localStorage.getItem(getDemoLogbookStorageKey(userId))) {
+    clearDemoLogbookRefs(userId, id)
+  }
   trackPlausibleEvent(PlausibleEvents.LOGBOOK_DELETED)
 }
+
+// Update the title of a logbook. Encrypts the title and updates locally + on server
+export async function updateLogbookTitle(id: string, newTitle: string): Promise<void> {
+  const userId = localStorage.getItem('active_userid')
+  if (!userId) {
+    throw new Error('User not authenticated')
+  }
+
+  const masterKey = getActiveMasterKey()
+  if (!masterKey) {
+    throw new Error('Master key not found. User must log in.')
+  }
+
+  const logbookKey = await getLogbookKey(id) || masterKey
+
+  // E2E Encrypt the new title using the Logbook Key (or master key fallback)
+  const encrypted = await encryptJson(newTitle, logbookKey)
+  const encryptedTitleStr = JSON.stringify(encrypted)
+  const now = new Date().toISOString()
+
+  const payloadData = {
+    encryptedTitle: encryptedTitleStr
+  }
+
+  if (navigator.onLine) {
+    try {
+      const response = await apiFetch(`${API_BASE}/${id}`, {
+        method: 'PUT',
+        body: JSON.stringify(payloadData)
+      })
+
+      if (response.ok) {
+        // Update local IndexedDB cache as synced
+        await db.logbooks.update(id, {
+          encryptedTitle: encryptedTitleStr,
+          updatedAt: now,
+          isSynced: 1
+        })
+        return
+      }
+    } catch (error) {
+      console.warn('Failed to update logbook on server, saving locally instead:', error)
+    }
+  }
+
+  // If offline or request failed, store locally as unsynced and add to queue
+  await db.logbooks.update(id, {
+    encryptedTitle: encryptedTitleStr,
+    updatedAt: now,
+    isSynced: 0
+  })
+
+  await db.syncQueue.put({
+    action: 'update',
+    type: 'logbook',
+    payloadId: id,
+    logbookId: id,
+    data: JSON.stringify(payloadData),
+    updatedAt: now
+  })
+}

client/src/services/logbookAccess.ts

@@ -1,3 +1,5 @@
+import { apiJson } from './api.js'
+
 export interface LogbookAccess {
   isOwner: boolean
   role: 'OWNER' | 'READ' | 'WRITE'
@@ -5,15 +7,10 @@ export interface LogbookAccess {
 }
 
 export async function getLogbookAccess(logbookId: string): Promise<LogbookAccess | null> {
-  const userId = localStorage.getItem('active_userid')
-  if (!userId || !navigator.onLine) return null
+  if (!localStorage.getItem('active_userid') || !navigator.onLine) return null
 
   try {
-    const res = await fetch(`/api/logbooks/${logbookId}/access`, {
-      headers: { 'X-User-Id': userId }
-    })
-    if (!res.ok) return null
-    return res.json()
+    return await apiJson<LogbookAccess>(`/api/logbooks/${logbookId}/access`)
   } catch {
     return null
   }