feat(places): enrich list-imported places via the Places API (#886) (#1161)

* feat(places): enrich list-imported places via the Places API (#886)

Google/Naver list imports only carry a name and coordinates, so the places open
as bare pins — the Maps tab jumps to coordinates, with no photo, address or
open/closed. Add an opt-in "Enrich places via Google" toggle to the list-import
dialog, shown only when a Google Maps key is configured.

When enabled, after the (fast, unchanged) import the server runs a background
pass that re-resolves each place by name — biased to and validated against the
imported coordinates so a common-name search cannot overwrite the wrong place —
and fills the empty address/website/phone/photo columns plus the resolved
google_place_id, pushing each row over the live sync. Opening hours and the
proper Maps link then work on demand from the stored id.

Enrichment only fills empty fields, runs detached so a long list never blocks
the import, and no-ops when no key is configured.

* fix(places): use the ToggleSwitch component for the enrich toggle

Match the rest of the app — the import-enrichment opt-in used a raw checkbox;
swap it for the shared ToggleSwitch (text left, switch right) like the settings
toggles.

Dockerfile

@@ -48,8 +48,8 @@ RUN apt-get update && \
     npm ci --workspace=server --omit=dev && \
     ARCH=$(dpkg --print-architecture) && \
     if [ "$ARCH" = "amd64" ]; then \
-        wget -qO /tmp/ki.tgz https://cdn.kde.org/ci-builds/pim/kitinerary/release-26.04/linux/kitinerary-extractor-x86_64-26.04.0.tgz && \
-        echo "b7058d98990053c7b61847fef0c21e02d59b60e323e2b171ca210b682334e801  /tmp/ki.tgz" | sha256sum -c && \
+        wget -qO /tmp/ki.tgz https://cdn.kde.org/ci-builds/pim/kitinerary/release-26.04/linux/kitinerary-extractor-x86_64-26.04.2.tgz && \
+        echo "ba5cfb4a2353157c8f54cbeaea0097c5bf2c3a810e0342f63d6e524826176628 /tmp/ki.tgz" | sha256sum -c && \
         tar -xz -C /usr/local -f /tmp/ki.tgz bin/kitinerary-extractor share/locale && \
         rm /tmp/ki.tgz; \
     else \
@@ -68,6 +68,11 @@ ENV QT_QPA_PLATFORM=offscreen
 ENV KITINERARY_EXTRACTOR_PATH=/usr/local/bin/kitinerary-extractor
 
 COPY --from=server-builder /app/server/dist ./server/dist
+# Runtime data assets read from server/assets at runtime: airports.json (flight
+# transport search) and atlas/*.geojson.gz (Atlas country/region map). The build
+# only emits dist, so these must be copied explicitly or the features silently
+# degrade to empty in the image.
+COPY --from=server-builder /app/server/assets ./server/assets
 # tsconfig-paths/register reads this at runtime to resolve MCP SDK paths.
 COPY server/tsconfig.json ./server/
 COPY --from=shared-builder /app/shared/dist ./shared/dist

NOTICE.md

@@ -0,0 +1,33 @@
+# Third-party data & attributions
+
+TREK bundles and uses third-party data that requires attribution.
+
+## geoBoundaries — country & sub-national boundaries
+
+The Atlas map's administrative boundaries (admin-0 countries and admin-1
+provinces/counties), shipped at `server/assets/atlas/admin0.geojson.gz` and
+`server/assets/atlas/admin1.geojson.gz` and generated by
+`server/scripts/build-atlas-geo.mjs`, are derived from **geoBoundaries**.
+
+> Runfola, D. et al. (2020) geoBoundaries: A global database of political
+> administrative boundaries. PLoS ONE 15(4): e0231866.
+> https://doi.org/10.1371/journal.pone.0231866
+
+geoBoundaries is licensed under **CC BY 4.0**
+(https://creativecommons.org/licenses/by/4.0/). Source: https://www.geoboundaries.org/
+
+The bundled files are simplified (coordinate-quantized) and re-tagged with the
+property names TREK consumes. Country borders (`admin0`) derive from the geoBoundaries
+CGAZ composite; sub-national regions (`admin1`) derive from the per-country open
+(gbOpen) release.
+
+## OpenStreetMap — geocoding
+
+Atlas reverse-geocodes places via the **Nominatim** service. Geocoding data is
+© OpenStreetMap contributors, licensed under the Open Database License (ODbL).
+https://www.openstreetmap.org/copyright
+
+## OurAirports — airport reference data
+
+`server/assets/airports.json` is built from **OurAirports**
+(https://ourairports.com/data/), released into the public domain.

README.md

@@ -437,6 +437,13 @@ Caddy handles TLS and WebSockets automatically.
 
 <br />
 
+## Data sources
+
+The Atlas map's country and sub-national (province/county) boundaries come from
+[**geoBoundaries**](https://www.geoboundaries.org/) (Runfola et al., 2020), licensed
+[CC BY 4.0](https://creativecommons.org/licenses/by/4.0/). See [NOTICE.md](NOTICE.md)
+for full third-party attributions.
+
 ## License
 
 TREK is [AGPL v3](LICENSE). Self-host freely for personal or internal company use. If you modify and offer TREK as a network service to third parties, your modifications must be open-sourced under the same licence.

client/src/api/client.ts

@@ -18,7 +18,7 @@ import {
   type TripAddMemberRequest, type AssignmentReorderRequest,
   type PackingReorderRequest, type PackingCreateBagRequest, type TodoReorderRequest,
   type TripCreateRequest, type TripUpdateRequest, type TripCopyRequest,
-  type DayCreateRequest, type DayUpdateRequest,
+  type DayCreateRequest, type DayUpdateRequest, type DayReorderRequest,
   type PlaceCreateRequest, type PlaceUpdateRequest,
   type ReservationCreateRequest, type ReservationUpdateRequest,
   type AccommodationCreateRequest, type AccommodationUpdateRequest,
@@ -341,6 +341,7 @@ export const daysApi = {
   create: (tripId: number | string, data: DayCreateRequest) => apiClient.post(`/trips/${tripId}/days`, data).then(r => r.data),
   update: (tripId: number | string, dayId: number | string, data: DayUpdateRequest) => apiClient.put(`/trips/${tripId}/days/${dayId}`, data).then(r => r.data),
   delete: (tripId: number | string, dayId: number | string) => apiClient.delete(`/trips/${tripId}/days/${dayId}`).then(r => r.data),
+  reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/days/reorder`, { orderedIds } satisfies DayReorderRequest).then(r => r.data),
 }
 
 export const placesApi = {
@@ -365,10 +366,10 @@ export const placesApi = {
     if (opts?.paths !== undefined) fd.append('importPaths', String(opts.paths))
     return apiClient.post(`/trips/${tripId}/places/import/map`, fd, { headers: { 'Content-Type': 'multipart/form-data' } }).then(r => r.data)
   },
-  importGoogleList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url } satisfies PlaceImportListRequest).then(r => r.data),
-  importNaverList: (tripId: number | string, url: string) =>
-      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url }).then(r => r.data),
+  importGoogleList: (tripId: number | string, url: string, enrich?: boolean) =>
+      apiClient.post(`/trips/${tripId}/places/import/google-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
+  importNaverList: (tripId: number | string, url: string, enrich?: boolean) =>
+      apiClient.post(`/trips/${tripId}/places/import/naver-list`, { url, enrich } satisfies PlaceImportListRequest).then(r => r.data),
   bulkDelete: (tripId: number | string, ids: number[]) =>
       apiClient.post(`/trips/${tripId}/places/bulk-delete`, { ids } satisfies PlaceBulkDeleteRequest).then(r => r.data),
 }
@@ -394,6 +395,7 @@ export const packingApi = {
   reorder: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/packing/reorder`, { orderedIds } satisfies PackingReorderRequest).then(r => r.data),
   getCategoryAssignees: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/category-assignees`).then(r => r.data),
   setCategoryAssignees: (tripId: number | string, categoryName: string, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/category-assignees/${encodeURIComponent(categoryName)}`, { user_ids: userIds } satisfies PackingCategoryAssigneesRequest).then(r => r.data),
+  listTemplates: (tripId: number | string) => apiClient.get(`/trips/${tripId}/packing/templates`).then(r => r.data),
   applyTemplate: (tripId: number | string, templateId: number) => apiClient.post(`/trips/${tripId}/packing/apply-template/${templateId}`).then(r => r.data),
   saveAsTemplate: (tripId: number | string, name: string) => apiClient.post(`/trips/${tripId}/packing/save-as-template`, { name }).then(r => r.data),
   setBagMembers: (tripId: number | string, bagId: number, userIds: number[]) => apiClient.put(`/trips/${tripId}/packing/bags/${bagId}/members`, { user_ids: userIds } satisfies PackingBagMembersRequest).then(r => r.data),
@@ -485,6 +487,20 @@ export const addonsApi = {
   enabled: () => apiClient.get('/addons').then(r => r.data),
 }
 
+export const airtrailApi = {
+  getSettings: () => apiClient.get('/integrations/airtrail/settings').then(r => r.data),
+  saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean }) =>
+    apiClient.put('/integrations/airtrail/settings', data).then(r => r.data),
+  status: () => apiClient.get('/integrations/airtrail/status').then(r => r.data),
+  test: (data: { url?: string; apiKey?: string; allowInsecureTls?: boolean }) =>
+    apiClient.post('/integrations/airtrail/test', data).then(r => r.data),
+  sync: (): Promise<{ changed: number }> => apiClient.post('/integrations/airtrail/sync').then(r => r.data),
+  // flights + import are added with the trip-planner import (P2)
+  flights: () => apiClient.get('/integrations/airtrail/flights').then(r => r.data),
+  import: (tripId: number, flightIds: string[]) =>
+    apiClient.post(`/trips/${tripId}/reservations/import/airtrail`, { flightIds }).then(r => r.data),
+}
+
 export const journeyApi = {
   list: () => apiClient.get('/journeys').then(r => r.data),
   create: (data: JourneyCreateRequest) => apiClient.post('/journeys', data).then(r => r.data),
@@ -556,6 +572,11 @@ export const mapsApi = {
   placePhoto: (placeId: string, lat?: number, lng?: number, name?: string) => apiClient.get(`/maps/place-photo/${encodeURIComponent(placeId)}`, { params: { lat, lng, name } }).then(r => checkInDev(mapsPlacePhotoResultSchema, r.data, 'maps.placePhoto')),
   reverse: (lat: number, lng: number, lang?: string) => apiClient.get('/maps/reverse', { params: { lat, lng, lang } }).then(r => checkInDev(mapsReverseResultSchema, r.data, 'maps.reverse')),
   resolveUrl: (url: string) => apiClient.post('/maps/resolve-url', { url }).then(r => checkInDev(mapsResolveUrlResultSchema, r.data, 'maps.resolveUrl')),
+  // OSM-only POI explore: places of a category within the current map viewport bbox.
+  // Overpass can be slow on a fresh (uncached) area, so this call gets a longer
+  // timeout than the global default instead of aborting at 8s and showing nothing.
+  pois: (category: string, bbox: { south: number; west: number; north: number; east: number }, signal?: AbortSignal) =>
+    apiClient.get('/maps/pois', { params: { category, ...bbox }, signal, timeout: 20000 }).then(r => r.data as { pois: import('../components/Map/poiCategories').Poi[]; source: string; truncated: boolean; clamped?: boolean }),
 }
 
 export const airportsApi = {

client/src/components/Admin/AddonManager.tsx

@@ -4,10 +4,10 @@ import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAddonStore } from '../../store/addonStore'
 import { useToast } from '../shared/Toast'
-import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage } from 'lucide-react'
+import { Puzzle, ListChecks, Wallet, FileText, CalendarDays, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, MessageCircle, StickyNote, BarChart3, Sparkles, Luggage, Plane } from 'lucide-react'
 
 const ICON_MAP = {
-  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen,
+  ListChecks, Wallet, FileText, CalendarDays, Puzzle, Globe, Briefcase, Image, Terminal, Link2, Compass, BookOpen, Plane,
 }
 
 function ImmichIcon({ size = 14 }: { size?: number }) {

client/src/components/Admin/DefaultUserSettingsTab.tsx

@@ -22,8 +22,22 @@ type Defaults = {
   time_format?: string
   blur_booking_codes?: boolean
   map_tile_url?: string
+  map_provider?: string
+  mapbox_access_token?: string
+  mapbox_style?: string
+  mapbox_3d_enabled?: boolean
+  mapbox_quality_mode?: boolean
 }
 
+const MAPBOX_STYLE_PRESETS = [
+  { name: 'Standard', url: 'mapbox://styles/mapbox/standard' },
+  { name: 'Streets', url: 'mapbox://styles/mapbox/streets-v12' },
+  { name: 'Outdoors', url: 'mapbox://styles/mapbox/outdoors-v12' },
+  { name: 'Light', url: 'mapbox://styles/mapbox/light-v11' },
+  { name: 'Dark', url: 'mapbox://styles/mapbox/dark-v11' },
+  { name: 'Satellite Streets', url: 'mapbox://styles/mapbox/satellite-streets-v12' },
+]
+
 function OptionRow({
   label,
   hint,
@@ -77,11 +91,15 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
   const [defaults, setDefaults] = useState<Defaults>({})
   const [loaded, setLoaded] = useState(false)
   const [mapTileUrl, setMapTileUrl] = useState('')
+  const [mapboxToken, setMapboxToken] = useState('')
+  const [mapboxStyle, setMapboxStyle] = useState('')
 
   useEffect(() => {
     adminApi.getDefaultUserSettings().then((data: Defaults) => {
       setDefaults(data)
       setMapTileUrl(data.map_tile_url || '')
+      setMapboxToken(data.mapbox_access_token || '')
+      setMapboxStyle(data.mapbox_style || '')
       setLoaded(true)
     }).catch(() => setLoaded(true))
   }, [])
@@ -101,6 +119,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
       const updated = await adminApi.updateDefaultUserSettings({ [key]: null })
       setDefaults(updated)
       if (key === 'map_tile_url') setMapTileUrl('')
+      if (key === 'mapbox_access_token') setMapboxToken('')
+      if (key === 'mapbox_style') setMapboxStyle('')
       toast.success(t('admin.defaultSettings.reset'))
     } catch (err: unknown) {
       toast.error(err instanceof Error ? err.message : t('common.error'))
@@ -267,6 +287,94 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
           })}
         </div>
       </div>
+
+      {/* ── Map provider / instance-wide Mapbox ───────────────────────── */}
+      <div style={{ borderTop: '1px solid var(--border-primary)', paddingTop: 20, marginTop: 4 }}>
+        <OptionRow
+          label={<>{t('admin.defaultSettings.mapProvider')} <ResetButton field="map_provider" /></>}
+          hint={t('admin.defaultSettings.mapProviderHint')}
+        >
+          {([
+            { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
+            { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
+          ] as const).map(opt => (
+            <OptionButton
+              key={opt.value}
+              active={(defaults.map_provider || 'leaflet') === opt.value}
+              onClick={() => save({ map_provider: opt.value })}
+            >
+              {opt.label}
+            </OptionButton>
+          ))}
+        </OptionRow>
+
+        {defaults.map_provider === 'mapbox-gl' && (
+          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+                {t('admin.defaultSettings.mapboxToken')}
+                <ResetButton field="mapbox_access_token" />
+              </label>
+              <input
+                type="text"
+                value={mapboxToken}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxToken(e.target.value)}
+                onBlur={() => save({ mapbox_access_token: mapboxToken })}
+                placeholder="pk.eyJ…"
+                spellCheck={false}
+                autoComplete="off"
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+              <p className="text-xs mt-1 text-content-faint">{t('admin.defaultSettings.mapboxTokenHint')}</p>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+                {t('admin.defaultSettings.mapboxStyle')}
+                <ResetButton field="mapbox_style" />
+              </label>
+              <CustomSelect
+                value={mapboxStyle}
+                onChange={(value: string) => { if (value) { setMapboxStyle(value); save({ mapbox_style: value }) } }}
+                placeholder={t('admin.defaultSettings.mapboxStylePlaceholder')}
+                options={MAPBOX_STYLE_PRESETS.map(p => ({ value: p.url, label: p.name }))}
+                size="sm"
+                style={{ marginBottom: 8 }}
+              />
+              <input
+                type="text"
+                value={mapboxStyle}
+                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxStyle(e.target.value)}
+                onBlur={() => save({ mapbox_style: mapboxStyle })}
+                placeholder="mapbox://styles/mapbox/standard"
+                className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm focus:ring-2 focus:ring-slate-400 focus:border-transparent"
+              />
+            </div>
+
+            <OptionRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton field="mapbox_3d_enabled" /></>}>
+              {([
+                { value: true, label: t('settings.on') || 'On' },
+                { value: false, label: t('settings.off') || 'Off' },
+              ] as const).map(opt => (
+                <OptionButton key={String(opt.value)} active={(defaults.mapbox_3d_enabled ?? true) === opt.value} onClick={() => save({ mapbox_3d_enabled: opt.value })}>
+                  {opt.label}
+                </OptionButton>
+              ))}
+            </OptionRow>
+
+            <OptionRow label={<>{t('admin.defaultSettings.mapboxQuality')} <ResetButton field="mapbox_quality_mode" /></>}>
+              {([
+                { value: true, label: t('settings.on') || 'On' },
+                { value: false, label: t('settings.off') || 'Off' },
+              ] as const).map(opt => (
+                <OptionButton key={String(opt.value)} active={(defaults.mapbox_quality_mode ?? false) === opt.value} onClick={() => save({ mapbox_quality_mode: opt.value })}>
+                  {opt.label}
+                </OptionButton>
+              ))}
+            </OptionRow>
+          </div>
+        )}
+      </div>
     </Section>
   )
 }

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

@@ -175,7 +175,7 @@ describe('CollabNotes', () => {
     expect(document.body).toBeInTheDocument();
   });
 
-  it('FE-COMP-NOTES-013: delete note calls DELETE API and removes it from grid', async () => {
+  it('FE-COMP-NOTES-013: deleting a note asks for confirmation, then calls DELETE API and removes it', async () => {
     const user = userEvent.setup();
     server.use(
       http.get('/api/trips/1/collab/notes', () =>
@@ -193,8 +193,11 @@ describe('CollabNotes', () => {
     );
     render(<CollabNotes {...defaultProps} />);
     await screen.findByText('Remove Me');
-    const deleteBtn = screen.getByTitle('Delete');
-    await user.click(deleteBtn);
+    await user.click(screen.getByTitle('Delete'));
+    // Deleting now asks for confirmation first — the note stays until confirmed.
+    expect(screen.getByText('Delete note?')).toBeInTheDocument();
+    expect(screen.getByText('Remove Me')).toBeInTheDocument();
+    await user.click(document.querySelector('button.bg-red-600') as HTMLElement);
     await waitFor(() => expect(screen.queryByText('Remove Me')).not.toBeInTheDocument());
   });
 

client/src/components/Collab/CollabNotes.tsx

@@ -10,6 +10,7 @@ import { useTripStore } from '../../store/tripStore'
 import { addListener, removeListener } from '../../api/websocket'
 import { useTranslation } from '../../i18n'
 import { useToast } from '../shared/Toast'
+import ConfirmDialog from '../shared/ConfirmDialog'
 import type { User } from '../../types'
 import type { CollabNote } from './CollabNotes.types'
 import { FONT, NOTE_COLORS } from './CollabNotes.constants'
@@ -44,6 +45,7 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
   const [previewFile, setPreviewFile] = useState(null)
   const [showSettings, setShowSettings] = useState(false)
   const [activeCategory, setActiveCategory] = useState(null)
+  const [pendingDeleteNoteId, setPendingDeleteNoteId] = useState<number | null>(null)
 
   // Empty categories (no notes yet) stored in localStorage
   const [emptyCategories, setEmptyCategories] = useState(() => {
@@ -231,6 +233,7 @@ function useCollabNotes({ tripId, currentUser }: CollabNotesProps) {
     activeCategory, setActiveCategory, categoryColors, getCategoryColor,
     handleCreateNote, handleUpdateNote, saveCategoryColors, handleEditSubmit,
     handleDeleteNoteFile, handleDeleteNote, categories, sortedNotes,
+    pendingDeleteNoteId, setPendingDeleteNoteId,
   }
 }
 
@@ -319,7 +322,7 @@ function CollabCategoryPills({ categories, activeCategory, setActiveCategory, t
 
 function CollabNotesGrid(S: NotesState) {
   const {
-    sortedNotes, currentUser, canEdit, handleUpdateNote, handleDeleteNote,
+    sortedNotes, currentUser, canEdit, handleUpdateNote, setPendingDeleteNoteId,
     setEditingNote, setViewingNote, setPreviewFile, getCategoryColor, tripId, t,
   } = S
   return (
@@ -352,7 +355,7 @@ function CollabNotesGrid(S: NotesState) {
               currentUser={currentUser}
               canEdit={canEdit}
               onUpdate={handleUpdateNote}
-              onDelete={handleDeleteNote}
+              onDelete={setPendingDeleteNoteId}
               onEdit={setEditingNote}
               onView={setViewingNote}
               onPreviewFile={setPreviewFile}
@@ -470,6 +473,7 @@ export default function CollabNotes(props: CollabNotesProps) {
     viewingNote, showNewModal, editingNote, previewFile, showSettings,
     setShowNewModal, setEditingNote, setPreviewFile, setShowSettings,
     handleCreateNote, handleEditSubmit, handleDeleteNoteFile, saveCategoryColors, handleUpdateNote,
+    handleDeleteNote, pendingDeleteNoteId, setPendingDeleteNoteId,
   } = S
 
   if (loading) return <CollabNotesLoading {...S} />
@@ -527,6 +531,15 @@ export default function CollabNotes(props: CollabNotesProps) {
           t={t}
         />
       )}
+
+      {/* Confirm: delete a collab note — guards against accidental deletion */}
+      <ConfirmDialog
+        isOpen={pendingDeleteNoteId !== null}
+        onClose={() => setPendingDeleteNoteId(null)}
+        onConfirm={() => { if (pendingDeleteNoteId !== null) handleDeleteNote(pendingDeleteNoteId) }}
+        title={t('collab.notes.confirmDeleteTitle')}
+        message={t('collab.notes.confirmDeleteBody')}
+      />
     </div>
   )
 }

client/src/components/Collab/CollabNotesCard.tsx

@@ -16,7 +16,7 @@ interface NoteCardProps {
   currentUser: User
   canEdit: boolean
   onUpdate: (noteId: number, data: Partial<CollabNote>) => Promise<void>
-  onDelete: (noteId: number) => Promise<void>
+  onDelete: (noteId: number) => void
   onEdit: (note: CollabNote) => void
   onView: (note: CollabNote) => void
   onPreviewFile: (file: NoteFile) => void

client/src/components/Map/MapCompassPill.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react'
+import { Navigation } from 'lucide-react'
+import type mapboxgl from 'mapbox-gl'
+
+/**
+ * Round compass pill for the Mapbox planner map. The Mapbox map can be rotated and
+ * pitched, so this shows the current bearing (the arrow points to north) and snaps
+ * the camera back to north + flat on click. Rendered next to the POI "explore" pill
+ * (Mapbox only) and built as the SAME frosted shell (padding 4 around a 34px button)
+ * so its height and transparency match the POI pill exactly.
+ */
+export function MapCompassPill({ map }: { map: mapboxgl.Map }) {
+  const [bearing, setBearing] = useState(() => map.getBearing())
+
+  useEffect(() => {
+    const update = () => setBearing(map.getBearing())
+    update()
+    map.on('rotate', update)
+    return () => { map.off('rotate', update) }
+  }, [map])
+
+  return (
+    <div style={{
+      display: 'inline-flex', alignItems: 'center', padding: 4, borderRadius: 999, pointerEvents: 'auto',
+      background: 'var(--sidebar-bg)',
+      backdropFilter: 'blur(20px) saturate(180%)',
+      WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+      boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+    }}>
+      <button
+        type="button"
+        onClick={() => map.easeTo({ bearing: 0, pitch: 0, duration: 300 })}
+        aria-label="Reset north"
+        className="text-content-muted"
+        style={{
+          display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+          width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
+          background: 'transparent', padding: 0,
+          transition: 'background 0.14s, color 0.14s',
+        }}
+        onMouseEnter={e => { e.currentTarget.style.background = 'var(--bg-hover)' }}
+        onMouseLeave={e => { e.currentTarget.style.background = 'transparent' }}
+      >
+        <Navigation size={16} strokeWidth={2} style={{ transform: `rotate(${-bearing}deg)`, transition: 'transform 0.1s linear' }} />
+      </button>
+    </div>
+  )
+}

client/src/components/Map/MapView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo } from 'react'
 import DOM from 'react-dom'
 import { renderToStaticMarkup } from 'react-dom/server'
-import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap } from 'react-leaflet'
+import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
 import MarkerClusterGroup from 'react-leaflet-cluster'
 import L from 'leaflet'
 import 'leaflet.markercluster/dist/MarkerCluster.css'
@@ -10,6 +10,7 @@ import { mapsApi } from '../../api/client'
 import { getCategoryIcon, CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import ReservationOverlay from './ReservationOverlay'
 import type { Reservation } from '../../types'
+import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -118,6 +119,44 @@ function createPlaceIcon(place, orderNumbers, isSelected) {
   return fallbackIcon
 }
 
+// Small coloured pin for an OSM "explore" POI — distinct from the photo-circle
+// markers of planned places; the colour matches its pill category.
+const poiIconCache = new Map<string, L.DivIcon>()
+function createPoiIcon(category: string) {
+  const cached = poiIconCache.get(category)
+  if (cached) return cached
+  const cat = POI_CATEGORY_BY_KEY[category]
+  const color = cat?.color || '#6b7280'
+  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
+  const icon = L.divIcon({
+    className: '',
+    html: `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid white;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;">${svg}</div>`,
+    iconSize: [26, 26],
+    iconAnchor: [13, 13],
+    tooltipAnchor: [0, -14],
+  })
+  poiIconCache.set(category, icon)
+  return icon
+}
+
+// Emits the current viewport bbox on pan/zoom so the POI-explore pill can fetch
+// OSM places for the visible area.
+function ViewportController({ onViewportChange }: { onViewportChange?: (b: { south: number; west: number; north: number; east: number }) => void }) {
+  const map = useMap()
+  useEffect(() => {
+    if (!onViewportChange) return
+    const emit = () => {
+      const b = map.getBounds()
+      onViewportChange({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
+    }
+    map.whenReady(emit) // ensure the first bbox is captured once the map is laid out
+    map.on('moveend', emit)
+    map.on('zoomend', emit)
+    return () => { map.off('moveend', emit); map.off('zoomend', emit) }
+  }, [map, onViewportChange])
+  return null
+}
+
 interface SelectionControllerProps {
   places: Place[]
   selectedPlaceId: number | null
@@ -131,10 +170,21 @@ function SelectionController({ places, selectedPlaceId, dayPlaces, paddingOpts }
 
   useEffect(() => {
     if (selectedPlaceId && selectedPlaceId !== prev.current) {
-      // Pan to the selected place without changing zoom
+      // Pan to the selected place without changing zoom. Offset the centre by the
+      // side-panel + bottom-inspector padding so the pin lands in the middle of the
+      // *visible* map area rather than the geometric centre (where the bottom panel
+      // would cover it). Reuses the same paddingOpts the fit-bounds path uses.
       const selected = places.find(p => p.id === selectedPlaceId)
-      if (selected?.lat && selected?.lng) {
-        map.panTo([selected.lat, selected.lng], { animate: true })
+      if (selected?.lat != null && selected?.lng != null) {
+        const latlng: [number, number] = [selected.lat, selected.lng]
+        const tl = paddingOpts.paddingTopLeft as [number, number] | undefined
+        const br = paddingOpts.paddingBottomRight as [number, number] | undefined
+        if (tl && br && typeof map.project === 'function' && typeof map.unproject === 'function') {
+          const point = map.project(latlng).add([(br[0] - tl[0]) / 2, (br[1] - tl[1]) / 2])
+          map.panTo(map.unproject(point), { animate: true })
+        } else {
+          map.panTo(latlng, { animate: true })
+        }
       }
     }
     prev.current = selectedPlaceId
@@ -356,7 +406,21 @@ export const MapView = memo(function MapView({
   showReservationStats = false,
   visibleConnectionIds = [] as number[],
   onReservationClick,
+  pois = [] as Poi[],
+  onPoiClick,
+  onViewportChange,
 }: any) {
+  const poiMarkers = useMemo(() => (pois as Poi[]).map((poi: Poi) => (
+    <Marker
+      key={`poi-${poi.osm_id}`}
+      position={[poi.lat, poi.lng]}
+      icon={createPoiIcon(poi.category)}
+      zIndexOffset={500}
+      eventHandlers={{ click: () => onPoiClick?.(poi) }}
+    >
+      <Tooltip direction="top" offset={[0, -10]} opacity={1} className="map-tooltip">{poi.name}</Tooltip>
+    </Marker>
+  )), [pois, onPoiClick])
   const visibleReservations = useMemo(() => {
     if (!visibleConnectionIds || visibleConnectionIds.length === 0) return []
     const set = new Set(visibleConnectionIds)
@@ -532,6 +596,7 @@ export const MapView = memo(function MapView({
       <SelectionController places={places} selectedPlaceId={selectedPlaceId} dayPlaces={dayPlaces} paddingOpts={paddingOpts} />
       <MapClickHandler onClick={onMapClick} />
       <MapContextMenuHandler onContextMenu={onMapContextMenu} />
+      <ViewportController onViewportChange={onViewportChange} />
       <LeafletLocationLayer position={userPosition} mode={trackingMode} />
 
       <MarkerClusterGroup
@@ -572,6 +637,8 @@ export const MapView = memo(function MapView({
         showStats={showReservationStats}
         onEndpointClick={onReservationClick}
       />
+
+      {poiMarkers}
     </MapContainer>
     {isMobile && <LocationButton
       mode={trackingMode}

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

@@ -40,6 +40,12 @@ vi.mock('mapbox-gl', () => ({
     })),
     LngLatBounds: vi.fn(() => ({ extend: vi.fn().mockReturnThis() })),
     NavigationControl: vi.fn(),
+    Popup: vi.fn(() => ({
+      setLngLat: vi.fn().mockReturnThis(),
+      setHTML: vi.fn().mockReturnThis(),
+      addTo: vi.fn().mockReturnThis(),
+      remove: vi.fn(),
+    })),
   },
 }))
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))

client/src/components/Map/MapViewGL.tsx

@@ -12,6 +12,8 @@ import { ReservationMapboxOverlay } from './reservationsMapbox'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
+import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
+import { buildPlacePopupHtml, buildPoiPopupHtml } from './placePopup'
 
 function categoryIconSvg(iconName: string | null | undefined, size: number): string {
   const IconComponent = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
@@ -49,6 +51,10 @@ interface Props {
   visibleConnectionIds?: number[]
   showReservationStats?: boolean
   onReservationClick?: (reservationId: number) => void
+  pois?: Poi[]
+  onPoiClick?: (poi: Poi) => void
+  onViewportChange?: (bbox: { south: number; west: number; north: number; east: number }) => void
+  onMapReady?: (map: mapboxgl.Map | null) => void
 }
 
 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
@@ -128,6 +134,17 @@ function createMarkerElement(place: Place & { category_color?: string; category_
   return wrap
 }
 
+// Small coloured pin for an OSM "explore" POI (matches the pill category colour).
+function createPoiMarkerElement(category: string): HTMLDivElement {
+  const cat = POI_CATEGORY_BY_KEY[category]
+  const color = cat?.color || '#6b7280'
+  const svg = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 13, color: 'white', strokeWidth: 2.5 })) : ''
+  const el = document.createElement('div')
+  el.style.cssText = 'width:26px;height:26px;cursor:pointer;'
+  el.innerHTML = `<div style="width:26px;height:26px;border-radius:50%;background:${color};border:2px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;box-sizing:border-box;">${svg}</div>`
+  return el
+}
+
 export function MapViewGL({
   places = [],
   dayPlaces = [],
@@ -149,6 +166,10 @@ export function MapViewGL({
   visibleConnectionIds = [],
   showReservationStats = false,
   onReservationClick,
+  pois = [],
+  onPoiClick,
+  onViewportChange,
+  onMapReady,
 }: Props) {
   const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
   const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
@@ -167,6 +188,16 @@ export function MapViewGL({
   // options without forcing a full overlay rebuild on every prop change.
   const onReservationClickRef = useRef(onReservationClick)
   onReservationClickRef.current = onReservationClick
+  const poiMarkersRef = useRef<mapboxgl.Marker[]>([])
+  // Single reusable hover popup (name/category/address card) shared by planned
+  // places and POI markers — mirrors the Leaflet map's hover tooltip.
+  const popupRef = useRef<mapboxgl.Popup | null>(null)
+  const onPoiClickRef = useRef(onPoiClick)
+  onPoiClickRef.current = onPoiClick
+  const onViewportChangeRef = useRef(onViewportChange)
+  onViewportChangeRef.current = onViewportChange
+  const onMapReadyRef = useRef(onMapReady)
+  onMapReadyRef.current = onMapReady
   const { position: userPosition, mode: trackingMode, error: trackingError, cycleMode: cycleTrackingMode, setMode: setTrackingMode } = useGeolocation()
   const onClickRefs = useRef({ marker: onMarkerClick, map: onMapClick, context: onMapContextMenu })
   onClickRefs.current.marker = onMarkerClick
@@ -189,6 +220,16 @@ export function MapViewGL({
       projection: mapboxQuality ? 'globe' : 'mercator',
     })
     mapRef.current = map
+    popupRef.current = new mapboxgl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+      offset: 18,
+      maxWidth: '240px',
+      className: 'trek-map-popup',
+    })
+    // Hand the map out so the trip planner can render its own compass pill next to
+    // the POI pill (a custom round control instead of Mapbox's default top-right one).
+    onMapReadyRef.current?.(map)
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     ;(window as any).__trek_map = map
 
@@ -260,6 +301,14 @@ export function MapViewGL({
       if (t.closest('.mapboxgl-marker')) return // markers handle their own click
       onClickRefs.current.map?.({ latlng: { lat: e.lngLat.lat, lng: e.lngLat.lng } })
     })
+    // Emit the viewport bbox (pan/zoom + once on first idle) so the POI-explore
+    // pill can fetch OSM places for the visible area.
+    const emitViewport = () => {
+      const b = map.getBounds()
+      onViewportChangeRef.current?.({ south: b.getSouth(), west: b.getWest(), north: b.getNorth(), east: b.getEast() })
+    }
+    map.on('moveend', emitViewport)
+    map.once('idle', emitViewport)
     // In the mapbox-gl map the right mouse button is reserved for the
     // built-in rotate/pitch gesture, so we bind the "add place" action
     // to the middle mouse button (button === 1) instead.
@@ -326,6 +375,8 @@ export function MapViewGL({
       canvas.removeEventListener('auxclick', onAuxClick)
       markersRef.current.forEach(m => m.remove())
       markersRef.current.clear()
+      if (popupRef.current) { popupRef.current.remove(); popupRef.current = null }
+      onMapReadyRef.current?.(null)
       if (reservationOverlayRef.current) {
         reservationOverlayRef.current.destroy()
         reservationOverlayRef.current = null
@@ -399,6 +450,10 @@ export function MapViewGL({
   useEffect(() => {
     const map = mapRef.current
     if (!map) return
+    // Markers are about to be rebuilt; drop any open hover popup first. A marker
+    // recreated under the pointer (e.g. when its photo streams in) never fires
+    // mouseleave, which would otherwise leave the popup orphaned on the map.
+    popupRef.current?.remove()
     const ids = new Set(places.map(p => p.id))
 
     markersRef.current.forEach((marker, id) => {
@@ -419,6 +474,12 @@ export function MapViewGL({
         ev.stopPropagation()
         onClickRefs.current.marker?.(place.id)
       })
+      el.addEventListener('mouseenter', () => {
+        popupRef.current?.setLngLat([place.lng, place.lat])
+          .setHTML(buildPlacePopupHtml(place as Place & { category_color?: string; category_icon?: string; category_name?: string }, photoUrl))
+          .addTo(map)
+      })
+      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
       // Recreate marker each time rather than patching internal state —
       // mapbox-gl's internal _element bookkeeping breaks under DOM swaps.
       const existing = markersRef.current.get(place.id)
@@ -435,6 +496,26 @@ export function MapViewGL({
     })
   }, [places, selectedPlaceId, dayOrderMap, photoUrls])
 
+  // Reconcile OSM "explore" POI markers (imperative, kept separate from the
+  // planned-place markers so they don't cluster or get confused with them).
+  useEffect(() => {
+    const map = mapRef.current
+    if (!map || !mapReady) return
+    popupRef.current?.remove() // same orphan-popup guard as the place markers
+    poiMarkersRef.current.forEach(m => m.remove())
+    poiMarkersRef.current = []
+    for (const poi of (pois as Poi[])) {
+      const el = createPoiMarkerElement(poi.category)
+      el.addEventListener('mouseenter', () => {
+        popupRef.current?.setLngLat([poi.lng, poi.lat]).setHTML(buildPoiPopupHtml(poi)).addTo(map)
+      })
+      el.addEventListener('mouseleave', () => { popupRef.current?.remove() })
+      el.addEventListener('click', (ev) => { ev.stopPropagation(); onPoiClickRef.current?.(poi) })
+      const m = new mapboxgl.Marker({ element: el, anchor: 'center' }).setLngLat([poi.lng, poi.lat]).addTo(map)
+      poiMarkersRef.current.push(m)
+    }
+  }, [pois, mapReady])
+
   // Update route geojson
   useEffect(() => {
     const map = mapRef.current
@@ -553,6 +634,10 @@ export function MapViewGL({
         zoom: Math.max(map.getZoom(), 14),
         pitch: mapbox3d ? 45 : 0,
         duration: 400,
+        // Account for the side panels and the bottom inspector / day-detail panel
+        // so the selected pin lands in the centre of the *visible* map area rather
+        // than the geometric centre (where the bottom panel would cover it).
+        padding: paddingOpts,
       })
     } catch { /* noop */ }
   }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps

client/src/components/Map/PoiCategoryPill.tsx

@@ -0,0 +1,101 @@
+import { RotateCw, AlertTriangle } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { Tooltip } from '../shared/Tooltip'
+import { POI_CATEGORIES } from './poiCategories'
+
+interface Props {
+  active: Set<string>
+  onToggle: (key: string) => void
+  loadingKeys?: Set<string>
+  /** categories whose last fetch failed → show a retry affordance */
+  errorKeys?: Set<string>
+  /** true when the map moved since the last search → offer "search this area" */
+  moved?: boolean
+  onSearchArea?: () => void
+}
+
+// Frosted, icon-only segmented control that floats over the map. Active segments
+// fill with the category colour (matching their markers); the label shows in a
+// custom tooltip on hover so the pill stays compact and never needs to scroll.
+export default function PoiCategoryPill({ active, onToggle, loadingKeys, errorKeys, moved, onSearchArea }: Props) {
+  const { t } = useTranslation()
+  const anyError = !!errorKeys && Array.from(active).some(k => errorKeys.has(k))
+
+  const frosted: React.CSSProperties = {
+    background: 'var(--sidebar-bg)',
+    backdropFilter: 'blur(20px) saturate(180%)',
+    WebkitBackdropFilter: 'blur(20px) saturate(180%)',
+    boxShadow: 'var(--sidebar-shadow, 0 4px 16px rgba(0,0,0,0.14))',
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8 }}>
+      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 2, padding: 4, borderRadius: 999, pointerEvents: 'auto', ...frosted }}>
+        {POI_CATEGORIES.map(cat => {
+          const on = active.has(cat.key)
+          const loading = loadingKeys?.has(cat.key)
+          return (
+            <Tooltip key={cat.key} label={t(cat.labelKey)} placement="bottom">
+              <button
+                type="button"
+                onClick={() => onToggle(cat.key)}
+                aria-pressed={on}
+                aria-label={t(cat.labelKey)}
+                className={on ? '' : 'text-content-muted'}
+                style={{
+                  position: 'relative',
+                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
+                  width: 34, height: 34, borderRadius: 999, border: 'none', cursor: 'pointer',
+                  background: on ? cat.color : 'transparent',
+                  color: on ? '#fff' : undefined,
+                  transition: 'background 0.14s, color 0.14s',
+                }}
+                onMouseEnter={e => { if (!on) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!on) e.currentTarget.style.background = 'transparent' }}
+              >
+                {loading ? (
+                  <span
+                    className="animate-spin"
+                    style={{
+                      width: 14, height: 14, borderRadius: 999, display: 'inline-block',
+                      border: '2px solid', borderColor: on ? 'rgba(255,255,255,0.45)' : 'var(--border-primary)',
+                      borderTopColor: on ? '#fff' : 'var(--text-muted)',
+                    }}
+                  />
+                ) : (
+                  <cat.Icon size={16} strokeWidth={2} />
+                )}
+                {on && !loading && errorKeys?.has(cat.key) && (
+                  <span style={{
+                    position: 'absolute', top: 2, right: 2, width: 8, height: 8,
+                    borderRadius: 999, background: '#ef4444', border: '1.5px solid var(--sidebar-bg)',
+                  }} />
+                )}
+              </button>
+            </Tooltip>
+          )
+        })}
+      </div>
+
+      {(moved || anyError) && active.size > 0 && (
+        <button
+          type="button"
+          onClick={onSearchArea}
+          className="text-content"
+          style={{
+            display: 'inline-flex', alignItems: 'center', gap: 6,
+            padding: '6px 13px', borderRadius: 999, border: 'none', cursor: 'pointer',
+            fontSize: 12, fontWeight: 600, fontFamily: 'inherit', pointerEvents: 'auto',
+            color: anyError ? '#ef4444' : undefined,
+            ...frosted,
+          }}
+        >
+          {anyError
+            ? <AlertTriangle size={13} strokeWidth={2.4} />
+            : <RotateCw size={13} strokeWidth={2.4} />}
+          {t('poi.searchThisArea')}
+        </button>
+      )}
+    </div>
+  )
+}

client/src/components/Map/ReservationOverlay.tsx

@@ -3,6 +3,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { Marker, Polyline, Tooltip, useMap, useMapEvents } from 'react-leaflet'
 import L from 'leaflet'
 import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
 import { useSettingsStore } from '../../store/settingsStore'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
@@ -42,7 +43,7 @@ function useEndpointPane() {
 function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
   const { icon: IconCmp, color } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span>${label}</span>` : ''
+  const labelHtml = label ? `<span>${escapeHtml(label)}</span>` : ''
   const estWidth = label ? Math.max(40, label.length * 6 + 28) : 26
   return L.divIcon({
     className: 'trek-endpoint-marker',
@@ -53,7 +54,7 @@ function endpointIcon(type: TransportType, label: string | null): L.DivIcon {
       border:1.5px solid #fff;color:#fff;
       font-family:var(--font-system);font-size:11px;font-weight:600;letter-spacing:0.3px;line-height:1;
       box-sizing:border-box;height:22px;white-space:nowrap;
-    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''}</div>`,
+    "><span style="display:inline-flex;align-items:center;">${svg}</span>${labelHtml ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''}</div>`,
     iconSize: [estWidth, 22],
     iconAnchor: [estWidth / 2, 11],
     popupAnchor: [0, -11],
@@ -157,6 +158,7 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
+  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -172,8 +174,8 @@ function buildStatsHtml(color: string, mainLabel: string | null, subLabel: strin
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -352,15 +354,29 @@ export default function ReservationOverlay({ reservations, showConnections, show
     const out: TransportItem[] = []
     for (const r of reservations) {
       if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-      const eps = r.endpoints || []
-      const from = eps.find(e => e.role === 'from')
-      const to = eps.find(e => e.role === 'to')
-      if (!from || !to) continue
+      // Ordered waypoints (from · stops · to). A single-leg booking has exactly two,
+      // so the arc + markers below are byte-identical to before for it.
+      const waypoints = (r.endpoints || [])
+        .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
+        .slice()
+        .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+      if (waypoints.length < 2) continue
+      const from = waypoints[0]
+      const to = waypoints[waypoints.length - 1]
       const type = r.type as TransportType
       const isGeo = TYPE_META[type].geodesic
-      const arcs = isGeo
-        ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
-        : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+      // One arc per leg (between consecutive waypoints), concatenated.
+      const arcs: [number, number][][] = []
+      let distanceKm = 0
+      for (let i = 0; i < waypoints.length - 1; i++) {
+        const a = waypoints[i]
+        const b = waypoints[i + 1]
+        const segArcs = isGeo
+          ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
+          : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
+        arcs.push(...segArcs)
+        distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
+      }
       const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
       const primaryArc = arcs[primaryIdx] ?? []
       const fallback: [number, number] = primaryArc.length > 0
@@ -368,12 +384,15 @@ export default function ReservationOverlay({ reservations, showConnections, show
         : [(from.lat + to.lat) / 2, (from.lng + to.lng) / 2]
 
       const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-      const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
-      const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+      const distance = `${Math.round(distanceKm)} km`
+      // Show the full route (FRA → BER → HND) when every waypoint has a code.
+      const mainLabel = waypoints.every(w => w.code)
+        ? waypoints.map(w => w.code).join(' → ')
+        : (from.code && to.code ? `${from.code} → ${to.code}` : null)
       const subParts = [duration, distance].filter(Boolean) as string[]
       const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
 
-      out.push({ res: r, from, to, type, arcs, primaryArc, fallback, mainLabel, subLabel })
+      out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, fallback, mainLabel, subLabel })
     }
     return out
   }, [reservations])
@@ -415,38 +434,21 @@ export default function ReservationOverlay({ reservations, showConnections, show
         />
       )))}
 
-      {visibleItems.flatMap(item => [
+      {visibleItems.flatMap(item => item.waypoints.map((wp, wi) => (
         <Marker
-          key={`from-${item.res.id}`}
-          position={[item.from.lat, item.from.lng]}
-          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.from.code || cleanName(item.from.name)) : null)}
+          key={`wp-${item.res.id}-${wi}`}
+          position={[wp.lat, wp.lng]}
+          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (wp.code || cleanName(wp.name)) : null)}
           pane={ENDPOINT_PANE}
           zIndexOffset={1000}
           eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
         >
           <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
-            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.from.name}</div>
+            <div style={{ fontWeight: 600, fontSize: 12 }}>{wp.name}</div>
             {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
           </Tooltip>
-        </Marker>,
-        <Marker
-          key={`to-${item.res.id}`}
-          position={[item.to.lat, item.to.lng]}
-          icon={endpointIcon(item.type, showEndpointLabels && labelVisibleIds.has(item.res.id) ? (item.to.code || cleanName(item.to.name)) : null)}
-          pane={ENDPOINT_PANE}
-          zIndexOffset={1000}
-          eventHandlers={{ click: () => onEndpointClick?.(item.res.id) }}
-        >
-          <Tooltip direction="top" offset={[0, -8]} opacity={1} className="map-tooltip">
-            <div style={{ fontWeight: 600, fontSize: 12 }}>{item.to.name}</div>
-            {item.res.title && <div className="text-content-muted" style={{ fontSize: 11 }}>{item.res.title}</div>}
-          </Tooltip>
-        </Marker>,
-      ])}
-
-      {showStats && visibleItems.map(item => item.type === 'flight' && (item.mainLabel || item.subLabel) && labelVisibleIds.has(item.res.id) && (
-        <StatsLabel key={`stats-${item.res.id}`} item={item} />
-      ))}
+        </Marker>
+      )))}
     </>
   )
 }

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

@@ -161,6 +161,62 @@ describe('optimizeRoute', () => {
     expect(result[1]).toEqual(c)
     expect(result[2]).toEqual(b)
   })
+
+  it('FE-COMP-ROUTECALCULATOR-016: start anchor begins the chain at the anchor-nearest stop', () => {
+    const a = { lat: 10, lng: 1 }
+    const b = { lat: 2, lng: 1 }
+    const c = { lat: 5, lng: 1 }
+    // From the accommodation anchor (1,1): nearest is b(2,1), then c(5,1), then a(10,1)
+    const result = optimizeRoute([a, b, c], { start: { lat: 1, lng: 1 } })
+    expect(result).toEqual([b, c, a])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-017: start + end anchors reorder a shuffled day and keep the end-nearest stop last', () => {
+    const a = { lat: 2, lng: 1 }
+    const b = { lat: 5, lng: 1 }
+    const c = { lat: 8, lng: 1 }
+    // Transfer day: start at hotel A (1,1), end at hotel B (9,1). c is nearest B, so it must be last.
+    const result = optimizeRoute([c, a, b], { start: { lat: 1, lng: 1 }, end: { lat: 9, lng: 1 } })
+    expect(result).toEqual([a, b, c])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-018: an anchor makes even a two-stop day sortable', () => {
+    const a = { lat: 10, lng: 1 }
+    const b = { lat: 2, lng: 1 }
+    // Without anchors two stops are returned unchanged; the start anchor orders them by proximity.
+    const result = optimizeRoute([a, b], { start: { lat: 1, lng: 1 } })
+    expect(result).toEqual([b, a])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-019: 2-opt untangles a round-trip into a clean loop around the hotel', () => {
+    const hotel = { lat: 48.8668, lng: 2.3013 } // Rue Marbeuf
+    const stops = [
+      { id: 1, lat: 48.8565, lng: 2.3324 },
+      { id: 2, lat: 48.8813, lng: 2.3151 },
+      { id: 3, lat: 48.8796, lng: 2.308 },
+      { id: 4, lat: 48.8723, lng: 2.2926 },
+      { id: 5, lat: 48.866, lng: 2.3102 }, // nearest the hotel
+    ]
+    const d = (a: { lat: number; lng: number }, b: { lat: number; lng: number }) =>
+      Math.hypot(a.lat - b.lat, a.lng - b.lng)
+    const loop = (order: typeof stops) =>
+      d(hotel, order[0]) + order.slice(1).reduce((s, p, i) => s + d(order[i], p), 0) + d(order[order.length - 1], hotel)
+
+    const result = optimizeRoute(stops, { start: hotel, end: hotel })
+    // The optimized loop is no longer than the original order…
+    expect(loop(result)).toBeLessThanOrEqual(loop(stops) + 1e-9)
+    // …and the hotel-adjacent stop sits at one end of the loop, right next to the hotel.
+    expect([result[0].id, result[result.length - 1].id]).toContain(5)
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-020: an end anchor without a start finishes at the stop nearest it', () => {
+    const a = { lat: 2, lng: 1 }
+    const b = { lat: 5, lng: 1 }
+    const c = { lat: 9, lng: 1 }
+    // a is nearest the end anchor, so the route must finish at a rather than start there.
+    const result = optimizeRoute([a, b, c], { end: { lat: 1, lng: 1 } })
+    expect(result[result.length - 1]).toEqual(a)
+  })
 })
 
 // ── generateGoogleMapsUrl ──────────────────────────────────────────────────────

client/src/components/Map/RouteCalculator.ts

@@ -1,4 +1,4 @@
-import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint } from '../../types'
+import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
 
 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
 
@@ -77,35 +77,98 @@ export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
   return `https://www.google.com/maps/dir/${stops}`
 }
 
-/** Reorders waypoints using a nearest-neighbor heuristic to minimize total Euclidean distance. */
-export function optimizeRoute<T extends Waypoint>(places: T[]): T[] {
-  const valid = places.filter((p) => p.lat && p.lng)
-  if (valid.length <= 2) return places
+// Squared planar distance — enough for nearest-neighbor comparisons and cheaper than a full haversine.
+function sqDist(a: Waypoint, b: Waypoint): number {
+  return (a.lat - b.lat) ** 2 + (a.lng - b.lng) ** 2
+}
 
+// Length of visiting `order` in sequence, optionally pinned to a fixed start and/or end anchor.
+// With start === end this is a closed loop back to the anchor (a day out from and back to the hotel).
+function tourLength(order: Waypoint[], start?: Waypoint, end?: Waypoint): number {
+  if (order.length === 0) return 0
+  let total = 0
+  if (start) total += Math.sqrt(sqDist(start, order[0]))
+  for (let i = 0; i < order.length - 1; i++) total += Math.sqrt(sqDist(order[i], order[i + 1]))
+  if (end) total += Math.sqrt(sqDist(order[order.length - 1], end))
+  return total
+}
+
+// Greedy nearest-neighbor ordering, seeded at the start anchor when there is one.
+function nearestNeighborOrder<T extends Waypoint>(valid: T[], start?: Waypoint): T[] {
   const visited = new Set<number>()
   const result: T[] = []
-  let current = valid[0]
-  visited.add(0)
-  result.push(current)
-
+  let current: Waypoint
+  if (start) {
+    current = start
+  } else {
+    current = valid[0]
+    visited.add(0)
+    result.push(valid[0])
+  }
   while (result.length < valid.length) {
     let nearestIdx = -1
     let minDist = Infinity
     for (let i = 0; i < valid.length; i++) {
       if (visited.has(i)) continue
-      const d = Math.sqrt(
-        Math.pow(valid[i].lat - current.lat, 2) + Math.pow(valid[i].lng - current.lng, 2)
-      )
+      const d = sqDist(valid[i], current)
       if (d < minDist) { minDist = d; nearestIdx = i }
     }
     if (nearestIdx === -1) break
     visited.add(nearestIdx)
     current = valid[nearestIdx]
-    result.push(current)
+    result.push(valid[nearestIdx])
   }
   return result
 }
 
+// 2-opt: repeatedly reverse a sub-segment whenever it shortens the tour. This removes the crossings
+// a pure nearest-neighbor pass leaves behind. The start/end anchors stay fixed, so a round trip
+// (start === end) is untangled into a clean loop rather than an open path.
+function twoOptImprove<T extends Waypoint>(order: T[], start?: Waypoint, end?: Waypoint): T[] {
+  if (order.length < 3) return order
+  let best = order
+  let bestLen = tourLength(best, start, end)
+  let improved = true
+  while (improved) {
+    improved = false
+    for (let i = 0; i < best.length - 1; i++) {
+      for (let j = i + 1; j < best.length; j++) {
+        const candidate = best.slice(0, i).concat(best.slice(i, j + 1).reverse(), best.slice(j + 1))
+        const len = tourLength(candidate, start, end)
+        if (len < bestLen - 1e-12) {
+          best = candidate
+          bestLen = len
+          improved = true
+        }
+      }
+    }
+  }
+  return best
+}
+
+/**
+ * Reorders waypoints to minimize travel distance: a nearest-neighbor pass for a good starting order,
+ * then 2-opt to untangle crossings. Optional anchors (e.g. the day's accommodation) pin the route's
+ * ends — start === end makes it a loop out from and back to the hotel; a transfer day runs start → end.
+ */
+export function optimizeRoute<T extends Waypoint>(places: T[], anchors: RouteAnchors = {}): T[] {
+  const { start, end } = anchors
+  const valid = places.filter((p) => p.lat && p.lng)
+  if (valid.length <= 1) return places
+  // Two unanchored stops have no meaningful order to optimize; anchors can still flip them.
+  if (valid.length === 2 && !start && !end) return places
+
+  const order = twoOptImprove(nearestNeighborOrder(valid, start), start, end)
+
+  // A round trip's loop direction is arbitrary, so orient it to begin at the stop nearest the hotel —
+  // that reads naturally as "leave the hotel, head to the closest place, …, come back".
+  if (start && end && start.lat === end.lat && start.lng === end.lng && order.length > 1) {
+    if (sqDist(order[order.length - 1], start) < sqDist(order[0], start)) order.reverse()
+  }
+
+  return order
+}
+
 /** Fetches per-leg distance/duration from OSRM and returns segment metadata (midpoints, walking/driving times). */
 export async function calculateSegments(
   waypoints: Waypoint[],

client/src/components/Map/placePopup.ts

@@ -0,0 +1,68 @@
+import { createElement } from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
+import { POI_CATEGORY_BY_KEY, type Poi } from './poiCategories'
+import type { Place } from '../../types'
+
+// HTML builders for the Mapbox GL hover popup. The Leaflet map already shows a
+// name/category/address card on hover (a cursor-following overlay); Mapbox GL has
+// no equivalent, so these produce the same card as an HTML string for a
+// mapboxgl.Popup. Kept framework-agnostic (plain strings) on purpose.
+
+type PlaceWithCategory = Place & {
+  category_color?: string | null
+  category_icon?: string | null
+  category_name?: string | null
+}
+
+function esc(s: string | null | undefined): string {
+  if (!s) return ''
+  return String(s)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+}
+
+// Render a lucide category icon to an inline SVG string in the given colour.
+function iconSvg(iconName: string | null | undefined, size: number, color: string): string {
+  const Icon = (iconName && CATEGORY_ICON_MAP[iconName]) || CATEGORY_ICON_MAP['MapPin']
+  try {
+    return renderToStaticMarkup(createElement(Icon, { size, color, strokeWidth: 2 }))
+  } catch {
+    return ''
+  }
+}
+
+// Only data: thumbnails and our own photo-proxy URLs are safe to drop straight
+// into an <img src> — everything else is a fetch seed, not a displayable URL.
+function isDisplayablePhoto(url: string | null | undefined): url is string {
+  return !!url && (url.startsWith('data:') || url.startsWith('/api/maps/place-photo/'))
+}
+
+const CARD_OPEN = '<div style="font-family:var(--font-system);max-width:220px;">'
+const NAME_STYLE = 'font-weight:600;font-size:12.5px;color:#111827;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
+const ADDR_STYLE = 'font-size:11px;color:#9ca3af;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;'
+
+/** Hover-popup card for a planned place: optional photo, name, category row, address. */
+export function buildPlacePopupHtml(place: PlaceWithCategory, photoUrl: string | null): string {
+  const img = isDisplayablePhoto(photoUrl)
+    ? `<div style="width:100%;height:84px;border-radius:8px;overflow:hidden;margin-bottom:6px;background:#f3f4f6;"><img src="${esc(photoUrl)}" style="width:100%;height:100%;object-fit:cover;display:block;" /></div>`
+    : ''
+  const category =
+    place.category_name && place.category_icon
+      ? `<div style="display:flex;align-items:center;gap:4px;margin-top:2px;">${iconSvg(place.category_icon, 11, place.category_color || '#6b7280')}<span style="font-size:11px;color:#6b7280;">${esc(place.category_name)}</span></div>`
+      : ''
+  const address = place.address ? `<div style="${ADDR_STYLE}">${esc(place.address)}</div>` : ''
+  return `${CARD_OPEN}${img}<div style="${NAME_STYLE}">${esc(place.name)}</div>${category}${address}</div>`
+}
+
+/** Hover-popup card for an OSM "explore" POI: category-coloured icon, name, address. */
+export function buildPoiPopupHtml(poi: Poi): string {
+  const cat = POI_CATEGORY_BY_KEY[poi.category]
+  const color = cat?.color || '#6b7280'
+  const icon = cat ? renderToStaticMarkup(createElement(cat.Icon, { size: 12, color, strokeWidth: 2 })) : ''
+  const head = `<div style="display:flex;align-items:center;gap:5px;"><span style="flex-shrink:0;display:inline-flex;line-height:0;">${icon}</span><span style="${NAME_STYLE}">${esc(poi.name)}</span></div>`
+  const address = poi.address ? `<div style="${ADDR_STYLE}">${esc(poi.address)}</div>` : ''
+  return `${CARD_OPEN}${head}${address}</div>`
+}

client/src/components/Map/poiCategories.ts

@@ -0,0 +1,43 @@
+import { Utensils, Coffee, Wine, BedDouble, Camera, Landmark, Trees, Ticket, type LucideIcon } from 'lucide-react'
+
+// The POI categories shown in the map "explore" pill. The `key` is the contract
+// with the server (CATEGORY_OSM_FILTERS in mapsService.ts) — the OSM tag mapping
+// lives there; label/icon/colour live here. `color` doubles as the active-pill
+// fill AND the marker colour, so the pill and the map agree visually.
+export interface PoiCategory {
+  key: string
+  labelKey: string
+  Icon: LucideIcon
+  color: string
+}
+
+export const POI_CATEGORIES: PoiCategory[] = [
+  { key: 'restaurant', labelKey: 'poi.cat.restaurants', Icon: Utensils, color: '#EF4444' },
+  { key: 'cafe', labelKey: 'poi.cat.cafes', Icon: Coffee, color: '#B45309' },
+  { key: 'bar', labelKey: 'poi.cat.bars', Icon: Wine, color: '#A855F7' },
+  { key: 'hotel', labelKey: 'poi.cat.hotels', Icon: BedDouble, color: '#2563EB' },
+  { key: 'sights', labelKey: 'poi.cat.sights', Icon: Camera, color: '#EC4899' },
+  { key: 'museum', labelKey: 'poi.cat.museums', Icon: Landmark, color: '#6366F1' },
+  { key: 'nature', labelKey: 'poi.cat.nature', Icon: Trees, color: '#16A34A' },
+  { key: 'activity', labelKey: 'poi.cat.activities', Icon: Ticket, color: '#F59E0B' },
+]
+
+export const POI_CATEGORY_BY_KEY: Record<string, PoiCategory> = Object.fromEntries(
+  POI_CATEGORIES.map(c => [c.key, c]),
+)
+
+// One POI result from /api/maps/pois (mirror of the server's OverpassPoi).
+export interface Poi {
+  osm_id: string
+  name: string
+  lat: number
+  lng: number
+  category: string
+  poi_type: string
+  address: string | null
+  website: string | null
+  phone: string | null
+  opening_hours: string | null
+  cuisine: string | null
+  source: 'openstreetmap'
+}

client/src/components/Map/reservationsMapbox.ts

@@ -10,6 +10,7 @@ import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import mapboxgl from 'mapbox-gl'
 import { Plane, Train, Ship, Car, Bus, Sailboat, Bike, CarTaxiFront, Route } from 'lucide-react'
+import { escapeHtml } from '@trek/shared'
 import type { Reservation, ReservationEndpoint } from '../../types'
 
 export const RESERVATION_SOURCE_ID = 'trek-reservations'
@@ -125,6 +126,7 @@ interface TransportItem {
   res: Reservation
   from: ReservationEndpoint
   to: ReservationEndpoint
+  waypoints: ReservationEndpoint[]
   type: TransportType
   arcs: [number, number][][]
   primaryArc: [number, number][]
@@ -136,23 +138,38 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
   const out: TransportItem[] = []
   for (const r of reservations) {
     if (!TRANSPORT_TYPES.includes(r.type as TransportType)) continue
-    const eps = r.endpoints || []
-    const from = eps.find(e => e.role === 'from')
-    const to = eps.find(e => e.role === 'to')
-    if (!from || !to) continue
+    // Ordered waypoints (from · stops · to); a single-leg booking has exactly two.
+    const waypoints = (r.endpoints || [])
+      .filter(e => e.role === 'from' || e.role === 'to' || e.role === 'stop')
+      .slice()
+      .sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+    if (waypoints.length < 2) continue
+    const from = waypoints[0]
+    const to = waypoints[waypoints.length - 1]
     const type = r.type as TransportType
     const isGeo = TYPE_META[type].geodesic
-    const arcs = isGeo
-      ? splitAntimeridian(greatCircle([from.lat, from.lng], [to.lat, to.lng]))
-      : [[[from.lat, from.lng], [to.lat, to.lng]] as [number, number][]]
+    // One arc per leg (between consecutive waypoints), concatenated.
+    const arcs: [number, number][][] = []
+    let distanceKm = 0
+    for (let i = 0; i < waypoints.length - 1; i++) {
+      const a = waypoints[i]
+      const b = waypoints[i + 1]
+      const segArcs = isGeo
+        ? splitAntimeridian(greatCircle([a.lat, a.lng], [b.lat, b.lng]))
+        : [[[a.lat, a.lng], [b.lat, b.lng]] as [number, number][]]
+      arcs.push(...segArcs)
+      distanceKm += haversineKm([a.lat, a.lng], [b.lat, b.lng])
+    }
     const primaryIdx = arcs.reduce((best, seg, idx, all) => seg.length > all[best].length ? idx : best, 0)
     const primaryArc = arcs[primaryIdx] ?? []
     const duration = computeDuration(from, to, r.reservation_time || null, r.reservation_end_time || null)
-    const distance = `${Math.round(haversineKm([from.lat, from.lng], [to.lat, to.lng]))} km`
-    const mainLabel = from.code && to.code ? `${from.code} → ${to.code}` : null
+    const distance = `${Math.round(distanceKm)} km`
+    const mainLabel = waypoints.every(w => w.code)
+      ? waypoints.map(w => w.code).join(' → ')
+      : (from.code && to.code ? `${from.code} → ${to.code}` : null)
     const subParts = [duration, distance].filter(Boolean) as string[]
     const subLabel = subParts.length > 0 ? subParts.join(' · ') : null
-    out.push({ res: r, from, to, type, arcs, primaryArc, mainLabel, subLabel })
+    out.push({ res: r, from, to, waypoints, type, arcs, primaryArc, mainLabel, subLabel })
   }
   return out
 }
@@ -161,7 +178,7 @@ function buildItems(reservations: Reservation[]): TransportItem[] {
 function endpointMarkerHtml(type: TransportType, label: string | null): string {
   const { icon: IconCmp } = TYPE_META[type]
   const svg = renderToStaticMarkup(createElement(IconCmp, { size: 13, color: 'white', strokeWidth: 2.5 }))
-  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${label}</span>` : ''
+  const labelHtml = label ? `<span style="display:inline-flex;align-items:center;line-height:1">${escapeHtml(label)}</span>` : ''
   return `<div style="
     display:inline-flex;align-items:center;justify-content:center;gap:4px;
     padding:0 8px;border-radius:999px;
@@ -179,8 +196,8 @@ function buildStatsHtml(mainLabel: string | null, subLabel: string | null): { ht
   ) + 22
   const hasBoth = !!mainLabel && !!subLabel
   const height = hasBoth ? 36 : 22
-  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${mainLabel}</span>` : ''
-  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${subLabel}</span>` : ''
+  const main = mainLabel ? `<span style="font-size:12px;font-weight:700;line-height:1;display:block">${escapeHtml(mainLabel)}</span>` : ''
+  const sub = subLabel ? `<span style="font-size:10px;font-weight:500;line-height:1;opacity:0.85;display:block${hasBoth ? ';margin-top:4px' : ''}">${escapeHtml(subLabel)}</span>` : ''
   const html = `<div class="trek-stats-inner" style="
     display:flex;flex-direction:column;align-items:center;justify-content:center;
     width:100%;height:100%;
@@ -320,7 +337,7 @@ export class ReservationMapboxOverlay {
     if (show) {
       for (const item of visibleItems) {
         const showLabel = this.opts.showEndpointLabels && labelVisibleIds.has(item.res.id)
-        for (const ep of [item.from, item.to]) {
+        for (const ep of item.waypoints) {
           const label = showLabel ? (ep.code || cleanName(ep.name)) : null
           const el = document.createElement('div')
           el.innerHTML = endpointMarkerHtml(item.type, label)
@@ -341,29 +358,10 @@ export class ReservationMapboxOverlay {
       }
     }
 
-    // ── stats label (flights only) ──────────────────────────────────
+    // Stats badge removed — the floating route/duration label on the arc is no
+    // longer drawn; only the connection line and the airport markers remain.
     this.statsMarkers.forEach(s => s.marker.remove())
     this.statsMarkers = []
-    if (show && this.opts.showStats) {
-      for (const item of visibleItems) {
-        if (item.type !== 'flight') continue
-        if (!labelVisibleIds.has(item.res.id)) continue
-        if (!item.mainLabel && !item.subLabel) continue
-        const arc = item.primaryArc
-        if (arc.length < 2) continue
-        const mid = arc[Math.floor(arc.length / 2)]!
-        const { html, width, height } = buildStatsHtml(item.mainLabel, item.subLabel)
-        const el = document.createElement('div')
-        el.style.cssText = `width:${width}px;height:${height}px;pointer-events:none;`
-        el.innerHTML = html
-        const marker = new mapboxgl.Marker({ element: el, anchor: 'center' })
-          .setLngLat([mid[1], mid[0]])
-          .addTo(map)
-        this.statsMarkers.push({ marker, arc })
-      }
-    }
-    // Prime rotation once so labels don't flash horizontal on first paint.
-    this.updateStatsRotation()
   }
 
   // Match the Leaflet overlay's "rotate the label along the arc" look.

client/src/components/Map/usePoiExplore.ts

@@ -0,0 +1,115 @@
+import { useState, useRef, useCallback, useMemo } from 'react'
+import { mapsApi } from '../../api/client'
+import type { Poi } from './poiCategories'
+
+export interface Bbox { south: number; west: number; north: number; east: number }
+
+// A request we cancelled on purpose (newer search superseded it) — not a failure.
+function isAbortError(err: unknown): boolean {
+  const e = err as { name?: string; code?: string } | null
+  return e?.name === 'CanceledError' || e?.code === 'ERR_CANCELED' || e?.name === 'AbortError'
+}
+
+/**
+ * State for the map POI "explore" pill. Toggling a category fetches its OSM POIs
+ * for the current viewport; panning/zooming does NOT auto-refetch — it just marks
+ * the results stale (`moved`) so the pill can offer "search this area". This keeps
+ * Overpass load (and visual churn) down.
+ */
+export function usePoiExplore() {
+  const [active, setActive] = useState<Set<string>>(() => new Set())
+  const [byCat, setByCat] = useState<Record<string, Poi[]>>({})
+  const [loadingKeys, setLoadingKeys] = useState<Set<string>>(() => new Set())
+  const [moved, setMoved] = useState(false)
+  // Categories whose last fetch genuinely failed (all Overpass mirrors down), so
+  // the pill can offer a retry instead of looking like "no places here".
+  const [errorKeys, setErrorKeys] = useState<Set<string>>(() => new Set())
+
+  const bboxRef = useRef<Bbox | null>(null)
+  // activeRef always mirrors the latest active set so async callbacks (fetch
+  // completions) can check whether a category is still wanted.
+  const activeRef = useRef(active)
+  activeRef.current = active
+  // One in-flight AbortController per category, so re-toggling / re-searching
+  // cancels the previous (possibly slow) Overpass request instead of racing it.
+  const abortRef = useRef<Record<string, AbortController>>({})
+
+  const setLoading = useCallback((key: string, on: boolean) => setLoadingKeys(prev => {
+    const next = new Set(prev)
+    if (on) next.add(key); else next.delete(key)
+    return next
+  }), [])
+
+  const setError = useCallback((key: string, on: boolean) => setErrorKeys(prev => {
+    if (on === prev.has(key)) return prev
+    const next = new Set(prev)
+    if (on) next.add(key); else next.delete(key)
+    return next
+  }), [])
+
+  const fetchCat = useCallback(async (key: string, bbox: Bbox) => {
+    abortRef.current[key]?.abort()
+    const ctrl = new AbortController()
+    abortRef.current[key] = ctrl
+    setLoading(key, true)
+    setError(key, false)
+    try {
+      const res = await mapsApi.pois(key, bbox, ctrl.signal)
+      // Drop the result if the user toggled this category off while the (slow)
+      // Overpass request was in flight — otherwise stale results re-appear.
+      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: res.pois } : prev))
+    } catch (err) {
+      // A superseded request was aborted on purpose — leave its state untouched
+      // so the newer request owns the spinner and results.
+      if (isAbortError(err)) return
+      // A real failure (every Overpass mirror down/timed out): surface it instead
+      // of a silent empty so the user can retry rather than assume "no places".
+      setByCat(prev => (activeRef.current.has(key) ? { ...prev, [key]: [] } : prev))
+      if (activeRef.current.has(key)) setError(key, true)
+    } finally {
+      // Only the latest controller for this key clears the spinner; a superseded
+      // one must not, or it would hide the newer request's in-flight state.
+      if (abortRef.current[key] === ctrl) {
+        setLoading(key, false)
+        delete abortRef.current[key]
+      }
+    }
+  }, [setLoading, setError])
+
+  const onViewportChange = useCallback((bbox: Bbox) => {
+    bboxRef.current = bbox
+    if (activeRef.current.size > 0) setMoved(true)
+  }, [])
+
+  // Single-select: clicking a category switches to it (dropping the previous one
+  // and its markers immediately) and fetches it for the current viewport; clicking
+  // the already-active category turns it off.
+  const toggle = useCallback((key: string) => {
+    const isOnlyActive = activeRef.current.has(key) && activeRef.current.size === 1
+    setMoved(false)
+    setErrorKeys(new Set())
+    // Switching to another category (or turning off) — cancel any in-flight
+    // fetches so their results can't land after the selection changed.
+    Object.values(abortRef.current).forEach(c => c.abort())
+    abortRef.current = {}
+    if (isOnlyActive) {
+      setActive(new Set())
+      setByCat({})
+      return
+    }
+    setActive(new Set([key]))
+    setByCat({})
+    if (bboxRef.current) fetchCat(key, bboxRef.current)
+  }, [fetchCat])
+
+  const searchArea = useCallback(() => {
+    const bbox = bboxRef.current
+    if (!bbox) return
+    setMoved(false)
+    activeRef.current.forEach(key => fetchCat(key, bbox))
+  }, [fetchCat])
+
+  const pois = useMemo(() => Object.values(byCat).flat(), [byCat])
+
+  return { active, pois, loadingKeys, errorKeys, moved, toggle, searchArea, onViewportChange }
+}

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

@@ -146,4 +146,20 @@ describe('downloadJourneyBookPDF', () => {
     expect(html).toContain('Journey Book');
     expect(html).toContain('The End');
   });
+
+  it('FE-COMP-JOURNEYPDF-007: sanitises HTML injected via an entry story and keeps the iframe script-free', async () => {
+    const journey = buildJourney();
+    journey.entries[0].story = 'Hello <script>alert(1)</script> <img src=x onerror="alert(2)"> world';
+    await downloadJourneyBookPDF(journey);
+    const iframe = getIframe()!;
+    const html = iframe.srcdoc;
+
+    // The script tag, image beacon and event handler are stripped from the story.
+    expect(html).not.toContain('<script');
+    expect(html).not.toContain('onerror');
+    expect(html).not.toContain('alert(2)');
+    // Benign prose survives.
+    expect(html).toContain('Hello');
+    expect(html).toContain('world');
+  });
 });

client/src/components/PDF/JourneyBookPDF.tsx

@@ -1,5 +1,6 @@
 // Journey Photo Book PDF — Polarsteps-inspired, magazine-density
 import { marked } from 'marked'
+import { sanitizeRichTextHtml } from '@trek/shared'
 import type { JourneyDetail, JourneyEntry, JourneyPhoto } from '../../store/journeyStore'
 
 function esc(str: string | null | undefined): string {
@@ -9,7 +10,9 @@ function esc(str: string | null | undefined): string {
 
 function md(str: string | null | undefined): string {
   if (!str) return ''
-  return marked.parse(str, { async: false, breaks: true }) as string
+  // marked passes embedded raw HTML through by default, so sanitise the result
+  // before it goes into the srcdoc iframe (keeps prose markup, drops scripts).
+  return sanitizeRichTextHtml(marked.parse(str, { async: false, breaks: true }) as string)
 }
 
 function abs(url: string | null | undefined): string {
@@ -308,7 +311,9 @@ export async function downloadJourneyBookPDF(journey: JourneyDetail) {
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
+  // No script runs inside the document (print is triggered from the parent via
+  // contentWindow.print()), so withhold allow-scripts to keep the sandbox tight.
+  iframe.sandbox = 'allow-same-origin allow-modals'
   iframe.srcdoc = html
 
   card.appendChild(header)

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

@@ -259,6 +259,23 @@ describe('downloadTripPDF', () => {
     expect(iframe!.srcdoc).toContain('colosseum.jpg')
   })
 
+  it('FE-COMP-TRIPPDF-018b: renders a persisted place-photo proxy image_url as an <img>, not the category icon (#1130)', async () => {
+    const args = {
+      ...richArgs,
+      assignments: {
+        '10': [{
+          ...assignmentForDay,
+          place: { ...placeWithDetails, image_url: '/api/maps/place-photo/ChIJabc/bytes' },
+        }],
+      } as any,
+    }
+    await downloadTripPDF(args)
+    const iframe = getIframe()
+    // The proxy path (no file extension) must still embed as an absolute <img>.
+    expect(iframe!.srcdoc).toContain('http://localhost:3000/api/maps/place-photo/ChIJabc/bytes')
+    expect(iframe!.srcdoc).toContain('class="place-thumb"')
+  })
+
   it('FE-COMP-TRIPPDF-019: fetches google place photos for places with google_place_id', async () => {
     let photoCalled = false
     server.use(

client/src/components/PDF/TripPDF.tsx

@@ -55,6 +55,10 @@ function absUrl(url) {
 function safeImg(url) {
   if (!url) return null
   if (url.startsWith('https://') || url.startsWith('http://')) return url
+  // The in-app place-photo proxy always streams a JPEG but has no file extension
+  // (it ends in …/bytes), so the extension check below would wrongly reject it —
+  // which is why persisted place photos showed as category icons in the PDF.
+  if (url.startsWith('/api/maps/place-photo/')) return absUrl(url)
   return /\.(jpe?g|png|webp|bmp|tiff?)(\?.*)?$/i.test(url) ? absUrl(url) : null
 }
 
@@ -211,7 +215,13 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
             const icon = reservationIconSvg(r.type)
             const color = RESERVATION_COLOR_MAP[r.type] || '#3b82f6'
             let subtitle = ''
-            if (r.type === 'flight') subtitle = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+            if (r.type === 'flight') {
+              // Full route over all waypoints (FRA → BER → HND), falling back to the
+              // flat metadata pair for legacy single-leg flights without endpoints.
+              const stops = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0)).map(e => e.code || e.name)
+              const route = stops.length >= 2 ? stops.join(' → ') : (meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : '')
+              subtitle = [meta.airline, meta.flight_number, route].filter(Boolean).join(' · ')
+            }
             else if (r.type === 'train') subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Seat ${meta.seat}` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'restaurant') subtitle = [meta.party_size ? `${meta.party_size} guests` : ''].filter(Boolean).join(' · ')
             else if (r.type === 'event') subtitle = [meta.venue].filter(Boolean).join(' · ')
@@ -254,9 +264,10 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
           const cat = categories.find(c => c.id === place.category_id)
           const color = cat?.color || '#6366f1'
 
-          // Image: direct > google photo > fallback icon
+          // Image: direct > google photo > fallback icon. Both go through safeImg
+          // so the proxy path is resolved to an absolute URL the PDF can load.
           const directImg = safeImg(place.image_url)
-          const googleImg = photoMap[place.id] || null
+          const googleImg = safeImg(photoMap[place.id])
           const img = directImg || googleImg
 
           const iconSvg = categoryIconSvg(cat?.icon, color, 24)
@@ -282,6 +293,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                   ${cat ? `<span class="cat-badge" style="background:${color}">${escHtml(cat.name)}</span>` : ''}
                 </div>
                 ${place.address ? `<div class="info-row">${svgPin}<span class="info-text">${escHtml(place.address)}</span></div>` : ''}
+                ${(place.lat != null && place.lng != null) ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted">${Number(place.lat).toFixed(5)}, ${Number(place.lng).toFixed(5)}</span></div>` : ''}
                 ${place.description ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.description)}</span></div>` : ''}
                 ${chips ? `<div class="chips">${chips}</div>` : ''}
                 ${place.notes ? `<div class="info-row"><span class="info-spacer"></span><span class="info-text muted italic">${escHtml(place.notes)}</span></div>` : ''}
@@ -569,7 +581,9 @@ ${daysHtml}
 
   const iframe = document.createElement('iframe')
   iframe.style.cssText = 'flex:1;width:100%;border:none;'
-  iframe.sandbox = 'allow-same-origin allow-modals allow-scripts'
+  // No script runs inside the document (print is parent-initiated), so withhold
+  // allow-scripts to keep the sandbox tight.
+  iframe.sandbox = 'allow-same-origin allow-modals'
   iframe.srcdoc = html
 
   card.appendChild(header)

client/src/components/Packing/ApplyTemplateButton.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { Package } from 'lucide-react'
-import { adminApi, packingApi } from '../../api/client'
+import { packingApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
@@ -28,7 +28,7 @@ export default function ApplyTemplateButton({ tripId, style, className }: ApplyT
   const { t } = useTranslation()
 
   useEffect(() => {
-    adminApi.packingTemplates().then(d => setTemplates(d.templates || [])).catch(() => {})
+    packingApi.listTemplates(tripId).then(d => setTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {

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

@@ -7,7 +7,7 @@ import { server } from '../../../tests/helpers/msw/server';
 import { useAuthStore } from '../../store/authStore';
 import { useTripStore } from '../../store/tripStore';
 import { resetAllStores, seedStore } from '../../../tests/helpers/store';
-import { buildUser, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
+import { buildUser, buildAdmin, buildTrip, buildPackingItem } from '../../../tests/helpers/factories';
 import PackingListPanel, { itemWeight } from './PackingListPanel';
 
 describe('itemWeight (bag total weight calc)', () => {
@@ -34,10 +34,10 @@ beforeEach(() => {
     http.get('/api/trips/:id/packing/category-assignees', () =>
       HttpResponse.json({ assignees: {} })
     ),
-    http.get('/api/admin/bag-tracking', () =>
-      HttpResponse.json({ enabled: false })
+    http.get('/api/addons', () =>
+      HttpResponse.json({ bagTracking: false, addons: [] })
     ),
-    http.get('/api/admin/packing-templates', () =>
+    http.get('/api/trips/:id/packing/templates', () =>
       HttpResponse.json({ templates: [] })
     ),
   );
@@ -381,7 +381,7 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-030: packing template button present when templates available', async () => {
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 1, name: 'Beach Trip', item_count: 5 }] })
       )
     );
@@ -457,8 +457,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-034: bag tracking enabled shows Bags button and bag sidebar', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Carry-on', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -556,8 +556,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-039: bag modal opens when Bags button clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -585,8 +585,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-040: bag sidebar renders BagCard with bag name when enabled and bags exist', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'Backpack', color: '#10b981', weight_limit_grams: 10000, members: [] }] })
@@ -601,26 +601,36 @@ describe('PackingListPanel', () => {
     });
   });
 
-  it('FE-COMP-PACKING-041: save-as-template button present when items exist', async () => {
+  it('FE-COMP-PACKING-041: save-as-template button present for admins when items exist', async () => {
+    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
-    const { container } = render(<PackingListPanel tripId={1} items={items} />);
+    render(<PackingListPanel tripId={1} items={items} />);
 
-    // Save-as-template button uses FolderPlus icon and "Save as template" text
-    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
-    expect(folderPlusBtn).toBeTruthy();
+    // Save-as-template button shows its label "Save as template"
+    const saveBtn = screen.getByText('Save as template').closest('button');
+    expect(saveBtn).toBeTruthy();
 
     // Click to show the name input
-    await user.click(folderPlusBtn!);
+    await user.click(saveBtn!);
 
     // Template name input appears
     expect(await screen.findByPlaceholderText('Template name')).toBeInTheDocument();
   });
 
+  it('FE-COMP-PACKING-041b: save-as-template button hidden for non-admins', () => {
+    // Default seeded user (beforeEach) is a non-admin trip owner with edit rights.
+    const items = [buildPackingItem({ name: 'Sunscreen', category: 'Toiletries' })];
+    render(<PackingListPanel tripId={1} items={items} />);
+
+    // The "Save as template" action must not be available to normal users.
+    expect(screen.queryByText('Save as template')).not.toBeInTheDocument();
+  });
+
   it('FE-COMP-PACKING-042: apply template dropdown opens when template button clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 2, name: 'Summer Packing', item_count: 10 }] })
       )
     );
@@ -658,8 +668,8 @@ describe('PackingListPanel', () => {
 
   it('FE-COMP-PACKING-044: bag item row shows weight input and bag button when bag tracking enabled', async () => {
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -706,6 +716,7 @@ describe('PackingListPanel', () => {
   });
 
   it('FE-COMP-PACKING-046: save-as-template form submission calls saveAsTemplate API', async () => {
+    seedStore(useAuthStore, { user: buildAdmin(), isAuthenticated: true });
     const user = userEvent.setup();
     let savedTemplateName = '';
     server.use(
@@ -714,16 +725,16 @@ describe('PackingListPanel', () => {
         savedTemplateName = String(body.name);
         return HttpResponse.json({ success: true });
       }),
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [] })
       )
     );
     const items = [buildPackingItem({ name: 'Item', category: 'Test' })];
-    const { container } = render(<PackingListPanel tripId={1} items={items} />);
+    render(<PackingListPanel tripId={1} items={items} />);
 
-    // Click the FolderPlus "Save as template" button
-    const folderPlusBtn = container.querySelector('svg.lucide-folder-plus')?.closest('button');
-    await user.click(folderPlusBtn!);
+    // Click the "Save as template" button
+    const saveBtn = screen.getByText('Save as template').closest('button');
+    await user.click(saveBtn!);
 
     // Type template name
     const nameInput = await screen.findByPlaceholderText('Template name');
@@ -736,8 +747,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-047: bag picker in item row opens when clicked with bag tracking enabled', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 3, name: 'Carry-on', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -765,8 +776,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-048: add bag in bag modal opens form when "Add bag" clicked', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Main Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -805,8 +816,8 @@ describe('PackingListPanel', () => {
     let putBody: Record<string, unknown> | null = null;
     const itemId = 120;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [] })
@@ -861,8 +872,8 @@ describe('PackingListPanel', () => {
     const itemId = 130;
     let putBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 7, name: 'Trolley', color: '#10b981', weight_limit_grams: null, members: [] }] })
@@ -930,8 +941,8 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-054: item with assigned bag shows "Unassigned" option in bag picker', async () => {
     const itemId = 140;
     server.use(
-      http.get('/api/admin/bag-tracking', () =>
-        HttpResponse.json({ enabled: true })
+      http.get('/api/addons', () =>
+        HttpResponse.json({ bagTracking: true, addons: [] })
       ),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 5, name: 'MyBag', color: '#ec4899', weight_limit_grams: null, members: [] }] })
@@ -957,7 +968,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-055: apply template button click opens template dropdown and shows template', async () => {
     const user = userEvent.setup();
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 3, name: 'Weekend Pack', item_count: 8 }] })
       )
     );
@@ -1124,7 +1135,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let applyCalled = false;
     server.use(
-      http.get('/api/admin/packing-templates', () =>
+      http.get('/api/trips/:id/packing/templates', () =>
         HttpResponse.json({ templates: [{ id: 5, name: 'Beach Trip', item_count: 12 }] })
       ),
       http.post('/api/trips/1/packing/apply-template/5', () => {
@@ -1177,7 +1188,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       // Start with one bag so the sidebar renders (sidebar requires bags.length > 0)
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 1, name: 'Existing Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
@@ -1207,7 +1218,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let deleteCalled = false;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 9, name: 'Old Bag', color: '#6366f1', weight_limit_grams: null, members: [] }] })
       ),
@@ -1235,7 +1246,7 @@ describe('PackingListPanel', () => {
     const user = userEvent.setup();
     let updateBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 11, name: 'Carry-on', color: '#10b981', weight_limit_grams: null, members: [] }] })
       ),
@@ -1273,7 +1284,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 12, name: 'Day Pack', color: '#ec4899', weight_limit_grams: null, members: [] }] })
       )
@@ -1314,7 +1325,7 @@ describe('PackingListPanel', () => {
           current_user_id: 1,
         })
       ),
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () =>
         HttpResponse.json({ bags: [{ id: 13, name: 'Weekend Bag', color: '#f97316', weight_limit_grams: null, members: [] }] })
       ),
@@ -1352,7 +1363,7 @@ describe('PackingListPanel', () => {
   it('FE-COMP-PACKING-068: inline bag create in item row picker creates bag and assigns it', async () => {
     let createBody: Record<string, unknown> | null = null;
     server.use(
-      http.get('/api/admin/bag-tracking', () => HttpResponse.json({ enabled: true })),
+      http.get('/api/addons', () => HttpResponse.json({ bagTracking: true, addons: [] })),
       http.get('/api/trips/:id/packing/bags', () => HttpResponse.json({ bags: [] })),
       http.post('/api/trips/1/packing/bags', async ({ request }) => {
         createBody = await request.json() as Record<string, unknown>;

client/src/components/Packing/PackingListPanelHeader.tsx

@@ -5,7 +5,7 @@ import type { PackingState } from './usePackingListPanel'
 
 export function PackingHeader(S: PackingState) {
   const {
-    inlineHeader, t, items, abgehakt, fortschritt, canEdit,
+    inlineHeader, t, items, abgehakt, fortschritt, canEdit, isAdmin,
     showSaveTemplate, saveTemplateName, setSaveTemplateName, handleSaveAsTemplate, setShowSaveTemplate,
     setShowImportModal, handleClearChecked, availableTemplates, templateDropdownRef,
     showTemplateDropdown, setShowTemplateDropdown, applyingTemplate, handleApplyTemplate,
@@ -26,7 +26,7 @@ export function PackingHeader(S: PackingState) {
           </div>
         ) : <span />}
         <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
-          {canEdit && items.length > 0 && showSaveTemplate && (
+          {canEdit && isAdmin && items.length > 0 && showSaveTemplate && (
             <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
               <input
                 type="text" autoFocus
@@ -97,7 +97,7 @@ export function PackingHeader(S: PackingState) {
               )}
             </div>
           )}
-          {inlineHeader && canEdit && items.length > 0 && !showSaveTemplate && (
+          {inlineHeader && canEdit && isAdmin && items.length > 0 && !showSaveTemplate && (
             <button onClick={() => setShowSaveTemplate(true)} style={{
               display: 'flex', alignItems: 'center', gap: 5, padding: '5px 11px', borderRadius: 99,
               border: '1px solid var(--border-primary)', fontSize: 12, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit',

client/src/components/Packing/packingListPanel.constants.ts

@@ -45,7 +45,7 @@ export const KAT_COLORS = [
   '#14b8a6', // teal
 ]
 
-export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b']
+export const BAG_COLORS = ['#6366f1', '#ec4899', '#f97316', '#10b981', '#06b6d4', '#8b5cf6', '#ef4444', '#f59e0b', '#3b82f6', '#84cc16', '#d946ef', '#14b8a6', '#f43f5e', '#a855f7', '#eab308', '#64748b']
 
 // A category's first item is seeded with this sentinel because the server
 // rejects empty names. Treat it as a placeholder in the UI.

client/src/components/Packing/usePackingListPanel.ts

@@ -2,9 +2,11 @@ import { useState, useMemo, useRef, useEffect } from 'react'
 import type { ChangeEvent } from 'react'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
+import { useAuthStore } from '../../store/authStore'
 import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
-import { packingApi, tripsApi, adminApi } from '../../api/client'
+import { packingApi, tripsApi } from '../../api/client'
+import { useAddonStore } from '../../store/addonStore'
 import type { PackingItem, PackingBag } from '../../types'
 import { BAG_COLORS } from './packingListPanel.constants'
 import { parseImportLines } from './packingListPanel.helpers'
@@ -46,6 +48,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
   const canEdit = can('packing_edit', trip)
+  const isAdmin = useAuthStore((s) => s.user?.role === 'admin')
   const toast = useToast()
   const { t } = useTranslation()
 
@@ -145,19 +148,24 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
     if (failed) toast.error(t('packing.toast.deleteError'))
   }
 
-  // Bag tracking
-  const [bagTrackingEnabled, setBagTrackingEnabled] = useState(false)
+  // Bag tracking — the global toggle is a packing sub-flag surfaced to every
+  // authenticated user via the addon store (loaded on app start), not the
+  // admin-only endpoint, so non-admin members see weights/bags too.
+  const bagTrackingEnabled = useAddonStore(s => s.bagTracking)
+  const addonsLoaded = useAddonStore(s => s.loaded)
+  const loadAddons = useAddonStore(s => s.loadAddons)
   const [bags, setBags] = useState<PackingBag[]>([])
   const [newBagName, setNewBagName] = useState('')
   const [showAddBag, setShowAddBag] = useState(false)
   const [showBagModal, setShowBagModal] = useState(false)
 
   useEffect(() => {
-    adminApi.getBagTracking().then(d => {
-      setBagTrackingEnabled(d.enabled)
-      if (d.enabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
-    }).catch(() => {})
-  }, [tripId])
+    if (!addonsLoaded) loadAddons()
+  }, [addonsLoaded, loadAddons])
+
+  useEffect(() => {
+    if (bagTrackingEnabled) packingApi.listBags(tripId).then(r => setBags(r.bags || [])).catch(() => {})
+  }, [tripId, bagTrackingEnabled])
 
   const handleCreateBag = async () => {
     if (!newBagName.trim()) return
@@ -234,7 +242,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const templateDropdownRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
-    adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+    packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
   }, [tripId])
 
   useEffect(() => {
@@ -267,7 +275,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
       toast.success(t('packing.templateSaved'))
       setShowSaveTemplate(false)
       setSaveTemplateName('')
-      adminApi.packingTemplates().then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
+      packingApi.listTemplates(tripId).then(d => setAvailableTemplates(d.templates || [])).catch(() => {})
     } catch {
       toast.error(t('common.error'))
     }
@@ -297,7 +305,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
   const font = { fontFamily: "var(--font-system)" }
 
   return {
-    tripId, items, inlineHeader, t, canEdit, font,
+    tripId, items, inlineHeader, t, canEdit, isAdmin, font,
     filter, setFilter, addingCategory, setAddingCategory, newCatName, setNewCatName,
     tripMembers, categoryAssignees, handleSetAssignees, allCategories, gruppiert, abgehakt, fortschritt,
     handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleClearChecked,

client/src/components/Planner/AirTrailImportModal.tsx

@@ -0,0 +1,261 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { useState, useRef, useEffect, useMemo } from 'react'
+import { Plane, X, Check } from 'lucide-react'
+import type { AirtrailFlight, AirtrailImportResult } from '@trek/shared'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { airtrailApi, reservationsApi } from '../../api/client'
+import { useTripStore } from '../../store/tripStore'
+
+interface AirTrailImportModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tripId: number
+  pushUndo?: (label: string, undoFn: () => Promise<void> | void) => void
+}
+
+/** Locale-aware date (e.g. de → 13.06.2026, en-US → 06/13/2026). */
+function fmtDate(d: string | null, locale: string): string {
+  if (!d) return ''
+  try {
+    return new Date(d + 'T00:00:00Z').toLocaleDateString(locale, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      timeZone: 'UTC',
+    })
+  } catch {
+    return d
+  }
+}
+
+export default function AirTrailImportModal({ isOpen, onClose, tripId, pushUndo }: AirTrailImportModalProps) {
+  const { t, locale } = useTranslation()
+  const toast = useToast()
+  const trip = useTripStore(s => s.trip)
+  const reservations = useTripStore(s => s.reservations)
+  const loadReservations = useTripStore(s => s.loadReservations)
+  const mouseDownTarget = useRef<EventTarget | null>(null)
+
+  const [loading, setLoading] = useState(false)
+  const [importing, setImporting] = useState(false)
+  const [error, setError] = useState('')
+  const [flights, setFlights] = useState<AirtrailFlight[]>([])
+  const [selected, setSelected] = useState<Set<string>>(() => new Set())
+
+  // AirTrail flight ids already linked to a reservation in this trip.
+  const importedIds = useMemo(() => {
+    const set = new Set<string>()
+    for (const r of reservations) {
+      if (r.external_source === 'airtrail' && r.external_id) set.add(String(r.external_id))
+    }
+    return set
+  }, [reservations])
+
+  const inRange = (f: AirtrailFlight): boolean =>
+    !!(f.date && trip?.start_date && trip?.end_date && f.date >= trip.start_date && f.date <= trip.end_date)
+
+  useEffect(() => {
+    if (!isOpen) return
+    setError('')
+    setSelected(new Set())
+    setLoading(true)
+    airtrailApi
+      .flights()
+      .then((d: { flights: AirtrailFlight[] }) => {
+        const list = d.flights ?? []
+        setFlights(list)
+        // Pre-select the flights that fall inside the trip and aren't imported yet.
+        const pre = new Set<string>()
+        for (const f of list) if (inRange(f) && !importedIds.has(f.id)) pre.add(f.id)
+        setSelected(pre)
+      })
+      .catch((err: any) => setError(err?.response?.data?.error ?? t('reservations.airtrail.loadError')))
+      .finally(() => setLoading(false))
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen])
+
+  const { during, others } = useMemo(() => {
+    const during: AirtrailFlight[] = []
+    const others: AirtrailFlight[] = []
+    for (const f of flights) (inRange(f) ? during : others).push(f)
+    const byDateDesc = (a: AirtrailFlight, b: AirtrailFlight) => (b.date ?? '').localeCompare(a.date ?? '')
+    return { during: during.sort(byDateDesc), others: others.sort(byDateDesc) }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [flights, trip?.start_date, trip?.end_date])
+
+  const toggle = (id: string) => {
+    setSelected(prev => {
+      const next = new Set(prev)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+
+  const handleClose = () => { onClose() }
+
+  const handleImport = async () => {
+    const ids = [...selected].filter(id => !importedIds.has(id))
+    if (ids.length === 0 || importing) return
+    setImporting(true)
+    setError('')
+    try {
+      const result: AirtrailImportResult = await airtrailApi.import(tripId, ids)
+      await loadReservations(tripId)
+
+      const imported = result.imported ?? []
+      if (imported.length > 0) {
+        pushUndo?.(t('reservations.airtrail.undo'), async () => {
+          const linked = useTripStore.getState().reservations.filter(
+            r => r.external_source === 'airtrail' && r.external_id && imported.includes(String(r.external_id)),
+          )
+          await Promise.all(linked.map(r => reservationsApi.delete(tripId, r.id).catch(() => {})))
+          await loadReservations(tripId)
+        })
+        toast.success(t('reservations.airtrail.imported', { count: imported.length }))
+      }
+
+      const skippedInTrip = (result.skipped ?? []).filter(s => s.reason === 'already-in-trip').length
+      if (skippedInTrip > 0) toast.warning(t('reservations.airtrail.skippedDuplicate', { count: skippedInTrip }))
+      if (imported.length === 0 && skippedInTrip === 0) toast.warning(t('reservations.airtrail.nothingImported'))
+
+      handleClose()
+    } catch (err: any) {
+      setError(err?.response?.data?.error ?? t('reservations.airtrail.importError'))
+    } finally {
+      setImporting(false)
+    }
+  }
+
+  const selectableCount = [...selected].filter(id => !importedIds.has(id)).length
+
+  if (!isOpen) return null
+
+  const renderFlight = (f: AirtrailFlight) => {
+    const already = importedIds.has(f.id)
+    const isSelected = selected.has(f.id)
+    const label = f.flightNumber ? `${f.airline ? `${f.airline} ` : ''}${f.flightNumber}` : `${f.fromCode ?? '?'} → ${f.toCode ?? '?'}`
+    return (
+      <button
+        key={f.id}
+        onClick={() => !already && toggle(f.id)}
+        disabled={already}
+        className={already ? 'bg-surface-tertiary' : isSelected ? 'bg-surface-secondary' : 'bg-transparent'}
+        style={{
+          width: '100%', textAlign: 'left', borderRadius: 10, padding: '10px 12px', marginBottom: 8,
+          border: `1px solid ${isSelected && !already ? 'var(--accent)' : 'var(--border-primary)'}`,
+          opacity: already ? 0.55 : 1, cursor: already ? 'default' : 'pointer',
+          display: 'flex', gap: 10, alignItems: 'center', fontFamily: 'inherit',
+          transition: 'border-color 0.15s, background 0.15s',
+        }}
+      >
+        <span style={{
+          flexShrink: 0, width: 18, height: 18, borderRadius: 5,
+          border: `1.5px solid ${isSelected || already ? 'var(--accent)' : 'var(--border-primary)'}`,
+          background: isSelected || already ? 'var(--accent)' : 'transparent',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          {(isSelected || already) && <Check size={12} color="var(--accent-text)" strokeWidth={3} />}
+        </span>
+        <Plane size={15} color="#3b82f6" style={{ flexShrink: 0 }} />
+        <span style={{ flex: 1, minWidth: 0 }}>
+          <span style={{ display: 'block', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{label}</span>
+          <span style={{ display: 'block', fontSize: 11, color: 'var(--text-muted)' }}>
+            {f.fromCode ?? f.fromName ?? '?'} → {f.toCode ?? f.toName ?? '?'}{f.date ? ` · ${fmtDate(f.date, locale)}` : ''}
+          </span>
+        </span>
+        {already && (
+          <span style={{ flexShrink: 0, fontSize: 10, fontWeight: 600, color: 'var(--text-faint)' }}>
+            {t('reservations.airtrail.alreadyImported')}
+          </span>
+        )}
+      </button>
+    )
+  }
+
+  return ReactDOM.createPortal(
+    <div
+      className="bg-[rgba(0,0,0,0.4)]"
+      style={{ position: 'fixed', inset: 0, zIndex: 99999, display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16 }}
+      onMouseDown={e => { mouseDownTarget.current = e.target }}
+      onClick={e => {
+        if (e.target === e.currentTarget && mouseDownTarget.current === e.currentTarget) handleClose()
+        mouseDownTarget.current = null
+      }}
+    >
+      <div
+        onClick={e => e.stopPropagation()}
+        className="bg-surface-card"
+        style={{ borderRadius: 16, width: '100%', maxWidth: 540, padding: 24, boxShadow: '0 8px 32px rgba(0,0,0,0.2)', fontFamily: 'var(--font-system)', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}
+      >
+        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 14 }}>
+          <Plane size={16} color="#3b82f6" />
+          <div style={{ flex: 1, fontSize: 15, fontWeight: 700, color: 'var(--text-primary)' }}>
+            {t('reservations.airtrail.title')}
+          </div>
+          <button onClick={handleClose} className="bg-transparent text-content-faint" style={{ border: 'none', cursor: 'pointer', padding: 4, borderRadius: 6, display: 'flex', alignItems: 'center' }}>
+            <X size={16} />
+          </button>
+        </div>
+
+        <div style={{ flex: 1, overflowY: 'auto', minHeight: 0 }}>
+          {loading && (
+            <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
+              {t('common.loading')}
+            </div>
+          )}
+
+          {!loading && flights.length === 0 && !error && (
+            <div className="text-content-faint" style={{ fontSize: 13, textAlign: 'center', padding: '24px 0' }}>
+              {t('reservations.airtrail.empty')}
+            </div>
+          )}
+
+          {!loading && during.length > 0 && (
+            <>
+              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-primary)', margin: '2px 0 8px' }}>
+                {t('reservations.airtrail.duringTrip')}
+              </div>
+              {during.map(renderFlight)}
+            </>
+          )}
+
+          {!loading && others.length > 0 && (
+            <>
+              <div style={{ fontSize: 12, fontWeight: 700, color: 'var(--text-faint)', margin: `${during.length > 0 ? 14 : 2}px 0 8px` }}>
+                {t('reservations.airtrail.otherFlights')}
+              </div>
+              {others.map(renderFlight)}
+            </>
+          )}
+
+          {error && (
+            <div className="bg-[rgba(239,68,68,0.08)] text-[#b91c1c]" style={{ border: '1px solid rgba(239,68,68,0.35)', borderRadius: 10, padding: '8px 10px', fontSize: 12, whiteSpace: 'pre-wrap', marginTop: 8 }}>
+              {error}
+            </div>
+          )}
+        </div>
+
+        <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-faint)' }}>
+          <button
+            onClick={handleClose}
+            style={{ padding: '8px 16px', borderRadius: 10, border: '1px solid var(--border-primary)', background: 'none', color: 'var(--text-primary)', fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit' }}
+          >
+            {t('common.cancel')}
+          </button>
+          <button
+            onClick={handleImport}
+            disabled={selectableCount === 0 || importing}
+            className={selectableCount > 0 && !importing ? 'bg-accent text-accent-text' : 'bg-surface-tertiary text-content-faint'}
+            style={{ padding: '8px 16px', borderRadius: 10, border: 'none', fontSize: 13, fontWeight: 500, cursor: selectableCount > 0 && !importing ? 'pointer' : 'default', fontFamily: 'inherit' }}
+          >
+            {importing ? t('common.loading') : t('reservations.airtrail.importCta', { count: selectableCount })}
+          </button>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  )
+}

client/src/components/Planner/DayPlanSidebar.constants.ts

@@ -2,6 +2,7 @@ import {
   FileText, Info, Clock, MapPin, Navigation, Train, Plane, Bus, Car, Ship,
   Coffee, Ticket, Star, Heart, Camera, Flag, Lightbulb, AlertTriangle,
   ShoppingBag, Bookmark, Hotel, Utensils, Users, Sailboat, Bike, CarTaxiFront, Route,
+  Wine, ParkingSquare, Fuel, Footprints, Mountain, Waves, Sun, Umbrella, Music, Landmark, Gift,
 } from 'lucide-react'
 
 export const RES_ICONS = { flight: Plane, hotel: Hotel, restaurant: Utensils, train: Train, car: Car, cruise: Ship, bus: Bus, ferry: Sailboat, bicycle: Bike, taxi: CarTaxiFront, transport_other: Route, event: Ticket, tour: Users, other: FileText }
@@ -27,6 +28,18 @@ export const NOTE_ICONS = [
   { id: 'AlertTriangle', Icon: AlertTriangle },
   { id: 'ShoppingBag', Icon: ShoppingBag },
   { id: 'Bookmark', Icon: Bookmark },
+  { id: 'Utensils', Icon: Utensils },
+  { id: 'Wine', Icon: Wine },
+  { id: 'ParkingSquare', Icon: ParkingSquare },
+  { id: 'Fuel', Icon: Fuel },
+  { id: 'Footprints', Icon: Footprints },
+  { id: 'Mountain', Icon: Mountain },
+  { id: 'Waves', Icon: Waves },
+  { id: 'Sun', Icon: Sun },
+  { id: 'Umbrella', Icon: Umbrella },
+  { id: 'Music', Icon: Music },
+  { id: 'Landmark', Icon: Landmark },
+  { id: 'Gift', Icon: Gift },
 ]
 const NOTE_ICON_MAP = Object.fromEntries(NOTE_ICONS.map(({ id, Icon }) => [id, Icon]))
 export function getNoteIcon(iconId) { return NOTE_ICON_MAP[iconId] || FileText }

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

@@ -982,7 +982,7 @@ describe('DayPlanSidebar', () => {
     }
   })
 
-  it('FE-PLANNER-DAYPLAN-065: note card delete button calls deleteNote', async () => {
+  it('FE-PLANNER-DAYPLAN-065: deleting a note asks for confirmation before calling deleteNote', async () => {
     const user = userEvent.setup()
     const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
     const note = buildDayNote({ id: 55, day_id: 10, text: 'My note' })
@@ -992,6 +992,11 @@ describe('DayPlanSidebar', () => {
     const noteEditBtns = document.querySelectorAll('.note-edit-buttons button')
     if (noteEditBtns.length > 1) {
       await user.click(noteEditBtns[1] as HTMLElement)
+      // Clicking delete opens a confirmation dialog rather than deleting immediately.
+      expect(mockDayNotesState.deleteNote).not.toHaveBeenCalled()
+      expect(screen.getByText('Delete note?')).toBeInTheDocument()
+      // Confirming triggers the actual delete.
+      await user.click(screen.getByRole('button', { name: /^delete$/i }))
       expect(mockDayNotesState.deleteNote).toHaveBeenCalled()
     }
   })
@@ -1703,4 +1708,49 @@ describe('DayPlanSidebar', () => {
     expect(onEditTransport).toHaveBeenCalledWith(res)
     expect(onEditReservation).not.toHaveBeenCalled()
   })
+
+  // ── showRouteToolsWhenExpanded (mobile route tools) ───────────────────────
+
+  it('FE-PLANNER-DAYPLAN-099: showRouteToolsWhenExpanded shows route tools on expanded day without selection', () => {
+    const places = [
+      buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
+      buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
+    ]
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
+        buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places, assignments: assigns, selectedDayId: null, showRouteToolsWhenExpanded: true,
+    })} />)
+    // Days are expanded by default, so route tools must be visible even with no selected day
+    expect(screen.getByRole('button', { name: /optimize/i })).toBeInTheDocument()
+  })
+
+  it('FE-PLANNER-DAYPLAN-100: optimize via showRouteToolsWhenExpanded reorders the expanded day', async () => {
+    const user = userEvent.setup()
+    const onReorder = vi.fn().mockResolvedValue(undefined)
+    const places = [
+      buildPlace({ id: 1, name: 'A', lat: 48.85, lng: 2.35 }),
+      buildPlace({ id: 2, name: 'B', lat: 48.86, lng: 2.36 }),
+      buildPlace({ id: 3, name: 'C', lat: 48.87, lng: 2.37 }),
+    ]
+    const day = buildDay({ id: 10, date: '2025-06-01', title: 'Day 1' })
+    const assigns = {
+      '10': [
+        buildAssignment({ id: 1, day_id: 10, order_index: 0, place: places[0] }),
+        buildAssignment({ id: 2, day_id: 10, order_index: 1, place: places[1] }),
+        buildAssignment({ id: 3, day_id: 10, order_index: 2, place: places[2] }),
+      ],
+    }
+    render(<DayPlanSidebar {...makeDefaultProps({
+      days: [day], places, assignments: assigns, selectedDayId: null, onReorder, showRouteToolsWhenExpanded: true,
+    })} />)
+    const optimizeBtn = screen.getByRole('button', { name: /optimize/i })
+    await user.click(optimizeBtn)
+    await waitFor(() => expect(onReorder).toHaveBeenCalledWith(10, expect.any(Array)))
+  })
 })

client/src/components/Planner/DayPlanSidebar.tsx

@@ -7,6 +7,7 @@ import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLi
 import { assignmentsApi, reservationsApi } from '../../api/client'
 import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
+import ConfirmDialog from '../shared/ConfirmDialog'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
 import Markdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
@@ -17,7 +18,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useTranslation } from '../../i18n'
-import { isDayInAccommodationRange } from '../../utils/dayOrder'
+import { isDayInAccommodationRange, getAccommodationAnchors } from '../../utils/dayOrder'
 import {
   TRANSPORT_TYPES, parseTimeToMinutes, getSpanPhase, getDisplayTimeForDay,
   getTransportForDay as _getTransportForDay, getMergedItems as _getMergedItems,
@@ -50,6 +51,8 @@ interface DayPlanSidebarProps {
   onDayDetail: (day: Day) => void
   accommodations?: Accommodation[]
   onReorder: (dayId: number, orderedIds: number[]) => void
+  onReorderDays?: (orderedIds: number[]) => void
+  onAddDay?: (position?: number) => void
   onUpdateDayTitle: (dayId: number, title: string) => void
   onRouteCalculated: (route: RouteResult | null) => void
   onAssignToDay: (placeId: number, dayId: number, position?: number) => void
@@ -81,6 +84,8 @@ interface DayPlanSidebarProps {
   onAddBookingToAssignment?: (dayId: number, assignmentId: number) => void
   initialScrollTop?: number
   onScrollTopChange?: (top: number) => void
+  /** Mobile: show the route tools footer (Route toggle / Optimize / travel profile) on expanded days, since selecting a day closes the sheet */
+  showRouteToolsWhenExpanded?: boolean
 }
 
 /**
@@ -95,7 +100,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   trip, days, places, categories, assignments,
   selectedDayId, selectedPlaceId, selectedAssignmentId,
   onSelectDay, onPlaceClick, onDayDetail, accommodations = [],
-  onReorder, onUpdateDayTitle, onRouteCalculated,
+  onReorder, onReorderDays, onAddDay, onUpdateDayTitle, onRouteCalculated,
   onAssignToDay, onRemoveAssignment, onEditPlace, onDeletePlace,
   reservations = [],
   visibleConnectionIds = [],
@@ -122,6 +127,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   onAddBookingToAssignment,
   initialScrollTop,
   onScrollTopChange,
+  showRouteToolsWhenExpanded = false,
   } = props
   const toast = useToast()
   const { t, language, locale } = useTranslation()
@@ -170,7 +176,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const [timeConfirm, setTimeConfirm] = useState<{
     dayId: number; fromId: number; time: string;
     // For drag & drop reorder
-    fromType?: string; toType?: string; toId?: number; insertAfter?: boolean;
+    fromType?: string; toType?: string; toId?: number; insertAfter?: boolean; toLegIndex?: number | null;
     // For arrow reorder
     reorderIds?: number[];
   } | null>(null)
@@ -375,14 +381,30 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     if (legsAbortRef.current) legsAbortRef.current.abort()
     if (!selectedDayId || !routeShown) { setRouteLegs({}); return }
     const merged = mergedItemsMap[selectedDayId] || []
+    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
+      const e = (r.endpoints || []).find((x: any) => x.role === role)
+      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
+    }
     const runs: { id: number; lat: number; lng: number }[][] = []
     let cur: { id: number; lat: number; lng: number }[] = []
     for (const it of merged) {
       if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
         cur.push({ id: it.data.id, lat: it.data.place.lat, lng: it.data.place.lng })
       } else if (it.type === 'transport') {
-        if (cur.length >= 2) runs.push(cur)
-        cur = []
+        const r = it.data
+        const from = epLoc(r, 'from'), to = epLoc(r, 'to')
+        if (from || to) {
+          // Located transport: route to its departure point, break the run (the
+          // flight/train itself isn't driven), and let its arrival start the next.
+          if (from) cur.push({ id: r.id, lat: from.lat, lng: from.lng })
+          if (cur.length >= 2) runs.push(cur)
+          cur = []
+          if (to) cur.push({ id: r.id, lat: to.lat, lng: to.lng })
+        } else if (cur.length > 0) {
+          // No location: ignore for routing, but attribute the through-leg to the
+          // booking so its distance/duration shows under it (purely cosmetic).
+          cur[cur.length - 1] = { ...cur[cur.length - 1], id: r.id }
+        }
       }
     }
     if (cur.length >= 2) runs.push(cur)
@@ -451,6 +473,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     _openEditNote(dayId, note)
   }
 
+  // Deleting a note asks for confirmation first — the edit/delete icons sit close together and are
+  // easy to mis-tap on touch devices, where an accidental delete was previously unrecoverable.
+  const [pendingDeleteNote, setPendingDeleteNote] = useState<{ dayId: number; noteId: number } | null>(null)
+
   const deleteNote = async (dayId: number, noteId: number, e?: React.MouseEvent) => {
     e?.stopPropagation()
     await _deleteNote(dayId, noteId)
@@ -466,6 +492,9 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     const assignmentIds: number[] = []
     const noteUpdates: { id: number; sort_order: number }[] = []
     const transportUpdates: { id: number; day_plan_position: number }[] = []
+    // Multi-leg flight legs share a reservation id, so their positions can't live in
+    // the single per-booking slot — collect them per leg, keyed reservationId → legIndex → pos.
+    const legPosUpdates: Record<number, Record<number, number>> = {}
 
     let placeCount = 0
     let i = 0
@@ -486,7 +515,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         group.forEach((g, idx) => {
           const pos = base + (idx + 1) / (group.length + 1)
           if (g.type === 'note') noteUpdates.push({ id: g.data.id, sort_order: pos })
-          else if (g.type === 'transport') transportUpdates.push({ id: g.data.id, day_plan_position: pos })
+          else if (g.type === 'transport') {
+            if (g.data.__leg) ((legPosUpdates[g.data.id] ??= {})[g.data.__leg.index] = pos)
+            else transportUpdates.push({ id: g.data.id, day_plan_position: pos })
+          }
         })
       }
     }
@@ -505,6 +537,30 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
         }))
         setTransportPosVersion(v => v + 1)
       }
+      // Per-leg positions of multi-leg flights live in metadata.legs[i].day_positions
+      // (the single per-booking slot can't hold one position per leg).
+      const legResIds = Object.keys(legPosUpdates)
+      if (legResIds.length) {
+        for (const ridStr of legResIds) {
+          const rid = Number(ridStr)
+          const r = useTripStore.getState().reservations.find(x => x.id === rid)
+          if (!r) continue
+          let parsed: any = {}
+          try { parsed = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {}) } catch { parsed = {} }
+          if (!Array.isArray(parsed.legs)) continue
+          const legs = parsed.legs.map((leg: any, i: number) => {
+            const pos = legPosUpdates[rid][i]
+            return pos == null ? leg : { ...leg, day_positions: { ...(leg.day_positions || {}), [dayId]: pos } }
+          })
+          // Send metadata as an OBJECT (like the form does) — passing a JSON string
+          // here double-encodes it on the server, which wipes metadata.legs on read
+          // and collapses the flight back to a single span.
+          const newMeta = { ...parsed, legs }
+          useTripStore.setState(state => ({ reservations: state.reservations.map(x => (x.id === rid ? { ...x, metadata: newMeta } : x)) }))
+          await tripActions.updateReservation(tripId, rid, { metadata: newMeta })
+        }
+        setTransportPosVersion(v => v + 1)
+      }
       if (assignmentIds.length) await onReorder(dayId, assignmentIds)
       if (transportUpdates.length) {
         onRouteRefresh?.()
@@ -523,8 +579,11 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     } catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }
 
-  const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false) => {
+  const handleMergedDrop = async (dayId, fromType, fromId, toType, toId, insertAfter = false, toLegIndex = null) => {
     const m = getMergedItems(dayId)
+    // Multi-leg flights expose one item per leg sharing the same reservation id;
+    // disambiguate the drop target by leg index so you can drop BETWEEN legs.
+    const matchTo = (i: any) => i.type === toType && i.data.id === toId && (toLegIndex == null || i.data?.__leg?.index === toLegIndex)
 
     // Check if a timed place is being moved → would it break chronological order?
     if (fromType === 'place') {
@@ -532,11 +591,11 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       const fromMinutes = parseTimeToMinutes(fromItem?.data?.place?.place_time)
       if (fromItem && fromMinutes !== null) {
         const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-        const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
+        const toIdx = m.findIndex(matchTo)
         if (fromIdx !== -1 && toIdx !== -1) {
           const simulated = [...m]
           const [moved] = simulated.splice(fromIdx, 1)
-          let insertIdx = simulated.findIndex(i => i.type === toType && i.data.id === toId)
+          let insertIdx = simulated.findIndex(matchTo)
           if (insertIdx === -1) insertIdx = simulated.length
           if (insertAfter) insertIdx += 1
           simulated.splice(insertIdx, 0, moved)
@@ -553,7 +612,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
           if (!isChronological) {
             const placeTime = fromItem.data.place.place_time
             const timeStr = placeTime.includes(':') ? placeTime.substring(0, 5) : placeTime
-            setTimeConfirm({ dayId, fromType, fromId, toType, toId, insertAfter, time: timeStr })
+            setTimeConfirm({ dayId, fromType, fromId, toType, toId, insertAfter, toLegIndex, time: timeStr })
             setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
             return
           }
@@ -563,7 +622,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     // Build new order: remove the dragged item, insert at target position
     const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-    const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
+    const toIdx = m.findIndex(matchTo)
     if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) {
       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null
       return
@@ -571,7 +630,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     const newOrder = [...m]
     const [moved] = newOrder.splice(fromIdx, 1)
-    let adjustedTo = newOrder.findIndex(i => i.type === toType && i.data.id === toId)
+    let adjustedTo = newOrder.findIndex(matchTo)
     if (adjustedTo === -1) adjustedTo = newOrder.length
     if (insertAfter) adjustedTo += 1
     newOrder.splice(adjustedTo, 0, moved)
@@ -585,7 +644,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
   const confirmTimeRemoval = async () => {
     if (!timeConfirm) return
     const saved = { ...timeConfirm }
-    const { dayId, fromId, reorderIds, fromType, toType, toId, insertAfter } = saved
+    const { dayId, fromId, reorderIds, fromType, toType, toId, insertAfter, toLegIndex } = saved
     setTimeConfirm(null)
 
     // Remove time from assignment
@@ -628,13 +687,14 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
 
     // Drag & drop reorder
     if (fromType && toType) {
+      const matchTo = (i: any) => i.type === toType && i.data.id === toId && (toLegIndex == null || i.data?.__leg?.index === toLegIndex)
       const fromIdx = m.findIndex(i => i.type === fromType && i.data.id === fromId)
-      const toIdx = m.findIndex(i => i.type === toType && i.data.id === toId)
+      const toIdx = m.findIndex(matchTo)
       if (fromIdx === -1 || toIdx === -1 || fromIdx === toIdx) return
 
       const newOrder = [...m]
       const [moved] = newOrder.splice(fromIdx, 1)
-      let adjustedTo = newOrder.findIndex(i => i.type === toType && i.data.id === toId)
+      let adjustedTo = newOrder.findIndex(matchTo)
       if (adjustedTo === -1) adjustedTo = newOrder.length
       if (insertAfter) adjustedTo += 1
       newOrder.splice(adjustedTo, 0, moved)
@@ -685,26 +745,34 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     pushUndo?.(t('undo.lock'), () => { setLockedIds(prevLocked) })
   }
 
-  const handleOptimize = async () => {
-    if (!selectedDayId) return
-    const da = getDayAssignments(selectedDayId)
+  const handleOptimize = async (dayId: number | null = selectedDayId) => {
+    if (!dayId) return
+    const da = getDayAssignments(dayId)
     if (da.length < 3) return
 
     const prevIds = da.map(a => a.id)
 
-    // Separate locked (stay at their index) and unlocked assignments
+    // Separate fixed (stay at their index) and movable assignments. A place is
+    // fixed if it's locked OR has a set time — timed places are anchored by their
+    // time, so the optimizer must not reshuffle them.
     const locked = new Map() // index -> assignment
     const unlocked = []
     da.forEach((a, i) => {
-      if (lockedIds.has(a.id)) locked.set(i, a)
+      if (lockedIds.has(a.id) || a.place?.place_time) locked.set(i, a)
       else unlocked.push(a)
     })
 
     // Optimize only unlocked assignments (work on assignments, not places)
     const unlockedWithCoords = unlocked.filter(a => a.place?.lat && a.place?.lng)
     const unlockedNoCoords = unlocked.filter(a => !a.place?.lat || !a.place?.lng)
+    // Anchor the route on the day's accommodation (when enabled): a loop out from and back to the
+    // hotel, or — on a transfer day — a run from the hotel you leave to the one you arrive at.
+    const day = days.find(d => d.id === dayId)
+    const anchors = day && useSettingsStore.getState().settings.optimize_from_accommodation !== false
+      ? getAccommodationAnchors(day, days, accommodations)
+      : {}
     const optimizedAssignments = unlockedWithCoords.length >= 2
-      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id }))).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
+      ? optimizeRoute(unlockedWithCoords.map(a => ({ ...a.place, _assignmentId: a.id })), anchors).map(p => unlockedWithCoords.find(a => a.id === p._assignmentId)).filter(Boolean)
       : unlockedWithCoords
     const optimizedQueue = [...optimizedAssignments, ...unlockedNoCoords]
 
@@ -716,9 +784,10 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
       if (!result[i]) result[i] = optimizedQueue[qi++]
     }
 
-    await onReorder(selectedDayId, result.map(a => a.id))
-    toast.success(t('dayplan.toast.routeOptimized'))
-    const capturedDayId = selectedDayId
+    await onReorder(dayId, result.map(a => a.id))
+    const usedHotel = !!(anchors.start || anchors.end)
+    toast.success(usedHotel ? t('dayplan.toast.routeOptimizedFromHotel') : t('dayplan.toast.routeOptimized'))
+    const capturedDayId = dayId
     pushUndo?.(t('undo.optimize'), async () => {
       await tripActions.reorderAssignments(tripId, capturedDayId, prevIds)
     })
@@ -802,6 +871,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onDayDetail,
     accommodations,
     onReorder,
+    onReorderDays,
+    onAddDay,
     onUpdateDayTitle,
     onRouteCalculated,
     onAssignToDay,
@@ -833,6 +904,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
+    showRouteToolsWhenExpanded,
     toast,
     t,
     language,
@@ -851,6 +923,8 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
     cancelNote,
     saveNote,
     deleteNote,
+    pendingDeleteNote,
+    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -944,6 +1018,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onDayDetail,
     accommodations,
     onReorder,
+    onReorderDays,
+    onAddDay,
     onUpdateDayTitle,
     onRouteCalculated,
     onAssignToDay,
@@ -975,6 +1051,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     onAddBookingToAssignment,
     initialScrollTop,
     onScrollTopChange,
+    showRouteToolsWhenExpanded,
     toast,
     t,
     language,
@@ -993,6 +1070,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
     cancelNote,
     saveNote,
     deleteNote,
+    pendingDeleteNote,
+    setPendingDeleteNote,
     moveNote,
     expandedDays,
     setExpandedDays,
@@ -1093,6 +1172,9 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         undoHover={undoHover}
         setUndoHover={setUndoHover}
         lastActionLabel={lastActionLabel}
+        canEditDays={canEditDays}
+        onReorderDays={onReorderDays}
+        onAddDay={onAddDay}
       />
 
       {/* Tagesliste */}
@@ -1295,6 +1377,8 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                       const isAfter = dropTargetRef.current.startsWith('transport-after-')
                       const parts = dropTargetRef.current.replace('transport-after-', '').replace('transport-', '').split('-')
                       const transportId = Number(parts[0])
+                      const legPart = parts.find(p => /^leg\d+$/.test(p))
+                      const toLegIndex = legPart ? Number(legPart.slice(3)) : null
 
                       if (placeId) {
                         onAssignToDay?.(parseInt(placeId), day.id)
@@ -1302,15 +1386,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                         const r = reservations.find(x => x.id === Number(fromReservationId))
                         if (r) { const update = computeMultiDayMove(r, day.id, phase); tripActions.updateReservation(tripId, r.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                       } else if (fromReservationId) {
-                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter)
+                        handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', transportId, isAfter, toLegIndex)
                       } else if (assignmentId && fromDayId !== day.id) {
                         tripActions.moveAssignment(tripId, Number(assignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (assignmentId) {
-                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter)
+                        handleMergedDrop(day.id, 'place', Number(assignmentId), 'transport', transportId, isAfter, toLegIndex)
                       } else if (noteId && fromDayId !== day.id) {
                         tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                       } else if (noteId) {
-                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter)
+                        handleMergedDrop(day.id, 'note', Number(noteId), 'transport', transportId, isAfter, toLegIndex)
                       }
                       setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                       return
@@ -1356,9 +1440,10 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                     </div>
                   ) : (
                     merged.map((item, idx) => {
-                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
+                      const legSuffix = item.data?.__leg ? `-leg${item.data.__leg.index}` : ''
+                      const itemKey = item.type === 'transport' ? `transport-${item.data.id}${legSuffix}-${day.id}` : (item.type === 'place' ? `place-${item.data.id}` : `note-${item.data.id}`)
                       const showDropLine = (!!draggingId || !!dropTargetKey) && dropTargetKey === itemKey
-                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}-${day.id}`
+                      const showDropLineAfter = item.type === 'transport' && (!!draggingId || !!dropTargetKey) && dropTargetKey === `transport-after-${item.data.id}${legSuffix}-${day.id}`
 
                       if (item.type === 'place') {
                         const assignment = item.data
@@ -1706,7 +1791,13 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
 
                         // Subtitle aus Metadaten zusammensetzen
                         let subtitle = ''
-                        if (res.type === 'flight') {
+                        if (res.__leg) {
+                          // One leg of a multi-leg flight — show this segment's own route.
+                          const parts = [res.__leg.airline, res.__leg.flight_number].filter(Boolean)
+                          if (res.__leg.from || res.__leg.to)
+                            parts.push([res.__leg.from, res.__leg.to].filter(Boolean).join(' → '))
+                          subtitle = parts.join(' · ')
+                        } else if (res.type === 'flight') {
                           const parts = [meta.airline, meta.flight_number].filter(Boolean)
                           if (meta.departure_airport || meta.arrival_airport)
                             parts.push([meta.departure_airport, meta.arrival_airport].filter(Boolean).join(' → '))
@@ -1715,28 +1806,32 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           subtitle = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : '', meta.seat ? `Sitz ${meta.seat}` : ''].filter(Boolean).join(' · ')
                         }
 
-                        // Multi-day span phase
-                        const spanLabel = getSpanLabel(res, spanPhase)
+                        // Multi-day span phase (single-leg / non-flight only — a
+                        // multi-leg flight is shown as one row per leg, see below).
+                        const spanLabel = res.__leg ? null : getSpanLabel(res, spanPhase)
                         const displayTime = getDisplayTimeForDay(res, day.id)
+                        const legKey = res.__leg ? `leg${res.__leg.index}` : 'x'
 
                         return (
-                          <React.Fragment key={`transport-${res.id}-${day.id}`}>
+                          <React.Fragment key={`transport-${res.id}-${legKey}-${day.id}`}>
                           <div
                             onClick={() => {
                               if (!canEditDays) return
-                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(res)
-                              else onEditReservation?.(res)
+                              const target = reservations.find(x => x.id === res.id) ?? res
+                              if (TRANSPORT_TYPES.has(res.type)) onEditTransport?.(target)
+                              else onEditReservation?.(target)
                             }}
                             onDragOver={e => {
                               e.preventDefault(); e.stopPropagation()
                               const rect = e.currentTarget.getBoundingClientRect()
                               const inBottom = e.clientY > rect.top + rect.height / 2
-                              const key = inBottom ? `transport-after-${res.id}-${day.id}` : `transport-${res.id}-${day.id}`
+                              const ls = res.__leg ? `-leg${res.__leg.index}` : ''
+                              const key = inBottom ? `transport-after-${res.id}${ls}-${day.id}` : `transport-${res.id}${ls}-${day.id}`
                               if (dropTargetRef.current !== key) setDropTargetKey(key)
                             }}
-                            draggable={canEditDays && spanPhase !== 'middle'}
+                            draggable={canEditDays && spanPhase !== 'middle' && !res.__leg}
                             onDragStart={e => {
-                              if (!canEditDays || spanPhase === 'middle') { e.preventDefault(); return }
+                              if (!canEditDays || spanPhase === 'middle' || res.__leg) { e.preventDefault(); return }
                               // setData is required for the drag to start reliably (Firefox) and
                               // matches how place/note items initiate their drag.
                               e.dataTransfer.setData('reservationId', String(res.id))
@@ -1757,15 +1852,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 const r2 = reservations.find(x => x.id === Number(fromReservationId))
                                 if (r2) { const update = computeMultiDayMove(r2, day.id, phase); tripActions.updateReservation(tripId, r2.id, update).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError'))) }
                               } else if (fromReservationId) {
-                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter)
+                                handleMergedDrop(day.id, 'transport', Number(fromReservationId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
                               } else if (fromAssignmentId && fromDayId !== day.id) {
                                 tripActions.moveAssignment(tripId, Number(fromAssignmentId), fromDayId, day.id).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (fromAssignmentId) {
-                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter)
+                                handleMergedDrop(day.id, 'place', Number(fromAssignmentId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
                               } else if (noteId && fromDayId !== day.id) {
                                 tripActions.moveDayNote(tripId, fromDayId, day.id, Number(noteId)).catch((err: unknown) => toast.error(err instanceof Error ? err.message : t('common.unknownError')))
                               } else if (noteId) {
-                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter)
+                                handleMergedDrop(day.id, 'note', Number(noteId), 'transport', res.id, insertAfter, res.__leg?.index ?? null)
                               }
                               setDraggingId(null); setDropTargetKey(null); dragDataRef.current = null; window.__dragData = null
                             }}
@@ -1785,7 +1880,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               opacity: draggingId === res.id ? 0.4 : spanPhase === 'middle' ? 0.65 : 1,
                             }}
                           >
-                            {canEditDays && spanPhase !== 'middle' && (
+                            {canEditDays && spanPhase !== 'middle' && !res.__leg && (
                               <div className="dp-grip" style={{ flexShrink: 0, color: 'var(--text-faint)', display: 'flex', alignItems: 'center', opacity: 0.3, transition: 'opacity 0.15s', cursor: 'grab' }}>
                                 <GripVertical size={13} strokeWidth={1.8} />
                               </div>
@@ -1830,7 +1925,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                                 </div>
                               )}
                             </div>
-                            {onToggleConnection && (res.endpoints || []).length >= 2 && (() => {
+                            {onToggleConnection && (!res.__leg || res.__leg.index === 0) && (res.endpoints || []).length >= 2 && (() => {
                               const active = visibleConnectionIds.includes(res.id)
                               return (
                                 <button
@@ -1854,6 +1949,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                               )
                             })()}
                           </div>
+                          {routeLegs[res.id] && <RouteConnector seg={routeLegs[res.id]} profile={routeProfile} />}
                           </React.Fragment>
                         )
                       }
@@ -1908,7 +2004,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           onContextMenu={canEditDays ? e => ctxMenu.open(e, [
                             { label: t('common.edit'), icon: Pencil, onClick: () => openEditNote(day.id, note) },
                             { divider: true },
-                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => deleteNote(day.id, note.id) },
+                            { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => setPendingDeleteNote({ dayId: day.id, noteId: note.id }) },
                           ]) : undefined}
                           onMouseEnter={e => {
                             const grip = e.currentTarget.querySelector('.dp-grip') as HTMLElement | null
@@ -1950,7 +2046,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           </div>
                           {canEditDays && <div className="note-edit-buttons" style={{ display: 'flex', gap: 1, flexShrink: 0, opacity: 0, transition: 'opacity 0.15s' }}>
                             <button onClick={e => openEditNote(day.id, note, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Pencil size={10} /></button>
-                            <button onClick={e => deleteNote(day.id, note.id, e)} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
+                            <button onClick={e => { e.stopPropagation(); setPendingDeleteNote({ dayId: day.id, noteId: note.id }) }} className="text-content-faint" style={{ background: 'none', border: 'none', padding: 2, cursor: 'pointer', display: 'flex' }}><Trash2 size={10} /></button>
                           </div>}
                           {canEditDays && <div className="reorder-buttons" style={{ flexShrink: 0, display: 'flex', gap: 1, transition: 'opacity 0.15s' }}>
                             <button onClick={e => { e.stopPropagation(); moveNote(day.id, note.id, 'up') }} disabled={noteIdx === 0} className={noteIdx === 0 ? 'text-[var(--border-primary)]' : 'text-content-faint'} style={{ background: 'none', border: 'none', padding: '1px 2px', cursor: noteIdx === 0 ? 'default' : 'pointer', display: 'flex', lineHeight: 1 }}><ChevronUp size={12} strokeWidth={2} /></button>
@@ -2005,7 +2101,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                   </div>
 
                   {/* Routen-Werkzeuge (ausgewählter Tag, 2+ Orte) */}
-                  {isSelected && getDayAssignments(day.id).length >= 2 && (
+                  {(isSelected || (showRouteToolsWhenExpanded && isExpanded)) && getDayAssignments(day.id).length >= 2 && (
                     <div style={{ padding: '10px 16px 12px', borderTop: '1px solid var(--border-faint)', display: 'flex', flexDirection: 'column', gap: 7 }}>
                       <div style={{ display: 'flex', gap: 6, alignItems: 'stretch' }}>
                         <button
@@ -2021,7 +2117,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           <RouteIcon size={12} strokeWidth={2} />
                           {t('dayplan.route')}
                         </button>
-                        <button onClick={handleOptimize} className="bg-surface-hover text-content-secondary" style={{
+                        <button onClick={() => handleOptimize(day.id)} className="bg-surface-hover text-content-secondary" style={{
                           flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5,
                           padding: '6px 0', fontSize: 11, fontWeight: 500, borderRadius: 8, border: 'none',
                           cursor: 'pointer', fontFamily: 'inherit',
@@ -2050,7 +2146,7 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                           })}
                         </div>
                       </div>
-                      {routeInfo && (
+                      {isSelected && routeInfo && (
                         <div className="text-content-secondary bg-surface-hover" style={{ display: 'flex', justifyContent: 'center', gap: 12, fontSize: 12, borderRadius: 8, padding: '5px 10px' }}>
                           <span>{routeInfo.distance}</span>
                           <span className="text-content-faint">·</span>
@@ -2093,6 +2189,15 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
         t={t}
       />
 
+      {/* Confirm: delete a day note — guards against accidental taps on touch devices */}
+      <ConfirmDialog
+        isOpen={!!pendingDeleteNote}
+        onClose={() => setPendingDeleteNote(null)}
+        onConfirm={() => { if (pendingDeleteNote) deleteNote(pendingDeleteNote.dayId, pendingDeleteNote.noteId) }}
+        title={t('dayplan.confirmDeleteNoteTitle')}
+        message={t('dayplan.confirmDeleteNoteBody')}
+      />
+
       {/* Transport-Detail-Modal */}
       <DayPlanSidebarTransportDetailModal
         transportDetail={transportDetail}

client/src/components/Planner/DayPlanSidebarNoteModal.tsx

@@ -58,7 +58,7 @@ export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cance
             />
             <textarea
               value={ui.time}
-              maxLength={150}
+              maxLength={250}
               rows={3}
               onChange={e => setNoteUi(prev => ({ ...prev, [dayId]: { ...prev[dayId], time: e.target.value } }))}
               onKeyDown={e => { if (e.key === 'Escape') cancelNote(Number(dayId)) }}
@@ -66,7 +66,7 @@ export function DayPlanSidebarNoteModal({ noteUi, setNoteUi, noteInputRef, cance
               className="text-content"
               style={{ fontSize: 12, border: '1px solid var(--border-primary)', borderRadius: 8, padding: '7px 10px', fontFamily: 'inherit', outline: 'none', width: '100%', boxSizing: 'border-box', resize: 'none', lineHeight: 1.4 }}
             />
-            <div className={(ui.time?.length || 0) >= 140 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/150</div>
+            <div className={(ui.time?.length || 0) >= 240 ? 'text-[#d97706]' : 'text-content-faint'} style={{ textAlign: 'right', fontSize: 11, marginTop: -2 }}>{ui.time?.length || 0}/250</div>
             <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
               <button onClick={() => cancelNote(Number(dayId))} className="text-content-muted" style={{ fontSize: 12, background: 'none', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '6px 14px', cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
               <button onClick={() => saveNote(Number(dayId))} disabled={!ui.text?.trim()} className={!ui.text?.trim() ? 'bg-[var(--border-primary)] text-content-faint' : 'bg-accent text-accent-text'} style={{ fontSize: 12, border: 'none', borderRadius: 8, padding: '6px 16px', cursor: !ui.text?.trim() ? 'not-allowed' : 'pointer', fontWeight: 600, fontFamily: 'inherit', transition: 'background 0.15s, color 0.15s' }}>

client/src/components/Planner/DayPlanSidebarToolbar.tsx

@@ -1,5 +1,7 @@
-import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2 } from 'lucide-react'
+import { useState } from 'react'
+import { ChevronsDownUp, ChevronsUpDown, FileDown, Undo2, ArrowUpDown } from 'lucide-react'
 import { downloadTripPDF } from '../PDF/TripPDF'
+import { DayReorderPopup } from './DayReorderPopup'
 import Tooltip from '../shared/Tooltip'
 import { useToast } from '../shared/Toast'
 import type { Trip, Day, Place, Category, AssignmentsMap, Reservation, DayNote } from '../../types'
@@ -27,13 +29,18 @@ interface DayPlanSidebarToolbarProps {
   undoHover: boolean
   setUndoHover: (v: boolean) => void
   lastActionLabel: string | null
+  canEditDays?: boolean
+  onReorderDays?: (orderedIds: number[]) => void
+  onAddDay?: (position?: number) => void
 }
 
 export function DayPlanSidebarToolbar({
   tripId, trip, days, places, categories, assignments, reservations, dayNotes,
   t, locale, toast, pdfHover, setPdfHover, icsHover, setIcsHover,
   expandedDays, setExpandedDays, onUndo, canUndo, undoHover, setUndoHover, lastActionLabel,
+  canEditDays, onReorderDays, onAddDay,
 }: DayPlanSidebarToolbarProps) {
+  const [reorderOpen, setReorderOpen] = useState(false)
   return (
     <div className="border-b border-edge-faint" style={{ padding: '12px 16px', flexShrink: 0 }}>
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
@@ -197,6 +204,38 @@ export function DayPlanSidebarToolbar({
             )}
           </div>
         )}
+        {canEditDays && onReorderDays && onAddDay && days.length > 0 && (
+          <div style={{ position: 'relative', flexShrink: 0 }}>
+            <Tooltip label={t('dayplan.reorderDays')} placement="bottom">
+              <button
+                onClick={() => setReorderOpen(v => !v)}
+                aria-label={t('dayplan.reorderDays')}
+                aria-pressed={reorderOpen}
+                style={{
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  width: 30, height: 30, borderRadius: 8,
+                  border: '1px solid var(--border-primary)',
+                  background: reorderOpen ? 'var(--bg-hover)' : 'none',
+                  color: 'var(--text-primary)', cursor: 'pointer', fontFamily: 'inherit', padding: 0,
+                  transition: 'color 0.15s, border-color 0.15s, background 0.15s',
+                }}
+                onMouseEnter={e => { if (!reorderOpen) e.currentTarget.style.background = 'var(--bg-hover)' }}
+                onMouseLeave={e => { if (!reorderOpen) e.currentTarget.style.background = 'transparent' }}
+              >
+                <ArrowUpDown size={14} strokeWidth={2} />
+              </button>
+            </Tooltip>
+            <DayReorderPopup
+              isOpen={reorderOpen}
+              days={days}
+              t={t}
+              locale={locale}
+              onReorder={onReorderDays}
+              onAddDay={() => onAddDay()}
+              onClose={() => setReorderOpen(false)}
+            />
+          </div>
+        )}
       </div>
     </div>
   )

client/src/components/Planner/DayReorderPopup.tsx

@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { GripVertical, ArrowUp, ArrowDown, Plus } from 'lucide-react'
+import Modal from '../shared/Modal'
+import type { Day } from '../../types'
+
+interface DayReorderPopupProps {
+  isOpen: boolean
+  days: Day[]
+  t: (key: string, params?: Record<string, any>) => string
+  locale: string
+  onReorder: (orderedIds: number[]) => void
+  onAddDay: () => void
+  onClose: () => void
+}
+
+/**
+ * Modal for moving whole days around: drag a row by its grip or use the up/down
+ * arrows, and add a day at the end. Day headers stay untouched — this is the
+ * single surface for ordering. Reorders are applied optimistically by the store,
+ * so the list reflects each move immediately.
+ */
+export function DayReorderPopup({ isOpen, days, t, locale, onReorder, onAddDay, onClose }: DayReorderPopupProps) {
+  const [dragIndex, setDragIndex] = useState<number | null>(null)
+  const [overIndex, setOverIndex] = useState<number | null>(null)
+
+  const ordered = [...days].sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0))
+
+  const label = (day: Day, index: number) => {
+    if (day.title) return day.title
+    if (day.date) {
+      const d = new Date(day.date + 'T00:00:00')
+      return d.toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short' })
+    }
+    return t('dayplan.dayN', { n: index + 1 })
+  }
+
+  const move = (from: number, to: number) => {
+    if (to < 0 || to >= ordered.length || from === to) return
+    const ids = ordered.map(d => d.id)
+    const [moved] = ids.splice(from, 1)
+    ids.splice(to, 0, moved)
+    onReorder(ids)
+  }
+
+  const cellBtn = {
+    display: 'grid', placeItems: 'center', width: 28, height: 28,
+    border: '1px solid var(--border-faint)', borderRadius: 7,
+    background: 'none', cursor: 'pointer', color: 'var(--text-muted)', padding: 0,
+  } as const
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={t('dayplan.reorderTitle')}
+      size="md"
+      footer={
+        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12 }}>
+          <button
+            onClick={onClose}
+            style={{
+              padding: '8px 16px', borderRadius: 8, fontSize: 13, fontWeight: 500,
+              border: '1px solid var(--border-primary)', background: 'none',
+              color: 'var(--text-muted)', cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            {t('common.close')}
+          </button>
+          <button
+            onClick={onAddDay}
+            className="bg-accent text-accent-text"
+            style={{
+              display: 'flex', alignItems: 'center', gap: 6, padding: '8px 16px',
+              borderRadius: 8, border: 'none', fontSize: 13, fontWeight: 500,
+              cursor: 'pointer', fontFamily: 'inherit',
+            }}
+          >
+            <Plus size={15} strokeWidth={2} />
+            {t('dayplan.addDay')}
+          </button>
+        </div>
+      }
+    >
+      <p style={{ margin: '0 0 14px', fontSize: 12.5, color: 'var(--text-faint)', lineHeight: 1.4 }}>
+        {t('dayplan.reorderHint')}
+      </p>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {ordered.map((day, index) => (
+          <div
+            key={day.id}
+            draggable
+            onDragStart={() => setDragIndex(index)}
+            onDragEnd={() => { setDragIndex(null); setOverIndex(null) }}
+            onDragOver={e => { e.preventDefault(); if (overIndex !== index) setOverIndex(index) }}
+            onDrop={e => {
+              e.preventDefault()
+              if (dragIndex !== null && dragIndex !== index) move(dragIndex, index)
+              setDragIndex(null); setOverIndex(null)
+            }}
+            style={{
+              display: 'flex', alignItems: 'center', gap: 10, padding: '8px 10px',
+              borderRadius: 9,
+              border: '1px solid var(--border-faint)',
+              background: overIndex === index && dragIndex !== null && dragIndex !== index ? 'var(--bg-hover)' : 'var(--bg-card, white)',
+              opacity: dragIndex === index ? 0.5 : 1,
+              outline: overIndex === index && dragIndex !== null && dragIndex !== index ? '2px dashed var(--border-primary)' : 'none',
+              outlineOffset: -2,
+            }}
+          >
+            <GripVertical size={15} strokeWidth={1.8} style={{ cursor: 'grab', color: 'var(--text-faint)', flexShrink: 0 }} />
+            <span style={{
+              flexShrink: 0, width: 24, height: 24, borderRadius: '50%',
+              background: 'var(--bg-hover)', color: 'var(--text-muted)',
+              display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 700,
+            }}>
+              {index + 1}
+            </span>
+            <span style={{ flex: 1, minWidth: 0, fontSize: 13.5, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+              {label(day, index)}
+            </span>
+            <button
+              onClick={() => move(index, index - 1)}
+              disabled={index === 0}
+              aria-label={t('dayplan.moveUp')}
+              style={{ ...cellBtn, opacity: index === 0 ? 0.35 : 1, cursor: index === 0 ? 'default' : 'pointer' }}
+            >
+              <ArrowUp size={14} strokeWidth={2} />
+            </button>
+            <button
+              onClick={() => move(index, index + 1)}
+              disabled={index === ordered.length - 1}
+              aria-label={t('dayplan.moveDown')}
+              style={{ ...cellBtn, opacity: index === ordered.length - 1 ? 0.35 : 1, cursor: index === ordered.length - 1 ? 'default' : 'pointer' }}
+            >
+              <ArrowDown size={14} strokeWidth={2} />
+            </button>
+          </div>
+        ))}
+      </div>
+    </Modal>
+  )
+}

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

@@ -270,6 +270,18 @@ describe('PlaceFormModal', () => {
     expect(screen.getByText(/No category/i)).toBeInTheDocument();
   });
 
+  it('FE-PLANNER-PLACEFORM-023b: editing a place shows its assigned category, not the placeholder (#1134)', () => {
+    // Regression: form.category_id is a string but the option values were numbers,
+    // so CustomSelect's strict-equality match failed and the trigger fell back to
+    // "No category". With string option values the chosen category renders.
+    const cat = buildCategory({ name: 'Museums' });
+    const place = buildPlace({ name: 'Louvre', category_id: cat.id });
+    render(<PlaceFormModal {...defaultProps} place={place} categories={[cat]} />);
+    // Dropdown is closed, so the only place the category name can appear is the trigger.
+    expect(screen.getByText('Museums')).toBeInTheDocument();
+    expect(screen.queryByText(/No category/i)).not.toBeInTheDocument();
+  });
+
   it('FE-PLANNER-PLACEFORM-024: onCategoryCreated is called when creating a category', async () => {
     const onCategoryCreated = vi.fn().mockResolvedValue({ id: 99, name: 'Beaches', color: '#6366f1', icon: 'MapPin' });
     // Directly invoke handleCreateCategory by setting showNewCategory via the category name input

client/src/components/Planner/PlaceFormModal.tsx

@@ -27,7 +27,7 @@ interface PlaceFormModalProps {
   onClose: () => void
   onSave: (data: PlaceSubmitData, files?: File[]) => Promise<void> | void
   place: Place | null
-  prefillCoords?: { lat: number; lng: number; name?: string; address?: string } | null
+  prefillCoords?: { lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string } | null
   tripId: number
   categories: Category[]
   onCategoryCreated: (category: { name: string; color?: string; icon?: string }) => Promise<Category> | undefined
@@ -39,6 +39,31 @@ interface PlaceFormModalProps {
 /** Place create/edit form state: maps search + Google-URL resolve + autocomplete,
  * category creation, file attachments and submit. Keeps PlaceFormModal a thin
  * render over the form fields. */
+
+// #1152: a manually-added place is treated as a likely duplicate of an existing
+// trip place if it shares the Google Place ID, the (case-insensitive) name, or
+// near-identical coordinates (~11 m). Mirrors the server-side import dedup.
+const DUP_COORD_TOLERANCE = 0.0001
+function findDuplicatePlace(
+  form: PlaceFormData,
+  places: { name?: string | null; lat?: number | null; lng?: number | null; google_place_id?: string | null }[],
+): { name?: string | null } | null {
+  const name = (form.name || '').trim().toLowerCase()
+  const gid = (form.google_place_id || '').trim()
+  const lat = form.lat ? parseFloat(form.lat) : null
+  const lng = form.lng ? parseFloat(form.lng) : null
+  for (const p of places || []) {
+    if (gid && p.google_place_id && p.google_place_id === gid) return p
+    if (name && p.name && p.name.trim().toLowerCase() === name) return p
+    if (
+      lat != null && lng != null && p.lat != null && p.lng != null &&
+      Math.abs(Number(p.lat) - lat) <= DUP_COORD_TOLERANCE &&
+      Math.abs(Number(p.lng) - lng) <= DUP_COORD_TOLERANCE
+    ) return p
+  }
+  return null
+}
+
 function usePlaceFormModal(props: PlaceFormModalProps) {
   const {
   isOpen, onClose, onSave, place, prefillCoords, tripId, categories,
@@ -51,6 +76,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
   const [newCategoryName, setNewCategoryName] = useState('')
   const [showNewCategory, setShowNewCategory] = useState(false)
   const [isSaving, setIsSaving] = useState(false)
+  const [duplicateWarning, setDuplicateWarning] = useState<string | null>(null)
   const [pendingFiles, setPendingFiles] = useState([])
   const fileRef = useRef(null)
   const [acSuggestions, setAcSuggestions] = useState<{ placeId: string; mainText: string; secondaryText: string }[]>([])
@@ -86,11 +112,15 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
         lng: String(prefillCoords.lng),
         name: prefillCoords.name || '',
         address: prefillCoords.address || '',
+        website: prefillCoords.website || '',
+        phone: prefillCoords.phone || '',
+        osm_id: prefillCoords.osm_id,
       })
     } else {
       setForm(DEFAULT_FORM)
     }
     setPendingFiles([])
+    setDuplicateWarning(null)
   }, [place, prefillCoords, isOpen])
 
   // Derive location bias bounding box from the trip's existing places
@@ -306,6 +336,17 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
       toast.error(t('places.nameRequired'))
       return
     }
+    // #1152: only for new places, and only on the first attempt — a second click
+    // (with the warning already showing) is the explicit "add anyway" confirmation.
+    if (!place && !duplicateWarning) {
+      const dup = findDuplicatePlace(form, places)
+      if (dup) {
+        const dupName = dup.name || form.name
+        setDuplicateWarning(dupName)
+        toast.warning(t('places.duplicateExists', { name: dupName }))
+        return
+      }
+    }
     setIsSaving(true)
     try {
       await onSave({
@@ -378,6 +419,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
     handlePaste,
     hasTimeError,
     handleSubmit,
+    duplicateWarning,
   }
 }
 
@@ -438,6 +480,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
     handlePaste,
     hasTimeError,
     handleSubmit,
+    duplicateWarning,
   } = S
   return (
     <Modal
@@ -460,7 +503,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
             disabled={isSaving || hasTimeError}
             className="px-6 py-2 bg-slate-900 text-white text-sm rounded-lg hover:bg-slate-700 disabled:opacity-60 font-medium"
           >
-            {isSaving ? t('common.saving') : place ? t('common.update') : t('common.add')}
+            {isSaving ? t('common.saving') : place ? t('common.update') : duplicateWarning ? t('places.addAnyway') : t('common.add')}
           </button>
         </div>
       }
@@ -636,7 +679,10 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
                 options={[
                   { value: '', label: t('places.noCategory') },
                   ...(categories || []).map(c => ({
-                    value: c.id,
+                    // form.category_id is a string; CustomSelect matches options by
+                    // strict equality, so the option value must be a string too —
+                    // otherwise the chosen category never renders in the trigger.
+                    value: String(c.id),
                     label: c.name,
                   })),
                 ]}

client/src/components/Planner/PlacesSidebarListImportModal.tsx

@@ -1,10 +1,12 @@
 import ReactDOM from 'react-dom'
+import ToggleSwitch from '../Settings/ToggleSwitch'
 import type { SidebarState } from './usePlacesSidebar'
 
 export function ListImportModal(S: SidebarState) {
   const {
     setListImportOpen, setListImportUrl, t, hasMultipleListImportProviders, availableListImportProviders,
     listImportProvider, setListImportProvider, listImportUrl, listImportLoading, handleListImport,
+    listImportEnrich, setListImportEnrich, canEnrichImport,
   } = S
   return ReactDOM.createPortal(
     <div
@@ -55,6 +57,15 @@ export function ListImportModal(S: SidebarState) {
             fontFamily: 'inherit', boxSizing: 'border-box',
           }}
         />
+        {canEnrichImport && (
+          <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, marginTop: 12 }}>
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div className="text-content" style={{ fontSize: 12, fontWeight: 600 }}>{t('places.enrichOnImport')}</div>
+              <div className="text-content-faint" style={{ fontSize: 12, marginTop: 2 }}>{t('places.enrichOnImportHint')}</div>
+            </div>
+            <ToggleSwitch on={listImportEnrich} onToggle={() => setListImportEnrich(!listImportEnrich)} />
+          </div>
+        )}
         <div style={{ display: 'flex', gap: 8, marginTop: 16, justifyContent: 'flex-end' }}>
           <button
             onClick={() => { setListImportOpen(false); setListImportUrl('') }}

client/src/components/Planner/ReservationsPanel.tsx

@@ -179,6 +179,16 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
               {t('reservations.needsReview')}
             </span>
           ) : null}
+          {r.external_source === 'airtrail' ? (
+            <span
+              className={r.sync_enabled ? 'text-[#2563eb] bg-[rgba(59,130,246,0.12)]' : 'text-content-faint bg-surface-tertiary'}
+              style={{ display: 'inline-flex', alignItems: 'center', gap: 4, fontSize: 11, fontWeight: 600, padding: '3px 8px', borderRadius: 6 }}
+              title={r.sync_enabled ? t('reservations.airtrail.syncedHint') : t('reservations.airtrail.notSyncedHint')}
+            >
+              <Plane size={11} />
+              {r.sync_enabled ? t('reservations.airtrail.synced') : t('reservations.airtrail.notSynced')}
+            </span>
+          ) : null}
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
           <span className="text-content" style={{
@@ -271,19 +281,21 @@ function ReservationCard({ r, tripId, onEdit, onDelete, files = [], onNavigateTo
         )}
 
         {(() => {
-          const eps = r.endpoints || []
-          const from = eps.find(e => e.role === 'from')
-          const to = eps.find(e => e.role === 'to')
-          if (!from || !to) return null
+          // Full route over all waypoints (from · stops · to), ordered by sequence.
+          const eps = (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+          if (eps.length < 2) return null
           return (
             <div className="bg-surface-tertiary text-content" style={{
               display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
               padding: '8px 12px', borderRadius: 10,
-              fontSize: 12.5,
+              fontSize: 12.5, flexWrap: 'wrap',
             }}>
-              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{from.name}</span>
-              <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />
-              <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{to.name}</span>
+              {eps.map((ep, i) => (
+                <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
+                  {i > 0 && <TypeIcon size={14} style={{ color: typeInfo.color, flexShrink: 0 }} />}
+                  <span style={{ fontWeight: 500, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{ep.name}</span>
+                </span>
+              ))}
             </div>
           )
         })()}
@@ -470,6 +482,8 @@ interface ReservationsPanelProps {
   onAdd: () => void
   onImport?: () => void
   bookingImportAvailable?: boolean
+  onAirTrailImport?: () => void
+  airTrailAvailable?: boolean
   onEdit: (reservation: Reservation) => void
   onDelete: (id: number) => void
   onNavigateToFiles: () => void
@@ -477,7 +491,7 @@ interface ReservationsPanelProps {
   addManualKey?: string
 }
 
-export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
+export default function ReservationsPanel({ tripId, reservations, days, assignments, files = [], onAdd, onImport, bookingImportAvailable, onAirTrailImport, airTrailAvailable, onEdit, onDelete, onNavigateToFiles, titleKey = 'reservations.title', addManualKey = 'reservations.addManual' }: ReservationsPanelProps) {
   const { t, locale } = useTranslation()
   const can = useCanDo()
   const trip = useTripStore((s) => s.trip)
@@ -600,6 +614,21 @@ export default function ReservationsPanel({ tripId, reservations, days, assignme
                   <span className="hidden sm:inline">{t('reservations.import.cta')}</span>
                 </button>
               )}
+              {onAirTrailImport && airTrailAvailable && (
+                <button onClick={onAirTrailImport} className="bg-surface-secondary text-content" style={{
+                  appearance: 'none', border: '1px solid var(--border-primary)', cursor: 'pointer', fontFamily: 'inherit',
+                  display: 'inline-flex', alignItems: 'center', gap: 6,
+                  padding: '8px 14px', borderRadius: 10, fontSize: 13, fontWeight: 500, boxSizing: 'border-box',
+                  transition: 'opacity 0.15s ease',
+                }}
+                  onMouseEnter={e => e.currentTarget.style.opacity = '0.75'}
+                  onMouseLeave={e => e.currentTarget.style.opacity = '1'}
+                  title={t('reservations.airtrail.title')}
+                >
+                  <Plane size={14} strokeWidth={2} />
+                  <span className="hidden sm:inline">{t('reservations.airtrail.cta')}</span>
+                </button>
+              )}
               <button onClick={onAdd} className="bg-accent text-accent-text" style={{
                 appearance: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
                 display: 'inline-flex', alignItems: 'center', gap: 6,

client/src/components/Planner/TransportModal.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useRef } from 'react'
 import { useParams } from 'react-router-dom'
-import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2 } from 'lucide-react'
+import { Plane, Train, Car, Ship, Bus, Sailboat, Bike, CarTaxiFront, Route, Paperclip, FileText, X, ExternalLink, Link2, Plus, Trash2 } from 'lucide-react'
 import Modal from '../shared/Modal'
 import CustomSelect from '../shared/CustomSelect'
 import CustomTimePicker from '../shared/CustomTimePicker'
@@ -14,6 +14,7 @@ import { formatDate, splitReservationDateTime } from '../../utils/formatters'
 import { openFile } from '../../utils/fileDownload'
 import apiClient from '../../api/client'
 import type { Day, Reservation, ReservationEndpoint, TripFile } from '../../types'
+import { parseReservationMetadata, orderedEndpoints } from '../../utils/flightLegs'
 
 const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
@@ -23,7 +24,7 @@ interface EndpointPick {
   location?: LocationPoint
 }
 
-function endpointFromAirport(a: Airport, role: 'from' | 'to', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
+function endpointFromAirport(a: Airport, role: 'from' | 'to' | 'stop', sequence: number, date: string | null, time: string | null): Omit<ReservationEndpoint, 'id' | 'reservation_id'> {
   return {
     role, sequence,
     name: a.city ? `${a.city} (${a.iata})` : a.name,
@@ -63,6 +64,25 @@ function locationFromEndpoint(e: ReservationEndpoint | undefined): LocationPoint
   return { name: e.name, lat: e.lat, lng: e.lng, address: null }
 }
 
+// ── Multi-leg flight waypoints ─────────────────────────────────────────────
+// A flight is an ordered list of airports. The origin has only a departure, the
+// destination only an arrival, and each intermediate stop has both — plus the
+// airline/flight number of the flight LEAVING it. N waypoints = N-1 legs. A
+// single-leg flight is just two waypoints, so it persists exactly as before.
+interface WaypointForm {
+  airport: Airport | null
+  arrDayId: string | number
+  arrTime: string
+  depDayId: string | number
+  depTime: string
+  airline: string
+  flight_number: string
+  seat: string
+}
+function emptyWaypoint(dayId: string | number = ''): WaypointForm {
+  return { airport: null, arrDayId: dayId, arrTime: '', depDayId: dayId, depTime: '', airline: '', flight_number: '', seat: '' }
+}
+
 const TYPE_OPTIONS = [
   { value: 'flight',          labelKey: 'reservations.type.flight',          Icon: Plane },
   { value: 'train',           labelKey: 'reservations.type.train',           Icon: Train },
@@ -122,6 +142,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
   const [isSaving, setIsSaving] = useState(false)
   const [fromPick, setFromPick] = useState<EndpointPick>({})
   const [toPick, setToPick] = useState<EndpointPick>({})
+  // Flight route as an ordered list of airports (origin .. stops .. destination).
+  const [waypoints, setWaypoints] = useState<WaypointForm[]>([emptyWaypoint(), emptyWaypoint()])
   const [uploadingFile, setUploadingFile] = useState(false)
   const [pendingFiles, setPendingFiles] = useState<File[]>([])
   const [showFilePicker, setShowFilePicker] = useState(false)
@@ -159,8 +181,40 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
       })
       if (type === 'flight') {
-        setFromPick({ airport: airportFromEndpoint(from) || undefined })
-        setToPick({ airport: airportFromEndpoint(to) || undefined })
+        const orderedEps = orderedEndpoints(reservation)
+        const metaLegs: any[] = Array.isArray(meta.legs) ? meta.legs : []
+        let wps: WaypointForm[]
+        if (orderedEps.length >= 2) {
+          wps = orderedEps.map((ep, i) => {
+            const legInto = metaLegs[i - 1] // leg arriving INTO waypoint i
+            const legOut = metaLegs[i] // leg departing FROM waypoint i
+            const isFirst = i === 0
+            const isLast = i === orderedEps.length - 1
+            return {
+              airport: airportFromEndpoint(ep),
+              arrDayId: legInto?.arr_day_id ?? (isLast ? (reservation.end_day_id ?? '') : ''),
+              arrTime: legInto?.arr_time ?? (!isFirst ? (ep.local_time ?? '') : ''),
+              depDayId: legOut?.dep_day_id ?? (isFirst ? (reservation.day_id ?? '') : ''),
+              depTime: legOut?.dep_time ?? (!isLast ? (ep.local_time ?? '') : ''),
+              airline: legOut?.airline ?? (isFirst ? (meta.airline ?? '') : ''),
+              flight_number: legOut?.flight_number ?? (isFirst ? (meta.flight_number ?? '') : ''),
+              seat: legOut?.seat ?? (isFirst ? (meta.seat ?? '') : ''),
+            }
+          })
+        } else {
+          // Legacy flight with no (or partial) endpoints — seed two waypoints.
+          const dep = emptyWaypoint(reservation.day_id ?? '')
+          dep.airport = airportFromEndpoint(from)
+          dep.depTime = splitReservationDateTime(reservation.reservation_time).time ?? ''
+          dep.airline = meta.airline ?? ''
+          dep.flight_number = meta.flight_number ?? ''
+          dep.seat = meta.seat ?? ''
+          const arr = emptyWaypoint(reservation.end_day_id ?? reservation.day_id ?? '')
+          arr.airport = airportFromEndpoint(to)
+          arr.arrTime = splitReservationDateTime(reservation.reservation_end_time).time ?? ''
+          wps = [dep, arr]
+        }
+        setWaypoints(wps)
       } else {
         setFromPick({ location: locationFromEndpoint(from) || undefined })
         setToPick({ location: locationFromEndpoint(to) || undefined })
@@ -169,6 +223,7 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       setForm({ ...defaultForm, start_day_id: selectedDayId ?? '', end_day_id: selectedDayId ?? '' })
       setFromPick({})
       setToPick({})
+      setWaypoints([emptyWaypoint(selectedDayId ?? ''), emptyWaypoint(selectedDayId ?? '')])
     }
   }, [isOpen, reservation, selectedDayId, budgetItems])
 
@@ -187,18 +242,48 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
         return day?.date ? `${day.date}T${time}` : time
       }
 
-      const metadata: Record<string, string> = {}
+      const dayDate = (id: string | number): string | null => days.find(d => d.id === Number(id))?.date ?? null
+      // Flight route as an ordered list of airports (origin .. stops .. destination).
+      const flightWps = form.type === 'flight' ? waypoints.filter(w => w.airport) : []
+      const firstWp = flightWps[0]
+      const lastWp = flightWps[flightWps.length - 1]
+      // Per-leg day-plan positions are owned by the day planner, not this form — keep
+      // them when re-saving so editing a flight doesn't reset where its legs sit.
+      const origLegs: any[] = reservation ? (parseReservationMetadata(reservation).legs || []) : []
+
+      const metadata: Record<string, any> = {}
       if (form.type === 'flight') {
-        if (form.meta_airline) metadata.airline = form.meta_airline
-        if (form.meta_flight_number) metadata.flight_number = form.meta_flight_number
-        if (fromPick.airport) {
-          metadata.departure_airport = fromPick.airport.iata
-          metadata.departure_timezone = fromPick.airport.tz
+        // Top-level keys mirror the first/last leg so legacy readers keep working.
+        if (firstWp?.airline) metadata.airline = firstWp.airline
+        if (firstWp?.flight_number) metadata.flight_number = firstWp.flight_number
+        if (firstWp?.airport) {
+          metadata.departure_airport = firstWp.airport.iata
+          metadata.departure_timezone = firstWp.airport.tz
         }
-        if (toPick.airport) {
-          metadata.arrival_airport = toPick.airport.iata
-          metadata.arrival_timezone = toPick.airport.tz
+        if (lastWp?.airport) {
+          metadata.arrival_airport = lastWp.airport.iata
+          metadata.arrival_timezone = lastWp.airport.tz
         }
+        // Per-leg detail only for true multi-leg flights — a single-leg flight
+        // keeps the exact same (flat) metadata it had before this feature.
+        if (flightWps.length > 2) {
+          metadata.legs = flightWps.slice(0, -1).map((w, i) => {
+            const next = flightWps[i + 1]
+            return {
+              from: w.airport!.iata,
+              to: next.airport!.iata,
+              ...(w.airline ? { airline: w.airline } : {}),
+              ...(w.flight_number ? { flight_number: w.flight_number } : {}),
+              ...(w.seat ? { seat: w.seat } : {}),
+              dep_day_id: w.depDayId ? Number(w.depDayId) : null,
+              dep_time: w.depTime || null,
+              arr_day_id: next.arrDayId ? Number(next.arrDayId) : null,
+              arr_time: next.arrTime || null,
+              ...(origLegs[i]?.day_positions ? { day_positions: origLegs[i].day_positions } : {}),
+            }
+          })
+        }
+        if (firstWp?.seat) metadata.seat = firstWp.seat
       } else if (form.type === 'train') {
         if (form.meta_train_number) metadata.train_number = form.meta_train_number
         if (form.meta_platform) metadata.platform = form.meta_platform
@@ -213,21 +298,35 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
       const endDate = (endDay ?? startDay)?.date ?? null
       const endpoints: ReturnType<typeof endpointFromAirport>[] = []
       if (form.type === 'flight') {
-        if (fromPick.airport) endpoints.push(endpointFromAirport(fromPick.airport, 'from', 0, startDate, form.departure_time || null))
-        if (toPick.airport) endpoints.push(endpointFromAirport(toPick.airport, 'to', 1, endDate, form.arrival_time || null))
+        flightWps.forEach((w, i) => {
+          const isFirst = i === 0
+          const isLast = i === flightWps.length - 1
+          const role: 'from' | 'to' | 'stop' = isFirst ? 'from' : isLast ? 'to' : 'stop'
+          const dId = isLast ? w.arrDayId : w.depDayId
+          const time = isLast ? w.arrTime : w.depTime
+          endpoints.push(endpointFromAirport(w.airport!, role, i, dayDate(dId), time || null))
+        })
       } else {
         if (fromPick.location) endpoints.push(endpointFromLocation(fromPick.location, 'from', 0, startDate, form.departure_time || null))
         if (toPick.location) endpoints.push(endpointFromLocation(toPick.location, 'to', 1, endDate, form.arrival_time || null))
       }
 
+      // Flights derive their span from the first/last waypoint; other transports
+      // keep using the single departure/arrival form fields unchanged.
+      const flightDepDay = firstWp && firstWp.depDayId ? Number(firstWp.depDayId) : null
+      const flightArrDay = lastWp && lastWp.arrDayId ? Number(lastWp.arrDayId) : null
       const payload = {
         title: form.title,
         type: form.type,
         status: form.status,
-        day_id: form.start_day_id ? Number(form.start_day_id) : null,
-        end_day_id: form.end_day_id ? Number(form.end_day_id) : null,
-        reservation_time: buildTime(startDay, form.departure_time),
-        reservation_end_time: buildTime(endDay ?? startDay, form.arrival_time),
+        day_id: form.type === 'flight' ? flightDepDay : (form.start_day_id ? Number(form.start_day_id) : null),
+        end_day_id: form.type === 'flight' ? flightArrDay : (form.end_day_id ? Number(form.end_day_id) : null),
+        reservation_time: form.type === 'flight'
+          ? buildTime(days.find(d => d.id === flightDepDay), firstWp?.depTime || '')
+          : buildTime(startDay, form.departure_time),
+        reservation_end_time: form.type === 'flight'
+          ? buildTime(days.find(d => d.id === flightArrDay), lastWp?.arrTime || '')
+          : buildTime(endDay ?? startDay, form.arrival_time),
         location: null,
         confirmation_number: form.confirmation_number || null,
         notes: form.notes || null,
@@ -348,100 +447,130 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
             placeholder={t('reservations.titlePlaceholder')} className={inputClass} />
         </div>
 
-        {/* From / To endpoints */}
-        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-          <div>
-            <label className={labelClass}>{t('reservations.meta.from')}</label>
-            {form.type === 'flight' ? (
-              <AirportSelect value={fromPick.airport || null} onChange={a => setFromPick({ airport: a || undefined })} />
-            ) : (
-              <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
-            )}
+        {form.type === 'flight' ? (
+          /* ── Flight route: ordered airports (origin · stops · destination) ── */
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
+            <label className={labelClass}>{t('reservations.layover.route')}</label>
+            {waypoints.map((wp, i) => {
+              const isFirst = i === 0
+              const isLast = i === waypoints.length - 1
+              const updateWp = (patch: Partial<WaypointForm>) => setWaypoints(prev => prev.map((w, j) => (j === i ? { ...w, ...patch } : w)))
+              const roleLabel = isFirst ? t('reservations.meta.from') : isLast ? t('reservations.meta.to') : t('reservations.layover.stop')
+              return (
+                <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
+                  <div className="bg-surface-card" style={{ border: '1px solid var(--border-primary)', borderRadius: 10, padding: 10, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                      <span className="text-content-faint" style={{ fontSize: 10, fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.03em', flexShrink: 0 }}>{roleLabel}</span>
+                      <div style={{ flex: 1, minWidth: 0 }}>
+                        <AirportSelect value={wp.airport} onChange={a => updateWp({ airport: a || null })} />
+                      </div>
+                      {!isFirst && !isLast && (
+                        <button type="button" onClick={() => setWaypoints(prev => prev.filter((_, j) => j !== i))} aria-label={t('common.delete')} className="text-content-faint" style={{ background: 'none', border: 'none', cursor: 'pointer', display: 'flex', padding: 4, flexShrink: 0 }}>
+                          <Trash2 size={14} />
+                        </button>
+                      )}
+                    </div>
+                    {!isFirst && (
+                      <div style={{ display: 'flex', gap: 8 }}>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <label className={labelClass}>{t('reservations.arrivalDate')}</label>
+                          <CustomSelect value={wp.arrDayId} onChange={v => updateWp({ arrDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+                        </div>
+                        <div style={{ flex: 1, minWidth: 0 }}>
+                          <label className={labelClass}>{t('reservations.arrivalTime')}</label>
+                          <CustomTimePicker value={wp.arrTime} onChange={v => updateWp({ arrTime: v })} />
+                        </div>
+                        {wp.airport && (
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
+                            <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>{wp.airport.tz}</div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+                    {!isLast && (
+                      <>
+                        <div style={{ display: 'flex', gap: 8 }}>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <label className={labelClass}>{t('reservations.departureDate')}</label>
+                            <CustomSelect value={wp.depDayId} onChange={v => updateWp({ depDayId: v })} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+                          </div>
+                          <div style={{ flex: 1, minWidth: 0 }}>
+                            <label className={labelClass}>{t('reservations.departureTime')}</label>
+                            <CustomTimePicker value={wp.depTime} onChange={v => updateWp({ depTime: v })} />
+                          </div>
+                          {wp.airport && (
+                            <div style={{ flex: 1, minWidth: 0 }}>
+                              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
+                              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>{wp.airport.tz}</div>
+                            </div>
+                          )}
+                        </div>
+                        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
+                          <div>
+                            <label className={labelClass}>{t('reservations.meta.airline')}</label>
+                            <input type="text" value={wp.airline} onChange={e => updateWp({ airline: e.target.value })} placeholder="Lufthansa" className={inputClass} />
+                          </div>
+                          <div>
+                            <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
+                            <input type="text" value={wp.flight_number} onChange={e => updateWp({ flight_number: e.target.value })} placeholder="LH 123" className={inputClass} />
+                          </div>
+                          <div>
+                            <label className={labelClass}>{t('reservations.meta.seat')}</label>
+                            <input type="text" value={wp.seat} onChange={e => updateWp({ seat: e.target.value })} placeholder="12A" className={inputClass} />
+                          </div>
+                        </div>
+                      </>
+                    )}
+                  </div>
+                  {!isLast && (
+                    <button type="button" onClick={() => setWaypoints(prev => [...prev.slice(0, i + 1), emptyWaypoint(prev[i]?.depDayId || ''), ...prev.slice(i + 1)])}
+                      className="text-content-faint hover:text-content-secondary" style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 5, padding: '6px 10px', border: '1px dashed var(--border-primary)', borderRadius: 8, background: 'none', fontSize: 11, cursor: 'pointer', fontFamily: 'inherit' }}>
+                      <Plus size={12} /> {t('reservations.layover.addStop')}
+                    </button>
+                  )}
+                </div>
+              )
+            })}
           </div>
-          <div>
-            <label className={labelClass}>{t('reservations.meta.to')}</label>
-            {form.type === 'flight' ? (
-              <AirportSelect value={toPick.airport || null} onChange={a => setToPick({ airport: a || undefined })} />
-            ) : (
-              <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
-            )}
-          </div>
-        </div>
-
-        {/* Departure row */}
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.departureDate') : form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}
-            </label>
-            <CustomSelect
-              value={form.start_day_id}
-              onChange={value => set('start_day_id', value)}
-              placeholder={t('dayplan.dayN', { n: '?' })}
-              options={dayOptions}
-              size="sm"
-            />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.departureTime') : form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}
-            </label>
-            <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
-          </div>
-          {form.type === 'flight' && fromPick.airport && (
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label className={labelClass}>{t('reservations.meta.departureTimezone')}</label>
-              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
-                {fromPick.airport.tz}
+        ) : (
+          <>
+            {/* From / To endpoints (non-flight) */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+              <div>
+                <label className={labelClass}>{t('reservations.meta.from')}</label>
+                <LocationSelect value={fromPick.location || null} onChange={l => setFromPick({ location: l || undefined })} />
+              </div>
+              <div>
+                <label className={labelClass}>{t('reservations.meta.to')}</label>
+                <LocationSelect value={toPick.location || null} onChange={l => setToPick({ location: l || undefined })} />
               </div>
             </div>
-          )}
-        </div>
 
-        {/* Arrival row */}
-        <div style={{ display: 'flex', gap: 8 }}>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.arrivalDate') : form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}
-            </label>
-            <CustomSelect
-              value={form.end_day_id}
-              onChange={value => set('end_day_id', value)}
-              placeholder={t('dayplan.dayN', { n: '?' })}
-              options={dayOptions}
-              size="sm"
-            />
-          </div>
-          <div style={{ flex: 1, minWidth: 0 }}>
-            <label className={labelClass}>
-              {form.type === 'flight' ? t('reservations.arrivalTime') : form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}
-            </label>
-            <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
-          </div>
-          {form.type === 'flight' && toPick.airport && (
-            <div style={{ flex: 1, minWidth: 0 }}>
-              <label className={labelClass}>{t('reservations.meta.arrivalTimezone')}</label>
-              <div className={inputClass} style={{ padding: '8px 12px', color: 'var(--text-muted)', fontSize: 12, background: 'var(--bg-tertiary)' }}>
-                {toPick.airport.tz}
+            {/* Departure row */}
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupDate') : t('reservations.date')}</label>
+                <CustomSelect value={form.start_day_id} onChange={value => set('start_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.pickupTime') : t('reservations.startTime')}</label>
+                <CustomTimePicker value={form.departure_time} onChange={v => set('departure_time', v)} />
               </div>
             </div>
-          )}
-        </div>
 
-        {/* Flight-specific fields */}
-        {form.type === 'flight' && (
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            <div>
-              <label className={labelClass}>{t('reservations.meta.airline')}</label>
-              <input type="text" value={form.meta_airline} onChange={e => set('meta_airline', e.target.value)}
-                placeholder="Lufthansa" className={inputClass} />
+            {/* Arrival row */}
+            <div style={{ display: 'flex', gap: 8 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnDate') : t('reservations.endDate')}</label>
+                <CustomSelect value={form.end_day_id} onChange={value => set('end_day_id', value)} placeholder={t('dayplan.dayN', { n: '?' })} options={dayOptions} size="sm" />
+              </div>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <label className={labelClass}>{form.type === 'car' ? t('reservations.returnTime') : t('reservations.endTime')}</label>
+                <CustomTimePicker value={form.arrival_time} onChange={v => set('arrival_time', v)} />
+              </div>
             </div>
-            <div>
-              <label className={labelClass}>{t('reservations.meta.flightNumber')}</label>
-              <input type="text" value={form.meta_flight_number} onChange={e => set('meta_flight_number', e.target.value)}
-                placeholder="LH 123" className={inputClass} />
-            </div>
-          </div>
+          </>
         )}
 
         {/* Train-specific fields */}

client/src/components/Planner/usePlacesSidebar.ts

@@ -7,6 +7,7 @@ import { useContextMenu } from '../shared/ContextMenu'
 import { placesApi } from '../../api/client'
 import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
+import { useAuthStore } from '../../store/authStore'
 import type { Place, Category, Day, AssignmentsMap } from '../../types'
 
 export interface PlacesSidebarProps {
@@ -49,6 +50,8 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
   const loadTrip = useTripStore((s) => s.loadTrip)
   const can = useCanDo()
   const canEditPlaces = can('place_edit', trip)
+  // Places-API enrichment (#886) needs a Google Maps key; gate the toggle on it.
+  const canEnrichImport = useAuthStore((s) => s.hasMapsKey)
   const isNaverListImportEnabled = true
 
   const [fileImportOpen, setFileImportOpen] = useState(false)
@@ -94,6 +97,7 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
   const [listImportUrl, setListImportUrl] = useState('')
   const [listImportLoading, setListImportLoading] = useState(false)
   const [listImportProvider, setListImportProvider] = useState<'google' | 'naver'>('google')
+  const [listImportEnrich, setListImportEnrich] = useState(false)
   const availableListImportProviders: Array<'google' | 'naver'> = isNaverListImportEnabled ? ['google', 'naver'] : ['google']
   const hasMultipleListImportProviders = availableListImportProviders.length > 1
 
@@ -108,9 +112,10 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     setListImportLoading(true)
     const provider = listImportProvider === 'naver' && isNaverListImportEnabled ? 'naver' : 'google'
     try {
+      const enrich = listImportEnrich && canEnrichImport
       const result = provider === 'google'
-        ? await placesApi.importGoogleList(tripId, listImportUrl.trim())
-        : await placesApi.importNaverList(tripId, listImportUrl.trim())
+        ? await placesApi.importGoogleList(tripId, listImportUrl.trim(), enrich)
+        : await placesApi.importNaverList(tripId, listImportUrl.trim(), enrich)
       await loadTrip(tripId)
       if (result.count === 0 && result.skipped > 0) {
         toast.warning(t('places.importAllSkipped'))
@@ -223,6 +228,7 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
     scrollContainerRef, onScrollTopChange,
     listImportOpen, setListImportOpen, listImportUrl, setListImportUrl,
     listImportLoading, listImportProvider, setListImportProvider,
+    listImportEnrich, setListImportEnrich, canEnrichImport,
     availableListImportProviders, hasMultipleListImportProviders, handleListImport,
     search, setSearch, filter, setFilter, categoryFilters, setCategoryFiltersLocal,
     selectMode, setSelectMode, selectedIds, setSelectedIds, pendingDeleteIds, setPendingDeleteIds,

client/src/components/Settings/AirTrailConnectionSection.tsx

@@ -0,0 +1,147 @@
+import React, { useEffect, useState } from 'react'
+import { Plane, Save } from 'lucide-react'
+import { useTranslation } from '../../i18n'
+import { useToast } from '../shared/Toast'
+import { airtrailApi } from '../../api/client'
+import Section from './Section'
+import ToggleSwitch from './ToggleSwitch'
+
+/**
+ * Settings → Integrations → AirTrail. Per-user connection to a self-hosted
+ * AirTrail instance (URL + Bearer API key). Mirrors the photo-provider (Immich)
+ * connection layout: stacked fields, a toggle, then Save / Test-connection with
+ * a status badge. The key is stored encrypted and never prefilled.
+ */
+export default function AirTrailConnectionSection(): React.ReactElement {
+  const { t } = useTranslation()
+  const toast = useToast()
+
+  const [url, setUrl] = useState('')
+  const [apiKey, setApiKey] = useState('')
+  const [allowInsecureTls, setAllowInsecureTls] = useState(false)
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+  const [testing, setTesting] = useState(false)
+
+  useEffect(() => {
+    airtrailApi
+      .getSettings()
+      .then(d => {
+        setUrl(d.url || '')
+        setAllowInsecureTls(!!d.allowInsecureTls)
+        setConnected(!!d.connected)
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false))
+  }, [])
+
+  // Send the key only when the user typed a new one — never prefilled, so a blank
+  // field means "keep the stored key".
+  const keyPayload = (): { apiKey?: string } => {
+    const k = apiKey.trim()
+    return k ? { apiKey: k } : {}
+  }
+
+  const handleSave = async () => {
+    setSaving(true)
+    try {
+      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, ...keyPayload() })
+      const status = await airtrailApi.status().catch(() => ({ connected: false }))
+      setConnected(!!status.connected)
+      setApiKey('')
+      if (d?.warning) toast.warning(d.warning)
+      else toast.success(t('settings.airtrail.toast.saved'))
+    } catch (err: any) {
+      toast.error(err?.response?.data?.error || t('settings.airtrail.toast.saveError'))
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleTest = async () => {
+    setTesting(true)
+    try {
+      const d = await airtrailApi.test({ url: url.trim(), allowInsecureTls, ...keyPayload() })
+      setConnected(!!d.connected)
+      if (d.connected) toast.success(t('settings.airtrail.test.success', { count: d.flightCount ?? 0 }))
+      else toast.error(d.error || t('settings.airtrail.test.failed'))
+    } catch {
+      toast.error(t('settings.airtrail.test.failed'))
+    } finally {
+      setTesting(false)
+    }
+  }
+
+  const canSave = !!url.trim() && (connected || !!apiKey.trim())
+
+  return (
+    <Section title={t('settings.airtrail.title')} icon={Plane}>
+      <div className="space-y-3">
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.airtrail.url')}</label>
+          <input
+            type="url"
+            value={url}
+            onChange={e => setUrl(e.target.value)}
+            placeholder="https://airtrail.example.com"
+            className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.airtrail.apiKey')}</label>
+          <input
+            type="password"
+            value={apiKey}
+            onChange={e => setApiKey(e.target.value)}
+            autoComplete="off"
+            placeholder={connected && !apiKey ? '••••••••' : t('settings.airtrail.apiKeyPlaceholder')}
+            className="w-full px-3 py-2.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-slate-300"
+          />
+          <p className="mt-1 text-xs text-slate-500">{t('settings.airtrail.apiKeyHint')}</p>
+        </div>
+
+        <div className="flex items-center gap-3">
+          <ToggleSwitch on={allowInsecureTls} onToggle={() => setAllowInsecureTls(v => !v)} />
+          <span className="text-sm font-medium text-slate-700">{t('settings.airtrail.allowInsecureTls')}</span>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-3">
+          <button
+            onClick={handleSave}
+            disabled={saving || loading || !canSave}
+            className="flex items-center gap-2 px-4 py-2 bg-slate-900 text-white rounded-lg text-sm hover:bg-slate-700 disabled:bg-slate-400"
+          >
+            <Save className="w-4 h-4" /> {t('common.save')}
+          </button>
+          <button
+            onClick={handleTest}
+            disabled={testing || loading || !url.trim()}
+            className="flex items-center gap-2 px-4 py-2 border border-slate-200 rounded-lg text-sm hover:bg-slate-50"
+          >
+            {testing ? (
+              <div className="w-4 h-4 border-2 border-slate-300 border-t-slate-700 rounded-full animate-spin" />
+            ) : (
+              <Plane className="w-4 h-4" />
+            )}
+            {t('settings.airtrail.test.button')}
+          </button>
+          {connected ? (
+            <span className="basis-full sm:basis-auto text-xs font-medium text-green-600 flex items-center gap-1">
+              <span className="w-2 h-2 bg-green-500 rounded-full" />
+              {t('settings.airtrail.connected')}
+            </span>
+          ) : (
+            <span className="basis-full sm:basis-auto text-xs font-medium text-slate-400 flex items-center gap-1">
+              <span className="w-2 h-2 bg-slate-300 rounded-full" />
+              {t('settings.airtrail.notConnected')}
+            </span>
+          )}
+        </div>
+
+        <p className="text-xs text-slate-500">{t('settings.airtrail.hint')}</p>
+      </div>
+    </Section>
+  )
+}

client/src/components/Settings/DisplaySettingsTab.tsx

@@ -262,6 +262,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
         <p className="text-xs mt-1 text-content-faint">{t('settings.bookingLabelsHint')}</p>
       </div>
 
+      {/* Explore places on the map (POI category pill) */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.mapPoiPill')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('map_poi_pill_enabled', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.map_poi_pill_enabled !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.map_poi_pill_enabled !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-xs mt-1 text-content-faint">{t('settings.mapPoiPillHint')}</p>
+      </div>
+
       {/* Blur Booking Codes */}
       <div>
         <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.blurBookingCodes')}</label>
@@ -291,6 +322,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
           ))}
         </div>
       </div>
+
+      {/* Optimize route from accommodation */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.optimizeFromAccommodation')}</label>
+        <div className="flex gap-3">
+          {[
+            { value: true, label: t('settings.on') || 'On' },
+            { value: false, label: t('settings.off') || 'Off' },
+          ].map(opt => (
+            <button
+              key={String(opt.value)}
+              onClick={async () => {
+                try { await updateSetting('optimize_from_accommodation', opt.value) }
+                catch (e: unknown) { toast.error(e instanceof Error ? e.message : t('common.error')) }
+              }}
+              style={{
+                display: 'flex', alignItems: 'center', gap: 8,
+                padding: '10px 20px', borderRadius: 10, cursor: 'pointer',
+                fontFamily: 'inherit', fontSize: 14, fontWeight: 500,
+                border: (settings.optimize_from_accommodation !== false) === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: (settings.optimize_from_accommodation !== false) === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+        <p className="text-xs mt-1 text-content-faint">{t('settings.optimizeFromAccommodationHint')}</p>
+      </div>
     </Section>
   )
 }

client/src/components/Settings/IntegrationsTab.tsx

@@ -6,6 +6,7 @@ import { Trash2, Copy, Terminal, Plus, Check, KeyRound, ChevronDown, ChevronRigh
 import { authApi, oauthApi } from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import PhotoProvidersSection from './PhotoProvidersSection'
+import AirTrailConnectionSection from './AirTrailConnectionSection'
 import { ALL_SCOPES } from '../../api/oauthScopes'
 import ScopeGroupPicker from '../OAuth/ScopeGroupPicker'
 
@@ -97,6 +98,7 @@ export default function IntegrationsTab(): React.ReactElement {
   return (
     <>
       <PhotoProvidersSection />
+      {S.airtrailEnabled && <AirTrailConnectionSection />}
       {S.mcpEnabled && <IntegrationsMcpSection {...S} />}
       <McpTokenModals {...S} />
       <OAuthClientModals {...S} />
@@ -109,6 +111,7 @@ function useIntegrations() {
   const toast = useToast()
   const { isEnabled: addonEnabled, loadAddons } = useAddonStore()
   const mcpEnabled = addonEnabled('mcp')
+  const airtrailEnabled = addonEnabled('airtrail')
 
   useEffect(() => {
     loadAddons()
@@ -289,7 +292,7 @@ function useIntegrations() {
 
 
   return {
-    t, locale, toast, mcpEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
+    t, locale, toast, mcpEnabled, airtrailEnabled, oauthClients, setOauthClients, oauthSessions, setOauthSessions, oauthCreateOpen, setOauthCreateOpen, oauthNewName, setOauthNewName, oauthNewUris, setOauthNewUris, oauthNewScopes, setOauthNewScopes, oauthCreating, oauthCreatedClient, setOauthCreatedClient, oauthDeleteId, setOauthDeleteId, oauthRevokeId, setOauthRevokeId, oauthRotateId, setOauthRotateId, oauthRotatedSecret, setOauthRotatedSecret, oauthRotating, oauthScopesExpanded, setOauthScopesExpanded, oauthIsMachine, setOauthIsMachine, activeMcpTab, setActiveMcpTab, configOpenOAuth, setConfigOpenOAuth, configOpenToken, setConfigOpenToken, mcpTokens, setMcpTokens, mcpModalOpen, setMcpModalOpen, mcpNewName, setMcpNewName, mcpCreatedToken, setMcpCreatedToken, mcpCreating, mcpDeleteId, setMcpDeleteId, copiedKey, mcpEndpoint, mcpJsonConfigOAuth, mcpJsonConfig, handleCreateMcpToken, handleDeleteMcpToken, handleCopy, handleCreateOAuthClient, handleDeleteOAuthClient, handleRotateSecret, handleRevokeSession,
   }
 }
 

client/src/components/Todo/TodoListPanel.tsx

@@ -277,6 +277,7 @@ function DetailPane({ item, tripId, categories, members, onClose }: {
   const [desc, setDesc] = useState(item.description || '')
   const [dueDate, setDueDate] = useState(item.due_date || '')
   const [category, setCategory] = useState(item.category || '')
+  const [addingCategory, setAddingCategoryInline] = useState(false)
   const [assignedUserId, setAssignedUserId] = useState<number | null>(item.assigned_user_id)
   const [priority, setPriority] = useState(item.priority || 0)
   const [saving, setSaving] = useState(false)
@@ -378,21 +379,52 @@ function DetailPane({ item, tripId, categories, members, onClose }: {
         {/* Category */}
         <div>
           <label className={labelClass}>{t('todo.detail.category')}</label>
-          <CustomSelect
-            value={category}
-            onChange={v => setCategory(String(v))}
-            options={[
-              { value: '', label: t('todo.noCategory') },
-              ...categories.map(c => ({
-                value: c,
-                label: c,
-                icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
-              })),
-            ]}
-            placeholder={t('todo.noCategory')}
-            size="sm"
-            disabled={!canEdit}
-          />
+          {addingCategory ? (
+            <div style={{ display: 'flex', gap: 4 }}>
+              <input
+                autoFocus
+                value={category}
+                onChange={e => setCategory(e.target.value)}
+                onKeyDown={e => { if (e.key === 'Enter') setAddingCategoryInline(false); if (e.key === 'Escape') { setCategory(''); setAddingCategoryInline(false) } }}
+                placeholder={t('todo.newCategory')}
+                style={{ flex: 1, fontSize: 13, padding: '8px 10px', border: '1px solid var(--border-primary)', borderRadius: 8, background: 'var(--bg-primary)', color: 'var(--text-primary)', fontFamily: 'inherit', outline: 'none' }}
+              />
+              <button type="button" onClick={() => setAddingCategoryInline(false)}
+                style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-primary)' }}>
+                <Check size={14} />
+              </button>
+            </div>
+          ) : (
+            <div style={{ display: 'flex', gap: 4 }}>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <CustomSelect
+                  value={category}
+                  onChange={v => setCategory(String(v))}
+                  options={[
+                    { value: '', label: t('todo.noCategory') },
+                    ...categories.map(c => ({
+                      value: c, label: c,
+                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: katColor(c, categories), display: 'inline-block' }} />,
+                    })),
+                    ...(category && !categories.includes(category) ? [{
+                      value: category, label: `${category} (${t('todo.newCategoryLabel') || 'new'})`,
+                      icon: <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#9ca3af', display: 'inline-block' }} />,
+                    }] : []),
+                  ]}
+                  placeholder={t('todo.noCategory')}
+                  size="sm"
+                  disabled={!canEdit}
+                />
+              </div>
+              {canEdit && (
+                <button type="button" onClick={() => { setCategory(''); setAddingCategoryInline(true) }}
+                  title={t('todo.newCategory')}
+                  style={{ background: 'var(--bg-hover)', border: '1px solid var(--border-primary)', borderRadius: 8, padding: '0 10px', cursor: 'pointer', color: 'var(--text-muted)', fontFamily: 'inherit' }}>
+                  <Plus size={14} />
+                </button>
+              )}
+            </div>
+          )}
         </div>
 
         {/* Due date */}

client/src/db/offlineDb.ts

@@ -148,6 +148,24 @@ export async function upsertSyncMeta(meta: SyncMeta): Promise<void> {
   await offlineDb.syncMeta.put(meta);
 }
 
+/**
+ * Read a pre-downloaded file blob for offline use. Returns null when the file
+ * was never cached (or on any read error). The stored MIME is reapplied so the
+ * caller's inline-vs-download decision stays correct even if the persisted Blob
+ * lost its type.
+ */
+export async function getCachedBlob(url: string): Promise<Blob | null> {
+  try {
+    const entry = await offlineDb.blobCache.get(url);
+    if (!entry) return null;
+    return entry.blob.type
+      ? entry.blob
+      : new Blob([entry.blob], { type: entry.mime || 'application/octet-stream' });
+  } catch {
+    return null;
+  }
+}
+
 // ── Eviction / cleanup ────────────────────────────────────────────────────────
 
 /** Delete all cached data for one trip (eviction or explicit clear). */

client/src/hooks/useAirtrailConnection.ts

@@ -0,0 +1,31 @@
+import { useEffect, useState } from 'react'
+import { airtrailApi } from '../api/client'
+import { useAddonStore } from '../store/addonStore'
+
+/**
+ * Resolves whether the current user can use AirTrail in a trip: the addon must
+ * be enabled globally AND the user must have a working connection. Drives the
+ * "AirTrail Import/Sync" button visibility in the Transport panel.
+ */
+export function useAirtrailConnection() {
+  const airtrailEnabled = useAddonStore(s => s.isEnabled('airtrail'))
+  const [connected, setConnected] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  useEffect(() => {
+    if (!airtrailEnabled) {
+      setConnected(false)
+      return
+    }
+    let cancelled = false
+    setLoading(true)
+    airtrailApi
+      .status()
+      .then(d => { if (!cancelled) setConnected(!!d.connected) })
+      .catch(() => { if (!cancelled) setConnected(false) })
+      .finally(() => { if (!cancelled) setLoading(false) })
+    return () => { cancelled = true }
+  }, [airtrailEnabled])
+
+  return { airtrailEnabled, connected, available: airtrailEnabled && connected, loading }
+}

client/src/hooks/useRouteCalculation.ts

@@ -53,29 +53,44 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       return pos != null
     })
 
-    // Build a unified list of places + transports sorted by effective position,
-    // then derive segments by resetting whenever a transport appears — mirrors getMergedItems order.
-    type Entry = { kind: 'place'; lat: number; lng: number } | { kind: 'transport' }
-    const entries: (Entry & { pos: number })[] = [
+    // The departure/arrival coordinate of a transport, if its endpoints carry one.
+    const epLoc = (r: any, role: 'from' | 'to'): { lat: number; lng: number } | null => {
+      const e = (r.endpoints || []).find((x: any) => x.role === role)
+      return e && e.lat != null && e.lng != null ? { lat: e.lat, lng: e.lng } : null
+    }
+
+    // Build a unified list of places + transports sorted by effective position.
+    type Entry =
+      | { kind: 'place'; lat: number; lng: number; pos: number }
+      | { kind: 'transport'; from: { lat: number; lng: number } | null; to: { lat: number; lng: number } | null; pos: number }
+    const entries: Entry[] = [
       ...da.filter(a => a.place?.lat && a.place?.lng).map(a => ({
         kind: 'place' as const, lat: a.place.lat!, lng: a.place.lng!, pos: a.order_index,
       })),
       ...dayTransports.map(r => ({
         kind: 'transport' as const,
+        from: epLoc(r, 'from'),
+        to: epLoc(r, 'to'),
         pos: (r.day_positions?.[dayId] ?? r.day_positions?.[String(dayId)] ?? r.day_plan_position) as number,
       })),
     ].sort((a, b) => a.pos - b.pos)
 
-    // Group consecutive located places into runs, resetting whenever a transport
-    // appears (you don't drive between a flight's endpoints) — mirrors getMergedItems order.
+    // Group located places into driving runs.
+    // - A transport WITH a location anchors the route to its departure point (you
+    //   travel there), then breaks the run (you don't drive the flight/train); its
+    //   arrival point starts the next run.
+    // - A transport WITHOUT a location is ignored entirely — the places around it
+    //   connect directly, as if the booking weren't there.
     const runs: { lat: number; lng: number }[][] = []
     let currentRun: { lat: number; lng: number }[] = []
     for (const entry of entries) {
       if (entry.kind === 'place') {
         currentRun.push({ lat: entry.lat, lng: entry.lng })
-      } else {
+      } else if (entry.from || entry.to) {
+        if (entry.from) currentRun.push(entry.from)
         if (currentRun.length >= 2) runs.push(currentRun)
         currentRun = []
+        if (entry.to) currentRun.push(entry.to)
       }
     }
     if (currentRun.length >= 2) runs.push(currentRun)
@@ -120,7 +135,9 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
       .filter(r => TRANSPORT_TYPES.includes(r.type))
       .map(r => {
         const pos = r.day_positions?.[selectedDayId] ?? r.day_positions?.[String(selectedDayId)] ?? r.day_plan_position
-        return `${r.id}:${r.day_id ?? ''}:${r.end_day_id ?? ''}:${r.reservation_time ?? ''}:${pos ?? ''}`
+        // Include endpoints so adding/moving a departure/arrival location re-routes.
+        const eps = (r.endpoints || []).map(e => `${e.role}@${e.lat ?? ''},${e.lng ?? ''}`).join(';')
+        return `${r.id}:${r.day_id ?? ''}:${r.end_day_id ?? ''}:${r.reservation_time ?? ''}:${pos ?? ''}:${eps}`
       })
       .sort()
       .join('|')

client/src/index.css

@@ -35,6 +35,23 @@ body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow
   color: var(--text-primary) !important;
 }
 
+/* Mapbox GL hover popup — the name/category/address card on marker hover.
+   Matches the Leaflet map's white hover tooltip. pointer-events:none so moving
+   onto the popup never steals the marker's mouseleave and causes flicker. */
+.trek-map-popup { pointer-events: none; }
+.trek-map-popup .mapboxgl-popup-content {
+  padding: 7px 10px;
+  border-radius: 10px;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.16);
+}
+.trek-map-popup .mapboxgl-popup-tip {
+  border-top-color: #fff;
+  border-bottom-color: #fff;
+  border-left-color: #fff;
+  border-right-color: #fff;
+}
+
 .atlas-tooltip {
   background: rgba(10, 10, 20, 0.6) !important;
   backdrop-filter: blur(20px) saturate(180%) !important;

client/src/pages/AtlasPage.test.tsx

@@ -175,6 +175,9 @@ function useDefaultAtlasHandlers() {
     http.get('/api/addons/atlas/stats', () => HttpResponse.json(atlasStatsResponse)),
     http.get('/api/addons/atlas/bucket-list', () => HttpResponse.json({ items: [] })),
     http.get('/api/addons/atlas/regions', () => HttpResponse.json({ regions: {} })),
+    // Country-border GeoJSON (admin-0) — served by the API now. Tests that need real
+    // country features override this handler via server.use(...).
+    http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json({ type: 'FeatureCollection', features: [] })),
     // Handler for region GeoJSON fetch (triggered by loadRegionsForViewport when intersects=true)
     http.get('/api/addons/atlas/regions/geo', () => HttpResponse.json({ features: [] })),
   );
@@ -187,18 +190,6 @@ beforeEach(() => {
   seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
   seedStore(useSettingsStore, { settings: buildSettings({ dark_mode: false }) });
 
-  // Stub the external GeoJSON fetch (GitHub raw URL) to avoid real network calls
-  vi.spyOn(global, 'fetch').mockImplementation((url) => {
-    const urlStr = String(url);
-    if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-      return Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve({ type: 'FeatureCollection', features: [] }),
-      } as Response);
-    }
-    return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-  });
-
   useDefaultAtlasHandlers();
 });
 
@@ -469,16 +460,9 @@ describe('AtlasPage', () => {
   describe('FE-PAGE-ATLAS-017: country search filters options from GeoJSON', () => {
     it('typing in search updates the input value', async () => {
       // Override fetch to return GeoJSON with FR feature
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -519,16 +503,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-019: confirm popup shows via Enter on search with GeoJSON', () => {
     it('pressing Enter in search with matching GeoJSON result triggers confirm popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -600,16 +577,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-022: confirm popup for bucket type shows month/year selects', () => {
     it('selecting Add to bucket list in confirm popup shows month/year pickers', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -642,16 +612,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-031: confirm popup opens and mark-visited action works', () => {
     it('opens confirm popup via search and clicking Mark as visited closes it', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -710,16 +673,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-032: confirm popup Add to Bucket opens bucket type', () => {
     it('clicking Add to bucket list in choose popup switches to bucket type', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -851,16 +807,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-029: confirm popup opens via search dropdown click', () => {
     it('clicking a country in the search dropdown opens the confirm action popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -914,16 +863,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-030: confirm popup overlay click closes it', () => {
     it('clicking the overlay backdrop closes the confirm popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({
-            ok: true,
-            json: () => Promise.resolve(geoJsonWithFR),
-          } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1000,13 +942,9 @@ describe('AtlasPage', () => {
           { type: 'Feature', properties: { ISO_A2: 'DE', ADM0_A3: 'DEU', ISO_A3: 'DEU', NAME: 'Germany', ADMIN: 'Germany' }, geometry: null },
         ],
       };
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonFRandDE) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonFRandDE)),
+      );
 
       render(<AtlasPage />);
 
@@ -1023,13 +961,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-034: dropdown button click + mouse events', () => {
     it('clicking France dropdown button covers onClick and mouse event handlers', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -1100,13 +1034,9 @@ describe('AtlasPage', () => {
         http.get('/api/addons/atlas/stats', () => HttpResponse.json(emptyAtlasResponse)),
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
       );
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1158,13 +1088,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-036: bucket popup submit action', () => {
     it('submits a bucket list item from the confirm popup', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/bucket-list', () =>
@@ -1321,13 +1247,9 @@ describe('AtlasPage', () => {
           },
         ],
       };
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithXK) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithXK)),
+      );
 
       render(<AtlasPage />);
 
@@ -1345,13 +1267,9 @@ describe('AtlasPage', () => {
       { a3: 'FRA', name: 'France', query: 'france' },
       { a3: 'NOR', name: 'Norway', query: 'norway' },
     ])('returns $name in search results when GeoJSON provides ADM0_A3=$a3 but ISO_A2 is -99', async ({ a3, name, query }) => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(makeGeoJsonWithA3Fallback(a3, name)) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(makeGeoJsonWithA3Fallback(a3, name))),
+      );
 
       const user = userEvent.setup();
       render(<AtlasPage />);
@@ -1459,13 +1377,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-044: direct France dropdown button click', () => {
     it('directly finds and clicks the France button in the dropdown to cover onClick', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.post('/api/addons/atlas/country/:code/mark', () => HttpResponse.json({ success: true })),
@@ -1517,13 +1431,9 @@ describe('AtlasPage', () => {
 
   describe('FE-PAGE-ATLAS-045: dark mode toggle covers map re-init + loadRegionsForViewport', () => {
     it('switching to dark mode re-initializes map and covers region loading code path', async () => {
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonWithFR) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonWithFR)),
+      );
 
       server.use(
         http.get('/api/addons/atlas/regions/geo', () => HttpResponse.json({ features: [] })),
@@ -1636,13 +1546,9 @@ describe('AtlasPage', () => {
           { type: 'Feature', properties: { ISO_A2: 'IT', ADM0_A3: 'ITA', ISO_A3: 'ITA', NAME: 'Italy', ADMIN: 'Italy' }, geometry: null },
         ],
       };
-      vi.spyOn(global, 'fetch').mockImplementation((url) => {
-        const urlStr = String(url);
-        if (urlStr.includes('geojson') || urlStr.includes('githubusercontent')) {
-          return Promise.resolve({ ok: true, json: () => Promise.resolve(geoJsonFRandIT) } as Response);
-        }
-        return Promise.reject(new Error(`Unmocked fetch: ${urlStr}`));
-      });
+      server.use(
+        http.get('/api/addons/atlas/countries/geo', () => HttpResponse.json(geoJsonFRandIT)),
+      );
 
       render(<AtlasPage />);
 

client/src/pages/DashboardPage.test.tsx

@@ -226,7 +226,7 @@ describe('DashboardPage', () => {
       await user.click(archiveButtons[0]);
 
       // Switch to the archive filter segment
-      await user.click(screen.getByText('Archive'));
+      await user.click(screen.getByText('Archived'));
 
       await waitFor(() => {
         expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
@@ -293,7 +293,7 @@ describe('DashboardPage', () => {
       });
 
       // Switch to the archive filter
-      await user.click(screen.getByText('Archive'));
+      await user.click(screen.getByText('Archived'));
 
       await waitFor(() => {
         expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
@@ -442,7 +442,7 @@ describe('DashboardPage', () => {
       });
 
       // Switch to the archive filter
-      await user.click(screen.getByText('Archive'));
+      await user.click(screen.getByText('Archived'));
 
       await waitFor(() => {
         expect(screen.getByText('Old Rome Trip')).toBeInTheDocument();
@@ -644,7 +644,7 @@ describe('DashboardPage', () => {
       });
 
       // Archive filter reveals the archived trip
-      await user.click(screen.getByText('Archive'));
+      await user.click(screen.getByText('Archived'));
       await waitFor(() => {
         expect(screen.getByText('Old Archived Trip')).toBeInTheDocument();
       });
@@ -687,7 +687,7 @@ describe('DashboardPage', () => {
         expect(screen.getAllByText('My Active Trip')[0]).toBeInTheDocument();
       });
 
-      await user.click(screen.getByText('Archive'));
+      await user.click(screen.getByText('Archived'));
 
       await waitFor(() => {
         expect(screen.getByText('Restored Trip')).toBeInTheDocument();

client/src/pages/DashboardPage.tsx

@@ -16,7 +16,7 @@ import {
 import {
   Plus, Edit2, Trash2, Archive, Copy, ArrowRight, MapPin,
   Plane, Hotel, Utensils, Clock, RefreshCw, ArrowRightLeft, Calendar,
-  LayoutGrid, List, SlidersHorizontal, Ticket, X,
+  LayoutGrid, List, Ticket, X,
 } from 'lucide-react'
 import '../styles/dashboard.css'
 
@@ -120,15 +120,12 @@ export default function DashboardPage(): React.ReactElement {
                 <div className="sec-tools">
                   <div className="seg">
                     <button className={tripFilter === 'planned' ? 'on' : ''} onClick={() => setTripFilter('planned')}>{t('dashboard.filter.planned')}</button>
-                    <button className={tripFilter === 'archive' ? 'on' : ''} onClick={() => setTripFilter('archive')}>{t('dashboard.archive')}</button>
+                    <button className={tripFilter === 'archive' ? 'on' : ''} onClick={() => setTripFilter('archive')}>{t('dashboard.archived')}</button>
                     <button className={tripFilter === 'completed' ? 'on' : ''} onClick={() => setTripFilter('completed')}>{t('dashboard.mobile.completed')}</button>
                   </div>
                   <button className="tool-action" aria-label={t('dashboard.aria.toggleView')} onClick={toggleViewMode} style={{ width: 38, height: 38, borderRadius: 11 }}>
                     {viewMode === 'grid' ? <List size={17} /> : <LayoutGrid size={17} />}
                   </button>
-                  <button className="tool-action" aria-label={t('dashboard.aria.filter')} style={{ width: 38, height: 38, borderRadius: 11 }}>
-                    <SlidersHorizontal size={17} />
-                  </button>
                 </div>
               </div>
 

client/src/pages/LoginPage.tsx

@@ -491,6 +491,7 @@ export default function LoginPage(): React.ReactElement {
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMfaCode(e.target.value.toUpperCase().slice(0, 24))}
                       placeholder="000000 or XXXX-XXXX"
                       required
+                      autoFocus
                       style={inputBase}
                       onFocus={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#111827'}
                       onBlur={(e: React.FocusEvent<HTMLInputElement>) => e.target.style.borderColor = '#e5e7eb'}

client/src/pages/TripPlannerPage.tsx

@@ -5,6 +5,7 @@ import { useTripStore } from '../store/tripStore'
 import { useCanDo } from '../store/permissionsStore'
 import { useSettingsStore } from '../store/settingsStore'
 import { MapViewAuto as MapView } from '../components/Map/MapViewAuto'
+import { MapCompassPill } from '../components/Map/MapCompassPill'
 import { getCached, fetchPhoto } from '../services/photoService'
 import DayPlanSidebar from '../components/Planner/DayPlanSidebar'
 import PlacesSidebar from '../components/Planner/PlacesSidebar'
@@ -17,6 +18,7 @@ import TripMembersModal from '../components/Trips/TripMembersModal'
 import { ReservationModal } from '../components/Planner/ReservationModal'
 import { TransportModal } from '../components/Planner/TransportModal'
 import BookingImportModal from '../components/Planner/BookingImportModal'
+import AirTrailImportModal from '../components/Planner/AirTrailImportModal'
 // MemoriesPanel moved to Journey addon
 import ReservationsPanel from '../components/Planner/ReservationsPanel'
 import PackingListPanel from '../components/Packing/PackingListPanel'
@@ -42,6 +44,8 @@ import { usePlannerHistory } from '../hooks/usePlannerHistory'
 import type { Accommodation, TripMember, Day, Place, Reservation, PackingItem, TodoItem } from '../types'
 import { ListTodo, Upload, Plus, Trash2, FolderPlus } from 'lucide-react'
 import { useTripPlanner } from './tripPlanner/useTripPlanner'
+import { usePoiExplore } from '../components/Map/usePoiExplore'
+import PoiCategoryPill from '../components/Map/PoiCategoryPill'
 
 function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; packingItems: PackingItem[]; todoItems: TodoItem[] }) {
   const [subTab, setSubTab] = useState<'packing' | 'todo'>(() => {
@@ -53,6 +57,7 @@ function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; p
   const [saveTemplateSignal, setSaveTemplateSignal] = useState(0)
   const [addTodoSignal, setAddTodoSignal] = useState(0)
   const { t } = useTranslation()
+  const isAdmin = useAuthStore(s => s.user?.role === 'admin')
 
   const tabs = [
     { id: 'packing' as const, label: t('todo.subtab.packing'), icon: PackageCheck, count: packingItems.length },
@@ -121,7 +126,7 @@ function ListsContainer({ tripId, packingItems, todoItems }: { tripId: number; p
                   className={`${sharedBtnClass} bg-accent text-accent-text`}
                   style={sharedBtnStyle}
                 />
-                {packingItems.length > 0 && (
+                {isAdmin && packingItems.length > 0 && (
                   <button onClick={() => setSaveTemplateSignal(s => s + 1)}
                     className={`${sharedBtnClass} bg-accent text-accent-text`}
                     style={sharedBtnStyle}
@@ -184,6 +189,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
     showTripForm, setShowTripForm, showMembersModal, setShowMembersModal,
     showReservationModal, setShowReservationModal, editingReservation, setEditingReservation,
     showBookingImport, setShowBookingImport, bookingImportAvailable,
+    airTrailAvailable, showAirTrailImport, setShowAirTrailImport,
     bookingForAssignmentId, setBookingForAssignmentId,
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
@@ -194,14 +200,18 @@ export default function TripPlannerPage(): React.ReactElement | null {
     isMobile, mapCategoryFilter, setMapCategoryFilter, mapPlacesFilter, setMapPlacesFilter,
     expandedDayIds, setExpandedDayIds, mapPlaces,
     route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
-    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu,
+    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
     handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
-    handleAssignToDay, handleRemoveAssignment, handleReorder, handleUpdateDayTitle,
+    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
     handleSaveReservation, handleSaveTransport, handleDeleteReservation,
     selectedPlace, dayOrderMap, dayPlaces,
     mapTileUrl, defaultCenter, defaultZoom, fontStyle, splashDone,
   } = useTripPlanner()
 
+  const poi = usePoiExplore()
+  const [glMap, setGlMap] = useState<import('mapbox-gl').Map | null>(null)
+  const poiPillEnabled = useSettingsStore(s => s.settings.map_poi_pill_enabled) !== false
+
   if (isLoading || !splashDone) {
     return (
       <div className="bg-surface" style={{
@@ -299,8 +309,20 @@ export default function TripPlannerPage(): React.ReactElement | null {
                 const r = reservations.find(x => x.id === rid)
                 if (r) setMapTransportDetail(r)
               }}
+              pois={poi.pois}
+              onPoiClick={openAddPlaceFromPoi}
+              onViewportChange={poi.onViewportChange}
+              onMapReady={setGlMap}
             />
 
+            {(poiPillEnabled || glMap) && (
+              <div className="hidden md:flex" style={{ position: 'absolute', top: 14, left: '50%', transform: 'translateX(-50%)', zIndex: 25, pointerEvents: 'none', alignItems: 'flex-start', gap: 8 }}>
+                {poiPillEnabled && (
+                  <PoiCategoryPill active={poi.active} onToggle={poi.toggle} loadingKeys={poi.loadingKeys} errorKeys={poi.errorKeys} moved={poi.moved} onSearchArea={poi.searchArea} />
+                )}
+                {glMap && <MapCompassPill map={glMap} />}
+              </div>
+            )}
 
             <div className="hidden md:block" style={{ position: 'absolute', left: 10, top: 10, bottom: 10, zIndex: 20 }}>
               <button onClick={() => setLeftCollapsed(c => !c)}
@@ -341,6 +363,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   onSelectDay={handleSelectDay}
                   onPlaceClick={handlePlaceClick}
                   onReorder={handleReorder}
+                  onReorderDays={handleReorderDays}
+                  onAddDay={handleAddDay}
                   onUpdateDayTitle={handleUpdateDayTitle}
                   onAssignToDay={handleAssignToDay}
                   onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } else { setRoute(null); setRouteInfo(null) } }}
@@ -592,7 +616,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                   </div>
                   <div style={{ flex: 1, overflow: 'auto' }}>
                     {mobileSidebarOpen === 'left'
-                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId) }} onReorder={handleReorder} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} />
+                      ? <DayPlanSidebar tripId={tripId} trip={trip} days={days} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} selectedAssignmentId={selectedAssignmentId} onSelectDay={(id) => { handleSelectDay(id); setMobileSidebarOpen(null) }} onPlaceClick={(placeId, assignmentId) => { handlePlaceClick(placeId, assignmentId) }} onReorder={handleReorder} onReorderDays={handleReorderDays} onAddDay={handleAddDay} onUpdateDayTitle={handleUpdateDayTitle} onAssignToDay={handleAssignToDay} onRouteCalculated={(r) => { if (r) { setRoute([r.coordinates]); setRouteInfo(r) } }} reservations={reservations} visibleConnectionIds={visibleConnections} onToggleConnection={toggleConnection} onAddReservation={(dayId) => { setEditingReservation(null); tripActions.setSelectedDay(dayId); setShowReservationModal(true); setMobileSidebarOpen(null) }} onAddTransport={can('day_edit', trip) ? (dayId) => { setTransportModalDayId(dayId); setEditingTransport(null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDayDetail={(day) => { setShowDayDetail(day); setSelectedPlaceId(null); selectAssignment(null) }} onRemoveAssignment={handleRemoveAssignment} onEditPlace={(place, assignmentId) => { setEditingPlace(place); setEditingAssignmentId(assignmentId || null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} accommodations={tripAccommodations} routeShown={routeShown} routeProfile={routeProfile} onToggleRoute={() => setRouteShown(v => !v)} onSetRouteProfile={setRouteProfile} onNavigateToFiles={() => { setMobileSidebarOpen(null); handleTabChange('dateien') }} onExpandedDaysChange={setExpandedDayIds} pushUndo={pushUndo} canUndo={canUndo} lastActionLabel={lastActionLabel} onUndo={handleUndo} onEditTransport={can('day_edit', trip) ? (reservation) => { setEditingTransport(reservation); setTransportModalDayId(reservation.day_id ?? null); setShowTransportModal(true); setMobileSidebarOpen(null) } : undefined} onEditReservation={can('reservation_edit', trip) ? (r) => { setEditingReservation(r); setShowReservationModal(true); setMobileSidebarOpen(null) } : undefined} initialScrollTop={mobilePlanScrollTopRef.current} onScrollTopChange={(top) => { mobilePlanScrollTopRef.current = top }} showRouteToolsWhenExpanded />
                       : <PlacesSidebar tripId={tripId} places={places} categories={categories} assignments={assignments} selectedDayId={selectedDayId} selectedPlaceId={selectedPlaceId} onPlaceClick={(placeId) => { handlePlaceClick(placeId); setMobileSidebarOpen(null) }} onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onAssignToDay={handleAssignToDay} onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true); setMobileSidebarOpen(null) }} onDeletePlace={(placeId) => handleDeletePlace(placeId)} onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)} onBulkDeleteConfirm={(ids) => confirmDeletePlaces(ids)} days={days} isMobile onCategoryFilterChange={setMapCategoryFilter} onPlacesFilterChange={setMapPlacesFilter} pushUndo={pushUndo} initialScrollTop={mobilePlacesScrollTopRef.current} onScrollTopChange={(top) => { mobilePlacesScrollTopRef.current = top }} />
                     }
                   </div>
@@ -612,6 +636,8 @@ export default function TripPlannerPage(): React.ReactElement | null {
               assignments={assignments}
               files={files}
               onAdd={() => { setEditingTransport(null); setShowTransportModal(true) }}
+              onAirTrailImport={() => setShowAirTrailImport(true)}
+              airTrailAvailable={airTrailAvailable}
               onEdit={(r) => { setEditingTransport(r); setShowTransportModal(true) }}
               onDelete={handleDeleteReservation}
               onNavigateToFiles={() => handleTabChange('dateien')}
@@ -681,6 +707,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
       <ReservationModal isOpen={showReservationModal} onClose={() => { setShowReservationModal(false); setEditingReservation(null); setBookingForAssignmentId(null) }} onSave={handleSaveReservation} reservation={editingReservation} days={days} places={places} assignments={assignments} selectedDayId={selectedDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} accommodations={tripAccommodations} defaultAssignmentId={bookingForAssignmentId} />
       {showTransportModal && <TransportModal isOpen={showTransportModal} onClose={() => { setShowTransportModal(false); setEditingTransport(null); setTransportModalDayId(null) }} onSave={handleSaveTransport} reservation={editingTransport} days={days} selectedDayId={transportModalDayId} files={files} onFileUpload={canUploadFiles ? (fd) => tripActions.addFile(tripId, fd) : undefined} onFileDelete={(id) => tripActions.deleteFile(tripId, id)} />}
       <BookingImportModal isOpen={showBookingImport} onClose={() => setShowBookingImport(false)} tripId={tripId} pushUndo={pushUndo} />
+      <AirTrailImportModal isOpen={showAirTrailImport} onClose={() => setShowAirTrailImport(false)} tripId={tripId} pushUndo={pushUndo} />
       <ConfirmDialog
         isOpen={!!deletePlaceId}
         onClose={() => setDeletePlaceId(null)}

client/src/pages/admin/AdminUserModals.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { adminApi } from '../../api/client'
 import Modal from '../../components/shared/Modal'
 import CustomSelect from '../../components/shared/CustomSelect'
-import { CheckCircle, ArrowUpCircle, ExternalLink, RefreshCw, AlertTriangle, Fingerprint } from 'lucide-react'
+import { CheckCircle, ArrowUpCircle, ExternalLink, RefreshCw, AlertTriangle, Fingerprint, Eye, EyeOff } from 'lucide-react'
 import type { TranslationFn } from '../../types'
 import type { useAdmin } from './useAdmin'
 
@@ -22,6 +22,8 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
     showRotateJwtModal, setShowRotateJwtModal, rotatingJwt, setRotatingJwt,
     handleCreateUser, handleSaveUser,
   } = admin
+  const [showCreatePw, setShowCreatePw] = React.useState(false)
+  const [showEditPw, setShowEditPw] = React.useState(false)
 
   return (
     <>
@@ -71,13 +73,24 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('common.password')} *</label>
-            <input
-              type="password"
-              value={createForm.password}
-              onChange={e => setCreateForm(f => ({ ...f, password: e.target.value }))}
-              placeholder={t('common.password')}
-              className="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
-            />
+            <div className="relative">
+              <input
+                type={showCreatePw ? 'text' : 'password'}
+                value={createForm.password}
+                onChange={e => setCreateForm(f => ({ ...f, password: e.target.value }))}
+                placeholder={t('common.password')}
+                className="w-full px-3 py-2.5 pr-10 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
+              />
+              <button
+                type="button"
+                onClick={() => setShowCreatePw(v => !v)}
+                tabIndex={-1}
+                aria-label="Show or hide password"
+                className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600"
+              >
+                {showCreatePw ? <EyeOff size={16} /> : <Eye size={16} />}
+              </button>
+            </div>
           </div>
           <div>
             <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.role')}</label>
@@ -138,13 +151,24 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('admin.newPassword')} <span className="text-slate-400 font-normal">({t('admin.newPasswordHint')})</span></label>
-              <input
-                type="password"
-                value={editForm.password}
-                onChange={e => setEditForm(f => ({ ...f, password: e.target.value }))}
-                placeholder={t('admin.newPasswordPlaceholder')}
-                className="w-full px-3 py-2.5 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
-              />
+              <div className="relative">
+                <input
+                  type={showEditPw ? 'text' : 'password'}
+                  value={editForm.password}
+                  onChange={e => setEditForm(f => ({ ...f, password: e.target.value }))}
+                  placeholder={t('admin.newPasswordPlaceholder')}
+                  className="w-full px-3 py-2.5 pr-10 border border-slate-300 rounded-lg text-slate-900 focus:ring-2 focus:ring-slate-400 focus:border-transparent text-sm"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowEditPw(v => !v)}
+                  tabIndex={-1}
+                  aria-label="Show or hide password"
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-1 text-slate-400 hover:text-slate-600"
+                >
+                  {showEditPw ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
             </div>
             <div>
               <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.role')}</label>

client/src/pages/admin/AdminUsersTab.tsx

@@ -15,7 +15,7 @@ interface AdminUsersTabProps {
 // create-invite modal. Pure layout around the useAdmin hook — no logic of its own.
 export default function AdminUsersTab({ admin, t, locale }: AdminUsersTabProps): React.ReactElement {
   const {
-    serverTimezone, hour12, currentUser,
+    hour12, currentUser,
     users, isLoading,
     setShowCreateUser,
     invites, showCreateInvite, setShowCreateInvite, inviteForm, setInviteForm,
@@ -92,10 +92,10 @@ export default function AdminUsersTab({ admin, t, locale }: AdminUsersTabProps):
                       </span>
                     </td>
                     <td className="px-5 py-3 text-sm text-slate-500">
-                      {new Date(u.created_at).toLocaleDateString(locale, { timeZone: serverTimezone })}
+                      {new Date(u.created_at).toLocaleDateString(locale)}
                     </td>
                     <td className="px-5 py-3 text-sm text-slate-500">
-                      {u.last_login ? new Date(u.last_login).toLocaleDateString(locale, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12, timeZone: serverTimezone }) : '—'}
+                      {u.last_login ? new Date(u.last_login).toLocaleDateString(locale, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit', hour12 }) : '—'}
                     </td>
                     <td className="px-5 py-3">
                       <div className="flex items-center gap-2 justify-end">
@@ -162,7 +162,7 @@ export default function AdminUsersTab({ admin, t, locale }: AdminUsersTabProps):
                     </div>
                     <div className="text-xs text-slate-400 mt-0.5">
                       {inv.used_count}/{inv.max_uses === 0 ? '∞' : inv.max_uses} {t('admin.invite.uses')}
-                      {inv.expires_at && ` · ${t('admin.invite.expiresAt')} ${new Date(inv.expires_at).toLocaleDateString(locale, { timeZone: serverTimezone })}`}
+                      {inv.expires_at && ` · ${t('admin.invite.expiresAt')} ${new Date(inv.expires_at).toLocaleDateString(locale)}`}
                       {` · ${t('admin.invite.createdBy')} ${inv.created_by_name}`}
                     </div>
                   </div>

client/src/pages/atlas/useAtlas.ts

@@ -132,18 +132,19 @@ export function useAtlas() {
     }).catch(() => setLoading(false))
   }, [])
 
-  // Load GeoJSON world data (direct GeoJSON, no conversion needed)
+  // Load country-border GeoJSON from our API (geoBoundaries, served server-side —
+  // no third-party fetch from the browser).
   useEffect(() => {
-    fetch('https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson')
-      .then(r => r.json())
-      .then(geo => {
+    apiClient.get('/addons/atlas/countries/geo')
+      .then(res => {
+        const geo = res.data
         // Dynamically build A2→A3 mapping from GeoJSON
         for (const f of geo.features) {
           const a2 = f.properties?.ISO_A2
           const a3 = f.properties?.ADM0_A3 || f.properties?.ISO_A3
-          // Only real 2-letter ISO codes: natural-earth uses subdivision-style
-          // values like "CN-TW" for Taiwan, which would otherwise overwrite the
-          // legitimate TWN->TW reverse mapping and break the country (#1049).
+          // Only accept clean 2-letter ISO codes and never overwrite an existing
+          // mapping: some datasets carry subdivision-style values like "CN-TW" for
+          // Taiwan, which would clobber the legitimate TWN->TW entry (#1049).
           if (a2 && a3 && a2.length === 2 && a2 !== '-99' && a3 !== '-99' && !A2_TO_A3[a2]) {
             A2_TO_A3[a2] = a3
           }

client/src/pages/settings/useSettings.ts

@@ -16,7 +16,8 @@ export function useSettings() {
 
   const memoriesEnabled = addonEnabled('memories')
   const mcpEnabled = addonEnabled('mcp')
-  const hasIntegrations = memoriesEnabled || mcpEnabled
+  const airtrailEnabled = addonEnabled('airtrail')
+  const hasIntegrations = memoriesEnabled || mcpEnabled || airtrailEnabled
 
   const [appVersion, setAppVersion] = useState<string | null>(null)
   const [activeTab, setActiveTab] = useState('display')

client/src/pages/tripPlanner/useTripPlanner.ts

@@ -7,7 +7,7 @@ import { getCached, fetchPhoto } from '../../services/photoService'
 import { useToast } from '../../components/shared/Toast'
 import { Map, Ticket, PackageCheck, Wallet, FolderOpen, Users, Train } from 'lucide-react'
 import { useTranslation } from '../../i18n'
-import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, healthApi } from '../../api/client'
+import { addonsApi, accommodationsApi, authApi, tripsApi, assignmentsApi, healthApi, airtrailApi } from '../../api/client'
 import { accommodationRepo } from '../../repo/accommodationRepo'
 import { offlineDb } from '../../db/offlineDb'
 import { useAuthStore } from '../../store/authStore'
@@ -16,6 +16,7 @@ import { useTripWebSocket } from '../../hooks/useTripWebSocket'
 import { useRouteCalculation } from '../../hooks/useRouteCalculation'
 import { usePlaceSelection } from '../../hooks/usePlaceSelection'
 import { usePlannerHistory } from '../../hooks/usePlannerHistory'
+import { useAirtrailConnection } from '../../hooks/useAirtrailConnection'
 import type { Accommodation, TripMember, Day, Place, Reservation } from '../../types'
 
 /**
@@ -123,7 +124,7 @@ export function useTripPlanner() {
   const [dayDetailCollapsed, setDayDetailCollapsed] = useState(false)
   const [showPlaceForm, setShowPlaceForm] = useState<boolean>(false)
   const [editingPlace, setEditingPlace] = useState<Place | null>(null)
-  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string } | null>(null)
+  const [prefillCoords, setPrefillCoords] = useState<{ lat: number; lng: number; name?: string; address?: string; website?: string; phone?: string; osm_id?: string } | null>(null)
   const [editingAssignmentId, setEditingAssignmentId] = useState<number | null>(null)
   const [searchParams, setSearchParams] = useSearchParams()
 
@@ -140,6 +141,18 @@ export function useTripPlanner() {
   const [editingReservation, setEditingReservation] = useState<Reservation | null>(null)
   const [showBookingImport, setShowBookingImport] = useState<boolean>(false)
   const [bookingImportAvailable, setBookingImportAvailable] = useState<boolean>(false)
+  const { available: airTrailAvailable } = useAirtrailConnection()
+  const [showAirTrailImport, setShowAirTrailImport] = useState<boolean>(false)
+  // Pull this user's AirTrail edits as soon as they open the trip, so changes
+  // made in AirTrail show up without waiting for the background poll.
+  const airtrailSyncedRef = useRef<number | null>(null)
+  useEffect(() => {
+    if (!airTrailAvailable || !tripId || airtrailSyncedRef.current === tripId) return
+    airtrailSyncedRef.current = tripId
+    airtrailApi.sync()
+      .then(r => { if (r && r.changed > 0) tripActions.loadReservations(tripId) })
+      .catch(() => {})
+  }, [airTrailAvailable, tripId, tripActions])
   const [bookingForAssignmentId, setBookingForAssignmentId] = useState<number | null>(null)
   const [showTransportModal, setShowTransportModal] = useState<boolean>(false)
   const [editingTransport, setEditingTransport] = useState<Reservation | null>(null)
@@ -356,6 +369,24 @@ export function useTripPlanner() {
     } catch { /* best effort */ }
   }, [language])
 
+  // Open the Add-Place form pre-filled from an OSM "explore" POI marker — all the
+  // data already comes from the POI, so no reverse-geocode is needed.
+  const openAddPlaceFromPoi = useCallback((poi: { lat: number; lng: number; name: string; address: string | null; website: string | null; phone: string | null; osm_id: string }) => {
+    if (!can('place_edit', trip)) return
+    setPrefillCoords({
+      lat: poi.lat,
+      lng: poi.lng,
+      name: poi.name,
+      address: poi.address || '',
+      website: poi.website || undefined,
+      phone: poi.phone || undefined,
+      osm_id: poi.osm_id,
+    })
+    setEditingPlace(null)
+    setEditingAssignmentId(null)
+    setShowPlaceForm(true)
+  }, [trip])
+
   const handleSavePlace = useCallback(async (data) => {
     const pendingFiles = data._pendingFiles
     delete data._pendingFiles
@@ -523,6 +554,23 @@ export function useTripPlanner() {
     catch (err: unknown) { toast.error(err instanceof Error ? err.message : t('common.unknownError')) }
   }, [tripId, toast])
 
+  const handleReorderDays = useCallback((orderedIds: number[]) => {
+    const prevIds = (useTripStore.getState().days || [])
+      .slice().sort((a, b) => (a.day_number ?? 0) - (b.day_number ?? 0)).map(d => d.id)
+    tripActions.reorderDays(tripId, orderedIds)
+      .then(() => {
+        pushUndo(t('dayplan.reorderUndo'), async () => {
+          await tripActions.reorderDays(tripId, prevIds)
+        })
+      })
+      .catch(err => toast.error(err instanceof Error ? err.message : t('dayplan.reorderError')))
+  }, [tripId, toast, pushUndo])
+
+  const handleAddDay = useCallback((position?: number) => {
+    tripActions.insertDay(tripId, position)
+      .catch(err => toast.error(err instanceof Error ? err.message : t('dayplan.addDayError')))
+  }, [tripId, toast])
+
   const handleSaveReservation = async (data: Record<string, string | number | null> & { title: string }) => {
     try {
       if (editingReservation) {
@@ -631,6 +679,7 @@ export function useTripPlanner() {
     showTripForm, setShowTripForm, showMembersModal, setShowMembersModal,
     showReservationModal, setShowReservationModal, editingReservation, setEditingReservation,
     showBookingImport, setShowBookingImport, bookingImportAvailable,
+    airTrailAvailable, showAirTrailImport, setShowAirTrailImport,
     bookingForAssignmentId, setBookingForAssignmentId,
     showTransportModal, setShowTransportModal, editingTransport, setEditingTransport,
     transportModalDayId, setTransportModalDayId,
@@ -641,9 +690,9 @@ export function useTripPlanner() {
     isMobile, mapCategoryFilter, setMapCategoryFilter, mapPlacesFilter, setMapPlacesFilter,
     expandedDayIds, setExpandedDayIds, mapPlaces,
     route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
-    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu,
+    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
     handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
-    handleAssignToDay, handleRemoveAssignment, handleReorder, handleUpdateDayTitle,
+    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
     handleSaveReservation, handleSaveTransport, handleDeleteReservation,
     selectedPlace, dayOrderMap, dayPlaces,
     mapTileUrl, defaultCenter, defaultZoom, fontStyle, splashDone,

client/src/store/addonStore.ts

@@ -24,6 +24,7 @@ interface Addon {
 
 interface AddonState {
   addons: Addon[]
+  bagTracking: boolean
   loaded: boolean
   loadAddons: () => Promise<void>
   isEnabled: (id: string) => boolean
@@ -31,12 +32,13 @@ interface AddonState {
 
 export const useAddonStore = create<AddonState>((set, get) => ({
   addons: [],
+  bagTracking: false,
   loaded: false,
 
   loadAddons: async () => {
     try {
       const data = await addonsApi.enabled()
-      set({ addons: data.addons || [], loaded: true })
+      set({ addons: data.addons || [], bagTracking: !!data.bagTracking, loaded: true })
     } catch {
       set({ loaded: true })
     }

client/src/store/settingsStore.ts

@@ -32,7 +32,9 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
     temperature_unit: 'fahrenheit',
     time_format: '12h',
     show_place_description: false,
+    optimize_from_accommodation: true,
     map_provider: 'leaflet',
+    map_poi_pill_enabled: true,
     mapbox_access_token: '',
     mapbox_style: 'mapbox://styles/mapbox/standard',
     mapbox_3d_enabled: true,

client/src/store/slices/daysSlice.ts

@@ -0,0 +1,58 @@
+import { daysApi } from '../../api/client'
+import type { StoreApi } from 'zustand'
+import type { TripStoreState } from '../tripStore'
+import type { Day } from '../../types'
+import { getApiErrorMessage } from '../../types'
+
+type SetState = StoreApi<TripStoreState>['setState']
+type GetState = StoreApi<TripStoreState>['getState']
+
+export interface DaysSlice {
+  reorderDays: (tripId: number | string, orderedIds: number[]) => Promise<void>
+  insertDay: (tripId: number | string, position?: number) => Promise<Day | undefined>
+}
+
+export const createDaysSlice = (set: SetState, get: GetState): DaysSlice => ({
+  // Move whole days. Day rows stay stable (assignments/notes/bookings ride along
+  // by id); only positions change and, on a dated trip, dates stay pinned to
+  // their slots while the content moves across them. Optimistically reorder the
+  // list, then refresh to pull the server-side re-stamped dates + booking times.
+  reorderDays: async (tripId, orderedIds) => {
+    const prevDays = get().days
+    const byId = new Map(prevDays.map(d => [d.id, d]))
+    const sortedDates = prevDays.map(d => d.date).filter((d): d is string => !!d).sort()
+    const optimistic = orderedIds
+      .map((id, i) => {
+        const d = byId.get(id)
+        if (!d) return null
+        return { ...d, day_number: i + 1, date: sortedDates.length ? (sortedDates[i] ?? null) : d.date }
+      })
+      .filter((d): d is NonNullable<typeof d> => d !== null)
+
+    set({ days: optimistic })
+
+    try {
+      await daysApi.reorder(tripId, orderedIds)
+      await get().refreshDays(tripId)
+      await get().loadReservations(tripId)
+    } catch (err: unknown) {
+      set({ days: prevDays })
+      throw new Error(getApiErrorMessage(err, 'Error reordering days'))
+    }
+  },
+
+  // Insert a new empty day at a 1-based position (omit to append). On a dated
+  // trip this extends the trip by one day and re-pins dates server-side.
+  insertDay: async (tripId, position) => {
+    const prevDays = get().days
+    try {
+      const result = await daysApi.create(tripId, { position })
+      await get().refreshDays(tripId)
+      await get().loadReservations(tripId)
+      return result.day
+    } catch (err: unknown) {
+      set({ days: prevDays })
+      throw new Error(getApiErrorMessage(err, 'Error adding day'))
+    }
+  },
+})

client/src/store/slices/remoteEventHandler.ts

@@ -283,6 +283,15 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
           dayNotes: newDayNotes,
         }
       }
+      case 'day:reordered': {
+        // Apply the new order instantly when we know all ids; the authoritative
+        // dates + re-stamped booking times are pulled by the refresh below.
+        const orderedIds = payload.orderedIds as number[] | undefined
+        if (!orderedIds || orderedIds.length !== state.days.length) return {}
+        const byId = new Map(state.days.map(d => [d.id, d]))
+        if (!orderedIds.every(id => byId.has(id))) return {}
+        return { days: orderedIds.map((id, i) => ({ ...byId.get(id)!, day_number: i + 1 })) }
+      }
 
       // Day Notes
       case 'dayNote:created': {
@@ -442,6 +451,16 @@ export function handleRemoteEvent(set: SetState, get: GetState, event: WebSocket
     }
   })
 
+  // A reorder/insert re-pins dates and re-stamps booking times server-side, so
+  // pull the authoritative days + reservations for collaborators.
+  if (type === 'day:reordered') {
+    const tripId = get().trip?.id
+    if (tripId) {
+      get().refreshDays(tripId)
+      get().loadReservations(tripId)
+    }
+  }
+
   // Write the change through to IndexedDB using the post-update state
   writeToDexie(type, payload as Record<string, unknown>, get())
 }

client/src/store/tripStore.ts

@@ -9,6 +9,7 @@ import { packingRepo } from '../repo/packingRepo'
 import { todoRepo } from '../repo/todoRepo'
 import { createPlacesSlice } from './slices/placesSlice'
 import { createAssignmentsSlice } from './slices/assignmentsSlice'
+import { createDaysSlice } from './slices/daysSlice'
 import { createDayNotesSlice } from './slices/dayNotesSlice'
 import { createPackingSlice } from './slices/packingSlice'
 import { createTodoSlice } from './slices/todoSlice'
@@ -24,6 +25,7 @@ import type {
 import { getApiErrorMessage } from '../types'
 import type { PlacesSlice } from './slices/placesSlice'
 import type { AssignmentsSlice } from './slices/assignmentsSlice'
+import type { DaysSlice } from './slices/daysSlice'
 import type { DayNotesSlice } from './slices/dayNotesSlice'
 import type { PackingSlice } from './slices/packingSlice'
 import type { TodoSlice } from './slices/todoSlice'
@@ -34,6 +36,7 @@ import type { FilesSlice } from './slices/filesSlice'
 export interface TripStoreState
   extends PlacesSlice,
     AssignmentsSlice,
+    DaysSlice,
     DayNotesSlice,
     PackingSlice,
     TodoSlice,
@@ -184,6 +187,7 @@ export const useTripStore = create<TripStoreState>((set, get) => ({
 
   ...createPlacesSlice(set, get),
   ...createAssignmentsSlice(set, get),
+  ...createDaysSlice(set, get),
   ...createDayNotesSlice(set, get),
   ...createPackingSlice(set, get),
   ...createTodoSlice(set, get),

client/src/styles/dashboard.css

@@ -378,8 +378,12 @@
 .trek-dash .trips.list-view { grid-template-columns: 1fr; gap: 12px; }
 .trek-dash .trips.list-view .trip-card { display: grid; grid-template-columns: 520px 1fr; gap: 0; height: auto; }
 .trek-dash .trips.list-view .trip-cover { border-radius: var(--r-lg) 0 0 var(--r-lg); height: 100px; aspect-ratio: unset; }
-.trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; gap: 48px; }
-.trek-dash .trips.list-view .trip-meta { display: flex; gap: 32px; padding: 0; border: none; }
+.trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: flex-end; padding: 16px 36px; gap: 28px; }
+/* Date rendered as a peer of the counts, set off by a vertical divider rather than
+   floating alone at the far left. */
+.trek-dash .trips.list-view .trip-dates { margin-bottom: 0; gap: 6px; }
+.trek-dash .trips.list-view .trip-dates .date-num { font-size: 15px; font-weight: 600; color: var(--ink); }
+.trek-dash .trips.list-view .trip-meta { display: flex; gap: 28px; padding: 0 0 0 28px; border: none; border-left: 1px solid var(--line); }
 .trek-dash .trip-card {
   position: relative; border-radius: var(--r-xl); overflow: hidden; background: var(--glass-bg);
   border: 1px solid var(--glass-border);
@@ -526,6 +530,9 @@
 
   /* Hero — immersive cover, title only (the pass is its own card below) */
   .trek-dash .hero-trip { height: 340px; margin-bottom: 16px; border-radius: var(--r-xl); }
+  /* No hover on touch — the lift/zoom just sticks after a tap and looks broken. */
+  .trek-dash .hero-trip:hover { transform: none; box-shadow: var(--sh-lg); }
+  .trek-dash .hero-trip:hover img.bg { transform: none; }
   .trek-dash .hero-content { padding: 18px; }
   /* the page already opens with the notification/profile strip, trim its top gap */
   .trek-dash .page { padding-top: 4px; }
@@ -580,8 +587,33 @@
   .trek-dash .trips { grid-template-columns: 1fr; gap: 16px; margin-bottom: 28px; }
   .trek-dash .add-trip-card { min-height: 180px; }
 
+  /* Touch devices have no hover — keep the edit/copy/archive/delete actions
+     visible at all times instead of revealing them on hover. */
+  .trek-dash .trip-actions { opacity: 1; }
+
+  /* Compact list row on mobile — keeps the list view distinct from the grid. The
+     desktop list row uses a 520px cover, which overflowed the phone width: the
+     cover was clipped, the body pushed off-screen, and the fixed 100px cover
+     height left a white strip beneath it. Use a fitting cover that stretches to
+     the row, and show just the title + dates (the counts live in grid view and
+     on the trip itself). */
+  /* Mobile list row → stacked two-row: row 1 is a slim full-width cover banner
+     (image + title overlay + status top-left), row 2 is just the date, centred.
+     The counts stay grid-view-only on mobile. */
+  .trek-dash .trips.list-view .trip-card { grid-template-columns: 1fr; min-height: 0; }
+  .trek-dash .trips.list-view .trip-cover { height: 110px; aspect-ratio: unset; border-radius: 0; }
+  .trek-dash .trips.list-view .trip-cover-content { left: 16px; right: 16px; bottom: 11px; }
+  .trek-dash .trips.list-view .trip-name {
+    font-size: 18px; overflow: hidden; text-overflow: ellipsis;
+    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
+  }
+  .trek-dash .trips.list-view .trip-body { display: flex; align-items: center; justify-content: center; padding: 10px 16px; }
+  .trek-dash .trips.list-view .trip-dates { margin-bottom: 0; justify-content: center; font-size: 12.5px; }
+  .trek-dash .trips.list-view .trip-dates .date-num { font-size: 12.5px; }
+  .trek-dash .trips.list-view .trip-meta { display: none; }
+
   /* Tools — stacked full-width cards (mockup) */
-  .trek-dash .page-sidebar { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin: 0; padding: 0; }
+  .trek-dash .page-sidebar { flex-direction: column; flex-wrap: nowrap; gap: 14px; margin: 0 0 40px; padding: 0; }
   .trek-dash .page-sidebar .tool { flex: none; width: auto; }
 }
 

client/src/types.ts

@@ -113,6 +113,8 @@ export interface Settings {
   show_place_description: boolean
   blur_booking_codes?: boolean
   map_booking_labels?: boolean
+  map_poi_pill_enabled?: boolean
+  optimize_from_accommodation?: boolean
   map_provider?: 'leaflet' | 'mapbox-gl'
   mapbox_access_token?: string
   mapbox_style?: string
@@ -162,6 +164,12 @@ export interface Waypoint {
   lng: number
 }
 
+// Optional fixed start/end points for route optimization (e.g. the day's accommodation).
+export interface RouteAnchors {
+  start?: Waypoint
+  end?: Waypoint
+}
+
 // User with optional OIDC fields
 export interface UserWithOidc extends User {
   oidc_issuer?: string | null

client/src/utils/dayMerge.test.ts

@@ -126,18 +126,18 @@ describe('getMergedItems', () => {
     expect(types).toEqual(['place', 'transport', 'place'])
   })
 
-  it('per-day position overrides time-based insertion', () => {
+  it('orders a timed transport chronologically regardless of a stale per-day position', () => {
     const dayAssignments = [
       { id: 1, order_index: 0, place: { place_time: '08:00' } },
       { id: 2, order_index: 1, place: { place_time: '13:00' } },
     ]
-    // Transport at 10:30 would normally go between the two places
-    // but per-day position 1.5 puts it after the second place
+    // The train is at 10:30, so it sorts between the 08:00 and 13:00 places by time —
+    // timed items are arranged chronologically even if an old manual position exists.
     const dayTransports = [
       { id: 20, type: 'train', day_id: 5, end_day_id: 5, reservation_time: '10:30', day_positions: { 5: 1.5 } },
     ]
     const result = getMergedItems({ dayAssignments, dayNotes: [], dayTransports, dayId: 5 })
     const types = result.map(i => i.type)
-    expect(types).toEqual(['place', 'place', 'transport'])
+    expect(types).toEqual(['place', 'transport', 'place'])
   })
 })

client/src/utils/dayMerge.ts

@@ -39,12 +39,66 @@ export function getDisplayTimeForDay(
   return r.reservation_time || null
 }
 
+/** Per-leg detail of a multi-leg flight, or null for single-leg / non-flight. */
+function parseFlightLegs(r: any): any[] | null {
+  if (r?.type !== 'flight') return null
+  let meta = r.metadata
+  if (typeof meta === 'string') { try { meta = JSON.parse(meta || '{}') } catch { meta = {} } }
+  // Defensive: recover metadata that was accidentally double-encoded by an earlier
+  // bug (a JSON string of a JSON string) so already-saved flights heal on read.
+  if (typeof meta === 'string') { try { meta = JSON.parse(meta || '{}') } catch { meta = {} } }
+  if (meta && Array.isArray(meta.legs) && meta.legs.length > 1) return meta.legs
+  return null
+}
+
+/**
+ * Expand a multi-leg flight into one synthetic reservation per leg that touches
+ * `dayId`, each with its own day span + departure/arrival time so it slots into
+ * the timeline independently. A single-leg flight (or any other reservation) is
+ * returned untouched, so existing behaviour is unchanged.
+ */
+export function expandFlightLegsForDay(
+  r: any,
+  dayId: number,
+  getDayOrder: (id: number) => number,
+  days: Array<{ id: number; date?: string | null }>
+): any[] {
+  const legs = parseFlightLegs(r)
+  if (!legs) return [r]
+  const dateOf = (id: number | null): string | null => (id == null ? null : (days.find(d => d.id === id)?.date ?? null))
+  const thisOrder = getDayOrder(dayId)
+  const out: any[] = []
+  legs.forEach((leg, i) => {
+    const dep = leg.dep_day_id ?? r.day_id ?? null
+    const arr = leg.arr_day_id ?? dep
+    if (dep == null) return
+    const depOrder = getDayOrder(dep)
+    const arrOrder = getDayOrder(arr ?? dep)
+    if (!(thisOrder >= depOrder && thisOrder <= arrOrder)) return
+    const depDate = dateOf(dep)
+    const arrDate = dateOf(arr ?? dep)
+    out.push({
+      ...r,
+      day_id: dep,
+      end_day_id: arr ?? dep,
+      reservation_time: leg.dep_time ? (depDate ? `${depDate}T${leg.dep_time}` : leg.dep_time) : null,
+      reservation_end_time: leg.arr_time ? (arrDate ? `${arrDate}T${leg.arr_time}` : leg.arr_time) : null,
+      // Each leg carries its OWN saved position (not the booking's) so items can be
+      // dropped between legs and persist; absent → falls back to time ordering.
+      day_positions: leg.day_positions || undefined,
+      day_plan_position: undefined,
+      __leg: { index: i, total: legs.length, from: leg.from ?? null, to: leg.to ?? null, airline: leg.airline ?? null, flight_number: leg.flight_number ?? null },
+    })
+  })
+  return out
+}
+
 /** Filter reservations that are active transports for the given day, excluding assignment-linked ones. */
 export function getTransportForDay(opts: {
   reservations: any[]
   dayId: number
   dayAssignmentIds: number[]
-  days: Array<{ id: number; day_number?: number }>
+  days: Array<{ id: number; day_number?: number; date?: string | null }>
 }): any[] {
   const { reservations, dayId, dayAssignmentIds, days } = opts
 
@@ -69,7 +123,34 @@ export function getTransportForDay(opts: {
       return thisDayOrder >= startOrder && thisDayOrder <= endOrder
     }
     return startDayId === dayId
-  })
+  }).flatMap(r => expandFlightLegsForDay(r, dayId, getDayOrder, days))
+}
+
+/**
+ * Order items chronologically: anything with a time (a place's place_time, a
+ * transport/leg display time, a timed note) sorts by that time. An item WITHOUT a
+ * time inherits the time of the timed item before it, so untimed items stay where
+ * they were manually placed. Stable on the incoming order for ties.
+ */
+function applyChronoOrder(
+  items: MergedItem[],
+  dayId: number,
+  getDisplayTime: (r: any, dayId: number) => string | null
+): MergedItem[] {
+  const timeOf = (it: MergedItem): number | null => {
+    if (it.type === 'place') return parseTimeToMinutes(it.data?.place?.place_time)
+    if (it.type === 'note') return parseTimeToMinutes(it.data?.time)
+    return parseTimeToMinutes(getDisplayTime(it.data, dayId))
+  }
+  let last = -Infinity
+  return items
+    .map((it, i) => {
+      const t = timeOf(it)
+      if (t != null) last = t
+      return { it, i, eff: t != null ? t : last }
+    })
+    .sort((a, b) => a.eff - b.eff || a.i - b.i)
+    .map(k => k.it)
 }
 
 /** Merge places, notes, and transports into a single ordered day timeline. */
@@ -94,9 +175,9 @@ export function getMergedItems(opts: {
     minutes: parseTimeToMinutes(getDisplayTime(r, dayId)) ?? 0,
   })).sort((a, b) => a.minutes - b.minutes)
 
-  if (timedTransports.length === 0) return baseItems
+  if (timedTransports.length === 0) return applyChronoOrder(baseItems, dayId, getDisplayTime)
   if (baseItems.length === 0) {
-    return timedTransports.map((item, i) => ({ type: item.type, sortKey: i, data: item.data }))
+    return applyChronoOrder(timedTransports.map((item, i) => ({ type: item.type, sortKey: i, data: item.data })), dayId, getDisplayTime)
   }
 
   // Insert transports among base items based on per-day position or time
@@ -132,5 +213,5 @@ export function getMergedItems(opts: {
     result.push({ type: timed.type, sortKey, data: timed.data })
   }
 
-  return result.sort((a, b) => a.sortKey - b.sortKey)
+  return applyChronoOrder(result.sort((a, b) => a.sortKey - b.sortKey), dayId, getDisplayTime)
 }

client/src/utils/dayOrder.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect } from 'vitest'
+import type { Day, Accommodation } from '../types'
+import { getDayOrder, isDayInAccommodationRange, getAccommodationAnchors } from './dayOrder'
+
+const days = [
+  { id: 10, day_number: 1 },
+  { id: 20, day_number: 2 },
+  { id: 30, day_number: 3 },
+] as unknown as Day[]
+
+const hotel = (over: Partial<Accommodation>): Accommodation =>
+  ({ place_lat: 48.1, place_lng: 11.5, start_day_id: 10, end_day_id: 30, ...over }) as Accommodation
+
+describe('getDayOrder', () => {
+  it('prefers day_number when present', () => {
+    expect(getDayOrder(days[1], days)).toBe(2)
+  })
+  it('falls back to array index when day_number is missing', () => {
+    const noNumber = [{ id: 5 }, { id: 6 }] as unknown as Day[]
+    expect(getDayOrder(noNumber[1], noNumber)).toBe(1)
+  })
+})
+
+describe('isDayInAccommodationRange', () => {
+  it('is inclusive of both the check-in and check-out day', () => {
+    expect(isDayInAccommodationRange(days[0], 10, 30, days)).toBe(true) // check-in morning
+    expect(isDayInAccommodationRange(days[1], 10, 30, days)).toBe(true) // mid-stay
+    expect(isDayInAccommodationRange(days[2], 10, 30, days)).toBe(true) // check-out day
+  })
+  it('excludes days outside the stay', () => {
+    expect(isDayInAccommodationRange(days[0], 20, 30, days)).toBe(false)
+  })
+})
+
+describe('getAccommodationAnchors', () => {
+  it('returns no anchors when the day has no accommodation', () => {
+    expect(getAccommodationAnchors(days[1], days, [])).toEqual({})
+  })
+
+  it('anchors both ends to the same hotel on a mid-stay day (round trip)', () => {
+    const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: 48.1, place_lng: 11.5 })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
+      start: { lat: 48.1, lng: 11.5 },
+      end: { lat: 48.1, lng: 11.5 },
+    })
+  })
+
+  it('loops a single hotel on its check-out day (home base for the day)', () => {
+    const accs = [hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 2 })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({ start: { lat: 1, lng: 2 }, end: { lat: 1, lng: 2 } })
+  })
+
+  it('loops a single hotel on its check-in day (home base for the day)', () => {
+    const accs = [hotel({ start_day_id: 20, end_day_id: 30, place_lat: 3, place_lng: 4 })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({ start: { lat: 3, lng: 4 }, end: { lat: 3, lng: 4 } })
+  })
+
+  it('uses the checked-out hotel as start and the checked-in hotel as end on a transfer day', () => {
+    const accs = [
+      hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 1 }), // checkout today
+      hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 }), // check-in today
+    ]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({
+      start: { lat: 1, lng: 1 },
+      end: { lat: 9, lng: 9 },
+    })
+  })
+
+  it('ignores accommodations that have no coordinates', () => {
+    const accs = [hotel({ start_day_id: 10, end_day_id: 30, place_lat: null, place_lng: null })]
+    expect(getAccommodationAnchors(days[1], days, accs)).toEqual({})
+  })
+})

client/src/utils/dayOrder.ts

@@ -1,8 +1,34 @@
-import type { Day } from '../types'
+import type { Day, Accommodation, RouteAnchors } from '../types'
 
 export const getDayOrder = (day: Day, days: Day[]): number =>
   day.day_number ?? days.indexOf(day)
 
+// Derives route anchors from the accommodation(s) active on a day. A single hotel is the day's home
+// base, so the route is a loop that starts and ends there. A transfer day — checking out of one hotel
+// and into another — instead runs from the morning hotel to the evening one.
+export const getAccommodationAnchors = (
+  day: Day,
+  days: Day[],
+  accommodations: Accommodation[],
+): RouteAnchors => {
+  const located = accommodations.filter(a =>
+    a.place_lat != null && a.place_lng != null &&
+    isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days),
+  )
+  if (located.length === 0) return {}
+
+  const toAnchor = (a: Accommodation) => ({ lat: a.place_lat as number, lng: a.place_lng as number })
+
+  const checkOut = located.find(a => a.end_day_id === day.id) // the hotel you leave this morning
+  const checkIn = located.find(a => a.start_day_id === day.id) // the hotel you arrive at tonight
+  if (checkOut && checkIn && checkOut !== checkIn) {
+    return { start: toAnchor(checkOut), end: toAnchor(checkIn) }
+  }
+
+  const hotel = toAnchor(located[0])
+  return { start: hotel, end: hotel }
+}
+
 export const isDayInAccommodationRange = (
   day: Day,
   startDayId: number,

client/src/utils/fileDownload.ts

@@ -1,3 +1,5 @@
+import { getCachedBlob } from '../db/offlineDb'
+
 // MIME types safe to open inline (will not execute script in any browser).
 // Everything else (text/html, image/svg+xml, text/javascript, …) is forced to
 // download so a maliciously-named upload cannot run code in the TREK origin.
@@ -39,17 +41,46 @@ function isIosStandalone(): boolean {
   return (navigator as any).standalone === true
 }
 
+/**
+ * Resolves a protected file to a Blob, preferring the live server but falling
+ * back to the offline cache (pre-downloaded by the trip sync manager). This is
+ * what lets attachments open in a PWA / airplane mode. When offline we go
+ * straight to the cache; when online we fetch live and only fall back if the
+ * network actually fails — which also covers flaky links where navigator.onLine
+ * still reports true ("sometimes it works, sometimes it doesn't").
+ */
+async function getFileBlob(url: string): Promise<Blob> {
+  assertRelativeUrl(url)
+  if (typeof navigator !== 'undefined' && navigator.onLine === false) {
+    const cached = await getCachedBlob(url)
+    if (cached) return cached
+    throw new Error('File not available offline')
+  }
+  let resp: Response
+  try {
+    resp = await fetch(url, { credentials: 'include' })
+  } catch (err) {
+    // Genuine network failure — the fetch itself rejected (offline, or a flaky
+    // link even though navigator.onLine is true). Serve the pre-downloaded copy.
+    const cached = await getCachedBlob(url)
+    if (cached) return cached
+    throw err
+  }
+  // The server answered: a non-ok status (401/403/404/…) is a real error and must
+  // surface, not be masked by a stale cached copy.
+  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
+  return await resp.blob()
+}
+
 /**
  * Fetches a protected file using cookie auth (credentials: include) and
  * triggers a browser download. Works inside PWA standalone mode because the
  * fetch stays in the PWA's WebView rather than handing off to the system
- * browser (which would lose the session cookie).
+ * browser (which would lose the session cookie). Falls back to the offline
+ * cache when the network is unavailable.
  */
 export async function downloadFile(url: string, filename?: string): Promise<void> {
-  assertRelativeUrl(url)
-  const resp = await fetch(url, { credentials: 'include' })
-  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
-  const blob = await resp.blob()
+  const blob = await getFileBlob(url)
   const blobUrl = URL.createObjectURL(blob)
   triggerAnchorDownload(blobUrl, filename)
 }
@@ -72,10 +103,7 @@ export async function downloadFile(url: string, filename?: string): Promise<void
  * spurious in-page download is triggered.
  */
 export async function openFile(url: string, filename?: string): Promise<void> {
-  assertRelativeUrl(url)
-  const resp = await fetch(url, { credentials: 'include' })
-  if (!resp.ok) throw new Error(resp.status === 401 ? 'Unauthorized' : `HTTP ${resp.status}`)
-  const blob = await resp.blob()
+  const blob = await getFileBlob(url)
   const blobUrl = URL.createObjectURL(blob)
 
   // Force download for MIME types that can execute script when rendered inline

client/src/utils/flightLegs.ts

@@ -0,0 +1,105 @@
+// Multi-leg (layover) flight support.
+//
+// A flight booking is ONE reservation whose route is an ordered chain of airports
+// (e.g. FRA -> BER -> HND). The geometry + order are the source of truth in
+// `reservation.endpoints` (role 'from' for the first airport, 'stop' for each
+// intermediate one, 'to' for the last, ordered by `sequence`). The per-leg detail
+// — airline, flight number, and each segment's own day/time — lives in
+// `metadata.legs`. The top-level metadata (`departure_airport`/`arrival_airport`/
+// `airline`/`flight_number`) and `day_id`/`end_day_id` mirror the FIRST and LAST
+// leg so legacy readers keep working.
+//
+// A legacy single-leg flight (two endpoints, flat metadata, no `metadata.legs`)
+// is normalised here into a one-leg chain, so every renderer can use one path.
+
+import type { Reservation, ReservationEndpoint } from '../types'
+
+export interface FlightLeg {
+  from: string | null // IATA code (or null)
+  to: string | null
+  airline?: string
+  flight_number?: string
+  dep_day_id?: number | null
+  dep_time?: string | null // 'HH:mm'
+  arr_day_id?: number | null
+  arr_time?: string | null
+}
+
+/** reservation.metadata may be a JSON string or an already-parsed object. */
+export function parseReservationMetadata(r: Pick<Reservation, 'metadata'>): Record<string, any> {
+  const m = r.metadata
+  if (!m) return {}
+  if (typeof m === 'string') {
+    try {
+      let parsed = JSON.parse(m || '{}')
+      // Defensive: an earlier bug could double-encode metadata (a JSON string of a
+      // JSON string) — unwrap it once more so saved flights heal on read.
+      if (typeof parsed === 'string') { try { parsed = JSON.parse(parsed) } catch { /* keep */ } }
+      return (parsed && typeof parsed === 'object') ? parsed : {}
+    } catch { return {} }
+  }
+  return m as Record<string, any>
+}
+
+/** Endpoints ordered by `sequence` (geometry + order source of truth). */
+export function orderedEndpoints(r: Pick<Reservation, 'endpoints'>): ReservationEndpoint[] {
+  return (r.endpoints || []).slice().sort((a, b) => (a.sequence ?? 0) - (b.sequence ?? 0))
+}
+
+/**
+ * Ordered legs of a flight. `metadata.legs` is preferred; otherwise a single leg
+ * is derived from the endpoints (and finally the flat metadata) so that legacy
+ * single-leg flights — and flights created before this feature — still work.
+ */
+export function getFlightLegs(r: Reservation): FlightLeg[] {
+  const meta = parseReservationMetadata(r)
+  if (Array.isArray(meta.legs) && meta.legs.length > 0) {
+    return meta.legs.map((l: any): FlightLeg => ({
+      from: l.from ?? null,
+      to: l.to ?? null,
+      airline: l.airline || undefined,
+      flight_number: l.flight_number || undefined,
+      dep_day_id: l.dep_day_id ?? null,
+      dep_time: l.dep_time ?? null,
+      arr_day_id: l.arr_day_id ?? null,
+      arr_time: l.arr_time ?? null,
+    }))
+  }
+  // Legacy fallback: one leg from the endpoints / flat metadata.
+  const eps = orderedEndpoints(r)
+  const first = eps[0]
+  const last = eps[eps.length - 1]
+  const fromCode = first?.code ?? meta.departure_airport ?? null
+  const toCode = last?.code ?? meta.arrival_airport ?? null
+  if (!fromCode && !toCode) return []
+  return [{
+    from: fromCode,
+    to: toCode,
+    airline: meta.airline || undefined,
+    flight_number: meta.flight_number || undefined,
+    dep_day_id: r.day_id ?? null,
+    dep_time: first?.local_time ?? null,
+    arr_day_id: r.end_day_id ?? r.day_id ?? null,
+    arr_time: last?.local_time ?? null,
+  }]
+}
+
+/** Number of flight segments. 1 for a simple from -> to booking. */
+export function legCount(r: Reservation): number {
+  return getFlightLegs(r).length
+}
+
+export function isMultiLegFlight(r: Reservation): boolean {
+  return r.type === 'flight' && legCount(r) > 1
+}
+
+/**
+ * Ordered route labels (IATA codes, or names when no code) for display, e.g.
+ * ['FRA','BER','HND']. Uses endpoints; falls back to the flat metadata pair.
+ */
+export function routeStops(r: Reservation): string[] {
+  const eps = orderedEndpoints(r)
+  if (eps.length >= 2) return eps.map(e => e.code || e.name)
+  const meta = parseReservationMetadata(r)
+  return [meta.departure_airport, meta.arrival_airport].filter(Boolean) as string[]
+}

client/tests/helpers/msw/handlers/addons.ts

@@ -3,6 +3,7 @@ import { http, HttpResponse } from 'msw';
 export const addonHandlers = [
   http.get('/api/addons', () => {
     return HttpResponse.json({
+      bagTracking: false,
       addons: [
         { id: 'vacay', name: 'Vacay', type: 'feature', icon: 'calendar', enabled: true },
         { id: 'atlas', name: 'Atlas', type: 'feature', icon: 'map', enabled: true },

client/tests/unit/stores/addonStore.test.ts

@@ -18,6 +18,18 @@ describe('addonStore', () => {
       expect(state.addons.length).toBeGreaterThan(0);
       expect(state.addons[0]).toHaveProperty('id');
       expect(state.addons[0]).toHaveProperty('enabled', true);
+      expect(state.bagTracking).toBe(false);
+    });
+
+    it('captures the global bagTracking flag from the response', async () => {
+      server.use(
+        http.get('/api/addons', () =>
+          HttpResponse.json({ bagTracking: true, addons: [] })
+        )
+      );
+
+      await useAddonStore.getState().loadAddons();
+      expect(useAddonStore.getState().bagTracking).toBe(true);
     });
   });
 

client/tests/unit/utils/fileDownload.test.ts

@@ -1,5 +1,9 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { downloadFile, openFile } from '../../../src/utils/fileDownload'
+import { getCachedBlob } from '../../../src/db/offlineDb'
+
+// Mock the offline DB so these tests never touch Dexie/IndexedDB.
+vi.mock('../../../src/db/offlineDb', () => ({ getCachedBlob: vi.fn() }))
 
 function makeFetchMock(status: number, blob: Blob = new Blob(['data'], { type: 'application/pdf' })) {
   return vi.fn().mockResolvedValue({
@@ -170,3 +174,52 @@ describe('openFile', () => {
     }
   })
 })
+
+describe('offline fallback (#1046)', () => {
+  function setOnline(value: boolean) {
+    Object.defineProperty(navigator, 'onLine', { value, configurable: true })
+  }
+  beforeEach(() => vi.mocked(getCachedBlob).mockReset())
+  afterEach(() => setOnline(true))
+
+  it('serves the cached blob without a network call when offline', async () => {
+    setOnline(false)
+    const blob = new Blob(['x'], { type: 'application/pdf' })
+    vi.mocked(getCachedBlob).mockResolvedValue(blob)
+    const fetchSpy = vi.fn()
+    vi.stubGlobal('fetch', fetchSpy)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+
+    await downloadFile('/uploads/files/cached.pdf')
+
+    expect(fetchSpy).not.toHaveBeenCalled()
+    expect(getCachedBlob).toHaveBeenCalledWith('/uploads/files/cached.pdf')
+    expect(URL.createObjectURL).toHaveBeenCalledWith(blob)
+  })
+
+  it('falls back to the cache when a live fetch rejects (network error) while online', async () => {
+    setOnline(true)
+    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network down')))
+    const blob = new Blob(['x'], { type: 'application/pdf' })
+    vi.mocked(getCachedBlob).mockResolvedValue(blob)
+    vi.spyOn(HTMLAnchorElement.prototype, 'click').mockImplementation(() => {})
+
+    await downloadFile('/uploads/files/cached.pdf')
+
+    expect(getCachedBlob).toHaveBeenCalledWith('/uploads/files/cached.pdf')
+    expect(URL.createObjectURL).toHaveBeenCalledWith(blob)
+  })
+
+  it('throws when offline and the file was never cached', async () => {
+    setOnline(false)
+    vi.mocked(getCachedBlob).mockResolvedValue(null)
+    await expect(downloadFile('/uploads/files/missing.pdf')).rejects.toThrow(/offline/i)
+  })
+
+  it('does not consult the cache on an HTTP error — a 401 still surfaces', async () => {
+    setOnline(true)
+    vi.stubGlobal('fetch', makeFetchMock(401))
+    await expect(downloadFile('/uploads/files/secret.pdf')).rejects.toThrow('Unauthorized')
+    expect(getCachedBlob).not.toHaveBeenCalled()
+  })
+})

server/.gitignore

@@ -0,0 +1 @@
+.atlas-geo-cache/

server/scripts/build-atlas-geo.mjs

@@ -0,0 +1,225 @@
+#!/usr/bin/env node
+// Build server/assets/atlas/{admin0,admin1}.geojson.gz from geoBoundaries (gbOpen).
+//
+// Why: Atlas previously fetched country + sub-national boundaries from Natural Earth's
+// GitHub `master` at runtime. Natural Earth is stale (e.g. it still shows Norway's
+// pre-2020 counties) and depicts some contested territory in ways the project does not
+// want (see nvkelso/natural-earth-vector#391). geoBoundaries (CC BY 4.0) is current,
+// redistributable, and carries ISO 3166-2 codes on its per-country ADM1 files.
+//
+// This downloads the *simplified* per-country gbOpen ADM0 (countries) and ADM1
+// (regions) layers from a pinned geoBoundaries revision, normalizes each feature to
+// the property names the Atlas client/server already read, and writes two gzipped
+// FeatureCollections that the server serves at runtime (no network at boot).
+//
+// geoBoundaries: CC BY 4.0 — https://www.geoboundaries.org/  (attribution required).
+
+import fs from 'node:fs'
+import path from 'node:path'
+import zlib from 'node:zlib'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const OUT_DIR = path.join(__dirname, '..', 'assets', 'atlas')
+
+// Pinned geoBoundaries revision (override with GB_REF=<sha|branch|tag>). The LFS media
+// endpoint resolves a commit SHA, branch, or tag in the <ref> path segment.
+const GB_REF = process.env.GB_REF || '5c25134028196d43ce97b5071934fd0cfc92f09f'
+const MEDIA = (a3, level) =>
+  `https://media.githubusercontent.com/media/wmgeolab/geoBoundaries/${GB_REF}` +
+  `/releaseData/gbOpen/${a3}/${level}/geoBoundaries-${a3}-${level}_simplified.geojson`
+
+// Country borders come from CGAZ (the Comprehensive Global Administrative Zones composite)
+// rather than per-country gbOpen ADM0: CGAZ is gap-filled, so it includes territories
+// that gbOpen omits or folds away — notably Svalbard (inside Norway's geometry) and
+// Greenland. The country layer only needs A3/A2/name, so CGAZ's lack of `shapeISO` is
+// irrelevant. (gbOpen ADM0 maxes Norway at 71°N and has no Svalbard at all.)
+const CGAZ_ADM0 =
+  `https://media.githubusercontent.com/media/wmgeolab/geoBoundaries/${GB_REF}` +
+  `/releaseData/CGAZ/geoBoundariesCGAZ_ADM0.geojson`
+
+const CONCURRENCY = 8
+const RETRIES = 3
+
+// Complete ISO-3166-1 alpha-3 → alpha-2 map (source: lukes/ISO-3166-Countries-with-
+// Regional-Codes). Drives ADM1 enumeration (one gbOpen request per code; missing ones
+// 404 and are skipped) and stamps `iso_a2`/`ISO_A2` (geoBoundaries keys by alpha-3
+// `shapeGroup`). A complete map — not the client's curated ~180 — is what restores the
+// dropped territories (Greenland, Falklands, French Guiana, …).
+const A3_TO_A2 = {"ABW":"AW", "AFG":"AF", "AGO":"AO", "AIA":"AI", "ALA":"AX", "ALB":"AL", "AND":"AD", "ARE":"AE", "ARG":"AR", "ARM":"AM", "ASM":"AS", "ATA":"AQ", "ATF":"TF", "ATG":"AG", "AUS":"AU", "AUT":"AT", "AZE":"AZ", "BDI":"BI", "BEL":"BE", "BEN":"BJ", "BES":"BQ", "BFA":"BF", "BGD":"BD", "BGR":"BG", "BHR":"BH", "BHS":"BS", "BIH":"BA", "BLM":"BL", "BLR":"BY", "BLZ":"BZ", "BMU":"BM", "BOL":"BO", "BRA":"BR", "BRB":"BB", "BRN":"BN", "BTN":"BT", "BVT":"BV", "BWA":"BW", "CAF":"CF", "CAN":"CA", "CCK":"CC", "CHE":"CH", "CHL":"CL", "CHN":"CN", "CIV":"CI", "CMR":"CM", "COD":"CD", "COG":"CG", "COK":"CK", "COL":"CO", "COM":"KM", "CPV":"CV", "CRI":"CR", "CUB":"CU", "CUW":"CW", "CXR":"CX", "CYM":"KY", "CYP":"CY", "CZE":"CZ", "DEU":"DE", "DJI":"DJ", "DMA":"DM", "DNK":"DK", "DOM":"DO", "DZA":"DZ", "ECU":"EC", "EGY":"EG", "ERI":"ER", "ESH":"EH", "ESP":"ES", "EST":"EE", "ETH":"ET", "FIN":"FI", "FJI":"FJ", "FLK":"FK", "FRA":"FR", "FRO":"FO", "FSM":"FM", "GAB":"GA", "GBR":"GB", "GEO":"GE", "GGY":"GG", "GHA":"GH", "GIB":"GI", "GIN":"GN", "GLP":"GP", "GMB":"GM", "GNB":"GW", "GNQ":"GQ", "GRC":"GR", "GRD":"GD", "GRL":"GL", "GTM":"GT", "GUF":"GF", "GUM":"GU", "GUY":"GY", "HKG":"HK", "HMD":"HM", "HND":"HN", "HRV":"HR", "HTI":"HT", "HUN":"HU", "IDN":"ID", "IMN":"IM", "IND":"IN", "IOT":"IO", "IRL":"IE", "IRN":"IR", "IRQ":"IQ", "ISL":"IS", "ISR":"IL", "ITA":"IT", "JAM":"JM", "JEY":"JE", "JOR":"JO", "JPN":"JP", "KAZ":"KZ", "KEN":"KE", "KGZ":"KG", "KHM":"KH", "KIR":"KI", "KNA":"KN", "KOR":"KR", "KWT":"KW", "LAO":"LA", "LBN":"LB", "LBR":"LR", "LBY":"LY", "LCA":"LC", "LIE":"LI", "LKA":"LK", "LSO":"LS", "LTU":"LT", "LUX":"LU", "LVA":"LV", "MAC":"MO", "MAF":"MF", "MAR":"MA", "MCO":"MC", "MDA":"MD", "MDG":"MG", "MDV":"MV", "MEX":"MX", "MHL":"MH", "MKD":"MK", "MLI":"ML", "MLT":"MT", "MMR":"MM", "MNE":"ME", "MNG":"MN", "MNP":"MP", "MOZ":"MZ", "MRT":"MR", "MSR":"MS", "MTQ":"MQ", "MUS":"MU", "MWI":"MW", "MYS":"MY", "MYT":"YT", "NAM":"NA", "NCL":"NC", "NER":"NE", "NFK":"NF", "NGA":"NG", "NIC":"NI", "NIU":"NU", "NLD":"NL", "NOR":"NO", "NPL":"NP", "NRU":"NR", "NZL":"NZ", "OMN":"OM", "PAK":"PK", "PAN":"PA", "PCN":"PN", "PER":"PE", "PHL":"PH", "PLW":"PW", "PNG":"PG", "POL":"PL", "PRI":"PR", "PRK":"KP", "PRT":"PT", "PRY":"PY", "PSE":"PS", "PYF":"PF", "QAT":"QA", "REU":"RE", "ROU":"RO", "RUS":"RU", "RWA":"RW", "SAU":"SA", "SDN":"SD", "SEN":"SN", "SGP":"SG", "SGS":"GS", "SHN":"SH", "SJM":"SJ", "SLB":"SB", "SLE":"SL", "SLV":"SV", "SMR":"SM", "SOM":"SO", "SPM":"PM", "SRB":"RS", "SSD":"SS", "STP":"ST", "SUR":"SR", "SVK":"SK", "SVN":"SI", "SWE":"SE", "SWZ":"SZ", "SXM":"SX", "SYC":"SC", "SYR":"SY", "TCA":"TC", "TCD":"TD", "TGO":"TG", "THA":"TH", "TJK":"TJ", "TKL":"TK", "TKM":"TM", "TLS":"TL", "TON":"TO", "TTO":"TT", "TUN":"TN", "TUR":"TR", "TUV":"TV", "TWN":"TW", "TZA":"TZ", "UGA":"UG", "UKR":"UA", "UMI":"UM", "URY":"UY", "USA":"US", "UZB":"UZ", "VAT":"VA", "VCT":"VC", "VEN":"VE", "VGB":"VG", "VIR":"VI", "VNM":"VN", "VUT":"VU", "WLF":"WF", "WSM":"WS", "YEM":"YE", "ZAF":"ZA", "ZMB":"ZM", "ZWE":"ZW"}
+
+const COUNTRIES = Object.keys(A3_TO_A2) // every ISO alpha-3 code (ADM1 fetch list)
+
+// Cache raw downloads so re-runs (e.g. to tune simplification) don't re-fetch ~360 files.
+const CACHE_DIR = path.join(__dirname, '..', '.atlas-geo-cache', GB_REF)
+
+async function fetchGeo(url) {
+  const cacheFile = path.join(CACHE_DIR, url.split('/').slice(-1)[0])
+  if (fs.existsSync(cacheFile)) {
+    const cached = fs.readFileSync(cacheFile, 'utf8')
+    return cached === '' ? null : JSON.parse(cached)
+  }
+  for (let attempt = 1; attempt <= RETRIES; attempt++) {
+    try {
+      const res = await fetch(url, { headers: { 'User-Agent': 'TREK atlas builder' } })
+      if (res.status === 404) { fs.writeFileSync(cacheFile, ''); return null } // no file — skip
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const text = await res.text()
+      if (text.startsWith('version https://git-lfs')) throw new Error('got LFS pointer, not content')
+      const parsed = JSON.parse(text)
+      fs.writeFileSync(cacheFile, text)
+      return parsed
+    } catch (err) {
+      if (attempt === RETRIES) {
+        console.warn(`  ! ${url.split('/').slice(-1)[0]}: ${err.message}`)
+        return null
+      }
+      await new Promise(r => setTimeout(r, 500 * attempt))
+    }
+  }
+  return null
+}
+
+// Run async tasks with a fixed concurrency cap.
+async function pool(items, worker) {
+  const results = []
+  let i = 0
+  const runners = Array.from({ length: CONCURRENCY }, async () => {
+    while (i < items.length) {
+      const idx = i++
+      results[idx] = await worker(items[idx], idx)
+    }
+  })
+  await Promise.all(runners)
+  return results
+}
+
+// Geometry size control. geoBoundaries' "_simplified" files still carry ~12-decimal
+// coordinates, which dominate the JSON size. Quantizing to a fixed grid (rounding
+// preserves topology — identical input coords map to identical output) and dropping
+// the now-redundant consecutive duplicate points shrinks the bundles ~5-8x with no
+// visible effect at the atlas' zoom range (3-10). ADM0 fills are viewed zoomed out, so
+// they tolerate a coarser grid than ADM1 region borders.
+const ADM0_DECIMALS = 2 // ~1.1 km
+const ADM1_DECIMALS = 3 // ~110 m
+
+function quantizeRing(ring, decimals) {
+  const m = 10 ** decimals
+  const out = []
+  let prevX, prevY
+  for (const pt of ring) {
+    const x = Math.round(pt[0] * m) / m
+    const y = Math.round(pt[1] * m) / m
+    if (x === prevX && y === prevY) continue
+    out.push([x, y])
+    prevX = x; prevY = y
+  }
+  return out
+}
+
+// Quantize a (Multi)Polygon, dropping rings that collapse below a valid ring (<4 pts).
+function quantizeGeometry(geom, decimals) {
+  if (!geom) return null
+  if (geom.type === 'Polygon') {
+    const rings = geom.coordinates.map(r => quantizeRing(r, decimals)).filter(r => r.length >= 4)
+    return rings.length ? { type: 'Polygon', coordinates: rings } : null
+  }
+  if (geom.type === 'MultiPolygon') {
+    const polys = geom.coordinates
+      .map(poly => poly.map(r => quantizeRing(r, decimals)).filter(r => r.length >= 4))
+      .filter(poly => poly.length)
+    return polys.length ? { type: 'MultiPolygon', coordinates: polys } : null
+  }
+  return geom
+}
+
+// Normalize one CGAZ ADM0 feature (keyed by alpha-3 `shapeGroup`) to the property names
+// the client country layer reads (ISO_A2/ADM0_A3/NAME/ADMIN). Returns null for the CRS
+// pseudo-entry or anything without a group/geometry.
+function normalizeAdm0Feature(f) {
+  const a3 = f.properties?.shapeGroup
+  if (!a3) return null
+  const name = f.properties?.shapeName || a3
+  const geometry = quantizeGeometry(f.geometry, ADM0_DECIMALS)
+  if (!geometry) return null
+  return {
+    type: 'Feature',
+    properties: { ISO_A2: A3_TO_A2[a3] || null, ADM0_A3: a3, NAME: name, ADMIN: name },
+    geometry,
+  }
+}
+
+function normalizeAdm1(geo, a3, countryName) {
+  if (!geo?.features) return []
+  return geo.features.map(f => {
+    const name = f.properties?.shapeName || ''
+    const geometry = quantizeGeometry(f.geometry, ADM1_DECIMALS)
+    if (!geometry) return null
+    const a2 = A3_TO_A2[a3] || null
+    // shapeISO is a real ISO 3166-2 code for ~90% of features; geoBoundaries leaves the
+    // rest blank or uses an `XX_YYY` placeholder. Keep real/placeholder codes as-is
+    // (stable per polygon → manual mark/unmark works, real ones match Nominatim). For
+    // blank codes, synthesize a stable id mirroring the server's geocode fallback so
+    // every region is still markable.
+    let code = f.properties?.shapeISO || ''
+    if (!code && a2) code = `${a2}-${name.replace(/[^A-Za-z0-9]/g, '').substring(0, 3).toUpperCase()}`
+    return {
+      type: 'Feature',
+      // Property names the Atlas region layer + server getRegionGeo already read.
+      properties: {
+        iso_a2: a2,
+        iso_3166_2: code,
+        name,
+        name_en: name,
+        admin: countryName,
+      },
+      geometry,
+    }
+  }).filter(Boolean)
+}
+
+async function main() {
+  console.log(`[atlas-geo] geoBoundaries ref ${GB_REF}; ${COUNTRIES.length} countries`)
+  fs.mkdirSync(OUT_DIR, { recursive: true })
+  fs.mkdirSync(CACHE_DIR, { recursive: true })
+
+  // ADM0 (countries) — one comprehensive CGAZ file (large; cached). Also yields the
+  // English country name (shapeGroup → shapeName) used for the ADM1 `admin` field.
+  console.log('[atlas-geo] downloading CGAZ ADM0 (countries)…')
+  const cgaz = await fetchGeo(CGAZ_ADM0)
+  const adm0Features = []
+  const a3ToName = {}
+  for (const f of cgaz?.features || []) {
+    const nf = normalizeAdm0Feature(f)
+    if (nf) { a3ToName[nf.properties.ADM0_A3] = nf.properties.NAME; adm0Features.push(nf) }
+  }
+
+  // ADM1 (sub-national regions) — per-country gbOpen (carries ISO 3166-2 `shapeISO`).
+  console.log('[atlas-geo] downloading ADM1 (regions)…')
+  const adm1Raw = await pool(COUNTRIES, a3 => fetchGeo(MEDIA(a3, 'ADM1')))
+  const adm1Features = []
+  let withCodes = 0
+  COUNTRIES.forEach((a3, idx) => {
+    const feats = normalizeAdm1(adm1Raw[idx], a3, a3ToName[a3] || a3)
+    for (const f of feats) if (f.properties.iso_3166_2) withCodes++
+    adm1Features.push(...feats)
+  })
+
+  const write = (name, features) => {
+    const fc = { type: 'FeatureCollection', features }
+    const gz = zlib.gzipSync(Buffer.from(JSON.stringify(fc)), { level: 9 })
+    const file = path.join(OUT_DIR, `${name}.geojson.gz`)
+    fs.writeFileSync(file, gz)
+    console.log(`[atlas-geo] wrote ${path.relative(path.join(__dirname, '..'), file)} — ${features.length} features, ${(gz.length / 1e6).toFixed(1)} MB gz`)
+  }
+
+  write('admin0', adm0Features)
+  write('admin1', adm1Features)
+
+  const missing1 = COUNTRIES.filter((a3, i) => !normalizeAdm1(adm1Raw[i], a3, '').length)
+  console.log(`[atlas-geo] ADM0 country features: ${adm0Features.length}`)
+  console.log(`[atlas-geo] ADM1 countries without regions (skipped/404): ${missing1.length}`)
+  console.log(`[atlas-geo] ADM1 features with ISO 3166-2 code: ${withCodes}/${adm1Features.length}`)
+}
+
+main().catch(err => { console.error(err); process.exit(1) })

server/src/addons.ts

@@ -7,6 +7,7 @@ export const ADDON_IDS = {
   ATLAS: 'atlas',
   COLLAB: 'collab',
   JOURNEY: 'journey',
+  AIRTRAIL: 'airtrail',
 } as const;
 
 export type AddonId = typeof ADDON_IDS[keyof typeof ADDON_IDS];

server/src/db/migrations.ts

@@ -1,3 +1,6 @@
+import fs from 'fs';
+import path from 'path';
+import zlib from 'zlib';
 import Database from 'better-sqlite3';
 import { encrypt_api_key } from '../services/apiKeyCrypto';
 
@@ -2369,6 +2372,123 @@ function runMigrations(db: Database.Database): void {
       );
       CREATE INDEX IF NOT EXISTS idx_webauthn_challenges_expires ON webauthn_challenges(expires_at);
     `),
+    // Atlas dropped Natural Earth for geoBoundaries. Manually-marked sub-national
+    // regions (`visited_regions`) stored the OLD Natural Earth ISO-3166-2 codes; some no
+    // longer match any polygon in the new bundle and would stop highlighting. Reconcile
+    // every row against the ACTUAL shipped admin-1 bundle so this covers *all* countries,
+    // not just one hand-listed reform:
+    //   1. code still present in the new bundle      → leave it (already correct);
+    //   2. else a region in the same country shares  → adopt that region's code+name
+    //      the stored region_name (case-insensitive)   (handles code re-spellings, e.g.
+    //                                                    ES-AN → ES_AND, names unchanged);
+    //   3. else a curated merge crosswalk maps it    → adopt the merged region (handles
+    //      (region absorbed into a *renamed* one)       reforms where the name changed,
+    //                                                    which step 2 cannot catch);
+    //   4. else → leave as-is (cannot be resolved; the client's name fallback may still
+    //      highlight it, and nothing is destroyed).
+    // Other Atlas tables need NO remap: `visited_countries` / `bucket_list` hold only
+    // ISO-3166-1 alpha-2 codes (invariant across the swap), `bucket_list.name` is free
+    // text we must not auto-rewrite, and `place_regions` is a re-derivable Nominatim cache.
+    () => {
+      type Row = { id: number; region_code: string; region_name: string; country_code: string };
+      const rows = db.prepare(
+        'SELECT id, region_code, region_name, country_code FROM visited_regions'
+      ).all() as Row[];
+      if (rows.length === 0) return; // nothing marked → skip the bundle read entirely
+
+      // Index the shipped admin-1 bundle: valid codes, name→code per country, code→name.
+      // __dirname resolves ../../assets under both dist (dist/db) and tests (src/db).
+      let features: { properties?: { iso_a2?: string; iso_3166_2?: string; name?: string } }[] = [];
+      try {
+        const file = path.join(__dirname, '..', '..', 'assets', 'atlas', 'admin1.geojson.gz');
+        features = JSON.parse(zlib.gunzipSync(fs.readFileSync(file)).toString('utf8')).features || [];
+      } catch {
+        features = []; // bundle missing → degrade to the curated crosswalk below
+      }
+      const validCodes = new Set<string>();
+      const nameToCode = new Map<string, string>(); // `${A2}|${nameLower}` → code
+      const codeToName = new Map<string, string>();
+      for (const f of features) {
+        const a2 = (f.properties?.iso_a2 || '').toUpperCase();
+        const code = f.properties?.iso_3166_2 || '';
+        const name = f.properties?.name || '';
+        if (!code) continue;
+        validCodes.add(code);
+        if (!codeToName.has(code)) codeToName.set(code, name);
+        if (a2 && name) nameToCode.set(`${a2}|${name.toLowerCase()}`, code);
+      }
+
+      // Curated crosswalk for regions absorbed into a *renamed* successor (step 2 can't
+      // match these because the name changed). Norway's 2018/2020 reforms; extend as the
+      // pinned geoBoundaries dataset gains further reforms.
+      const MERGE_CROSSWALK: Record<string, string> = {
+        'NO-04': 'NO-34', 'NO-05': 'NO-34',            // Hedmark, Oppland → Innlandet
+        'NO-12': 'NO-46', 'NO-14': 'NO-46',            // Hordaland, Sogn og Fjordane → Vestland
+        'NO-09': 'NO-42', 'NO-10': 'NO-42',            // Aust-/Vest-Agder → Agder
+        'NO-01': 'NO-30', 'NO-02': 'NO-30', 'NO-06': 'NO-30', // Østfold/Akershus/Buskerud → Viken
+        'NO-07': 'NO-38', 'NO-08': 'NO-38',            // Vestfold, Telemark → Vestfold og Telemark
+        'NO-19': 'NO-54', 'NO-20': 'NO-54',            // Troms, Finnmark → Troms og Finnmark
+        'NO-16': 'NO-50', 'NO-17': 'NO-50',            // Sør-/Nord-Trøndelag → Trøndelag
+      };
+
+      const resolve = (row: Row): string | null => {
+        if (validCodes.has(row.region_code)) return null; // already valid
+        const a2 = (row.country_code || '').toUpperCase();
+        const byName = nameToCode.get(`${a2}|${(row.region_name || '').toLowerCase()}`);
+        if (byName) return byName;
+        const merged = MERGE_CROSSWALK[row.region_code];
+        // Only trust the crosswalk target if it actually exists in the bundle (or the
+        // bundle was unreadable, in which case we apply the curated map blindly).
+        if (merged && (validCodes.size === 0 || validCodes.has(merged))) return merged;
+        return null;
+      };
+
+      const update = db.prepare(
+        'UPDATE OR IGNORE visited_regions SET region_code = ?, region_name = ? WHERE id = ?'
+      );
+      const del = db.prepare('DELETE FROM visited_regions WHERE id = ?');
+      for (const row of rows) {
+        const newCode = resolve(row);
+        if (!newCode || newCode === row.region_code) continue;
+        const newName = codeToName.get(newCode) || row.region_name;
+        update.run(newCode, newName, row.id);
+        // UNIQUE(user_id, region_code): if the user already had the target code the
+        // UPDATE was IGNORED and this row still carries the old code → drop the duplicate.
+        const after = db.prepare('SELECT region_code FROM visited_regions WHERE id = ?').get(row.id) as
+          | { region_code: string }
+          | undefined;
+        if (after && after.region_code === row.region_code) del.run(row.id);
+      }
+    },
+    () => {
+      // AirTrail integration addon — disabled by default (opt-in). Per-user connection
+      // lives in Settings → Integrations; this row is only the admin-level global toggle.
+      try {
+        db.prepare("INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)")
+          .run('airtrail', 'AirTrail', 'Sync flights from your self-hosted AirTrail instance', 'integration', 'Plane', 0, 14);
+      } catch (err: any) {
+        console.warn('[migrations] Non-fatal migration step failed:', err);
+      }
+    },
+    () => {
+      // AirTrail per-user connection (mirrors the Immich integration columns).
+      try { db.exec("ALTER TABLE users ADD COLUMN airtrail_url TEXT"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE users ADD COLUMN airtrail_api_key TEXT"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE users ADD COLUMN airtrail_allow_insecure_tls INTEGER DEFAULT 0"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+    },
+    () => {
+      // AirTrail flight linkage on reservations (#214) — lets a TREK transport
+      // remember its AirTrail origin so the two-way sync can match + update it.
+      // sync_enabled flips to 0 when the AirTrail flight is deleted (row kept).
+      try { db.exec("ALTER TABLE reservations ADD COLUMN external_source TEXT"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE reservations ADD COLUMN external_id TEXT"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE reservations ADD COLUMN external_owner_user_id INTEGER"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE reservations ADD COLUMN external_synced_at TEXT"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE reservations ADD COLUMN sync_enabled INTEGER DEFAULT 1"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      try { db.exec("ALTER TABLE reservations ADD COLUMN external_hash TEXT"); } catch (err: any) { if (!err.message?.includes('duplicate column name')) throw err; }
+      // NULLs compare distinct in SQLite, so non-linked reservations don't collide.
+      db.exec("CREATE UNIQUE INDEX IF NOT EXISTS idx_reservations_external ON reservations(external_source, external_id, trip_id)");
+    },
   ];
 
   if (currentVersion < migrations.length) {

server/src/db/seeds.ts

@@ -98,6 +98,7 @@ function seedAddons(db: Database.Database): void {
       { id: 'naver_list_import', name: 'Naver List Import', description: 'Import places from shared Naver Maps lists', type: 'trip', icon: 'Link2', enabled: 1, sort_order: 13 },
       { id: 'collab', name: 'Collab', description: 'Notes, polls, and live chat for trip collaboration', type: 'trip', icon: 'Users', enabled: 1, sort_order: 6 },
       { id: 'journey', name: 'Journey', description: 'Trip tracking & travel journal — check-ins, photos, daily stories', type: 'global', icon: 'Compass', enabled: 0, sort_order: 35 },
+      { id: 'airtrail', name: 'AirTrail', description: 'Sync flights from your self-hosted AirTrail instance', type: 'integration', icon: 'Plane', enabled: 0, sort_order: 14 },
     ];
     const insertAddon = db.prepare('INSERT OR IGNORE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES (?, ?, ?, ?, ?, ?, ?)');
     for (const a of defaultAddons) insertAddon.run(a.id, a.name, a.description, a.type, a.icon, a.enabled, a.sort_order);

server/src/index.ts

@@ -79,6 +79,7 @@ const onListen = () => {
   scheduler.startDemoReset();
   scheduler.startIdempotencyCleanup();
   scheduler.startTrekPhotoCacheCleanup();
+  scheduler.startAirTrailSync();
   const { startTokenCleanup } = require('./services/ephemeralTokens');
   startTokenCleanup();
   import('./websocket').then(({ setupWebSocket }) => {

server/src/mcp/tools/_shared.ts

@@ -1,4 +1,6 @@
 import { broadcast } from '../../websocket';
+import { db } from '../../db/database';
+import { checkPermission } from '../../services/permissions';
 
 export function safeBroadcast(tripId: number, event: string, payload: Record<string, unknown>): void {
   try {
@@ -46,6 +48,24 @@ export function noAccess() {
   return { content: [{ type: 'text' as const, text: 'Trip not found or access denied.' }], isError: true };
 }
 
+export function permissionDenied() {
+  return { content: [{ type: 'text' as const, text: 'You do not have permission to perform this action on this trip.' }], isError: true };
+}
+
+/**
+ * RBAC gate for MCP tools, mirroring the checkPermission() calls the REST/Nest
+ * routes run. Call this after canAccessTrip() with the same action key the
+ * matching REST route uses. Returns true when the user may perform `action`
+ * on `tripId`.
+ */
+export function hasTripPermission(action: string, tripId: number | string, userId: number): boolean {
+  const trip = db.prepare('SELECT user_id FROM trips WHERE id = ?').get(tripId) as { user_id?: number } | undefined;
+  if (!trip) return false;
+  const userRow = db.prepare('SELECT role FROM users WHERE id = ?').get(userId) as { role?: string } | undefined;
+  const tripOwnerId = typeof trip.user_id === 'number' ? trip.user_id : null;
+  return checkPermission(action, userRow?.role ?? 'user', tripOwnerId, userId, tripOwnerId !== userId);
+}
+
 export function ok(data: unknown) {
   return { content: [{ type: 'text' as const, text: JSON.stringify(data, null, 2) }] };
 }

server/src/mcp/tools/assignments.ts

@@ -13,7 +13,7 @@ import { getDay } from '../../services/dayService';
 import {
   safeBroadcast, TOOL_ANNOTATIONS_READONLY, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
   TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canRead, canWrite } from '../scopes';
 
@@ -38,6 +38,7 @@ export function registerAssignmentTools(server: McpServer, userId: number, scope
     async ({ tripId, dayId, placeId, notes }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!dayExists(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       if (!placeExists(placeId, tripId)) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
       const assignment = createAssignment(dayId, placeId, notes || null);
@@ -60,6 +61,7 @@ export function registerAssignmentTools(server: McpServer, userId: number, scope
     async ({ tripId, dayId, assignmentId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!assignmentExistsInDay(assignmentId, dayId, tripId))
         return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
       deleteAssignment(assignmentId);
@@ -83,6 +85,7 @@ export function registerAssignmentTools(server: McpServer, userId: number, scope
     async ({ tripId, assignmentId, place_time, end_time }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const existing = getAssignmentForTrip(assignmentId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
       const assignment = updateTime(
@@ -111,6 +114,7 @@ export function registerAssignmentTools(server: McpServer, userId: number, scope
     async ({ tripId, assignmentId, newDayId, oldDayId, orderIndex }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!getAssignmentForTrip(assignmentId, tripId)) return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
       if (!getDay(newDayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       const result = moveAssignment(assignmentId, newDayId, orderIndex ?? 0, oldDayId);
@@ -151,6 +155,7 @@ export function registerAssignmentTools(server: McpServer, userId: number, scope
     async ({ tripId, assignmentId, userIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!getAssignmentForTrip(assignmentId, tripId)) return { content: [{ type: 'text' as const, text: 'Assignment not found.' }], isError: true };
       const participants = setAssignmentParticipants(assignmentId, userIds);
       safeBroadcast(tripId, 'assignment:participants', { assignmentId, participants });
@@ -174,6 +179,7 @@ export function registerAssignmentTools(server: McpServer, userId: number, scope
     async ({ tripId, dayId, assignmentIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!getDay(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       reorderAssignments(dayId, assignmentIds);
       safeBroadcast(tripId, 'assignment:reordered', { dayId, assignmentIds });

server/src/mcp/tools/budget.ts

@@ -10,7 +10,7 @@ import {
 import {
   safeBroadcast, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
   TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canWrite } from '../scopes';
 import { isAddonEnabled } from '../../services/adminService';
@@ -38,6 +38,7 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, name, category, total_price, note }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
       const item = createBudgetItem(tripId, { category, name, total_price, note });
       safeBroadcast(tripId, 'budget:created', { item });
       return ok({ item });
@@ -57,6 +58,7 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, itemId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
       const deleted = deleteBudgetItem(itemId, tripId);
       if (!deleted) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
       safeBroadcast(tripId, 'budget:deleted', { itemId });
@@ -85,6 +87,7 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, itemId, name, category, total_price, persons, days, note }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
       const item = updateBudgetItem(itemId, tripId, { name, category, total_price, persons, days, note });
       if (!item) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
       safeBroadcast(tripId, 'budget:updated', { item });
@@ -111,6 +114,7 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, name, category, total_price, note, userIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
       const hasMembers = userIds && userIds.length > 0;
       try {
         const run = db.transaction(() => {
@@ -144,6 +148,7 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, itemId, userIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
       const item = updateBudgetMembers(itemId, tripId, userIds);
       safeBroadcast(tripId, 'budget:members-updated', { item });
       return ok({ item });
@@ -165,7 +170,8 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, itemId, memberId, paid }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
-      const member = toggleMemberPaid(itemId, memberId, paid);
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
+      const member = toggleMemberPaid(itemId, tripId, memberId, paid);
       safeBroadcast(tripId, 'budget:member-paid-updated', { itemId, member });
       return ok({ member });
     }

server/src/mcp/tools/collab.ts

@@ -12,7 +12,7 @@ import { ADDON_IDS } from '../../addons';
 import {
   safeBroadcast, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
   TOOL_ANNOTATIONS_NON_IDEMPOTENT, TOOL_ANNOTATIONS_READONLY,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canRead, canWrite } from '../scopes';
 
@@ -43,6 +43,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, title, content, category, color, pinned }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
       const note = createCollabNote(tripId, userId, { title, content, category, color, pinned });
       safeBroadcast(tripId, 'collab:note:created', { note });
       return ok({ note });
@@ -67,6 +68,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, noteId, title, content, category, color, pinned }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
       const note = updateCollabNote(tripId, noteId, { title, content, category, color, pinned });
       if (!note) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
       safeBroadcast(tripId, 'collab:note:updated', { note });
@@ -87,6 +89,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
     async ({ tripId, noteId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
       const deleted = deleteCollabNote(tripId, noteId);
       if (!deleted) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
       safeBroadcast(tripId, 'collab:note:deleted', { noteId });
@@ -128,6 +131,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       async ({ tripId, question, options, multiple, deadline }) => {
         if (isDemoUser(userId)) return demoDenied();
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const poll = createPoll(tripId, userId, { question, options, multiple, deadline });
         safeBroadcast(tripId, 'collab:poll:created', { poll });
         return ok({ poll });
@@ -147,6 +151,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       },
       async ({ tripId, pollId, optionIndex }) => {
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const result = votePoll(tripId, pollId, userId, optionIndex);
         if (result.error) return { content: [{ type: 'text' as const, text: result.error }], isError: true };
         safeBroadcast(tripId, 'collab:poll:voted', { poll: result.poll });
@@ -167,6 +172,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       async ({ tripId, pollId }) => {
         if (isDemoUser(userId)) return demoDenied();
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const poll = closePoll(tripId, pollId);
         if (!poll) return { content: [{ type: 'text' as const, text: 'Poll not found.' }], isError: true };
         safeBroadcast(tripId, 'collab:poll:closed', { poll });
@@ -187,6 +193,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       async ({ tripId, pollId }) => {
         if (isDemoUser(userId)) return demoDenied();
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const deleted = deletePoll(tripId, pollId);
         if (!deleted) return { content: [{ type: 'text' as const, text: 'Poll not found.' }], isError: true };
         safeBroadcast(tripId, 'collab:poll:deleted', { pollId });
@@ -225,6 +232,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       async ({ tripId, text, replyTo }) => {
         if (isDemoUser(userId)) return demoDenied();
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const result = createMessage(tripId, userId, text, replyTo ?? null);
         if (result.error) return { content: [{ type: 'text' as const, text: result.error }], isError: true };
         safeBroadcast(tripId, 'collab:message:created', { message: result.message });
@@ -245,6 +253,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       async ({ tripId, messageId }) => {
         if (isDemoUser(userId)) return demoDenied();
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const result = deleteMessage(tripId, messageId, userId);
         if (result.error) return { content: [{ type: 'text' as const, text: result.error }], isError: true };
         safeBroadcast(tripId, 'collab:message:deleted', { messageId, username: result.username });
@@ -266,6 +275,7 @@ export function registerCollabTools(server: McpServer, userId: number, scopes: s
       async ({ tripId, messageId, emoji }) => {
         if (isDemoUser(userId)) return demoDenied();
         if (!canAccessTrip(tripId, userId)) return noAccess();
+        if (!hasTripPermission('collab_edit', tripId, userId)) return permissionDenied();
         const result = addOrRemoveReaction(messageId, tripId, userId, emoji);
         if (!result.found) return { content: [{ type: 'text' as const, text: 'Message not found.' }], isError: true };
         safeBroadcast(tripId, 'collab:message:reacted', { messageId, reactions: result.reactions });

server/src/mcp/tools/days.ts

@@ -15,7 +15,7 @@ import {
 import {
   safeBroadcast, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
   TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canWrite } from '../scopes';
 
@@ -38,6 +38,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, dayId, title }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const current = getDay(dayId, tripId);
       if (!current) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       const updated = updateDay(dayId, current, title !== undefined ? { title } : {});
@@ -60,6 +61,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, date, notes }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const day = createDay(tripId, date, notes);
       safeBroadcast(tripId, 'day:created', { day });
       return ok({ day });
@@ -79,6 +81,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, dayId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!getDay(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       deleteDay(dayId);
       safeBroadcast(tripId, 'day:deleted', { id: dayId });
@@ -105,6 +108,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, place_id, start_day_id, end_day_id, check_in, check_out, confirmation, notes }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const errors = validateAccommodationRefs(tripId, place_id, start_day_id, end_day_id);
       if (errors.length > 0) return { content: [{ type: 'text' as const, text: errors.map(e => e.message).join(', ') }], isError: true };
       const accommodation = createAccommodation(tripId, { place_id, start_day_id, end_day_id, check_in, check_out, confirmation, notes });
@@ -144,6 +148,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, name, description, lat, lng, address, category_id, google_place_id, osm_id, place_notes, website, phone, start_day_id, end_day_id, check_in, check_out, confirmation, accommodation_notes, price, currency }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const dayErrors = validateAccommodationRefs(tripId, undefined, start_day_id, end_day_id);
       if (dayErrors.length > 0) return { content: [{ type: 'text' as const, text: dayErrors.map(e => e.message).join(', ') }], isError: true };
       try {
@@ -182,6 +187,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, accommodationId, place_id, start_day_id, end_day_id, check_in, check_out, confirmation, notes }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const existing = getAccommodation(accommodationId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Accommodation not found.' }], isError: true };
       const accommodation = updateAccommodation(accommodationId, existing, { place_id, start_day_id, end_day_id, check_in, check_out, confirmation, notes });
@@ -203,6 +209,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, accommodationId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!getAccommodation(accommodationId, tripId)) return { content: [{ type: 'text' as const, text: 'Accommodation not found.' }], isError: true };
       const { linkedReservationId } = deleteAccommodation(accommodationId);
       safeBroadcast(tripId, 'accommodation:deleted', { id: accommodationId, linkedReservationId });
@@ -228,6 +235,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, dayId, text, time, icon }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       if (!dayNoteExists(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       const note = createDayNote(dayId, tripId, text, time, icon);
       safeBroadcast(tripId, 'dayNote:created', { dayId, note });
@@ -252,6 +260,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, dayId, noteId, text, time, icon }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const existing = getDayNote(noteId, dayId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
       const note = updateDayNote(noteId, existing, { text, time: time !== undefined ? time : undefined, icon });
@@ -274,6 +283,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
     async ({ tripId, dayId, noteId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('day_edit', tripId, userId)) return permissionDenied();
       const note = getDayNote(noteId, dayId, tripId);
       if (!note) return { content: [{ type: 'text' as const, text: 'Note not found.' }], isError: true };
       deleteDayNote(noteId);

server/src/mcp/tools/packing.ts

@@ -14,7 +14,7 @@ import {
 import {
   safeBroadcast, TOOL_ANNOTATIONS_READONLY, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
   TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canRead, canWrite } from '../scopes';
 import { isAddonEnabled } from '../../services/adminService';
@@ -42,6 +42,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, name, category }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const item = createPackingItem(tripId, { name, category: category || 'General' });
       safeBroadcast(tripId, 'packing:created', { item });
       return ok({ item });
@@ -62,6 +63,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, itemId, checked }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const item = updatePackingItem(tripId, itemId, { checked: checked ? 1 : 0 }, ['checked']);
       if (!item) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
       safeBroadcast(tripId, 'packing:updated', { item });
@@ -82,6 +84,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, itemId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const deleted = deletePackingItem(tripId, itemId);
       if (!deleted) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
       safeBroadcast(tripId, 'packing:deleted', { itemId });
@@ -106,6 +109,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, itemId, name, category }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const bodyKeys = ['name', 'category'].filter(k => k === 'name' ? name !== undefined : category !== undefined);
       const item = updatePackingItem(tripId, itemId, { name, category }, bodyKeys);
       if (!item) return { content: [{ type: 'text' as const, text: 'Packing item not found.' }], isError: true };
@@ -129,6 +133,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, orderedIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       reorderPackingItems(tripId, orderedIds);
       safeBroadcast(tripId, 'packing:reordered', { orderedIds });
       return ok({ success: true });
@@ -165,6 +170,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, name, color }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const bag = createBag(tripId, { name, color });
       safeBroadcast(tripId, 'packing:bag-created', { bag });
       return ok({ bag });
@@ -186,6 +192,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, bagId, name, color }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const fields: Record<string, unknown> = {};
       const bodyKeys: string[] = [];
       if (name !== undefined) { fields.name = name; bodyKeys.push('name'); }
@@ -209,6 +216,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, bagId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       deleteBag(tripId, bagId);
       safeBroadcast(tripId, 'packing:bag-deleted', { id: bagId });
       return ok({ success: true });
@@ -229,6 +237,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, bagId, userIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       setBagMembers(tripId, bagId, userIds);
       safeBroadcast(tripId, 'packing:bag-members-updated', { bagId, userIds });
       return ok({ success: true });
@@ -265,6 +274,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, categoryName, userIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       updatePackingCategoryAssignees(tripId, categoryName, userIds);
       safeBroadcast(tripId, 'packing:assignees', { categoryName, userIds });
       return ok({ success: true });
@@ -284,6 +294,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, templateId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const applied = applyTemplate(tripId, templateId);
       if (applied === null) return { content: [{ type: 'text' as const, text: 'Template not found.' }], isError: true };
       safeBroadcast(tripId, 'packing:template-applied', { templateId });
@@ -304,6 +315,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, templateName }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       saveAsTemplate(tripId, userId, templateName);
       return ok({ success: true });
     }
@@ -326,6 +338,7 @@ export function registerPackingTools(server: McpServer, userId: number, scopes:
     async ({ tripId, items }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       bulkImport(tripId, items);
       safeBroadcast(tripId, 'packing:updated', {});
       return ok({ success: true, count: items.length });

server/src/mcp/tools/places.ts

@@ -10,7 +10,7 @@ import { searchPlaces } from '../../services/mapsService';
 import {
   safeBroadcast, TOOL_ANNOTATIONS_READONLY, TOOL_ANNOTATIONS_WRITE,
   TOOL_ANNOTATIONS_DELETE, TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canRead, canWrite } from '../scopes';
 
@@ -45,6 +45,7 @@ export function registerPlaceTools(server: McpServer, userId: number, scopes: st
     async ({ tripId, name, description, lat, lng, address, category_id, google_place_id, osm_id, notes, website, phone, price, currency }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('place_edit', tripId, userId)) return permissionDenied();
       const place = createPlace(String(tripId), { name, description, lat, lng, address, category_id, google_place_id, osm_id, notes, website, phone, price, currency });
       safeBroadcast(tripId, 'place:created', { place });
       return ok({ place });
@@ -78,6 +79,7 @@ export function registerPlaceTools(server: McpServer, userId: number, scopes: st
     async ({ tripId, dayId, name, description, lat, lng, address, category_id, google_place_id, osm_id, place_notes, website, phone, assignment_notes, price, currency }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('place_edit', tripId, userId)) return permissionDenied();
       if (!dayExists(dayId, tripId)) return { content: [{ type: 'text' as const, text: 'Day not found.' }], isError: true };
       try {
         const run = db.transaction(() => {
@@ -125,6 +127,7 @@ export function registerPlaceTools(server: McpServer, userId: number, scopes: st
     async ({ tripId, placeId, name, description, lat, lng, address, category_id, price, currency, place_time, end_time, duration_minutes, notes, website, phone, transport_mode, osm_id, google_place_id }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('place_edit', tripId, userId)) return permissionDenied();
       const place = updatePlace(String(tripId), String(placeId), { name, description, lat, lng, address, category_id, price, currency, place_time, end_time, duration_minutes, notes, website, phone, transport_mode, osm_id, google_place_id });
       if (!place) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
       safeBroadcast(tripId, 'place:updated', { place });
@@ -145,6 +148,7 @@ export function registerPlaceTools(server: McpServer, userId: number, scopes: st
     async ({ tripId, placeId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('place_edit', tripId, userId)) return permissionDenied();
       const deleted = deletePlace(String(tripId), String(placeId));
       if (!deleted) return { content: [{ type: 'text' as const, text: 'Place not found.' }], isError: true };
       safeBroadcast(tripId, 'place:deleted', { placeId });
@@ -222,6 +226,7 @@ export function registerPlaceTools(server: McpServer, userId: number, scopes: st
     async ({ tripId, url, source }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('place_edit', tripId, userId)) return permissionDenied();
 
       const result = source === 'google-list'
         ? await importGoogleList(String(tripId), url)
@@ -251,6 +256,7 @@ export function registerPlaceTools(server: McpServer, userId: number, scopes: st
     async ({ tripId, placeIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('place_edit', tripId, userId)) return permissionDenied();
 
       const deleted = deletePlacesMany(String(tripId), placeIds);
       for (const id of deleted) {

server/src/mcp/tools/reservations.ts

@@ -12,7 +12,7 @@ import { placeExists, getAssignmentForTrip } from '../../services/assignmentServ
 import {
   safeBroadcast, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
   TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canWrite } from '../scopes';
 
@@ -47,6 +47,7 @@ export function registerReservationTools(server: McpServer, userId: number, scop
     async ({ tripId, title, type, reservation_time, location, confirmation_number, notes, day_id, place_id, start_day_id, end_day_id, check_in, check_out, assignment_id, price, budget_category }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
 
       // Validate that all referenced IDs belong to this trip
       if (day_id && !getDay(day_id, tripId))
@@ -113,6 +114,7 @@ export function registerReservationTools(server: McpServer, userId: number, scop
     async ({ tripId, reservationId, title, type, reservation_time, location, confirmation_number, notes, status, place_id, assignment_id }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
       const existing = getReservation(reservationId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
 
@@ -144,6 +146,7 @@ export function registerReservationTools(server: McpServer, userId: number, scop
     async ({ tripId, reservationId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
       const { deleted, accommodationDeleted } = deleteReservation(reservationId, tripId);
       if (!deleted) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
       if (accommodationDeleted) {
@@ -171,6 +174,7 @@ export function registerReservationTools(server: McpServer, userId: number, scop
     async ({ tripId, positions, dayId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
       updateReservationPositions(tripId, positions, dayId);
       safeBroadcast(tripId, 'reservation:positions', { positions, dayId });
       return ok({ success: true });
@@ -195,6 +199,7 @@ export function registerReservationTools(server: McpServer, userId: number, scop
     async ({ tripId, reservationId, place_id, start_day_id, end_day_id, check_in, check_out }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
       const current = getReservation(reservationId, tripId);
       if (!current) return { content: [{ type: 'text' as const, text: 'Reservation not found.' }], isError: true };
       if (current.type !== 'hotel') return { content: [{ type: 'text' as const, text: 'Reservation is not of type hotel.' }], isError: true };

server/src/mcp/tools/todos.ts

@@ -10,7 +10,7 @@ import {
 import {
   safeBroadcast, TOOL_ANNOTATIONS_READONLY, TOOL_ANNOTATIONS_WRITE,
   TOOL_ANNOTATIONS_DELETE, TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canRead, canWrite } from '../scopes';
 import { isAddonEnabled } from '../../services/adminService';
@@ -58,6 +58,7 @@ export function registerTodoTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, name, category, due_date, description, assigned_user_id, priority }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const item = createTodoItem(tripId, { name, category, due_date, description, assigned_user_id, priority });
       safeBroadcast(tripId, 'todo:created', { item });
       return ok({ item });
@@ -83,6 +84,7 @@ export function registerTodoTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, itemId, name, category, due_date, description, assigned_user_id, priority }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       // Build bodyKeys to signal which nullable fields were explicitly provided
       const bodyKeys: string[] = [];
       if (due_date !== undefined) bodyKeys.push('due_date');
@@ -110,6 +112,7 @@ export function registerTodoTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, itemId, checked }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const item = updateTodoItem(tripId, itemId, { checked: checked ? 1 : 0 }, []);
       if (!item) return { content: [{ type: 'text' as const, text: 'To-do item not found.' }], isError: true };
       safeBroadcast(tripId, 'todo:updated', { item });
@@ -130,6 +133,7 @@ export function registerTodoTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, itemId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const deleted = deleteTodoItem(tripId, itemId);
       if (!deleted) return { content: [{ type: 'text' as const, text: 'To-do item not found.' }], isError: true };
       safeBroadcast(tripId, 'todo:deleted', { itemId });
@@ -150,6 +154,7 @@ export function registerTodoTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, orderedIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       reorderTodoItems(tripId, orderedIds);
       return ok({ success: true });
     }
@@ -185,6 +190,7 @@ export function registerTodoTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, categoryName, userIds }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('packing_edit', tripId, userId)) return permissionDenied();
       const assignees = updateTodoCategoryAssignees(tripId, categoryName, userIds);
       safeBroadcast(tripId, 'todo:assignees', { category: categoryName, assignees });
       return ok({ assignees });

server/src/mcp/tools/transports.ts

@@ -9,7 +9,7 @@ import { linkBudgetItemToReservation } from '../../services/budgetService';
 import { getDay } from '../../services/dayService';
 import {
   safeBroadcast, TOOL_ANNOTATIONS_DELETE, TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  TOOL_ANNOTATIONS_WRITE, demoDenied, noAccess, ok,
+  TOOL_ANNOTATIONS_WRITE, demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canWrite } from '../scopes';
 
@@ -56,6 +56,7 @@ export function registerTransportTools(server: McpServer, userId: number, scopes
     async ({ tripId, type, title, status, start_day_id, end_day_id, reservation_time, reservation_end_time, confirmation_number, notes, metadata, endpoints, needs_review, price, budget_category }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
 
       if (start_day_id && !getDay(start_day_id, tripId))
         return { content: [{ type: 'text' as const, text: 'start_day_id does not belong to this trip.' }], isError: true };
@@ -120,6 +121,7 @@ export function registerTransportTools(server: McpServer, userId: number, scopes
     async ({ tripId, reservationId, type, title, status, start_day_id, end_day_id, reservation_time, reservation_end_time, confirmation_number, notes, metadata, endpoints, needs_review }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
 
       const existing = getReservation(reservationId, tripId);
       if (!existing) return { content: [{ type: 'text' as const, text: 'Transport not found.' }], isError: true };
@@ -165,6 +167,7 @@ export function registerTransportTools(server: McpServer, userId: number, scopes
     async ({ tripId, reservationId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('reservation_edit', tripId, userId)) return permissionDenied();
       const { deleted } = deleteReservation(reservationId, tripId);
       if (!deleted) return { content: [{ type: 'text' as const, text: 'Transport not found.' }], isError: true };
       safeBroadcast(tripId, 'reservation:deleted', { reservationId });

server/src/mcp/tools/trips.ts

@@ -22,7 +22,7 @@ import {
   safeBroadcast, MAX_MCP_TRIP_DAYS,
   TOOL_ANNOTATIONS_READONLY, TOOL_ANNOTATIONS_WRITE,
   TOOL_ANNOTATIONS_DELETE, TOOL_ANNOTATIONS_NON_IDEMPOTENT,
-  demoDenied, noAccess, ok,
+  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
 import { canRead, canReadTrips, canWrite, canDeleteTrips, canShareTrips } from '../scopes';
 
@@ -78,12 +78,15 @@ export function registerTripTools(server: McpServer, userId: number, scopes: str
         start_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/).optional(),
         end_date: z.string().regex(/^\d{4}-\d{2}-\d{2}$/).optional(),
         currency: z.string().length(3).optional(),
+        is_archived: z.boolean().optional().describe('Archive (true) or unarchive (false) the trip'),
+        cover_image: z.string().optional().describe('Cover image path, e.g. /uploads/covers/abc.jpg'),
       },
       annotations: TOOL_ANNOTATIONS_WRITE,
     },
-    async ({ tripId, title, description, start_date, end_date, currency }) => {
+    async ({ tripId, title, description, start_date, end_date, currency, is_archived, cover_image }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('trip_edit', tripId, userId)) return permissionDenied();
       if (start_date) {
         const d = new Date(start_date + 'T00:00:00Z');
         if (isNaN(d.getTime()) || d.toISOString().slice(0, 10) !== start_date)
@@ -94,7 +97,7 @@ export function registerTripTools(server: McpServer, userId: number, scopes: str
         if (isNaN(d.getTime()) || d.toISOString().slice(0, 10) !== end_date)
           return { content: [{ type: 'text' as const, text: 'end_date is not a valid calendar date.' }], isError: true };
       }
-      const { updatedTrip } = updateTrip(tripId, userId, { title, description, start_date, end_date, currency }, 'user');
+      const { updatedTrip } = updateTrip(tripId, userId, { title, description, start_date, end_date, currency, is_archived, cover_image }, 'user');
       safeBroadcast(tripId, 'trip:updated', { trip: updatedTrip });
       return ok({ trip: updatedTrip });
     }
@@ -321,6 +324,8 @@ export function registerTripTools(server: McpServer, userId: number, scopes: str
       annotations: TOOL_ANNOTATIONS_READONLY,
     },
     async ({ tripId }) => {
+      // Read parity with the REST route GET /api/trips/:tripId/share-link, which
+      // only requires trip membership (share_manage gates create/delete, not read).
       if (!canAccessTrip(tripId, userId)) return noAccess();
       const link = getShareLink(String(tripId));
       return ok({ link });
@@ -344,6 +349,7 @@ export function registerTripTools(server: McpServer, userId: number, scopes: str
     async ({ tripId, share_map, share_bookings, share_packing, share_budget, share_collab }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('share_manage', tripId, userId)) return permissionDenied();
       const { token, created } = createOrUpdateShareLink(String(tripId), userId, {
         share_map: share_map ?? true,
         share_bookings: share_bookings ?? true,
@@ -367,6 +373,7 @@ export function registerTripTools(server: McpServer, userId: number, scopes: str
     async ({ tripId }) => {
       if (isDemoUser(userId)) return demoDenied();
       if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('share_manage', tripId, userId)) return permissionDenied();
       deleteShareLink(String(tripId));
       return ok({ success: true });
     }

server/src/middleware/auth.ts

@@ -27,7 +27,11 @@ export function extractToken(req: Request): string | null {
  */
 export function verifyJwtAndLoadUser(token: string): User | null {
   try {
-    const decoded = jwt.verify(token, JWT_SECRET, { algorithms: ['HS256'] }) as { id: number; pv?: number };
+    const decoded = jwt.verify(token, JWT_SECRET, { algorithms: ['HS256'] }) as { id: number; pv?: number; purpose?: string };
+    // Purpose-scoped tokens (e.g. the short-lived mfa_login token) share this
+    // secret but are not full session tokens — only their dedicated endpoint
+    // may accept them, so reject any token carrying a purpose claim here.
+    if (decoded.purpose) return null;
     const row = db.prepare(
       'SELECT id, username, email, role, password_version FROM users WHERE id = ?'
     ).get(decoded.id) as (User & { password_version?: number }) | undefined;

server/src/middleware/globalMiddleware.ts

@@ -97,7 +97,6 @@ export function applyGlobalMiddleware(
           "https://*.basemaps.cartocdn.com", "https://*.tile.openstreetmap.org",
           "https://unpkg.com", "https://open-meteo.com", "https://api.open-meteo.com",
           "https://geocoding-api.open-meteo.com", "https://api.exchangerate-api.com",
-          "https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_50m_admin_0_countries.geojson",
           "https://router.project-osrm.org/route/v1/", "https://routing.openstreetmap.de/",
           "https://api.mapbox.com", "https://*.tiles.mapbox.com", "https://events.mapbox.com"
         ],
@@ -107,6 +106,9 @@ export function applyGlobalMiddleware(
         objectSrc: ["'none'"],
         frameSrc: ["'none'"],
         frameAncestors: ["'self'"],
+        // Restrict <form> submission targets (form-action has no default-src
+        // fallback, so it must be set explicitly).
+        formAction: ["'self'"],
         upgradeInsecureRequests: shouldForceHttps ? [] : null
       }
     },

server/src/nest/addons/addons.service.ts

@@ -1,7 +1,7 @@
 import { Injectable } from '@nestjs/common';
 import { db } from '../../db/database';
 import type { Addon } from '../../types';
-import { getCollabFeatures } from '../../services/adminService';
+import { getBagTracking, getCollabFeatures } from '../../services/adminService';
 import { getPhotoProviderConfig } from '../../services/memories/helpersService';
 
 /**
@@ -53,6 +53,7 @@ export class AddonsService {
 
     return {
       collabFeatures: getCollabFeatures(),
+      bagTracking: getBagTracking().enabled,
       addons: [
         ...addons.map((a) => ({ ...a, enabled: !!a.enabled })),
         ...providers.map((p) => ({