test(i18n): account for the Swedish locale in SUPPORTED_LANGUAGES

The Swedish translation added 'sv' as the 21st language but left the FE-COMP-I18N-009 length assertion at 20, so the full client suite went red on this branch. Bump the count to 21 and add an 'sv' sample.
test: make the Google Maps ftid path honest + cover the URL helper
2026-06-27 01:01:47 +00:00 · 2026-06-26 22:36:45 +02:00 · 2026-06-26 22:36:45 +02:00 · 2026-06-26 22:36:45 +02:00 · 2026-06-26 19:55:42 +02:00 · 2026-06-26 18:27:03 +02:00
787 changed files with 16466 additions and 12594 deletions
@@ -32,6 +32,7 @@ server/tests/
 server/vitest.config.ts
 server/reset-admin.js
 **/*.test.ts
+**/*.spec.ts
 wiki/
 scripts/
 charts/
@@ -85,6 +85,10 @@ COPY --from=server-builder /app/server/dist ./server/dist
 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/
+# Encryption-key rotation is run on demand via tsx (a prod dep) straight from the
+# raw .ts source — it never enters dist, so it must be copied in explicitly or
+# `node --import tsx scripts/migrate-encryption.ts` fails with module-not-found.
+COPY server/scripts/migrate-encryption.ts ./server/scripts/migrate-encryption.ts
 COPY --from=shared-builder /app/shared/dist ./shared/dist
 COPY --from=client-builder /app/client/dist ./server/public
 COPY --from=client-builder /app/client/public/fonts ./server/public/fonts
@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<CommunityApplications>
+  <Profile>TREK is a self-hosted, real-time collaborative travel planner. Plan trips together with interactive maps, budgets, bookings, packing lists, day-by-day itineraries and file management — every change syncs instantly across everyone in your group. Includes OIDC/SSO, TOTP MFA, dark mode, PWA support, multi-language UI and a modular addon system (Vacay, Atlas, Collab, Budget, Packing, Journey). Maintained by mauriceboe — support and bug reports via GitHub Issues.</Profile>
+  <Icon>https://raw.githubusercontent.com/mauriceboe/TREK/main/docs/trek-icon.png</Icon>
+  <WebPage>https://github.com/mauriceboe/TREK</WebPage>
+  <Forum>https://github.com/mauriceboe/TREK/issues</Forum>
+  <DonateLink>https://ko-fi.com/mauriceboe</DonateLink>
+  <DonateText>Support TREK development</DonateText>
+</CommunityApplications>
@@ -39,7 +39,7 @@ See `values.yaml` for more options.

 ## Notes
 - Ingress is off by default. Enable and configure hosts for your domain.
- PVCs require a default StorageClass or specify one as needed.
+- PVCs use the cluster's default StorageClass. Set `persistence.data.storageClassName` and/or `persistence.uploads.storageClassName` to bind a specific class.
 - `JWT_SECRET` is managed entirely by the server — auto-generated into the data PVC on first start and rotatable via the admin panel (Settings → Danger Zone). No Helm configuration needed.
 - `ENCRYPTION_KEY` encrypts stored secrets (API keys, MFA, SMTP, OIDC) at rest. Recommended: set via `secretEnv.ENCRYPTION_KEY` or `existingSecret`. If left empty, the server falls back automatically: existing installs use `data/.jwt_secret` (no action needed on upgrade); fresh installs auto-generate a key persisted to the data PVC.
 - If using ingress, you must manually keep `env.ALLOWED_ORIGINS` and `ingress.hosts` in sync to ensure CORS works correctly. The chart does not sync these automatically.
@@ -1,5 +1,5 @@
 apiVersion: v2
 name: trek
-version: 3.0.22
+version: 3.1.2
 description: Minimal Helm chart for TREK app
-appVersion: "3.0.22"
+appVersion: "3.1.2"
@@ -5,9 +5,16 @@ metadata:
  name: {{ include "trek.fullname" . }}-data
  labels:
    app: {{ include "trek.name" . }}
+  {{- with .Values.persistence.data.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
 spec:
  accessModes:
    - ReadWriteOnce
+  {{- with .Values.persistence.data.storageClassName }}
+  storageClassName: {{ . | quote }}
+  {{- end }}
  resources:
    requests:
      storage: {{ .Values.persistence.data.size }}
@@ -18,9 +25,16 @@ metadata:
  name: {{ include "trek.fullname" . }}-uploads
  labels:
    app: {{ include "trek.name" . }}
+  {{- with .Values.persistence.uploads.annotations }}
+  annotations:
+    {{- toYaml . | nindent 4 }}
+  {{- end }}
 spec:
  accessModes:
    - ReadWriteOnce
+  {{- with .Values.persistence.uploads.storageClassName }}
+  storageClassName: {{ . | quote }}
+  {{- end }}
  resources:
    requests:
      storage: {{ .Values.persistence.uploads.size }}
@@ -98,8 +98,13 @@ persistence:
  enabled: true
  data:
    size: 1Gi
+    # Leave empty to use the cluster's default StorageClass; set to bind a specific class.
+    storageClassName: ""
+    annotations: {}
  uploads:
    size: 1Gi
+    storageClassName: ""
+    annotations: {}

 resources:
  requests:
@@ -1,6 +1,6 @@
 {
  "name": "@trek/client",
-  "version": "3.0.22",
+  "version": "3.1.2",
  "private": true,
  "type": "module",
  "scripts": {
@@ -34,6 +34,7 @@
    "leaflet": "^1.9.4",
    "lucide-react": "^0.344.0",
    "mapbox-gl": "^3.22.0",
+    "maplibre-gl": "^5.24.0",
    "marked": "^18.0.0",
    "react": "^19.2.6",
    "react-dom": "^19.2.6",
@@ -100,6 +100,7 @@ const RATE_LIMIT_MESSAGES: Record<string, string> = {
  ja:      '試行回数が多すぎます。時間をおいて再度お試しください。',
  ko:      '시도 횟수가 너무 많습니다. 잠시 후 다시 시도해 주세요.',
  uk:      'Занадто багато спроб. Спробуйте пізніше.',
+  sv:      'För många försök. Prova igen senare.',
 }

 function translateRateLimit(): string {
@@ -489,7 +490,7 @@ export const addonsApi = {

 export const airtrailApi = {
  getSettings: () => apiClient.get('/integrations/airtrail/settings').then(r => r.data),
-  saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean }) =>
+  saveSettings: (data: { url: string; apiKey?: string; allowInsecureTls?: boolean; writeEnabled?: 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 }) =>
@@ -595,6 +596,7 @@ export const budgetApi = {
  perPersonSummary: (tripId: number | string) => apiClient.get(`/trips/${tripId}/budget/summary/per-person`).then(r => r.data),
  settlement: (tripId: number | string, base?: string) => apiClient.get(`/trips/${tripId}/budget/settlement`, base ? { params: { base } } : undefined).then(r => r.data),
  createSettlement: (tripId: number | string, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.post(`/trips/${tripId}/budget/settlements`, data).then(r => r.data),
+  updateSettlement: (tripId: number | string, settlementId: number, data: { from_user_id: number; to_user_id: number; amount: number }) => apiClient.put(`/trips/${tripId}/budget/settlements/${settlementId}`, data).then(r => r.data),
  deleteSettlement: (tripId: number | string, settlementId: number) => apiClient.delete(`/trips/${tripId}/budget/settlements/${settlementId}`).then(r => r.data),
  reorderItems: (tripId: number | string, orderedIds: number[]) => apiClient.put(`/trips/${tripId}/budget/reorder/items`, { orderedIds }).then(r => r.data),
  reorderCategories: (tripId: number | string, orderedCategories: string[]) => apiClient.put(`/trips/${tripId}/budget/reorder/categories`, { orderedCategories } satisfies BudgetReorderCategoriesRequest).then(r => r.data),
@@ -6,7 +6,17 @@ import { useToast } from '../shared/Toast'
 import Section from '../Settings/Section'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import type { Place } from '../../types'
+import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
+import type { DistanceUnit, Place } from '../../types'
+import {
+  MAPBOX_DEFAULT_STYLE,
+  defaultStyleForProvider,
+  getStylePresets,
+  isOpenFreeMapStyle,
+  normalizeStyleForProvider,
+  styleSettingKey,
+  type GlMapProvider,
+} from '../Map/glProviders'

 const MAP_PRESETS = [
  { name: 'OpenStreetMap', url: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' },
@@ -18,25 +28,31 @@ const MAP_PRESETS = [

 type Defaults = {
  temperature_unit?: string
+  distance_unit?: DistanceUnit
  dark_mode?: string | boolean
  time_format?: string
+  default_currency?: string
  blur_booking_codes?: boolean
  map_tile_url?: string
  map_provider?: string
  mapbox_access_token?: string
  mapbox_style?: string
+  maplibre_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' },
-]
+type MapProvider = 'leaflet' | GlMapProvider
+
+function normalizeProvider(value: unknown): MapProvider {
+  return value === 'mapbox-gl' || value === 'maplibre-gl' ? value : 'leaflet'
+}
+
+function styleForProvider(provider: MapProvider, style?: string | null): string {
+  if (provider === 'leaflet') return style || MAPBOX_DEFAULT_STYLE
+  if (provider === 'mapbox-gl' && isOpenFreeMapStyle(style)) return MAPBOX_DEFAULT_STYLE
+  return normalizeStyleForProvider(provider, style)
+}

 function OptionRow({
  label,
@@ -96,10 +112,11 @@ export default function DefaultUserSettingsTab(): React.ReactElement {

  useEffect(() => {
    adminApi.getDefaultUserSettings().then((data: Defaults) => {
+      const provider = normalizeProvider(data.map_provider)
      setDefaults(data)
      setMapTileUrl(data.map_tile_url || '')
      setMapboxToken(data.mapbox_access_token || '')
-      setMapboxStyle(data.mapbox_style || '')
+      setMapboxStyle(provider === 'leaflet' ? (data.mapbox_style || '') : styleForProvider(provider, provider === 'maplibre-gl' ? data.maplibre_style : data.mapbox_style))
      setLoaded(true)
    }).catch(() => setLoaded(true))
  }, [])
@@ -120,7 +137,10 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
      setDefaults(updated)
      if (key === 'map_tile_url') setMapTileUrl('')
      if (key === 'mapbox_access_token') setMapboxToken('')
-      if (key === 'mapbox_style') setMapboxStyle('')
+      if (key === 'mapbox_style' || key === 'maplibre_style') {
+        const provider = normalizeProvider(defaults.map_provider)
+        setMapboxStyle(provider === 'leaflet' ? '' : defaultStyleForProvider(provider))
+      }
      toast.success(t('admin.defaultSettings.reset'))
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : t('common.error'))
@@ -170,6 +190,20 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
  }

  const darkMode = defaults.dark_mode
+  const mapProvider = normalizeProvider(defaults.map_provider)
+  const glStylePresets = mapProvider === 'leaflet' ? [] : getStylePresets(mapProvider)
+  const styleKey: keyof Defaults = mapProvider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
+  const saveMapProvider = (nextProvider: MapProvider) => {
+    const patch: Partial<Defaults> = { map_provider: nextProvider }
+    if (nextProvider !== 'leaflet') {
+      // Load + save the new provider's own style slot so the other provider's style is kept.
+      const slot = nextProvider === 'maplibre-gl' ? defaults.maplibre_style : defaults.mapbox_style
+      const nextStyle = styleForProvider(nextProvider, slot)
+      setMapboxStyle(nextStyle)
+      patch[styleSettingKey(nextProvider)] = nextStyle
+    }
+    save(patch)
+  }

  return (
    <Section title={t('admin.defaultSettings.title')} icon={Settings2}>
@@ -210,6 +244,22 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
        ))}
      </OptionRow>

+      {/* Distance */}
+      <OptionRow label={<>{t('settings.distance')} <ResetButton field="distance_unit" /></>}>
+        {([
+          { value: 'metric', label: 'km Metric' },
+          { value: 'imperial', label: 'mi Imperial' },
+        ] as const).map(opt => (
+          <OptionButton
+            key={opt.value}
+            active={defaults.distance_unit === opt.value}
+            onClick={() => save({ distance_unit: opt.value })}
+          >
+            {opt.label}
+          </OptionButton>
+        ))}
+      </OptionRow>
+
      {/* Time Format */}
      <OptionRow label={<>{t('settings.timeFormat')} <ResetButton field="time_format" /></>}>
        {([
@@ -226,6 +276,23 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
        ))}
      </OptionRow>

+      {/* Default Currency */}
+      <div>
+        <label className="block text-sm font-medium mb-1.5 text-content-secondary">
+          {t('settings.currency')} <ResetButton field="default_currency" />
+        </label>
+        <CustomSelect
+          value={defaults.default_currency || ''}
+          onChange={(value: string) => { if (value) save({ default_currency: value }) }}
+          placeholder={t('settings.currency')}
+          searchable
+          options={CURRENCIES.map(c => ({ value: c, label: SYMBOLS[c] ? `${c}  ${SYMBOLS[c]}` : c }))}
+          size="sm"
+          style={{ maxWidth: 240 }}
+        />
+        <p className="text-xs mt-1 text-content-faint">{t('settings.currencyHint')}</p>
+      </div>
+
      {/* Blur Booking Codes */}
      <OptionRow label={<>{t('settings.blurBookingCodes')} <ResetButton field="blur_booking_codes" /></>}>
        {([
@@ -297,19 +364,21 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
          {([
            { value: 'leaflet', label: t('admin.defaultSettings.providerLeaflet') },
            { value: 'mapbox-gl', label: t('admin.defaultSettings.providerMapbox') },
+            { value: 'maplibre-gl', label: t('admin.defaultSettings.providerMapLibre') },
          ] as const).map(opt => (
            <OptionButton
              key={opt.value}
-              active={(defaults.map_provider || 'leaflet') === opt.value}
-              onClick={() => save({ map_provider: opt.value })}
+              active={mapProvider === opt.value}
+              onClick={() => saveMapProvider(opt.value)}
            >
              {opt.label}
            </OptionButton>
          ))}
        </OptionRow>

-        {defaults.map_provider === 'mapbox-gl' && (
+        {mapProvider !== 'leaflet' && (
          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 18 }}>
+            {mapProvider === 'mapbox-gl' && (
            <div>
              <label className="block text-sm font-medium mb-1.5 text-content-secondary">
                {t('admin.defaultSettings.mapboxToken')}
@@ -327,17 +396,18 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
              />
              <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" />
+                <ResetButton field={styleKey} />
              </label>
              <CustomSelect
                value={mapboxStyle}
-                onChange={(value: string) => { if (value) { setMapboxStyle(value); save({ mapbox_style: value }) } }}
+                onChange={(value: string) => { if (value) { setMapboxStyle(value); save({ [styleKey]: value }) } }}
                placeholder={t('admin.defaultSettings.mapboxStylePlaceholder')}
-                options={MAPBOX_STYLE_PRESETS.map(p => ({ value: p.url, label: p.name }))}
+                options={glStylePresets.map(p => ({ value: p.url, label: p.name }))}
                size="sm"
                style={{ marginBottom: 8 }}
              />
@@ -345,12 +415,18 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
                type="text"
                value={mapboxStyle}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMapboxStyle(e.target.value)}
-                onBlur={() => save({ mapbox_style: mapboxStyle })}
-                placeholder="mapbox://styles/mapbox/standard"
+                onBlur={() => {
+                  const nextStyle = normalizeStyleForProvider(mapProvider, mapboxStyle)
+                  setMapboxStyle(nextStyle)
+                  save({ [styleKey]: nextStyle })
+                }}
+                placeholder={defaultStyleForProvider(mapProvider)}
                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>

+            {mapProvider === 'mapbox-gl' && (
+            <>
            <OptionRow label={<>{t('admin.defaultSettings.mapbox3d')} <ResetButton field="mapbox_3d_enabled" /></>}>
              {([
                { value: true, label: t('settings.on') || 'On' },
@@ -372,6 +448,8 @@ export default function DefaultUserSettingsTab(): React.ReactElement {
                </OptionButton>
              ))}
            </OptionRow>
+            </>
+            )}
          </div>
        )}
      </div>
@@ -0,0 +1,197 @@
+// FE-COMP-COSTS: settlements surfaced inline in the Costs ledger (issue #1241)
+import { render, screen, waitFor } from '../../../tests/helpers/render'
+import { http, HttpResponse } from 'msw'
+import { server } from '../../../tests/helpers/msw/server'
+import { useAuthStore } from '../../store/authStore'
+import { useTripStore } from '../../store/tripStore'
+import { resetAllStores, seedStore } from '../../../tests/helpers/store'
+import { buildUser, buildTrip, buildBudgetItem } from '../../../tests/helpers/factories'
+import CostsPanel from './CostsPanel'
+
+const tripMembers = [
+  { id: 1, username: 'alice', avatar_url: null },
+  { id: 2, username: 'bob', avatar_url: null },
+]
+
+beforeEach(() => {
+  resetAllStores()
+  seedStore(useAuthStore, { user: buildUser(), isAuthenticated: true })
+  seedStore(useTripStore, { trip: buildTrip({ id: 1, currency: 'EUR' }) })
+})
+
+describe('CostsPanel — settlements in the ledger', () => {
+  it('renders a settle-up payment as a ledger row with an undo action', async () => {
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 90, expense_date: '2025-06-15' }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [],
+          flows: [],
+          settlements: [
+            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
+          ],
+        })
+      ),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    // The expense and the settlement (payment) both appear in the unified ledger.
+    await screen.findByText('Dinner')
+    await screen.findByText('Payment')
+    // The payment row exposes an inline undo (no need to open a separate History modal).
+    expect(screen.getByTitle('Undo')).toBeInTheDocument()
+  })
+
+  it('records a manual payment via the Add payment button', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget/settlements', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ settlement: { id: 1, ...posted } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add payment' }))
+    await user.type(await screen.findByPlaceholderText('0.00'), '25')
+    // The footer submit is the second "Add payment" control once the modal is open.
+    const addButtons = screen.getAllByRole('button', { name: 'Add payment' })
+    const submit = addButtons[addButtons.length - 1]
+    await user.click(submit)
+    await waitFor(() => expect(posted).toMatchObject({ amount: 25 }))
+  })
+
+  it('hides payment rows while a text search is active', async () => {
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Dinner' }), total_price: 90, expense_date: '2025-06-15' }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () =>
+        HttpResponse.json({
+          balances: [],
+          flows: [],
+          settlements: [
+            { id: 7, trip_id: 1, from_user_id: 2, to_user_id: 1, amount: 30, created_at: '2025-06-16 10:00:00', from_username: 'bob', to_username: 'alice' },
+          ],
+        })
+      ),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await screen.findByText('Payment')
+    await user.type(screen.getByPlaceholderText('Search expenses…'), 'Dinner')
+    // Payment rows have no name, so a search hides them while the matching expense stays.
+    expect(screen.queryByText('Payment')).not.toBeInTheDocument()
+    expect(screen.getByText('Dinner')).toBeInTheDocument()
+  })
+
+  it('auto-splits the total across participants and rebalances a pinned amount on save', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Dinner' }), id: 5 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Dinner')
+    const nums = () => screen.getAllByPlaceholderText('0.00') as HTMLInputElement[]
+    await user.type(nums()[0], '100') // total → auto equal-split across the 2 participants
+    await waitFor(() => expect(nums()[1].value).toBe('50'))
+    expect(nums()[2].value).toBe('50')
+    // Pin the first participant to 30 → the other non-pinned field rebalances to 70.
+    await user.clear(nums()[1]); await user.type(nums()[1], '30')
+    await waitFor(() => expect(nums()[2].value).toBe('70'))
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    await user.click(addBtns[addBtns.length - 1]) // footer submit
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(100)
+    expect(posted!.payers).toEqual(expect.arrayContaining([
+      expect.objectContaining({ user_id: 1, amount: 30 }),
+      expect.objectContaining({ user_id: 2, amount: 70 }),
+    ]))
+  })
+
+  it('accepts a comma as the decimal separator in the total amount (#1256)', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'AirTags' }), id: 6 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'AirTags')
+    await user.type(screen.getAllByPlaceholderText('0.00')[0], '39,99') // comma → normalized to 39.99
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    await user.click(addBtns[addBtns.length - 1]) // footer submit
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(39.99)
+  })
+
+  it('marks an expense with no payer as Unfinished', async () => {
+    const item = { ...buildBudgetItem({ trip_id: 1, category: 'food', name: 'Hotel' }), total_price: 90, payers: [], members: [{ user_id: 1, username: 'alice', paid: 0 }] }
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [item] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+    )
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+    await screen.findByText('Hotel')
+    expect(screen.getByText('Unfinished')).toBeInTheDocument()
+  })
+
+  it('records a recorded-total expense with nobody to split with (#1286)', async () => {
+    let posted: Record<string, unknown> | null = null
+    server.use(
+      http.get('/api/trips/1/budget', () => HttpResponse.json({ items: [] })),
+      http.get('/api/trips/1/budget/settlement', () => HttpResponse.json({ balances: [], flows: [], settlements: [] })),
+      http.post('/api/trips/1/budget', async ({ request }) => {
+        posted = await request.json() as Record<string, unknown>
+        return HttpResponse.json({ item: { ...buildBudgetItem({ trip_id: 1, name: 'Hotel' }), id: 9 } })
+      }),
+    )
+    const { default: userEvent } = await import('@testing-library/user-event')
+    const user = userEvent.setup()
+    render(<CostsPanel tripId={1} tripMembers={tripMembers} />)
+
+    await user.click(await screen.findByRole('button', { name: 'Add expense' }))
+    await user.type(await screen.findByPlaceholderText('e.g. Dinner, souvenirs, gas…'), 'Hotel')
+    await user.type(screen.getAllByPlaceholderText('0.00')[0], '120') // total only, paid on-site later
+
+    // Deselect everyone — the cost is recorded without a split (the bug: this was blocked).
+    // The participant toggles are buttons; the same names also appear as plain text in
+    // the Balances sidebar, so target the buttons specifically.
+    await user.click(screen.getByRole('button', { name: /alice/i }))
+    await user.click(screen.getByRole('button', { name: /bob/i }))
+
+    const addBtns = screen.getAllByRole('button', { name: 'Add expense' })
+    const submit = addBtns[addBtns.length - 1] // footer submit
+    expect(submit).not.toBeDisabled()
+    await user.click(submit)
+
+    await waitFor(() => expect(posted).toBeTruthy())
+    expect(posted!.total_price).toBe(120)
+    expect(posted!.member_ids).toEqual([])
+    expect(posted!.payers).toEqual([])
+  })
+})
@@ -1,6 +1,6 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, Check, RotateCcw, History, Pencil, Trash2 } from 'lucide-react'
+import { ArrowDown, ArrowUp, BarChart3, Plus, Search, ArrowRight, ArrowLeftRight, Check, RotateCcw, Pencil, Trash2 } from 'lucide-react'
 import { useTripStore } from '../../store/tripStore'
 import { useAuthStore } from '../../store/authStore'
 import { useSettingsStore } from '../../store/settingsStore'
@@ -39,6 +39,12 @@ interface SettlementData {
  settlements: Settlement[]
 }

+// One row in the unified Costs ledger — either an expense or a settle-up payment,
+// carrying the date used to group it by day.
+type LedgerEntry =
+  | { kind: 'expense'; date: string; e: BudgetItem }
+  | { kind: 'payment'; date: string; s: Settlement }
+
 const round2 = (n: number) => Math.round(n * 100) / 100
 const FIELD_H = 40 // shared height for the amount / currency / day row in the modal

@@ -62,9 +68,10 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
  const [settlement, setSettlement] = useState<SettlementData | null>(null)
  const [filter, setFilter] = useState<'all' | 'mine' | 'owed'>('all')
  const [search, setSearch] = useState('')
-  const [histOpen, setHistOpen] = useState(false)
  const [modalOpen, setModalOpen] = useState(false)
  const [editing, setEditing] = useState<BudgetItem | null>(null)
+  const [editingSettlement, setEditingSettlement] = useState<Settlement | null>(null)
+  const [addingPayment, setAddingPayment] = useState(false)

  const people = tripMembers
  const personById = useCallback((id: number) => people.find(p => p.id === id), [people])
@@ -122,21 +129,37 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
    return list
  }, [budgetItems, filter, search, me])

+  // Settlements ("payments") shown inline in the ledger. They have no name, so a
+  // text search hides them; they're excluded from the "owed" expense filter and,
+  // under "mine", only show transfers I'm part of.
+  const filteredSettlements = useMemo(() => {
+    if (search.trim()) return []
+    if (filter === 'owed') return []
+    let list = settlement?.settlements || []
+    if (filter === 'mine') list = list.filter(s => s.from_user_id === me || s.to_user_id === me)
+    return list
+  }, [settlement, filter, search, me])
+
  const dayGroups = useMemo(() => {
-    const groups: { day: string; items: BudgetItem[] }[] = []
-    const labelOf = (e: BudgetItem) => {
-      if (!e.expense_date) return t('costs.noDate')
-      try { return new Date(e.expense_date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return e.expense_date }
+    const entries: LedgerEntry[] = [
+      ...filtered.map(e => ({ kind: 'expense' as const, date: e.expense_date || '', e })),
+      ...filteredSettlements.map(s => ({ kind: 'payment' as const, date: (s.created_at || '').slice(0, 10), s })),
+    ]
+    const labelOf = (date: string) => {
+      if (!date) return t('costs.noDate')
+      try { return new Date(date + 'T00:00:00Z').toLocaleDateString(locale, { weekday: 'short', day: 'numeric', month: 'short', timeZone: 'UTC' }) } catch { return date }
    }
-    const sorted = filtered.slice().sort((a, b) => (b.expense_date || '').localeCompare(a.expense_date || ''))
-    for (const e of sorted) {
-      const day = labelOf(e)
+    // Newest day first; within a day, expenses before payments (insertion order).
+    const sorted = entries.slice().sort((a, b) => (b.date || '').localeCompare(a.date || ''))
+    const groups: { day: string; entries: LedgerEntry[] }[] = []
+    for (const en of sorted) {
+      const day = labelOf(en.date)
      let g = groups.find(x => x.day === day)
-      if (!g) { g = { day, items: [] }; groups.push(g) }
-      g.items.push(e)
+      if (!g) { g = { day, entries: [] }; groups.push(g) }
+      g.entries.push(en)
    }
    return groups
-  }, [filtered, locale, t])
+  }, [filtered, filteredSettlements, locale, t])

  // ── settle actions ──────────────────────────────────────────────────────
  const settleFlow = async (fromId: number, toId: number, amount: number) => {
@@ -280,14 +303,16 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
              {search ? t('costs.noMatch') : t('costs.emptyText')}
            </div>
          ) : dayGroups.map(g => {
-            const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
+            const dtot = g.entries.reduce((a, en) => en.kind === 'expense' ? a + baseTotal(en.e) : a, 0)
            return (
              <div key={g.day} style={{ marginBottom: 22 }}>
                <div className={labelCls} style={{ display: 'flex', alignItems: 'center', margin: '0 0 10px 4px' }}>
                  {g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 12 }}>{t('costs.spent', { amount: fmt(dtot) })}</span>
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-                  {g.items.map(e => <ExpenseRow key={e.id} e={e} />)}
+                  {g.entries.map(en => en.kind === 'expense'
+                    ? <ExpenseRow key={'e' + en.e.id} e={en.e} />
+                    : <SettlementRow key={'s' + en.s.id} s={en.s} />)}
                </div>
              </div>
            )
@@ -300,11 +325,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
          <div className={cardCls} style={{ borderRadius: 22, padding: '22px 24px' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div className={labelCls}>{t('costs.settleUp')} · <span className="text-content">{(settlement?.flows || []).length}</span></div>
-              <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)}
-                className="text-content-muted bg-surface-secondary border border-edge disabled:opacity-40"
-                style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
-                <History size={13} /> {t('costs.history')}{(settlement?.settlements || []).length ? ` (${settlement!.settlements.length})` : ''}
-              </button>
+              {canEdit && (
+                <button onClick={() => setAddingPayment(true)}
+                  className="text-content-muted bg-surface-secondary border border-edge"
+                  style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '5px 9px', borderRadius: 8, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+                  <Plus size={13} /> {t('costs.addPayment')}
+                </button>
+              )}
            </div>
            <SettleFlows />
          </div>
@@ -330,9 +357,11 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
          onSaved={() => { setModalOpen(false); loadBudgetItems(tripId); loadSettlement() }} />
      )}

-      <Modal isOpen={histOpen} onClose={() => setHistOpen(false)} title={t('costs.settleHistory')} size="md">
-        <SettleHistory settlements={settlement?.settlements || []} fmt={fmt} Avatar={Avatar} name={personName} onUndo={undoSettlement} canEdit={canEdit} />
-      </Modal>
+      {(editingSettlement || addingPayment) && (
+        <SettlementModal tripId={tripId} people={people} me={me} editing={editingSettlement}
+          onClose={() => { setEditingSettlement(null); setAddingPayment(false) }}
+          onSaved={() => { setEditingSettlement(null); setAddingPayment(false); loadSettlement() }} />
+      )}

      <style>{`
        .costs-root {
@@ -438,7 +467,9 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
        <div className={cardCls} style={{ borderRadius: 18, padding: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14, gap: 8 }}>
            <div className="text-content" style={{ fontSize: 19, fontWeight: 700, letterSpacing: '-0.02em', display: 'flex', alignItems: 'baseline', gap: 8 }}>{t('costs.settleUp')} <span className="text-content-faint" style={{ fontSize: 12, fontWeight: 500 }}>{(settlement?.flows || []).length}</span></div>
-            <button disabled={!(settlement?.settlements || []).length} onClick={() => setHistOpen(true)} className="text-content-muted bg-surface-card border border-edge disabled:opacity-40" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 9, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><History size={13} /> {t('costs.history')}</button>
+            {canEdit && (
+              <button onClick={() => setAddingPayment(true)} className="text-content-muted bg-surface-card border border-edge" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 9, fontSize: 11.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><Plus size={13} /> {t('costs.addPayment')}</button>
+            )}
          </div>
          <SettleFlows />
        </div>
@@ -458,11 +489,13 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
          {dayGroups.length === 0
            ? <div className="text-content-faint" style={{ textAlign: 'center', padding: '36px 16px', fontSize: 13 }}>{search ? t('costs.noMatch') : t('costs.emptyText')}</div>
            : dayGroups.map(g => {
-                const dtot = g.items.reduce((a, e) => a + baseTotal(e), 0)
+                const dtot = g.entries.reduce((a, en) => en.kind === 'expense' ? a + baseTotal(en.e) : a, 0)
                return (
                  <div key={g.day} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
                    <div className={labelCls} style={{ display: 'flex', alignItems: 'center', padding: '0 2px' }}>{g.day}<span className="text-content-muted" style={{ marginLeft: 'auto', textTransform: 'none', letterSpacing: 0, fontWeight: 500, fontSize: 11.5 }}>{t('costs.spent', { amount: fmt(dtot) })}</span></div>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.items.map(e => <ExpenseRow key={e.id} e={e} />)}</div>
+                    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>{g.entries.map(en => en.kind === 'expense'
+                      ? <ExpenseRow key={'e' + en.e.id} e={en.e} />
+                      : <SettlementRow key={'s' + en.s.id} s={en.s} />)}</div>
                  </div>
                )
              })}
@@ -490,11 +523,27 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
    const cur = curOf(e)
    const payers = (e.payers || []).filter(p => p.amount > 0)
    const net = round2(myPaidOf(e) - myShareOf(e))
+    // "Unfinished": a recorded total nobody has paid yet — counts toward the trip
+    // total but stays out of settlements until who-paid is filled in.
+    const isUnfinished = baseTotal(e) > 0 && payers.length === 0
    return (
      <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
-        <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}><Icon size={21} /></span>
+        <span style={{ position: 'relative', width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: c.color + '22', color: c.color }}>
+          <Icon size={21} />
+          {isMobile && isUnfinished && (
+            <span title={t('costs.unfinishedHint')} style={{ position: 'absolute', bottom: -4, right: -4, width: 20, height: 20, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 800, lineHeight: 1, border: '2px solid var(--bg-card)' }}>!</span>
+          )}
+        </span>
        <div style={{ minWidth: 0 }}>
-          <div className="text-content" style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{e.name}</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 6 }}>
+            <span className="text-content" style={{ fontSize: 15, fontWeight: 600 }}>{e.name}</span>
+            {isUnfinished && !isMobile && (
+              <span title={t('costs.unfinishedHint')} style={{ display: 'inline-flex', alignItems: 'center', gap: 4, padding: '2px 8px 2px 6px', borderRadius: 999, background: 'rgba(217,119,6,0.14)', color: '#d97706', fontSize: 11, fontWeight: 700, flexShrink: 0 }}>
+                <span style={{ width: 14, height: 14, borderRadius: '50%', background: '#d97706', color: '#fff', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 800 }}>!</span>
+                {t('costs.unfinished')}
+              </span>
+            )}
+          </div>
          {payers.length > 0 && (
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 5, marginBottom: 5 }}>
              {payers.map(p => (
@@ -514,7 +563,7 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
          <div style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
            <div className="text-content" style={{ fontSize: 18, fontWeight: 600 }}>{fmt(baseTotal(e))}</div>
-            {(e.members || []).length > 0 && Math.abs(net) > 0.01 && (
+            {!isUnfinished && (e.members || []).length > 0 && Math.abs(net) > 0.01 && (
              <div style={{ fontSize: 12, marginTop: 2, fontWeight: 500, whiteSpace: 'nowrap', color: net > 0 ? '#16a34a' : '#dc2626' }}>
                {net > 0 ? t('costs.youLent', { amount: fmt(net) }) : t('costs.youBorrowed', { amount: fmt(-net) })}
              </div>
@@ -531,6 +580,32 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps
    )
  }

+  // A settle-up payment as a ledger row — visually distinct from an expense, with
+  // inline edit + undo (reuses deleteSettlement) so it isn't buried in a modal.
+  function SettlementRow({ s }: { s: Settlement }) {
+    return (
+      <div className="bg-surface-card border border-edge exp-row" style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 16, alignItems: 'center', borderRadius: 18, padding: '16px 20px' }}>
+        <span style={{ width: 46, height: 46, borderRadius: 13, display: 'grid', placeItems: 'center', background: 'rgba(22,163,74,0.12)', color: '#16a34a' }}><ArrowLeftRight size={21} /></span>
+        <div style={{ minWidth: 0 }}>
+          <div className="text-content" style={{ fontSize: 15, fontWeight: 600, marginBottom: 6 }}>{t('costs.payment')}</div>
+          <div style={{ display: 'flex', alignItems: 'center', gap: 7, minWidth: 0 }} title={`${personName(s.from_user_id)} → ${personName(s.to_user_id)}`}>
+            <Avatar id={s.from_user_id} size={20} /><ArrowRight size={13} className="text-content-faint" /><Avatar id={s.to_user_id} size={20} />
+            <span className="text-content-faint" style={{ fontSize: 12, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{personName(s.from_user_id)} → {personName(s.to_user_id)}</span>
+          </div>
+        </div>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, alignSelf: 'center' }}>
+          <div className="text-content" style={{ fontSize: 18, fontWeight: 600, whiteSpace: 'nowrap' }}>{fmt(s.amount)}</div>
+          {canEdit && (
+            <div className="exp-actions" style={{ display: 'flex', flexDirection: 'column', gap: 6, flexShrink: 0 }}>
+              <button title={t('common.edit')} onClick={() => setEditingSettlement(s)} className="bg-surface-secondary border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer' }}><Pencil size={13} /></button>
+              <button title={t('costs.undo')} onClick={() => undoSettlement(s.id)} className="bg-surface-secondary border border-edge" style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 28, height: 28, borderRadius: 999, cursor: 'pointer', color: '#dc2626' }}><RotateCcw size={13} /></button>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
  function BalancesList({ balances }: { balances: SettlementData['balances'] }) {
    const rows = people.map(p => balances.find(b => b.user_id === p.id) || { user_id: p.id, username: p.username, avatar_url: null, balance: 0 })
    const max = Math.max(1, ...rows.map(r => Math.abs(r.balance)))
@@ -562,14 +637,16 @@ export default function CostsPanel({ tripId, tripMembers = [] }: CostsPanelProps

  function CategoryBreakdown() {
    const tot: Record<string, number> = {}
-    let grand = 0
-    for (const e of budgetItems) { const k = catMeta(e.category).key; tot[k] = (tot[k] || 0) + baseTotal(e); grand += baseTotal(e) }
+    for (const e of budgetItems) { const k = catMeta(e.category).key; tot[k] = (tot[k] || 0) + baseTotal(e) }
    const rows = COST_CATEGORY_LIST.filter(c => (tot[c.key] || 0) > 0).sort((a, b) => (tot[b.key] || 0) - (tot[a.key] || 0))
    if (rows.length === 0) return <div className="text-content-faint" style={{ fontSize: 12.5 }}>{t('costs.noCategories')}</div>
+    // Bars are scaled relative to the most expensive category (the top row fills the
+    // bar), not to the trip grand total — makes the relative ranking readable.
+    const maxCat = Math.max(0, ...rows.map(c => tot[c.key] || 0))
    return (
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {rows.map(c => {
-          const v = tot[c.key]; const pct = grand ? v / grand * 100 : 0
+          const v = tot[c.key]; const pct = maxCat ? v / maxCat * 100 : 0
          return (
            <div key={c.key} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 10, alignItems: 'center' }}>
              <span style={{ width: 10, height: 10, borderRadius: 3, background: c.color }} />
@@ -633,37 +710,75 @@ function FlowPills({ ids, lead, Avatar, name }: { ids: number[]; lead: string; A
  )
 }

-function SettleHistory({ settlements, fmt, Avatar, name, onUndo, canEdit }: {
-  settlements: Settlement[]; fmt: (v: number) => string; Avatar: (p: { id: number; size?: number }) => React.JSX.Element; name: (id: number) => string; onUndo: (id: number) => void; canEdit: boolean
+// Add or edit a settle-up payment (from / to / amount). Reachable inline from the
+// ledger row and from a manual "Add payment" button, so recording "I sent money to
+// X" works the same whether or not there's an outstanding expense behind it.
+function SettlementModal({ tripId, people, me, editing, onClose, onSaved }: {
+  tripId: number; people: TripMember[]; me: number; editing: Settlement | null; onClose: () => void; onSaved: () => void
 }) {
  const { t } = useTranslation()
-  if (settlements.length === 0) return <div className="text-content-faint" style={{ textAlign: 'center', padding: 30, fontSize: 13 }}>{t('costs.noSettlements')}</div>
-  const total = settlements.reduce((a, s) => a + s.amount, 0)
+  const toast = useToast()
+  const otherDefault = people.find(p => p.id !== me)?.id ?? me
+  const [fromId, setFromId] = useState<string>(String(editing?.from_user_id ?? me))
+  const [toId, setToId] = useState<string>(String(editing?.to_user_id ?? otherDefault))
+  const [amount, setAmount] = useState<string>(editing ? String(editing.amount) : '')
+  const [saving, setSaving] = useState(false)
+
+  const amt = parseFloat(amount) || 0
+  const valid = amt > 0 && fromId !== toId
+  const opts = people.map(p => ({ value: String(p.id), label: p.id === me ? t('costs.you') : p.username }))
+
+  const save = async () => {
+    if (!valid) return
+    setSaving(true)
+    const data = { from_user_id: Number(fromId), to_user_id: Number(toId), amount: amt }
+    try {
+      if (editing) await budgetApi.updateSettlement(tripId, editing.id, data)
+      else await budgetApi.createSettlement(tripId, data)
+      onSaved()
+    } catch { toast.error(t('common.unknownError')) } finally { setSaving(false) }
+  }
+
+  const inputCls = 'w-full bg-surface-input border border-edge text-content'
+  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+
  return (
-    <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', padding: '12px 14px', borderRadius: 12, marginBottom: 14, background: 'rgba(22,163,74,0.1)', color: '#16a34a', fontWeight: 600, fontSize: 13 }}>
-        <span>{t('costs.paymentsSettled', { count: settlements.length })}</span><span>{fmt(total)}</span>
+    <Modal isOpen onClose={onClose} title={editing ? t('costs.editPayment') : t('costs.addPayment')} size="md"
+      footer={
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
+          <button onClick={onClose} className="text-content-muted border border-edge" style={{ padding: '8px 16px', borderRadius: 10, background: 'none', fontSize: 13, cursor: 'pointer', fontFamily: 'inherit' }}>{t('common.cancel')}</button>
+          <button onClick={save} disabled={!valid || saving} className="bg-[var(--text-primary)] text-[var(--bg-primary)]" style={{ padding: '8px 20px', borderRadius: 10, border: 0, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit', opacity: !valid || saving ? 0.5 : 1 }}>{editing ? t('common.save') : t('costs.addPayment')}</button>
+        </div>
+      }>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
+        <div>
+          <label className={labelCls}>{t('costs.from')}</label>
+          <CustomSelect value={fromId} onChange={v => setFromId(String(v))} options={opts} style={{ width: '100%' }} />
+        </div>
+        <div>
+          <label className={labelCls}>{t('costs.to')}</label>
+          <CustomSelect value={toId} onChange={v => setToId(String(v))} options={opts} style={{ width: '100%' }} />
+        </div>
+        <div>
+          <label className={labelCls}>{t('costs.amount')}</label>
+          <input type="text" inputMode="decimal" placeholder="0.00" value={amount}
+            onChange={e => setAmount(e.target.value.replace(',', '.'))} className={inputCls} style={{ borderRadius: 10, padding: '11px 13px', fontSize: 14, outline: 'none', fontWeight: 600 }} />
+        </div>
      </div>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
-        {settlements.map(s => (
-          <div key={s.id} className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '12px 14px', borderRadius: 12 }}>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }} title={`${name(s.from_user_id)} → ${name(s.to_user_id)}`}>
-              <Avatar id={s.from_user_id} size={30} /><ArrowRight size={15} className="text-content-faint" /><Avatar id={s.to_user_id} size={30} />
-            </div>
-            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-              <span className="text-content" style={{ fontSize: 14, fontWeight: 600 }}>{fmt(s.amount)}</span>
-              {canEdit && <button onClick={() => onUndo(s.id)} className="bg-surface-card border border-edge text-content-muted" style={{ display: 'inline-flex', alignItems: 'center', gap: 5, padding: '6px 10px', borderRadius: 8, fontSize: 12, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}><RotateCcw size={12} /> {t('costs.undo')}</button>}
-            </div>
-          </div>
-        ))}
-      </div>
-    </div>
+    </Modal>
  )
 }

 // ── Add / edit expense modal ───────────────────────────────────────────────
-function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
-  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; onClose: () => void; onSaved: () => void
+export interface ExpensePrefill {
+  name?: string
+  category?: string
+  amount?: number
+  reservationId?: number
+}
+
+export function ExpenseModal({ tripId, base, people, me, editing, prefill, onClose, onSaved }: {
+  tripId: number; base: string; people: TripMember[]; me: number; editing: BudgetItem | null; prefill?: ExpensePrefill; onClose: () => void; onSaved: () => void
 }) {
  const { t, locale } = useTranslation()
  const toast = useToast()
@@ -671,34 +786,99 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
  const { convert } = useExchangeRates(base)
  const sym = (c: string) => SYMBOLS[c] || (c + ' ')

-  const [name, setName] = useState(editing?.name || '')
-  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : 'food')
+  const [name, setName] = useState(editing?.name || prefill?.name || '')
+  const [cat, setCat] = useState<string>(editing ? catMeta(editing.category).key : (prefill?.category || 'food'))
  const [currency, setCurrency] = useState((editing?.currency || base).toUpperCase())
  const [day, setDay] = useState(editing?.expense_date || new Date().toISOString().slice(0, 10))
-  const [payers, setPayers] = useState<Record<number, string>>(() => {
+  // One participant list: a person is "in" the split and may have paid an amount.
+  // Entering the total auto-distributes it equally across the non-pinned participants;
+  // touching an amount pins it and the rest rebalance so the paid amounts always sum
+  // back to the total. Leaving every amount blank = an unfinished expense (counts
+  // toward the trip total only, never settlements, until who-paid is filled in).
+  const [total, setTotal] = useState<string>(() => {
+    if (editing) return editing.total_price ? String(editing.total_price) : ''
+    if (prefill?.amount != null) return String(prefill.amount)
+    return ''
+  })
+  const [participants, setParticipants] = useState<Set<number>>(() =>
+    editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
+  const [paid, setPaid] = useState<Record<number, string>>(() => {
    const m: Record<number, string> = {}
-    for (const p of editing?.payers || []) m[p.user_id] = String(p.amount)
+    for (const p of editing?.payers || []) if (p.amount > 0) m[p.user_id] = String(p.amount)
    return m
  })
-  const [split, setSplit] = useState<Set<number>>(() =>
-    editing ? new Set((editing.members || []).map(m => m.user_id)) : new Set(people.map(p => p.id)))
+  // Amounts the user pinned by typing — kept out of the auto-rebalance. Existing
+  // payer amounts load as pinned so opening an expense never reshuffles them.
+  const [dirty, setDirty] = useState<Set<number>>(() =>
+    new Set((editing?.payers || []).filter(p => p.amount > 0).map(p => p.user_id)))
  const [saving, setSaving] = useState(false)

-  const payersTotal = Object.values(payers).reduce((a, v) => a + (parseFloat(v) || 0), 0)
-  const each = split.size > 0 ? payersTotal / split.size : 0
-  const valid = name.trim().length > 0 && split.size > 0 && payersTotal > 0
+  const totalNum = parseFloat(total) || 0
+  const paidSum = round2([...participants].reduce((a, id) => a + (parseFloat(paid[id]) || 0), 0))
+  const paidEntered = paidSum > 0
+  const balanced = Math.abs(paidSum - totalNum) < 0.01
+  const each = participants.size > 0 ? totalNum / participants.size : 0
+  // No participants = a recorded total with nobody to split with (e.g. a booking
+  // paid on-site later). It saves as an "unfinished" expense (#1286); selecting
+  // people only adds the who-owes-whom split on top.
+  const valid = name.trim().length > 0 && totalNum > 0 && (!paidEntered || balanced)
+
+  // Spread `amount` across `n` people in whole cents so the parts sum back exactly.
+  const splitCents = (amount: number, n: number): number[] => {
+    if (n <= 0) return []
+    const cents = Math.max(0, Math.round(amount * 100))
+    const base = Math.floor(cents / n), rem = cents - base * n
+    return Array.from({ length: n }, (_, i) => (base + (i < rem ? 1 : 0)) / 100)
+  }
+  // Recompute the non-pinned participants so every paid amount sums to the total.
+  const rebalance = (paidMap: Record<number, string>, dirtySet: Set<number>, parts: Set<number>, totalVal: number): Record<number, string> => {
+    const ids = [...parts]
+    const free = ids.filter(id => !dirtySet.has(id))
+    if (free.length === 0) return paidMap
+    const pinnedSum = ids.filter(id => dirtySet.has(id)).reduce((a, id) => a + (parseFloat(paidMap[id]) || 0), 0)
+    const shares = splitCents(totalVal - pinnedSum, free.length)
+    const next = { ...paidMap }
+    free.forEach((id, i) => { next[id] = shares[i] ? String(shares[i]) : '' })
+    return next
+  }
+
+  const onTotalChange = (v: string) => {
+    v = v.replace(',', '.')
+    setTotal(v)
+    setPaid(prev => rebalance(prev, dirty, participants, parseFloat(v) || 0))
+  }
+  const onPaidChange = (id: number, v: string) => {
+    v = v.replace(',', '.')
+    const nextDirty = new Set(dirty); nextDirty.add(id)
+    setDirty(nextDirty)
+    setPaid(prev => rebalance({ ...prev, [id]: v }, nextDirty, participants, totalNum))
+  }
+  const toggleParticipant = (id: number) => {
+    const nextParts = new Set(participants), nextDirty = new Set(dirty), nextPaid = { ...paid }
+    if (nextParts.has(id)) { nextParts.delete(id); nextDirty.delete(id); delete nextPaid[id] }
+    else nextParts.add(id)
+    setParticipants(nextParts); setDirty(nextDirty)
+    setPaid(rebalance(nextPaid, nextDirty, nextParts, totalNum))
+  }

  const save = async () => {
    if (!valid) return
    setSaving(true)
-    const payerList = Object.entries(payers).map(([uid, v]) => ({ user_id: Number(uid), amount: parseFloat(v) || 0 })).filter(p => p.amount > 0)
+    const payerList = [...participants]
+      .map(id => ({ user_id: id, amount: parseFloat(paid[id]) || 0 }))
+      .filter(p => p.amount > 0)
    const data = {
      name: name.trim(), category: cat,
      // Store the actual currency the amounts were entered in; conversion to the
      // viewer's display currency happens live (real rates), no manual rate.
      currency,
-      payers: payerList, member_ids: [...split],
+      payers: payerList, member_ids: [...participants],
      expense_date: day || null,
+      // Always record the entered total: the server keeps it as-is for an unfinished
+      // expense (no payers) and otherwise re-derives it from the payer sum (== total).
+      total_price: totalNum,
+      // Link a freshly-created expense to its booking (create-from-booking flow).
+      ...(!editing && prefill?.reservationId ? { reservation_id: prefill.reservationId } : {}),
    }
    try {
      if (editing) await updateBudgetItem(tripId, editing.id, data)
@@ -728,7 +908,9 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
          <label className={labelCls}>{t('costs.totalAmount')}</label>
          <div className="bg-surface-input border border-edge" style={{ height: FIELD_H, boxSizing: 'border-box', display: 'flex', alignItems: 'center', borderRadius: 10, padding: '0 12px' }}>
            <span className="text-content-faint" style={{ fontSize: 15 }}>{sym(currency)}</span>
-            <span className="text-content" style={{ flex: 1, fontSize: 15, fontWeight: 600, paddingLeft: 6 }}>{payersTotal.toFixed(2)}</span>
+            <input type="text" inputMode="decimal" placeholder="0.00" value={total}
+              onChange={e => onTotalChange(e.target.value)}
+              className="text-content" style={{ flex: 1, border: 0, background: 'none', outline: 'none', fontSize: 15, fontWeight: 600, paddingLeft: 6, width: '100%' }} />
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
@@ -744,11 +926,11 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
          </div>
        </div>

-        {currency !== base && payersTotal > 0 && (
+        {currency !== base && totalNum > 0 && (
          <div className="bg-surface-secondary border border-edge text-content-muted" style={{ borderRadius: 10, padding: '10px 12px', fontSize: 12.5, display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
-            <span>{formatMoney(payersTotal, currency, locale)}</span>
+            <span>{formatMoney(totalNum, currency, locale)}</span>
            <span className="text-content-faint">≈</span>
-            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(payersTotal, currency), base, locale)}</span>
+            <span className="text-content" style={{ fontWeight: 600 }}>{formatMoney(convert(totalNum, currency), base, locale)}</span>
            <span className="text-content-faint">· {t('costs.liveRate')}</span>
          </div>
        )}
@@ -773,39 +955,37 @@ function ExpenseModal({ tripId, base, people, me, editing, onClose, onSaved }: {
        <div>
          <label className={labelCls}>{t('costs.whoPaid')}</label>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 7 }}>
-            {people.map(p => (
-              <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10 }}>
-                <span className="text-content" style={{ fontSize: 14, fontWeight: 500 }}>{p.id === me ? t('costs.you') : p.username}</span>
-                <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
-                  <span className="text-content-faint" style={{ fontSize: 13 }}>{sym(currency)}</span>
-                  <input type="number" inputMode="decimal" min="0" step="0.01" placeholder="0.00" value={payers[p.id] || ''}
-                    onChange={e => setPayers(prev => ({ ...prev, [p.id]: e.target.value }))}
-                    className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-
-        <div>
-          <label className={labelCls}>{t('costs.splitBetween')}</label>
-          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 7 }}>
-            {people.map(p => {
-              const on = split.has(p.id)
+            {people.map((p, idx) => {
+              const on = participants.has(p.id)
              return (
-                <button key={p.id} onClick={() => setSplit(prev => { const n = new Set(prev); n.has(p.id) ? n.delete(p.id) : n.add(p.id); return n })}
-                  className={on ? 'bg-surface-card text-content border' : 'bg-surface-secondary text-content-faint border border-edge'}
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 13px 6px 7px', borderRadius: 999, fontSize: 13, fontWeight: 500, cursor: 'pointer', fontFamily: 'inherit', borderColor: on ? 'var(--text-primary)' : undefined }}>
-                  {p.avatar_url
-                    ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', opacity: on ? 1 : 0.45 }} />
-                    : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[people.findIndex(x => x.id === p.id) % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
-                  {p.id === me ? t('costs.you') : p.username}
-                </button>
+                <div key={p.id} className="bg-surface-secondary border border-edge" style={{ display: 'grid', gridTemplateColumns: '1fr 130px', gap: 10, alignItems: 'center', padding: '8px 11px', borderRadius: 10, opacity: on ? 1 : 0.5 }}>
+                  <button onClick={() => toggleParticipant(p.id)} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', padding: 0, minWidth: 0, textAlign: 'left' }}>
+                    {p.avatar_url
+                      ? <img src={p.avatar_url} alt="" style={{ width: 22, height: 22, borderRadius: '50%', objectFit: 'cover', display: 'block', flexShrink: 0, opacity: on ? 1 : 0.45 }} />
+                      : <span style={{ width: 22, height: 22, borderRadius: '50%', background: SPLIT_COLORS[idx % SPLIT_COLORS.length].gradient, color: '#fff', display: 'grid', placeItems: 'center', fontSize: 9, fontWeight: 700, flexShrink: 0, opacity: on ? 1 : 0.45 }}>{(p.id === me ? t('costs.youShort') : p.username.charAt(0)).toUpperCase()}</span>}
+                    <span className="text-content" style={{ fontSize: 14, fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.id === me ? t('costs.you') : p.username}</span>
+                  </button>
+                  {on ? (
+                    <div className="bg-surface-input border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 4, borderRadius: 8, padding: '0 10px' }}>
+                      <span className="text-content-faint" style={{ fontSize: 13 }}>{sym(currency)}</span>
+                      <input type="text" inputMode="decimal" placeholder="0.00" value={paid[p.id] || ''}
+                        onChange={e => onPaidChange(p.id, e.target.value)}
+                        className="text-content" style={{ width: '100%', border: 0, background: 'none', outline: 'none', fontSize: 14, fontWeight: 600, padding: '8px 0', textAlign: 'right' }} />
+                    </div>
+                  ) : (
+                    <button onClick={() => toggleParticipant(p.id)} className="text-content-faint" style={{ background: 'none', border: 0, cursor: 'pointer', fontFamily: 'inherit', fontSize: 12, textAlign: 'right' }}>{t('costs.tapToInclude')}</button>
+                  )}
+                </div>
              )
            })}
          </div>
-          <div className="text-content-faint" style={{ marginTop: 10, fontSize: 12.5 }}>
-            {split.size === 0 ? t('costs.pickSomeone') : t('costs.splitSummary', { count: split.size, amount: sym(currency) + each.toFixed(2) })}
+          <div style={{ marginTop: 10, fontSize: 12.5, display: 'flex', justifyContent: 'space-between', gap: 10, flexWrap: 'wrap' }}>
+            <span className="text-content-faint">
+              {participants.size > 0 && t('costs.splitSummary', { count: participants.size, amount: sym(currency) + each.toFixed(2) })}
+            </span>
+            {paidEntered
+              ? <span style={{ fontWeight: 600, color: balanced ? '#16a34a' : '#dc2626' }}>{sym(currency)}{paidSum.toFixed(2)} / {sym(currency)}{totalNum.toFixed(2)}</span>
+              : (totalNum > 0 && <span style={{ color: '#d97706', fontWeight: 600 }}>{t('costs.unfinishedHint')}</span>)}
          </div>
        </div>
      </div>
@@ -32,8 +32,32 @@ export const COST_CAT_META: Record<CostCategory, CostCategoryMeta> = {

 export const COST_CATEGORY_LIST: CostCategoryMeta[] = COST_CATEGORIES.map(k => COST_CAT_META[k])

-/** Map any stored category (incl. legacy free-text values) to a known meta. */
-export function catMeta(cat: string | null | undefined): CostCategoryMeta {
-  if (cat && cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
-  return COST_CAT_META.other
+/**
+ * Legacy / English free-text categories (and reservation type labels) mapped to
+ * the fixed keys. Bookings used to store labels like "Flight"/"Train"/"Other",
+ * which never matched the lowercase keys and fell through to `other`.
+ */
+const LEGACY_CATEGORY_MAP: Record<string, CostCategory> = {
+  flight: 'flights', flights: 'flights', plane: 'flights', flug: 'flights',
+  train: 'transport', bus: 'transport', car: 'transport', 'car rental': 'transport',
+  ferry: 'transport', boat: 'transport', taxi: 'transport', transfer: 'transport',
+  transport: 'transport', transportation: 'transport',
+  hotel: 'accommodation', accommodation: 'accommodation', lodging: 'accommodation', hostel: 'accommodation',
+  restaurant: 'food', food: 'food', dining: 'food', meal: 'food', meals: 'food',
+  grocery: 'groceries', groceries: 'groceries',
+  activity: 'activities', activities: 'activities',
+  sightseeing: 'sightseeing', sights: 'sightseeing',
+  shop: 'shopping', shopping: 'shopping',
+  fee: 'fees', fees: 'fees',
+  health: 'health', medical: 'health',
+  tip: 'tips', tips: 'tips',
+  other: 'other', misc: 'other',
+}
+
+/** Map any stored category (incl. legacy/localized free-text values) to a known meta. */
+export function catMeta(cat: string | null | undefined): CostCategoryMeta {
+  if (!cat) return COST_CAT_META.other
+  if (cat in COST_CAT_META) return COST_CAT_META[cat as CostCategory]
+  const mapped = LEGACY_CATEGORY_MAP[cat.trim().toLowerCase()]
+  return mapped ? COST_CAT_META[mapped] : COST_CAT_META.other
 }
@@ -1,7 +1,11 @@
-import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { forwardRef, lazy, Suspense, useImperativeHandle, useRef } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import JourneyMap, { type JourneyMapHandle } from './JourneyMap'
-import JourneyMapGL, { type JourneyMapGLHandle } from './JourneyMapGL'
+import type { JourneyMapGLHandle } from './JourneyMapGL'
+
+// Lazy-load the GL renderer (and its ~230 KB gzip engine) so Leaflet-only
+// installs never download it — it ships only once a GL provider is picked.
+const JourneyMapGL = lazy(() => import('./JourneyMapGL'))

 // Unified handle — both providers expose the same three methods.
 export type JourneyMapAutoHandle = JourneyMapHandle
@@ -37,8 +41,9 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
  const glRef = useRef<JourneyMapGLHandle>(null)

  // Fall back to Leaflet when the user selected Mapbox GL but hasn't
-  // supplied a token yet — otherwise the map would just show a stub.
-  const useGL = provider === 'mapbox-gl' && !!token
+  // supplied a token yet. MapLibre/OpenFreeMap is tokenless.
+  const useGL = provider === 'maplibre-gl' || (provider === 'mapbox-gl' && !!token)
+  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl' : 'mapbox-gl'

  useImperativeHandle(ref, () => ({
    highlightMarker: (id) => (useGL ? glRef.current : leafletRef.current)?.highlightMarker(id),
@@ -47,8 +52,12 @@ const JourneyMapAuto = forwardRef<JourneyMapAutoHandle, Props>(function JourneyM
  }), [useGL])

  if (useGL) {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return <JourneyMapGL ref={glRef} {...(props as any)} />
+    return (
+      <Suspense fallback={null}>
+        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
+        <JourneyMapGL ref={glRef} {...(props as any)} glProvider={glProvider} />
+      </Suspense>
+    )
  }
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return <JourneyMap ref={leafletRef} {...(props as any)} />
@@ -1,8 +1,11 @@
 import { useEffect, useRef, useImperativeHandle, forwardRef, useCallback } from 'react'
 import mapboxgl from 'mapbox-gl'
+import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { useSettingsStore } from '../../store/settingsStore'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
+import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, type GlMapProvider } from '../Map/glProviders'

 export interface JourneyMapGLHandle {
  highlightMarker: (id: string | null) => void
@@ -32,6 +35,7 @@ interface Props {
  onMarkerClick?: (id: string, type?: string) => void
  fullScreen?: boolean
  paddingBottom?: number
+  glProvider?: GlMapProvider
 }

 interface Item {
@@ -95,8 +99,10 @@ function ensureJourneyPopupStyle() {
  const s = document.createElement('style')
  s.id = 'trek-journey-popup-style'
  s.textContent = `
-    .mapboxgl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content {
+    .mapboxgl-popup.trek-journey-popup,
+    .maplibregl-popup.trek-journey-popup { pointer-events: none; animation: trek-journey-popup-in 180ms ease-out; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-content,
+    .maplibregl-popup.trek-journey-popup .maplibregl-popup-content {
      padding: 9px 14px 10px;
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.94);
@@ -108,20 +114,24 @@ function ensureJourneyPopupStyle() {
      min-width: 160px;
      max-width: 280px;
    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content {
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-content,
+    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-content {
      background: rgba(24, 24, 27, 0.88);
      border-color: rgba(255, 255, 255, 0.08);
      color: #FAFAFA;
    }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip {
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-tip,
+    .maplibregl-popup.trek-journey-popup .maplibregl-popup-tip {
      border-top-color: rgba(255, 255, 255, 0.94);
      border-bottom-color: rgba(255, 255, 255, 0.94);
    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip {
+    .mapboxgl-popup.trek-journey-popup.trek-dark .mapboxgl-popup-tip,
+    .maplibregl-popup.trek-journey-popup.trek-dark .maplibregl-popup-tip {
      border-top-color: rgba(24, 24, 27, 0.88);
      border-bottom-color: rgba(24, 24, 27, 0.88);
    }
-    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button { display: none; }
+    .mapboxgl-popup.trek-journey-popup .mapboxgl-popup-close-button,
+    .maplibregl-popup.trek-journey-popup .maplibregl-popup-close-button { display: none; }
    .trek-journey-popup-title {
      font-size: 13.5px;
      font-weight: 600;
@@ -132,7 +142,8 @@ function ensureJourneyPopupStyle() {
      overflow: hidden;
      text-overflow: ellipsis;
    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title,
+    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-title { color: #FAFAFA; }
    .trek-journey-popup-sub {
      display: flex;
      align-items: baseline;
@@ -143,7 +154,8 @@ function ensureJourneyPopupStyle() {
      line-height: 1.35;
      white-space: nowrap;
    }
-    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
+    .mapboxgl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub,
+    .maplibregl-popup.trek-journey-popup.trek-dark .trek-journey-popup-sub { color: #A1A1AA; }
    .trek-journey-popup-place {
      min-width: 0;
      overflow: hidden;
@@ -194,20 +206,28 @@ function markerHtml(dayColor: string, dayLabel: number, highlighted: boolean): H
 const EMPTY_TRAIL: { lat: number; lng: number }[] = []

 const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL(
-  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom },
+  { entries, trail, height = 220, dark, activeMarkerId, onMarkerClick, fullScreen, paddingBottom, glProvider = 'mapbox-gl' },
  ref
 ) {
  const stableTrail = trail || EMPTY_TRAIL
-  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
+  const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
  const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
  const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
  const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
+  const isMapLibre = glProvider === 'maplibre-gl'
+  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
+  const glStyle = styleForActiveProvider(glProvider, rawMapboxStyle, rawMaplibreStyle)
+  const enableMapbox3d = !isMapLibre && mapbox3d
  const containerRef = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<mapboxgl.Map | null>(null)
-  const markersRef = useRef<Map<string, mapboxgl.Marker>>(new Map())
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mapRef = useRef<any | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const markersRef = useRef<Map<string, any>>(new Map())
  const itemsRef = useRef<Item[]>([])
  const highlightedRef = useRef<string | null>(null)
-  const popupRef = useRef<mapboxgl.Popup | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const popupRef = useRef<any | null>(null)
  const onMarkerClickRef = useRef(onMarkerClick)
  onMarkerClickRef.current = onMarkerClick
  const darkRef = useRef(dark)
@@ -247,7 +267,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
      const el = popupRef.current.getElement()
      if (el) el.classList.toggle('trek-dark', !!darkRef.current)
    } else {
-      popupRef.current = new mapboxgl.Popup({
+      popupRef.current = new gl.Popup({
        closeButton: false,
        closeOnClick: false,
        closeOnMove: false,
@@ -260,7 +280,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
        .setHTML(html)
        .addTo(mapRef.current)
    }
-  }, [])
+  }, [gl])

  const hidePopup = useCallback(() => {
    if (popupRef.current) {
@@ -305,11 +325,11 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
      mapRef.current.flyTo({
        center: marker.getLngLat(),
        zoom: Math.max(mapRef.current.getZoom(), 14),
-        pitch: mapbox3d ? 45 : 0,
+        pitch: enableMapbox3d ? 45 : 0,
        duration: 600,
      })
    } catch { /* map not yet ready */ }
-  }, [highlightMarker, mapbox3d])
+  }, [highlightMarker, enableMapbox3d])

  const invalidateSize = useCallback(() => {
    try { mapRef.current?.resize() } catch { /* map not yet ready */ }
@@ -320,37 +340,39 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
  // Build map once per style/token change. Markers and layers are rebuilt
  // inside the same effect so they stay in sync with the active style.
  useEffect(() => {
-    if (!containerRef.current || !mapboxToken) return
-    mapboxgl.accessToken = mapboxToken
+    if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
+    if (!isMapLibre) mapboxgl.accessToken = mapboxToken

    const items = buildItems(entries)
    itemsRef.current = items

-    const bounds = new mapboxgl.LngLatBounds()
+    const bounds = new gl.LngLatBounds()
    items.forEach(i => bounds.extend([i.lng, i.lat]))
    stableTrail.forEach(p => bounds.extend([p.lng, p.lat]))
    const hasPoints = items.length > 0 || stableTrail.length > 0

-    const map = new mapboxgl.Map({
+    const mapOptions: Record<string, unknown> = {
      container: containerRef.current,
-      style: mapboxStyle,
+      style: glStyle,
      center: hasPoints ? bounds.getCenter() : [0, 30],
      zoom: hasPoints ? 2 : 1,
-      pitch: mapbox3d && fullScreen ? 45 : 0,
+      pitch: enableMapbox3d && fullScreen ? 45 : 0,
      attributionControl: true,
      antialias: mapboxQuality,
-      projection: mapboxQuality ? 'globe' : 'mercator',
-    })
+    }
+    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
+
+    const map = new gl.Map(mapOptions as any)
    mapRef.current = map

    map.on('load', () => {
-      if (mapbox3d) {
-        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
-        if (supportsCustom3d(mapboxStyle)) addCustom3dBuildings(map, !!darkRef.current)
+      if (enableMapbox3d) {
+        if (!isStandardFamily(glStyle) && wantsTerrain(glStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(glStyle)) addCustom3dBuildings(map, !!darkRef.current)
      }
      // Flatten Mapbox Standard's built-in DEM so HTML markers (at Z=0)
      // stay pinned to their coordinates at every zoom and pitch.
-      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
+      if (glStyle === MAPBOX_DEFAULT_STYLE) {
        try { map.setTerrain(null) } catch { /* noop */ }
      }

@@ -383,7 +405,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
      // markers
      items.forEach((item) => {
        const el = markerHtml(item.dayColor, item.dayLabel, false)
-        const marker = new mapboxgl.Marker({ element: el, anchor: 'bottom' })
+        const marker = new gl.Marker({ element: el, anchor: 'bottom' })
          .setLngLat([item.lng, item.lat])
          .addTo(map)
        el.addEventListener('click', (ev) => {
@@ -400,7 +422,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
          map.fitBounds(bounds, {
            padding: { top: 50, bottom: pb, left: 50, right: 50 },
            maxZoom: 16,
-            pitch: mapbox3d && fullScreen ? 45 : 0,
+            pitch: enableMapbox3d && fullScreen ? 45 : 0,
            duration: 0,
          })
        } catch { /* empty bounds */ }
@@ -418,7 +440,7 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
      try { map.remove() } catch { /* noop */ }
      mapRef.current = null
    }
-  }, [entries, stableTrail, mapboxStyle, mapboxToken, mapbox3d, mapboxQuality, fullScreen, paddingBottom])
+  }, [entries, stableTrail, glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality, fullScreen, paddingBottom])

  // external activeMarkerId → highlight + flyTo
  useEffect(() => {
@@ -431,15 +453,15 @@ const JourneyMapGL = forwardRef<JourneyMapGLHandle, Props>(function JourneyMapGL
        mapRef.current.flyTo({
          center: marker.getLngLat(),
          zoom: Math.max(mapRef.current.getZoom(), 12),
-          pitch: mapbox3d && fullScreen ? 45 : 0,
+          pitch: enableMapbox3d && fullScreen ? 45 : 0,
          duration: 500,
        })
      } catch { /* map not ready */ }
    }, 50)
    return () => clearTimeout(t)
-  }, [activeMarkerId, highlightMarker, mapbox3d, fullScreen])
+  }, [activeMarkerId, highlightMarker, enableMapbox3d, fullScreen])

-  if (!mapboxToken) {
+  if (!isMapLibre && !mapboxToken) {
    return (
      <div
        style={{ position: 'relative', height: height === 9999 ? '100%' : height, width: '100%', borderRadius: 'inherit', overflow: 'hidden' }}
@@ -1,15 +1,21 @@
 import { useEffect, useState } from 'react'
 import { Navigation } from 'lucide-react'
-import type mapboxgl from 'mapbox-gl'
+
+export interface CompassMap {
+  getBearing: () => number
+  on: (type: 'rotate', listener: () => void) => unknown
+  off: (type: 'rotate', listener: () => void) => unknown
+  easeTo: (options: { bearing: number; pitch: number; duration: number }) => unknown
+}

 /**
- * Round compass pill for the Mapbox planner map. The Mapbox map can be rotated and
+ * Round compass pill for the GL planner map. The 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)
+ * (GL 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 }) {
+export function MapCompassPill({ map }: { map: CompassMap }) {
  const [bearing, setBearing] = useState(() => map.getBearing())

  useEffect(() => {
@@ -1,21 +1,36 @@
+import { lazy, Suspense } from 'react'
 import { useSettingsStore } from '../../store/settingsStore'
 import { MapView } from './MapView'
-import { MapViewGL } from './MapViewGL'
+
+// MapLibre/Mapbox pull in a ~230 KB (gzip) GL engine. Lazy-load the GL renderer so
+// Leaflet-only installs never download it — it ships only once a GL provider is picked.
+const MapViewGL = lazy(() => import('./MapViewGL').then(m => ({ default: m.MapViewGL })))

 // Auto-selects the map renderer based on user settings. Keeps the existing
 // Leaflet MapView untouched so the Mapbox GL variant can mature iteratively
 // behind a toggle. Atlas is not affected — it imports Leaflet directly.
 //
 // Offline maps: only the Leaflet renderer supports full pre-download (raster
-// tiles via sync/tilePrefetcher.ts). Mapbox GL is best-effort offline — its
+// tiles via sync/tilePrefetcher.ts). GL maps are best-effort offline — their
 // vector tiles are cached opportunistically by the Service Worker as you view
-// them online (see the mapbox-tiles rule in vite.config.js), not prefetched.
+// them online (see the GL tile rules in vite.config.js), not prefetched.
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function MapViewAuto(props: any) {
  const provider = useSettingsStore(s => s.settings.map_provider)
  const token = useSettingsStore(s => s.settings.mapbox_access_token)
  // Fall back to Leaflet when Mapbox is selected but no token is set,
  // so trip planner never shows an empty map due to a missing token.
-  if (provider === 'mapbox-gl' && token) return <MapViewGL {...props} />
+  const glProvider = provider === 'maplibre-gl' ? 'maplibre-gl'
+    : provider === 'mapbox-gl' && token ? 'mapbox-gl'
+    : null
+  if (glProvider) {
+    // Render the previous Leaflet map as the fallback so there's no blank flash
+    // while the GL chunk loads on first use.
+    return (
+      <Suspense fallback={<MapView {...props} />}>
+        <MapViewGL {...props} glProvider={glProvider} />
+      </Suspense>
+    )
+  }
  return <MapView {...props} />
 }
@@ -58,6 +58,35 @@ vi.mock('mapbox-gl', () => ({
 }))
 vi.mock('mapbox-gl/dist/mapbox-gl.css', () => ({}))

+vi.mock('maplibre-gl', () => ({
+  default: {
+    Map: vi.fn(function () {
+      return glMap
+    }),
+    Marker: vi.fn(function () {
+      return {
+        setLngLat: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn(),
+        getElement: vi.fn(() => document.createElement('div')),
+      }
+    }),
+    LngLatBounds: vi.fn(function () {
+      return { extend: vi.fn().mockReturnThis() }
+    }),
+    NavigationControl: vi.fn(),
+    Popup: vi.fn(function () {
+      return {
+        setLngLat: vi.fn().mockReturnThis(),
+        setHTML: vi.fn().mockReturnThis(),
+        addTo: vi.fn().mockReturnThis(),
+        remove: vi.fn(),
+      }
+    }),
+  },
+}))
+vi.mock('maplibre-gl/dist/maplibre-gl.css', () => ({}))
+
 vi.mock('./mapboxSetup', () => ({
  isStandardFamily: vi.fn(() => false),
  supportsCustom3d: vi.fn(() => false),
@@ -177,4 +206,25 @@ describe('MapViewGL', () => {
    await act(async () => {})
    expect(glMap.fitBounds.mock.calls.length).toBeGreaterThan(after_first)
  })
+
+  it('FE-COMP-MAPVIEWGL-004: renders with the MapLibre provider and no token', async () => {
+    const mapboxgl = (await import('mapbox-gl')).default
+    const maplibregl = (await import('maplibre-gl')).default
+    useSettingsStore.setState({
+      settings: {
+        ...useSettingsStore.getState().settings,
+        map_provider: 'maplibre-gl',
+        mapbox_access_token: '', // MapLibre/OpenFreeMap is tokenless — must not short-circuit
+        maplibre_style: 'https://tiles.openfreemap.org/styles/liberty',
+      },
+    } as any)
+    const places = [buildMapPlace({ id: 1, lat: 48.8584, lng: 2.2945 })]
+
+    render(<MapViewGL places={places} fitKey={1} glProvider="maplibre-gl" />)
+    await act(async () => {})
+
+    // The MapLibre engine builds the map even without a token; Mapbox is not used.
+    expect(maplibregl.Map).toHaveBeenCalled()
+    expect(mapboxgl.Map).not.toHaveBeenCalled()
+  })
 })
@@ -1,7 +1,9 @@
 import { useEffect, useRef, useMemo, useState, createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import mapboxgl from 'mapbox-gl'
+import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useAuthStore } from '../../store/authStore'
 import { getCached, isLoading, fetchPhoto, onThumbReady, getAllThumbs } from '../../services/photoService'
@@ -9,6 +11,7 @@ import { CATEGORY_ICON_MAP } from '../shared/categoryIcons'
 import { isStandardFamily, supportsCustom3d, wantsTerrain, addCustom3dBuildings, addTerrainAndSky } from './mapboxSetup'
 import { attachLocationMarker, type LocationMarkerHandle } from './locationMarkerMapbox'
 import { ReservationMapboxOverlay } from './reservationsMapbox'
+import { MAPBOX_DEFAULT_STYLE, styleForActiveProvider, type GlMapProvider } from './glProviders'
 import LocationButton from './LocationButton'
 import { useGeolocation } from '../../hooks/useGeolocation'
 import type { Place, Reservation } from '../../types'
@@ -54,7 +57,9 @@ interface Props {
  pois?: Poi[]
  onPoiClick?: (poi: Poi) => void
  onViewportChange?: (bbox: { south: number; west: number; north: number; east: number }) => void
-  onMapReady?: (map: mapboxgl.Map | null) => void
+  glProvider?: GlMapProvider
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onMapReady?: (map: any | null) => void
 }

 function createMarkerElement(place: Place & { category_color?: string; category_icon?: string }, photoUrl: string | null, orderNumbers: number[] | null, selected: boolean): HTMLDivElement {
@@ -91,8 +96,8 @@ function createMarkerElement(place: Place & { category_color?: string; category_
  }

  const wrap = document.createElement('div')
-  // Do NOT set `position: relative` here — mapbox-gl ships
-  // `.mapboxgl-marker { position: absolute }` and relies on it. An inline
+  // Do NOT set `position: relative` here — GL map libraries ship
+  // marker classes with `position: absolute` and rely on it. An inline
  // `position: relative` here overrides the class, turns every marker into
  // a static block element, and stacks them in document order inside the
  // canvas container. The result looks exactly like "markers drift as the
@@ -169,29 +174,39 @@ export function MapViewGL({
  pois = [],
  onPoiClick,
  onViewportChange,
+  glProvider = 'mapbox-gl',
  onMapReady,
 }: Props) {
-  const mapboxStyle = useSettingsStore(s => s.settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const rawMapboxStyle = useSettingsStore(s => s.settings.mapbox_style || MAPBOX_DEFAULT_STYLE)
+  const rawMaplibreStyle = useSettingsStore(s => s.settings.maplibre_style || '')
  const mapboxToken = useSettingsStore(s => s.settings.mapbox_access_token || '')
  const mapbox3d = useSettingsStore(s => s.settings.mapbox_3d_enabled !== false)
  const mapboxQuality = useSettingsStore(s => s.settings.mapbox_quality_mode === true)
  const showEndpointLabels = useSettingsStore(s => s.settings.map_booking_labels) !== false
+  const isMapLibre = glProvider === 'maplibre-gl'
+  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
+  const glStyle = styleForActiveProvider(glProvider, rawMapboxStyle, rawMaplibreStyle)
+  const enableMapbox3d = !isMapLibre && mapbox3d
  const placesPhotosEnabled = useAuthStore(s => s.placesPhotosEnabled)
  const [photoUrls, setPhotoUrls] = useState<Record<string, string>>(getAllThumbs)
  const [mapReady, setMapReady] = useState(false)
  const containerRef = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<mapboxgl.Map | null>(null)
-  const markersRef = useRef<Map<number, mapboxgl.Marker>>(new Map())
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mapRef = useRef<any | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const markersRef = useRef<Map<number, any>>(new Map())
  const locationMarkerRef = useRef<LocationMarkerHandle | null>(null)
  const reservationOverlayRef = useRef<ReservationMapboxOverlay | null>(null)
  // Refs so the reservation overlay always sees the latest callback /
  // options without forcing a full overlay rebuild on every prop change.
  const onReservationClickRef = useRef(onReservationClick)
  onReservationClickRef.current = onReservationClick
-  const poiMarkersRef = useRef<mapboxgl.Marker[]>([])
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const poiMarkersRef = useRef<any[]>([])
  // Single reusable hover popup (name/category/address card) shared by planned
  // places and POI markers — mirrors the Leaflet map's hover tooltip.
-  const popupRef = useRef<mapboxgl.Popup | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const popupRef = useRef<any | null>(null)
  const onPoiClickRef = useRef(onPoiClick)
  onPoiClickRef.current = onPoiClick
  const onViewportChangeRef = useRef(onViewportChange)
@@ -204,23 +219,25 @@ export function MapViewGL({
  onClickRefs.current.map = onMapClick
  onClickRefs.current.context = onMapContextMenu

-  // Build/rebuild the map on style/token/3d change
+  // Build/rebuild the map on provider/style/token/3d change
  useEffect(() => {
-    if (!containerRef.current || !mapboxToken) return
-    mapboxgl.accessToken = mapboxToken
+    if (!containerRef.current || (!isMapLibre && !mapboxToken)) return
+    if (!isMapLibre) mapboxgl.accessToken = mapboxToken

-    const map = new mapboxgl.Map({
+    const mapOptions: Record<string, unknown> = {
      container: containerRef.current,
-      style: mapboxStyle,
+      style: glStyle,
      center: [center[1], center[0]],
      zoom,
-      pitch: mapbox3d ? 45 : 0,
+      pitch: enableMapbox3d ? 45 : 0,
      attributionControl: true,
      antialias: mapboxQuality,
-      projection: mapboxQuality ? 'globe' : 'mercator',
-    })
+    }
+    if (!isMapLibre) mapOptions.projection = mapboxQuality ? 'globe' : 'mercator'
+
+    const map = new gl.Map(mapOptions as any)
    mapRef.current = map
-    popupRef.current = new mapboxgl.Popup({
+    popupRef.current = new gl.Popup({
      closeButton: false,
      closeOnClick: false,
      offset: 18,
@@ -234,12 +251,12 @@ export function MapViewGL({
    ;(window as any).__trek_map = map

    map.on('load', () => {
-      if (mapbox3d) {
+      if (enableMapbox3d) {
        // Terrain is only valuable on satellite styles — on clean vector
        // styles it makes route lines drift off the HTML markers because
        // the lines snap to DEM height while markers stay at sea level.
-        if (!isStandardFamily(mapboxStyle) && wantsTerrain(mapboxStyle)) addTerrainAndSky(map)
-        if (supportsCustom3d(mapboxStyle)) {
+        if (!isStandardFamily(glStyle) && wantsTerrain(glStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(glStyle)) {
          const dark = document.documentElement.classList.contains('dark')
          addCustom3dBuildings(map, dark)
        }
@@ -252,7 +269,7 @@ export function MapViewGL({
      // non-satellite Standard style still looks great without terrain,
      // so flatten it out to keep markers pinned. (Satellite variants
      // are left alone — the DEM is what gives them their character.)
-      if (mapboxStyle === 'mapbox://styles/mapbox/standard') {
+      if (glStyle === MAPBOX_DEFAULT_STYLE) {
        try { map.setTerrain(null) } catch { /* noop */ }
      }
      // initial route source — kept around so updates can setData() cheaply
@@ -298,7 +315,7 @@ export function MapViewGL({

    map.on('click', (e) => {
      const t = e.originalEvent.target as HTMLElement
-      if (t.closest('.mapboxgl-marker')) return // markers handle their own click
+      if (t.closest('.mapboxgl-marker, .maplibregl-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
@@ -309,7 +326,7 @@ export function MapViewGL({
    }
    map.on('moveend', emitViewport)
    map.once('idle', emitViewport)
-    // In the mapbox-gl map the right mouse button is reserved for the
+    // In the 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.
    const canvas = map.getCanvasContainer()
@@ -356,7 +373,9 @@ export function MapViewGL({
        const ll = marker.getLngLat()
        let alt = 0
        try {
-          const e = map.queryTerrainElevation([ll.lng, ll.lat])
+          const e = typeof map.queryTerrainElevation === 'function'
+            ? map.queryTerrainElevation([ll.lng, ll.lat])
+            : null
          if (typeof e === 'number' && Number.isFinite(e)) alt = e
        } catch { /* terrain not ready */ }
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -368,7 +387,9 @@ export function MapViewGL({
        }
      })
    }
-    map.on('render', syncMarkerAltitudes)
+    // Terrain altitude sync only matters with mapbox 3D/terrain on; skip the per-frame
+    // listener entirely for MapLibre and flat mapbox styles.
+    if (enableMapbox3d) map.on('render', syncMarkerAltitudes)

    return () => {
      canvas.removeEventListener('mousedown', onAuxDown)
@@ -389,7 +410,7 @@ export function MapViewGL({
      mapRef.current = null
      setMapReady(false)
    }
-  }, [mapboxStyle, mapboxToken, mapbox3d]) // rebuild on style changes only
+  }, [glProvider, glStyle, mapboxToken, enableMapbox3d, mapboxQuality]) // rebuild on provider/style changes only

  // Photo loading — mirrors the Leaflet MapView. Updates via RAF to batch
  // simultaneous thumb arrivals into one re-render.
@@ -489,12 +510,12 @@ export function MapViewGL({
      // pitch. Tried `pitchAlignment: 'map'` to snap markers onto terrain,
      // but it rotates the element by the pitch angle and visually offsets
      // the anchor by ~100px at 45° tilt, which caused the observed drift.
-      const m = new mapboxgl.Marker({ element: el, anchor: 'center' })
+      const m = new gl.Marker({ element: el, anchor: 'center' })
        .setLngLat([place.lng, place.lat])
        .addTo(map)
      markersRef.current.set(place.id, m)
    })
-  }, [places, selectedPlaceId, dayOrderMap, photoUrls])
+  }, [places, selectedPlaceId, dayOrderMap, photoUrls, mapReady, glProvider])

  // Reconcile OSM "explore" POI markers (imperative, kept separate from the
  // planned-place markers so they don't cluster or get confused with them).
@@ -511,10 +532,10 @@ export function MapViewGL({
      })
      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)
+      const m = new gl.Marker({ element: el, anchor: 'center' }).setLngLat([poi.lng, poi.lat]).addTo(map)
      poiMarkersRef.current.push(m)
    }
-  }, [pois, mapReady])
+  }, [pois, mapReady, glProvider])

  // Update route geojson
  useEffect(() => {
@@ -578,7 +599,7 @@ export function MapViewGL({
        showStats: showReservationStats,
        showEndpointLabels,
        onEndpointClick: (id) => onReservationClickRef.current?.(id),
-      })
+      }, gl.Marker as any)
    }
    reservationOverlayRef.current.update(visibleReservations, {
      showConnections: true,
@@ -586,7 +607,7 @@ export function MapViewGL({
      showEndpointLabels,
      onEndpointClick: (id) => onReservationClickRef.current?.(id),
    })
-  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady])
+  }, [visibleReservations, showReservationStats, showEndpointLabels, mapReady, glProvider])

  // Fit bounds on fitKey change — matches the Leaflet BoundsController
  const paddingOpts = useMemo(() => {
@@ -606,14 +627,14 @@ export function MapViewGL({
    const target = dayPlaces.length > 0 ? dayPlaces : places
    const valid = target.filter(p => p.lat && p.lng)
    if (valid.length === 0) return
-    const bounds = new mapboxgl.LngLatBounds()
+    const bounds = new gl.LngLatBounds()
    valid.forEach(p => bounds.extend([p.lng, p.lat]))
    const run = () => {
      try {
        map.fitBounds(bounds, {
          padding: paddingOpts,
          maxZoom: 15,
-          pitch: mapbox3d ? 45 : 0,
+          pitch: enableMapbox3d ? 45 : 0,
          duration: 400,
        })
      } catch { /* noop */ }
@@ -632,7 +653,7 @@ export function MapViewGL({
      map.flyTo({
        center: [target.lng, target.lat],
        zoom: Math.max(map.getZoom(), 14),
-        pitch: mapbox3d ? 45 : 0,
+        pitch: enableMapbox3d ? 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
@@ -640,7 +661,7 @@ export function MapViewGL({
        padding: paddingOpts,
      })
    } catch { /* noop */ }
-  }, [selectedPlaceId, mapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps
+  }, [selectedPlaceId, enableMapbox3d]) // eslint-disable-line react-hooks/exhaustive-deps

  // External center/zoom prop changes — jump without animation
  useEffect(() => {
@@ -663,7 +684,7 @@ export function MapViewGL({
    }
    if (!userPosition) return
    const apply = () => {
-      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map)
+      if (!locationMarkerRef.current) locationMarkerRef.current = attachLocationMarker(map, gl.Marker as any)
      locationMarkerRef.current.update(userPosition)
      if (trackingMode === 'follow') {
        // easeTo is gentler than flyTo for continuous updates
@@ -679,9 +700,9 @@ export function MapViewGL({
    }
    if (map.loaded()) apply()
    else map.once('load', apply)
-  }, [userPosition, trackingMode])
+  }, [userPosition, trackingMode, glProvider])

-  if (!mapboxToken) {
+  if (!isMapLibre && !mapboxToken) {
    return (
      <div className="w-full h-full flex items-center justify-center bg-zinc-100 dark:bg-zinc-800 text-center px-6">
        <div className="text-sm text-zinc-500">
@@ -6,6 +6,7 @@ import {
  calculateSegments,
  optimizeRoute,
  generateGoogleMapsUrl,
+  withHotelBookends,
 } from './RouteCalculator'

 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'
@@ -241,3 +242,46 @@ describe('generateGoogleMapsUrl', () => {
    expect(result).toContain('48.86,2.36')
  })
 })
+
+// ── withHotelBookends (#1275: draw the hotel → first / last → hotel legs) ────────
+
+describe('withHotelBookends', () => {
+  const hotel = { lat: 1, lng: 1 }
+  const a = { lat: 2, lng: 2 }
+  const b = { lat: 3, lng: 3 }
+  const evening = { lat: 4, lng: 4 }
+
+  it('FE-COMP-ROUTECALCULATOR-021: leaves runs untouched when there is no hotel', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, a, b, null, null)).toEqual([[a, b]])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-022: prepends hotel→first and appends last→hotel around the runs', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, a, b, hotel, evening)).toEqual([
+      [hotel, a],
+      [a, b],
+      [b, evening],
+    ])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-023: a single stop with no runs still draws hotel→stop→hotel', () => {
+    expect(withHotelBookends([], a, a, hotel, evening)).toEqual([
+      [hotel, a],
+      [a, evening],
+    ])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-024: a missing first/last waypoint skips that bookend', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, undefined, undefined, hotel, evening)).toEqual([[a, b]])
+  })
+
+  it('FE-COMP-ROUTECALCULATOR-025: only the start hotel adds just the opening leg', () => {
+    const runs = [[a, b]]
+    expect(withHotelBookends(runs, a, b, hotel, null)).toEqual([
+      [hotel, a],
+      [a, b],
+    ])
+  })
+})
@@ -1,4 +1,6 @@
-import type { RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
+import { useSettingsStore } from '../../store/settingsStore'
+import type { DistanceUnit, RouteResult, RouteSegment, RouteWithLegs, Waypoint, RouteAnchors } from '../../types'
+import { formatDistance } from '../../utils/units'

 const OSRM_BASE = 'https://router.project-osrm.org/route/v1'

@@ -60,13 +62,34 @@ export async function calculateRoute(
    coordinates,
    distance,
    duration,
-    distanceText: formatDistance(distance),
+    distanceText: formatRouteDistance(distance),
    durationText: formatDuration(duration),
    walkingText: formatDuration(walkingDuration),
    drivingText: formatDuration(drivingDuration),
  }
 }

+/**
+ * Prepends a hotel→first-waypoint run and appends a last-waypoint→hotel run to the
+ * day's activity runs, so the drawn route starts and ends at the day's accommodation
+ * (matching the sidebar's hotel connectors). A bookend is only added when both its
+ * hotel and the first/last located waypoint exist; passing nulls leaves `runs`
+ * untouched. The shared first/last waypoint is repeated so the polylines join.
+ */
+export function withHotelBookends(
+  runs: Waypoint[][],
+  firstWay: Waypoint | undefined,
+  lastWay: Waypoint | undefined,
+  startHotel: Waypoint | null,
+  endHotel: Waypoint | null,
+): Waypoint[][] {
+  const out: Waypoint[][] = []
+  if (startHotel && firstWay) out.push([startHotel, firstWay])
+  out.push(...runs)
+  if (endHotel && lastWay) out.push([lastWay, endHotel])
+  return out
+}
+
 export function generateGoogleMapsUrl(places: Waypoint[]): string | null {
  const valid = places.filter((p) => p.lat && p.lng)
  if (valid.length === 0) return null
@@ -197,7 +220,7 @@ export async function calculateSegments(
      duration: leg.duration,
      walkingText: formatDuration(walkingDuration),
      drivingText: formatDuration(leg.duration),
-      distanceText: formatDistance(leg.distance),
+      distanceText: formatRouteDistance(leg.distance),
    }
  })
 }
@@ -217,7 +240,9 @@ export async function calculateRouteWithLegs(
  }

  const coords = waypoints.map((p) => `${p.lng},${p.lat}`).join(';')
-  const cacheKey = `${profile}:${coords}`
+  // The cached result carries formatted leg distances, so the active distance unit is
+  // part of the key — otherwise switching km↔mi would return stale text (#1300).
+  const cacheKey = `${profile}:${getDistanceUnit()}:${coords}`
  const cached = routeCache.get(cacheKey)
  if (cached) return cached

@@ -244,7 +269,7 @@ export async function calculateRouteWithLegs(
        duration: leg.duration,
        walkingText: formatDuration(walkingDuration),
        drivingText: formatDuration(leg.duration),
-        distanceText: formatDistance(leg.distance),
+        distanceText: formatRouteDistance(leg.distance),
        durationText: formatDuration(leg.duration),
      }
    }
@@ -259,11 +284,16 @@ export async function calculateRouteWithLegs(
  return result
 }

-function formatDistance(meters: number): string {
-  if (meters < 1000) {
+function getDistanceUnit(): DistanceUnit {
+  return useSettingsStore.getState().settings.distance_unit === 'imperial' ? 'imperial' : 'metric'
+}
+
+function formatRouteDistance(meters: number): string {
+  const unit = getDistanceUnit()
+  if (unit === 'metric' && meters < 1000) {
    return `${Math.round(meters)} m`
  }
-  return `${(meters / 1000).toFixed(1)} km`
+  return formatDistance(meters / 1000, unit)
 }

 function formatDuration(seconds: number): string {
@@ -0,0 +1,55 @@
+import { describe, expect, it } from 'vitest'
+import {
+  MAPBOX_DEFAULT_STYLE,
+  OPENFREEMAP_DEFAULT_STYLE,
+  isOpenFreeMapStyle,
+  normalizeStyleForProvider,
+  styleForActiveProvider,
+} from './glProviders'
+
+describe('glProviders', () => {
+  it('keeps OpenFreeMap styles for MapLibre', () => {
+    const style = 'https://tiles.openfreemap.org/styles/bright'
+
+    expect(normalizeStyleForProvider('maplibre-gl', style)).toBe(style)
+  })
+
+  it('falls back to OpenFreeMap for MapLibre styles outside the CSP allowlist', () => {
+    expect(normalizeStyleForProvider('maplibre-gl', 'https://demotiles.maplibre.org/style.json')).toBe(
+      OPENFREEMAP_DEFAULT_STYLE,
+    )
+    expect(normalizeStyleForProvider('maplibre-gl', MAPBOX_DEFAULT_STYLE)).toBe(OPENFREEMAP_DEFAULT_STYLE)
+  })
+
+  it('leaves Mapbox styles unchanged for Mapbox GL', () => {
+    expect(normalizeStyleForProvider('mapbox-gl', MAPBOX_DEFAULT_STYLE)).toBe(MAPBOX_DEFAULT_STYLE)
+  })
+
+  it('matches the OpenFreeMap CSP host', () => {
+    expect(isOpenFreeMapStyle('https://tiles.openfreemap.org/styles/liberty')).toBe(true)
+    expect(isOpenFreeMapStyle('https://demotiles.maplibre.org/style.json')).toBe(false)
+  })
+
+  it('rejects host/userinfo spoofing and http downgrade', () => {
+    expect(isOpenFreeMapStyle('https://tiles.openfreemap.org.evil.com/styles/x')).toBe(false)
+    expect(isOpenFreeMapStyle('https://evil.com/@tiles.openfreemap.org/styles/x')).toBe(false)
+    expect(isOpenFreeMapStyle('http://tiles.openfreemap.org/styles/liberty')).toBe(false)
+    expect(isOpenFreeMapStyle('  https://tiles.openfreemap.org/styles/liberty  ')).toBe(true)
+  })
+
+  it('falls back to provider defaults for empty/whitespace styles', () => {
+    expect(normalizeStyleForProvider('maplibre-gl', '')).toBe(OPENFREEMAP_DEFAULT_STYLE)
+    expect(normalizeStyleForProvider('maplibre-gl', '   ')).toBe(OPENFREEMAP_DEFAULT_STYLE)
+    expect(normalizeStyleForProvider('mapbox-gl', '')).toBe(MAPBOX_DEFAULT_STYLE)
+    expect(normalizeStyleForProvider('mapbox-gl', null)).toBe(MAPBOX_DEFAULT_STYLE)
+  })
+
+  it('styleForActiveProvider reads each provider\'s own style slot', () => {
+    const mb = 'mapbox://styles/me/custom'
+    const ofm = 'https://tiles.openfreemap.org/styles/bright'
+    expect(styleForActiveProvider('mapbox-gl', mb, ofm)).toBe(mb)
+    expect(styleForActiveProvider('maplibre-gl', mb, ofm)).toBe(ofm)
+    // An empty MapLibre slot falls back to the OpenFreeMap default, leaving mapbox untouched.
+    expect(styleForActiveProvider('maplibre-gl', mb, '')).toBe(OPENFREEMAP_DEFAULT_STYLE)
+  })
+})
@@ -0,0 +1,68 @@
+export type GlMapProvider = 'mapbox-gl' | 'maplibre-gl'
+
+export interface GlStylePreset {
+  name: string
+  url: string
+  tags?: string[]
+}
+
+export const MAPBOX_DEFAULT_STYLE = 'mapbox://styles/mapbox/standard'
+export const OPENFREEMAP_DEFAULT_STYLE = 'https://tiles.openfreemap.org/styles/liberty'
+
+export const MAPBOX_STYLE_PRESETS: GlStylePreset[] = [
+  { name: 'Mapbox Standard', url: MAPBOX_DEFAULT_STYLE, tags: ['3D', 'Apple-like'] },
+  { name: 'Standard Satellite', url: 'mapbox://styles/mapbox/standard-satellite', tags: ['3D', 'Satellite'] },
+  { name: 'Streets', url: 'mapbox://styles/mapbox/streets-v12', tags: ['3D', 'Classic'] },
+  { name: 'Outdoors', url: 'mapbox://styles/mapbox/outdoors-v12', tags: ['3D', 'Terrain'] },
+  { name: 'Light', url: 'mapbox://styles/mapbox/light-v11', tags: ['3D', 'Minimal'] },
+  { name: 'Dark', url: 'mapbox://styles/mapbox/dark-v11', tags: ['3D', 'Dark'] },
+  { name: 'Satellite', url: 'mapbox://styles/mapbox/satellite-v9', tags: ['3D', 'Satellite'] },
+  { name: 'Satellite Streets', url: 'mapbox://styles/mapbox/satellite-streets-v12', tags: ['3D', 'Satellite'] },
+  { name: 'Navigation Day', url: 'mapbox://styles/mapbox/navigation-day-v1', tags: ['3D', 'Apple-like'] },
+  { name: 'Navigation Night', url: 'mapbox://styles/mapbox/navigation-night-v1', tags: ['3D', 'Dark'] },
+]
+
+export const OPENFREEMAP_STYLE_PRESETS: GlStylePreset[] = [
+  { name: 'OpenFreeMap Liberty', url: OPENFREEMAP_DEFAULT_STYLE, tags: ['OpenFreeMap', '2D'] },
+  { name: 'OpenFreeMap Bright', url: 'https://tiles.openfreemap.org/styles/bright', tags: ['OpenFreeMap', 'Classic'] },
+  { name: 'OpenFreeMap Positron', url: 'https://tiles.openfreemap.org/styles/positron', tags: ['OpenFreeMap', 'Minimal'] },
+]
+
+export function getStylePresets(provider: GlMapProvider): GlStylePreset[] {
+  return provider === 'maplibre-gl' ? OPENFREEMAP_STYLE_PRESETS : MAPBOX_STYLE_PRESETS
+}
+
+export function defaultStyleForProvider(provider: GlMapProvider): string {
+  return provider === 'maplibre-gl' ? OPENFREEMAP_DEFAULT_STYLE : MAPBOX_DEFAULT_STYLE
+}
+
+export function isOpenFreeMapStyle(style?: string | null): boolean {
+  return (style || '').trim().startsWith('https://tiles.openfreemap.org/')
+}
+
+export function normalizeStyleForProvider(provider: GlMapProvider, style?: string | null): string {
+  const trimmed = (style || '').trim()
+  if (!trimmed) return defaultStyleForProvider(provider)
+  if (provider === 'maplibre-gl') {
+    return isOpenFreeMapStyle(trimmed) ? trimmed : OPENFREEMAP_DEFAULT_STYLE
+  }
+  return trimmed
+}
+
+/** The settings key that holds the style for a given GL provider. */
+export function styleSettingKey(provider: GlMapProvider): 'mapbox_style' | 'maplibre_style' {
+  return provider === 'maplibre-gl' ? 'maplibre_style' : 'mapbox_style'
+}
+
+/**
+ * Each GL provider keeps its style in its own slot (mapbox_style / maplibre_style), so
+ * switching providers never overwrites the other one's custom style. Picks and normalizes
+ * the style for the active provider.
+ */
+export function styleForActiveProvider(
+  provider: GlMapProvider,
+  mapboxStyle?: string | null,
+  maplibreStyle?: string | null,
+): string {
+  return normalizeStyleForProvider(provider, provider === 'maplibre-gl' ? maplibreStyle : mapboxStyle)
+}
@@ -1,6 +1,13 @@
-import mapboxgl from 'mapbox-gl'
+import type mapboxgl from 'mapbox-gl'
 import type { GeoPosition } from '../../hooks/useGeolocation'

+type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string }) => {
+  setLngLat: (lngLat: mapboxgl.LngLatLike) => { addTo: (map: mapboxgl.Map) => unknown }
+  addTo: (map: mapboxgl.Map) => unknown
+  remove: () => void
+  getElement: () => HTMLElement
+}
+
 // Build the DOM element that backs the mapbox Marker. We animate the
 // heading cone via a CSS rotation so the DOM stays stable across updates
 // and mapbox doesn't get confused about which element to position.
@@ -66,10 +73,10 @@ export interface LocationMarkerHandle {
 // mapbox map. Returns a handle the caller uses to push position updates
 // and clean up. Keeps its own DOM element and GeoJSON source so it can
 // coexist with the regular trip markers.
-export function attachLocationMarker(map: mapboxgl.Map): LocationMarkerHandle {
+export function attachLocationMarker(map: mapboxgl.Map, MarkerCtor: MarkerConstructor): LocationMarkerHandle {
  ensurePulseStyle()
  const { root, cone } = buildLocationEl()
-  const marker = new mapboxgl.Marker({ element: root, anchor: 'center' })
+  const marker = new MarkerCtor({ element: root, anchor: 'center' })

  const ensureAccuracyLayer = () => {
    if (map.getSource('trek-location-accuracy')) return
@@ -8,7 +8,7 @@

 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
-import mapboxgl from 'mapbox-gl'
+import type 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'
@@ -220,18 +220,29 @@ export interface ReservationOverlayOptions {
  onEndpointClick?: (reservationId: number) => void
 }

+type GlMarker = {
+  setLngLat: (lngLat: mapboxgl.LngLatLike) => GlMarker
+  addTo: (map: mapboxgl.Map) => GlMarker
+  remove: () => void
+  getElement: () => HTMLElement
+}
+
+type MarkerConstructor = new (options?: { element?: HTMLElement; anchor?: string }) => GlMarker
+
 export class ReservationMapboxOverlay {
  private map: mapboxgl.Map
  private items: TransportItem[] = []
  private opts: ReservationOverlayOptions
-  private endpointMarkers: mapboxgl.Marker[] = []
-  private statsMarkers: { marker: mapboxgl.Marker; arc: [number, number][] }[] = []
+  private MarkerCtor: MarkerConstructor
+  private endpointMarkers: GlMarker[] = []
+  private statsMarkers: { marker: GlMarker; arc: [number, number][] }[] = []
  private rerender: () => void
  private destroyed = false

-  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions) {
+  constructor(map: mapboxgl.Map, opts: ReservationOverlayOptions, MarkerCtor: MarkerConstructor) {
    this.map = map
    this.opts = opts
+    this.MarkerCtor = MarkerCtor
    this.rerender = () => { if (!this.destroyed) this.render() }
    this.setupLayer()
    map.on('zoomend', this.rerender)
@@ -350,7 +361,7 @@ export class ReservationMapboxOverlay {
              this.opts.onEndpointClick?.(item.res.id)
            })
          }
-          const marker = new mapboxgl.Marker({ element: node, anchor: 'center' })
+          const marker = new this.MarkerCtor({ element: node, anchor: 'center' })
            .setLngLat([ep.lng, ep.lat])
            .addTo(map)
          this.endpointMarkers.push(marker)
@@ -84,6 +84,22 @@ const transportReservation = {
  metadata: JSON.stringify({ airline: 'Air Italia', flight_number: 'AI123', departure_airport: 'CDG', arrival_airport: 'FCO' }),
 } as any

+const multiLegFlight = {
+  id: 401,
+  title: 'Flight to Tokyo',
+  type: 'flight',
+  day_id: 10,
+  reservation_time: '2025-06-01T08:00:00',
+  confirmation_number: 'XYZ789',
+  metadata: JSON.stringify({
+    legs: [
+      { from: 'FRA', to: 'BER', airline: 'Lufthansa', flight_number: 'LH1' },
+      { from: 'BER', to: 'HND', airline: 'Lufthansa', flight_number: 'LH2' },
+    ],
+    departure_airport: 'FRA', arrival_airport: 'HND', airline: 'Lufthansa', flight_number: 'LH1',
+  }),
+} as any
+
 const richArgs = {
  trip: { id: 10, title: 'Italy Trip', description: 'Summer adventure', cover_image: '/uploads/cover.jpg' } as any,
  days: [dayWithPlaces],
@@ -196,6 +212,16 @@ describe('downloadTripPDF', () => {
    const iframe = getIframe()
    expect(iframe!.srcdoc).toContain('Flight to Rome')
    expect(iframe!.srcdoc).toContain('ABC123')
+    // Single-leg flight keeps its full-route subtitle.
+    expect(iframe!.srcdoc).toContain('Air Italia · AI123 · CDG → FCO')
+  })
+
+  it('FE-COMP-TRIPPDF-013b: renders every flight number for a multi-leg flight', async () => {
+    await downloadTripPDF({ ...richArgs, reservations: [multiLegFlight] })
+    const iframe = getIframe()
+    // One subtitle line per leg, each with its own flight number and segment route.
+    expect(iframe!.srcdoc).toContain('Lufthansa · LH1 · FRA → BER')
+    expect(iframe!.srcdoc).toContain('Lufthansa · LH2 · BER → HND')
  })

  it('FE-COMP-TRIPPDF-014: renders cover image when trip has cover_image', async () => {
@@ -297,6 +323,28 @@ describe('downloadTripPDF', () => {
    expect(photoCalled).toBe(true)
  })

+  it('FE-COMP-TRIPPDF-019b: fetches photos for OSM places via osm_id recovered from the places pool (#1130)', async () => {
+    let fetchedId: string | null = null
+    server.use(
+      http.get('/api/maps/place-photo/:placeId', ({ params }) => {
+        fetchedId = params.placeId as string
+        return HttpResponse.json({ photoUrl: 'https://example.com/osm.jpg' })
+      }),
+    )
+    // The assignment projection drops osm_id; the full place in `places` carries it.
+    const osmPlace = { ...placeWithDetails, id: 101, image_url: null, google_place_id: null, osm_id: 'node/240109189', lat: 41.89, lng: 12.49 }
+    const args = {
+      ...richArgs,
+      places: [osmPlace],
+      assignments: {
+        '10': [{ ...assignmentForDay, id: 201, place_id: 101, place: { ...placeWithDetails, id: 101, image_url: null, google_place_id: null } }],
+      } as any,
+    }
+    await downloadTripPDF(args)
+    // osm_id is used as the photo key (not the coords fallback), proving the pool lookup works.
+    expect(fetchedId).toBe('node/240109189')
+  })
+
  it('FE-COMP-TRIPPDF-020: renders empty day message when no items assigned', async () => {
    const args = {
      ...minimalArgs,
@@ -6,6 +6,7 @@ import { accommodationsApi, mapsApi } from '../../api/client'
 import type { Trip, Day, Place, Category, AssignmentsMap, DayNote } from '../../types'
 import { isDayInAccommodationRange, getDayOrder } from '../../utils/dayOrder'
 import { splitReservationDateTime } from '../../utils/formatters'
+import { getFlightLegs } from '../../utils/flightLegs'

 function renderLucideIcon(icon:LucideIcon, props = {}) {
  if (!_renderToStaticMarkup) return ''
@@ -96,21 +97,29 @@ function dayCost(assignments, dayId, locale) {
  return total > 0 ? `${total.toLocaleString(locale)} EUR` : null
 }

-// Pre-fetch Google Place photos for all assigned places
-async function fetchPlacePhotos(assignments: AssignmentsMap) {
+// Pre-fetch place photos for all assigned places.
+// Assignment places are a server-side projection that drops osm_id, so we recover
+// the full place from the trip's places pool and key the photo off the same id the
+// app UI uses (google_place_id || osm_id || coords) — otherwise OSM/coords-only
+// places fell back to category icons in the PDF even though they show photos in-app.
+async function fetchPlacePhotos(assignments: AssignmentsMap, places: Place[]) {
  const photoMap = {} // placeId → photoUrl
+  // The assignment projection drops osm_id, so recover it from the full places pool.
+  const osmById = new Map((places || []).map(p => [p.id, p.osm_id]))
  const allPlaces = Object.values(assignments).flatMap(a => a.map(x => x.place)).filter(Boolean)
  const unique = [...new Map(allPlaces.map(p => [p.id, p])).values()]

-  // Assignment places are a server-side projection that omits osm_id, so photo
-  // pre-fetch keys off the google_place_id that the projection does carry.
-  const toFetch = unique.filter(p => !p.image_url && p.google_place_id)
+  const toFetch = unique
+    .map(p => ({ p, osm_id: osmById.get(p.id) }))
+    .filter(({ p, osm_id }) => !p.image_url && (p.google_place_id || osm_id || (p.lat != null && p.lng != null)))

  await Promise.allSettled(
-    toFetch.map(async (place) => {
+    toFetch.map(async ({ p, osm_id }) => {
+      // Same key the app UI uses: google_place_id || osm_id || coords.
+      const photoId = p.google_place_id || osm_id || `coords:${p.lat}:${p.lng}`
      try {
-        const data = await mapsApi.placePhoto(place.google_place_id, place.lat, place.lng, place.name)
-        if (data.photoUrl) photoMap[place.id] = data.photoUrl
+        const data = await mapsApi.placePhoto(photoId, p.lat, p.lng, p.name)
+        if (data.photoUrl) photoMap[p.id] = data.photoUrl
      } catch {}
    })
  )
@@ -140,8 +149,8 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
  //retrieve accommodations for the trip to display on the day sections and prefetch their photos if needed
  const accommodations = await accommodationsApi.list(trip.id);

-  // Pre-fetch place photos from Google
-  const photoMap = await fetchPlacePhotos(assignments)
+  // Pre-fetch place photos (Google, OSM and coords-only places)
+  const photoMap = await fetchPlacePhotos(assignments, places)

  const totalAssigned = new Set(
    Object.values(assignments || {}).flatMap(a => a.map(x => x.place?.id)).filter(Boolean)
@@ -215,17 +224,30 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
            const icon = reservationIconSvg(r.type)
            const color = RESERVATION_COLOR_MAP[r.type] || '#3b82f6'
            let subtitle = ''
+            // Flights render one subtitle line per leg (see below); everything else is a single line.
+            let subtitleLines: string[] = []
            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(' · ')
+              const legs = getFlightLegs(r)
+              if (legs.length > 1) {
+                // Multi-leg: one line per leg so every flight number + segment route is shown.
+                subtitleLines = legs.map(l =>
+                  [l.airline, l.flight_number,
+                   (l.from || l.to) ? [l.from, l.to].filter(Boolean).join(' → ') : '']
+                    .filter(Boolean).join(' · '))
+                  .filter(Boolean)
+              } else {
+                // Single-leg: 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(' · ')
            else if (r.type === 'tour') subtitle = [meta.operator].filter(Boolean).join(' · ')
+            if (subtitleLines.length === 0 && subtitle) subtitleLines = [subtitle]
            const locationLine = r.location || meta.location || ''
            const phase = pdfGetSpanPhase(r, day.id)
            const spanLabel = pdfGetSpanLabel(r, phase)
@@ -238,7 +260,7 @@ export async function downloadTripPDF({ trip, days, places, assignments, categor
                <span class="note-icon">${icon}</span>
                <div class="note-body">
                  <div class="note-text" style="font-weight: 600;">${titleHtml}${time ? ` <span style="color:#6b7280;font-weight:400;font-size:10px;">${time}</span>` : ''}</div>
-                  ${subtitle ? `<div class="note-time">${escHtml(subtitle)}</div>` : ''}
+                  ${subtitleLines.filter(Boolean).map(s => `<div class="note-time">${escHtml(s)}</div>`).join('')}
                  ${locationLine ? `<div class="note-time">${escHtml(locationLine)}</div>` : ''}
                  ${r.confirmation_number ? `<div class="note-time" style="font-size:9px;">Code: ${escHtml(r.confirmation_number)}</div>` : ''}
                </div>
@@ -174,7 +174,9 @@ describe('PackingListPanel', () => {

  it('FE-COMP-PACKING-016: delete item button exists and triggers API call', async () => {
    const user = userEvent.setup();
-    const item = buildPackingItem({ id: 99, name: 'To Remove', category: 'Test' });
+    // Uncategorized item: deleting it is a plain DELETE (a custom category's last
+    // item is instead converted to a placeholder — see FE-COMP-PACKING-070).
+    const item = buildPackingItem({ id: 99, name: 'To Remove', category: null });
    let deleteCalled = false;
    server.use(
      http.delete('/api/trips/1/packing/99', () => {
@@ -1415,4 +1417,83 @@ describe('PackingListPanel', () => {
    expect(clickSpy).toHaveBeenCalled();
    clickSpy.mockRestore();
  });
+
+  it('FE-COMP-PACKING-070: deleting the last item of a custom category converts the row to a placeholder so the category persists in place (#1289)', async () => {
+    const user = userEvent.setup();
+    const item = buildPackingItem({ id: 99, name: 'Tent', category: 'Camping Gear' });
+    // handleDeleteItem decides "last in category" from the rendered list.
+    seedStore(useTripStore, { packingItems: [item] });
+    let deleted = false;
+    let putBody: Record<string, unknown> | null = null;
+    server.use(
+      http.delete('/api/trips/1/packing/99', () => {
+        deleted = true;
+        return HttpResponse.json({ success: true });
+      }),
+      http.put('/api/trips/1/packing/99', async ({ request }) => {
+        putBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ item: buildPackingItem({ id: 99, name: '...', category: 'Camping Gear' }) });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[item]} />);
+
+    await user.click(screen.getByTitle('Delete'));
+
+    // The row is updated in place (same id) rather than deleted, so colour/position hold.
+    await waitFor(() => expect(putBody).toMatchObject({ name: '...' }));
+    expect(deleted).toBe(false);
+  });
+
+  it('FE-COMP-PACKING-071: deleting the placeholder row deletes it, dismissing the empty category (#1289)', async () => {
+    const user = userEvent.setup();
+    const placeholder = buildPackingItem({ id: 5, name: '...', category: 'Camping Gear' });
+    seedStore(useTripStore, { packingItems: [placeholder] });
+    let deleted = false;
+    let converted = false;
+    server.use(
+      http.delete('/api/trips/1/packing/5', () => {
+        deleted = true;
+        return HttpResponse.json({ success: true });
+      }),
+      http.put('/api/trips/1/packing/5', () => {
+        converted = true;
+        return HttpResponse.json({ item: placeholder });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[placeholder]} />);
+
+    await user.click(screen.getByTitle('Delete'));
+
+    await waitFor(() => expect(deleted).toBe(true));
+    // It is the placeholder itself — it must be removed, not re-converted.
+    expect(converted).toBe(false);
+  });
+
+  it('FE-COMP-PACKING-072: adding an item to an empty category reuses the placeholder row instead of appending (#1289)', async () => {
+    const user = userEvent.setup();
+    const placeholder = buildPackingItem({ id: 5, name: '...', category: 'Camping Gear' });
+    seedStore(useTripStore, { packingItems: [placeholder] });
+    let posted = false;
+    let putBody: Record<string, unknown> | null = null;
+    server.use(
+      http.post('/api/trips/1/packing', () => {
+        posted = true;
+        return HttpResponse.json({ item: buildPackingItem({ id: 6 }) });
+      }),
+      http.put('/api/trips/1/packing/5', async ({ request }) => {
+        putBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ item: buildPackingItem({ id: 5, name: 'Tent', category: 'Camping Gear' }) });
+      })
+    );
+    render(<PackingListPanel tripId={1} items={[placeholder]} />);
+
+    // Open the category's inline "Add item" and add a real entry.
+    await user.click(screen.getByText('Add item'));
+    const input = await screen.findByPlaceholderText('Item name...');
+    await user.type(input, 'Tent');
+    await user.keyboard('{Enter}');
+
+    await waitFor(() => expect(putBody).toMatchObject({ name: 'Tent' }));
+    expect(posted).toBe(false);
+  });
 });
@@ -18,6 +18,7 @@ interface KategorieGruppeProps {
  allCategories: string[]
  onRename: (oldName: string, newName: string) => Promise<void>
  onDeleteAll: (items: PackingItem[]) => Promise<void>
+  onDeleteItem: (item: PackingItem) => Promise<void>
  onAddItem: (category: string, name: string) => Promise<void>
  assignees: CategoryAssignee[]
  tripMembers: TripMember[]
@@ -28,7 +29,7 @@ interface KategorieGruppeProps {
  canEdit?: boolean
 }

-export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll, onAddItem, assignees, tripMembers, onSetAssignees, bagTrackingEnabled, bags, onCreateBag, canEdit = true }: KategorieGruppeProps) {
+export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRename, onDeleteAll, onDeleteItem, onAddItem, assignees, tripMembers, onSetAssignees, bagTrackingEnabled, bags, onCreateBag, canEdit = true }: KategorieGruppeProps) {
  const [offen, setOffen] = useState(true)
  const [editingName, setEditingName] = useState(false)
  const [editKatName, setEditKatName] = useState(kategorie)
@@ -231,7 +232,7 @@ export function KategorieGruppe({ kategorie, items, tripId, allCategories, onRen
      {offen && (
        <div style={{ padding: '4px 4px 6px' }}>
          {items.map(item => (
-            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit} />
+            <ArtikelZeile key={item.id} item={item} tripId={tripId} categories={allCategories} onCategoryChange={() => {}} onDelete={onDeleteItem} bagTrackingEnabled={bagTrackingEnabled} bags={bags} onCreateBag={onCreateBag} canEdit={canEdit} />
          ))}
          {/* Inline add item */}
          {canEdit && (showAddItem ? (
@@ -15,13 +15,14 @@ interface ArtikelZeileProps {
  tripId: number
  categories: string[]
  onCategoryChange: () => void
+  onDelete?: (item: PackingItem) => Promise<void>
  bagTrackingEnabled?: boolean
  bags?: PackingBag[]
  onCreateBag: (name: string) => Promise<PackingBag | undefined>
  canEdit?: boolean
 }

-export function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
+export function ArtikelZeile({ item, tripId, categories, onCategoryChange, onDelete, bagTrackingEnabled, bags = [], onCreateBag, canEdit = true }: ArtikelZeileProps) {
  const isPlaceholder = item.name === PACKING_PLACEHOLDER_NAME
  const [editing, setEditing] = useState(false)
  const [editName, setEditName] = useState(isPlaceholder ? '' : item.name)
@@ -43,6 +44,9 @@ export function ArtikelZeile({ item, tripId, categories, onCategoryChange, bagTr
  }

  const handleDelete = async () => {
+    // The panel routes deletion through onDelete so an emptied custom category
+    // keeps its placeholder; fall back to a plain delete when used standalone.
+    if (onDelete) { await onDelete(item); return }
    try { await deletePackingItem(tripId, item.id) }
    catch { toast.error(t('packing.toast.deleteError')) }
  }
@@ -4,7 +4,7 @@ import { KategorieGruppe } from './PackingListPanelCategoryGroup'

 export function PackingList(S: PackingState) {
  const {
-    items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory,
+    items, gruppiert, t, tripId, allCategories, handleRenameCategory, handleDeleteCategory, handleDeleteItem,
    handleAddItemToCategory, categoryAssignees, tripMembers, handleSetAssignees,
    bagTrackingEnabled, bags, handleCreateBagByName, canEdit,
  } = S
@@ -31,6 +31,7 @@ export function PackingList(S: PackingState) {
              allCategories={allCategories}
              onRename={handleRenameCategory}
              onDeleteAll={handleDeleteCategory}
+              onDeleteItem={handleDeleteItem}
              onAddItem={handleAddItemToCategory}
              assignees={categoryAssignees[kat] || []}
              tripMembers={tripMembers}
@@ -8,7 +8,7 @@ import { useTranslation } from '../../i18n'
 import { packingApi, tripsApi } from '../../api/client'
 import { useAddonStore } from '../../store/addonStore'
 import type { PackingItem, PackingBag } from '../../types'
-import { BAG_COLORS } from './packingListPanel.constants'
+import { BAG_COLORS, PACKING_PLACEHOLDER_NAME } from './packingListPanel.constants'
 import { parseImportLines } from './packingListPanel.helpers'

 export interface TripMember {
@@ -44,7 +44,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
  const [filter, setFilter] = useState('alle') // 'alle' | 'offen' | 'erledigt'
  const [addingCategory, setAddingCategory] = useState(false)
  const [newCatName, setNewCatName] = useState('')
-  const { addPackingItem, updatePackingItem, deletePackingItem } = useTripStore()
+  const { addPackingItem, updatePackingItem, deletePackingItem, togglePackingItem } = useTripStore()
  const can = useCanDo()
  const trip = useTripStore((s) => s.trip)
  const canEdit = can('packing_edit', trip)
@@ -106,10 +106,45 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck

  const handleAddItemToCategory = async (category: string, name: string) => {
    try {
-      await addPackingItem(tripId, { name, category })
+      // Reuse the '...' placeholder slot when the category already has one, so a
+      // freshly-emptied category keeps its position (and therefore its colour)
+      // instead of the new item being appended to the end of the list.
+      const placeholder = useTripStore.getState().packingItems.find(
+        i => i.category === category && i.name === PACKING_PLACEHOLDER_NAME
+      )
+      if (placeholder) {
+        await updatePackingItem(tripId, placeholder.id, { name })
+      } else {
+        await addPackingItem(tripId, { name, category })
+      }
    } catch { toast.error(t('packing.toast.addError')) }
  }

+  // Deleting an item from a row. When it is the last item of a user-created
+  // category, turn that row back into the '...' placeholder in place rather than
+  // deleting it (#1289). Updating the row keeps its id, list position and colour,
+  // so the category neither disappears nor jumps to the end. The default
+  // (uncategorized) group and the placeholder row itself are deleted normally —
+  // removing the placeholder is how an empty category is dismissed.
+  const handleDeleteItem = async (item: PackingItem) => {
+    const category = item.category
+    const isLastInCategory = !!category
+      && item.name !== PACKING_PLACEHOLDER_NAME
+      && !items.some(i => i.id !== item.id && i.category === category)
+    try {
+      if (isLastInCategory) {
+        if (item.checked) await togglePackingItem(tripId, item.id, false)
+        await updatePackingItem(tripId, item.id, {
+          name: PACKING_PLACEHOLDER_NAME, weight_grams: null, bag_id: null, quantity: 1,
+        })
+      } else {
+        await deletePackingItem(tripId, item.id)
+      }
+    } catch {
+      toast.error(t('packing.toast.deleteError'))
+    }
+  }
+
  const handleAddNewCategory = async () => {
    if (!newCatName.trim()) return
    let catName = newCatName.trim()
@@ -308,7 +343,7 @@ export function usePackingList({ tripId, items, openImportSignal = 0, clearCheck
    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,
+    handleAddItemToCategory, handleAddNewCategory, handleRenameCategory, handleDeleteCategory, handleDeleteItem, handleClearChecked,
    bagTrackingEnabled, bags, newBagName, setNewBagName, showAddBag, setShowAddBag, showBagModal, setShowBagModal,
    handleCreateBag, handleCreateBagByName, handleDeleteBag, handleUpdateBag, handleSetBagMembers,
    availableTemplates, showTemplateDropdown, setShowTemplateDropdown, applyingTemplate,
@@ -0,0 +1,61 @@
+import { Plus, Pencil, Trash2 } from 'lucide-react'
+import { useTripStore } from '../../store/tripStore'
+import { useSettingsStore } from '../../store/settingsStore'
+import { useTranslation } from '../../i18n'
+import { formatMoney } from '../../utils/formatters'
+import { catMeta } from '../Budget/costsCategories'
+import type { BudgetItem } from '../../types'
+
+/**
+ * The Costs block inside a booking modal. Replaces the old inline price + budget
+ * category fields: when no expense is linked yet it offers a "create expense"
+ * button (the modal saves the booking first, then opens the full Costs editor);
+ * once linked it shows the expense with edit / remove actions.
+ */
+export function BookingCostsSection({ reservationId, onCreate, onEdit, onRemove }: {
+  reservationId: number | null
+  onCreate: () => void
+  onEdit: (item: BudgetItem) => void
+  onRemove: (item: BudgetItem) => void
+}) {
+  const { t, locale } = useTranslation()
+  const budgetItems = useTripStore(s => s.budgetItems)
+  const trip = useTripStore(s => s.trip)
+  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
+  const base = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
+  const linked = reservationId ? budgetItems.find(i => i.reservation_id === reservationId) : null
+
+  const labelCls = 'block text-[11px] font-semibold uppercase tracking-[0.08em] text-content-faint mb-[6px]'
+
+  if (linked) {
+    const meta = catMeta(linked.category)
+    const Icon = meta.Icon
+    return (
+      <div>
+        <label className={labelCls}>{t('reservations.linkedExpense')}</label>
+        <div className="bg-surface-secondary border border-edge" style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 12px', borderRadius: 10 }}>
+          <span style={{ width: 26, height: 26, borderRadius: 7, display: 'grid', placeItems: 'center', background: meta.color + '22', color: meta.color, flexShrink: 0 }}><Icon size={14} /></span>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            <div className="text-content" style={{ fontSize: 14, fontWeight: 600, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{linked.name}</div>
+            <div className="text-content-faint" style={{ fontSize: 12 }}>{t(meta.labelKey)}</div>
+          </div>
+          <span className="text-content" style={{ fontSize: 14, fontWeight: 700, flexShrink: 0 }}>{formatMoney(linked.total_price, linked.currency || base, locale)}</span>
+          <button type="button" onClick={() => onEdit(linked)} title={t('common.edit')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Pencil size={13} /></button>
+          <button type="button" onClick={() => onRemove(linked)} title={t('reservations.removeExpense')} className="text-content-muted border border-edge bg-surface-card" style={{ display: 'inline-flex', padding: 7, borderRadius: 8, cursor: 'pointer' }}><Trash2 size={13} /></button>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      <label className={labelCls}>{t('reservations.costsLabel')}</label>
+      <button type="button" onClick={onCreate}
+        className="bg-surface-secondary border border-edge text-content"
+        style={{ width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, padding: '11px 13px', borderRadius: 10, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: 'inherit' }}>
+        <Plus size={15} /> {t('reservations.createExpense')}
+      </button>
+      <div className="text-content-faint" style={{ fontSize: 11, marginTop: 6 }}>{t('reservations.createExpenseHint')}</div>
+    </div>
+  )
+}
@@ -0,0 +1,11 @@
+import type { BudgetItem } from '../../types'
+
+/**
+ * A request from a booking modal to open the Costs expense editor — either to
+ * edit the already-linked expense, or to create a new one prefilled from the
+ * booking (the modal saves the booking first so `reservationId` is known).
+ */
+export interface BookingExpenseRequest {
+  editItem?: BudgetItem
+  prefill?: { reservationId?: number; name?: string; category?: string; amount?: number }
+}
@@ -5,7 +5,7 @@ declare global { interface Window { __dragData: DragDataPayload | null } }
 import React, { useState, useEffect, useLayoutEffect, useRef, useMemo } from 'react'
 import { ChevronDown, ChevronRight, ChevronUp, Navigation, RotateCcw, ExternalLink, Clock, Pencil, GripVertical, Ticket, Plus, FileText, Trash2, Car, Lock, Hotel, Footprints, Route as RouteIcon } from 'lucide-react'
 import { assignmentsApi, reservationsApi } from '../../api/client'
-import { calculateRoute, calculateRouteWithLegs, optimizeRoute } from '../Map/RouteCalculator'
+import { calculateRoute, calculateRouteWithLegs, optimizeRoute, generateGoogleMapsUrl } from '../Map/RouteCalculator'
 import PlaceAvatar from '../shared/PlaceAvatar'
 import ConfirmDialog from '../shared/ConfirmDialog'
 import { useContextMenu, ContextMenu } from '../shared/ContextMenu'
@@ -35,6 +35,7 @@ import { DayPlanSidebarTimeConfirmModal } from './DayPlanSidebarTimeConfirmModal
 import { DayPlanSidebarTransportDetailModal } from './DayPlanSidebarTransportDetailModal'
 import { DayPlanSidebarFooter } from './DayPlanSidebarFooter'
 import type { Trip, Day, Place, Category, Assignment, Accommodation, Reservation, AssignmentsMap, RouteResult, RouteSegment, DayNote } from '../../types'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'

 interface DayPlanSidebarProps {
  tripId: number
@@ -154,6 +155,9 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
  const [routeLegs, setRouteLegs] = useState<Record<number, RouteSegment>>({})
  const [hotelLegs, setHotelLegs] = useState<{ top?: { seg: RouteSegment; name: string }; bottom?: { seg: RouteSegment; name: string } }>({})
  const optimizeFromAccommodation = useSettingsStore(s => s.settings.optimize_from_accommodation)
+  // Recompute the hotel/route legs when the user flips km↔mi so the connector
+  // distances refresh instead of showing stale cached text (#1300).
+  const distanceUnit = useSettingsStore(s => s.settings.distance_unit)
  const legsAbortRef = useRef<AbortController | null>(null)
  const [draggingId, setDraggingId] = useState(null)
  const [lockedIds, setLockedIds] = useState(new Set())
@@ -411,25 +415,30 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {
    // waypoint of the day (morning) and from the last one back to it (evening). Only when
    // the "optimize from accommodation" setting is on and the day has a hotel.
    const day = days.find(d => d.id === selectedDayId)
-    const { morning: startHotel, evening: endHotel } =
-      day && optimizeFromAccommodation !== false ? getDayBookendHotels(day, days, accommodations) : {}
+    const bookends = day && optimizeFromAccommodation !== false
+      ? getDayBookendHotels(day, days, accommodations)
+      : null
+    const startHotel = bookends?.morning
+    const endHotel = bookends?.evening
    const hotelName = (a: Accommodation) => (a as any).place_name || (a as any).reservation_title || ''
    // Waypoints include transport endpoints (a car return, a taxi/train arrival), so the hotel
-    // legs connect even when the day starts or ends with a booking rather than a place.
-    const wayPts: { lat: number; lng: number }[] = []
+    // legs connect even when the day starts or ends with a booking rather than a place. Track
+    // whether each is a place so we can skip a hotel↔transport leg that isn't real: on a day-1
+    // arrival the check-in hotel never drove to the departure airport (#1321).
+    const wayPts: { lat: number; lng: number; isPlace: boolean }[] = []
    for (const it of merged) {
      if (it.type === 'place' && it.data.place?.lat && it.data.place?.lng) {
-        wayPts.push({ lat: it.data.place.lat, lng: it.data.place.lng })
+        wayPts.push({ lat: it.data.place.lat, lng: it.data.place.lng, isPlace: true })
      } else if (it.type === 'transport') {
        const { from, to } = getTransportRouteEndpoints(it.data, selectedDayId)
-        if (from) wayPts.push({ lat: from.lat, lng: from.lng })
-        if (to) wayPts.push({ lat: to.lat, lng: to.lng })
+        if (from) wayPts.push({ lat: from.lat, lng: from.lng, isPlace: false })
+        if (to) wayPts.push({ lat: to.lat, lng: to.lng, isPlace: false })
      }
    }
    const firstWay = wayPts[0]
    const lastWay = wayPts[wayPts.length - 1]
-    const wantTop = !!(startHotel && firstWay)
-    const wantBottom = !!(endHotel && lastWay)
+    const wantTop = !!(startHotel && firstWay && (firstWay.isPlace || bookends?.morningIsSleptHere))
+    const wantBottom = !!(endHotel && lastWay && (lastWay.isPlace || bookends?.eveningIsOvernight))

    if (runs.length === 0 && !wantTop && !wantBottom) { setRouteLegs({}); setHotelLegs({}); return }

@@ -465,7 +474,7 @@ function useDayPlanSidebar(props: DayPlanSidebarProps) {

      if (!controller.signal.aborted) { setRouteLegs(map); setHotelLegs(hotel) }
    })()
-  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap, accommodations, days, optimizeFromAccommodation])
+  }, [selectedDayId, routeShown, routeProfile, mergedItemsMap, accommodations, days, optimizeFromAccommodation, distanceUnit])

  const openAddNote = (dayId, e) => {
    e?.stopPropagation()
@@ -1595,14 +1604,17 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                            }}
                            onDragEnd={() => { setDraggingId(null); setDragOverDayId(null); setDropTargetKey(null); dragDataRef.current = null }}
                            onClick={() => { onPlaceClick(isPlaceSelected ? null : place.id, isPlaceSelected ? null : assignment.id); if (!isPlaceSelected) onSelectDay(day.id, true) }}
-                            onContextMenu={e => ctxMenu.open(e, [
-                              canEditDays && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
-                              canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
-                              place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-                              (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${place.google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + place.google_place_id : place.lat + ',' + place.lng}`, '_blank') },
-                              { divider: true },
-                              canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
-                            ])}
+                            onContextMenu={e => {
+                              const googleMapsUrl = getGoogleMapsUrlForPlace(place)
+                              ctxMenu.open(e, [
+                                canEditDays && onEditPlace && { label: t('common.edit'), icon: Pencil, onClick: () => onEditPlace(place, assignment.id) },
+                                canEditDays && onRemoveAssignment && { label: t('planner.removeFromDay'), icon: Trash2, onClick: () => onRemoveAssignment(day.id, assignment.id) },
+                                place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
+                                googleMapsUrl && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
+                                { divider: true },
+                                canEditDays && onDeletePlace && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => onDeletePlace(place.id) },
+                              ])
+                            }}
                            onMouseEnter={e => {
                              if (!isPlaceSelected && !lockedIds.has(assignment.id))
                                e.currentTarget.style.background = 'var(--bg-hover)'
@@ -2168,6 +2180,28 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
                          <RouteIcon size={12} strokeWidth={2} />
                          {t('dayplan.route')}
                        </button>
+                        {/* Open the day's stops as a route in Google Maps (planned order). #1255 */}
+                        <button
+                          onClick={() => {
+                            const url = generateGoogleMapsUrl(getDayAssignments(day.id).map(a => a.place).filter(p => p?.lat != null && p?.lng != null) as { lat: number; lng: number }[])
+                            if (url) window.open(url, '_blank', 'noopener,noreferrer')
+                          }}
+                          aria-label={t('planner.openGoogleMaps')}
+                          title={t('planner.openGoogleMaps')}
+                          className="bg-transparent text-content-secondary"
+                          style={{
+                            display: 'flex', alignItems: 'center', justifyContent: 'center',
+                            padding: '6px 10px', borderRadius: 8, border: '1px solid var(--border-faint)',
+                            cursor: 'pointer', fontFamily: 'inherit', flexShrink: 0,
+                          }}
+                        >
+                          <svg width="14" height="14" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true">
+                            <path d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z" />
+                            <path d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z" />
+                            <path d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z" />
+                            <path d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z" />
+                          </svg>
+                        </button>
                        <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',
@@ -2266,4 +2300,4 @@ const DayPlanSidebar = React.memo(function DayPlanSidebar(props: DayPlanSidebarP
  )
 })

-export default DayPlanSidebar
+export default DayPlanSidebar
@@ -13,6 +13,7 @@ export interface PlaceFormData {
  // Populated from a maps-search pick (not part of the initial blank form).
  phone?: string
  google_place_id?: string
+  google_ftid?: string
  osm_id?: string
 }

@@ -399,17 +399,38 @@ describe('PlaceFormModal', () => {
    expect(screen.queryByTestId('time-picker')).not.toBeInTheDocument();
  });

-  it('FE-PLANNER-PLACEFORM-026: time section IS shown in edit mode', () => {
+  it('FE-PLANNER-PLACEFORM-026: time section is hidden in edit mode when no assignment is in context', () => {
+    // Times are per day-assignment; editing a pool place with no day in context
+    // (assignmentId null) hides the fields, which otherwise would not persist (#1247)
    const place = buildPlace({ name: 'Test' });
    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={null} />);
-    // Time pickers are rendered when editing
+    expect(screen.queryByTestId('time-picker')).not.toBeInTheDocument();
+  });
+
+  it('FE-PLANNER-PLACEFORM-026b: time section IS shown when an assignment is in context', () => {
+    const place = buildPlace({ name: 'Test', place_time: '09:00', end_time: '10:00' });
+    const assignment = buildAssignment({ id: 10, day_id: 5, place });
+    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={10} dayAssignments={[assignment]} />);
    expect(screen.getAllByTestId('time-picker').length).toBeGreaterThanOrEqual(2);
  });

+  it('FE-PLANNER-PLACEFORM-026c: hydrates Start/End from the assignment when the pool place lacks times (#1247)', () => {
+    // The pool Place carries no times — they live on the day-assignment. Opening the
+    // editor with an assignmentId must hydrate the fields from assignment.place, not
+    // the (timeless) pool place that the Places panel passes in.
+    const poolPlace = buildPlace({ id: 7, name: 'Museum' });
+    const assignmentPlace = buildPlace({ id: 7, name: 'Museum', place_time: '20:20', end_time: '20:34' });
+    const assignment = buildAssignment({ id: 42, day_id: 3, place: assignmentPlace });
+    render(<PlaceFormModal {...defaultProps} place={poolPlace} assignmentId={42} dayAssignments={[assignment]} />);
+    expect(screen.getByDisplayValue('20:20')).toBeInTheDocument();
+    expect(screen.getByDisplayValue('20:34')).toBeInTheDocument();
+  });
+
  it('FE-PLANNER-PLACEFORM-027: end-before-start error disables submit', () => {
-    // Build a place with end_time before place_time
+    // Build an assignment whose place has end_time before place_time
    const place = buildPlace({ name: 'Test', place_time: '14:00', end_time: '13:00' });
-    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={null} />);
+    const assignment = buildAssignment({ id: 11, day_id: 5, place });
+    render(<PlaceFormModal {...defaultProps} place={place} assignmentId={11} dayAssignments={[assignment]} />);

    // hasTimeError = true → submit button disabled
    const submitBtn = screen.getByRole('button', { name: /^Update$/i });
@@ -92,6 +92,11 @@ function usePlaceFormModal(props: PlaceFormModalProps) {

  useEffect(() => {
    if (place) {
+      // Times are stored per day-assignment, not on the pool place. When an
+      // assignment is in context (itinerary edit, or a single-assignment pool
+      // edit) read the times off its embedded place; fall back to the place prop.
+      const assignment = assignmentId ? dayAssignments.find(a => a.id === assignmentId) : null
+      const timeSource = assignment?.place ?? place
      setForm({
        name: place.name || '',
        description: place.description || '',
@@ -99,8 +104,8 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
        lat: place.lat != null ? String(place.lat) : '',
        lng: place.lng != null ? String(place.lng) : '',
        category_id: place.category_id != null ? String(place.category_id) : '',
-        place_time: place.place_time || '',
-        end_time: place.end_time || '',
+        place_time: timeSource.place_time || '',
+        end_time: timeSource.end_time || '',
        notes: place.notes || '',
        transport_mode: place.transport_mode || 'walking',
        website: place.website || '',
@@ -121,7 +126,10 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
    }
    setPendingFiles([])
    setDuplicateWarning(null)
-  }, [place, prefillCoords, isOpen])
+    // dayAssignments is a fresh array each render; read it at open-time only and
+    // re-run on identity changes (place/assignmentId/open), not on every render.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [place, prefillCoords, isOpen, assignmentId])

  // Derive location bias bounding box from the trip's existing places
  const places = useTripStore((s) => s.places)
@@ -209,6 +217,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
            address: resolved.address || prev.address,
            lat: String(resolved.lat),
            lng: String(resolved.lng),
+            google_ftid: resolved.google_ftid || prev.google_ftid,
          }))
          setMapsResults([])
          setMapsSearch('')
@@ -233,6 +242,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) {
      lat: result.lat || prev.lat,
      lng: result.lng || prev.lng,
      google_place_id: result.google_place_id || prev.google_place_id,
+      google_ftid: result.google_ftid || prev.google_ftid,
      osm_id: result.osm_id || prev.osm_id,
      website: result.website || prev.website,
      phone: result.phone || prev.phone,
@@ -728,8 +738,11 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
          )}
        </div>

-        {/* Time — only shown when editing, not when creating */}
-        {place && (
+        {/* Time is per day-assignment: only shown when a single assignment is in
+            context (itinerary edit, or a single-assignment pool edit). Hidden when
+            creating, and for unassigned / multi-day pool edits where a single time
+            is ambiguous and wouldn't persist. */}
+        {place && assignmentId && (
          <TimeSection
            form={form}
            handleChange={handleChange}
@@ -618,6 +618,22 @@ describe('PlaceInspector', () => {
    expect(mapsBtn).toBeTruthy();
  });

+  it('FE-PLANNER-INSPECTOR-043b: Google Maps action uses google_ftid over coordinates', async () => {
+    const user = userEvent.setup();
+    const mapsUrl = "https://www.google.com/maps/place/?q=St.%20Jacobs%20Farmers'%20Market&ftid=0x882bf179e806d471:0x8591dde29c821a93";
+    const openSpy = vi.spyOn(window, 'open').mockImplementation(() => null);
+    render(<PlaceInspector {...defaultProps} place={buildPlace({
+      name: "St. Jacobs Farmers' Market",
+      lat: 43.5118527,
+      lng: -80.5542617,
+      google_ftid: '0x882bf179e806d471:0x8591dde29c821a93',
+    })} />);
+    const mapsBtn = screen.getAllByRole('button').find(btn => btn.textContent?.includes('Google Maps'))!;
+    await user.click(mapsBtn);
+    expect(openSpy).toHaveBeenCalledWith(mapsUrl, '_blank');
+    openSpy.mockRestore();
+  });
+
  // ── No files section when no upload handler and no files ──────────────────

  it('FE-PLANNER-INSPECTOR-044: files section hidden when no files and no onFileUpload', () => {
@@ -686,4 +702,3 @@ describe('PlaceInspector', () => {
  });

 });
-
@@ -12,6 +12,8 @@ import { useToast } from '../shared/Toast'
 import { useTranslation } from '../../i18n'
 import type { Place, Category, Day, Assignment, Reservation, TripFile, AssignmentsMap } from '../../types'
 import { splitReservationDateTime, formatTime } from '../../utils/formatters'
+import { formatDistance, formatElevation } from '../../utils/units'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'

 const detailsCache = new Map()

@@ -122,6 +124,7 @@ export default function PlaceInspector({
  const { t, locale, language } = useTranslation()
  const toast = useToast()
  const timeFormat = useSettingsStore(s => s.settings.time_format) || '24h'
+  const distanceUnit = useSettingsStore(s => s.settings.distance_unit) || 'metric'
  const [hoursExpanded, setHoursExpanded] = useState(false)
  const [filesExpanded, setFilesExpanded] = useState(false)
  const [isUploading, setIsUploading] = useState(false)
@@ -162,6 +165,11 @@ export default function PlaceInspector({

  const openingHours = googleDetails?.opening_hours || null
  const openNow = googleDetails?.open_now ?? null
+  // Prefer the place's stored ftid; if it has none yet, use the one just fetched from Google.
+  const googleMapsUrl = getGoogleMapsUrlForPlace(
+    place ? { ...place, google_ftid: place.google_ftid || googleDetails?.google_ftid || null } : null,
+    googleDetails?.google_maps_url,
+  )
  const selectedDay = days?.find(d => d.id === selectedDayId)
  const weekdayIndex = getWeekdayIndex(selectedDay?.date)

@@ -274,7 +282,8 @@ export default function PlaceInspector({
          <PlaceExtras openingHours={openingHours} weekdayIndex={weekdayIndex} hoursExpanded={hoursExpanded}
            setHoursExpanded={setHoursExpanded} timeFormat={timeFormat} t={t} place={place} placeFiles={placeFiles}
            onFileUpload={onFileUpload} filesExpanded={filesExpanded} setFilesExpanded={setFilesExpanded}
-            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading} />
+            fileInputRef={fileInputRef} handleFileUpload={handleFileUpload} isUploading={isUploading}
+            distanceUnit={distanceUnit} />

        </div>

@@ -288,14 +297,10 @@ export default function PlaceInspector({
              <ActionButton onClick={() => onAssignToDay(place.id)} variant="primary" icon={<Plus size={13} />} label={t('inspector.addToDay')} />
            )
          )}
-          {googleDetails?.google_maps_url && (
-            <ActionButton onClick={() => window.open(googleDetails.google_maps_url, '_blank')} variant="ghost" icon={<Navigation size={13} />}
+          {googleMapsUrl && (
+            <ActionButton onClick={() => window.open(googleMapsUrl, '_blank')} variant="ghost" icon={<Navigation size={13} />}
              label={<span className="hidden sm:inline">{t('inspector.google')}</span>} />
          )}
-          {!googleDetails?.google_maps_url && place.lat && place.lng && (
-            <ActionButton onClick={() => window.open(`https://www.google.com/maps/search/?api=1&query=${place.google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + place.google_place_id : place.lat + ',' + place.lng}`, '_blank')} variant="ghost" icon={<Navigation size={13} />}
-              label={<span className="hidden sm:inline">Google Maps</span>} />
-          )}
          {(place.website || googleDetails?.website) && (
            <ActionButton onClick={() => window.open(place.website || googleDetails?.website, '_blank')} variant="ghost" icon={<ExternalLink size={13} />}
              label={<span className="hidden sm:inline">{t('inspector.website')}</span>} />
@@ -682,7 +687,7 @@ function PlaceReservationParticipants({ selectedAssignmentId, reservations, assi
 }

 function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpanded, timeFormat, t, place,
-  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading }: any) {
+  placeFiles, onFileUpload, filesExpanded, setFilesExpanded, fileInputRef, handleFileUpload, isUploading, distanceUnit }: any) {
  return (
          <div className={`grid grid-cols-1 ${openingHours?.length > 0 ? 'sm:grid-cols-2' : ''} gap-2`}>
          {openingHours && openingHours.length > 0 && (
@@ -775,20 +780,20 @@ function PlaceExtras({ openingHours, weekdayIndex, hoursExpanded, setHoursExpand
                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                    <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
                      <MapPin size={12} color="#3b82f6" />
-                      {distKm < 1 ? `${Math.round(totalDist)} m` : `${distKm.toFixed(1)} km`}
+                      {formatDistance(distKm, distanceUnit)}
                    </div>
                    {hasEle && (
                      <>
                        <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
                          <Mountain size={12} color="#22c55e" />
-                          {Math.round(maxEle)} m
+                          {formatElevation(maxEle, distanceUnit)}
                        </div>
                        <div className="text-content" style={{ display: 'flex', alignItems: 'center', gap: 4, fontSize: 12, fontWeight: 600 }}>
                          <Mountain size={12} color="#ef4444" />
-                          {Math.round(minEle)} m
+                          {formatElevation(minEle, distanceUnit)}
                        </div>
                        <div className="text-content-muted" style={{ fontSize: 12 }}>
-                          ↑{Math.round(totalUp)} m &nbsp;↓{Math.round(totalDown)} m
+                          ↑{formatElevation(totalUp, distanceUnit)} &nbsp;↓{formatElevation(totalDown, distanceUnit)}
                        </div>
                      </>
                    )}
@@ -124,6 +124,40 @@ describe('PlacesSidebar', () => {
    expect(screen.getByText('Central Park')).toBeInTheDocument();
  });

+  it('FE-COMP-PLACES-009a: selected visible place is scrolled into view', async () => {
+    const scrollIntoView = Element.prototype.scrollIntoView as unknown as ReturnType<typeof vi.fn>;
+    scrollIntoView.mockClear();
+    const places = [
+      buildPlace({ id: 10, name: 'First Place' }),
+      buildPlace({ id: 42, name: 'Map Click Target' }),
+    ];
+
+    render(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={42} />);
+
+    const selectedRow = screen.getByText('Map Click Target').closest('[data-place-id="42"]');
+    expect(selectedRow).toHaveAttribute('aria-selected', 'true');
+    await waitFor(() => {
+      expect(scrollIntoView).toHaveBeenCalledWith({ behavior: 'smooth', block: 'center' });
+    });
+  });
+
+  it('FE-COMP-PLACES-009b: selected place hidden by search is not scrolled', async () => {
+    const user = userEvent.setup();
+    const scrollIntoView = Element.prototype.scrollIntoView as unknown as ReturnType<typeof vi.fn>;
+    const places = [
+      buildPlace({ id: 10, name: 'Visible Cafe' }),
+      buildPlace({ id: 42, name: 'Hidden Museum' }),
+    ];
+    const { rerender } = render(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={null} />);
+
+    await user.type(screen.getByPlaceholderText(/Search places/i), 'Visible');
+    scrollIntoView.mockClear();
+    rerender(<PlacesSidebar {...defaultProps} places={places} selectedPlaceId={42} />);
+
+    expect(screen.queryByText('Hidden Museum')).not.toBeInTheDocument();
+    expect(scrollIntoView).not.toHaveBeenCalled();
+  });
+
  it('FE-COMP-PLACES-010: shows place count', () => {
    const places = [buildPlace({ name: 'P1' }), buildPlace({ name: 'P2' }), buildPlace({ name: 'P3' })];
    render(<PlacesSidebar {...defaultProps} places={places} />);
@@ -5,7 +5,7 @@ export function PlacesList(S: SidebarState) {
  const {
    filtered, scrollContainerRef, onScrollTopChange, filter, t, canEditPlaces, onAddPlace,
    categories, selectedPlaceId, plannedIds, inDaySet, selectedIds, selectMode, selectedDayId,
-    isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+    isMobile, onPlaceClick, openContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
  } = S
  return (
    <div className="trek-stagger" style={{ flex: 1, overflowY: 'auto', minHeight: 0 }} ref={scrollContainerRef} onScroll={(e) => onScrollTopChange?.((e.currentTarget as HTMLElement).scrollTop)}>
@@ -44,6 +44,7 @@ export function PlacesList(S: SidebarState) {
              onAssignToDay={onAssignToDay}
              toggleSelected={toggleSelected}
              setDayPickerPlace={setDayPickerPlace}
+              registerPlaceRow={registerPlaceRow}
            />
          )
        })
@@ -21,17 +21,21 @@ interface MemoPlaceRowProps {
  onAssignToDay: (placeId: number, dayId?: number) => void
  toggleSelected: (id: number) => void
  setDayPickerPlace: (place: any) => void
+  registerPlaceRow: (placeId: number, element: HTMLDivElement | null) => void
 }

 export const MemoPlaceRow = React.memo(function MemoPlaceRow({
  place, category: cat, isSelected, isPlanned, inDay, isChecked,
  selectMode, selectedDayId, canEditPlaces, isMobile, t,
-  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace,
+  onPlaceClick, onContextMenu, onAssignToDay, toggleSelected, setDayPickerPlace, registerPlaceRow,
 }: MemoPlaceRowProps) {
  const hasGeometry = Boolean(place.route_geometry)
  return (
    <div
      key={place.id}
+      ref={element => registerPlaceRow(place.id, element)}
+      aria-selected={isSelected}
+      data-place-id={place.id}
      draggable={!selectMode}
      onDragStart={e => {
        e.dataTransfer.setData('placeId', String(place.id))
@@ -343,56 +343,51 @@ describe('ReservationModal', () => {

  // ── Budget addon ─────────────────────────────────────────────────────────────

-  it('FE-PLANNER-RESMODAL-024: budget section visible when budget addon is enabled', () => {
+  it('FE-PLANNER-RESMODAL-024: costs section (create expense) visible when budget addon is enabled', () => {
    seedStore(useAddonStore, {
      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
      loaded: true,
    });
    render(<ReservationModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
  });

-  it('FE-PLANNER-RESMODAL-025: budget price input accepts valid decimal', async () => {
+  it('FE-PLANNER-RESMODAL-025: create-expense saves the booking (no create_budget_entry) then opens the Costs editor', async () => {
    seedStore(useAddonStore, {
      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
      loaded: true,
    });
-    render(<ReservationModal {...defaultProps} />);
-    const priceInput = screen.getByPlaceholderText('0.00');
-    await userEvent.type(priceInput, '99.99');
-    expect((priceInput as HTMLInputElement).value).toBe('99.99');
-  });
-
-  it('FE-PLANNER-RESMODAL-026: budget hint shown when price > 0', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    render(<ReservationModal {...defaultProps} />);
-    const priceInput = screen.getByPlaceholderText('0.00');
-    await userEvent.type(priceInput, '50');
-    expect(screen.getByText(/budget entry will be created/i)).toBeInTheDocument();
-  });
-
-  it('FE-PLANNER-RESMODAL-027: budget fields included in onSave when price is set', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<ReservationModal {...defaultProps} onSave={onSave} />);
+    const onSave = vi.fn().mockResolvedValue({ id: 55 });
+    const onOpenExpense = vi.fn();
+    render(<ReservationModal {...defaultProps} onSave={onSave} onOpenExpense={onOpenExpense} />);

    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'Hotel Paris');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '120');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Create expense/i }));

    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 120 }) })
+    expect(onSave).not.toHaveBeenCalledWith(expect.objectContaining({ create_budget_entry: expect.anything() }));
+    await waitFor(() =>
+      expect(onOpenExpense).toHaveBeenCalledWith(
+        expect.objectContaining({ prefill: expect.objectContaining({ reservationId: 55 }) })
+      )
    );
  });

+  it('FE-PLANNER-RESMODAL-026: linked expense summary shown for a booking with a linked cost', () => {
+    seedStore(useAddonStore, {
+      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
+      loaded: true,
+    });
+    seedStore(useTripStore, {
+      trip: buildTrip({ id: 1 }),
+      budgetItems: [
+        { id: 7, trip_id: 1, name: 'Hotel deposit', total_price: 120, currency: 'EUR', category: 'accommodation', reservation_id: 9, members: [], payers: [], persons: 1, expense_date: null, paid_by_user_id: null },
+      ],
+    });
+    render(<ReservationModal {...defaultProps} reservation={buildReservation({ id: 9, type: 'hotel', title: 'Hotel Paris' })} />);
+    expect(screen.getByText('Hotel deposit')).toBeInTheDocument();
+  });
+
  // ── File upload ───────────────────────────────────────────────────────────────

  it('FE-PLANNER-RESMODAL-028: pending file added for new reservation on file input change', async () => {
@@ -599,22 +594,6 @@ describe('ReservationModal', () => {
    expect(filePickerItem).toBeInTheDocument();
  });

-  it('FE-PLANNER-RESMODAL-044: budget category dropdown options include existing categories', () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    seedStore(useTripStore, {
-      trip: buildTrip({ id: 1 }),
-      budgetItems: [
-        { id: 1, trip_id: 1, name: 'Flight ticket', total_price: 300, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
-      ],
-    });
-    render(<ReservationModal {...defaultProps} />);
-    // Budget section is visible
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
-  });
-
  it('FE-PLANNER-RESMODAL-045: tour type shows time pickers', async () => {
    render(<ReservationModal {...defaultProps} />);
    await userEvent.click(screen.getByRole('button', { name: /^Tour$/i }));
@@ -632,31 +611,6 @@ describe('ReservationModal', () => {
    await waitFor(() => expect(onSave).toHaveBeenCalledWith(expect.objectContaining({ type: 'other' })));
  });

-  it('FE-PLANNER-RESMODAL-047: clicking budget category select changes the value', async () => {
-    seedStore(useAddonStore, {
-      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
-      loaded: true,
-    });
-    seedStore(useTripStore, {
-      trip: buildTrip({ id: 1 }),
-      budgetItems: [
-        { id: 1, trip_id: 1, name: 'Ticket', total_price: 100, category: 'Transport', paid_by_user_id: null, persons: 1, members: [], expense_date: null },
-      ],
-    });
-    render(<ReservationModal {...defaultProps} />);
-
-    // Open the budget category CustomSelect (shows placeholder "Auto (from booking type)")
-    const budgetCategoryBtn = screen.getByText(/Auto \(from booking type\)/i).closest('button')!;
-    await userEvent.click(budgetCategoryBtn);
-
-    // Click the "Transport" category option
-    await waitFor(() => expect(screen.getByText('Transport')).toBeInTheDocument());
-    await userEvent.click(screen.getByText('Transport'));
-
-    // The select should now show "Transport"
-    expect(screen.getByText('Transport')).toBeInTheDocument();
-  });
-
  it('FE-PLANNER-RESMODAL-048: clicking attach file button triggers file input', async () => {
    render(<ReservationModal {...defaultProps} />);
    const attachBtn = screen.getByRole('button', { name: /Attach file/i });
@@ -11,7 +11,10 @@ import { useTranslation } from '../../i18n'
 import { CustomDatePicker } from '../shared/CustomDateTimePicker'
 import CustomTimePicker from '../shared/CustomTimePicker'
 import { openFile } from '../../utils/fileDownload'
-import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation } from '../../types'
+import type { Day, Place, Reservation, TripFile, AssignmentsMap, Accommodation, BudgetItem } from '../../types'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import { typeToCostCategory } from '@trek/shared'

 const TYPE_OPTIONS = [
  { value: 'hotel',      labelKey: 'reservations.type.hotel',      Icon: Hotel },
@@ -60,9 +63,10 @@ interface ReservationModalProps {
  onFileDelete: (fileId: number) => Promise<void>
  accommodations?: Accommodation[]
  defaultAssignmentId?: number | null
+  onOpenExpense?: (req: BookingExpenseRequest) => void
 }

-export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null }: ReservationModalProps) {
+export function ReservationModal({ isOpen, onClose, onSave, reservation, days, places, assignments, selectedDayId, files = [], onFileUpload, onFileDelete, accommodations = [], defaultAssignmentId = null, onOpenExpense }: ReservationModalProps) {
  const { id: tripId } = useParams<{ id: string }>()
  const loadFiles = useTripStore(s => s.loadFiles)
  const toast = useToast()
@@ -70,18 +74,14 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
  const fileInputRef = useRef(null)

  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
-  const budgetItems = useTripStore(s => s.budgetItems)
-  const budgetCategories = useMemo(() => {
-    const cats = new Set<string>()
-    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [budgetItems])
+  const deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
+  // Set right before submit when the user clicked create/edit expense (see TransportModal).
+  const expenseIntentRef = useRef<{ editItem?: BudgetItem; create?: boolean } | null>(null)

  const [form, setForm] = useState({
    title: '', type: 'other', status: 'pending',
    reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
    notes: '', assignment_id: '' as string | number, accommodation_id: '' as string | number,
-    price: '', budget_category: '',
    meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
    hotel_place_id: '' as string | number, hotel_start_day: '' as string | number, hotel_end_day: '' as string | number,
  })
@@ -127,15 +127,12 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        hotel_place_id: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.place_id || '' })(),
        hotel_start_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.start_day_id || '' })(),
        hotel_end_day: (() => { const acc = accommodations.find(a => a.id == reservation.accommodation_id); return acc?.end_day_id || '' })(),
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
      })
    } else {
      setForm({
        title: '', type: 'other', status: 'pending',
        reservation_time: '', reservation_end_time: '', end_date: '', location: '', confirmation_number: '',
        notes: '', assignment_id: defaultAssignmentId ?? '', accommodation_id: '',
-        price: '', budget_category: '',
        meta_check_in_time: '', meta_check_in_end_time: '', meta_check_out_time: '',
        hotel_place_id: '', hotel_start_day: '', hotel_end_day: '',
      })
@@ -167,8 +164,8 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
    return endFull <= startFull
  })()

-  const handleSubmit = async (e) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: { preventDefault?: () => void }) => {
+    e?.preventDefault?.()
    if (!form.title.trim()) return
    if (isEndBeforeStart) { toast.error(t('reservations.validation.endBeforeStart')); return }
    setIsSaving(true)
@@ -185,11 +182,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
      } else if (form.reservation_end_time && form.reservation_time) {
        combinedEndTime = `${form.reservation_time.split('T')[0]}T${form.reservation_end_time}`
      }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-
      const saveData: Record<string, any> & { title: string } = {
        title: form.title, type: form.type, status: form.status,
        reservation_time: form.type === 'hotel' ? null : (form.reservation_time || null),
@@ -202,11 +194,6 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
        endpoints: [],
        needs_review: false,
      }
-      if (isBudgetEnabled) {
-        saveData.create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
      if (form.type === 'hotel' && form.hotel_start_day && form.hotel_end_day) {
        saveData.create_accommodation = {
          place_id: form.hotel_place_id || null,
@@ -228,11 +215,25 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
          await onFileUpload(fd)
        }
      }
+      // Open the Costs editor for the saved booking when the user asked to
+      // create/edit its linked expense (gated on saved?.id).
+      const intent = expenseIntentRef.current
+      expenseIntentRef.current = null
+      if (intent && onOpenExpense && saved?.id) {
+        if (intent.editItem) onOpenExpense({ editItem: intent.editItem })
+        else onOpenExpense({ prefill: { reservationId: saved.id, name: form.title, category: typeToCostCategory(form.type) } })
+      }
    } finally {
      setIsSaving(false)
    }
  }

+  const handleCreateExpense = () => { expenseIntentRef.current = { create: true }; handleSubmit() }
+  const handleEditExpense = (item: BudgetItem) => { expenseIntentRef.current = { editItem: item }; handleSubmit() }
+  const handleRemoveExpense = async (item: BudgetItem) => {
+    try { await deleteBudgetItem(Number(tripId), item.id) } catch { toast.error(t('common.unknownError')) }
+  }
+
  const handleFileChange = async (e) => {
    const file = (e.target as HTMLInputElement).files?.[0]
    if (!file) return
@@ -610,38 +611,14 @@ export function ReservationModal({ isOpen, onClose, onSave, reservation, days, p
          </div>
        </div>

-        {/* Price + Budget Category */}
+        {/* Costs — create / view the expense linked to this booking */}
        {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.price')}</label>
-                <input type="text" inputMode="decimal" value={form.price}
-                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  className={inputClass} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.budgetCategory')}</label>
-                <CustomSelect
-                  value={form.budget_category}
-                  onChange={v => set('budget_category', v)}
-                  options={[
-                    { value: '', label: t('reservations.budgetCategoryAuto') },
-                    ...budgetCategories.map(c => ({ value: c, label: c })),
-                  ]}
-                  placeholder={t('reservations.budgetCategoryAuto')}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {form.price && parseFloat(form.price) > 0 && (
-              <div className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
+          <BookingCostsSection
+            reservationId={reservation?.id ?? null}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
        )}

      </form>
@@ -132,34 +132,37 @@ describe('TransportModal', () => {

  // ── Budget addon ─────────────────────────────────────────────────────────────

-  it('FE-PLANNER-TRANSMODAL-011: budget section visible when addon is enabled', () => {
+  it('FE-PLANNER-TRANSMODAL-011: costs section (create expense) visible when budget addon is enabled', () => {
    seedStore(useAddonStore, {
      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
      loaded: true,
    });
    render(<TransportModal {...defaultProps} />);
-    expect(screen.getByText(/^Price$/i)).toBeInTheDocument();
-    expect(screen.getByText(/Budget category/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /Create expense/i })).toBeInTheDocument();
  });

-  it('FE-PLANNER-TRANSMODAL-012: budget section not shown when addon is disabled', () => {
+  it('FE-PLANNER-TRANSMODAL-012: costs section not shown when budget addon is disabled', () => {
    render(<TransportModal {...defaultProps} />);
-    expect(screen.queryByPlaceholderText('0.00')).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Create expense/i })).not.toBeInTheDocument();
  });

-  it('FE-PLANNER-TRANSMODAL-013: budget fields included in onSave when price is set', async () => {
+  it('FE-PLANNER-TRANSMODAL-013: create-expense saves the booking (no create_budget_entry) then opens the Costs editor', async () => {
    seedStore(useAddonStore, {
      addons: [{ id: 'budget', name: 'Budget', type: 'budget', icon: '', enabled: true }],
      loaded: true,
    });
-    const onSave = vi.fn().mockResolvedValue(undefined);
-    render(<TransportModal {...defaultProps} onSave={onSave} />);
+    const onSave = vi.fn().mockResolvedValue({ id: 42 });
+    const onOpenExpense = vi.fn();
+    render(<TransportModal {...defaultProps} onSave={onSave} onOpenExpense={onOpenExpense} />);
    await userEvent.type(screen.getByPlaceholderText(/e\.g\. Lufthansa/i), 'ICE Train');
-    await userEvent.type(screen.getByPlaceholderText('0.00'), '85');
-    await userEvent.click(screen.getByRole('button', { name: /^Add$/i }));
+    await userEvent.click(screen.getByRole('button', { name: /Create expense/i }));
    await waitFor(() => expect(onSave).toHaveBeenCalled());
-    expect(onSave).toHaveBeenCalledWith(
-      expect.objectContaining({ create_budget_entry: expect.objectContaining({ total_price: 85 }) })
+    // The legacy auto-budget mechanism is gone; the expense is created via the editor instead.
+    expect(onSave).not.toHaveBeenCalledWith(expect.objectContaining({ create_budget_entry: expect.anything() }));
+    await waitFor(() =>
+      expect(onOpenExpense).toHaveBeenCalledWith(
+        expect.objectContaining({ prefill: expect.objectContaining({ reservationId: 42 }) })
+      )
    );
  });

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo, useRef } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useParams } from 'react-router-dom'
 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'
@@ -13,8 +13,11 @@ import { useAddonStore } from '../../store/addonStore'
 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 type { Day, Reservation, ReservationEndpoint, TripFile, BudgetItem } from '../../types'
 import { parseReservationMetadata, orderedEndpoints } from '../../utils/flightLegs'
+import { BookingCostsSection } from './BookingCostsSection'
+import type { BookingExpenseRequest } from './BookingCostsSection.types'
+import { typeToCostCategory } from '@trek/shared'

 const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other'] as const
 type TransportType = typeof TRANSPORT_TYPES[number]
@@ -105,8 +108,6 @@ const defaultForm = {
  arrival_time: '',
  confirmation_number: '',
  notes: '',
-  price: '',
-  budget_category: '',
  meta_airline: '',
  meta_flight_number: '',
  meta_train_number: '',
@@ -124,20 +125,20 @@ interface TransportModalProps {
  files?: TripFile[]
  onFileUpload?: (fd: FormData) => Promise<unknown>
  onFileDelete?: (fileId: number) => Promise<void>
+  onOpenExpense?: (req: BookingExpenseRequest) => void
 }

-export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete }: TransportModalProps) {
+export function TransportModal({ isOpen, onClose, onSave, reservation, days, selectedDayId, files = [], onFileUpload, onFileDelete, onOpenExpense }: TransportModalProps) {
  const { t, locale } = useTranslation()
  const toast = useToast()
  const isBudgetEnabled = useAddonStore(s => s.isEnabled('budget'))
  const budgetItems = useTripStore(s => s.budgetItems)
+  const deleteBudgetItem = useTripStore(s => s.deleteBudgetItem)
  const loadFiles = useTripStore(s => s.loadFiles)
-  const budgetCategories = useMemo(() => {
-    const cats = new Set<string>()
-    budgetItems.forEach(i => { if (i.category) cats.add(i.category) })
-    return Array.from(cats).sort()
-  }, [budgetItems])
  const { id: tripId } = useParams<{ id: string }>()
+  // Set right before submitting when the user clicked "create/edit expense", so
+  // the post-save handler knows to open the Costs editor for the saved booking.
+  const expenseIntentRef = useRef<{ editItem?: BudgetItem; create?: boolean } | null>(null)
  const [form, setForm] = useState({ ...defaultForm })
  const [isSaving, setIsSaving] = useState(false)
  const [fromPick, setFromPick] = useState<EndpointPick>({})
@@ -177,8 +178,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
        meta_train_number: meta.train_number || '',
        meta_platform: meta.platform || '',
        meta_seat: meta.seat || '',
-        price: meta.price || '',
-        budget_category: (meta.budget_category && budgetItems.some(i => i.category === meta.budget_category)) ? meta.budget_category : '',
      })
      if (type === 'flight') {
        const orderedEps = orderedEndpoints(reservation)
@@ -229,8 +228,8 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel

  const set = (field: string, value: any) => setForm(prev => ({ ...prev, [field]: value }))

-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+  const handleSubmit = async (e?: React.FormEvent) => {
+    e?.preventDefault()
    if (!form.title.trim()) return
    setIsSaving(true)
    try {
@@ -289,11 +288,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
        if (form.meta_platform) metadata.platform = form.meta_platform
        if (form.meta_seat) metadata.seat = form.meta_seat
      }
-      if (isBudgetEnabled) {
-        if (form.price) metadata.price = form.price
-        if (form.budget_category) metadata.budget_category = form.budget_category
-      }
-
      const startDate = startDay?.date ?? null
      const endDate = (endDay ?? startDay)?.date ?? null
      const endpoints: ReturnType<typeof endpointFromAirport>[] = []
@@ -334,11 +328,6 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
        endpoints,
        needs_review: false,
      }
-      if (isBudgetEnabled) {
-        (payload as any).create_budget_entry = form.price && parseFloat(form.price) > 0
-          ? { total_price: parseFloat(form.price), category: form.budget_category || t(`reservations.type.${form.type}`) || 'Other' }
-          : { total_price: 0 }
-      }
      const saved = await onSave(payload)
      if (!reservation?.id && saved?.id && pendingFiles.length > 0 && onFileUpload) {
        for (const file of pendingFiles) {
@@ -349,6 +338,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
          await onFileUpload(fd)
        }
      }
+      // The user asked to create/edit the linked expense — open the Costs editor
+      // for the now-saved booking. Gated on saved?.id so a failed save doesn't.
+      const intent = expenseIntentRef.current
+      expenseIntentRef.current = null
+      if (intent && onOpenExpense && saved?.id) {
+        if (intent.editItem) onOpenExpense({ editItem: intent.editItem })
+        else onOpenExpense({ prefill: { reservationId: saved.id, name: form.title, category: typeToCostCategory(form.type) } })
+      }
    } catch (err: unknown) {
      toast.error(err instanceof Error ? err.message : t('common.unknownError'))
    } finally {
@@ -356,6 +353,12 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
    }
  }

+  const handleCreateExpense = () => { expenseIntentRef.current = { create: true }; handleSubmit() }
+  const handleEditExpense = (item: BudgetItem) => { expenseIntentRef.current = { editItem: item }; handleSubmit() }
+  const handleRemoveExpense = async (item: BudgetItem) => {
+    try { await deleteBudgetItem(Number(tripId), item.id) } catch { toast.error(t('common.unknownError')) }
+  }
+
  const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0]
    if (!file) return
@@ -712,38 +715,14 @@ export function TransportModal({ isOpen, onClose, onSave, reservation, days, sel
          </div>
        </div>

-        {/* Price + Budget Category */}
+        {/* Costs — create / view the expense linked to this booking */}
        {isBudgetEnabled && (
-          <>
-            <div style={{ display: 'flex', gap: 8 }}>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.price')}</label>
-                <input type="text" inputMode="decimal" value={form.price}
-                  onChange={e => { const v = e.target.value; if (v === '' || /^\d*[.,]?\d{0,2}$/.test(v)) set('price', v.replace(',', '.')) }}
-                  onPaste={e => { e.preventDefault(); let txt = e.clipboardData.getData('text').trim().replace(/[^\d.,-]/g, ''); const lc = txt.lastIndexOf(','), ld = txt.lastIndexOf('.'), dp = Math.max(lc, ld); if (dp > -1) { txt = txt.substring(0, dp).replace(/[.,]/g, '') + '.' + txt.substring(dp + 1) } else { txt = txt.replace(/[.,]/g, '') } set('price', txt) }}
-                  placeholder="0.00"
-                  className={inputClass} />
-              </div>
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <label className={labelClass}>{t('reservations.budgetCategory')}</label>
-                <CustomSelect
-                  value={form.budget_category}
-                  onChange={v => set('budget_category', v)}
-                  options={[
-                    { value: '', label: t('reservations.budgetCategoryAuto') },
-                    ...budgetCategories.map(c => ({ value: c, label: c })),
-                  ]}
-                  placeholder={t('reservations.budgetCategoryAuto')}
-                  size="sm"
-                />
-              </div>
-            </div>
-            {form.price && parseFloat(form.price) > 0 && (
-              <div className="text-content-faint" style={{ fontSize: 11, marginTop: -4 }}>
-                {t('reservations.budgetHint')}
-              </div>
-            )}
-          </>
+          <BookingCostsSection
+            reservationId={reservation?.id ?? null}
+            onCreate={handleCreateExpense}
+            onEdit={handleEditExpense}
+            onRemove={handleRemoveExpense}
+          />
        )}

      </form>
@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'
+
+const base = { name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945, google_place_id: null, google_ftid: null } as any
+
+describe('getGoogleMapsUrlForPlace', () => {
+  it('FE-PLACE-GMAPS-001: uses a valid ftid for a precise /place link', () => {
+    const url = getGoogleMapsUrlForPlace({ ...base, google_ftid: '0x47e66e2964e34e2d:0x8ddca9ee380ef7e0' })
+    expect(url).toBe('https://www.google.com/maps/place/?q=Eiffel%20Tower&ftid=0x47e66e2964e34e2d:0x8ddca9ee380ef7e0')
+  })
+
+  it('FE-PLACE-GMAPS-002: falls back to query_place_id when there is no ftid', () => {
+    const url = getGoogleMapsUrlForPlace({ ...base, google_place_id: 'ChIJ123' })
+    expect(url).toBe('https://www.google.com/maps/search/?api=1&query=Eiffel%20Tower&query_place_id=ChIJ123')
+  })
+
+  it('FE-PLACE-GMAPS-003: ignores a malformed/hostile ftid and falls through to the place id', () => {
+    const url = getGoogleMapsUrlForPlace({ ...base, google_ftid: '0xAB&q=evil', google_place_id: 'ChIJ123' })
+    expect(url).toBe('https://www.google.com/maps/search/?api=1&query=Eiffel%20Tower&query_place_id=ChIJ123')
+  })
+
+  it('FE-PLACE-GMAPS-004: uses the details URL when there is no ftid or place id', () => {
+    const url = getGoogleMapsUrlForPlace(base, 'https://maps.google.com/?cid=123')
+    expect(url).toBe('https://maps.google.com/?cid=123')
+  })
+
+  it('FE-PLACE-GMAPS-005: falls back to coordinates as a last resort', () => {
+    const url = getGoogleMapsUrlForPlace(base)
+    expect(url).toBe('https://www.google.com/maps/search/?api=1&query=48.8584,2.2945')
+  })
+
+  it('FE-PLACE-GMAPS-006: returns null for no place or no location', () => {
+    expect(getGoogleMapsUrlForPlace(null)).toBeNull()
+    expect(getGoogleMapsUrlForPlace({ ...base, lat: null, lng: null })).toBeNull()
+  })
+})
@@ -0,0 +1,19 @@
+import type { AssignmentPlace, Place } from '../../types'
+
+type PlaceLike = Pick<Place | AssignmentPlace, 'name' | 'lat' | 'lng' | 'google_place_id' | 'google_ftid'>
+const GOOGLE_FTID_RE = /^0x[0-9a-f]+:0x[0-9a-f]+$/i
+
+export function getGoogleMapsUrlForPlace(place: PlaceLike | null | undefined, detailsUrl?: string | null): string | null {
+  if (!place) return null
+  const ftid = place.google_ftid?.trim()
+  if (ftid && GOOGLE_FTID_RE.test(ftid)) {
+    return `https://www.google.com/maps/place/?q=${encodeURIComponent(place.name)}&ftid=${ftid}`
+  }
+  const placeId = place.google_place_id?.trim()
+  if (placeId) {
+    return `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(place.name)}&query_place_id=${encodeURIComponent(placeId)}`
+  }
+  if (detailsUrl) return detailsUrl
+  if (place.lat == null || place.lng == null) return null
+  return `https://www.google.com/maps/search/?api=1&query=${place.lat},${place.lng}`
+}
@@ -9,6 +9,7 @@ import { useTripStore } from '../../store/tripStore'
 import { useCanDo } from '../../store/permissionsStore'
 import { useAuthStore } from '../../store/authStore'
 import type { Place, Category, Day, AssignmentsMap } from '../../types'
+import { getGoogleMapsUrlForPlace } from './placeGoogleMaps'

 export interface PlacesSidebarProps {
  tripId: number
@@ -59,6 +60,8 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
  const [sidebarDragOver, setSidebarDragOver] = useState(false)
  const sidebarDragCounter = useRef(0)
  const scrollContainerRef = useRef<HTMLDivElement | null>(null)
+  const placeRowRefs = useRef(new Map<number, HTMLDivElement>())
+  const lastAutoScrolledPlaceIdRef = useRef<number | null>(null)
  useLayoutEffect(() => {
    if (scrollContainerRef.current && initialScrollTop) {
      scrollContainerRef.current.scrollTop = initialScrollTop
@@ -197,6 +200,28 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
    return true
  }), [places, filter, categoryFilters, search, plannedIds])

+  const registerPlaceRow = useCallback((placeId: number, element: HTMLDivElement | null) => {
+    if (element) {
+      placeRowRefs.current.set(placeId, element)
+    } else {
+      placeRowRefs.current.delete(placeId)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!props.selectedPlaceId) {
+      lastAutoScrolledPlaceIdRef.current = null
+      return
+    }
+    if (lastAutoScrolledPlaceIdRef.current === props.selectedPlaceId) return
+    if (!filtered.some(place => place.id === props.selectedPlaceId)) return
+
+    const selectedRow = placeRowRefs.current.get(props.selectedPlaceId)
+    if (!selectedRow) return
+    selectedRow.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    lastAutoScrolledPlaceIdRef.current = props.selectedPlaceId
+  }, [filtered, props.selectedPlaceId])
+
  const isAssignedToSelectedDay = (placeId) =>
    selectedDayId && (assignments[String(selectedDayId)] || []).some(a => a.place?.id === placeId)

@@ -210,11 +235,12 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {

  const openContextMenu = useCallback((e: React.MouseEvent, place: Place) => {
    const selDayId = selectedDayIdRef.current
+    const googleMapsUrl = getGoogleMapsUrlForPlace(place)
    ctxMenu.open(e, [
      canEditPlaces && { label: t('common.edit'), icon: Pencil, onClick: () => props.onEditPlace(place) },
      selDayId && { label: t('planner.addToDay'), icon: CalendarDays, onClick: () => props.onAssignToDay(place.id, selDayId) },
      place.website && { label: t('inspector.website'), icon: ExternalLink, onClick: () => window.open(place.website, '_blank') },
-      (place.lat && place.lng) && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(`https://www.google.com/maps/search/?api=1&query=${(place as any).google_place_id ? encodeURIComponent(place.name) + '&query_place_id=' + (place as any).google_place_id : place.lat + ',' + place.lng}`, '_blank') },
+      googleMapsUrl && { label: 'Google Maps', icon: Navigation, onClick: () => window.open(googleMapsUrl, '_blank') },
      { divider: true },
      canEditPlaces && { label: t('common.delete'), icon: Trash2, danger: true, onClick: () => props.onDeletePlace(place.id) },
    ])
@@ -234,7 +260,7 @@ export function usePlacesSidebar(props: PlacesSidebarProps) {
    selectMode, setSelectMode, selectedIds, setSelectedIds, pendingDeleteIds, setPendingDeleteIds,
    exitSelectMode, toggleSelected, toggleCategoryFilter, dayPickerPlace, setDayPickerPlace,
    catDropOpen, setCatDropOpen, mobileShowDays, setMobileShowDays,
-    hasTracks, plannedIds, filtered, isAssignedToSelectedDay, inDaySet, openContextMenu,
+    hasTracks, plannedIds, filtered, registerPlaceRow, isAssignedToSelectedDay, inDaySet, openContextMenu,
  }
 }

@@ -19,6 +19,7 @@ export default function AirTrailConnectionSection(): React.ReactElement {
  const [url, setUrl] = useState('')
  const [apiKey, setApiKey] = useState('')
  const [allowInsecureTls, setAllowInsecureTls] = useState(false)
+  const [writeEnabled, setWriteEnabled] = useState(false)
  const [connected, setConnected] = useState(false)
  const [loading, setLoading] = useState(true)
  const [saving, setSaving] = useState(false)
@@ -30,6 +31,7 @@ export default function AirTrailConnectionSection(): React.ReactElement {
      .then(d => {
        setUrl(d.url || '')
        setAllowInsecureTls(!!d.allowInsecureTls)
+        setWriteEnabled(!!d.writeEnabled)
        setConnected(!!d.connected)
      })
      .catch(() => {})
@@ -46,7 +48,7 @@ export default function AirTrailConnectionSection(): React.ReactElement {
  const handleSave = async () => {
    setSaving(true)
    try {
-      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, ...keyPayload() })
+      const d = await airtrailApi.saveSettings({ url: url.trim(), allowInsecureTls, writeEnabled, ...keyPayload() })
      const status = await airtrailApi.status().catch(() => ({ connected: false }))
      setConnected(!!status.connected)
      setApiKey('')
@@ -107,6 +109,14 @@ export default function AirTrailConnectionSection(): React.ReactElement {
          <span className="text-sm font-medium text-slate-700">{t('settings.airtrail.allowInsecureTls')}</span>
        </div>

+        <div>
+          <div className="flex items-center gap-3">
+            <ToggleSwitch on={writeEnabled} onToggle={() => setWriteEnabled(v => !v)} />
+            <span className="text-sm font-medium text-slate-700">{t('settings.airtrail.writeBack')}</span>
+          </div>
+          <p className="mt-1 text-xs text-slate-500">{t('settings.airtrail.writeBackHint')}</p>
+        </div>
+
        <div className="flex flex-wrap items-center gap-3">
          <button
            onClick={handleSave}
@@ -150,6 +150,22 @@ describe('DisplaySettingsTab', () => {
    expect(updateSetting).toHaveBeenCalledWith('temperature_unit', 'fahrenheit');
  });

+  it('FE-COMP-DISPLAY-028: metric distance button is active by default', () => {
+    seedStore(useSettingsStore, { settings: { temperature_unit: 'celsius' } });
+    render(<DisplaySettingsTab />);
+    const metricBtn = screen.getByText('km Metric').closest('button')!;
+    expect(metricBtn.style.border).toContain('var(--text-primary)');
+  });
+
+  it('FE-COMP-DISPLAY-029: clicking imperial distance calls updateSetting with imperial', async () => {
+    const user = userEvent.setup();
+    const updateSetting = vi.fn().mockResolvedValue(undefined);
+    seedStore(useSettingsStore, { settings: buildSettings({ distance_unit: 'metric' }), updateSetting });
+    render(<DisplaySettingsTab />);
+    await user.click(screen.getByText('mi Imperial'));
+    expect(updateSetting).toHaveBeenCalledWith('distance_unit', 'imperial');
+  });
+
  it('FE-COMP-DISPLAY-020: clicking 24h time format calls updateSetting with 24h', async () => {
    const user = userEvent.setup();
    const updateSetting = vi.fn().mockResolvedValue(undefined);
@@ -6,12 +6,14 @@ import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import { CURRENCIES, SYMBOLS } from '../Budget/BudgetPanel.constants'
 import Section from './Section'
+import type { DistanceUnit } from '../../types'

 export default function DisplaySettingsTab(): React.ReactElement {
  const { settings, updateSetting } = useSettingsStore()
  const { t } = useTranslation()
  const toast = useToast()
  const [tempUnit, setTempUnit] = useState<string>(settings.temperature_unit || 'celsius')
+  const [distanceUnit, setDistanceUnit] = useState<DistanceUnit>(settings.distance_unit || 'metric')
  const [langOpen, setLangOpen] = useState(false)
  const langDropdownRef = useRef<HTMLDivElement | null>(null)

@@ -28,6 +30,10 @@ export default function DisplaySettingsTab(): React.ReactElement {
    setTempUnit(settings.temperature_unit || 'celsius')
  }, [settings.temperature_unit])

+  useEffect(() => {
+    setDistanceUnit(settings.distance_unit || 'metric')
+  }, [settings.distance_unit])
+
  return (
    <Section title={t('settings.display')} icon={Palette}>
      {/* Display currency */}
@@ -200,6 +206,37 @@ export default function DisplaySettingsTab(): React.ReactElement {
        </div>
      </div>

+      {/* Distance */}
+      <div>
+        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.distance')}</label>
+        <div className="flex gap-3">
+          {([
+            { value: 'metric', label: 'km Metric' },
+            { value: 'imperial', label: 'mi Imperial' },
+          ] as const).map(opt => (
+            <button
+              key={opt.value}
+              onClick={async () => {
+                setDistanceUnit(opt.value)
+                try { await updateSetting('distance_unit', 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: distanceUnit === opt.value ? '2px solid var(--text-primary)' : '2px solid var(--border-primary)',
+                background: distanceUnit === opt.value ? 'var(--bg-hover)' : 'var(--bg-card)',
+                color: 'var(--text-primary)',
+                transition: 'all 0.15s',
+              }}
+            >
+              {opt.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
      {/* Time Format */}
      <div>
        <label className="block text-sm font-medium mb-2 text-content-secondary">{t('settings.timeFormat')}</label>
@@ -1,14 +1,22 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
-import { Map, Save, Layers, Box, ChevronDown, Check } from 'lucide-react'
+import { Map, Save, Layers, Box, ChevronDown, Check, Globe2 } from 'lucide-react'
 import { useTranslation } from '../../i18n'
 import { useSettingsStore } from '../../store/settingsStore'
 import { useToast } from '../shared/Toast'
 import CustomSelect from '../shared/CustomSelect'
 import { MapView } from '../Map/MapView'
-import MapboxPreview from './MapboxPreview'
+import GlMapPreview from './MapboxPreview'
 import Section from './Section'
 import ToggleSwitch from './ToggleSwitch'
 import type { Place } from '../../types'
+import {
+  MAPBOX_DEFAULT_STYLE,
+  defaultStyleForProvider,
+  getStylePresets,
+  isOpenFreeMapStyle,
+  normalizeStyleForProvider,
+  type GlMapProvider,
+} from '../Map/glProviders'

 interface MapPreset {
  name: string
@@ -23,25 +31,6 @@ const MAP_PRESETS: MapPreset[] = [
  { name: 'Stadia Smooth', url: 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png' },
 ]

-interface StylePreset {
-  name: string
-  url: string
-  tags: string[]
-}
-
-const MAPBOX_STYLE_PRESETS: StylePreset[] = [
-  { name: 'Mapbox Standard',          url: 'mapbox://styles/mapbox/standard',            tags: ['3D', 'Apple-like'] },
-  { name: 'Standard Satellite',       url: 'mapbox://styles/mapbox/standard-satellite',  tags: ['3D', 'Satellite'] },
-  { name: 'Streets',                  url: 'mapbox://styles/mapbox/streets-v12',         tags: ['3D', 'Classic'] },
-  { name: 'Outdoors',                 url: 'mapbox://styles/mapbox/outdoors-v12',        tags: ['3D', 'Terrain'] },
-  { name: 'Light',                    url: 'mapbox://styles/mapbox/light-v11',           tags: ['3D', 'Minimal'] },
-  { name: 'Dark',                     url: 'mapbox://styles/mapbox/dark-v11',            tags: ['3D', 'Dark'] },
-  { name: 'Satellite',                url: 'mapbox://styles/mapbox/satellite-v9',        tags: ['3D', 'Satellite'] },
-  { name: 'Satellite Streets',        url: 'mapbox://styles/mapbox/satellite-streets-v12', tags: ['3D', 'Satellite'] },
-  { name: 'Navigation Day',           url: 'mapbox://styles/mapbox/navigation-day-v1',   tags: ['3D', 'Apple-like'] },
-  { name: 'Navigation Night',         url: 'mapbox://styles/mapbox/navigation-night-v1', tags: ['3D', 'Dark'] },
-]
-
 // Tag → chip color mapping. Keeps the dropdown readable at a glance so a
 // user scanning the list can spot 3D / Satellite / Apple-like styles.
 const TAG_STYLES: Record<string, string> = {
@@ -59,6 +48,7 @@ const TAG_STYLES: Record<string, string> = {
  'Classic': 'bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300',
  'Hybrid': 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900/40 dark:text-cyan-300',
  'No labels': 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
+  'OpenFreeMap': 'bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300',
 }

 function TagChip({ tag }: { tag: string }) {
@@ -70,10 +60,11 @@ function TagChip({ tag }: { tag: string }) {
  )
 }

-function StyleDropdown({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+function StyleDropdown({ value, provider, onChange }: { value: string; provider: GlMapProvider; onChange: (v: string) => void }) {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
+  const presets = getStylePresets(provider)

  useEffect(() => {
    if (!open) return
@@ -84,7 +75,10 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
    return () => document.removeEventListener('mousedown', onDoc)
  }, [open])

-  const selected = MAPBOX_STYLE_PRESETS.find(p => p.url === value)
+  const selected = presets.find(p => p.url === value)
+  const placeholder = provider === 'maplibre-gl'
+    ? t('settings.mapOpenFreeMapStylePlaceholder')
+    : t('settings.mapStylePlaceholder')

  return (
    <div ref={ref} className="relative">
@@ -95,11 +89,11 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
      >
        <span className="flex items-center gap-2 min-w-0">
          <span className="text-slate-900 dark:text-white truncate">
-            {selected ? selected.name : t('settings.mapStylePlaceholder')}
+            {selected ? selected.name : placeholder}
          </span>
          {selected && (
            <span className="flex items-center gap-1 flex-shrink-0">
-              {selected.tags.map(t => <TagChip key={t} tag={t} />)}
+              {(selected.tags || []).map(t => <TagChip key={t} tag={t} />)}
            </span>
          )}
        </span>
@@ -107,7 +101,7 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
      </button>
      {open && (
        <div className="absolute z-20 mt-1 w-full max-h-80 overflow-auto rounded-lg border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-lg py-1">
-          {MAPBOX_STYLE_PRESETS.map(preset => {
+          {presets.map(preset => {
            const isActive = preset.url === value
            return (
              <button
@@ -118,7 +112,7 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
              >
                <span className="flex items-center gap-2 flex-wrap">
                  <span className="text-slate-900 dark:text-white font-medium">{preset.name}</span>
-                  {preset.tags.map(t => <TagChip key={t} tag={t} />)}
+                  {(preset.tags || []).map(t => <TagChip key={t} tag={t} />)}
                </span>
                {isActive && <Check size={14} className="flex-shrink-0 text-slate-900 dark:text-white" />}
              </button>
@@ -130,17 +124,34 @@ function StyleDropdown({ value, onChange }: { value: string; onChange: (v: strin
  )
 }

-type Provider = 'leaflet' | 'mapbox-gl'
+type Provider = 'leaflet' | GlMapProvider
+
+function normalizeProvider(value: unknown): Provider {
+  return value === 'mapbox-gl' || value === 'maplibre-gl' ? value : 'leaflet'
+}
+
+function styleForProvider(provider: Provider, style?: string | null): string {
+  if (provider === 'leaflet') return style || MAPBOX_DEFAULT_STYLE
+  if (provider === 'mapbox-gl' && isOpenFreeMapStyle(style)) return MAPBOX_DEFAULT_STYLE
+  return normalizeStyleForProvider(provider, style)
+}
+
+// Each GL provider has its own style slot, so toggling providers never clobbers the
+// other one's style. Leaflet/Mapbox use mapbox_style; MapLibre uses maplibre_style.
+function slotStyle(provider: Provider, s: { mapbox_style?: string; maplibre_style?: string }): string | undefined {
+  return provider === 'maplibre-gl' ? s.maplibre_style : s.mapbox_style
+}

 export default function MapSettingsTab(): React.ReactElement {
  const { settings, updateSettings } = useSettingsStore()
  const { t } = useTranslation()
  const toast = useToast()
+  const initialProvider = normalizeProvider(settings.map_provider)
  const [saving, setSaving] = useState(false)
-  const [provider, setProvider] = useState<Provider>((settings.map_provider as Provider) || 'leaflet')
+  const [provider, setProvider] = useState<Provider>(initialProvider)
  const [mapTileUrl, setMapTileUrl] = useState<string>(settings.map_tile_url || '')
  const [mapboxToken, setMapboxToken] = useState<string>(settings.mapbox_access_token || '')
-  const [mapboxStyle, setMapboxStyle] = useState<string>(settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+  const [mapboxStyle, setMapboxStyle] = useState<string>(styleForProvider(initialProvider, slotStyle(initialProvider, settings)))
  const [mapbox3d, setMapbox3d] = useState<boolean>(settings.mapbox_3d_enabled !== false)
  const [mapboxQuality, setMapboxQuality] = useState<boolean>(settings.mapbox_quality_mode === true)
  const [defaultLat, setDefaultLat] = useState<number | string>(settings.default_lat || 48.8566)
@@ -148,10 +159,11 @@ export default function MapSettingsTab(): React.ReactElement {
  const [defaultZoom, setDefaultZoom] = useState<number | string>(settings.default_zoom || 10)

  useEffect(() => {
-    setProvider((settings.map_provider as Provider) || 'leaflet')
+    const nextProvider = normalizeProvider(settings.map_provider)
+    setProvider(nextProvider)
    setMapTileUrl(settings.map_tile_url || '')
    setMapboxToken(settings.mapbox_access_token || '')
-    setMapboxStyle(settings.mapbox_style || 'mapbox://styles/mapbox/standard')
+    setMapboxStyle(styleForProvider(nextProvider, slotStyle(nextProvider, settings)))
    setMapbox3d(settings.mapbox_3d_enabled !== false)
    setMapboxQuality(settings.mapbox_quality_mode === true)
    setDefaultLat(settings.default_lat || 48.8566)
@@ -186,11 +198,15 @@ export default function MapSettingsTab(): React.ReactElement {
  const saveMapSettings = async (): Promise<void> => {
    setSaving(true)
    try {
+      const glStyle = provider === 'leaflet' ? mapboxStyle : normalizeStyleForProvider(provider, mapboxStyle)
+      setMapboxStyle(glStyle)
+      // Save into the active provider's own slot so the other provider's style survives.
+      const stylePatch = provider === 'maplibre-gl' ? { maplibre_style: glStyle } : { mapbox_style: glStyle }
      await updateSettings({
        map_provider: provider,
        map_tile_url: mapTileUrl,
        mapbox_access_token: mapboxToken,
-        mapbox_style: mapboxStyle,
+        ...stylePatch,
        mapbox_3d_enabled: mapbox3d,
        mapbox_quality_mode: mapboxQuality,
        default_lat: parseFloat(String(defaultLat)),
@@ -208,16 +224,20 @@ export default function MapSettingsTab(): React.ReactElement {
  // 3D is available on every style now — pure satellite uses the
  // mapbox-streets-v8 tileset as a fallback building source.
  const supports3d = true
+  const changeProvider = (nextProvider: Provider) => {
+    setProvider(nextProvider)
+    if (nextProvider !== 'leaflet') setMapboxStyle(styleForProvider(nextProvider, mapboxStyle))
+  }

  return (
    <Section title={t('settings.map')} icon={Map}>
      {/* Provider picker — big cards so the choice is obvious */}
      <div>
        <label className="block text-sm font-medium text-slate-700 mb-2">{t('settings.mapProvider')}</label>
-        <div className="grid grid-cols-2 gap-2">
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-2">
          <button
            type="button"
-            onClick={() => setProvider('leaflet')}
+            onClick={() => changeProvider('leaflet')}
            className={`flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
              provider === 'leaflet'
                ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
@@ -232,7 +252,7 @@ export default function MapSettingsTab(): React.ReactElement {
          </button>
          <button
            type="button"
-            onClick={() => setProvider('mapbox-gl')}
+            onClick={() => changeProvider('mapbox-gl')}
            className={`relative flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
              provider === 'mapbox-gl'
                ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
@@ -252,6 +272,24 @@ export default function MapSettingsTab(): React.ReactElement {
              {t('settings.mapExperimental')}
            </span>
          </button>
+          <button
+            type="button"
+            onClick={() => changeProvider('maplibre-gl')}
+            className={`relative flex items-start gap-3 p-3 rounded-lg border text-left transition-colors ${
+              provider === 'maplibre-gl'
+                ? 'border-slate-900 bg-slate-50 dark:bg-slate-800 dark:border-slate-200'
+                : 'border-slate-200 hover:border-slate-400 dark:border-slate-700'
+            }`}
+          >
+            <Globe2 size={18} className="mt-0.5 flex-shrink-0 text-slate-700 dark:text-slate-300" />
+            <div className="min-w-0">
+              <div className="text-sm font-medium text-slate-900 dark:text-white">
+                <span className="sm:hidden">MapLibre</span>
+                <span className="hidden sm:inline">MapLibre GL</span>
+              </div>
+              <div className="hidden sm:block text-xs text-slate-500 mt-0.5">{t('settings.mapMapLibreSubtitle')}</div>
+            </div>
+          </button>
        </div>
        <p className="text-xs text-slate-400 mt-2">
          {t('settings.mapProviderHint')}
@@ -281,9 +319,10 @@ export default function MapSettingsTab(): React.ReactElement {
        </div>
      )}

-      {/* Mapbox GL settings */}
-      {provider === 'mapbox-gl' && (
+      {/* GL settings */}
+      {provider !== 'leaflet' && (
        <div className="space-y-3">
+          {provider === 'mapbox-gl' && (
          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapMapboxToken')}</label>
            <input
@@ -300,24 +339,27 @@ export default function MapSettingsTab(): React.ReactElement {
              </a>
            </p>
          </div>
+          )}

          <div>
            <label className="block text-sm font-medium text-slate-700 mb-1.5">{t('settings.mapStyle')}</label>
            <div className="mb-2">
-              <StyleDropdown value={mapboxStyle} onChange={setMapboxStyle} />
+              <StyleDropdown value={mapboxStyle} provider={provider} onChange={setMapboxStyle} />
            </div>
            <input
              type="text"
              value={mapboxStyle}
              onChange={(e) => setMapboxStyle(e.target.value)}
-              placeholder="mapbox://styles/mapbox/standard"
+              placeholder={defaultStyleForProvider(provider)}
              className="w-full px-3 py-2 border border-slate-300 rounded-lg text-sm font-mono focus:ring-2 focus:ring-slate-400 focus:border-transparent"
            />
            <p className="text-xs text-slate-400 mt-1">
-              {t('settings.mapStyleHint')}
+              {provider === 'maplibre-gl' ? t('settings.mapOpenFreeMapStyleHint') : t('settings.mapStyleHint')}
            </p>
          </div>

+          {provider === 'mapbox-gl' && (
+          <>
          <div className={`flex items-start gap-3 p-3 rounded-lg border transition-colors ${
            supports3d
              ? 'border-slate-200 dark:border-slate-700'
@@ -354,6 +396,8 @@ export default function MapSettingsTab(): React.ReactElement {
          <div className="text-xs text-slate-400 p-3 rounded-lg bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700">
            <strong className="text-slate-600 dark:text-slate-300">{t('settings.mapTipLabel')}</strong> {t('settings.mapTip')}
          </div>
+          </>
+          )}
        </div>
      )}

@@ -383,8 +427,9 @@ export default function MapSettingsTab(): React.ReactElement {

      <div>
        <div style={{ position: 'relative', inset: 0, height: '200px', width: '100%' }}>
-          {provider === 'mapbox-gl' ? (
-            <MapboxPreview
+          {provider !== 'leaflet' ? (
+            <GlMapPreview
+              provider={provider}
              token={mapboxToken}
              style={mapboxStyle}
              lat={parseFloat(String(defaultLat)) || 48.8566}
@@ -392,8 +437,8 @@ export default function MapSettingsTab(): React.ReactElement {
              // Zoom in close so the style's character (3D buildings,
              // satellite texture, label density) is immediately visible.
              zoom={Math.max(parseInt(String(defaultZoom)) || 10, 16)}
-              enable3d={mapbox3d && supports3d}
-              quality={mapboxQuality}
+              enable3d={provider === 'mapbox-gl' && mapbox3d && supports3d}
+              quality={provider === 'mapbox-gl' && mapboxQuality}
              onClick={(ll) => { setDefaultLat(ll.lat); setDefaultLng(ll.lng) }}
            />
          ) : (
@@ -1,10 +1,14 @@
 import { useEffect, useRef } from 'react'
 import mapboxgl from 'mapbox-gl'
+import maplibregl from 'maplibre-gl'
 import 'mapbox-gl/dist/mapbox-gl.css'
+import 'maplibre-gl/dist/maplibre-gl.css'
 import { isStandardFamily, supportsCustom3d, addCustom3dBuildings, addTerrainAndSky } from '../Map/mapboxSetup'
+import { MAPBOX_DEFAULT_STYLE, normalizeStyleForProvider, type GlMapProvider } from '../Map/glProviders'

 interface Props {
-  token: string
+  provider?: GlMapProvider
+  token?: string
  style: string
  lat: number
  lng: number
@@ -14,37 +18,44 @@ interface Props {
  onClick?: (latlng: { lat: number; lng: number }) => void
 }

-export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d, quality = false, onClick }: Props) {
+export default function GlMapPreview({ provider = 'mapbox-gl', token = '', style, lat, lng, zoom, enable3d, quality = false, onClick }: Props) {
  const containerRef = useRef<HTMLDivElement>(null)
-  const mapRef = useRef<mapboxgl.Map | null>(null)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const mapRef = useRef<any | null>(null)
  const onClickRef = useRef(onClick)
  onClickRef.current = onClick
+  const isMapLibre = provider === 'maplibre-gl'
+  const gl = (isMapLibre ? maplibregl : mapboxgl) as any
+  const glStyle = normalizeStyleForProvider(provider, style)
+  const enableMapbox3d = !isMapLibre && enable3d

  useEffect(() => {
-    if (!containerRef.current || !token) return
-    mapboxgl.accessToken = token
+    if (!containerRef.current || (!isMapLibre && !token)) return
+    if (!isMapLibre) mapboxgl.accessToken = token

-    const map = new mapboxgl.Map({
+    const mapOptions: Record<string, unknown> = {
      container: containerRef.current,
-      style,
+      style: glStyle,
      center: [lng, lat],
      zoom,
-      pitch: enable3d ? 45 : 0,
+      pitch: enableMapbox3d ? 45 : 0,
      attributionControl: true,
      antialias: quality,
-      projection: quality ? 'globe' : 'mercator',
-    })
+    }
+    if (!isMapLibre) mapOptions.projection = quality ? 'globe' : 'mercator'
+
+    const map = new gl.Map(mapOptions as any)
    mapRef.current = map

    map.on('load', () => {
-      if (enable3d) {
-        if (!isStandardFamily(style)) addTerrainAndSky(map)
-        if (supportsCustom3d(style)) {
+      if (enableMapbox3d) {
+        if (!isStandardFamily(glStyle)) addTerrainAndSky(map)
+        if (supportsCustom3d(glStyle)) {
          const dark = document.documentElement.classList.contains('dark')
          addCustom3dBuildings(map, dark)
        }
      }
-      if (style === 'mapbox://styles/mapbox/standard') {
+      if (glStyle === MAPBOX_DEFAULT_STYLE) {
        try { map.setTerrain(null) } catch { /* noop */ }
      }
    })
@@ -57,7 +68,7 @@ export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d,
      try { map.remove() } catch { /* noop */ }
      mapRef.current = null
    }
-  }, [token, style, enable3d, quality])
+  }, [provider, token, glStyle, enableMapbox3d, quality])

  // Recenter without rebuilding the map when lat/lng/zoom change externally
  useEffect(() => {
@@ -65,7 +76,7 @@ export default function MapboxPreview({ token, style, lat, lng, zoom, enable3d,
    try { mapRef.current.jumpTo({ center: [lng, lat], zoom }) } catch { /* noop */ }
  }, [lat, lng, zoom])

-  if (!token) {
+  if (!isMapLibre && !token) {
    return (
      <div className="flex items-center justify-center h-full bg-slate-100 dark:bg-slate-800 text-xs text-slate-500 rounded-lg border border-slate-200 dark:border-slate-700">
        Enter a Mapbox access token to preview
@@ -69,7 +69,7 @@ export default function VacayCalendar() {

  return (
    <div>
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3 pb-14">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3" style={{ paddingBottom: 'calc(var(--bottom-nav-h, 0px) + 80px)' }}>
        {Array.from({ length: 12 }, (_, i) => (
          <VacayMonthCard
            key={i}
@@ -89,8 +89,8 @@ export default function VacayCalendar() {
        ))}
      </div>

-      {/* Floating toolbar */}
-      <div className="sticky bottom-3 sm:bottom-4 mt-3 sm:mt-4 flex items-center justify-center z-30 px-2">
+      {/* Floating toolbar — lift above the mobile bottom nav (z-60). On desktop --bottom-nav-h is 0px. */}
+      <div className="sticky mt-3 sm:mt-4 flex items-center justify-center px-2" style={{ bottom: 'calc(var(--bottom-nav-h, 0px) + 12px)', zIndex: 61 }}>
        <div className="flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-xl border bg-surface-card border-edge" style={{ boxShadow: '0 8px 32px rgba(0,0,0,0.12)' }}>
          <button
            onClick={() => setCompanyMode(false)}
@@ -102,7 +102,9 @@ export function ToastContainer() {
      `}</style>
      <div style={{
        position: 'fixed', bottom: 24, left: '50%', transform: 'translateX(-50%)',
-        zIndex: 9999, display: 'flex', flexDirection: 'column-reverse', gap: 8,
+        // Above modal overlays (which sit around z-index 10000 with a backdrop-filter
+        // blur) so error toasts paint on top and stay legible instead of blurred behind.
+        zIndex: 100000, display: 'flex', flexDirection: 'column-reverse', gap: 8,
        pointerEvents: 'none', maxWidth: 420, width: '100%', padding: '0 16px',
      }}>
        {toasts.map(toast => (
@@ -1,23 +1,33 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from 'react'
 import { useTripStore } from '../store/tripStore'
-import { calculateRouteWithLegs } from '../components/Map/RouteCalculator'
+import { useSettingsStore } from '../store/settingsStore'
+import { calculateRouteWithLegs, withHotelBookends } from '../components/Map/RouteCalculator'
 import { getTransportRouteEndpoints } from '../utils/dayMerge'
+import { getDayBookendHotels } from '../utils/dayOrder'
 import type { TripStoreState } from '../store/tripStore'
-import type { RouteSegment, RouteResult } from '../types'
+import type { RouteSegment, RouteResult, Accommodation } from '../types'

 const TRANSPORT_TYPES = ['flight', 'train', 'bus', 'car', 'taxi', 'bicycle', 'cruise', 'ferry', 'transport_other']

+const NO_ACCOMMODATIONS: Accommodation[] = []
+
 /**
 * Manages route calculation state for a selected day. Extracts geo-coded waypoints from
 * day assignments, draws a straight-line route immediately, then upgrades it to real OSRM
 * road geometry with per-segment durations. Aborts in-flight requests when the day changes.
 */
-export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null, enabled: boolean = true, profile: 'driving' | 'walking' | 'cycling' = 'driving') {
+export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: number | null, enabled: boolean = true, profile: 'driving' | 'walking' | 'cycling' = 'driving', accommodations: Accommodation[] = NO_ACCOMMODATIONS) {
  const [route, setRoute] = useState<[number, number][][] | null>(null)
  const [routeInfo, setRouteInfo] = useState<RouteResult | null>(null)
  const [routeSegments, setRouteSegments] = useState<RouteSegment[]>([])
  const routeAbortRef = useRef<AbortController | null>(null)
  const reservationsForSignature = useTripStore((s) => s.reservations)
+  // Draw the day's accommodation bookend legs (hotel → first stop, last stop →
+  // hotel) unless the user turned the setting off — same gate as the sidebar.
+  const optimizeFromAccommodation = useSettingsStore((s) => s.settings.optimize_from_accommodation)
+  // Recompute when the user flips km↔mi so leg distances (formatted at compute time)
+  // refresh instead of showing stale cached text (#1300).
+  const distanceUnit = useSettingsStore((s) => s.settings.distance_unit)

  const updateRouteForDay = useCallback(async (dayId: number | null) => {
    if (routeAbortRef.current) routeAbortRef.current.abort()
@@ -93,10 +103,44 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
    }
    if (currentRun.length >= 2) runs.push(currentRun)

-    const straightLines = (): [number, number][][] =>
-      runs.map(r => r.map(p => [p.lat, p.lng] as [number, number]))
+    // Bookend the route with the day's accommodation: a hotel → first-stop run and
+    // a last-stop → hotel run, so the drawn line matches the sidebar's hotel legs.
+    // getDayBookendHotels returns the morning/evening hotel (they differ only on a
+    // transfer day) and already filters to accommodations that have coordinates.
+    const day = allDays.find(d => d.id === dayId)
+    const bookends = day && optimizeFromAccommodation !== false
+      ? getDayBookendHotels(day, allDays, accommodations)
+      : null
+    const flatPts: { lat: number; lng: number }[] = []
+    for (const e of entries) {
+      if (e.kind === 'place') flatPts.push({ lat: e.lat, lng: e.lng })
+      else { if (e.from) flatPts.push(e.from); if (e.to) flatPts.push(e.to) }
+    }
+    const hotelPt = (a?: Accommodation) =>
+      a && a.place_lat != null && a.place_lng != null ? { lat: a.place_lat, lng: a.place_lng } : null
+    // Only draw a hotel bookend when the leg is real. A hotel → first-stop leg holds
+    // if the first stop is a place, or if you actually slept in that hotel last night;
+    // on a day-1 arrival the morning hotel is just a check-in fallback and the first
+    // waypoint is the transport's departure point, so [hotel → departure] is dropped
+    // (#1321). Symmetrically, [last-stop → hotel] is dropped when you leave on a transport
+    // in the evening and don't sleep in that hotel tonight.
+    const contributes = (e: Entry) => e.kind === 'place' || !!e.from || !!e.to
+    const firstStop = entries.find(contributes)
+    const lastStop = [...entries].reverse().find(contributes)
+    const drawMorning = firstStop?.kind === 'place' || !!bookends?.morningIsSleptHere
+    const drawEvening = lastStop?.kind === 'place' || !!bookends?.eveningIsOvernight
+    const runsWithHotel = withHotelBookends(
+      runs,
+      flatPts[0],
+      flatPts[flatPts.length - 1],
+      drawMorning ? hotelPt(bookends?.morning) : null,
+      drawEvening ? hotelPt(bookends?.evening) : null,
+    )

-    if (runs.length === 0) { setRoute(null); setRouteSegments([]); return }
+    const straightLines = (): [number, number][][] =>
+      runsWithHotel.map(r => r.map(p => [p.lat, p.lng] as [number, number]))
+
+    if (runsWithHotel.length === 0) { setRoute(null); setRouteSegments([]); return }

    // Draw straight lines immediately for snappiness, then upgrade to the real
    // OSRM road geometry.
@@ -107,7 +151,7 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
    try {
      const polylines: [number, number][][] = []
      const allLegs: RouteSegment[] = []
-      for (const run of runs) {
+      for (const run of runsWithHotel) {
        try {
          const r = await calculateRouteWithLegs(run, { signal: controller.signal, profile })
          polylines.push(r.coordinates.length >= 2 ? r.coordinates : run.map(p => [p.lat, p.lng] as [number, number]))
@@ -123,7 +167,7 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
      // Aborted (day changed) — newer call owns the state. Anything else: keep straight lines.
      if (!(err instanceof Error) || err.name !== 'AbortError') setRouteSegments([])
    }
-  }, [enabled, profile])
+  }, [enabled, profile, accommodations, optimizeFromAccommodation, distanceUnit])

  // Stable signature for transport reservations on the selected day — changes when a transport
  // is added, removed, or repositioned, ensuring route recalc fires even on transport-only reorders.
@@ -147,7 +191,7 @@ export function useRouteCalculation(tripStore: TripStoreState, selectedDayId: nu
    if (!selectedDayId) { setRoute(null); setRouteSegments([]); return }
    updateRouteForDay(selectedDayId)
  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedDayId, selectedDayAssignments, transportSignature, enabled, profile])
+  }, [selectedDayId, selectedDayAssignments, transportSignature, enabled, profile, accommodations, optimizeFromAccommodation, distanceUnit])

  return { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay }
 }
@@ -37,6 +37,7 @@ const localeLoaders: Record<SupportedLanguageCode, () => Promise<{ default: Tran
  ko:      () => import('@trek/shared/i18n/ko'),
  uk:      () => import('@trek/shared/i18n/uk'),
  gr:      () => import('@trek/shared/i18n/gr'),
+  sv:      () => import('@trek/shared/i18n/sv'),
 }

 // Re-export pure helpers that live in shared so downstream consumers can import them
@@ -35,17 +35,19 @@ 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.
+/* 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 {
+.trek-map-popup .mapboxgl-popup-content,
+.trek-map-popup .maplibregl-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 {
+.trek-map-popup .mapboxgl-popup-tip,
+.trek-map-popup .maplibregl-popup-tip {
  border-top-color: #fff;
  border-bottom-color: #fff;
  border-left-color: #fff;
@@ -6,6 +6,7 @@ import CustomSelect from '../components/shared/CustomSelect'
 import { Globe, MapPin, Briefcase, Calendar, Flag, PanelLeftOpen, PanelLeftClose, X, Star, Plus, Trash2, Search } from 'lucide-react'
 import type { TranslationFn } from '../types'
 import { A2_TO_A3, countryCodeToFlag, type AtlasCountry, type AtlasStats, type AtlasData, type CountryDetail } from './atlas/atlasModel'
+import { continentForCountry } from '@trek/shared'
 import { useAtlas } from './atlas/useAtlas'
 import AtlasCountrySearch from './atlas/AtlasCountrySearch'
 import { useToast } from '../components/shared/Toast'
@@ -212,7 +213,8 @@ export default function AtlasPage(): React.ReactElement {
                    await apiClient.post(`/addons/atlas/country/${confirmAction.code}/mark`)
                    setData(prev => {
                      if (!prev || prev.countries.find(c => c.code === confirmAction.code)) return prev
-                      return { ...prev, countries: [...prev.countries, { code: confirmAction.code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 } }
+                      const cont = continentForCountry(confirmAction.code)
+                      return { ...prev, countries: [...prev.countries, { code: confirmAction.code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 }, continents: { ...prev.continents, [cont]: (prev.continents?.[cont] || 0) + 1 } }
                    })
                  } catch (err) {
                    toast.error(getApiErrorMessage(err, t('common.error')))
@@ -260,7 +262,8 @@ export default function AtlasPage(): React.ReactElement {
                    })
                    setData(prev => {
                      if (!prev || prev.countries.find(c => c.code === countryCode)) return prev
-                      return { ...prev, countries: [...prev.countries, { code: countryCode, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 } }
+                      const cont = continentForCountry(countryCode)
+                      return { ...prev, countries: [...prev.countries, { code: countryCode, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }], stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 }, continents: { ...prev.continents, [cont]: (prev.continents?.[cont] || 0) + 1 } }
                    })
                  } catch (err) {
                    toast.error(getApiErrorMessage(err, t('common.error')))
@@ -339,10 +342,12 @@ export default function AtlasPage(): React.ReactElement {
                        if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
                        const remainingRegions = (visitedRegions[countryCode] || []).filter(r => r.code !== rCode && r.manuallyMarked)
                        if (remainingRegions.length > 0) return prev
+                        const cont = continentForCountry(countryCode)
                        return {
                          ...prev,
                          countries: prev.countries.filter(c => c.code !== countryCode),
                          stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
+                          continents: { ...prev.continents, [cont]: Math.max(0, (prev.continents?.[cont] || 0) - 1) },
                        }
                      })
                    } catch (err) {
@@ -4,9 +4,10 @@ import userEvent from '@testing-library/user-event';
 import { http, HttpResponse } from 'msw';
 import { server } from '../../tests/helpers/msw/server';
 import { resetAllStores, seedStore } from '../../tests/helpers/store';
-import { buildUser, buildAdmin, buildTrip } from '../../tests/helpers/factories';
+import { buildUser, buildAdmin, buildTrip, buildSettings } from '../../tests/helpers/factories';
 import { useAuthStore } from '../store/authStore';
 import { usePermissionsStore } from '../store/permissionsStore';
+import { useSettingsStore } from '../store/settingsStore';
 import DashboardPage from './DashboardPage';

 beforeEach(() => {
@@ -798,10 +799,51 @@ describe('DashboardPage', () => {
    });
  });

+  describe('FE-PAGE-DASH-033: Atlas distance respects distance unit setting', () => {
+    const distanceValue = (text: string) =>
+      screen.getByText((_, element) =>
+        element?.classList.contains('value') === true &&
+        element.textContent?.replace(/\s+/g, ' ').trim() === text
+      );
+
+    beforeEach(() => {
+      server.use(
+        http.get('/api/auth/travel-stats', () =>
+          HttpResponse.json({
+            totalTrips: 1,
+            totalDays: 1,
+            totalPlaces: 1,
+            totalDistanceKm: 10,
+            countries: [],
+          })
+        ),
+      );
+    });
+
+    it('renders metric atlas distance as kilometers', async () => {
+      seedStore(useSettingsStore, { settings: buildSettings({ distance_unit: 'metric' }) });
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(distanceValue('10 km')).toBeInTheDocument();
+      });
+    });
+
+    it('renders imperial atlas distance as miles', async () => {
+      seedStore(useSettingsStore, { settings: buildSettings({ distance_unit: 'imperial' }) });
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(distanceValue('6.2 mi')).toBeInTheDocument();
+      });
+    });
+  });
+
  describe('FE-PAGE-DASH-032: Dark mode detection uses window.matchMedia', () => {
    it('renders without error when dark_mode is set to auto', async () => {
      // Seed settings with dark_mode = 'auto' to exercise the matchMedia branch
-      const { useSettingsStore } = await import('../store/settingsStore');
      seedStore(useSettingsStore, {
        settings: {
          map_tile_url: '',
@@ -812,6 +854,7 @@ describe('DashboardPage', () => {
          default_currency: 'USD',
          language: 'en',
          temperature_unit: 'fahrenheit',
+          distance_unit: 'metric',
          time_format: '12h',
          show_place_description: false,
          blur_booking_codes: false,
@@ -18,6 +18,9 @@ import {
  Plane, Hotel, Utensils, Clock, RefreshCw, ArrowRightLeft, Calendar,
  LayoutGrid, List, Ticket, X,
 } from 'lucide-react'
+import { formatTime, splitReservationDateTime } from '../utils/formatters'
+import { convertDistance, getDistanceUnitLabel } from '../utils/units'
+import { useSettingsStore } from '../store/settingsStore'
 import '../styles/dashboard.css'

 const GRADIENTS = [
@@ -36,6 +39,7 @@ function tripGradient(id: number): string { return GRADIENTS[id % GRADIENTS.leng
 function splitDate(dateStr: string | null | undefined, locale: string): { d: string; m: string } | null {
  if (!dateStr) return null
  const date = new Date(dateStr + 'T00:00:00Z')
+  if (isNaN(date.getTime())) return null // malformed date — render a dash, never crash
  return {
    d: date.toLocaleDateString(locale, { day: 'numeric', timeZone: 'UTC' }),
    m: date.toLocaleDateString(locale, { month: 'short', timeZone: 'UTC' }),
@@ -81,6 +85,7 @@ export default function DashboardPage(): React.ReactElement {
  const {
    demoMode, locale, t, navigate,
    spotlight, heroBundle, stats, upcoming, gridTrips, isLoading,
+    loadError, retryLoad,
    tripFilter, setTripFilter, viewMode, toggleViewMode,
    showForm, setShowForm, editingTrip, setEditingTrip,
    deleteTrip, setDeleteTrip, copyTrip, setCopyTrip, setTrips,
@@ -99,6 +104,15 @@ export default function DashboardPage(): React.ReactElement {
        <MobileTopBar />
        <main className="page">
          <div className="page-main">
+            {loadError && (
+              <div className="dash-error" role="alert">
+                <span className="dash-error-txt">{t('dashboard.loadErrorBanner')}</span>
+                <button className="dash-error-retry" onClick={retryLoad}>
+                  <RefreshCw size={15} />
+                  {t('dashboard.retry')}
+                </button>
+              </div>
+            )}
            {spotlight && (
              <BoardingPassHero
                trip={spotlight}
@@ -129,6 +143,13 @@ export default function DashboardPage(): React.ReactElement {
                </div>
              </div>

+              {gridTrips.length === 0 && tripFilter === 'planned' && !isLoading && !loadError && (
+                <div className="trips-empty">
+                  <h4>{t('dashboard.emptyTitle')}</h4>
+                  <p>{t('dashboard.emptyText')}</p>
+                </div>
+              )}
+
              <div className={`trips${viewMode === 'list' ? ' list-view' : ''}`}>
                {gridTrips.map(trip => (
                  <TripCard
@@ -338,12 +359,27 @@ function BoardingPassHero({ trip, bundle, locale, onOpen, onEdit, onCopy, onArch
 }

 // ── Atlas / stats row ────────────────────────────────────────────────────────
+function formatCompactDistance(value: number): string {
+  const safeValue = Number.isFinite(value) ? Math.max(0, value) : 0
+  // String() keeps a '.' decimal regardless of locale (no "1,5k" in non-English UIs).
+  if (safeValue >= 1000) {
+    return `${String(Math.round(safeValue / 100) / 10)}k`
+  }
+  const rounded = Math.round(safeValue * 10) / 10
+  if (safeValue > 0 && rounded === 0) return '<0.1'
+  return String(rounded)
+}
+
 function AtlasStats({ stats }: { stats: TravelStats | null }): React.ReactElement {
  const { t } = useTranslation()
+  const distanceUnit = useSettingsStore(s => s.settings.distance_unit) || 'metric'
  const countries = stats?.countries || []
  const distanceKm = stats?.totalDistanceKm || 0
-  const distanceText = distanceKm >= 1000 ? `${(distanceKm / 1000).toFixed(1)}k` : String(distanceKm)
-  const equatorTimes = (distanceKm / 40075).toFixed(2)
+  const distance = convertDistance(distanceKm, distanceUnit)
+  const distanceText = formatCompactDistance(distance)
+  const equatorDistance = convertDistance(40075, distanceUnit)
+  const equatorTimes = (distance / equatorDistance).toFixed(2)
+  const distanceLabel = getDistanceUnitLabel(distanceUnit)

  return (
    <section className="atlas">
@@ -381,7 +417,7 @@ function AtlasStats({ stats }: { stats: TravelStats | null }): React.ReactElemen

      <div className="atlas-card">
        <div className="label">{t('dashboard.atlas.distanceFlown')}</div>
-        <div className="value mono">{distanceText} <span className="unit">{t('dashboard.atlas.kmUnit')}</span></div>
+        <div className="value mono">{distanceText} <span className="unit">{distanceLabel}</span></div>
        <div className="delta">{t('dashboard.atlas.aroundEquator', { count: equatorTimes })}</div>
        <svg className="spark" width="80" height="36" viewBox="0 0 80 36">
          <circle cx="40" cy="18" r="14" fill="none" stroke="oklch(0.88 0.01 70)" strokeWidth="2" />
@@ -602,6 +638,7 @@ function UpcomingTool({ items, locale, onOpen }: {
  items: UpcomingReservation[]; locale: string; onOpen: (tripId: number) => void
 }): React.ReactElement {
  const { t } = useTranslation()
+  const timeFormat = useSettingsStore(s => s.settings.time_format)
  return (
    <div className="tool">
      <div className="tool-head">
@@ -612,10 +649,13 @@ function UpcomingTool({ items, locale, onOpen }: {
      ) : (
        <div className="upc-list">
          {items.map(r => {
-            const when = r.reservation_time || (r.day_date ? r.day_date + 'T00:00:00' : null)
-            const d = when ? new Date(when) : null
-            const dateStr = d ? splitDate(d.toISOString().slice(0, 10), locale) : null
-            const timeStr = r.reservation_time ? new Date(r.reservation_time).toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit' }) : null
+            // Read the date/time straight from the stored string parts. Going through
+            // new Date(...).toISOString() reinterprets the naive local time as UTC and
+            // can roll the displayed day forward/back in non-UTC timezones.
+            const parsed = splitReservationDateTime(r.reservation_time)
+            const datePart = parsed.date || r.day_date || null
+            const dateStr = datePart ? splitDate(datePart, locale) : null
+            const timeStr = parsed.time ? formatTime(parsed.time, locale, timeFormat) : null
            const typeClass = RES_TYPE_CLASS[r.type] || 'other'
            return (
              <div className="upc-item" key={r.id} onClick={() => onOpen(r.trip_id)}>
@@ -405,4 +405,79 @@ describe('SharedTripPage', () => {
      });
    });
  });
+
+  describe('FE-PAGE-SHARED-017: Multi-leg flight shows each leg in the Day Plan', () => {
+    const day = { id: 101, trip_id: 1, day_number: 1, date: '2026-07-01', title: 'Day One', notes: null };
+    const multiLegFlight = {
+      id: 9, trip_id: 1, title: 'Flight', type: 'flight', status: 'confirmed',
+      day_id: 101, end_day_id: 101,
+      reservation_time: '2026-07-01T08:00:00', reservation_end_time: '2026-07-01T20:00:00',
+      metadata: JSON.stringify({
+        legs: [
+          { from: 'FRA', to: 'BER', airline: 'Lufthansa', flight_number: 'LH1', dep_day_id: 101, dep_time: '08:00', arr_day_id: 101, arr_time: '09:00' },
+          { from: 'BER', to: 'HND', airline: 'Lufthansa', flight_number: 'LH2', dep_day_id: 101, dep_time: '10:00', arr_day_id: 101, arr_time: '20:00' },
+        ],
+        departure_airport: 'FRA', arrival_airport: 'HND', airline: 'Lufthansa', flight_number: 'LH1',
+      }),
+    };
+
+    function serveMultiLeg(token: string) {
+      server.use(
+        http.get('/api/shared/:token', ({ params }) => {
+          if (params.token !== token) return;
+          return HttpResponse.json({
+            trip: { id: 1, title: 'Shared Paris Trip', start_date: '2026-07-01', end_date: '2026-07-05' },
+            days: [day],
+            assignments: {},
+            dayNotes: {},
+            places: [],
+            reservations: [multiLegFlight],
+            accommodations: [],
+            packing: [],
+            budget: [],
+            categories: [],
+            permissions: { share_bookings: true, share_packing: false, share_budget: false, share_collab: false },
+            collab: [],
+          });
+        }),
+      );
+    }
+
+    it('renders each leg with its own route, not the overall start/end', async () => {
+      serveMultiLeg('multileg-token');
+      renderSharedTrip('multileg-token');
+
+      await waitFor(() => {
+        expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+      });
+
+      // Expand the day to reveal the timeline
+      fireEvent.click(screen.getByText('Day One'));
+
+      await waitFor(() => {
+        expect(screen.getByText(/FRA → BER/)).toBeInTheDocument();
+      });
+      // Second leg shows its OWN route + flight number (the bug showed the overall route here)
+      expect(screen.getByText(/BER → HND/)).toBeInTheDocument();
+      expect(screen.getByText(/LH2/)).toBeInTheDocument();
+      // The overall start→end must NOT appear on any leg
+      expect(screen.queryByText(/FRA → HND/)).toBeNull();
+    });
+
+    it('lists each leg flight number in the Bookings tab', async () => {
+      serveMultiLeg('multileg-bookings-token');
+      renderSharedTrip('multileg-bookings-token');
+
+      await waitFor(() => {
+        expect(screen.getByText('Shared Paris Trip')).toBeInTheDocument();
+      });
+
+      fireEvent.click(screen.getByRole('button', { name: /bookings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText(/LH1/)).toBeInTheDocument();
+      });
+      expect(screen.getByText(/LH2/)).toBeInTheDocument();
+    });
+  });
 });
@@ -11,6 +11,7 @@ import { renderToStaticMarkup } from 'react-dom/server'
 import { Clock, MapPin, FileText, Train, Plane, Bus, Car, Ship, Ticket, Hotel, Map, Luggage, Wallet, MessageCircle } from 'lucide-react'
 import { isDayInAccommodationRange } from '../utils/dayOrder'
 import { getTransportForDay, getMergedItems } from '../utils/dayMerge'
+import { getFlightLegs } from '../utils/flightLegs'
 import { splitReservationDateTime } from '../utils/formatters'

 const TRANSPORT_ICONS = { flight: Plane, train: Train, bus: Bus, car: Car, cruise: Ship }
@@ -214,16 +215,24 @@ export default function SharedTripPage() {
                        const TIcon = TRANSPORT_ICONS[r.type] || Ticket
                        const meta = typeof r.metadata === 'string' ? JSON.parse(r.metadata || '{}') : (r.metadata || {})
                        const time = splitReservationDateTime(r.reservation_time).time ?? ''
+                        const endTime = splitReservationDateTime(r.reservation_end_time).time ?? ''
                        let sub = ''
-                        if (r.type === 'flight') sub = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+                        if (r.type === 'flight') {
+                          if (r.__leg) {
+                            // One leg of a multi-leg flight — show this segment's own route/flight number.
+                            sub = [r.__leg.airline, r.__leg.flight_number, (r.__leg.from || r.__leg.to) ? [r.__leg.from, r.__leg.to].filter(Boolean).join(' → ') : ''].filter(Boolean).join(' · ')
+                          } else {
+                            sub = [meta.airline, meta.flight_number, meta.departure_airport && meta.arrival_airport ? `${meta.departure_airport} → ${meta.arrival_airport}` : ''].filter(Boolean).join(' · ')
+                          }
+                        }
                        else if (r.type === 'train') sub = [meta.train_number, meta.platform ? `Gl. ${meta.platform}` : ''].filter(Boolean).join(' · ')
                        return (
-                          <div key={`t-${r.id}`} className="bg-[rgba(59,130,246,0.06)]" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, border: '1px solid rgba(59,130,246,0.15)' }}>
+                          <div key={r.__leg ? `t-${r.id}-leg${r.__leg.index}` : `t-${r.id}`} className="bg-[rgba(59,130,246,0.06)]" style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 8px', borderRadius: 6, border: '1px solid rgba(59,130,246,0.15)' }}>
                            <div className="bg-[rgba(59,130,246,0.12)]" style={{ width: 24, height: 24, borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                              <TIcon size={12} color="#3b82f6" />
                            </div>
                            <div style={{ flex: 1, minWidth: 0 }}>
-                              <div className="text-[#111827]" style={{ fontSize: 12, fontWeight: 500 }}>{r.title}{time ? ` · ${time}` : ''}</div>
+                              <div className="text-[#111827]" style={{ fontSize: 12, fontWeight: 500 }}>{r.title}{time ? ` · ${time}${endTime ? `–${endTime}` : ''}` : ''}</div>
                              {sub && <div className="text-[#6b7280]" style={{ fontSize: 10 }}>{sub}</div>}
                            </div>
                          </div>
@@ -284,7 +293,11 @@ export default function SharedTripPage() {
                      {date && <span>{date}</span>}
                      {time && <span>{time}</span>}
                      {r.location && <span>{r.location}</span>}
-                      {meta.airline && <span>{meta.airline} {meta.flight_number || ''}</span>}
+                      {r.type === 'flight'
+                        ? getFlightLegs(r).map((leg, i) => (
+                            <span key={i}>{[leg.airline, leg.flight_number, (leg.from || leg.to) ? [leg.from, leg.to].filter(Boolean).join(' → ') : ''].filter(Boolean).join(' ')}</span>
+                          ))
+                        : meta.airline && <span>{meta.airline} {meta.flight_number || ''}</span>}
                      {meta.train_number && <span>{meta.train_number}</span>}
                    </div>
                  </div>
@@ -1160,10 +1160,13 @@ describe('TripPlannerPage', () => {
  });

  describe('FE-PAGE-PLANNER-041: handleSaveReservation edit path covers update reservation', () => {
-    it('calls onEdit then onSave on ReservationModal to exercise the edit-reservation handler', async () => {
+    it('does not force a day_id on edit so the server keeps/derives it (#1237)', async () => {
      vi.useFakeTimers();

      seedTripStore({ id: 42 });
+      // Capture the update payload — tripActions is a snapshot of the store at mount.
+      const updateReservationSpy = vi.fn().mockResolvedValue({ id: 1, day_id: 7 });
+      seedStore(useTripStore, { updateReservation: updateReservationSpy } as any);

      renderPlannerPage(42);

@@ -1179,20 +1182,24 @@ describe('TripPlannerPage', () => {
        expect(screen.getByTestId('reservations-panel')).toBeInTheDocument();
      });

-      // Set editingReservation via captured onEdit prop (inline lambda in JSX)
-      const fakeReservation = { id: 1, trip_id: 42, name: 'Test', type: 'restaurant', status: 'confirmed' };
+      // Edit a reservation that lives on day 7 (no day is selected — Book tab).
+      const fakeReservation = { id: 1, trip_id: 42, name: 'Test', type: 'other', status: 'confirmed', day_id: 7 };
      await act(async () => {
        capturedReservationsPanelProps.current.onEdit?.(fakeReservation);
      });

-      // Call onSave — now takes edit path (editingReservation is set)
      await act(async () => {
        await capturedReservationModalProps.current.onSave?.({
          name: 'Updated Booking',
-          type: 'restaurant',
+          type: 'tour',
          status: 'confirmed',
        });
      });
+
+      // The client must NOT send a day_id (no forcing to the selected day, no
+      // stale value) — the server keeps/derives it from the booking's date.
+      expect(updateReservationSpy).toHaveBeenCalled();
+      expect(updateReservationSpy.mock.calls[0][2]).not.toHaveProperty('day_id');
    });
  });

@@ -5,7 +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 { MapCompassPill, type CompassMap } from '../components/Map/MapCompassPill'
 import { getCached, fetchPhoto } from '../services/photoService'
 import DayPlanSidebar from '../components/Planner/DayPlanSidebar'
 import PlacesSidebar from '../components/Planner/PlacesSidebar'
@@ -25,7 +25,9 @@ import PackingListPanel from '../components/Packing/PackingListPanel'
 import ApplyTemplateButton from '../components/Packing/ApplyTemplateButton'
 import TodoListPanel from '../components/Todo/TodoListPanel'
 import FileManager from '../components/Files/FileManager'
-import CostsPanel from '../components/Budget/CostsPanel'
+import CostsPanel, { ExpenseModal, type ExpensePrefill } from '../components/Budget/CostsPanel'
+import type { BookingExpenseRequest } from '../components/Planner/BookingCostsSection.types'
+import type { BudgetItem } from '../types'
 import CollabPanel from '../components/Collab/CollabPanel'
 import Navbar from '../components/Layout/Navbar'
 import { useToast } from '../components/shared/Toast'
@@ -201,7 +203,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
    expandedDayIds, setExpandedDayIds, mapPlaces,
    route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
-    handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
+    handleSavePlace, openPlaceEditor, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
    handleSaveReservation, handleSaveTransport, handleDeleteReservation,
    selectedPlace, dayOrderMap, dayPlaces,
@@ -209,9 +211,21 @@ export default function TripPlannerPage(): React.ReactElement | null {
  } = useTripPlanner()

  const poi = usePoiExplore()
-  const [glMap, setGlMap] = useState<import('mapbox-gl').Map | null>(null)
+  const [glMap, setGlMap] = useState<CompassMap | null>(null)
  const poiPillEnabled = useSettingsStore(s => s.settings.map_poi_pill_enabled) !== false

+  // Costs expense editor opened from a booking modal (save-then-open). Lives at the
+  // page level so it has tripMembers / base currency / current user available.
+  const meId = useAuthStore(s => s.user?.id ?? -1)
+  const displayCurrency = useSettingsStore(s => s.settings.default_currency)
+  const costsBase = (displayCurrency || trip?.currency || 'EUR').toUpperCase()
+  const loadBudgetItems = useTripStore(s => s.loadBudgetItems)
+  const [bookingExpense, setBookingExpense] = useState<{ editing: BudgetItem | null; prefill?: ExpensePrefill } | null>(null)
+  const openBookingExpense = (req: BookingExpenseRequest) => {
+    if (req.editItem) setBookingExpense({ editing: req.editItem })
+    else if (req.prefill) setBookingExpense({ editing: null, prefill: req.prefill })
+  }
+
  if (isLoading || !splashDone) {
    return (
      <div className="bg-surface" style={{
@@ -451,7 +465,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                    onPlaceClick={handlePlaceClick}
                    onAddPlace={() => { setEditingPlace(null); setShowPlaceForm(true) }}
                    onAssignToDay={handleAssignToDay}
-                    onEditPlace={(place) => { setEditingPlace(place); setEditingAssignmentId(null); setShowPlaceForm(true) }}
+                    onEditPlace={(place) => openPlaceEditor(place)}
                    onDeletePlace={(placeId) => handleDeletePlace(placeId)}
                    onBulkDeletePlaces={(ids) => setDeletePlaceIds(ids)}
                    onCategoryFilterChange={setMapCategoryFilter}
@@ -517,17 +531,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                assignments={assignments}
                reservations={reservations}
                onClose={() => setSelectedPlaceId(null)}
-                onEdit={() => {
-                  if (selectedAssignmentId) {
-                    const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
-                    const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
-                    setEditingPlace(placeWithAssignmentTimes)
-                  } else {
-                    setEditingPlace(selectedPlace)
-                  }
-                  setEditingAssignmentId(selectedAssignmentId || null)
-                  setShowPlaceForm(true)
-                }}
+                onEdit={() => openPlaceEditor(selectedPlace, selectedAssignmentId)}
                onDelete={() => handleDeletePlace(selectedPlace.id)}
                onAssignToDay={handleAssignToDay}
                onRemoveAssignment={handleRemoveAssignment}
@@ -565,18 +569,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                    assignments={assignments}
                    reservations={reservations}
                    onClose={() => setSelectedPlaceId(null)}
-                    onEdit={() => {
-                      if (selectedAssignmentId) {
-                        const assignmentObj = Object.values(assignments).flat().find(a => a.id === selectedAssignmentId)
-                        const placeWithAssignmentTimes = assignmentObj?.place ? { ...selectedPlace, place_time: assignmentObj.place.place_time, end_time: assignmentObj.place.end_time } : selectedPlace
-                        setEditingPlace(placeWithAssignmentTimes)
-                      } else {
-                        setEditingPlace(selectedPlace)
-                      }
-                      setEditingAssignmentId(selectedAssignmentId || null)
-                      setShowPlaceForm(true)
-                      setSelectedPlaceId(null)
-                    }}
+                    onEdit={() => { openPlaceEditor(selectedPlace, selectedAssignmentId); setSelectedPlaceId(null) }}
                    onDelete={() => { handleDeletePlace(selectedPlace.id); setSelectedPlaceId(null) }}
                    onAssignToDay={handleAssignToDay}
                    onRemoveAssignment={handleRemoveAssignment}
@@ -617,7 +610,7 @@ export default function TripPlannerPage(): React.ReactElement | null {
                  <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} 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 }} />
+                      : <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) => { openPlaceEditor(place); 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>
                </div>
@@ -703,11 +696,23 @@ export default function TripPlannerPage(): React.ReactElement | null {
        )}
      </div>

-      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingAssignmentId ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} />
+      <PlaceFormModal isOpen={showPlaceForm} onClose={() => { setShowPlaceForm(false); setEditingPlace(null); setEditingAssignmentId(null); setPrefillCoords(null) }} onSave={handleSavePlace} place={editingPlace} prefillCoords={prefillCoords} assignmentId={editingAssignmentId} dayAssignments={editingPlace ? Object.values(assignments).flat() : []} tripId={tripId} categories={categories} onCategoryCreated={cat => tripActions.addCategory?.(cat)} />
      <TripFormModal isOpen={showTripForm} onClose={() => setShowTripForm(false)} onSave={async (data) => { await tripActions.updateTrip(tripId, data); toast.success(t('trip.toast.tripUpdated')) }} trip={trip} />
      <TripMembersModal isOpen={showMembersModal} onClose={() => setShowMembersModal(false)} tripId={tripId} tripTitle={trip?.title} />
-      <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)} />}
+      <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} onOpenExpense={openBookingExpense} />
+      {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)} onOpenExpense={openBookingExpense} />}
+      {bookingExpense && (
+        <ExpenseModal
+          tripId={tripId}
+          base={costsBase}
+          people={tripMembers}
+          me={meId}
+          editing={bookingExpense.editing}
+          prefill={bookingExpense.prefill}
+          onClose={() => setBookingExpense(null)}
+          onSaved={() => { setBookingExpense(null); loadBudgetItems(tripId) }}
+        />
+      )}
      <BookingImportModal isOpen={showBookingImport} onClose={() => setShowBookingImport(false)} tripId={tripId} pushUndo={pushUndo} />
      <AirTrailImportModal isOpen={showAirTrailImport} onClose={() => setShowAirTrailImport(false)} tripId={tripId} pushUndo={pushUndo} />
      <ConfirmDialog
@@ -229,12 +229,24 @@ export default function AdminUserModals({ admin, t }: AdminUserModalsProps): Rea

            <div style={{ padding: '20px 24px' }}>
              <p className="text-gray-700 dark:text-gray-300" style={{ fontSize: 13, lineHeight: 1.6, margin: 0 }}>
-                {t('admin.update.dockerText').replace('{version}', `v${updateInfo?.latest ?? ''}`)}
+                {(updateInfo?.is_docker === false ? t('admin.update.nonDockerText') : t('admin.update.dockerText')).replace('{version}', `v${updateInfo?.latest ?? ''}`)}
              </p>

-              <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, fontSize: 12, lineHeight: 1.8, fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
-                className="bg-gray-900 dark:bg-gray-950 text-gray-100 border border-gray-700"
-              >
+              {updateInfo?.is_docker === false ? (
+                <a
+                  href="https://github.com/mauriceboe/TREK/wiki/Updating"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, fontSize: 13, lineHeight: 1.5, display: 'flex', alignItems: 'center', gap: 8, textDecoration: 'none' }}
+                  className="bg-gray-50 dark:bg-gray-900 text-gray-700 dark:text-gray-200 border border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800"
+                >
+                  <ExternalLink className="w-4 h-4 flex-shrink-0" />
+                  <span className="font-semibold underline">{t('admin.update.wikiLink')}</span>
+                </a>
+              ) : (
+                <div style={{ marginTop: 14, padding: '12px 14px', borderRadius: 10, fontSize: 12, lineHeight: 1.8, fontFamily: 'monospace', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}
+                  className="bg-gray-900 dark:bg-gray-950 text-gray-100 border border-gray-700"
+                >
 {`docker pull mauriceboe/trek:latest
 docker stop trek && docker rm trek
 docker run -d --name trek \\
@@ -243,7 +255,8 @@ docker run -d --name trek \\
  -v /opt/trek/uploads:/app/uploads \\
  --restart unless-stopped \\
  mauriceboe/trek:latest`}
-              </div>
+                </div>
+              )}

              <div style={{ marginTop: 10, padding: '10px 12px', borderRadius: 10, fontSize: 12, lineHeight: 1.5 }}
                className="bg-emerald-50 dark:bg-emerald-900/30 text-emerald-700 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-800"
@@ -6,6 +6,7 @@ import apiClient, { mapsApi } from '../../api/client'
 import L from 'leaflet'
 import type { GeoJsonFeatureCollection } from '../../types'
 import { A2_TO_A3, type AtlasData, type CountryDetail, type BucketItem } from './atlasModel'
+import { continentForCountry } from '@trek/shared'

 function useCountryNames(language: string): (code: string) => string {
  const [resolver, setResolver] = useState<(code: string) => string>(() => (code: string) => code)
@@ -133,9 +134,12 @@ export function useAtlas() {
  }, [])

  // Load country-border GeoJSON from our API (geoBoundaries, served server-side —
-  // no third-party fetch from the browser).
+  // no third-party fetch from the browser). Even gzipped the payload is a few MB, so
+  // it gets a longer timeout than the global 8s default to survive slow links and
+  // reverse-proxy / Cloudflare-Tunnel setups instead of aborting and leaving the map
+  // with no countries (#1254).
  useEffect(() => {
-    apiClient.get('/addons/atlas/countries/geo')
+    apiClient.get('/addons/atlas/countries/geo', { timeout: 30000 })
      .then(res => {
        const geo = res.data
        // Dynamically build A2→A3 mapping from GeoJSON
@@ -340,7 +344,10 @@ export function useAtlas() {
              </div>
            </div>`
          layer.bindTooltip(tooltipHtml, {
-            sticky: false, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+            // sticky so the tooltip tracks the cursor; non-sticky anchors it at the feature's
+            // bounds centre, which for countries with overseas territories (e.g. France) lands
+            // far out in the ocean instead of over the area being hovered.
+            sticky: true, permanent: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
          })
          layer.on('click', () => {
            if (c.placeCount === 0 && c.tripCount === 0) {
@@ -363,7 +370,7 @@ export function useAtlas() {
            country_layer_by_a2_ref.current[countryCode] = layer
            const name = feature.properties?.NAME || feature.properties?.ADMIN || resolveName(countryCode)
            layer.bindTooltip(`<div style="font-size:12px;font-weight:600">${name}</div>`, {
-              sticky: false, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
+              sticky: true, className: 'atlas-tooltip', direction: 'top', offset: [0, -10], opacity: 1
            })
            layer.on('click', () => handleMarkCountry(countryCode, name))
            layer.on('mouseover', (e) => {
@@ -552,6 +559,20 @@ export function useAtlas() {
    } catch (e ) {
      console.error('Error fitting bounds', e)
     }
+
+    // Mirror the map-click behaviour so an already-visited country can be removed
+    // straight from search. Tiny countries (Vatican City, Singapore) are hard to
+    // hit on the map, so search was the only way in — but it always opened the
+    // "Mark / Bucket" dialog with no Remove option.
+    const visited = data?.countries.find(c => c.code === country_code)
+    if (visited) {
+      if (visited.placeCount === 0 && visited.tripCount === 0) {
+        handleUnmarkCountry(country_code)
+      } else {
+        loadCountryDetailRef.current(country_code)
+      }
+      return
+    }
    setConfirmAction({ type: 'choose', code: country_code, name: country_label })
  }

@@ -565,10 +586,12 @@ export function useAtlas() {
      apiClient.post(`/addons/atlas/country/${code}/mark`).catch(() => {})
      setData(prev => {
        if (!prev || prev.countries.find(c => c.code === code)) return prev
+        const cont = continentForCountry(code)
        return {
          ...prev,
          countries: [...prev.countries, { code, placeCount: 0, tripCount: 0, firstVisit: null, lastVisit: null }],
          stats: { ...prev.stats, totalCountries: prev.stats.totalCountries + 1 },
+          continents: { ...prev.continents, [cont]: (prev.continents?.[cont] || 0) + 1 },
        }
      })
    } else {
@@ -579,10 +602,12 @@ export function useAtlas() {
        if (!prev) return prev
        const c = prev.countries.find(c => c.code === code)
        if (!c || c.placeCount > 0 || c.tripCount > 0) return prev
+        const cont = continentForCountry(code)
        return {
          ...prev,
          countries: prev.countries.filter(c => c.code !== code),
          stats: { ...prev.stats, totalCountries: Math.max(0, prev.stats.totalCountries - 1) },
+          continents: { ...prev.continents, [cont]: Math.max(0, (prev.continents?.[cont] || 0) - 1) },
        }
      })
      setVisitedRegions(prev => {
@@ -33,6 +33,7 @@ export function useDashboard() {
  const [deleteTrip, setDeleteTrip] = useState<DashboardTrip | null>(null)
  const [copyTrip, setCopyTrip] = useState<DashboardTrip | null>(null)
  const [tripFilter, setTripFilter] = useState<'planned' | 'archive' | 'completed'>('planned')
+  const [loadError, setLoadError] = useState<boolean>(false)

  const [stats, setStats] = useState<TravelStats | null>(null)
  const [upcoming, setUpcoming] = useState<UpcomingReservation[]>([])
@@ -42,7 +43,7 @@ export function useDashboard() {
  const [searchParams, setSearchParams] = useSearchParams()
  const toast = useToast()
  const { t, locale } = useTranslation()
-  const { demoMode } = useAuthStore()
+  const { demoMode, authCheckFailed, loadUser } = useAuthStore()

  const toggleViewMode = () => {
    setViewMode(prev => {
@@ -74,13 +75,22 @@ export function useDashboard() {
      const { trips, archivedTrips } = await tripRepo.list()
      setTrips(sortTrips(trips))
      setArchivedTrips(sortTrips(archivedTrips))
+      setLoadError(false)
    } catch {
+      setLoadError(true)
      toast.error(t('dashboard.toast.loadError'))
    } finally {
      setIsLoading(false)
    }
  }

+  // Re-run both the trip fetch and the auth check so a recovered backend clears
+  // the error banner (loadUser resets authCheckFailed on success). #1283
+  const retryLoad = () => {
+    loadUser({ silent: true })
+    loadTrips()
+  }
+
  const today = new Date().toISOString().split('T')[0]
  const spotlight = trips.find(t => t.start_date && t.end_date && t.start_date <= today && t.end_date >= today)
    || trips.find(t => t.start_date && t.start_date >= today)
@@ -177,6 +187,7 @@ export function useDashboard() {
    demoMode, locale, t, navigate,
    // data + derived
    spotlight, heroBundle, stats, upcoming, gridTrips, isLoading,
+    loadError: loadError || authCheckFailed, retryLoad,
    // ui state
    tripFilter, setTripFilter, viewMode, toggleViewMode,
    showForm, setShowForm, editingTrip, setEditingTrip,
@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { resolvePoolAssignmentId } from './tripPlannerModel'
+import { buildAssignment, buildPlace } from '../../../tests/helpers/factories'
+
+describe('resolvePoolAssignmentId', () => {
+  it('returns the lone assignment id when the place is assigned to exactly one day', () => {
+    const place = buildPlace({ id: 7 })
+    const assignment = buildAssignment({ id: 42, day_id: 3, place })
+    const assignments = { 3: [assignment], 4: [buildAssignment({ id: 99, day_id: 4 })] }
+    expect(resolvePoolAssignmentId(assignments, 7)).toBe(42)
+  })
+
+  it('returns null when the place is not assigned to any day', () => {
+    const assignments = { 3: [buildAssignment({ id: 99, day_id: 3 })] }
+    expect(resolvePoolAssignmentId(assignments, 7)).toBeNull()
+  })
+
+  it('returns null when the place is assigned to multiple days (ambiguous time)', () => {
+    const assignments = {
+      3: [buildAssignment({ id: 1, day_id: 3, place: buildPlace({ id: 7 }) })],
+      4: [buildAssignment({ id: 2, day_id: 4, place: buildPlace({ id: 7 }) })],
+    }
+    expect(resolvePoolAssignmentId(assignments, 7)).toBeNull()
+  })
+})
@@ -0,0 +1,24 @@
+/**
+ * Trip planner pure helpers — React/IO-free logic shared by the data hook
+ * (useTripPlanner) and kept here so it can be unit-tested in isolation. Part of
+ * the FE "page = wiring container + data hook" convention (see PATTERN.md).
+ */
+
+import type { Assignment } from '../../types'
+
+/**
+ * Resolve the day-assignment to use when a place is edited from the Places pool,
+ * where no day is in context. Times live per day-assignment (#1247), so we can
+ * only hydrate/persist a place's time when it is assigned to exactly one day.
+ * Returns that assignment's id, or null when the place has 0 or 2+ assignments
+ * (ambiguous — the modal then hides the time fields).
+ */
+export function resolvePoolAssignmentId(
+  assignments: Record<string | number, Assignment[]>,
+  placeId: number,
+): number | null {
+  const matches = Object.values(assignments)
+    .flat()
+    .filter((a) => a.place?.id === placeId)
+  return matches.length === 1 ? matches[0].id : null
+}
@@ -18,6 +18,7 @@ import { usePlaceSelection } from '../../hooks/usePlaceSelection'
 import { usePlannerHistory } from '../../hooks/usePlannerHistory'
 import { useAirtrailConnection } from '../../hooks/useAirtrailConnection'
 import type { Accommodation, TripMember, Day, Place, Reservation } from '../../types'
+import { resolvePoolAssignmentId } from './tripPlannerModel'

 /**
 * Trip planner page logic — the big one. Owns the trip store wiring, addon
@@ -288,7 +289,7 @@ export function useTripPlanner() {
    })
  }, [places, mapCategoryFilter, mapPlacesFilter, assignments, expandedDayIds])

-  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation({ assignments } as any, selectedDayId, routeShown, routeProfile)
+  const { route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay } = useRouteCalculation({ assignments } as any, selectedDayId, routeShown, routeProfile, tripAccommodations)

  const handleSelectDay = useCallback((dayId: number | null, skipFit?: boolean) => {
    const changed = dayId !== selectedDayId
@@ -423,6 +424,16 @@ export function useTripPlanner() {
    }
  }, [editingPlace, editingAssignmentId, tripId, toast, pushUndo])

+  // Open the place editor from any entry point (Places pool, inspector, map).
+  // Times live per day-assignment, so when no day is in context resolve the
+  // place's lone assignment to hydrate & persist its times; with 0 or 2+
+  // assignments the time is ambiguous and the modal hides the fields (#1247).
+  const openPlaceEditor = useCallback((place: Place, preferredAssignmentId: number | null = null) => {
+    setEditingPlace(place)
+    setEditingAssignmentId(preferredAssignmentId ?? resolvePoolAssignmentId(assignments, place.id))
+    setShowPlaceForm(true)
+  }, [assignments])
+
  const handleDeletePlace = useCallback((placeId) => {
    setDeletePlaceId(placeId)
  }, [])
@@ -568,7 +579,12 @@ export function useTripPlanner() {
  const handleSaveReservation = async (data: Record<string, string | number | null> & { title: string }) => {
    try {
      if (editingReservation) {
-        const r = await tripActions.updateReservation(tripId, editingReservation.id, { ...data, day_id: selectedDayId || null })
+        // Don't force a day here. The old code pinned it to the (often empty)
+        // selected day, which dropped the booking out of the Plan; preserving the
+        // old day_id instead left it stale when the date changed. Omitting it lets
+        // the server derive the day from the booking's date, or keep the current
+        // one when there is no date.
+        const r = await tripActions.updateReservation(tripId, editingReservation.id, data)
        toast.success(t('trip.toast.reservationUpdated'))
        setShowReservationModal(false)
        setEditingReservation(null)
@@ -685,7 +701,7 @@ export function useTripPlanner() {
    expandedDayIds, setExpandedDayIds, mapPlaces,
    route, routeSegments, routeInfo, setRoute, setRouteInfo, updateRouteForDay,
    handleSelectDay, handlePlaceClick, handleMarkerClick, handleMapClick, handleMapContextMenu, openAddPlaceFromPoi,
-    handleSavePlace, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
+    handleSavePlace, openPlaceEditor, handleDeletePlace, confirmDeletePlace, confirmDeletePlaces,
    handleAssignToDay, handleRemoveAssignment, handleReorder, handleReorderDays, handleAddDay, handleUpdateDayTitle,
    handleSaveReservation, handleSaveTransport, handleDeleteReservation,
    selectedPlace, dayOrderMap, dayPlaces,
@@ -25,6 +25,11 @@ interface AuthState {
  user: User | null
  isAuthenticated: boolean
  isLoading: boolean
+  /** The auth check (loadUser) failed for a non-401 reason while we were online —
+   *  the server was unreachable or erroring. Surfaced by the UI so a backend/IdP
+   *  outage doesn't render as a blank, error-free page that looks like lost data.
+   *  Transient, never persisted. #1283 */
+  authCheckFailed: boolean
  error: string | null
  demoMode: boolean
  devMode: boolean
@@ -86,6 +91,7 @@ export const useAuthStore = create<AuthState>()(
  user: null,
  isAuthenticated: false,
  isLoading: true,
+  authCheckFailed: false,
  error: null,
  demoMode: localStorage.getItem('demo_mode') === 'true',
  devMode: false,
@@ -200,6 +206,7 @@ export const useAuthStore = create<AuthState>()(
    set({
      user: null,
      isAuthenticated: false,
+      authCheckFailed: false,
      error: null,
    })
  },
@@ -215,22 +222,33 @@ export const useAuthStore = create<AuthState>()(
        user: data.user,
        isAuthenticated: true,
        isLoading: false,
+        authCheckFailed: false,
      })
      await onAuthSuccess(data.user.id)
      connect()
    } catch (err: unknown) {
      if (seq !== authSequence) return // stale response — ignore
-      // Only clear auth state on 401 (invalid/expired token), not on network errors
-      const isAuthError = err && typeof err === 'object' && 'response' in err &&
-        (err as { response?: { status?: number } }).response?.status === 401
-      if (isAuthError) {
+      const status = err && typeof err === 'object' && 'response' in err
+        ? (err as { response?: { status?: number } }).response?.status
+        : undefined
+      if (status === 401) {
+        // Invalid/expired token — clear auth so the guard redirects to login.
        set({
          user: null,
          isAuthenticated: false,
          isLoading: false,
+          authCheckFailed: false,
        })
-      } else {
+      } else if (status === undefined && typeof navigator !== 'undefined' && !navigator.onLine) {
+        // Genuinely offline — keep the persisted session so the PWA serves cached
+        // data without a scary error. This is the offline-first happy path.
        set({ isLoading: false })
+      } else {
+        // Server erroring (5xx) or unreachable while we're online: keep the session
+        // (don't eject the user over a transient outage), but flag it so the UI can
+        // say "couldn't reach the server" instead of showing a blank, error-free
+        // page that looks like the user's trips were lost. #1283
+        set({ isLoading: false, authCheckFailed: true })
      }
    }
  },
@@ -30,6 +30,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
    default_currency: 'USD',
    language: localStorage.getItem('app_language') || 'en',
    temperature_unit: 'fahrenheit',
+    distance_unit: 'metric',
    time_format: '12h',
    show_place_description: false,
    optimize_from_accommodation: true,
@@ -37,6 +38,7 @@ export const useSettingsStore = create<SettingsState>((set, get) => ({
    map_poi_pill_enabled: true,
    mapbox_access_token: '',
    mapbox_style: 'mapbox://styles/mapbox/standard',
+    maplibre_style: '',
    mapbox_3d_enabled: true,
    mapbox_quality_mode: false,
  },
@@ -218,7 +218,7 @@
  opacity: .88; margin-bottom: 16px; font-weight: 500;
 }
 .trek-dash .hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: oklch(1 0 0 / .6); }
-.trek-dash .hero-title { font-size: 104px; font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; margin: 0; }
+.trek-dash .hero-title { font-size: 104px; font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; margin: 0; text-shadow: 0 1px 12px oklch(0 0 0 / .32), 0 1px 3px oklch(0 0 0 / .4); }

 /* ----------------- boarding pass ----------------- */
 .trek-dash .hero-pass {
@@ -422,7 +422,7 @@
 .trek-dash .trip-action-btn:hover { background: oklch(1 0 0 / .3); }
 .trek-dash .trip-action-btn svg { width: 16px; height: 16px; }
 .trek-dash .trip-cover-content { position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; color: #fff; }
-.trek-dash .trip-name { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
+.trek-dash .trip-name { font-size: 26px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; text-shadow: 0 1px 7px oklch(0 0 0 / .3), 0 1px 2px oklch(0 0 0 / .38); }
 .trek-dash .trip-where { margin-top: 4px; font-size: 13px; opacity: .85; display: flex; align-items: center; gap: 6px; }
 .trek-dash .trip-where svg { width: 12px; height: 12px; opacity: .8; }
 .trek-dash .trip-body { padding: 18px 20px 20px; }
@@ -456,6 +456,33 @@
 .trek-dash .add-trip-card .ttl { font-size: 16px; font-weight: 500; margin-bottom: 4px; }
 .trek-dash .add-trip-card .sub { font-size: 13px; color: var(--ink-3); }

+/* Error banner — shown when the trip list or the auth check couldn't reach the
+   server, so a backend/IdP outage no longer looks like an empty (lost-data)
+   dashboard. Amber rather than red: it reassures (data is safe) more than it alarms. */
+.trek-dash .dash-error {
+  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
+  padding: 14px 18px; margin-bottom: 22px;
+  background: oklch(0.74 0.14 75 / 0.13);
+  border: 1px solid oklch(0.74 0.14 75 / 0.45);
+  border-radius: var(--r-md);
+  box-shadow: var(--sh-sm);
+}
+.trek-dash .dash-error-txt { flex: 1; min-width: 200px; font-size: 14px; color: var(--ink); }
+.trek-dash .dash-error-retry {
+  display: inline-flex; align-items: center; gap: 7px;
+  padding: 8px 14px; border: none; border-radius: var(--r-xs);
+  background: var(--ink); color: var(--surface);
+  font-size: 13px; font-weight: 500; cursor: pointer;
+  transition: opacity .15s ease;
+}
+.trek-dash .dash-error-retry:hover { opacity: .88; }
+
+/* Empty state — a genuine "you have no trips yet" message, visually distinct
+   from the error banner above so an outage and a real empty list never look alike. */
+.trek-dash .trips-empty { margin-bottom: 18px; }
+.trek-dash .trips-empty h4 { font-size: 18px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
+.trek-dash .trips-empty p { font-size: 14px; color: var(--ink-3); margin: 0; }
+
 /* ----------------- tools sidebar ----------------- */
 .trek-dash .tool {
  background: var(--glass-bg); border-radius: var(--r-xl); padding: 24px 26px;
@@ -100,6 +100,8 @@ export interface TripFile {
  url: string
 }

+export type DistanceUnit = 'metric' | 'imperial'
+
 export interface Settings {
  map_tile_url: string
  default_lat: number
@@ -109,15 +111,17 @@ export interface Settings {
  default_currency: string
  language: string
  temperature_unit: string
+  distance_unit?: DistanceUnit
  time_format: string
  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'
+  map_provider?: 'leaflet' | 'mapbox-gl' | 'maplibre-gl'
  mapbox_access_token?: string
  mapbox_style?: string
+  maplibre_style?: string
  mapbox_3d_enabled?: boolean
  mapbox_quality_mode?: boolean
 }
@@ -117,4 +117,40 @@ describe('getDayBookendHotels', () => {
    const h = hotel({ place_lat: null, place_lng: null })
    expect(getDayBookendHotels(days[1], days, [h])).toEqual({})
  })
+
+  it('flags an arrival/check-in day as not slept-here in the morning (#1321)', () => {
+    // Day 1: you arrive from home and check in tonight, so the morning hotel is only a
+    // check-in fallback — no hotel → departure leg should be drawn.
+    const into = hotel({ start_day_id: 10, end_day_id: 30, place_lat: 3, place_lng: 4 })
+    const r = getDayBookendHotels(days[0], days, [into])
+    expect(r.morning).toBe(into)
+    expect(r.morningIsSleptHere).toBe(false)
+    expect(r.eveningIsOvernight).toBe(true)
+    // The optimizer anchor must stay a loop on the check-in day (values unchanged).
+    expect(getAccommodationAnchors(days[0], days, [into])).toEqual({ start: { lat: 3, lng: 4 }, end: { lat: 3, lng: 4 } })
+  })
+
+  it('flags a mid-stay day as slept-here and overnight', () => {
+    const h = hotel({ start_day_id: 10, end_day_id: 30 })
+    const r = getDayBookendHotels(days[1], days, [h])
+    expect(r.morningIsSleptHere).toBe(true)
+    expect(r.eveningIsOvernight).toBe(true)
+  })
+
+  it('an evening departure with no replacement check-in is not overnight (S7 mirror)', () => {
+    // You woke up here but check out today and board an evening transport — you do not
+    // sleep here tonight, so the last-stop → hotel leg must be droppable.
+    const h = hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 1 })
+    const r = getDayBookendHotels(days[1], days, [h])
+    expect(r.morningIsSleptHere).toBe(true)
+    expect(r.eveningIsOvernight).toBe(false)
+  })
+
+  it('flags a transfer day as slept-here in the morning and overnight in the evening', () => {
+    const out = hotel({ start_day_id: 10, end_day_id: 20, place_lat: 1, place_lng: 1 })
+    const into = hotel({ start_day_id: 20, end_day_id: 30, place_lat: 9, place_lng: 9 })
+    const r = getDayBookendHotels(days[1], days, [out, into])
+    expect(r.morningIsSleptHere).toBe(true)
+    expect(r.eveningIsOvernight).toBe(true)
+  })
 })
@@ -12,7 +12,7 @@ export const getDayBookendHotels = (
  day: Day,
  days: Day[],
  accommodations: Accommodation[],
-): { morning?: Accommodation; evening?: Accommodation } => {
+): { morning?: Accommodation; evening?: Accommodation; morningIsSleptHere?: boolean; eveningIsOvernight?: boolean } => {
  const inRange = accommodations.filter(a =>
    a.place_lat != null && a.place_lng != null &&
    isDayInAccommodationRange(day, a.start_day_id, a.end_day_id, days),
@@ -30,6 +30,13 @@ export const getDayBookendHotels = (
  return {
    morning: sleptHere ?? checkIn ?? inRange[0],
    evening: checkIn ?? sleptHere ?? inRange[0],
+    // Provenance for the drawing consumers (map + sidebar). A hotel↔transport bookend
+    // is only real when you actually used the hotel: morningIsSleptHere is true only
+    // when you woke up there (not a check-in fallback on an arrival day), and
+    // eveningIsOvernight is true only when you sleep there tonight (you check in today,
+    // or an earlier stay continues past today). The optimizer keeps using the values.
+    morningIsSleptHere: sleptHere != null,
+    eveningIsOvernight: checkIn != null || (sleptHere != null && orderOf(sleptHere.end_day_id) > dayOrd),
  }
 }

@@ -0,0 +1,46 @@
+import { describe, it, expect } from 'vitest'
+import { convertDistance, formatDistance, getDistanceUnitLabel } from './units'
+
+describe('units', () => {
+  describe('getDistanceUnitLabel', () => {
+    it('returns km for metric and mi for imperial', () => {
+      expect(getDistanceUnitLabel('metric')).toBe('km')
+      expect(getDistanceUnitLabel('imperial')).toBe('mi')
+    })
+  })
+
+  describe('convertDistance', () => {
+    it('keeps kilometres for metric', () => {
+      expect(convertDistance(10, 'metric')).toBe(10)
+    })
+    it('converts kilometres to miles for imperial', () => {
+      expect(convertDistance(10, 'imperial')).toBeCloseTo(6.21371, 4)
+    })
+    it('clamps negative and non-finite input to 0', () => {
+      expect(convertDistance(-5, 'imperial')).toBe(0)
+      expect(convertDistance(NaN, 'metric')).toBe(0)
+      expect(convertDistance(Infinity, 'metric')).toBe(0)
+    })
+  })
+
+  describe('formatDistance', () => {
+    it('shows metres below 1 km for metric', () => {
+      expect(formatDistance(0.3, 'metric')).toBe('300 m')
+      expect(formatDistance(0.05, 'metric')).toBe('50 m')
+    })
+    it('shows kilometres at or above 1 km for metric', () => {
+      expect(formatDistance(1.5, 'metric')).toBe('1.5 km')
+      expect(formatDistance(10, 'metric')).toBe('10 km')
+    })
+    it('shows miles for imperial', () => {
+      expect(formatDistance(10, 'imperial')).toBe('6.2 mi')
+    })
+    it('shows <0.1 for a tiny imperial distance', () => {
+      expect(formatDistance(0.05, 'imperial')).toBe('<0.1 mi')
+    })
+    it('clamps negative and non-finite input to 0', () => {
+      expect(formatDistance(-1, 'metric')).toBe('0 m')
+      expect(formatDistance(NaN, 'imperial')).toBe('0 mi')
+    })
+  })
+})
@@ -0,0 +1,35 @@
+import type { DistanceUnit } from '../types'
+
+const KM_TO_MI = 0.621371
+const M_TO_FT = 3.28084
+
+export function getDistanceUnitLabel(unit: DistanceUnit): 'km' | 'mi' {
+  return unit === 'imperial' ? 'mi' : 'km'
+}
+
+/** Formats an elevation in metres as feet for imperial, so it doesn't mix with mi distances. */
+export function formatElevation(meters: number, unit: DistanceUnit): string {
+  const safe = Number.isFinite(meters) ? meters : 0
+  return unit === 'imperial' ? `${Math.round(safe * M_TO_FT)} ft` : `${Math.round(safe)} m`
+}
+
+export function convertDistance(km: number, unit: DistanceUnit): number {
+  const safeKm = Number.isFinite(km) ? Math.max(0, km) : 0
+  return unit === 'imperial' ? safeKm * KM_TO_MI : safeKm
+}
+
+export function formatDistance(km: number, unit: DistanceUnit): string {
+  const safeKm = Number.isFinite(km) ? Math.max(0, km) : 0
+  // Metric keeps a metres reading below 1 km (e.g. "300 m"), matching the route
+  // connectors; imperial has no sub-mile unit, so short hops just show "0.x mi".
+  if (unit === 'metric' && safeKm < 1) {
+    return `${Math.round(safeKm * 1000)} m`
+  }
+  const value = convertDistance(safeKm, unit)
+  const label = getDistanceUnitLabel(unit)
+  const rounded = Math.round(value * 10) / 10
+  // String() keeps a '.' decimal regardless of locale, matching the rest of the app
+  // (toFixed elsewhere) and avoiding "1,5 km" in non-English environments.
+  const text = value > 0 && rounded === 0 ? '<0.1' : String(rounded)
+  return `${text} ${label}`
+}
@@ -6,13 +6,16 @@ import { buildAssignment, buildPlace } from '../../helpers/factories';
 import type { TripStoreState } from '../../../src/store/tripStore';
 import type { RouteSegment } from '../../../src/types';

-// Mock the RouteCalculator module to avoid real OSRM fetch calls
-vi.mock('../../../src/components/Map/RouteCalculator', () => ({
-  calculateRouteWithLegs: vi.fn(),
-  calculateRoute: vi.fn(),
-  optimizeRoute: vi.fn((waypoints: unknown[]) => waypoints),
-  generateGoogleMapsUrl: vi.fn(),
-}));
+vi.mock('../../../src/components/Map/RouteCalculator', async (importActual) => {
+  const actual = await importActual<typeof import('../../../src/components/Map/RouteCalculator')>();
+  return {
+    ...actual,
+    calculateRouteWithLegs: vi.fn(),
+    calculateRoute: vi.fn(),
+    optimizeRoute: vi.fn((waypoints: unknown[]) => waypoints),
+    generateGoogleMapsUrl: vi.fn(),
+  };
+});

 const { calculateRouteWithLegs } = await import('../../../src/components/Map/RouteCalculator');

@@ -248,6 +251,77 @@ describe('useRouteCalculation', () => {
    expect(result.current.routeSegments).toEqual([]);
  });

+  it('FE-HOOK-ROUTE-014: #1321 day-1 arrival draws no check-in-hotel → departure leg', async () => {
+    // Day 1 = arrival from home: a flight (departure → arrival airport) then two activities,
+    // checking into a hotel tonight. The morning hotel is only a check-in fallback, so the
+    // hotel must NOT be bookended to the flight's departure point; the evening leg stays.
+    const dep = { lat: 50.03, lng: 8.57 };  // home/departure airport
+    const arr = { lat: 41.30, lng: 2.08 };  // destination airport
+    const actA = buildPlace({ lat: 41.38, lng: 2.17 });
+    const actB = buildPlace({ lat: 41.40, lng: 2.19 });
+    const hotel = { lat: 41.39, lng: 2.16 };
+
+    const flight = {
+      id: 100, type: 'flight', day_id: 1, end_day_id: 1, day_plan_position: 0,
+      endpoints: [
+        { role: 'from', lat: dep.lat, lng: dep.lng },
+        { role: 'to', lat: arr.lat, lng: arr.lng },
+      ],
+    };
+    const a1 = buildAssignment({ day_id: 1, order_index: 1, place: actA });
+    const a2 = buildAssignment({ day_id: 1, order_index: 2, place: actB });
+    const accommodations = [{ id: 1, start_day_id: 1, end_day_id: 2, place_lat: hotel.lat, place_lng: hotel.lng }];
+    // A single stable store reference (like buildMockStore) so selectedDayAssignments
+    // keeps its identity across renders and the effect doesn't loop.
+    const store = { assignments: { '1': [a1, a2] } } as unknown as TripStoreState;
+    useTripStore.setState({
+      assignments: store.assignments,
+      reservations: [flight],
+      days: [{ id: 1, day_number: 1 }, { id: 2, day_number: 2 }],
+    } as any);
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store, 1, true, 'driving', accommodations as any)
+    );
+
+    await act(async () => {});
+
+    const legs = (result.current.route ?? []).map(run => run.map(p => `${p[0]},${p[1]}`));
+    // The spurious morning bookend [hotel → departure airport] must be gone.
+    expect(legs).not.toContainEqual([`${hotel.lat},${hotel.lng}`, `${dep.lat},${dep.lng}`]);
+    // The route starts the day's run at the arrival airport, not the hotel.
+    expect(result.current.route?.[0]?.[0]).toEqual([arr.lat, arr.lng]);
+    // The evening leg [last activity → hotel] is still drawn.
+    expect(legs).toContainEqual([`${actB.lat},${actB.lng}`, `${hotel.lat},${hotel.lng}`]);
+  });
+
+  it('FE-HOOK-ROUTE-015: day-1 with no transport keeps the hotel → first-activity leg', async () => {
+    // Guard against over-suppression: with no arrival transport, the check-in day is a
+    // home-base loop and the hotel → first-stop leg must remain.
+    const actA = buildPlace({ lat: 41.38, lng: 2.17 });
+    const actB = buildPlace({ lat: 41.40, lng: 2.19 });
+    const hotel = { lat: 41.39, lng: 2.16 };
+    const a1 = buildAssignment({ day_id: 1, order_index: 0, place: actA });
+    const a2 = buildAssignment({ day_id: 1, order_index: 1, place: actB });
+    const accommodations = [{ id: 1, start_day_id: 1, end_day_id: 2, place_lat: hotel.lat, place_lng: hotel.lng }];
+    const store = { assignments: { '1': [a1, a2] } } as unknown as TripStoreState;
+    useTripStore.setState({
+      assignments: store.assignments,
+      reservations: [],
+      days: [{ id: 1, day_number: 1 }, { id: 2, day_number: 2 }],
+    } as any);
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store, 1, true, 'driving', accommodations as any)
+    );
+
+    await act(async () => {});
+
+    const legs = (result.current.route ?? []).map(run => run.map(p => `${p[0]},${p[1]}`));
+    expect(legs).toContainEqual([`${hotel.lat},${hotel.lng}`, `${actA.lat},${actA.lng}`]);
+    expect(legs).toContainEqual([`${actB.lat},${actB.lng}`, `${hotel.lat},${hotel.lng}`]);
+  });
+
  it('FE-HOOK-ROUTE-012: setRoute and setRouteInfo are exposed', () => {
    const store = buildMockStore({});
    const { result } = renderHook(() =>
@@ -91,12 +91,13 @@ describe('isRtlLanguage', () => {
 describe('SUPPORTED_LANGUAGES', () => {
  it('FE-COMP-I18N-009: contains expected entries with value/label shape', () => {
    expect(Array.isArray(SUPPORTED_LANGUAGES)).toBe(true)
-    expect(SUPPORTED_LANGUAGES).toHaveLength(20)
+    expect(SUPPORTED_LANGUAGES).toHaveLength(21)
    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'en', label: 'English' }))
    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'tr', label: 'Türkçe' }))
    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ja', label: '日本語' }))
    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ko', label: '한국어' }))
    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'uk', label: 'Українська' }))
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'sv', label: 'Svenska' }))
    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ar', label: 'العربية' }))
  })
 })
@@ -63,6 +63,18 @@ export default defineConfig({
              cacheableResponse: { statuses: [200] },
            },
          },
+          {
+            // OpenFreeMap MapLibre style, glyphs, sprites and vector tiles.
+            // Same best-effort offline model as Mapbox GL: viewed resources are
+            // reused from cache, but the vector tile pipeline is not prefetched.
+            urlPattern: /^https:\/\/tiles\.openfreemap\.org\/.*/i,
+            handler: 'StaleWhileRevalidate',
+            options: {
+              cacheName: 'openfreemap-tiles',
+              expiration: { maxEntries: 3000, maxAgeSeconds: 30 * 24 * 60 * 60 },
+              cacheableResponse: { statuses: [200] },
+            },
+          },
          {
            // API calls — network only. We deliberately do NOT cache API
            // responses in the Service Worker: Workbox keys entries by URL and
@@ -1,7 +1,7 @@
 {
  "name": "@trek/root",
  "private": true,
-  "version": "3.0.22",
+  "version": "3.1.2",
  "workspaces": [
    "client",
    "server",
@@ -25,17 +25,19 @@
    "format:check": "npm run format:check --workspace=shared && npm run format:check --workspace=server && npm run format:check --workspace=client"
  },
  "devDependencies": {
-    "concurrently": "^10.0.3"
+    "concurrently": "^10.0.3",
+    "unrun": "^0.3.1"
  },
  "comment:overrides": "Force a single React 19 across the workspace so the test renderer (@testing-library/react) and the app share one react-dom.",
  "overrides": {
    "react": "19.2.6",
-    "react-dom": "19.2.6"
+    "react-dom": "19.2.6",
+    "multer": "^2.2.0"
  },
  "optionalDependencies": {
-    "@rollup/rollup-linux-x64-musl": "4.62.0",
-    "@rollup/rollup-linux-arm64-musl": "4.62.0",
+    "@img/sharp-linuxmusl-arm64": "0.35.1",
    "@img/sharp-linuxmusl-x64": "0.35.1",
-    "@img/sharp-linuxmusl-arm64": "0.35.1"
+    "@rollup/rollup-linux-arm64-musl": "4.62.0",
+    "@rollup/rollup-linux-x64-musl": "4.62.0"
  }
-}
+}
@@ -35,6 +35,8 @@ OIDC_SCOPE=openid email profile # Fully overrides the default. Add extra scopes

 DEMO_MODE=false # Demo mode - resets data hourly

+# BACKUP_UPLOAD_LIMIT_MB=500 # Max size (MB) of a backup archive you can upload when restoring. Raise it if your backup exceeds 500 MB. If you sit behind a reverse proxy, raise its upload limit too (e.g. nginx client_max_body_size).
+
 # MCP_RATE_LIMIT=300 # Max MCP API requests per user per minute (default: 300)
 # MCP_MAX_SESSION_PER_USER=20 # Max concurrent MCP sessions per user (default: 20)

@@ -1,6 +1,6 @@
 {
  "name": "@trek/server",
-  "version": "3.0.22",
+  "version": "3.1.2",
  "main": "src/index.ts",
  "scripts": {
    "start": "node --require tsconfig-paths/register dist/index.js",
@@ -30,6 +30,7 @@
    "archiver": "^6.0.1",
    "bcryptjs": "^2.4.3",
    "better-sqlite3": "^12.8.0",
+    "compression": "^1.8.0",
    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "dotenv": "^16.4.1",
@@ -38,9 +39,8 @@
    "helmet": "^8.1.0",
    "jimp": "^1.6.1",
    "jsonwebtoken": "^9.0.2",
-    "multer": "^2.1.1",
    "node-cron": "^4.2.1",
-    "nodemailer": "^8.0.5",
+    "nodemailer": "^9.0.1",
    "otplib": "^12.0.1",
    "qrcode": "^1.5.4",
    "reflect-metadata": "^0.2.2",
@@ -60,7 +60,7 @@
    "@hono/node-server": "^1.19.13",
    "picomatch": "^4.0.4",
    "ip-address": "^10.1.1",
-    "multer": "^2.1.1",
+    "multer": "^2.2.0",
    "ws": "^8.21.0",
    "qs": "^6.15.2",
    "file-type": "^21.3.4"
@@ -73,6 +73,7 @@
    "@types/archiver": "^7.0.0",
    "@types/bcryptjs": "^2.4.6",
    "@types/better-sqlite3": "^7.6.13",
+    "@types/compression": "^1.8.0",
    "@types/cookie-parser": "^1.4.10",
    "@types/cors": "^2.8.19",
    "@types/express": "^4.17.25",
@@ -80,7 +81,7 @@
    "@types/multer": "^2.1.0",
    "@types/node": "^25.5.0",
    "@types/node-cron": "^3.0.11",
-    "@types/nodemailer": "^7.0.11",
+    "@types/nodemailer": "^8.0.1",
    "@types/qrcode": "^1.5.5",
    "@types/semver": "^7.7.1",
    "@types/supertest": "^6.0.3",
@@ -151,18 +151,37 @@ function normalizeAdm0Feature(f) {

 function normalizeAdm1(geo, a3, countryName) {
  if (!geo?.features) return []
+  const a2 = A3_TO_A2[a3] || null
+  // Ensure every region in a country ends up with a distinct iso_3166_2 — the Atlas
+  // marks/unmarks regions by this code, so duplicates make one mark light up the whole
+  // country.
+  const used = new Set()
+  const uniq = (base) => {
+    let code = base, n = 2
+    while (used.has(code)) code = `${base}-${n++}`
+    used.add(code)
+    return code
+  }
  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()}`
+    // shapeISO is a real ISO 3166-2 code for most features, but geoBoundaries sometimes
+    // fills it with the bare country code instead of a subdivision code — e.g. every
+    // Spanish region gets "ESP", every Chinese "CHN" (also CL/OM). Keep it only when it
+    // is a real `XX-…` subdivision code and not already taken; otherwise synthesize a
+    // stable, unique-per-country id from the region name so each region is independently
+    // markable.
+    const raw = f.properties?.shapeISO || ''
+    let code
+    if (/^[A-Za-z]{2}-[A-Za-z0-9]+$/.test(raw) && !used.has(raw)) {
+      code = raw
+      used.add(code)
+    } else if (a2) {
+      code = uniq(`${a2}-${name.replace(/[^A-Za-z0-9]/g, '').toUpperCase() || 'RGN'}`)
+    } else {
+      code = raw
+    }
    return {
      type: 'Feature',
      // Property names the Atlas region layer + server getRegionGeo already read.
@@ -1,39 +1,11 @@
+import { SUPPORTED_LANGUAGE_CODES as SUPPORTED_LANG_CODES } from '@trek/shared';
+
 import crypto from 'node:crypto';
 import fs from 'node:fs';
 import path from 'node:path';
-import { SUPPORTED_LANGUAGE_CODES as SUPPORTED_LANG_CODES } from '@trek/shared';

 const dataDir = path.resolve(__dirname, '../data');
-
-// JWT_SECRET is always managed by the server — auto-generated on first start and
-// persisted to data/.jwt_secret. Use the admin panel to rotate it; do not set it
-// via environment variable (env var would override a rotation on next restart).
 const jwtSecretFile = path.join(dataDir, '.jwt_secret');
-let _jwtSecret: string;
-
-try {
-  _jwtSecret = fs.readFileSync(jwtSecretFile, 'utf8').trim();
-} catch {
-  _jwtSecret = crypto.randomBytes(32).toString('hex');
-  try {
-    if (!fs.existsSync(dataDir)) fs.mkdirSync(dataDir, { recursive: true });
-    fs.writeFileSync(jwtSecretFile, _jwtSecret, { mode: 0o600 });
-    console.log('Generated and saved JWT secret to', jwtSecretFile);
-  } catch (writeErr: unknown) {
-    console.warn('WARNING: Could not persist JWT secret to disk:', writeErr instanceof Error ? writeErr.message : writeErr);
-    console.warn('Sessions will reset on server restart.');
-  }
-}
-
-// export let so TypeScript's CJS output keeps exports.JWT_SECRET live
-// (generates `exports.JWT_SECRET = JWT_SECRET = newVal` inside updateJwtSecret)
-export let JWT_SECRET = _jwtSecret;
-
-// Called by the admin rotate-jwt-secret endpoint to update the in-process
-// binding that all middleware and route files reference.
-export function updateJwtSecret(newSecret: string): void {
-  JWT_SECRET = newSecret;
-}

 // ENCRYPTION_KEY is used to derive at-rest encryption keys for stored secrets
 // (API keys, MFA TOTP secrets, SMTP password, OIDC client secret, etc.).
@@ -93,18 +65,55 @@ if (_encryptionKey) {
    fs.writeFileSync(encKeyFile, _encryptionKey, { mode: 0o600 });
    console.log('Encryption key persisted to', encKeyFile);
  } catch (writeErr: unknown) {
-    console.warn('WARNING: Could not persist encryption key to disk:', writeErr instanceof Error ? writeErr.message : writeErr);
+    console.warn(
+      'WARNING: Could not persist encryption key to disk:',
+      writeErr instanceof Error ? writeErr.message : writeErr,
+    );
    console.warn('Set ENCRYPTION_KEY env var to avoid losing access to encrypted secrets on restart.');
  }
 }

 export const ENCRYPTION_KEY = _encryptionKey;

+// JWT_SECRET is always managed by the server — auto-generated on first start and
+// persisted to data/.jwt_secret. Use the admin panel to rotate it; do not set it
+// via environment variable (env var would override a rotation on next restart).
+let _jwtSecret: string;
+
+try {
+  _jwtSecret = fs.readFileSync(jwtSecretFile, 'utf8').trim();
+} catch {
+  _jwtSecret = crypto.randomBytes(32).toString('hex');
+  try {
+    if (!fs.existsSync(dataDir)) fs.mkdirSync(dataDir, { recursive: true });
+    fs.writeFileSync(jwtSecretFile, _jwtSecret, { mode: 0o600 });
+    console.log('Generated and saved JWT secret to', jwtSecretFile);
+  } catch (writeErr: unknown) {
+    console.warn(
+      'WARNING: Could not persist JWT secret to disk:',
+      writeErr instanceof Error ? writeErr.message : writeErr,
+    );
+    console.warn('Sessions will reset on server restart.');
+  }
+}
+
+// export let so TypeScript's CJS output keeps exports.JWT_SECRET live
+// (generates `exports.JWT_SECRET = JWT_SECRET = newVal` inside updateJwtSecret)
+export let JWT_SECRET = _jwtSecret;
+
+// Called by the admin rotate-jwt-secret endpoint to update the in-process
+// binding that all middleware and route files reference.
+export function updateJwtSecret(newSecret: string): void {
+  JWT_SECRET = newSecret;
+}
+
 // DEFAULT_LANGUAGE sets the language shown on the login page before the user
 // selects one. Only applies when the user has no saved language preference.
 const rawDefaultLang = process.env.DEFAULT_LANGUAGE?.toLowerCase() || 'en';
 if (!SUPPORTED_LANG_CODES.includes(rawDefaultLang)) {
-  console.warn(`DEFAULT_LANGUAGE="${rawDefaultLang}" is not supported. Falling back to "en". Supported: ${SUPPORTED_LANG_CODES.join(', ')}`);
+  console.warn(
+    `DEFAULT_LANGUAGE="${rawDefaultLang}" is not supported. Falling back to "en". Supported: ${SUPPORTED_LANG_CODES.join(', ')}`,
+  );
 }
 export const DEFAULT_LANGUAGE = SUPPORTED_LANG_CODES.includes(rawDefaultLang) ? rawDefaultLang : 'en';

@@ -116,7 +125,13 @@ export const DEFAULT_LANGUAGE = SUPPORTED_LANG_CODES.includes(rawDefaultLang) ?
 // challenge token or MCP OAuth tokens — those keep their own TTL.
 const DEFAULT_SESSION_DURATION = '24h';
 const DURATION_UNITS_MS: Record<string, number> = {
-  ms: 1, s: 1000, m: 60_000, h: 3_600_000, d: 86_400_000, w: 604_800_000, y: 31_557_600_000,
+  ms: 1,
+  s: 1000,
+  m: 60_000,
+  h: 3_600_000,
+  d: 86_400_000,
+  w: 604_800_000,
+  y: 31_557_600_000,
 };
 function parseDurationMs(value: string): number | null {
  const m = /^(\d+(?:\.\d+)?)\s*(ms|s|m|h|d|w|y)?$/i.exec(value.trim());
@@ -128,7 +143,9 @@ function parseDurationMs(value: string): number | null {
 const rawSessionDuration = process.env.SESSION_DURATION?.trim() || DEFAULT_SESSION_DURATION;
 const parsedSessionMs = parseDurationMs(rawSessionDuration);
 if (parsedSessionMs == null) {
-  console.warn(`SESSION_DURATION="${rawSessionDuration}" is not a valid duration (use e.g. 1h, 7d, 30d). Falling back to "${DEFAULT_SESSION_DURATION}".`);
+  console.warn(
+    `SESSION_DURATION="${rawSessionDuration}" is not a valid duration (use e.g. 1h, 7d, 30d). Falling back to "${DEFAULT_SESSION_DURATION}".`,
+  );
 }
 /** Human-readable session length actually in effect (for logs/diagnostics). */
 export const SESSION_DURATION = parsedSessionMs == null ? DEFAULT_SESSION_DURATION : rawSessionDuration;
@@ -146,10 +163,13 @@ const DEFAULT_SESSION_DURATION_REMEMBER = '30d';
 const rawRememberDuration = process.env.SESSION_DURATION_REMEMBER?.trim() || DEFAULT_SESSION_DURATION_REMEMBER;
 const parsedRememberMs = parseDurationMs(rawRememberDuration);
 if (parsedRememberMs == null) {
-  console.warn(`SESSION_DURATION_REMEMBER="${rawRememberDuration}" is not a valid duration (use e.g. 7d, 30d, 90d). Falling back to "${DEFAULT_SESSION_DURATION_REMEMBER}".`);
+  console.warn(
+    `SESSION_DURATION_REMEMBER="${rawRememberDuration}" is not a valid duration (use e.g. 7d, 30d, 90d). Falling back to "${DEFAULT_SESSION_DURATION_REMEMBER}".`,
+  );
 }
 /** Human-readable "remember me" session length actually in effect (for logs/diagnostics). */
-export const SESSION_DURATION_REMEMBER = parsedRememberMs == null ? DEFAULT_SESSION_DURATION_REMEMBER : rawRememberDuration;
+export const SESSION_DURATION_REMEMBER =
+  parsedRememberMs == null ? DEFAULT_SESSION_DURATION_REMEMBER : rawRememberDuration;
 /** "Remember me" session length in milliseconds — used for the persistent cookie `maxAge`. */
 export const SESSION_DURATION_REMEMBER_MS = parsedRememberMs ?? parseDurationMs(DEFAULT_SESSION_DURATION_REMEMBER)!;
 /** "Remember me" session length in seconds — passed to `jwt.sign({ expiresIn })`. */
@@ -3045,6 +3045,23 @@ function runMigrations(db: Database.Database): void {
        'CREATE UNIQUE INDEX IF NOT EXISTS idx_reservations_external ON reservations(external_source, external_id, trip_id)',
      );
    },
+    () => {
+      // Per-user opt-in for writing TREK edits back to AirTrail (#1240). Default
+      // off: AirTrail is the source of truth and TREK never writes unless asked.
+      try {
+        db.exec('ALTER TABLE users ADD COLUMN airtrail_write_enabled INTEGER DEFAULT 0');
+      } catch (err: any) {
+        if (!err.message?.includes('duplicate column name')) throw err;
+      }
+    },
+    // Store Google Maps feature IDs separately from real Google Places API IDs.
+    () => {
+      try {
+        db.exec('ALTER TABLE places ADD COLUMN google_ftid TEXT');
+      } catch (err: any) {
+        if (!err.message?.includes('duplicate column name')) throw err;
+      }
+    },
  ];

  if (currentVersion < migrations.length) {
@@ -138,6 +138,7 @@ function createTables(db: Database.Database): void {
      notes TEXT,
      image_url TEXT,
      google_place_id TEXT,
+      google_ftid TEXT,
      website TEXT,
      phone TEXT,
      transport_mode TEXT DEFAULT 'walking',
@@ -18,6 +18,11 @@ function seedAdminAccount(db: Database.Database): void {
    const userCount = (db.prepare('SELECT COUNT(*) as count FROM users').get() as { count: number }).count;
    if (userCount > 0) return;

+    // Demo mode seeds its own admin (admin@trek.app, username 'admin') right after this.
+    // Creating a first-run admin here would grab username 'admin' first and make the demo
+    // seeder fail on the UNIQUE(username) constraint, leaving the demo user uncreated.
+    if (process.env.DEMO_MODE?.toLowerCase() === 'true') return;
+
    if (isOidcOnlyConfigured()) {
      console.log('');
      console.log('╔══════════════════════════════════════════════╗');
@@ -48,7 +48,7 @@ You are connected to TREK, a travel planning application. Below is a compact ref
 **Loading trip context:** Before planning or modifying a trip, call \`get_trip_summary\` once. It returns all days (with assignments and notes), accommodations, budget, packing, reservations, collab notes, and todos in a single round-trip. Use this data to answer follow-up questions without extra tool calls.

 **Adding a place to the itinerary (correct order):**
-1. \`search_place\` — find the real-world POI; note the \`osm_id\` and/or \`google_place_id\` in the result.
+1. \`search_place\` — find the real-world POI; note the \`osm_id\`, \`google_place_id\`, and/or \`google_ftid\` in the result.
 2. \`create_place\` — add it to the trip's place pool, passing the IDs from step 1 (enables opening hours, ratings, and map linking in the app).
 3. \`assign_place_to_day\` — schedule it on the desired day using the dayId from \`get_trip_summary\`.

@@ -348,4 +348,4 @@ export function closeMcpSessions(): void {
  }
  sessions.clear();
  rateLimitMap.clear();
-}
+}
@@ -66,6 +66,17 @@ export function hasTripPermission(action: string, tripId: number | string, userI
  return checkPermission(action, userRow?.role ?? 'user', tripOwnerId, userId, tripOwnerId !== userId);
 }

+/** True when the user has the global admin role (mirrors REST `user.role === 'admin'` gates). */
+export function isAdminUser(userId: number): boolean {
+  const userRow = db.prepare('SELECT role FROM users WHERE id = ?').get(userId) as { role?: string } | undefined;
+  return userRow?.role === 'admin';
+}
+
+/** Error response for admin-only tools, reproducing the REST `{ error: 'Admin access required' }` string. */
+export function adminRequired() {
+  return { content: [{ type: 'text' as const, text: 'Admin access required' }], isError: true };
+}
+
 export function ok(data: unknown) {
  return { content: [{ type: 'text' as const, text: JSON.stringify(data, null, 2) }] };
 }
@@ -136,7 +136,11 @@ export function registerAtlasTools(server: McpServer, userId: number, scopes: st
      async ({ regionCode, regionName, countryCode }) => {
        if (isDemoUser(userId)) return demoDenied();
        markRegionVisited(userId, regionCode, regionName, countryCode);
-        const region = listManuallyVisitedRegions(userId).find(r => r.region_code === regionCode);
+        const row = listManuallyVisitedRegions(userId).find(r => r.region_code === regionCode);
+        // Echo in the client-facing shape ({ code, name, ... }) rather than raw DB columns.
+        const region = row
+          ? { code: row.region_code, name: row.region_name, country_code: row.country_code, manuallyMarked: true }
+          : undefined;
        return ok({ region });
      }
    );
@@ -5,18 +5,42 @@ import { isDemoUser } from '../../services/authService';
 import {
  createBudgetItem, updateBudgetItem, deleteBudgetItem,
  updateMembers as updateBudgetMembers,
-  toggleMemberPaid,
+  toggleMemberPaid, getBudgetItem,
+  calculateSettlement, listSettlements, createSettlement, updateSettlement, deleteSettlement,
 } from '../../services/budgetService';
+import { getRates } from '../../services/exchangeRateService';
+import { getTripOwner, listMembers } from '../../services/tripService';
 import {
-  safeBroadcast, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE,
+  safeBroadcast, TOOL_ANNOTATIONS_WRITE, TOOL_ANNOTATIONS_DELETE, TOOL_ANNOTATIONS_READONLY,
  TOOL_ANNOTATIONS_NON_IDEMPOTENT,
  demoDenied, noAccess, ok, hasTripPermission, permissionDenied,
 } from './_shared';
-import { canWrite } from '../scopes';
+import { canRead, canWrite } from '../scopes';
+
+/** Reusable Zod shape for the per-payer amounts on a budget item. */
+const payersSchema = z.array(z.object({
+  user_id: z.number().int().positive(),
+  amount: z.number().nonnegative(),
+})).describe('Who actually paid, and how much each paid, in the expense currency. Ask the user; do not guess.');
 import { isAddonEnabled } from '../../services/adminService';
 import { ADDON_IDS } from '../../addons';

+/**
+ * Resolve the equal-split participants for a new budget item. When member_ids is
+ * omitted, default to the whole trip (owner + all members), deduped — reproducing
+ * the client's own create flow (CostsPanel seeds participants from all members).
+ * An explicit empty array means "planning-only, no split" and is passed through.
+ */
+function resolveMemberIds(tripId: number, member_ids?: number[]): number[] | undefined {
+  if (member_ids !== undefined) return member_ids;
+  const owner = getTripOwner(tripId);
+  if (!owner) return undefined;
+  const { members } = listMembers(tripId, owner.user_id);
+  return Array.from(new Set([owner.user_id, ...members.map(m => m.id)]));
+}
+
 export function registerBudgetTools(server: McpServer, userId: number, scopes: string[] | null): void {
+  const R = canRead(scopes, 'budget');
  const W = canWrite(scopes, 'budget');

  if (isAddonEnabled(ADDON_IDS.BUDGET)) {
@@ -25,21 +49,26 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
  if (W) server.registerTool(
    'create_budget_item',
    {
-      description: 'Add a budget/expense item to a trip.',
+      description: 'Add a budget/expense item to a trip. The cost is split equally among member_ids (omit to split across all trip members, or pass [] for a planning-only entry with no split). Use `payers` to record who actually paid and how much. Ask the user which trip members share this expense and who paid — resolve user IDs with list_trip_members — rather than guessing.',
      inputSchema: {
        tripId: z.number().int().positive(),
        name: z.string().min(1).max(200),
        category: z.string().max(100).optional().describe('Budget category (e.g. Accommodation, Food, Transport)'),
        total_price: z.number().nonnegative(),
+        currency: z.string().max(10).nullable().optional().describe('ISO currency code (e.g. "EUR"); defaults to the trip currency'),
+        member_ids: z.array(z.number().int().positive()).optional().describe('Trip member user IDs splitting this expense. Omit to split across all trip members (owner + members); pass [] for no split.'),
+        payers: payersSchema.optional().describe('Who paid how much, in the expense currency. When given, total_price is derived from the sum. Ask the user; do not guess.'),
+        expense_date: z.string().max(40).nullable().optional().describe('Date the expense occurred, YYYY-MM-DD'),
        note: z.string().max(500).optional(),
      },
      annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
    },
-    async ({ tripId, name, category, total_price, note }) => {
+    async ({ tripId, name, category, total_price, currency, member_ids, payers, expense_date, 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 });
+      const members = resolveMemberIds(tripId, member_ids);
+      const item = createBudgetItem(tripId, { category, name, total_price, currency, member_ids: members, payers, expense_date, note });
      safeBroadcast(tripId, 'budget:created', { item });
      return ok({ item });
    }
@@ -71,24 +100,26 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
  if (W) server.registerTool(
    'update_budget_item',
    {
-      description: 'Update an existing budget/expense item in a trip.',
+      description: 'Update an existing budget/expense item in a trip. You can also re-split it via member_ids and record who actually paid via payers (amounts in the expense currency). When changing who shares an expense or who paid, ask the user rather than guessing; resolve user IDs with list_trip_members.',
      inputSchema: {
        tripId: z.number().int().positive(),
        itemId: z.number().int().positive(),
        name: z.string().min(1).max(200).optional(),
        category: z.string().max(100).optional(),
        total_price: z.number().nonnegative().optional(),
+        member_ids: z.array(z.number().int().positive()).optional().describe('Trip member user IDs splitting this expense; replaces the current split. Omit to leave unchanged, pass [] for no split.'),
+        payers: payersSchema.optional().describe('Replaces who paid how much, in the expense currency. Omit to leave unchanged. Ask the user; do not guess.'),
        persons: z.number().int().positive().nullable().optional(),
        days: z.number().int().positive().nullable().optional(),
        note: z.string().max(500).nullable().optional(),
      },
      annotations: TOOL_ANNOTATIONS_WRITE,
    },
-    async ({ tripId, itemId, name, category, total_price, persons, days, note }) => {
+    async ({ tripId, itemId, name, category, total_price, member_ids, payers, 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 });
+      const item = updateBudgetItem(itemId, tripId, { name, category, total_price, member_ids, payers, persons, days, note });
      if (!item) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
      safeBroadcast(tripId, 'budget:updated', { item });
      return ok({ item });
@@ -100,14 +131,14 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
  if (W) server.registerTool(
    'create_budget_item_with_members',
    {
-      description: 'Create a budget/expense item and optionally set the trip members splitting it in one atomic operation. If userIds is omitted or empty, behaves like create_budget_item. Only use when the place does not yet exist — if it already exists, use set_budget_item_members directly.',
+      description: 'Create a budget/expense item and set the trip members splitting it in one atomic operation. If userIds is omitted, the cost is split across all trip members; pass an explicit list to split among a subset, or an empty array for a planning-only entry with no split. Ask the user which members share this expense rather than guessing; resolve user IDs with list_trip_members. Only use when the item does not yet exist — if it already exists, use set_budget_item_members directly.',
      inputSchema: {
        tripId: z.number().int().positive(),
        name: z.string().min(1).max(200),
        category: z.string().max(100).optional().describe('Budget category (e.g. Accommodation, Food, Transport)'),
        total_price: z.number().nonnegative(),
        note: z.string().max(500).optional(),
-        userIds: z.array(z.number().int().positive()).optional().describe('User IDs splitting this item; omit or pass empty array to skip member assignment'),
+        userIds: z.array(z.number().int().positive()).optional().describe('User IDs splitting this item; omit to split across all trip members, or pass an empty array for no split'),
      },
      annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
    },
@@ -115,19 +146,16 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
      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;
+      // Omitted userIds → default to the whole trip, matching create_budget_item.
+      const members = (userIds && userIds.length > 0) ? userIds : resolveMemberIds(tripId, undefined);
      try {
-        const run = db.transaction(() => {
-          const item = createBudgetItem(tripId, { category, name, total_price, note });
-          if (hasMembers) {
-            return updateBudgetMembers(item.id, tripId, userIds!);
-          }
-          return { item };
-        });
-        const result = run();
-        safeBroadcast(tripId, 'budget:created', { item: (result as any).item ?? result });
-        if (hasMembers) safeBroadcast(tripId, 'budget:members-updated', { item: result });
-        return ok({ item: result });
+        const item = db.transaction(() => {
+          const created = createBudgetItem(tripId, { category, name, total_price, note, member_ids: members });
+          return getBudgetItem(created.id, tripId)!;
+        })();
+        safeBroadcast(tripId, 'budget:created', { item });
+        if (members && members.length > 0) safeBroadcast(tripId, 'budget:members-updated', { item });
+        return ok({ item });
      } catch {
        return { content: [{ type: 'text' as const, text: 'Failed to create budget item.' }], isError: true };
      }
@@ -137,7 +165,7 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
  if (W) server.registerTool(
    'set_budget_item_members',
    {
-      description: 'Set which trip members are splitting a budget item (replaces current member list).',
+      description: 'Set which trip members are splitting a budget item (replaces current member list). Ask the user which members share the expense; resolve user IDs with list_trip_members.',
      inputSchema: {
        tripId: z.number().int().positive(),
        itemId: z.number().int().positive(),
@@ -149,7 +177,9 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
      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);
+      const result = updateBudgetMembers(itemId, tripId, userIds);
+      if (!result) return { content: [{ type: 'text' as const, text: 'Budget item not found.' }], isError: true };
+      const item = getBudgetItem(itemId, tripId);
      safeBroadcast(tripId, 'budget:members-updated', { item });
      return ok({ item });
    }
@@ -176,5 +206,110 @@ export function registerBudgetTools(server: McpServer, userId: number, scopes: s
      return ok({ member });
    }
  );
+
+  // --- SETTLEMENTS (settle-up payments between members) ---
+
+  if (R) server.registerTool(
+    'get_settlement_summary',
+    {
+      description: "See each member's net balance and the suggested payments to settle shared expenses. Amounts are in the trip's base currency. Call this before recording a settlement so you know who should pay whom and how much.",
+      inputSchema: {
+        tripId: z.number().int().positive(),
+        base: z.string().max(10).optional().describe('ISO currency code to compute balances in; defaults to the trip currency'),
+      },
+      annotations: TOOL_ANNOTATIONS_READONLY,
+    },
+    async ({ tripId, base }) => {
+      if (!canAccessTrip(tripId, userId)) return noAccess();
+      const trip = db.prepare('SELECT currency FROM trips WHERE id = ?').get(tripId) as { currency?: string } | undefined;
+      const tripCurrency = trip?.currency || 'EUR';
+      const effectiveBase = (base || tripCurrency).toUpperCase();
+      const rates = await getRates(effectiveBase);
+      const summary = calculateSettlement(tripId, { base: effectiveBase, rates, tripCurrency });
+      return ok({ summary });
+    }
+  );
+
+  if (R) server.registerTool(
+    'list_settlements',
+    {
+      description: 'List the recorded settle-up payments for a trip (who paid whom, how much, when).',
+      inputSchema: {
+        tripId: z.number().int().positive(),
+      },
+      annotations: TOOL_ANNOTATIONS_READONLY,
+    },
+    async ({ tripId }) => {
+      if (!canAccessTrip(tripId, userId)) return noAccess();
+      return ok({ settlements: listSettlements(tripId) });
+    }
+  );
+
+  if (W) server.registerTool(
+    'create_settlement',
+    {
+      description: "Record a settle-up payment: from_user_id paid to_user_id the given amount (in the trip's base currency) to settle shared expenses. Use get_settlement_summary first to find who owes whom and how much.",
+      inputSchema: {
+        tripId: z.number().int().positive(),
+        from_user_id: z.number().int().positive().describe('User ID of the member who paid'),
+        to_user_id: z.number().int().positive().describe('User ID of the member who received the payment'),
+        amount: z.number().positive().describe("Amount paid, in the trip's base currency"),
+      },
+      annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
+    },
+    async ({ tripId, from_user_id, to_user_id, amount }) => {
+      if (isDemoUser(userId)) return demoDenied();
+      if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
+      const settlement = createSettlement(tripId, { from_user_id, to_user_id, amount }, userId);
+      safeBroadcast(tripId, 'budget:settlement-created', { settlement });
+      return ok({ settlement });
+    }
+  );
+
+  if (W) server.registerTool(
+    'update_settlement',
+    {
+      description: 'Update a recorded settle-up payment (who paid, who received, and the amount).',
+      inputSchema: {
+        tripId: z.number().int().positive(),
+        settlementId: z.number().int().positive(),
+        from_user_id: z.number().int().positive().describe('User ID of the member who paid'),
+        to_user_id: z.number().int().positive().describe('User ID of the member who received the payment'),
+        amount: z.number().positive().describe("Amount paid, in the trip's base currency"),
+      },
+      annotations: TOOL_ANNOTATIONS_WRITE,
+    },
+    async ({ tripId, settlementId, from_user_id, to_user_id, amount }) => {
+      if (isDemoUser(userId)) return demoDenied();
+      if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
+      const settlement = updateSettlement(settlementId, tripId, { from_user_id, to_user_id, amount });
+      if (!settlement) return { content: [{ type: 'text' as const, text: 'Settlement not found.' }], isError: true };
+      safeBroadcast(tripId, 'budget:settlement-updated', { settlement });
+      return ok({ settlement });
+    }
+  );
+
+  if (W) server.registerTool(
+    'delete_settlement',
+    {
+      description: 'Delete a recorded settle-up payment. This is the undo for create_settlement and restores the affected balances.',
+      inputSchema: {
+        tripId: z.number().int().positive(),
+        settlementId: z.number().int().positive(),
+      },
+      annotations: TOOL_ANNOTATIONS_DELETE,
+    },
+    async ({ tripId, settlementId }) => {
+      if (isDemoUser(userId)) return demoDenied();
+      if (!canAccessTrip(tripId, userId)) return noAccess();
+      if (!hasTripPermission('budget_edit', tripId, userId)) return permissionDenied();
+      const deleted = deleteSettlement(settlementId, tripId);
+      if (!deleted) return { content: [{ type: 'text' as const, text: 'Settlement not found.' }], isError: true };
+      safeBroadcast(tripId, 'budget:settlement-deleted', { settlementId });
+      return ok({ success: true });
+    }
+  );
  } // isAddonEnabled(BUDGET)
 }
@@ -99,19 +99,20 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
        start_day_id: z.number().int().positive().describe('Check-in day ID'),
        end_day_id: z.number().int().positive().describe('Check-out day ID'),
        check_in: z.string().max(10).optional().describe('Check-in time e.g. "15:00"'),
+        check_in_end: z.string().max(10).optional().describe('Check-in window end time e.g. "20:00"'),
        check_out: z.string().max(10).optional().describe('Check-out time e.g. "11:00"'),
        confirmation: z.string().max(100).optional(),
        notes: z.string().max(1000).optional(),
      },
      annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
    },
-    async ({ tripId, place_id, start_day_id, end_day_id, check_in, check_out, confirmation, notes }) => {
+    async ({ tripId, place_id, start_day_id, end_day_id, check_in, check_in_end, 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 });
+      const accommodation = createAccommodation(tripId, { place_id, start_day_id, end_day_id, check_in, check_in_end, check_out, confirmation, notes });
      safeBroadcast(tripId, 'accommodation:created', { accommodation });
      return ok({ accommodation });
    }
@@ -130,6 +131,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
        address: z.string().max(500).optional(),
        category_id: z.number().int().positive().optional().describe('Category ID — use list_categories to see available options'),
        google_place_id: z.string().optional().describe('Google Place ID from search_place — enables opening hours display'),
+        google_ftid: z.string().optional().describe('Google Maps feature ID from search_place — enables direct Google Maps links'),
        osm_id: z.string().optional().describe('OpenStreetMap ID from search_place (e.g. "way:12345")'),
        place_notes: z.string().max(2000).optional().describe('Notes for the place'),
        website: z.string().max(500).optional(),
@@ -137,6 +139,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
        start_day_id: z.number().int().positive().describe('Check-in day ID'),
        end_day_id: z.number().int().positive().describe('Check-out day ID'),
        check_in: z.string().max(10).optional().describe('Check-in time e.g. "15:00"'),
+        check_in_end: z.string().max(10).optional().describe('Check-in window end time e.g. "20:00"'),
        check_out: z.string().max(10).optional().describe('Check-out time e.g. "11:00"'),
        confirmation: z.string().max(100).optional(),
        accommodation_notes: z.string().max(1000).optional().describe('Notes for the accommodation'),
@@ -145,7 +148,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
      },
      annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
    },
-    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 }) => {
+    async ({ tripId, name, description, lat, lng, address, category_id, google_place_id, google_ftid, osm_id, place_notes, website, phone, start_day_id, end_day_id, check_in, check_in_end, 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();
@@ -153,8 +156,8 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
      if (dayErrors.length > 0) return { content: [{ type: 'text' as const, text: dayErrors.map(e => e.message).join(', ') }], isError: true };
      try {
        const run = db.transaction(() => {
-          const place = createPlace(String(tripId), { name, description, lat, lng, address, category_id, google_place_id, osm_id, notes: place_notes, website, phone, price, currency });
-          const accommodation = createAccommodation(tripId, { place_id: place.id, start_day_id, end_day_id, check_in, check_out, confirmation, notes: accommodation_notes });
+          const place = createPlace(String(tripId), { name, description, lat, lng, address, category_id, google_place_id, google_ftid, osm_id, notes: place_notes, website, phone, price, currency });
+          const accommodation = createAccommodation(tripId, { place_id: place.id, start_day_id, end_day_id, check_in, check_in_end, check_out, confirmation, notes: accommodation_notes });
          return { place, accommodation };
        });
        const result = run();
@@ -178,19 +181,20 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
        start_day_id: z.number().int().positive().optional(),
        end_day_id: z.number().int().positive().optional(),
        check_in: z.string().max(10).optional(),
+        check_in_end: z.string().max(10).optional().describe('Check-in window end time e.g. "20:00"'),
        check_out: z.string().max(10).optional(),
        confirmation: z.string().max(100).optional(),
        notes: z.string().max(1000).optional(),
      },
      annotations: TOOL_ANNOTATIONS_WRITE,
    },
-    async ({ tripId, accommodationId, place_id, start_day_id, end_day_id, check_in, check_out, confirmation, notes }) => {
+    async ({ tripId, accommodationId, place_id, start_day_id, end_day_id, check_in, check_in_end, 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 });
+      const accommodation = updateAccommodation(accommodationId, existing, { place_id, start_day_id, end_day_id, check_in, check_in_end, check_out, confirmation, notes });
      safeBroadcast(tripId, 'accommodation:updated', { accommodation });
      return ok({ accommodation });
    }
@@ -227,7 +231,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
        tripId: z.number().int().positive(),
        dayId: z.number().int().positive(),
        text: z.string().min(1).max(500),
-        time: z.string().max(150).optional().describe('Time label (e.g. "09:00" or "Morning")'),
+        time: z.string().max(250).optional().describe('Time label (e.g. "09:00" or "Morning")'),
        icon: z.string().optional().describe('Emoji icon for the note'),
      },
      annotations: TOOL_ANNOTATIONS_NON_IDEMPOTENT,
@@ -252,7 +256,7 @@ export function registerDayTools(server: McpServer, userId: number, scopes: stri
        dayId: z.number().int().positive(),
        noteId: z.number().int().positive(),
        text: z.string().min(1).max(500).optional(),
-        time: z.string().max(150).nullable().optional().describe('Time label (e.g. "09:00" or "Morning"), or null to clear'),
+        time: z.string().max(250).nullable().optional().describe('Time label (e.g. "09:00" or "Morning"), or null to clear'),
        icon: z.string().optional().describe('Emoji icon for the note'),
      },
      annotations: TOOL_ANNOTATIONS_WRITE,
@@ -136,7 +136,9 @@ export function registerJourneyTools(server: McpServer, userId: number, scopes:
    async ({ title, subtitle, trip_ids }) => {
      if (isDemoUser(userId)) return demoDenied();
      const journey = createJourney(userId, { title, subtitle, trip_ids });
-      return ok({ journey });
+      // Return the fully-hydrated journey (entries/contributors/trips/stats/my_role),
+      // matching get_journey, rather than the bare row.
+      return ok({ journey: getJourneyFull(journey.id, userId) ?? journey });
    }
  );

@@ -233,7 +235,9 @@ export function registerJourneyTools(server: McpServer, userId: number, scopes:
      if (isDemoUser(userId)) return demoDenied();
      const entry = createEntry(journeyId, userId, { entry_date, title, story, entry_time, location_name, mood, sort_order });
      if (!entry) return notFound('Journey not found or access denied.');
-      return ok({ entry });
+      // Return through the listEntries enrichment (parsed tags/pros_cons, photos, source_trip_name).
+      const enriched = listEntries(journeyId, userId)?.find(e => e.id === entry.id) ?? entry;
+      return ok({ entry: enriched });
    }
  );

@@ -255,7 +259,9 @@ export function registerJourneyTools(server: McpServer, userId: number, scopes:
      if (isDemoUser(userId)) return demoDenied();
      const entry = updateEntry(entryId, userId, { title, story, entry_date, entry_time, mood }, undefined);
      if (!entry) return notFound('Entry not found or access denied.');
-      return ok({ entry });
+      // Return through the listEntries enrichment (parsed tags/pros_cons, photos), matching create_journey_entry.
+      const enriched = listEntries(entry.journey_id, userId)?.find(e => e.id === entry.id) ?? entry;
+      return ok({ entry: enriched });
    }
  );

@@ -364,7 +370,8 @@ export function registerJourneyTools(server: McpServer, userId: number, scopes:
      if (isDemoUser(userId)) return demoDenied();
      const result = updateJourneyPreferences(journeyId, userId, { hide_skeletons });
      if (!result) return notFound('Journey not found or access denied.');
-      return ok({ success: true });
+      // Return the service result ({ hide_skeletons }), matching the REST route.
+      return ok(result);
    }
  );

--- a/Show More
+++ b/Show More