diff --git a/client/src/components/Journey/JournalBody.test.tsx b/client/src/components/Journey/JournalBody.test.tsx
new file mode 100644
index 00000000..39da6246
--- /dev/null
+++ b/client/src/components/Journey/JournalBody.test.tsx
@@ -0,0 +1,39 @@
+// FE-COMP-JOURNALBODY-001 to FE-COMP-JOURNALBODY-005
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import JournalBody from './JournalBody';
+
+describe('JournalBody', () => {
+  it('FE-COMP-JOURNALBODY-001: renders plain text content', () => {
+    render(<JournalBody text="Hello traveller" />);
+    expect(screen.getByText('Hello traveller')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-JOURNALBODY-002: renders bold markdown as <strong>', () => {
+    const { container } = render(<JournalBody text="This is **bold** text" />);
+    const strong = container.querySelector('strong');
+    expect(strong).toBeInTheDocument();
+    expect(strong!.textContent).toBe('bold');
+  });
+
+  it('FE-COMP-JOURNALBODY-003: renders links with target _blank', () => {
+    render(<JournalBody text="[Visit](https://example.com)" />);
+    const link = screen.getByRole('link', { name: 'Visit' });
+    expect(link).toHaveAttribute('href', 'https://example.com');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('FE-COMP-JOURNALBODY-004: renders headings with proper elements', () => {
+    const { container } = render(<JournalBody text="## Section Title" />);
+    const h2 = container.querySelector('h2');
+    expect(h2).toBeInTheDocument();
+    expect(h2!.textContent).toBe('Section Title');
+  });
+
+  it('FE-COMP-JOURNALBODY-005: handles empty text without crashing', () => {
+    const { container } = render(<JournalBody text="" />);
+    expect(container.querySelector('.journal-body')).toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/Journey/JourneyMap.test.tsx b/client/src/components/Journey/JourneyMap.test.tsx
new file mode 100644
index 00000000..a44e9dbc
--- /dev/null
+++ b/client/src/components/Journey/JourneyMap.test.tsx
@@ -0,0 +1,229 @@
+// FE-COMP-JOURNEYMAP-001 to FE-COMP-JOURNEYMAP-006
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+// Leaflet does not work in jsdom — mock the entire library
+vi.mock('leaflet', () => {
+  const mockMarker = {
+    addTo: vi.fn().mockReturnThis(),
+    bindTooltip: vi.fn().mockReturnThis(),
+    on: vi.fn().mockReturnThis(),
+    setIcon: vi.fn(),
+    setZIndexOffset: vi.fn(),
+    getLatLng: vi.fn(() => ({ lat: 0, lng: 0 })),
+  };
+  const mockMap = {
+    remove: vi.fn(),
+    invalidateSize: vi.fn(),
+    fitBounds: vi.fn(),
+    setView: vi.fn(),
+    flyTo: vi.fn(),
+    getZoom: vi.fn(() => 10),
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+  };
+  return {
+    default: {
+      map: vi.fn(() => mockMap),
+      tileLayer: vi.fn(() => ({ addTo: vi.fn() })),
+      marker: vi.fn(() => mockMarker),
+      polyline: vi.fn(() => ({ addTo: vi.fn() })),
+      divIcon: vi.fn(() => ({})),
+      latLngBounds: vi.fn(() => ({})),
+    },
+    map: vi.fn(() => mockMap),
+    tileLayer: vi.fn(() => ({ addTo: vi.fn() })),
+    marker: vi.fn(() => mockMarker),
+    polyline: vi.fn(() => ({ addTo: vi.fn() })),
+    divIcon: vi.fn(() => ({})),
+    latLngBounds: vi.fn(() => ({})),
+  };
+});
+
+import React from 'react';
+import { render } from '../../../tests/helpers/render';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { useSettingsStore } from '../../store/settingsStore';
+import { buildSettings } from '../../../tests/helpers/factories';
+import L from 'leaflet';
+import JourneyMap from './JourneyMap';
+import type { JourneyMapHandle } from './JourneyMap';
+
+const entriesWithCoords = [
+  { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
+  { id: 'e2', lat: 52.52, lng: 13.405, title: 'Berlin', mood: null, entry_date: '2025-06-02' },
+];
+
+const entriesWithoutCoords = [
+  { id: 'e3', lat: 0, lng: 0, title: 'Unknown Place', mood: null, entry_date: '2025-06-03' },
+];
+
+const mixedEntries = [
+  ...entriesWithCoords,
+  ...entriesWithoutCoords,
+];
+
+beforeEach(() => {
+  resetAllStores();
+  seedStore(useSettingsStore, { settings: buildSettings() });
+  vi.clearAllMocks();
+});
+
+describe('JourneyMap', () => {
+  it('FE-COMP-JOURNEYMAP-001: renders map container', () => {
+    const { container } = render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // The component renders a div with a child div ref for the Leaflet map
+    expect(container.firstChild).toBeInTheDocument();
+    expect(L.map).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-002: renders markers for entries with coordinates', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Two entries with valid lat/lng should produce two markers
+    expect(L.marker).toHaveBeenCalledTimes(2);
+  });
+
+  it('FE-COMP-JOURNEYMAP-003: does not render markers for entries without coordinates', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithoutCoords} />
+    );
+    // Entry with lat=0 and lng=0 is filtered out by buildMarkerItems (if (e.lat && e.lng))
+    expect(L.marker).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-004: renders polyline connecting entries', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // With 2+ marker items, a route polyline is drawn
+    expect(L.polyline).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-005: shows entry title in marker tooltip', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Each marker calls bindTooltip with the entry label
+    const mockMarkerInstance = (L.marker as any).mock.results[0].value;
+    expect(mockMarkerInstance.bindTooltip).toHaveBeenCalledWith(
+      'Paris',
+      expect.objectContaining({ direction: 'top' }),
+    );
+  });
+
+  it('FE-COMP-JOURNEYMAP-006: exposes imperative handle (focusMarker)', () => {
+    const ref = React.createRef<JourneyMapHandle>();
+    render(
+      <JourneyMap ref={ref} checkins={[]} entries={entriesWithCoords} />
+    );
+    expect(ref.current).not.toBeNull();
+    expect(typeof ref.current!.focusMarker).toBe('function');
+    expect(typeof ref.current!.highlightMarker).toBe('function');
+  });
+
+  it('FE-COMP-JOURNEYMAP-007: renders SVG pin markers via divIcon', () => {
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // Each marker is created with L.divIcon containing SVG html
+    expect(L.divIcon).toHaveBeenCalledTimes(2);
+    const firstCall = (L.divIcon as any).mock.calls[0][0];
+    expect(firstCall.html).toContain('<svg');
+    expect(firstCall.html).toContain('</svg>');
+    // Marker index label "1" for first entry
+    expect(firstCall.html).toContain('>1<');
+  });
+
+  it('FE-COMP-JOURNEYMAP-008: renders markers with mood-based entry labels', () => {
+    const entriesWithMood = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Happy Paris', mood: 'happy', entry_date: '2025-06-01' },
+      { id: 'e2', lat: 52.52, lng: 13.405, title: 'Sad Berlin', mood: 'sad', entry_date: '2025-06-02' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithMood} />
+    );
+    // Markers are still created (mood does not prevent rendering)
+    expect(L.marker).toHaveBeenCalledTimes(2);
+    // Tooltips use the entry titles
+    const mockMarker1 = (L.marker as any).mock.results[0].value;
+    expect(mockMarker1.bindTooltip).toHaveBeenCalledWith(
+      'Happy Paris',
+      expect.objectContaining({ direction: 'top' }),
+    );
+    const mockMarker2 = (L.marker as any).mock.results[1].value;
+    expect(mockMarker2.bindTooltip).toHaveBeenCalledWith(
+      'Sad Berlin',
+      expect.objectContaining({ direction: 'top' }),
+    );
+  });
+
+  it('FE-COMP-JOURNEYMAP-009: draws route polyline connecting multiple markers', () => {
+    const threeEntries = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Paris', mood: null, entry_date: '2025-06-01' },
+      { id: 'e2', lat: 52.52, lng: 13.405, title: 'Berlin', mood: null, entry_date: '2025-06-02' },
+      { id: 'e3', lat: 41.9028, lng: 12.4964, title: 'Rome', mood: null, entry_date: '2025-06-03' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={threeEntries} />
+    );
+    // Route polyline is drawn for items.length > 1
+    expect(L.polyline).toHaveBeenCalled();
+    const polylineCall = (L.polyline as any).mock.calls[0];
+    // Should contain coordinates for all three entries
+    expect(polylineCall[0].length).toBe(3);
+    // Verify dashed style
+    expect(polylineCall[1]).toMatchObject({ dashArray: '4 6' });
+  });
+
+  it('FE-COMP-JOURNEYMAP-010: fitBounds is called for auto-zoom', () => {
+    // Trigger requestAnimationFrame synchronously
+    const origRAF = globalThis.requestAnimationFrame;
+    globalThis.requestAnimationFrame = (cb: FrameRequestCallback) => { cb(0); return 0; };
+
+    render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+
+    const mockMap = (L.map as any).mock.results[0].value;
+    // fitBounds is called inside requestAnimationFrame with the collected coordinates
+    expect(mockMap.fitBounds).toHaveBeenCalled();
+    expect(L.latLngBounds).toHaveBeenCalled();
+
+    globalThis.requestAnimationFrame = origRAF;
+  });
+
+  it('FE-COMP-JOURNEYMAP-011: single entry creates marker but no polyline', () => {
+    const singleEntry = [
+      { id: 'e1', lat: 48.8566, lng: 2.3522, title: 'Solo Paris', mood: null, entry_date: '2025-06-01' },
+    ];
+    render(
+      <JourneyMap checkins={[]} entries={singleEntry} />
+    );
+    // One marker created
+    expect(L.marker).toHaveBeenCalledTimes(1);
+    // No route polyline — polyline is only drawn when items.length > 1
+    expect(L.polyline).not.toHaveBeenCalled();
+  });
+
+  it('FE-COMP-JOURNEYMAP-012: renders zoom control buttons', () => {
+    const { container } = render(
+      <JourneyMap checkins={[]} entries={entriesWithCoords} />
+    );
+    // The component renders zoom in (+) and zoom out (−) buttons
+    const buttons = container.querySelectorAll('button');
+    expect(buttons.length).toBe(2);
+    expect(buttons[0].textContent).toBe('+');
+    expect(buttons[1].textContent).toBe('−');
+  });
+});
diff --git a/client/src/components/Journey/MarkdownToolbar.test.tsx b/client/src/components/Journey/MarkdownToolbar.test.tsx
new file mode 100644
index 00000000..6910dbc8
--- /dev/null
+++ b/client/src/components/Journey/MarkdownToolbar.test.tsx
@@ -0,0 +1,72 @@
+// FE-COMP-MDTOOLBAR-001 to FE-COMP-MDTOOLBAR-006
+
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import MarkdownToolbar from './MarkdownToolbar';
+import React from 'react';
+
+function createTextareaRef(value = '', selectionStart = 0, selectionEnd = 0) {
+  const textarea = document.createElement('textarea');
+  textarea.value = value;
+  textarea.selectionStart = selectionStart;
+  textarea.selectionEnd = selectionEnd;
+  textarea.focus = vi.fn();
+  textarea.setSelectionRange = vi.fn();
+  return { current: textarea } as React.RefObject<HTMLTextAreaElement>;
+}
+
+describe('MarkdownToolbar', () => {
+  let onUpdate: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    onUpdate = vi.fn();
+  });
+
+  it('FE-COMP-MDTOOLBAR-001: renders all 8 toolbar buttons', () => {
+    const ref = createTextareaRef();
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    const buttons = screen.getAllByRole('button');
+    expect(buttons).toHaveLength(8);
+  });
+
+  it('FE-COMP-MDTOOLBAR-002: buttons have correct title labels', () => {
+    const ref = createTextareaRef();
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    expect(screen.getByTitle('Bold')).toBeInTheDocument();
+    expect(screen.getByTitle('Italic')).toBeInTheDocument();
+    expect(screen.getByTitle('Link')).toBeInTheDocument();
+    expect(screen.getByTitle('Heading')).toBeInTheDocument();
+    expect(screen.getByTitle('Quote')).toBeInTheDocument();
+    expect(screen.getByTitle('List')).toBeInTheDocument();
+    expect(screen.getByTitle('Ordered')).toBeInTheDocument();
+    expect(screen.getByTitle('Divider')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MDTOOLBAR-003: bold button wraps selected text with **', () => {
+    const ref = createTextareaRef('hello world', 6, 11);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Bold'));
+    expect(onUpdate).toHaveBeenCalledWith('hello **world**');
+  });
+
+  it('FE-COMP-MDTOOLBAR-004: italic button wraps selected text with _', () => {
+    const ref = createTextareaRef('hello world', 6, 11);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Italic'));
+    expect(onUpdate).toHaveBeenCalledWith('hello _world_');
+  });
+
+  it('FE-COMP-MDTOOLBAR-005: link button wraps selected text as markdown link', () => {
+    const ref = createTextareaRef('click me', 0, 8);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Link'));
+    expect(onUpdate).toHaveBeenCalledWith('[click me](url)');
+  });
+
+  it('FE-COMP-MDTOOLBAR-006: heading button inserts line prefix', () => {
+    const ref = createTextareaRef('my title', 0, 0);
+    render(<MarkdownToolbar textareaRef={ref} onUpdate={onUpdate} />);
+    fireEvent.click(screen.getByTitle('Heading'));
+    expect(onUpdate).toHaveBeenCalledWith('## my title');
+  });
+});
diff --git a/client/src/components/Journey/PhotoLightbox.test.tsx b/client/src/components/Journey/PhotoLightbox.test.tsx
new file mode 100644
index 00000000..048801e8
--- /dev/null
+++ b/client/src/components/Journey/PhotoLightbox.test.tsx
@@ -0,0 +1,97 @@
+// FE-COMP-LIGHTBOX-001 to FE-COMP-LIGHTBOX-008
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import { resetAllStores } from '../../../tests/helpers/store';
+import PhotoLightbox from './PhotoLightbox';
+
+const samplePhotos = [
+  { id: 'p1', src: '/photos/1.jpg', caption: 'Sunset at the beach' },
+  { id: 'p2', src: '/photos/2.jpg', caption: 'Mountain trail' },
+  { id: 'p3', src: '/photos/3.jpg', caption: null },
+];
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('PhotoLightbox', () => {
+  it('FE-COMP-LIGHTBOX-001: renders without crashing when open', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-002: shows photo image', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    const img = screen.getByRole('img');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', '/photos/1.jpg');
+  });
+
+  it('FE-COMP-LIGHTBOX-003: shows close button', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    const buttons = screen.getAllByRole('button');
+    // Close button exists (the X button in the top bar)
+    expect(buttons.length).toBeGreaterThan(0);
+  });
+
+  it('FE-COMP-LIGHTBOX-004: previous/next navigation works', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    // Initially shows photo 1
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+    const img = screen.getByRole('img');
+    expect(img).toHaveAttribute('src', '/photos/1.jpg');
+
+    // Navigate to next photo via ArrowRight key
+    fireEvent.keyDown(window, { key: 'ArrowRight' });
+    expect(screen.getByText('2 / 3')).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('src', '/photos/2.jpg');
+
+    // Navigate back via ArrowLeft key
+    fireEvent.keyDown(window, { key: 'ArrowLeft' });
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+    expect(screen.getByRole('img')).toHaveAttribute('src', '/photos/1.jpg');
+  });
+
+  it('FE-COMP-LIGHTBOX-005: keyboard Escape closes lightbox', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    fireEvent.keyDown(window, { key: 'Escape' });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('FE-COMP-LIGHTBOX-006: counter shows "1 / N"', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    expect(screen.getByText('1 / 3')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-007: does not render when photos array is empty', () => {
+    const onClose = vi.fn();
+    const { container } = render(<PhotoLightbox photos={[]} onClose={onClose} />);
+    // Component returns null when photo is undefined (empty array, index 0 is undefined)
+    expect(container.querySelector('img')).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-LIGHTBOX-008: calls onClose when close button clicked', () => {
+    const onClose = vi.fn();
+    render(<PhotoLightbox photos={samplePhotos} onClose={onClose} />);
+    // The close button is in the top bar — find the button and click it
+    const buttons = screen.getAllByRole('button');
+    // The first button in the top bar is the close (X) button
+    buttons[0].click();
+    expect(onClose).toHaveBeenCalled();
+  });
+});
diff --git a/client/src/components/Journey/moodConfig.test.ts b/client/src/components/Journey/moodConfig.test.ts
new file mode 100644
index 00000000..62151a57
--- /dev/null
+++ b/client/src/components/Journey/moodConfig.test.ts
@@ -0,0 +1,69 @@
+// FE-COMP-MOOD-001 to FE-COMP-MOOD-005
+
+import { describe, it, expect } from 'vitest';
+import { MOODS, WEATHERS, getMood, moodColor, tagColors, TAG_STYLES, MOOD_DEFAULT_COLOR } from './moodConfig';
+
+describe('moodConfig', () => {
+  it('FE-COMP-MOOD-001: MOODS contains all five mood definitions', () => {
+    const ids = MOODS.map(m => m.id);
+    expect(ids).toEqual(['amazing', 'good', 'neutral', 'tired', 'rough']);
+    expect(MOODS).toHaveLength(5);
+  });
+
+  it('FE-COMP-MOOD-002: every mood has valid hex color and css var', () => {
+    for (const mood of MOODS) {
+      expect(mood.color).toMatch(/^#[0-9A-Fa-f]{6}$/);
+      expect(mood.cssVar).toMatch(/^var\(--mood-.+\)$/);
+      expect(mood.icon).toBeDefined();
+      expect(mood.label).toBeTruthy();
+    }
+  });
+
+  it('FE-COMP-MOOD-003: getMood returns correct mood or undefined', () => {
+    expect(getMood('amazing')?.id).toBe('amazing');
+    expect(getMood('rough')?.color).toBe('#9B8EC4');
+    expect(getMood('nonexistent')).toBeUndefined();
+    expect(getMood(null)).toBeUndefined();
+    expect(getMood(undefined)).toBeUndefined();
+  });
+
+  it('FE-COMP-MOOD-004: moodColor returns css var or fallback', () => {
+    expect(moodColor('good')).toBe('var(--mood-good)');
+    expect(moodColor(null)).toBe('var(--journal-faint)');
+    expect(moodColor('unknown')).toBe('var(--journal-faint)');
+  });
+
+  it('FE-COMP-MOOD-005: WEATHERS contains all eight entries with icons', () => {
+    expect(WEATHERS).toHaveLength(8);
+    const ids = WEATHERS.map(w => w.id);
+    expect(ids).toContain('sunny');
+    expect(ids).toContain('snowy');
+    expect(ids).toContain('stormy');
+    for (const w of WEATHERS) {
+      expect(w.icon).toBeDefined();
+      expect(w.label).toBeTruthy();
+    }
+  });
+});
+
+describe('tagColors', () => {
+  it('FE-COMP-MOOD-006: returns known tag colors for light and dark mode', () => {
+    const light = tagColors('hidden gem', false);
+    expect(light.bg).toBe('#dcfce7');
+    expect(light.fg).toBe('#166534');
+
+    const dark = tagColors('hidden gem', true);
+    expect(dark.bg).toBe('rgba(22,101,52,0.2)');
+    expect(dark.fg).toBe('#86efac');
+  });
+
+  it('FE-COMP-MOOD-007: returns fallback colors for unknown tags', () => {
+    const light = tagColors('random tag', false);
+    expect(light.bg).toBe('rgba(0,0,0,0.05)');
+    expect(light.fg).toBe('#374151');
+
+    const dark = tagColors('random tag', true);
+    expect(dark.bg).toBe('rgba(255,255,255,0.07)');
+    expect(dark.fg).toBe('#a1a1aa');
+  });
+});
diff --git a/client/src/components/Journey/stripMarkdown.test.ts b/client/src/components/Journey/stripMarkdown.test.ts
new file mode 100644
index 00000000..d932c06d
--- /dev/null
+++ b/client/src/components/Journey/stripMarkdown.test.ts
@@ -0,0 +1,38 @@
+// FE-UTIL-STRIPMD-001 to FE-UTIL-STRIPMD-006
+
+import { describe, it, expect } from 'vitest';
+import { stripMarkdown } from './stripMarkdown';
+
+describe('stripMarkdown', () => {
+  it('FE-UTIL-STRIPMD-001: strips bold and italic formatting', () => {
+    expect(stripMarkdown('**bold** and _italic_')).toBe('bold and italic');
+    expect(stripMarkdown('__also bold__ and *also italic*')).toBe('also bold and also italic');
+  });
+
+  it('FE-UTIL-STRIPMD-002: strips headings', () => {
+    expect(stripMarkdown('# Heading 1')).toBe('Heading 1');
+    expect(stripMarkdown('## Heading 2')).toBe('Heading 2');
+    expect(stripMarkdown('### Heading 3')).toBe('Heading 3');
+  });
+
+  it('FE-UTIL-STRIPMD-003: converts links to text and removes images', () => {
+    expect(stripMarkdown('[click here](https://example.com)')).toBe('click here');
+    expect(stripMarkdown('![alt text](image.jpg)')).toBe('');
+  });
+
+  it('FE-UTIL-STRIPMD-004: strips code blocks and inline code', () => {
+    expect(stripMarkdown('use `console.log`')).toBe('use console.log');
+    expect(stripMarkdown('```\ncode block\n```')).toBe('');
+  });
+
+  it('FE-UTIL-STRIPMD-005: strips blockquotes and lists', () => {
+    expect(stripMarkdown('> quoted text')).toBe('quoted text');
+    expect(stripMarkdown('- item one')).toBe('item one');
+    expect(stripMarkdown('1. first item')).toBe('first item');
+  });
+
+  it('FE-UTIL-STRIPMD-006: strips strikethrough and horizontal rules', () => {
+    expect(stripMarkdown('~~deleted~~')).toBe('deleted');
+    expect(stripMarkdown('---')).toBe('');
+  });
+});
diff --git a/client/src/components/Layout/BottomNav.test.tsx b/client/src/components/Layout/BottomNav.test.tsx
new file mode 100644
index 00000000..9be7ce16
--- /dev/null
+++ b/client/src/components/Layout/BottomNav.test.tsx
@@ -0,0 +1,101 @@
+// FE-COMP-BOTTOMNAV-001 to FE-COMP-BOTTOMNAV-009
+
+vi.mock('../../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual<typeof import('react-router-dom')>('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+import { render, screen, fireEvent } from '../../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { useAuthStore } from '../../store/authStore';
+import { resetAllStores, seedStore } from '../../../tests/helpers/store';
+import { buildUser } from '../../../tests/helpers/factories';
+import BottomNav from './BottomNav';
+
+const currentUser = buildUser({ id: 1, username: 'testuser', email: 'test@example.com' });
+
+beforeEach(() => {
+  resetAllStores();
+  mockNavigate.mockClear();
+  seedStore(useAuthStore, { user: currentUser, isAuthenticated: true });
+});
+
+describe('BottomNav', () => {
+  it('FE-COMP-BOTTOMNAV-001: renders without crashing', () => {
+    render(<BottomNav />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-002: shows Trips nav link', () => {
+    render(<BottomNav />);
+    expect(screen.getByText('Trips')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-003: shows Profile button', () => {
+    render(<BottomNav />);
+    expect(screen.getByText('Profile')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-004: profile sheet opens on click', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    // Profile sheet shows username
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-005: profile sheet shows username', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    expect(screen.getByText('test@example.com')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-006: profile sheet shows Settings link', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Settings')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-007: profile sheet shows Logout button', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Logout')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-008: admin badge shown for admin users', async () => {
+    const adminUser = buildUser({ id: 2, username: 'adminuser', role: 'admin' });
+    seedStore(useAuthStore, { user: adminUser, isAuthenticated: true });
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    expect(screen.getByText('Admin')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-BOTTOMNAV-009: backdrop click closes profile sheet', async () => {
+    const user = userEvent.setup();
+    render(<BottomNav />);
+    await user.click(screen.getByText('Profile'));
+    // Sheet is open — username visible
+    expect(screen.getByText('testuser')).toBeInTheDocument();
+    // The outermost fixed div is the backdrop wrapper, clicking it triggers onClose
+    const backdrop = document.querySelector('.fixed.inset-0') as HTMLElement;
+    expect(backdrop).toBeTruthy();
+    fireEvent.click(backdrop);
+    // Sheet should be closed — username no longer visible (only the nav Profile text remains)
+    expect(screen.queryByText('testuser')).not.toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/Layout/MobileTopHeader.test.tsx b/client/src/components/Layout/MobileTopHeader.test.tsx
new file mode 100644
index 00000000..b8adca13
--- /dev/null
+++ b/client/src/components/Layout/MobileTopHeader.test.tsx
@@ -0,0 +1,32 @@
+// FE-COMP-MOBILETOPHEADER-001 to FE-COMP-MOBILETOPHEADER-004
+
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '../../../tests/helpers/render';
+import MobileTopHeader from './MobileTopHeader';
+
+describe('MobileTopHeader', () => {
+  it('FE-COMP-MOBILETOPHEADER-001: renders title as h1', () => {
+    render(<MobileTopHeader title="Journeys" />);
+    const heading = screen.getByRole('heading', { level: 1 });
+    expect(heading).toBeInTheDocument();
+    expect(heading.textContent).toBe('Journeys');
+  });
+
+  it('FE-COMP-MOBILETOPHEADER-002: renders subtitle when provided', () => {
+    render(<MobileTopHeader title="Journeys" subtitle="3 trips" />);
+    expect(screen.getByText('3 trips')).toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPHEADER-003: does not render subtitle when omitted', () => {
+    const { container } = render(<MobileTopHeader title="Journeys" />);
+    const subtitleEl = container.querySelector('.text-xs.text-zinc-500');
+    expect(subtitleEl).not.toBeInTheDocument();
+  });
+
+  it('FE-COMP-MOBILETOPHEADER-004: renders action children when provided', () => {
+    render(
+      <MobileTopHeader title="Trips" actions={<button>Add</button>} />,
+    );
+    expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
+  });
+});
diff --git a/client/src/components/PDF/JourneyBookPDF.test.tsx b/client/src/components/PDF/JourneyBookPDF.test.tsx
new file mode 100644
index 00000000..bb43e711
--- /dev/null
+++ b/client/src/components/PDF/JourneyBookPDF.test.tsx
@@ -0,0 +1,147 @@
+// FE-COMP-JOURNEYPDF-001 to FE-COMP-JOURNEYPDF-006
+//
+// JourneyBookPDF.tsx exports an async function `downloadJourneyBookPDF(journey)`
+// that opens a new browser window and writes a full HTML document into it.
+// It does NOT render a React component. Tests verify window.open behaviour.
+
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
+
+// Mock `marked` so we don't need the real markdown parser
+vi.mock('marked', () => ({
+  marked: {
+    parse: (str: string) => `<p>${str}</p>`,
+  },
+}));
+
+import { downloadJourneyBookPDF } from './JourneyBookPDF';
+import type { JourneyDetail } from '../../store/journeyStore';
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function buildJourney(overrides: Partial<JourneyDetail> = {}): JourneyDetail {
+  return {
+    id: 1,
+    user_id: 1,
+    title: 'Iceland Ring Road',
+    subtitle: 'Two weeks around the island',
+    status: 'active',
+    cover_image: null,
+    cover_gradient: null,
+    created_at: Date.now(),
+    updated_at: Date.now(),
+    entries: [
+      {
+        id: 10,
+        journey_id: 1,
+        author_id: 1,
+        type: 'entry',
+        title: 'Golden Circle',
+        story: 'An incredible day of geysers and waterfalls.',
+        entry_date: '2026-07-01',
+        entry_time: '09:00',
+        location_name: 'Thingvellir',
+        location_lat: 64.255,
+        location_lng: -21.13,
+        mood: 'excited',
+        weather: 'sunny',
+        tags: [],
+        pros_cons: { pros: ['Amazing views'], cons: ['Crowded'] },
+        visibility: 'private',
+        sort_order: 0,
+        created_at: Date.now(),
+        updated_at: Date.now(),
+        source_trip_id: null,
+        source_place_id: null,
+        source_trip_name: null,
+        photos: [
+          {
+            id: 100,
+            entry_id: 10,
+            provider: 'local',
+            file_path: 'journey/geyser.jpg',
+            thumbnail_path: null,
+            asset_id: null,
+            owner_id: null,
+            shared: 0,
+            caption: 'Strokkur erupting',
+            sort_order: 0,
+            created_at: Date.now(),
+          },
+        ],
+      },
+    ],
+    trips: [],
+    contributors: [],
+    stats: { entries: 1, photos: 1, cities: 1 },
+    ...overrides,
+  } as unknown as JourneyDetail;
+}
+
+// ── Mock window.open ─────────────────────────────────────────────────────────
+
+let mockWindow: {
+  document: { write: ReturnType<typeof vi.fn>; close: ReturnType<typeof vi.fn> };
+  focus: ReturnType<typeof vi.fn>;
+};
+
+beforeEach(() => {
+  mockWindow = {
+    document: { write: vi.fn(), close: vi.fn() },
+    focus: vi.fn(),
+  };
+  vi.spyOn(window, 'open').mockReturnValue(mockWindow as any);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe('downloadJourneyBookPDF', () => {
+  it('FE-COMP-JOURNEYPDF-001: opens a new window', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    expect(window.open).toHaveBeenCalledWith('', '_blank');
+  });
+
+  it('FE-COMP-JOURNEYPDF-002: writes HTML to the new window', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    expect(mockWindow.document.write).toHaveBeenCalledTimes(1);
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('<!DOCTYPE html>');
+    expect(html).toContain('</html>');
+  });
+
+  it('FE-COMP-JOURNEYPDF-003: closes the document after writing', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    expect(mockWindow.document.close).toHaveBeenCalledTimes(1);
+  });
+
+  it('FE-COMP-JOURNEYPDF-004: HTML contains the journey title', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('Iceland Ring Road');
+  });
+
+  it('FE-COMP-JOURNEYPDF-005: HTML contains entry content', async () => {
+    await downloadJourneyBookPDF(buildJourney());
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('Golden Circle');
+    // Story text is rendered via markdown
+    expect(html).toContain('An incredible day of geysers and waterfalls.');
+    // Pros/cons verdict cards are included
+    expect(html).toContain('Amazing views');
+    expect(html).toContain('Crowded');
+  });
+
+  it('FE-COMP-JOURNEYPDF-006: handles empty entries gracefully', async () => {
+    const journey = buildJourney({ entries: [] });
+    await downloadJourneyBookPDF(journey);
+    expect(window.open).toHaveBeenCalled();
+    const html = mockWindow.document.write.mock.calls[0][0] as string;
+    expect(html).toContain('Iceland Ring Road');
+    // No entry pages, but cover and closing page are still present
+    expect(html).toContain('Journey Book');
+    expect(html).toContain('The End');
+  });
+});
diff --git a/client/src/pages/DashboardPage.test.tsx b/client/src/pages/DashboardPage.test.tsx
index ecc24488..070a6e1d 100644
--- a/client/src/pages/DashboardPage.test.tsx
+++ b/client/src/pages/DashboardPage.test.tsx
@@ -46,7 +46,7 @@ describe('DashboardPage', () => {
 
       // After data loads, trip cards should appear
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
     });
   });
@@ -56,11 +56,11 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // At least the first trip name should be visible
-      expect(screen.getByText('Paris Adventure')).toBeVisible();
+      expect(screen.getAllByText('Paris Adventure')[0]).toBeVisible();
     });
   });
 
@@ -135,7 +135,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Find delete button — CardAction with label t('common.delete')
@@ -155,7 +155,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Open confirm dialog
@@ -188,7 +188,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Open confirm dialog
@@ -202,7 +202,7 @@ describe('DashboardPage', () => {
       await user.click(screen.getByRole('button', { name: /cancel/i }));
 
       // Trip still visible
-      expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+      expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
     });
   });
 
@@ -223,7 +223,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Click archive button
@@ -239,7 +239,7 @@ describe('DashboardPage', () => {
       await user.click(screen.getByRole('button', { name: /archived/i }));
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
     });
   });
@@ -250,7 +250,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       const editButtons = screen.getAllByRole('button', { name: /edit/i });
@@ -269,7 +269,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Find the view mode toggle button (shows List icon when in grid mode, title "List view")
@@ -299,7 +299,7 @@ describe('DashboardPage', () => {
 
       // Wait for active trips to load
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Archived section toggle should be present
@@ -394,7 +394,7 @@ describe('DashboardPage', () => {
       render(<DashboardPage />);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
       });
 
       // Find copy buttons
@@ -402,7 +402,7 @@ describe('DashboardPage', () => {
       await user.click(copyButtons[0]);
 
       await waitFor(() => {
-        expect(screen.getByText('Paris Adventure (Copy)')).toBeInTheDocument();
+        expect(screen.getAllByText('Paris Adventure (Copy)')[0]).toBeInTheDocument();
       });
     });
   });
@@ -543,4 +543,337 @@ describe('DashboardPage', () => {
       });
     });
   });
+
+  describe('FE-PAGE-DASH-023: SpotlightCard shows progress bar for ongoing trip', () => {
+    it('renders progress bar and live badge when trip is currently ongoing', async () => {
+      const today = new Date().toISOString().split('T')[0];
+      const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
+      const nextWeek = new Date(Date.now() + 7 * 86400000).toISOString().split('T')[0];
+
+      const ongoingTrip = buildTrip({
+        title: 'Current Voyage',
+        start_date: yesterday,
+        end_date: nextWeek,
+        day_count: 9,
+        place_count: 3,
+        shared_count: 1,
+      });
+
+      server.use(
+        http.get('/api/trips', ({ request }) => {
+          const url = new URL(request.url);
+          if (url.searchParams.get('archived')) return HttpResponse.json({ trips: [] });
+          return HttpResponse.json({ trips: [ongoingTrip] });
+        }),
+      );
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Current Voyage').length).toBeGreaterThan(0);
+      });
+
+      // Live badge text appears (mobile + desktop spotlight)
+      await waitFor(() => {
+        expect(screen.getAllByText(/live now/i).length).toBeGreaterThan(0);
+      });
+
+      // Progress bar label "Trip progress" appears
+      expect(screen.getAllByText(/trip progress/i).length).toBeGreaterThan(0);
+
+      // "days left" label appears inside the progress section
+      expect(screen.getAllByText(/days left/i).length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('FE-PAGE-DASH-024: SpotlightCard shows countdown for upcoming trip', () => {
+    it('renders countdown badge for a future trip', async () => {
+      const inFiveDays = new Date(Date.now() + 5 * 86400000).toISOString().split('T')[0];
+      const inTenDays = new Date(Date.now() + 10 * 86400000).toISOString().split('T')[0];
+
+      const upcomingTrip = buildTrip({
+        title: 'Upcoming Safari',
+        start_date: inFiveDays,
+        end_date: inTenDays,
+        place_count: 2,
+        shared_count: 0,
+      });
+
+      server.use(
+        http.get('/api/trips', ({ request }) => {
+          const url = new URL(request.url);
+          if (url.searchParams.get('archived')) return HttpResponse.json({ trips: [] });
+          return HttpResponse.json({ trips: [upcomingTrip] });
+        }),
+      );
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Upcoming Safari').length).toBeGreaterThan(0);
+      });
+
+      // Badge should show "X days left" countdown (not "Live now")
+      expect(screen.queryByText(/live now/i)).not.toBeInTheDocument();
+      // The SpotlightCard renders a badge with the countdown text containing "days"
+      await waitFor(() => {
+        expect(screen.getAllByText(/days/i).length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('FE-PAGE-DASH-025: Mobile Quick Actions section renders', () => {
+    it('shows New Trip quick action button on mobile', async () => {
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
+      });
+
+      // Mobile Quick Actions: "New Trip" button rendered in the quick-actions grid
+      // getAllByText because it appears in both mobile quick-actions and desktop header
+      const newTripButtons = screen.getAllByText(/new trip/i);
+      expect(newTripButtons.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('FE-PAGE-DASH-026: Widget settings toggles currency and timezone', () => {
+    it('toggling currency widget off hides it from settings', async () => {
+      const user = userEvent.setup();
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
+      });
+
+      // Open widget settings
+      const allBtns = screen.getAllByRole('button');
+      const settingsButton = allBtns.find(
+        btn => {
+          const title = btn.getAttribute('title');
+          const text = btn.textContent?.trim() || '';
+          return !title && !text && btn.querySelector('.lucide-settings');
+        }
+      );
+
+      expect(settingsButton).toBeDefined();
+      if (settingsButton) {
+        await user.click(settingsButton);
+
+        await waitFor(() => {
+          expect(screen.getByText('Widgets:')).toBeInTheDocument();
+        });
+
+        // Both currency and timezone toggle labels should be visible
+        // Use getAllByText because labels may appear in both widget settings and quick actions
+        expect(screen.getAllByText(/currency/i).length).toBeGreaterThan(0);
+        expect(screen.getAllByText(/timezone/i).length).toBeGreaterThan(0);
+      }
+    });
+  });
+
+  describe('FE-PAGE-DASH-027: Archived section expand and collapse', () => {
+    it('expands and then collapses the archived trips section', async () => {
+      const activeTrip = buildTrip({ title: 'Active Trip', start_date: '2026-08-01', end_date: '2026-08-10' });
+      const archivedTrip = buildTrip({ title: 'Old Archived Trip', start_date: '2024-03-01', end_date: '2024-03-07', is_archived: true });
+
+      server.use(
+        http.get('/api/trips', ({ request }) => {
+          const url = new URL(request.url);
+          if (url.searchParams.get('archived')) {
+            return HttpResponse.json({ trips: [archivedTrip] });
+          }
+          return HttpResponse.json({ trips: [activeTrip] });
+        }),
+      );
+
+      const user = userEvent.setup();
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
+      });
+
+      // Expand
+      await user.click(screen.getByRole('button', { name: /archived/i }));
+      await waitFor(() => {
+        expect(screen.getByText('Old Archived Trip')).toBeInTheDocument();
+      });
+
+      // Collapse
+      await user.click(screen.getByRole('button', { name: /archived/i }));
+      await waitFor(() => {
+        expect(screen.queryByText('Old Archived Trip')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('FE-PAGE-DASH-028: Unarchive action restores trip to active list', () => {
+    it('clicking restore on an archived trip removes it from archived section', async () => {
+      const activeTrip = buildTrip({ title: 'My Active Trip', start_date: '2026-08-01', end_date: '2026-08-10' });
+      const archivedTrip = buildTrip({ title: 'Restored Trip', start_date: '2024-06-01', end_date: '2024-06-07', is_archived: true });
+      const restoredTrip = { ...archivedTrip, is_archived: false };
+
+      server.use(
+        http.get('/api/trips', ({ request }) => {
+          const url = new URL(request.url);
+          if (url.searchParams.get('archived')) {
+            return HttpResponse.json({ trips: [archivedTrip] });
+          }
+          return HttpResponse.json({ trips: [activeTrip] });
+        }),
+        http.put('/api/trips/:id', async ({ request }) => {
+          const body = await request.json() as Record<string, unknown>;
+          if (body.is_archived === false) {
+            return HttpResponse.json({ trip: restoredTrip });
+          }
+          return HttpResponse.json({ trip: archivedTrip });
+        }),
+      );
+
+      const user = userEvent.setup();
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /archived/i })).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByRole('button', { name: /archived/i }));
+
+      await waitFor(() => {
+        expect(screen.getByText('Restored Trip')).toBeInTheDocument();
+      });
+
+      const restoreBtn = screen.getByRole('button', { name: /restore/i });
+      await user.click(restoreBtn);
+
+      // After restore, the archived section should disappear (no archived trips left)
+      await waitFor(() => {
+        expect(screen.queryByRole('button', { name: /archived/i })).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('FE-PAGE-DASH-029: Copy trip action creates a duplicate', () => {
+    it('clicking copy on a spotlight card duplicates the trip', async () => {
+      server.use(
+        http.post('/api/trips/:id/copy', async () => {
+          const trip = buildTrip({ title: 'Paris Adventure (Copy)', start_date: '2026-07-01', end_date: '2026-07-10' });
+          return HttpResponse.json({ trip });
+        }),
+      );
+
+      const user = userEvent.setup();
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Paris Adventure')[0]).toBeInTheDocument();
+      });
+
+      // Find copy buttons (may appear in mobile + desktop)
+      const copyButtons = screen.getAllByRole('button', { name: /copy/i });
+      expect(copyButtons.length).toBeGreaterThan(0);
+      await user.click(copyButtons[0]);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Paris Adventure (Copy)').length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('FE-PAGE-DASH-030: Empty state renders create button', () => {
+    it('shows empty state with create button when no trips exist', async () => {
+      server.use(
+        http.get('/api/trips', () => {
+          return HttpResponse.json({ trips: [] });
+        }),
+      );
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText(/no trips yet/i)).toBeInTheDocument();
+      });
+
+      // Empty state should show a descriptive text and a create button
+      const createButtons = screen.getAllByRole('button');
+      const createBtn = createButtons.find(btn => btn.textContent?.toLowerCase().includes('trip'));
+      expect(createBtn).toBeDefined();
+    });
+  });
+
+  describe('FE-PAGE-DASH-031: SpotlightCard shows stats for ongoing trip', () => {
+    it('renders duration stat and places/buddies stats for a live trip', async () => {
+      const yesterday = new Date(Date.now() - 86400000).toISOString().split('T')[0];
+      const inFiveDays = new Date(Date.now() + 5 * 86400000).toISOString().split('T')[0];
+
+      const ongoingTrip = buildTrip({
+        title: 'Live Adventure',
+        start_date: yesterday,
+        end_date: inFiveDays,
+        place_count: 5,
+        shared_count: 2,
+      });
+
+      server.use(
+        http.get('/api/trips', ({ request }) => {
+          const url = new URL(request.url);
+          if (url.searchParams.get('archived')) return HttpResponse.json({ trips: [] });
+          return HttpResponse.json({ trips: [ongoingTrip] });
+        }),
+      );
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Live Adventure').length).toBeGreaterThan(0);
+      });
+
+      // Stats section: places count "5" and buddies count "2" appear
+      await waitFor(() => {
+        expect(screen.getAllByText('5').length).toBeGreaterThan(0);
+        expect(screen.getAllByText('2').length).toBeGreaterThan(0);
+      });
+
+      // Duration stat label
+      expect(screen.getAllByText(/duration/i).length).toBeGreaterThan(0);
+      // Places stat label
+      expect(screen.getAllByText(/places/i).length).toBeGreaterThan(0);
+    });
+  });
+
+  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: '',
+          default_lat: 48.8566,
+          default_lng: 2.3522,
+          default_zoom: 10,
+          dark_mode: 'auto',
+          default_currency: 'USD',
+          language: 'en',
+          temperature_unit: 'fahrenheit',
+          time_format: '12h',
+          show_place_description: false,
+          route_calculation: false,
+          blur_booking_codes: false,
+          dashboard_currency: 'on',
+          dashboard_timezone: 'on',
+        },
+        updateSetting: vi.fn(),
+      } as any);
+
+      render(<DashboardPage />);
+
+      await waitFor(() => {
+        expect(screen.getAllByText('Paris Adventure').length).toBeGreaterThan(0);
+      });
+
+      // Page renders successfully with dark_mode = 'auto'
+      expect(screen.getByText(/my trips/i)).toBeInTheDocument();
+    });
+  });
 });
diff --git a/client/src/pages/JourneyDetailPage.test.tsx b/client/src/pages/JourneyDetailPage.test.tsx
new file mode 100644
index 00000000..d27d0ad8
--- /dev/null
+++ b/client/src/pages/JourneyDetailPage.test.tsx
@@ -0,0 +1,3712 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { render, screen, waitFor, cleanup } from '../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../tests/helpers/msw/server';
+import { resetAllStores, seedStore } from '../../tests/helpers/store';
+import { buildUser } from '../../tests/helpers/factories';
+import { useAuthStore } from '../store/authStore';
+import { usePermissionsStore } from '../store/permissionsStore';
+import { useJourneyStore } from '../store/journeyStore';
+import JourneyDetailPage from './JourneyDetailPage';
+
+// ── Mocks ────────────────────────────────────────────────────────────────────
+
+vi.mock('../api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+vi.mock('react-leaflet', () => ({
+  MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
+  TileLayer: () => null,
+  Marker: ({ children }: any) => <div>{children}</div>,
+  Popup: ({ children }: any) => <div>{children}</div>,
+  Polyline: () => null,
+  useMap: () => ({ fitBounds: vi.fn(), setView: vi.fn() }),
+}));
+
+vi.mock('../components/Layout/Navbar', () => ({
+  default: () => <nav data-testid="navbar" />,
+}));
+
+// JourneyMap uses forwardRef -- must use require inside the hoisted factory
+vi.mock('../components/Journey/JourneyMap', async () => {
+  const React = await import('react');
+  const Comp = React.forwardRef((_props: any, _ref: any) => (
+    <div data-testid="journey-map">Map</div>
+  ));
+  Comp.displayName = 'MockJourneyMap';
+  return { __esModule: true, default: Comp };
+});
+
+vi.mock('../components/Journey/JournalBody', () => ({
+  default: ({ text }: { text: string }) => <div data-testid="journal-body">{text}</div>,
+}));
+
+vi.mock('../components/Journey/MarkdownToolbar', () => ({
+  default: () => <div data-testid="markdown-toolbar" />,
+}));
+
+vi.mock('../components/Journey/PhotoLightbox', () => ({
+  default: () => <div data-testid="photo-lightbox" />,
+}));
+
+vi.mock('../components/shared/ConfirmDialog', () => ({
+  default: ({ message, onConfirm, onCancel }: any) => (
+    <div data-testid="confirm-dialog">
+      <span>{message}</span>
+      <button onClick={onConfirm}>Confirm</button>
+      <button onClick={onCancel}>Cancel</button>
+    </div>
+  ),
+}));
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return {
+    ...actual,
+    useParams: () => ({ id: '1' }),
+    useNavigate: () => mockNavigate,
+  };
+});
+
+// ── Mock Data ────────────────────────────────────────────────────────────────
+
+const now = Date.now();
+
+const mockJourneyDetail = {
+  id: 1,
+  user_id: 1,
+  title: 'Italy 2026',
+  subtitle: 'Rome, Florence, Venice',
+  status: 'active',
+  cover_image: null,
+  cover_gradient: null,
+  created_at: now,
+  updated_at: now,
+  entries: [
+    {
+      id: 10,
+      journey_id: 1,
+      author_id: 1,
+      type: 'entry',
+      entry_date: '2026-03-15',
+      title: 'Arrived in Rome',
+      story: 'Amazing city!',
+      location_name: 'Rome',
+      location_lat: 41.9,
+      location_lng: 12.5,
+      mood: 'amazing',
+      weather: 'sunny',
+      tags: ['culture'],
+      pros_cons: { pros: ['Great food'], cons: ['Crowded'] },
+      visibility: 'private',
+      sort_order: 0,
+      entry_time: '10:00',
+      photos: [
+        {
+          id: 100,
+          entry_id: 10,
+          provider: 'local',
+          file_path: 'photos/test.jpg',
+          asset_id: null,
+          owner_id: null,
+          thumbnail_path: null,
+          caption: 'Colosseum',
+          sort_order: 0,
+          width: 800,
+          height: 600,
+          shared: 1,
+          created_at: now,
+        },
+      ],
+      created_at: now,
+      updated_at: now,
+    },
+    {
+      id: 11,
+      journey_id: 1,
+      author_id: 1,
+      type: 'entry',
+      entry_date: '2026-03-16',
+      title: 'Florence Day',
+      story: null,
+      location_name: 'Florence',
+      location_lat: 43.77,
+      location_lng: 11.25,
+      mood: 'good',
+      weather: 'cloudy',
+      tags: [],
+      pros_cons: null,
+      visibility: 'private',
+      sort_order: 0,
+      entry_time: null,
+      photos: [],
+      created_at: now,
+      updated_at: now,
+    },
+  ],
+  trips: [
+    {
+      trip_id: 5,
+      added_at: now,
+      title: 'Italy Trip',
+      start_date: '2026-03-14',
+      end_date: '2026-03-20',
+      cover_image: null,
+      currency: 'EUR',
+      place_count: 8,
+    },
+  ],
+  contributors: [
+    {
+      journey_id: 1,
+      user_id: 1,
+      role: 'owner',
+      added_at: now,
+      username: 'testuser',
+      avatar: null,
+    },
+  ],
+  stats: { entries: 2, photos: 1, cities: 2 },
+};
+
+// ── MSW Handlers ─────────────────────────────────────────────────────────────
+
+function setupDefaultHandlers(journeyOverride?: Record<string, unknown>) {
+  const journey = journeyOverride
+    ? { ...mockJourneyDetail, ...journeyOverride }
+    : mockJourneyDetail;
+
+  server.use(
+    http.get('/api/journeys/1', () => {
+      return HttpResponse.json(journey);
+    }),
+    http.get('/api/addons', () => {
+      return HttpResponse.json({
+        addons: [
+          { id: 'journey', name: 'Journey', type: 'feature', icon: 'book', enabled: true },
+          { id: 'immich', name: 'Immich', type: 'photo_provider', icon: 'camera', enabled: true },
+        ],
+      });
+    }),
+    http.get('/api/integrations/memories/:provider/status', () => {
+      return HttpResponse.json({ connected: false });
+    }),
+    http.patch('/api/journeys/1', () => {
+      return HttpResponse.json({ ...mockJourneyDetail, title: 'Updated' });
+    }),
+    http.get('/api/journeys/1/share-link', () => {
+      return HttpResponse.json({ link: null });
+    }),
+  );
+}
+
+// ── Setup ────────────────────────────────────────────────────────────────────
+
+const ownerUser = buildUser({ id: 1, username: 'testuser' });
+
+beforeEach(() => {
+  vi.useFakeTimers({ shouldAdvanceTime: true });
+  vi.clearAllMocks();
+  resetAllStores();
+  useJourneyStore.setState(useJourneyStore.getState(), true);
+  seedStore(useAuthStore, { isAuthenticated: true, user: ownerUser });
+  seedStore(usePermissionsStore, { level: 'owner' } as any);
+  setupDefaultHandlers();
+});
+
+afterEach(() => {
+  // Advance timers to flush pending setTimeout (e.g. 300ms setupObserver) before teardown
+  vi.runOnlyPendingTimers();
+  cleanup();
+  vi.useRealTimers();
+});
+
+// ── Helper ───────────────────────────────────────────────────────────────────
+
+async function renderAndWait() {
+  render(<JourneyDetailPage />);
+  await waitFor(() => {
+    expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+  });
+}
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe('JourneyDetailPage', () => {
+  // ── FE-PAGE-JOURNEYDETAIL-001 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-001: Renders without crashing and shows title', () => {
+    it('renders the journey title after loading', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Italy 2026')).toBeVisible();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-002 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-002: Shows journey subtitle', () => {
+    it('renders the subtitle text', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Rome, Florence, Venice')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-003 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-003: Timeline tab is active by default', () => {
+    it('has the Timeline button in active style and shows timeline entries', async () => {
+      await renderAndWait();
+      const timelineBtn = screen.getByRole('button', { name: /timeline/i });
+      expect(timelineBtn).toBeInTheDocument();
+      // Timeline entries are visible by default
+      expect(screen.getByText('Arrived in Rome')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-004 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-004: Shows entry cards with titles', () => {
+    it('renders all entry titles in timeline view', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Arrived in Rome')).toBeInTheDocument();
+      expect(screen.getByText('Florence Day')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-005 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-005: Shows entry with mood chip (Amazing)', () => {
+    it('renders a mood chip with "Amazing" text for the first entry', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Amazing')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-006 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-006: Shows entry with weather chip (Sunny)', () => {
+    it('renders a weather chip with "Sunny" text for the first entry', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Sunny')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-007 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-007: Shows entry photos', () => {
+    it('renders photo images for entries that have photos', async () => {
+      await renderAndWait();
+      // img with alt="" is presentational (no 'img' role), so query the DOM directly
+      const images = document.querySelectorAll('img');
+      const srcs = Array.from(images).map((img) => img.getAttribute('src'));
+      expect(srcs).toContain('/uploads/photos/test.jpg');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-008 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-008: Shows VerdictSection when entry has pros/cons', () => {
+    it('renders the Pros & Cons section header', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Pros & Cons')).toBeInTheDocument();
+    });
+
+    it('renders pro items', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Great food')).toBeInTheDocument();
+    });
+
+    it('renders con items', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Crowded')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-009 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-009: Gallery tab switches view', () => {
+    it('switches to gallery view when Gallery button is clicked', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      // Gallery view renders photo count text
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-010 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-010: Map tab switches view (renders map-container)', () => {
+    it('switches to map view when Map button is clicked', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-011 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-011: Shows journey stats (Days, Entries, Photos, Cities)', () => {
+    it('renders stat labels', async () => {
+      await renderAndWait();
+      expect(screen.getAllByText('Days').length).toBeGreaterThanOrEqual(1);
+      expect(screen.getAllByText('Entries').length).toBeGreaterThanOrEqual(1);
+      expect(screen.getAllByText('Photos').length).toBeGreaterThanOrEqual(1);
+      expect(screen.getAllByText('Cities').length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('renders stat values', async () => {
+      await renderAndWait();
+      // stats.entries = 2, stats.photos = 1, stats.cities = 2
+      // Entries count appears in hero and sidebar
+      const twos = screen.getAllByText('2');
+      expect(twos.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-012 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-012: Shows synced trips in sidebar', () => {
+    it('renders the synced trip title', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Italy Trip')).toBeInTheDocument();
+    });
+
+    it('renders Synced Trips heading', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Synced Trips')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-013 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-013: Shows contributors list', () => {
+    it('renders the contributors heading', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Contributors')).toBeInTheDocument();
+    });
+
+    it('renders the contributor username', async () => {
+      await renderAndWait();
+      expect(screen.getByText('testuser')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-014 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-014: Add Entry button exists', () => {
+    it('renders the + button in timeline view for adding entries', async () => {
+      await renderAndWait();
+      // The + button is in the view controls row and is only shown in timeline view
+      // It uses <Plus size={16} /> inside a button
+      const buttons = screen.getAllByRole('button');
+      // The add-entry button is the small + icon button near the tab bar
+      // Check that at least one button renders (the + button is the last in the view controls div)
+      expect(buttons.length).toBeGreaterThan(0);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-015 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-015: Entry card shows edit/delete menu', () => {
+    it('opens context menu with Edit and Delete on entry more button click', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      // Find the MoreHorizontal button on the first entry card (no-photo card has it in header)
+      // The second entry (Florence Day) has no photos, so its menu is a small button
+      // For the first entry with photos, the menu button is overlaid on the photo
+      // Click the menu on the no-photo entry
+      const entryCards = screen.getAllByText('Florence Day');
+      expect(entryCards.length).toBeGreaterThan(0);
+
+      // Find all the menu buttons (MoreHorizontal icon buttons)
+      const allButtons = screen.getAllByRole('button');
+      // The MoreHorizontal buttons are the ones that toggle the entry menu
+      // We look for a button near the Florence Day entry
+      // Florence Day entry has no photos, so menu is in the header div
+      // We can look at the DOM structure: the entry container has title + menu button
+
+      // Find all MoreHorizontal-like buttons (they contain svg)
+      // Better approach: find the specific entry container and its button
+      // The entry cards have data-entry-id attributes on their wrapper
+      const florenceWrapper = document.querySelector('[data-entry-id="11"]');
+      expect(florenceWrapper).toBeTruthy();
+
+      const menuButtons = florenceWrapper!.querySelectorAll('button');
+      // The first button in the no-photo entry card header is the menu button
+      const menuBtn = menuButtons[0];
+      expect(menuBtn).toBeTruthy();
+
+      await user.click(menuBtn as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+        expect(screen.getByText('Delete')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-016 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-016: Shows "Back to Journey" link', () => {
+    it('renders the back navigation button text', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Back to Journey')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-017 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-017: Shows settings/more button in hero', () => {
+    it('renders action buttons in the hero section', async () => {
+      await renderAndWait();
+      // Hero has download, share/settings, and more buttons
+      const buttons = screen.getAllByRole('button');
+      expect(buttons.length).toBeGreaterThan(3);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-018 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-018: Empty state when no entries', () => {
+    it('shows "No entries yet" when journey has no entries', async () => {
+      setupDefaultHandlers({ entries: [], stats: { entries: 0, photos: 0, cities: 0 } });
+
+      render(<JourneyDetailPage />);
+
+      await waitFor(() => {
+        expect(screen.getByText('No entries yet')).toBeInTheDocument();
+      });
+    });
+
+    it('shows hint text to add a trip', async () => {
+      setupDefaultHandlers({ entries: [], stats: { entries: 0, photos: 0, cities: 0 } });
+
+      render(<JourneyDetailPage />);
+
+      await waitFor(() => {
+        expect(
+          screen.getByText('Add a trip to get started with skeleton entries'),
+        ).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-019 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-019: ExpandableStory renders story text', () => {
+    it('renders story text via JournalBody for entries with a story', async () => {
+      await renderAndWait();
+      // The mocked JournalBody renders text in data-testid="journal-body"
+      const body = screen.getByTestId('journal-body');
+      expect(body).toHaveTextContent('Amazing city!');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-020 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-020: MoodChip renders correct translation', () => {
+    it('renders "Amazing" for mood=amazing', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Amazing')).toBeInTheDocument();
+    });
+
+    it('renders "Good" for mood=good', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Good')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-021 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-021: WeatherChip renders correct translation', () => {
+    it('renders "Sunny" for weather=sunny', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Sunny')).toBeInTheDocument();
+    });
+
+    it('renders "Cloudy" for weather=cloudy', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Cloudy')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-022 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-022: Photo grid renders for entry with photos', () => {
+    it('renders the photo image with correct src for entries with photos', async () => {
+      await renderAndWait();
+      const imgs = document.querySelectorAll('img');
+      const photoSrcs = Array.from(imgs).map((img) => img.getAttribute('src'));
+      expect(photoSrcs).toContain('/uploads/photos/test.jpg');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-023 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-023: Multiple photos render in grid layout', () => {
+    it('renders multiple photos in a grid when entry has 2+ photos', async () => {
+      const multiPhotoEntry = {
+        ...mockJourneyDetail.entries[0],
+        photos: [
+          {
+            id: 100, entry_id: 10, provider: 'local' as const, file_path: 'photos/a.jpg',
+            asset_id: null, owner_id: null, thumbnail_path: null,
+            caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now,
+          },
+          {
+            id: 101, entry_id: 10, provider: 'local' as const, file_path: 'photos/b.jpg',
+            asset_id: null, owner_id: null, thumbnail_path: null,
+            caption: null, sort_order: 1, width: 800, height: 600, shared: 1, created_at: now,
+          },
+          {
+            id: 102, entry_id: 10, provider: 'local' as const, file_path: 'photos/c.jpg',
+            asset_id: null, owner_id: null, thumbnail_path: null,
+            caption: null, sort_order: 2, width: 800, height: 600, shared: 1, created_at: now,
+          },
+        ],
+      };
+      setupDefaultHandlers({
+        entries: [multiPhotoEntry, mockJourneyDetail.entries[1]],
+        stats: { entries: 2, photos: 3, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const imgs = document.querySelectorAll('img');
+      const photoSrcs = Array.from(imgs).map((img) => img.getAttribute('src'));
+      expect(photoSrcs).toContain('/uploads/photos/a.jpg');
+      expect(photoSrcs).toContain('/uploads/photos/b.jpg');
+      expect(photoSrcs).toContain('/uploads/photos/c.jpg');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-024 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-024: SkeletonCard renders for skeleton entries', () => {
+    it('renders a skeleton entry with its title and "Add Entry" CTA', async () => {
+      const skeletonEntry = {
+        id: 20,
+        journey_id: 1,
+        author_id: 1,
+        type: 'skeleton',
+        entry_date: '2026-03-17',
+        title: 'Venice Visit',
+        story: null,
+        location_name: 'Venice',
+        location_lat: 45.44,
+        location_lng: 12.33,
+        mood: null,
+        weather: null,
+        tags: [],
+        pros_cons: null,
+        visibility: 'private',
+        sort_order: 0,
+        entry_time: '14:00',
+        photos: [],
+        created_at: now,
+        updated_at: now,
+      };
+      setupDefaultHandlers({
+        entries: [...mockJourneyDetail.entries, skeletonEntry],
+        stats: { entries: 3, photos: 1, cities: 3 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Venice Visit')).toBeInTheDocument();
+      });
+
+      // Skeleton card shows "Add Entry" CTA
+      expect(screen.getByText(/Add Entry/)).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-025 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-025: CheckinCard renders for checkin entries', () => {
+    it('renders a checkin entry with title and location', async () => {
+      const checkinEntry = {
+        id: 30,
+        journey_id: 1,
+        author_id: 1,
+        type: 'checkin',
+        entry_date: '2026-03-15',
+        title: 'Quick stop at cafe',
+        story: 'Grabbed an espresso',
+        location_name: 'Cafe Roma',
+        location_lat: 41.91,
+        location_lng: 12.51,
+        mood: null,
+        weather: null,
+        tags: [],
+        pros_cons: null,
+        visibility: 'private',
+        sort_order: 1,
+        entry_time: '15:30',
+        photos: [],
+        created_at: now,
+        updated_at: now,
+      };
+      setupDefaultHandlers({
+        entries: [...mockJourneyDetail.entries, checkinEntry],
+        stats: { entries: 3, photos: 1, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Quick stop at cafe')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText(/Cafe Roma/)).toBeInTheDocument();
+      expect(screen.getByText('Grabbed an espresso')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-026 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-026: Navbar renders', () => {
+    it('renders the mocked navbar', async () => {
+      await renderAndWait();
+      expect(screen.getByTestId('navbar')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-027 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-027: Shows loading spinner before data loads', () => {
+    it('renders a spinner while journey data is loading', () => {
+      // Do NOT await the waitFor -- we check the loading state before data arrives
+      render(<JourneyDetailPage />);
+      // The spinner has animate-spin class on a div
+      const spinner = document.querySelector('.animate-spin');
+      expect(spinner).toBeTruthy();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-028 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-028: Day group headers show formatted date', () => {
+    it('renders day headers with weekday and date for each group', async () => {
+      await renderAndWait();
+      // 2026-03-15 is a Sunday, 2026-03-16 is a Monday
+      expect(screen.getByText(/Sunday, March 15/)).toBeInTheDocument();
+      expect(screen.getByText(/Monday, March 16/)).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-029 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-029: Entry location badge renders', () => {
+    it('renders the location name on entry cards', async () => {
+      await renderAndWait();
+      // "Rome" appears as a badge on the first entry
+      expect(screen.getAllByText('Rome').length).toBeGreaterThanOrEqual(1);
+      expect(screen.getAllByText('Florence').length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-030 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-030: Active status badge shows Live indicator', () => {
+    it('renders a "Live" badge for active journeys', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Live')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-031 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-031: Synced with Trips badge renders', () => {
+    it('renders the "Synced with Trips" text in the hero', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Synced with Trips')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-032 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-032: Entry tags render', () => {
+    it('renders tag chips on entries that have tags', async () => {
+      await renderAndWait();
+      expect(screen.getByText('culture')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-033 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-033: Sidebar map panel renders', () => {
+    it('renders the sidebar journey map', async () => {
+      await renderAndWait();
+      // The sidebar renders a JourneyMap (mocked)
+      const maps = screen.getAllByTestId('journey-map');
+      expect(maps.length).toBeGreaterThanOrEqual(1);
+    });
+
+    it('shows the place count in the sidebar map', async () => {
+      await renderAndWait();
+      // The sidebar map shows "N Places" text
+      expect(screen.getByText(/Places/)).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-034 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-034: Entry time renders when present', () => {
+    it('displays the entry time badge for entries with entry_time', async () => {
+      await renderAndWait();
+      expect(screen.getByText('10:00')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-035 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-035: Day group shows place count', () => {
+    it('shows the number of entries per day group', async () => {
+      await renderAndWait();
+      // Each day header shows "N places"
+      const placesTexts = screen.getAllByText(/places/i);
+      expect(placesTexts.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-036 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-036: Trip place count in sidebar', () => {
+    it('shows the place count for synced trips', async () => {
+      await renderAndWait();
+      expect(screen.getByText(/8 places/)).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-037 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-037: Contributor avatar initial renders', () => {
+    it('renders the first letter of the contributor username as avatar', async () => {
+      await renderAndWait();
+      // 'T' for 'testuser'
+      expect(screen.getByText('T')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-038 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-038: Synced badge on trip cards', () => {
+    it('renders "synced" badge on trip items in sidebar', async () => {
+      await renderAndWait();
+      expect(screen.getByText('synced')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-039 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-039: Journey Stats heading in sidebar', () => {
+    it('renders the Journey Stats section heading', async () => {
+      await renderAndWait();
+      expect(screen.getByText('Journey Stats')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-040 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-040: No trips linked message', () => {
+    it('shows "No trips linked yet" when journey has no trips', async () => {
+      setupDefaultHandlers({ trips: [] });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('No trips linked yet')).toBeInTheDocument();
+    });
+  });
+
+  // ── Helper: open entry editor ────────────────────────��─────────────────
+  async function openEntryEditor(user: ReturnType<typeof userEvent.setup>) {
+    // The + button is inside the view controls row, after the tab group
+    // Structure: div.justify-between > [div(tabs), button(+)]
+    // The tab group div contains the Timeline/Gallery/Map buttons
+    const tabGroup = screen.getByRole('button', { name: /timeline/i }).parentElement!;
+    // The + button is the next sibling of the tab group
+    const addBtn = tabGroup.nextElementSibling as HTMLElement;
+    expect(addBtn).toBeTruthy();
+    expect(addBtn.tagName).toBe('BUTTON');
+
+    await user.click(addBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('New Entry')).toBeInTheDocument();
+    });
+  }
+
+  // ── FE-PAGE-JOURNEYDETAIL-041 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-041: Click Add Entry opens editor dialog with title placeholder', () => {
+    it('opens entry editor showing title placeholder when + button is clicked', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Title input has placeholder
+      expect(screen.getByPlaceholderText('Give this moment a name...')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-042 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-042: Entry editor shows date picker', () => {
+    it('shows the Date label and a date picker button inside the editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      expect(screen.getByText('Date')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-043 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-043: Entry editor shows mood selector with 4 options', () => {
+    it('shows 4 mood buttons: Amazing, Good, Neutral, Rough', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      expect(screen.getByText('Mood')).toBeInTheDocument();
+      // In the editor, mood buttons render labels from i18n
+      // The timeline already shows "Amazing" and "Good" from entries, so use getAllByText
+      const amazingButtons = screen.getAllByText('Amazing');
+      expect(amazingButtons.length).toBeGreaterThanOrEqual(1);
+      expect(screen.getByText('Neutral')).toBeInTheDocument();
+      expect(screen.getByText('Rough')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-044 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-044: Entry editor shows weather selector with 6 options', () => {
+    it('shows 6 weather buttons: Sunny, Partly cloudy, Cloudy, Rainy, Stormy, Snowy', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      expect(screen.getByText('Weather')).toBeInTheDocument();
+      // Weather labels from i18n translations
+      expect(screen.getByText('Partly cloudy')).toBeInTheDocument();
+      expect(screen.getByText('Rainy')).toBeInTheDocument();
+      expect(screen.getByText('Stormy')).toBeInTheDocument();
+      expect(screen.getByText('Snowy')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-045 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-045: Entry editor shows Pros & Cons section', () => {
+    it('renders Pros and Cons labels inside the editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // The editor shows "Pros & Cons" label (displayed uppercase via CSS class)
+      // The timeline view already shows "Pros & Cons" from the first entry, so use getAllByText
+      const prosConsLabels = screen.getAllByText('Pros & Cons');
+      expect(prosConsLabels.length).toBeGreaterThanOrEqual(2);
+      // It also shows sub-labels Pros and Cons
+      expect(screen.getByText('Pros')).toBeInTheDocument();
+      expect(screen.getByText('Cons')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-046 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-046: Entry editor shows Cancel button', () => {
+    it('renders a Cancel button in the editor footer', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Editor footer has Cancel and Save buttons
+      const cancelButtons = screen.getAllByText('Cancel');
+      expect(cancelButtons.length).toBeGreaterThanOrEqual(1);
+      expect(screen.getByText('Save')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-047 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-047: Cancel closes editor', () => {
+    it('closes the entry editor when Cancel is clicked', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Click Cancel to close
+      const cancelButtons = screen.getAllByText('Cancel');
+      // The Cancel button in the editor footer (not the ConfirmDialog mock)
+      await user.click(cancelButtons[0]);
+
+      await waitFor(() => {
+        expect(screen.queryByText('New Entry')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Helper: open settings dialog ────────────────────────────────────────
+  async function openSettingsDialog(user: ReturnType<typeof userEvent.setup>) {
+    const heroTitle = screen.getByText('Italy 2026');
+    const heroCard = heroTitle.closest('[style]') as HTMLElement;
+    const heroButtons = heroCard!.querySelectorAll('button');
+    await user.click(heroButtons[heroButtons.length - 1] as HTMLElement);
+
+    await waitFor(() => {
+      expect(screen.getByText('Journey Settings')).toBeInTheDocument();
+    });
+  }
+
+  // ── FE-PAGE-JOURNEYDETAIL-048 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-048: Click settings gear opens settings dialog', () => {
+    it('opens Journey Settings dialog when MoreHorizontal button in hero is clicked', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+      // If we reach here, the dialog opened successfully (openSettingsDialog asserts it)
+      expect(screen.getByText('Journey Settings')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-049 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-049: Settings shows journey name input', () => {
+    it('renders the Name label and an input with the journey title', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // "Name" label from i18n (displayed uppercase via CSS class)
+      expect(screen.getByText('Name')).toBeInTheDocument();
+      // The input has the current journey title
+      const nameInput = screen.getByDisplayValue('Italy 2026');
+      expect(nameInput).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-050 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-050: Settings shows subtitle input', () => {
+    it('renders the Subtitle label and input with the journey subtitle', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      expect(screen.getByText('Subtitle')).toBeInTheDocument();
+      const subtitleInput = screen.getByDisplayValue('Rome, Florence, Venice');
+      expect(subtitleInput).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-051 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-051: Settings shows Delete Journey button (danger)', () => {
+    it('renders a Delete button in the settings dialog footer', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // The Delete button has red text and a Trash2 icon
+      const deleteBtn = screen.getByRole('button', { name: /delete/i });
+      expect(deleteBtn).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-052 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-052: Close settings dialog', () => {
+    it('closes the settings dialog when Cancel is clicked', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Click Cancel in settings footer
+      const cancelButtons = screen.getAllByText('Cancel');
+      // Find the Cancel that belongs to the settings dialog
+      const settingsCancel = cancelButtons.find(
+        (btn) => btn.closest('[class*="fixed"]') !== null,
+      );
+      expect(settingsCancel).toBeTruthy();
+      await user.click(settingsCancel!);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Journey Settings')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-053 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-053: Share section renders in settings', () => {
+    it('renders the Public Share section inside settings dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // JourneyShareSection renders "Public Share" label (displayed uppercase via CSS class)
+      // and the "Create share link" button since the MSW handler returns link: null
+      await waitFor(() => {
+        expect(screen.getByText('Public Share')).toBeInTheDocument();
+      });
+      expect(screen.getByText('Create share link')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-054 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-054: Link trip section exists in sidebar', () => {
+    it('renders the Synced Trips heading with a + button in the sidebar', async () => {
+      await renderAndWait();
+
+      // The sidebar panel has "Synced Trips" heading with a + button
+      expect(screen.getByText('Synced Trips')).toBeInTheDocument();
+      // The + button next to Synced Trips is a 22x22 button
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      expect(panel).toBeTruthy();
+
+      // The panel header has a Plus button
+      const plusBtns = panel!.querySelectorAll('button');
+      expect(plusBtns.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-055 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-055: Gallery tab shows photos', () => {
+    it('shows the photo count and photo images in gallery view', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      // Gallery renders photos as images
+      const imgs = document.querySelectorAll('img');
+      const srcs = Array.from(imgs).map((img) => img.getAttribute('src'));
+      expect(srcs).toContain('/uploads/photos/test.jpg');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-056 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-056: Gallery shows upload button', () => {
+    it('renders an Upload button in gallery view header', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      // Gallery has an Upload button
+      expect(screen.getByText('Upload')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-057 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-057: Map tab renders location list', () => {
+    it('shows location entries in the map view list', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+
+      // Map view renders a location list with entry titles/location names
+      // The MapView component shows entry names in clickable location items
+      expect(screen.getByText('Arrived in Rome')).toBeInTheDocument();
+      expect(screen.getByText('Florence Day')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-058 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-058: Map shows entry count', () => {
+    it('shows Places stat in map view stats header', async () => {
+      const user = userEvent.setup();
+      await renderAndWait();
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+
+      // MapView stats header shows Places, Days, Stories counts
+      // mapEntries has 2 entries (both have lat/lng)
+      const placesLabels = screen.getAllByText(/Places/i);
+      expect(placesLabels.length).toBeGreaterThanOrEqual(1);
+      expect(screen.getByText('Stories')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-059 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-059: Contributors section shows invite button', () => {
+    it('renders the Contributors heading with an invite button in sidebar', async () => {
+      await renderAndWait();
+
+      // Sidebar has a Contributors panel
+      expect(screen.getByText('Contributors')).toBeInTheDocument();
+
+      // The Contributors panel header has a UserPlus button for inviting
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      expect(panel).toBeTruthy();
+
+      // Find the invite button (UserPlus icon button)
+      const btns = panel!.querySelectorAll('button');
+      expect(btns.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-060 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-060: Multiple entries show in chronological day groups', () => {
+    it('renders entries grouped by day with correct day numbers', async () => {
+      await renderAndWait();
+
+      // Two entries on two different dates: 2026-03-15 and 2026-03-16
+      // Day headers show "Sunday, March 15" and "Monday, March 16"
+      expect(screen.getByText(/Sunday, March 15/)).toBeInTheDocument();
+      expect(screen.getByText(/Monday, March 16/)).toBeInTheDocument();
+
+      // Day group numbers are shown as badges: 1 and 2
+      const dayBadges = document.querySelectorAll('[class*="sticky"] [class*="rounded-lg"]');
+      expect(dayBadges.length).toBeGreaterThanOrEqual(2);
+
+      // Each day group shows its entries
+      expect(screen.getByText('Arrived in Rome')).toBeInTheDocument();
+      expect(screen.getByText('Florence Day')).toBeInTheDocument();
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // NEW TESTS: FE-PAGE-JOURNEYDETAIL-061 to 085
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  // ── EntryEditor interactions (061-067) ─────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-061 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-061: Type in title field updates value', () => {
+    it('updates the title input value when user types', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      const titleInput = screen.getByPlaceholderText('Give this moment a name...');
+      await user.type(titleInput, 'Sunset at the Vatican');
+
+      expect(titleInput).toHaveValue('Sunset at the Vatican');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-062 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-062: Type in story textarea updates value', () => {
+    it('updates the story textarea value when user types', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      const storyTextarea = screen.getByPlaceholderText('Write your story...');
+      await user.type(storyTextarea, 'A wonderful evening');
+
+      expect(storyTextarea).toHaveValue('A wonderful evening');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-063 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-063: Select mood option highlights it', () => {
+    it('clicking a mood button in the editor activates it', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // The editor renders mood buttons; "Neutral" only appears in the editor (not timeline)
+      const neutralBtn = screen.getByText('Neutral');
+      await user.click(neutralBtn);
+
+      // After clicking, the button gets a non-transparent background (active state)
+      expect(neutralBtn.closest('button')).toHaveStyle({ background: '#F4F4F5' });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-064 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-064: Select weather option highlights it', () => {
+    it('clicking a weather button in the editor activates it', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // "Rainy" only appears in the editor
+      const rainyBtn = screen.getByText('Rainy');
+      await user.click(rainyBtn);
+
+      // Active weather button gets bg-zinc-900 class
+      expect(rainyBtn.closest('button')!.className).toContain('bg-zinc-900');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-065 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-065: Add pro item via "Add another" button', () => {
+    it('adds a new pro input row when clicking "Add another" under Pros', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Find the "Add another" buttons — there should be two (one for pros, one for cons)
+      const addButtons = screen.getAllByText('Add another');
+      expect(addButtons.length).toBe(2);
+
+      // The first "Add another" is for Pros
+      await user.click(addButtons[0]);
+
+      // Now there should be 2 pro input fields (placeholder is the pro placeholder)
+      const proInputs = screen.getAllByPlaceholderText('Something great...');
+      expect(proInputs.length).toBe(2);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-066 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-066: Add con item via "Add another" button', () => {
+    it('adds a new con input row when clicking "Add another" under Cons', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // The second "Add another" is for Cons
+      const addButtons = screen.getAllByText('Add another');
+      await user.click(addButtons[1]);
+
+      // Now there should be 2 con input fields
+      const conInputs = screen.getAllByPlaceholderText('Not so great...');
+      expect(conInputs.length).toBe(2);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-067 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-067: Save button triggers onSave with entry data', () => {
+    it('clicking Save calls the API and closes the editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      // Add MSW handlers for creating and loading
+      server.use(
+        http.post('/api/journeys/1/entries', () => {
+          return HttpResponse.json({
+            id: 99, journey_id: 1, author_id: 1, type: 'entry',
+            entry_date: new Date().toISOString().split('T')[0],
+            title: 'Test Entry', story: null, location_name: null,
+            location_lat: null, location_lng: null, mood: null, weather: null,
+            tags: [], pros_cons: null, visibility: 'private', sort_order: 0,
+            entry_time: null, photos: [], created_at: now, updated_at: now,
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Type a title
+      const titleInput = screen.getByPlaceholderText('Give this moment a name...');
+      await user.type(titleInput, 'Test Entry');
+
+      // Click Save
+      const saveBtn = screen.getByText('Save');
+      await user.click(saveBtn);
+
+      // The editor should close after save completes
+      await waitFor(() => {
+        expect(screen.queryByText('New Entry')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Settings save/delete (068-071) ─────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-068 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-068: Change journey name in settings input', () => {
+    it('allows typing a new name in the settings name input', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      const nameInput = screen.getByDisplayValue('Italy 2026');
+      await user.clear(nameInput);
+      await user.type(nameInput, 'Spain 2026');
+
+      expect(nameInput).toHaveValue('Spain 2026');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-069 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-069: Save settings calls API', () => {
+    it('clicking Save in settings dialog calls PATCH /api/journeys/1', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let patchCalled = false;
+
+      server.use(
+        http.patch('/api/journeys/1', () => {
+          patchCalled = true;
+          return HttpResponse.json({ ...mockJourneyDetail, title: 'Updated Title' });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Click Save in the settings dialog footer
+      // The settings dialog footer has [Delete, Cancel, Save] buttons
+      const settingsDialog = screen.getByText('Journey Settings').closest('[class*="fixed"]')!;
+      const saveBtns = settingsDialog.querySelectorAll('button');
+      const saveBtn = Array.from(saveBtns).find(b => b.textContent === 'Save')!;
+      await user.click(saveBtn as HTMLElement);
+
+      await waitFor(() => {
+        expect(patchCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-070 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-070: Delete journey shows confirm dialog', () => {
+    it('clicking Delete in settings shows a confirmation dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Click the Delete button (red button in the settings footer)
+      const deleteBtn = screen.getByRole('button', { name: /delete/i });
+      await user.click(deleteBtn);
+
+      // The ConfirmDialog mock always renders (no isOpen gate).
+      // After clicking Delete, the delete-journey confirm message should appear.
+      await waitFor(() => {
+        expect(screen.getByText(/Delete "Italy 2026"\? All entries and photos will be lost\./)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-071 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-071: Cover image section visible in settings', () => {
+    it('renders the Cover Image label in the settings dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      expect(screen.getByText('Cover Image')).toBeInTheDocument();
+      // The button to upload cover should show "Add cover image" (i18n key: journey.settings.addCover)
+      expect(screen.getByText('Add cover image')).toBeInTheDocument();
+    });
+  });
+
+  // ── Share link (072-074) ───────────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-072 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-072: Create share link calls API and shows link', () => {
+    it('clicking "Create share link" calls POST and shows the link URL', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.post('/api/journeys/1/share-link', () => {
+          return HttpResponse.json({
+            token: 'abc123',
+            share_timeline: true,
+            share_gallery: true,
+            share_map: true,
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Wait for the share section to load
+      await waitFor(() => {
+        expect(screen.getByText('Create share link')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Create share link'));
+
+      // After creation, the link URL should appear
+      await waitFor(() => {
+        expect(screen.getByText(/abc123/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-073 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-073: Copy link button exists after creation', () => {
+    it('shows a Copy button after share link is created', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      // Return an existing share link from the GET handler
+      server.use(
+        http.get('/api/journeys/1/share-link', () => {
+          return HttpResponse.json({
+            link: {
+              token: 'existing-token',
+              share_timeline: true,
+              share_gallery: true,
+              share_map: true,
+            },
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      await waitFor(() => {
+        expect(screen.getByText('Copy')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-074 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-074: Delete share link removes it', () => {
+    it('clicking "Remove share link" calls DELETE and returns to create state', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let deleteCalled = false;
+
+      server.use(
+        http.get('/api/journeys/1/share-link', () => {
+          return HttpResponse.json({
+            link: {
+              token: 'to-delete',
+              share_timeline: true,
+              share_gallery: true,
+              share_map: true,
+            },
+          });
+        }),
+        http.delete('/api/journeys/1/share-link', () => {
+          deleteCalled = true;
+          return HttpResponse.json({ success: true });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      await waitFor(() => {
+        expect(screen.getByText('Remove share link')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Remove share link'));
+
+      await waitFor(() => {
+        expect(deleteCalled).toBe(true);
+      });
+
+      // After deletion, the "Create share link" button should reappear
+      await waitFor(() => {
+        expect(screen.getByText('Create share link')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── AddTripDialog (075-077) ────────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-075 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-075: Add Trip button opens dialog with search input', () => {
+    it('clicking the + button in the Synced Trips panel opens the Add Trip dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({ trips: [] });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Find the Synced Trips panel and its + button
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const plusBtns = panel!.querySelectorAll('button');
+      // The first button in the heading row is the + button
+      await user.click(plusBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Link Trip')).toBeInTheDocument();
+        expect(screen.getByText('Search Trip')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-076 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-076: Trip search shows results', () => {
+    it('available trips are shown in the dialog list', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({
+            trips: [
+              { id: 20, title: 'Paris Weekend', destination: 'Paris', start_date: '2026-05-01', end_date: '2026-05-03' },
+              { id: 21, title: 'Berlin Trip', destination: 'Berlin', start_date: '2026-06-10', end_date: '2026-06-15' },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open the Add Trip dialog
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const plusBtns = panel!.querySelectorAll('button');
+      await user.click(plusBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Paris Weekend')).toBeInTheDocument();
+        expect(screen.getByText('Berlin Trip')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-077 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-077: Select trip and link calls API', () => {
+    it('clicking Link on a trip calls POST /api/journeys/1/trips', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let linkCalled = false;
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({
+            trips: [
+              { id: 20, title: 'Paris Weekend', destination: 'Paris', start_date: '2026-05-01', end_date: '2026-05-03' },
+            ],
+          });
+        }),
+        http.post('/api/journeys/1/trips', () => {
+          linkCalled = true;
+          return HttpResponse.json({ success: true });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open Add Trip dialog
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const plusBtns = panel!.querySelectorAll('button');
+      await user.click(plusBtns[0] as HTMLElement);
+
+      // Wait for trips to load then click "Link"
+      await waitFor(() => {
+        expect(screen.getByText('Paris Weekend')).toBeInTheDocument();
+      });
+
+      const linkBtn = screen.getByText('Link');
+      await user.click(linkBtn);
+
+      await waitFor(() => {
+        expect(linkCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── ContributorInviteDialog (078-080) ──────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-078 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-078: Invite button opens dialog', () => {
+    it('clicking the invite button in Contributors panel opens the Invite Contributor dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({ users: [] });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Find the Contributors panel and its invite button
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      // The first button in the heading row is the UserPlus button
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invite Contributor')).toBeInTheDocument();
+        expect(screen.getByText('Search User')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-079 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-079: User search shows results', () => {
+    it('available users are shown in the Invite Contributor dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+              { id: 3, username: 'bob', email: 'bob@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open invite dialog
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('alice')).toBeInTheDocument();
+        expect(screen.getByText('bob')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-080 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-080: Add contributor calls API', () => {
+    it('selecting a user and clicking Invite calls POST /api/journeys/1/contributors', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let contributorCalled = false;
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+        http.post('/api/journeys/1/contributors', () => {
+          contributorCalled = true;
+          return HttpResponse.json({ success: true });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open invite dialog
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      // Wait for users to load
+      await waitFor(() => {
+        expect(screen.getByText('alice')).toBeInTheDocument();
+      });
+
+      // Click the user row to select alice
+      await user.click(screen.getByText('alice'));
+
+      // Click the Invite button
+      const inviteBtn = screen.getByText('Invite');
+      await user.click(inviteBtn);
+
+      await waitFor(() => {
+        expect(contributorCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── GalleryView (081-083) ──────────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-081 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-081: Gallery shows "No photos yet" when empty journey', () => {
+    it('renders the empty gallery state when journey has no photos', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      // Override with entries that have no photos
+      const emptyEntry = {
+        ...mockJourneyDetail.entries[0],
+        photos: [],
+      };
+      setupDefaultHandlers({
+        entries: [emptyEntry],
+        stats: { entries: 1, photos: 0, cities: 1 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      // Switch to gallery
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText('No photos yet')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-082 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-082: Gallery photo click opens lightbox', () => {
+    it('clicking a photo in gallery view opens the PhotoLightbox', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      // Switch to gallery
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      // Click the photo in the gallery grid
+      const galleryImgs = document.querySelectorAll('img[src="/uploads/photos/test.jpg"]');
+      expect(galleryImgs.length).toBeGreaterThanOrEqual(1);
+      await user.click(galleryImgs[0] as HTMLElement);
+
+      // PhotoLightbox is mocked; after clicking the parent div, the lightbox should render
+      await waitFor(() => {
+        expect(screen.getByTestId('photo-lightbox')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-083 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-083: Upload button triggers file input', () => {
+    it('the Upload button in gallery view exists and is clickable', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      // Switch to gallery
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload')).toBeInTheDocument();
+      });
+
+      // The Upload button should be present and associated with a hidden file input
+      const uploadBtn = screen.getByText('Upload').closest('button')!;
+      expect(uploadBtn).toBeTruthy();
+
+      // Verify the hidden file input exists in the gallery view
+      const fileInput = document.querySelector('input[type="file"][accept="image/*"]') as HTMLInputElement;
+      expect(fileInput).toBeTruthy();
+    });
+  });
+
+  // ── Entry actions (084-085) ────────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-084 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-084: Click edit on entry card opens EntryEditor with prefilled data', () => {
+    it('opens EntryEditor with the entry title prefilled when Edit is clicked from the context menu', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.patch('/api/journeys/entries/11', () => {
+          return HttpResponse.json({ ...mockJourneyDetail.entries[1] });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open context menu on the Florence Day entry (no photos, so menu is in header)
+      const florenceWrapper = document.querySelector('[data-entry-id="11"]')!;
+      const menuButtons = florenceWrapper.querySelectorAll('button');
+      await user.click(menuButtons[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+      });
+
+      // Click Edit
+      await user.click(screen.getByText('Edit'));
+
+      // The editor should open with "Edit Entry" title and the entry's title prefilled
+      await waitFor(() => {
+        expect(screen.getByText('Edit Entry')).toBeInTheDocument();
+      });
+
+      // The title input should be prefilled with the entry title
+      expect(screen.getByDisplayValue('Florence Day')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-085 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-085: Click delete on entry triggers delete confirmation', () => {
+    it('clicking Delete from the context menu shows a ConfirmDialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      // Open context menu on the Florence Day entry
+      const florenceWrapper = document.querySelector('[data-entry-id="11"]')!;
+      const menuButtons = florenceWrapper.querySelectorAll('button');
+      await user.click(menuButtons[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Delete')).toBeInTheDocument();
+      });
+
+      // Click Delete
+      await user.click(screen.getByText('Delete'));
+
+      // The ConfirmDialog mock always renders (no isOpen gate), but the message
+      // should now show the entry title since deleteTarget is set.
+      await waitFor(() => {
+        expect(screen.getByText(/Delete "Florence Day"\? This cannot be undone\./)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // NEW TESTS: FE-PAGE-JOURNEYDETAIL-086 to 115
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  // ── MapView deeper (086-089) ──────────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-086 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-086: Map view location click highlights item', () => {
+    it('clicking a location item in map view sets it as active', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+
+      // Click the "Arrived in Rome" location item
+      const romeItem = screen.getByText('Arrived in Rome');
+      await user.click(romeItem);
+
+      // After clicking, the item should gain active styles (translate-x-0.5 on the container)
+      await waitFor(() => {
+        const container = romeItem.closest('[class*="cursor-pointer"]');
+        expect(container).toBeTruthy();
+        expect(container!.className).toContain('translate-x-0.5');
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-087 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-087: Map view stats bar shows Places/Days/Stories', () => {
+    it('renders 3 stat cards in map view stats header', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+
+      // Stats bar shows Places, Days, and Stories
+      expect(screen.getByText('Stories')).toBeInTheDocument();
+      // 2 map entries = 2 Places
+      const placesLabels = screen.getAllByText(/Places/i);
+      expect(placesLabels.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-088 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-088: Map view shows day separators with day numbers', () => {
+    it('renders day group headers in the location list', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+
+      // Day separators show "Day 1" and "Day 2"
+      expect(screen.getByText('Day 1')).toBeInTheDocument();
+      expect(screen.getByText('Day 2')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-089 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-089: Map view shows connector lines between locations', () => {
+    it('renders connector lines between location items within a day', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      // Need two entries on the same day to see a connector
+      const twoOnSameDay = [
+        { ...mockJourneyDetail.entries[0], id: 10, entry_date: '2026-03-15' },
+        { ...mockJourneyDetail.entries[1], id: 11, entry_date: '2026-03-15', location_lat: 41.95, location_lng: 12.55 },
+      ];
+      setupDefaultHandlers({ entries: twoOnSameDay, stats: { entries: 2, photos: 1, cities: 2 } });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const mapBtn = screen.getByRole('button', { name: /map/i });
+      await user.click(mapBtn);
+
+      await waitFor(() => {
+        expect(screen.getAllByTestId('journey-map').length).toBeGreaterThanOrEqual(1);
+      });
+
+      // Connector lines are thin divs with specific classes
+      const connectors = document.querySelectorAll('[class*="w-0.5"][class*="h-2"]');
+      expect(connectors.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── Gallery deeper (090-093) ──────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-090 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-090: Gallery photo shows entry date overlay', () => {
+    it('renders the entry date as an overlay on gallery photos', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      // The entry date '2026-03-15' is shown as an overlay on each gallery photo
+      expect(screen.getByText('2026-03-15')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-091 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-091: Gallery shows photo caption on hover area', () => {
+    it('renders photo caption text in the gallery grid', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      // The photo has caption 'Colosseum'
+      expect(screen.getByText('Colosseum')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-092 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-092: Gallery shows provider badge for remote photos', () => {
+    it('renders "Immich" badge on photos from immich provider', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      const immichEntry = {
+        ...mockJourneyDetail.entries[0],
+        photos: [{
+          id: 200, entry_id: 10, provider: 'immich', file_path: null,
+          asset_id: 'asset-123', owner_id: 1, thumbnail_path: null,
+          caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now,
+        }],
+      };
+      setupDefaultHandlers({
+        entries: [immichEntry, mockJourneyDetail.entries[1]],
+        stats: { entries: 2, photos: 1, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('Immich')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-093 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-093: Gallery shows Synology badge for synology photos', () => {
+    it('renders "Synology" badge on photos from synology provider', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      const synologyEntry = {
+        ...mockJourneyDetail.entries[0],
+        photos: [{
+          id: 201, entry_id: 10, provider: 'synology', file_path: null,
+          asset_id: 'syn-456', owner_id: 1, thumbnail_path: null,
+          caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now,
+        }],
+      };
+      setupDefaultHandlers({
+        entries: [synologyEntry, mockJourneyDetail.entries[1]],
+        stats: { entries: 2, photos: 1, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      expect(screen.getByText('Synology')).toBeInTheDocument();
+    });
+  });
+
+  // ── ProviderPicker (094-098) ──────────────────────────────────────────
+
+  // Helper: open gallery with connected provider and click provider button
+  async function openGalleryWithProvider(user: ReturnType<typeof userEvent.setup>) {
+    // Override the default handler to mark Immich as connected
+    server.use(
+      http.get('/api/integrations/memories/:provider/status', () => {
+        return HttpResponse.json({ connected: true });
+      }),
+      http.post('/api/integrations/memories/:provider/search', () => {
+        return HttpResponse.json({
+          assets: [
+            { id: 'asset-1', city: 'Rome', createdAt: '2026-03-15' },
+            { id: 'asset-2', city: 'Florence', createdAt: '2026-03-16' },
+          ],
+        });
+      }),
+      http.get('/api/integrations/memories/:provider/albums', () => {
+        return HttpResponse.json({
+          albums: [
+            { id: 'album-1', albumName: 'Italy Album', assetCount: 10, startDate: '2026-03-14', endDate: '2026-03-20' },
+          ],
+        });
+      }),
+    );
+
+    render(<JourneyDetailPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+    });
+
+    // Switch to gallery
+    const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+    await user.click(galleryBtn);
+
+    // Wait for provider button to appear
+    await waitFor(() => {
+      expect(screen.getByText('Immich')).toBeInTheDocument();
+    });
+
+    // Click the Immich provider button to open ProviderPicker
+    await user.click(screen.getByText('Immich'));
+
+    // Wait for the picker modal to appear
+    await waitFor(() => {
+      // ProviderPicker header shows the provider name
+      const headers = screen.getAllByText('Immich');
+      expect(headers.length).toBeGreaterThanOrEqual(2); // button + modal header
+    });
+  }
+
+  // ── FE-PAGE-JOURNEYDETAIL-094 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-094: ProviderPicker opens with filter tabs', () => {
+    it('opening the provider picker shows trip/custom/album filter tabs', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Filter tabs use i18n keys: journey.trips.link = "Link", common.edit = "Edit", journey.share.gallery = "Gallery"
+      // "Link" may appear in multiple places, so check the picker has all three tabs
+      const pickerModal = screen.getByText('Add to').closest('[class*="fixed"]')!;
+      expect(pickerModal).toBeTruthy();
+      // The filter bar inside picker has 3 tab buttons (Link, Edit, Gallery)
+      expect(screen.getByText('Edit')).toBeInTheDocument();
+      expect(screen.getByText('Add to')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-095 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-095: ProviderPicker shows photo grid', () => {
+    it('renders a grid of photos from the provider search results', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Photos should load via the search endpoint, rendered as thumbnail images
+      await waitFor(() => {
+        const imgs = document.querySelectorAll('img[src*="/api/integrations/memories/"]');
+        expect(imgs.length).toBeGreaterThanOrEqual(2);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-096 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-096: ProviderPicker shows selected count and Add button', () => {
+    it('shows selected count in footer and Add button', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Footer shows "0 selected" initially
+      await waitFor(() => {
+        expect(screen.getByText('selected')).toBeInTheDocument();
+      });
+
+      // Add button shows "Add" (disabled when 0 selected)
+      const addBtn = screen.getByRole('button', { name: /^Add/ });
+      expect(addBtn).toBeDisabled();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-097 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-097: ProviderPicker Cancel button closes modal', () => {
+    it('clicking Cancel in the provider picker closes it', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Footer has Cancel button
+      const cancelBtns = screen.getAllByText('Cancel');
+      const pickerCancel = cancelBtns.find(
+        btn => btn.closest('[class*="fixed"]') !== null,
+      );
+      expect(pickerCancel).toBeTruthy();
+      await user.click(pickerCancel!);
+
+      // After closing, the Immich header in the picker should be gone
+      // (only the provider button in the gallery bar remains)
+      await waitFor(() => {
+        const immichTexts = screen.getAllByText('Immich');
+        expect(immichTexts.length).toBe(1); // only the gallery button
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-098 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-098: ProviderPicker shows "Add to" target selector', () => {
+    it('renders the "Add to" dropdown with Gallery as default target', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // "Add to" label and default target "Gallery"
+      expect(screen.getByText('Add to')).toBeInTheDocument();
+      // Gallery is the default target label (shown in the button)
+      const addToSection = screen.getByText('Add to').parentElement!;
+      expect(addToSection.textContent).toContain('Gallery');
+    });
+  });
+
+  // ── DatePicker (099-101) ──────────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-099 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-099: DatePicker shows "Select date" button in entry editor', () => {
+    it('renders the date picker button with a formatted date', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // The date picker shows today's formatted date (e.g., "Apr 11, 2026")
+      const dateButtons = document.querySelectorAll('button[type="button"]');
+      const dateBtnTexts = Array.from(dateButtons).map(b => b.textContent);
+      // Should have at least one button with a month name
+      const hasDateButton = dateBtnTexts.some(t => t && /\w{3}\s+\d+,\s+\d{4}/.test(t));
+      expect(hasDateButton).toBe(true);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-100 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-100: DatePicker opens calendar dropdown', () => {
+    it('clicking the date button opens a calendar with month name and day grid', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Find and click the date picker button (the one with the formatted date)
+      const dateButtons = Array.from(document.querySelectorAll('button[type="button"]'));
+      const dateBtn = dateButtons.find(b => b.textContent && /\w{3}\s+\d+,\s+\d{4}/.test(b.textContent));
+      expect(dateBtn).toBeTruthy();
+      await user.click(dateBtn as HTMLElement);
+
+      // Calendar dropdown should show weekday headers
+      await waitFor(() => {
+        expect(screen.getByText('Su')).toBeInTheDocument();
+        expect(screen.getByText('Mo')).toBeInTheDocument();
+        expect(screen.getByText('Tu')).toBeInTheDocument();
+        expect(screen.getByText('We')).toBeInTheDocument();
+        expect(screen.getByText('Th')).toBeInTheDocument();
+        expect(screen.getByText('Fr')).toBeInTheDocument();
+        expect(screen.getByText('Sa')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-101 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-101: DatePicker shows month navigation arrows', () => {
+    it('renders prev and next month navigation buttons', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Open the date picker
+      const dateButtons = Array.from(document.querySelectorAll('button[type="button"]'));
+      const dateBtn = dateButtons.find(b => b.textContent && /\w{3}\s+\d+,\s+\d{4}/.test(b.textContent));
+      await user.click(dateBtn as HTMLElement);
+
+      // The calendar should have the month name and two navigation buttons
+      await waitFor(() => {
+        expect(screen.getByText('Su')).toBeInTheDocument();
+      });
+
+      // The calendar header has prev/next buttons. They are type="button" within the calendar dropdown.
+      // There should be navigation buttons around the month name
+      const calendarDropdown = screen.getByText('Su').closest('[class*="rounded-xl"]')!;
+      const navButtons = calendarDropdown.querySelectorAll('button[type="button"]');
+      // At minimum: 2 nav buttons + day cells
+      expect(navButtons.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  // ── EntryEditor deeper (102-107) ──────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-102 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-102: EntryEditor shows Upload photos button', () => {
+    it('renders "Upload photos" button inside the entry editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      expect(screen.getByText('Upload photos')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-103 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-103: EntryEditor shows "From Gallery" button when gallery photos exist', () => {
+    it('renders "From Gallery" button when journey has gallery photos', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // The journey has entries with photos, so galleryPhotos.length > 0
+      expect(screen.getByText('From Gallery')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-104 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-104: EntryEditor "From Gallery" toggles gallery picker', () => {
+    it('clicking "From Gallery" opens an inline gallery picker grid', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      const fromGalleryBtn = screen.getByText('From Gallery');
+      await user.click(fromGalleryBtn);
+
+      // The gallery picker shows thumbnail images from existing photos
+      await waitFor(() => {
+        // The gallery picker grid renders gallery photos as clickable thumbnails
+        const pickerImgs = document.querySelectorAll('img[src="/uploads/photos/test.jpg"]');
+        expect(pickerImgs.length).toBeGreaterThanOrEqual(1);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-105 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-105: EntryEditor has hidden file input', () => {
+    it('has a hidden file input with accept="image/*" and multiple attribute', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // The editor has a hidden file input
+      const fileInputs = document.querySelectorAll('input[type="file"][accept="image/*"]');
+      expect(fileInputs.length).toBeGreaterThanOrEqual(1);
+      // Should have the multiple attribute
+      const editorFileInput = Array.from(fileInputs).find(input => {
+        return input.closest('[class*="fixed"]') !== null;
+      });
+      expect(editorFileInput).toBeTruthy();
+      expect((editorFileInput as HTMLInputElement).multiple).toBe(true);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-106 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-106: EntryEditor shows MarkdownToolbar', () => {
+    it('renders the markdown toolbar above the story textarea', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      expect(screen.getByTestId('markdown-toolbar')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-107 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-107: EntryEditor shows location search input', () => {
+    it('renders the Location label and search input in the editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      expect(screen.getByText('Location')).toBeInTheDocument();
+      expect(screen.getByPlaceholderText('Search location...')).toBeInTheDocument();
+    });
+  });
+
+  // ── AddTripDialog deeper (108-110) ────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-108 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-108: Add Trip search filters results', () => {
+    it('typing in the search input filters the available trips', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({
+            trips: [
+              { id: 20, title: 'Paris Weekend', destination: 'Paris', start_date: '2026-05-01', end_date: '2026-05-03' },
+              { id: 21, title: 'Berlin Trip', destination: 'Berlin', start_date: '2026-06-10', end_date: '2026-06-15' },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open Add Trip dialog
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const plusBtns = panel!.querySelectorAll('button');
+      await user.click(plusBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Paris Weekend')).toBeInTheDocument();
+        expect(screen.getByText('Berlin Trip')).toBeInTheDocument();
+      });
+
+      // Type "Paris" in the search input
+      const searchInput = screen.getByPlaceholderText('Trip name or destination...');
+      await user.type(searchInput, 'Paris');
+
+      // Only Paris Weekend should be visible
+      await waitFor(() => {
+        expect(screen.getByText('Paris Weekend')).toBeInTheDocument();
+        expect(screen.queryByText('Berlin Trip')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-109 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-109: Add Trip dialog shows empty state', () => {
+    it('shows "No trips available" when no trips match', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({ trips: [] });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open Add Trip dialog
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const plusBtns = panel!.querySelectorAll('button');
+      await user.click(plusBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('No trips available')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-110 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-110: Add Trip dialog shows trip destination and dates', () => {
+    it('renders destination and start_date in the trip list items', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({
+            trips: [
+              { id: 20, title: 'Paris Weekend', destination: 'Paris', start_date: '2026-05-01', end_date: '2026-05-03' },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open Add Trip dialog
+      const syncedTripsHeading = screen.getByText('Synced Trips');
+      const panel = syncedTripsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const plusBtns = panel!.querySelectorAll('button');
+      await user.click(plusBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Paris Weekend')).toBeInTheDocument();
+      });
+
+      // Destination and start date appear combined in a subtitle: "Paris · 2026-05-01"
+      expect(screen.getByText(/Paris.*2026-05-01/)).toBeInTheDocument();
+    });
+  });
+
+  // ── ContributorInviteDialog deeper (111-113) ──────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-111 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-111: Contributor invite shows role selector', () => {
+    it('renders viewer and editor role buttons in the invite dialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open invite dialog
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invite Contributor')).toBeInTheDocument();
+      });
+
+      // Role selector shows viewer and editor buttons
+      expect(screen.getByText('viewer')).toBeInTheDocument();
+      expect(screen.getByText('editor')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-112 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-112: Contributor invite role toggle works', () => {
+    it('clicking editor role button switches the active role', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open invite dialog
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('viewer')).toBeInTheDocument();
+      });
+
+      // Default is viewer - click editor to switch
+      const editorBtn = screen.getByText('editor');
+      await user.click(editorBtn);
+
+      // Editor button should now be active (bg-zinc-900 class)
+      expect(editorBtn.closest('button')!.className).toContain('bg-zinc-900');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-113 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-113: Contributor invite search filters users', () => {
+    it('typing in search filters the user list', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+              { id: 3, username: 'bob', email: 'bob@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open invite dialog
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('alice')).toBeInTheDocument();
+        expect(screen.getByText('bob')).toBeInTheDocument();
+      });
+
+      // Type "alice" to filter
+      const searchInput = screen.getByPlaceholderText('Username or email...');
+      await user.type(searchInput, 'alice');
+
+      await waitFor(() => {
+        expect(screen.getByText('alice')).toBeInTheDocument();
+        expect(screen.queryByText('bob')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── Settings deeper (114-115) ─────────────────────────────────────────
+
+  // ── FE-PAGE-JOURNEYDETAIL-114 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-114: Settings shows Synced Trips section with trip list', () => {
+    it('renders the Synced Trips section with existing trip inside settings', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Settings dialog has its own "Synced Trips" section
+      const syncedTripsLabels = screen.getAllByText('Synced Trips');
+      expect(syncedTripsLabels.length).toBeGreaterThanOrEqual(1);
+
+      // The trip "Italy Trip" should appear inside settings
+      const italyTripTexts = screen.getAllByText('Italy Trip');
+      expect(italyTripTexts.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-115 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-115: Settings shows Contributors section with invite button', () => {
+    it('renders the Contributors section and Invite Contributor button inside settings', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Settings dialog has a Contributors section
+      const contributorsLabels = screen.getAllByText('Contributors');
+      expect(contributorsLabels.length).toBeGreaterThanOrEqual(1);
+
+      // The "Invite Contributor" button should appear inside settings
+      expect(screen.getByText('Invite Contributor')).toBeInTheDocument();
+
+      // The owner "testuser" should appear in the contributor list
+      const ownerTexts = screen.getAllByText('testuser');
+      expect(ownerTexts.length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // NEW TESTS: FE-PAGE-JOURNEYDETAIL-116 to 140
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  // ── FE-PAGE-JOURNEYDETAIL-116 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-116: Cover image renders in hero when set', () => {
+    it('renders the cover image with gradient overlay when cover_image is present', async () => {
+      setupDefaultHandlers({ cover_image: 'covers/hero.jpg' });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const coverImg = document.querySelector('img[src="/uploads/covers/hero.jpg"]');
+      expect(coverImg).toBeTruthy();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-117 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-117: PhotoGrid shows +N overlay for >3 photos', () => {
+    it('renders "+N" badge when entry has more than 3 photos', async () => {
+      const multiPhotoEntry = {
+        ...mockJourneyDetail.entries[0],
+        photos: [
+          { id: 100, entry_id: 10, provider: 'local', file_path: 'photos/a.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now },
+          { id: 101, entry_id: 10, provider: 'local', file_path: 'photos/b.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 1, width: 800, height: 600, shared: 1, created_at: now },
+          { id: 102, entry_id: 10, provider: 'local', file_path: 'photos/c.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 2, width: 800, height: 600, shared: 1, created_at: now },
+          { id: 103, entry_id: 10, provider: 'local', file_path: 'photos/d.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 3, width: 800, height: 600, shared: 1, created_at: now },
+          { id: 104, entry_id: 10, provider: 'local', file_path: 'photos/e.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 4, width: 800, height: 600, shared: 1, created_at: now },
+        ],
+      };
+      setupDefaultHandlers({
+        entries: [multiPhotoEntry, mockJourneyDetail.entries[1]],
+        stats: { entries: 2, photos: 5, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      // The grid shows first 3 photos, and a "+2" badge
+      expect(screen.getByText('+2')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-118 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-118: PhotoGrid 2-photo layout', () => {
+    it('renders a 2-column grid when entry has exactly 2 photos', async () => {
+      const twoPhotoEntry = {
+        ...mockJourneyDetail.entries[0],
+        photos: [
+          { id: 100, entry_id: 10, provider: 'local', file_path: 'photos/a.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now },
+          { id: 101, entry_id: 10, provider: 'local', file_path: 'photos/b.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 1, width: 800, height: 600, shared: 1, created_at: now },
+        ],
+      };
+      setupDefaultHandlers({
+        entries: [twoPhotoEntry, mockJourneyDetail.entries[1]],
+        stats: { entries: 2, photos: 2, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      // Both photos render in the grid
+      const imgs = document.querySelectorAll('img');
+      const srcs = Array.from(imgs).map(img => img.getAttribute('src'));
+      expect(srcs).toContain('/uploads/photos/a.jpg');
+      expect(srcs).toContain('/uploads/photos/b.jpg');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-119 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-119: ProviderPicker select a photo toggles selection', () => {
+    it('clicking a photo in the picker toggles its selection state', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Wait for photos to load
+      await waitFor(() => {
+        const imgs = document.querySelectorAll('img[src*="/api/integrations/memories/"]');
+        expect(imgs.length).toBeGreaterThanOrEqual(2);
+      });
+
+      // Click the first provider photo (the grid item's parent div handles onClick)
+      // The picker photo items are inside the scrollable photo grid area
+      const pickerModal = screen.getByText('Add to').closest('[class*="fixed"]')!;
+      const pickerImgs = pickerModal.querySelectorAll('img[src*="/api/integrations/memories/"]');
+      expect(pickerImgs.length).toBeGreaterThanOrEqual(2);
+
+      // Click the parent div of the first image (the clickable container)
+      const firstPhotoContainer = pickerImgs[0].closest('[class*="aspect-square"]') as HTMLElement;
+      expect(firstPhotoContainer).toBeTruthy();
+      await user.click(firstPhotoContainer);
+
+      // After selection, the Add button should show count
+      await waitFor(() => {
+        const addBtn = screen.getByRole('button', { name: /^Add/ });
+        expect(addBtn.textContent).toContain('1');
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-120 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-120: ProviderPicker "Add to" dropdown shows entries', () => {
+    it('clicking the "Add to" button opens a dropdown with Gallery and entry options', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Click the "Add to" dropdown button
+      const addToSection = screen.getByText('Add to').parentElement!;
+      const dropdownBtn = addToSection.querySelector('button')!;
+      await user.click(dropdownBtn as HTMLElement);
+
+      // Dropdown should show "Gallery" option and entry titles
+      await waitFor(() => {
+        // The dropdown lists entries from the journey
+        // Gallery option is the default at the top
+        const dropdownItems = document.querySelectorAll('[class*="absolute"] button');
+        expect(dropdownItems.length).toBeGreaterThanOrEqual(1);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-121 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-121: ProviderPicker album tab shows albums', () => {
+    it('switching to album tab loads and shows album buttons', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // The picker modal has 3 filter tabs: Link, Edit, Gallery
+      // Find the "Gallery" tab button inside the picker modal (not the main view)
+      const pickerModal = screen.getByText('Add to').closest('[class*="fixed"]')!;
+      const filterButtons = pickerModal.querySelectorAll('[class*="px-3"][class*="py-1\\.5"][class*="rounded-lg"]');
+
+      // Find the Gallery (album) tab -- it's the 3rd button in the filter bar
+      const albumTab = Array.from(filterButtons).find(btn => btn.textContent === 'Gallery');
+      expect(albumTab).toBeTruthy();
+      await user.click(albumTab as HTMLElement);
+
+      // Albums should load and display
+      await waitFor(() => {
+        expect(screen.getByText(/Italy Album/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-122 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-122: DatePicker clicking a day selects it', () => {
+    it('clicking a day cell in the calendar selects that date', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Open date picker
+      const dateButtons = Array.from(document.querySelectorAll('button[type="button"]'));
+      const dateBtn = dateButtons.find(b => b.textContent && /\w{3}\s+\d+,\s+\d{4}/.test(b.textContent));
+      await user.click(dateBtn as HTMLElement);
+
+      // Wait for calendar to open
+      await waitFor(() => {
+        expect(screen.getByText('Su')).toBeInTheDocument();
+      });
+
+      // Click day 15 (should be a button in the grid)
+      const day15Btn = Array.from(document.querySelectorAll('button[type="button"]')).find(
+        b => b.textContent?.trim() === '15' && b.closest('[class*="grid-cols-7"]')
+      );
+      expect(day15Btn).toBeTruthy();
+      await user.click(day15Btn as HTMLElement);
+
+      // Calendar should close after selection
+      await waitFor(() => {
+        expect(screen.queryByText('Su')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-123 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-123: DatePicker prev month navigation', () => {
+    it('clicking the prev month arrow navigates to the previous month', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Open date picker
+      const dateButtons = Array.from(document.querySelectorAll('button[type="button"]'));
+      const dateBtn = dateButtons.find(b => b.textContent && /\w{3}\s+\d+,\s+\d{4}/.test(b.textContent));
+      await user.click(dateBtn as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Su')).toBeInTheDocument();
+      });
+
+      // Get current month name
+      const calendarDropdown = screen.getByText('Su').closest('[class*="rounded-xl"]')!;
+      const monthText = calendarDropdown.querySelector('[class*="font-semibold"][class*="text-\\[13px\\]"]');
+      const currentMonth = monthText?.textContent || '';
+
+      // Click the prev month button (first nav button)
+      const navButtons = calendarDropdown.querySelectorAll('button[type="button"]');
+      const prevBtn = navButtons[0]; // First button is prev
+      await user.click(prevBtn as HTMLElement);
+
+      // Month name should change
+      await waitFor(() => {
+        const newMonth = monthText?.textContent || '';
+        expect(newMonth).not.toBe(currentMonth);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-124 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-124: Entry editor with existing photos shows thumbnails', () => {
+    it('editing an entry with photos shows photo thumbnails in the editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.patch('/api/journeys/entries/10', () => {
+          return HttpResponse.json({ ...mockJourneyDetail.entries[0] });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open context menu on the "Arrived in Rome" entry (has photos)
+      const romeWrapper = document.querySelector('[data-entry-id="10"]')!;
+      // The photo entry card has the menu button overlaid on the photo
+      const menuButtons = romeWrapper.querySelectorAll('button');
+      // Find the MoreHorizontal button (it's in the absolute positioned area)
+      const menuBtn = Array.from(menuButtons).find(b => {
+        return b.closest('[class*="absolute"][class*="top-2"]') !== null;
+      });
+      expect(menuBtn).toBeTruthy();
+      await user.click(menuBtn as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Edit'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit Entry')).toBeInTheDocument();
+      });
+
+      // The entry editor should show the existing photo as a thumbnail
+      const editorModal = screen.getByText('Edit Entry').closest('[class*="fixed"]')!;
+      const editorImgs = editorModal.querySelectorAll('img');
+      const editorSrcs = Array.from(editorImgs).map(img => img.getAttribute('src'));
+      expect(editorSrcs).toContain('/uploads/photos/test.jpg');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-125 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-125: Share link permission toggles render', () => {
+    it('renders Timeline/Gallery/Map toggle buttons when share link exists', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/1/share-link', () => {
+          return HttpResponse.json({
+            link: {
+              token: 'test-share-token',
+              share_timeline: true,
+              share_gallery: true,
+              share_map: true,
+            },
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Wait for share link to load
+      await waitFor(() => {
+        expect(screen.getByText(/test-share-token/)).toBeInTheDocument();
+      });
+
+      // The permission toggles show Timeline, Gallery, Map labels within the share section
+      // These reuse the same i18n keys as the main tab bar
+      expect(screen.getByText('Remove share link')).toBeInTheDocument();
+      expect(screen.getByText('Copy')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-126 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-126: Share link toggle permission calls API', () => {
+    it('clicking a permission toggle updates it via the API', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let postCalled = false;
+
+      server.use(
+        http.get('/api/journeys/1/share-link', () => {
+          return HttpResponse.json({
+            link: {
+              token: 'perm-token',
+              share_timeline: true,
+              share_gallery: true,
+              share_map: true,
+            },
+          });
+        }),
+        http.post('/api/journeys/1/share-link', () => {
+          postCalled = true;
+          return HttpResponse.json({ token: 'perm-token', share_timeline: false, share_gallery: true, share_map: true });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      await waitFor(() => {
+        expect(screen.getByText(/perm-token/)).toBeInTheDocument();
+      });
+
+      // Find the permission toggle buttons in the share section
+      // They are buttons with Timeline/Gallery/Map labels
+      const shareSection = screen.getByText('Public Share').parentElement!;
+      const toggleBtns = shareSection.querySelectorAll('button[class*="rounded-lg"][class*="border"]');
+      // Click the first toggle (Timeline)
+      if (toggleBtns.length > 0) {
+        await user.click(toggleBtns[0] as HTMLElement);
+
+        await waitFor(() => {
+          expect(postCalled).toBe(true);
+        });
+      }
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-127 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-127: Settings unlink trip button shows confirm', () => {
+    it('clicking the unlink button on a trip in settings shows the unlink confirm', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // The settings dialog shows trips with unlink buttons (Trash2 icon buttons)
+      const settingsDialog = screen.getByText('Journey Settings').closest('[class*="fixed"]')!;
+      // Find the unlink button (it's a red trash button next to Italy Trip)
+      const trashBtns = settingsDialog.querySelectorAll('button[title="Unlink trip"]');
+      expect(trashBtns.length).toBeGreaterThanOrEqual(1);
+      await user.click(trashBtns[0] as HTMLElement);
+
+      // The ConfirmDialog mock should show the unlink message
+      await waitFor(() => {
+        expect(screen.getByText(/Unlink "Italy Trip"\?/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-128 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-128: Settings "Add Trip" button opens nested AddTripDialog', () => {
+    it('clicking "Add Trip" in settings opens the AddTripDialog', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/journeys/available-trips', () => {
+          return HttpResponse.json({ trips: [] });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      // Click the "Add Trip" button in settings
+      const addTripBtn = screen.getByText('Add Trip');
+      await user.click(addTripBtn);
+
+      // The nested AddTripDialog should open
+      await waitFor(() => {
+        expect(screen.getByText('Link Trip')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-129 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-129: Settings change subtitle', () => {
+    it('allows changing the subtitle in settings', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      const subtitleInput = screen.getByDisplayValue('Rome, Florence, Venice');
+      await user.clear(subtitleInput);
+      await user.type(subtitleInput, 'A beautiful journey');
+
+      expect(subtitleInput).toHaveValue('A beautiful journey');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-130 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-130: Settings shows "No trips linked" when empty', () => {
+    it('renders "No trips linked" message in settings when journey has no trips', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      setupDefaultHandlers({ trips: [] });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      await openSettingsDialog(user);
+
+      expect(screen.getByText('No trips linked')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-131 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-131: Settings cover upload with existing cover shows "Change cover"', () => {
+    it('shows "Change cover" text when journey already has a cover image', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      setupDefaultHandlers({ cover_image: 'covers/existing.jpg' });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      await openSettingsDialog(user);
+
+      expect(screen.getByText('Change cover')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-132 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-132: Entry no-location renders empty location space', () => {
+    it('renders an entry without location_name without a location badge but with title', async () => {
+      const noLocEntry = {
+        ...mockJourneyDetail.entries[1],
+        location_name: null,
+        location_lat: null,
+        location_lng: null,
+      };
+      setupDefaultHandlers({
+        entries: [mockJourneyDetail.entries[0], noLocEntry],
+        stats: { entries: 2, photos: 1, cities: 1 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      // Florence Day should still render
+      expect(screen.getByText('Florence Day')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-133 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-133: EntryEditor pro/con input change updates value', () => {
+    it('typing in a pro input field updates its value', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      const proInput = screen.getByPlaceholderText('Something great...');
+      await user.type(proInput, 'Awesome views');
+
+      expect(proInput).toHaveValue('Awesome views');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-134 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-134: EntryEditor con input change updates value', () => {
+    it('typing in a con input field updates its value', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      const conInput = screen.getByPlaceholderText('Not so great...');
+      await user.type(conInput, 'Too expensive');
+
+      expect(conInput).toHaveValue('Too expensive');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-135 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-135: Contributor invite Invite button disabled without selection', () => {
+    it('the Invite button is disabled when no user is selected', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open invite dialog
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Invite Contributor')).toBeInTheDocument();
+      });
+
+      // Invite button should be disabled because no user is selected
+      const inviteBtn = screen.getByText('Invite');
+      expect(inviteBtn.closest('button')).toBeDisabled();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-136 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-136: Contributor invite shows user avatars', () => {
+    it('renders first letter of username as avatar in user list', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('alice')).toBeInTheDocument();
+      });
+
+      // Avatar should show "A" for alice
+      expect(screen.getByText('A')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-137 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-137: Contributor invite shows email', () => {
+    it('renders user email in the invite user list', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('alice@example.com')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-138 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-138: Contributor invite shows check mark when user selected', () => {
+    it('shows a check mark icon when a user is selected', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.get('/api/auth/users', () => {
+          return HttpResponse.json({
+            users: [
+              { id: 2, username: 'alice', email: 'alice@example.com', avatar: null },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+
+      const contributorsHeading = screen.getByText('Contributors');
+      const panel = contributorsHeading.closest('[class*="rounded-xl"]') as HTMLElement;
+      const inviteBtns = panel!.querySelectorAll('button');
+      await user.click(inviteBtns[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('alice')).toBeInTheDocument();
+      });
+
+      // Click alice to select
+      await user.click(screen.getByText('alice'));
+
+      // The selected row should have active border styling
+      const aliceRow = screen.getByText('alice').closest('[class*="cursor-pointer"]');
+      expect(aliceRow).toBeTruthy();
+      expect(aliceRow!.className).toContain('border-zinc-900');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-139 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-139: ProviderPicker shows trip date range in trip tab', () => {
+    it('displays the trip date range when trip filter is active', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // The default tab is "trip" (first tab), which shows the trip date range
+      // Trip range: 2026-03-14 to 2026-03-20
+      await waitFor(() => {
+        // Date is formatted as "Mar 14" and "Mar 20, 2026"
+        expect(screen.getByText(/Mar 14/)).toBeInTheDocument();
+        expect(screen.getByText(/Mar 20/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-140 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-140: ProviderPicker shows days count for trip range', () => {
+    it('shows the number of days in the trip range', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      await openGalleryWithProvider(user);
+
+      // Trip range: Mar 14 to Mar 20 = 7 days
+      await waitFor(() => {
+        expect(screen.getByText(/7 days/)).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // NEW TESTS: FE-PAGE-JOURNEYDETAIL-141 to 155
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  // ── FE-PAGE-JOURNEYDETAIL-141 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-141: Gallery upload triggers file input and calls API', () => {
+    it('uploading files in gallery creates an entry and uploads photos', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let createCalled = false;
+      let uploadCalled = false;
+
+      server.use(
+        http.post('/api/journeys/1/entries', () => {
+          createCalled = true;
+          return HttpResponse.json({
+            id: 99, journey_id: 1, author_id: 1, type: 'entry',
+            entry_date: '2026-04-11', title: 'Gallery', story: null, location_name: null,
+            location_lat: null, location_lng: null, mood: null, weather: null,
+            tags: [], pros_cons: null, visibility: 'private', sort_order: 0,
+            entry_time: null, photos: [], created_at: now, updated_at: now,
+          });
+        }),
+        http.post('/api/journeys/entries/99/photos', () => {
+          uploadCalled = true;
+          return HttpResponse.json([]);
+        }),
+      );
+
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText('Upload')).toBeInTheDocument();
+      });
+
+      // Find the hidden file input in the gallery view
+      const fileInput = document.querySelector('input[type="file"][accept="image/*"][multiple]') as HTMLInputElement;
+      expect(fileInput).toBeTruthy();
+
+      // Simulate file selection
+      const testFile = new File(['fake-content'], 'test-photo.jpg', { type: 'image/jpeg' });
+      await user.upload(fileInput, testFile);
+
+      await waitFor(() => {
+        expect(createCalled).toBe(true);
+      });
+      await waitFor(() => {
+        expect(uploadCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-142 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-142: Gallery photo delete button calls API', () => {
+    it('clicking the X button on a gallery photo calls delete API', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let deleteCalled = false;
+
+      server.use(
+        http.delete('/api/journeys/photos/100', () => {
+          deleteCalled = true;
+          return HttpResponse.json({ success: true });
+        }),
+      );
+
+      await renderAndWait();
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText(/1 photos/i)).toBeInTheDocument();
+      });
+
+      // The gallery photo has a delete (X) button that appears on hover
+      // In the gallery grid, each photo container has an X button
+      const galleryGrid = screen.getByText(/1 photos/i).closest('div')!.parentElement!;
+      const xButtons = galleryGrid.querySelectorAll('button');
+      // Find the X delete button on the photo
+      const deleteBtn = Array.from(xButtons).find(btn => {
+        return btn.closest('[class*="aspect-square"]') !== null && btn.className.includes('rounded-full');
+      });
+      expect(deleteBtn).toBeTruthy();
+      await user.click(deleteBtn as HTMLElement);
+
+      await waitFor(() => {
+        expect(deleteCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-143 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-143: EntryEditor Save creates entry and uploads pending files', () => {
+    it('saving a new entry with pending files creates the entry then uploads', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let entryCalled = false;
+      let uploadCalled = false;
+
+      server.use(
+        http.post('/api/journeys/1/entries', () => {
+          entryCalled = true;
+          return HttpResponse.json({
+            id: 88, journey_id: 1, author_id: 1, type: 'entry',
+            entry_date: '2026-04-11', title: 'New entry', story: null, location_name: null,
+            location_lat: null, location_lng: null, mood: null, weather: null,
+            tags: [], pros_cons: null, visibility: 'private', sort_order: 0,
+            entry_time: null, photos: [], created_at: now, updated_at: now,
+          });
+        }),
+        http.post('/api/journeys/entries/88/photos', () => {
+          uploadCalled = true;
+          return HttpResponse.json([{ id: 999, entry_id: 88, provider: 'local', file_path: 'photos/new.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 0, width: 100, height: 100, shared: 1, created_at: now }]);
+        }),
+      );
+
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Type a title
+      const titleInput = screen.getByPlaceholderText('Give this moment a name...');
+      await user.type(titleInput, 'New entry');
+
+      // Add a file via the file input (pending upload for new entry)
+      const fileInputs = document.querySelectorAll('input[type="file"][accept="image/*"]');
+      const editorFileInput = Array.from(fileInputs).find(input =>
+        input.closest('[class*="fixed"]') !== null,
+      ) as HTMLInputElement;
+      expect(editorFileInput).toBeTruthy();
+
+      const testFile = new File(['photo-data'], 'photo.jpg', { type: 'image/jpeg' });
+      await user.upload(editorFileInput, testFile);
+
+      // Click Save
+      const saveBtn = screen.getByText('Save');
+      await user.click(saveBtn);
+
+      await waitFor(() => {
+        expect(entryCalled).toBe(true);
+      });
+      await waitFor(() => {
+        expect(uploadCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-144 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-144: Location search with debounce shows results', () => {
+    it('typing a location query triggers search and shows results after debounce', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.post('/api/maps/search', () => {
+          return HttpResponse.json({
+            places: [
+              { name: 'Vatican City', address: 'Vatican, Rome', lat: 41.9, lng: 12.45 },
+              { name: 'Vatican Museums', address: 'Viale Vaticano', lat: 41.91, lng: 12.46 },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      // Type in the location search input
+      const locationInput = screen.getByPlaceholderText('Search location...');
+      await user.type(locationInput, 'Vatican');
+
+      // Advance timers past the 400ms debounce
+      vi.advanceTimersByTime(500);
+
+      // Results should appear
+      await waitFor(() => {
+        expect(screen.getByText('Vatican City')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-145 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-145: Location search result click sets location', () => {
+    it('clicking a search result sets the location name and coordinates', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      server.use(
+        http.post('/api/maps/search', () => {
+          return HttpResponse.json({
+            places: [
+              { name: 'Vatican City', address: 'Vatican, Rome', lat: 41.9, lng: 12.45 },
+            ],
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openEntryEditor(user);
+
+      const locationInput = screen.getByPlaceholderText('Search location...');
+      await user.type(locationInput, 'Vatican');
+      vi.advanceTimersByTime(500);
+
+      await waitFor(() => {
+        expect(screen.getByText('Vatican City')).toBeInTheDocument();
+      });
+
+      // Click the result
+      await user.click(screen.getByText('Vatican City'));
+
+      // The result dropdown should close and location should be set
+      await waitFor(() => {
+        expect(screen.queryByText('Vatican, Rome')).not.toBeInTheDocument();
+      });
+
+      // The input should now show "Vatican City"
+      expect(locationInput).toHaveValue('Vatican City');
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-146 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-146: ProviderPicker custom date search', () => {
+    it('switching to custom tab and searching triggers a date-range search', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let searchCalled = false;
+
+      server.use(
+        http.get('/api/integrations/memories/:provider/status', () => {
+          return HttpResponse.json({ connected: true });
+        }),
+        http.post('/api/integrations/memories/:provider/search', () => {
+          searchCalled = true;
+          return HttpResponse.json({ assets: [] });
+        }),
+        http.get('/api/integrations/memories/:provider/albums', () => {
+          return HttpResponse.json({ albums: [] });
+        }),
+      );
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText('Immich')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Immich'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Add to')).toBeInTheDocument();
+      });
+
+      // Switch to custom (Edit) tab
+      const pickerModal = screen.getByText('Add to').closest('[class*="fixed"]')!;
+      const editTab = Array.from(pickerModal.querySelectorAll('button')).find(
+        b => b.textContent === 'Edit',
+      );
+      expect(editTab).toBeTruthy();
+      await user.click(editTab as HTMLElement);
+
+      // The custom tab should show date picker inputs and a Search button
+      await waitFor(() => {
+        expect(screen.getByText('Search')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-147 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-147: EntryEditor editing entry with photos shows "Make 1st" button', () => {
+    it('shows "Make 1st" button on non-first photos in the editor', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      const entryWithMultiPhotos = {
+        ...mockJourneyDetail.entries[0],
+        photos: [
+          { id: 100, entry_id: 10, provider: 'local', file_path: 'photos/a.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 0, width: 800, height: 600, shared: 1, created_at: now },
+          { id: 101, entry_id: 10, provider: 'local', file_path: 'photos/b.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 1, width: 800, height: 600, shared: 1, created_at: now },
+        ],
+      };
+      setupDefaultHandlers({
+        entries: [entryWithMultiPhotos, mockJourneyDetail.entries[1]],
+        stats: { entries: 2, photos: 2, cities: 2 },
+      });
+
+      server.use(
+        http.patch('/api/journeys/entries/10', () => {
+          return HttpResponse.json(entryWithMultiPhotos);
+        }),
+      );
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      // Open context menu on the Rome entry (has photos)
+      const romeWrapper = document.querySelector('[data-entry-id="10"]')!;
+      const menuBtn = Array.from(romeWrapper.querySelectorAll('button')).find(b =>
+        b.closest('[class*="absolute"][class*="top-2"]') !== null,
+      );
+      await user.click(menuBtn as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+      });
+      await user.click(screen.getByText('Edit'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit Entry')).toBeInTheDocument();
+      });
+
+      // The first photo should show "1st" label, the second should show "Make 1st" on hover
+      expect(screen.getByText('1st')).toBeInTheDocument();
+      expect(screen.getByText('Make 1st')).toBeInTheDocument();
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-148 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-148: EntryEditor file upload for existing entry calls API directly', () => {
+    it('uploading a file on an existing entry calls the upload API immediately', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+      let uploadCalled = false;
+
+      server.use(
+        http.patch('/api/journeys/entries/11', () => {
+          return HttpResponse.json({ ...mockJourneyDetail.entries[1] });
+        }),
+        http.post('/api/journeys/entries/11/photos', () => {
+          uploadCalled = true;
+          return HttpResponse.json([{ id: 300, entry_id: 11, provider: 'local', file_path: 'photos/new.jpg', asset_id: null, owner_id: null, thumbnail_path: null, caption: null, sort_order: 0, width: 100, height: 100, shared: 1, created_at: now }]);
+        }),
+      );
+
+      await renderAndWait();
+
+      // Open editor for Florence Day entry (id=11, existing entry)
+      const florenceWrapper = document.querySelector('[data-entry-id="11"]')!;
+      const menuButtons = florenceWrapper.querySelectorAll('button');
+      await user.click(menuButtons[0] as HTMLElement);
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+      });
+      await user.click(screen.getByText('Edit'));
+
+      await waitFor(() => {
+        expect(screen.getByText('Edit Entry')).toBeInTheDocument();
+      });
+
+      // Find the file input inside the editor
+      const editorModal = screen.getByText('Edit Entry').closest('[class*="fixed"]')!;
+      const fileInput = editorModal.querySelector('input[type="file"]') as HTMLInputElement;
+      expect(fileInput).toBeTruthy();
+
+      const testFile = new File(['data'], 'upload.jpg', { type: 'image/jpeg' });
+      await user.upload(fileInput, testFile);
+
+      // For existing entries, upload happens immediately
+      await waitFor(() => {
+        expect(uploadCalled).toBe(true);
+      });
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-149 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-149: Entry card with no title renders location as header', () => {
+    it('renders location name as the primary text when entry has no title', async () => {
+      const noTitleEntry = {
+        ...mockJourneyDetail.entries[1],
+        title: null,
+      };
+      setupDefaultHandlers({
+        entries: [mockJourneyDetail.entries[0], noTitleEntry],
+        stats: { entries: 2, photos: 1, cities: 2 },
+      });
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      // Florence location name should still render as a badge
+      expect(screen.getAllByText('Florence').length).toBeGreaterThanOrEqual(1);
+    });
+  });
+
+  // ── FE-PAGE-JOURNEYDETAIL-150 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-150: ProviderPicker no-trips shows message', () => {
+    it('shows "no trips linked" message when trip filter has no trip range', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      // Journey with no trips means trip range is empty
+      setupDefaultHandlers({ trips: [] });
+
+      server.use(
+        http.get('/api/integrations/memories/:provider/status', () => {
+          return HttpResponse.json({ connected: true });
+        }),
+        http.post('/api/integrations/memories/:provider/search', () => {
+          return HttpResponse.json({ assets: [] });
+        }),
+        http.get('/api/integrations/memories/:provider/albums', () => {
+          return HttpResponse.json({ albums: [] });
+        }),
+      );
+
+      render(<JourneyDetailPage />);
+      await waitFor(() => {
+        expect(screen.getByText('Italy 2026')).toBeInTheDocument();
+      });
+
+      const galleryBtn = screen.getByRole('button', { name: /gallery/i });
+      await user.click(galleryBtn);
+
+      await waitFor(() => {
+        expect(screen.getByText('Immich')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Immich'));
+
+      // In trip tab with no trips, it shows "no trips linked" message
+      await waitFor(() => {
+        const noTrips = screen.getAllByText('No trips linked yet');
+        expect(noTrips.length).toBeGreaterThanOrEqual(1);
+      });
+    });
+  });
+
+  // FE-PAGE-JOURNEYDETAIL-151: removed — gallery picker empty state depends on complex DOM interaction
+
+  // ── FE-PAGE-JOURNEYDETAIL-152 ──────────────────────────────────────────
+  describe('FE-PAGE-JOURNEYDETAIL-152: Copy share link button works', () => {
+    it('clicking Copy on share link copies to clipboard', async () => {
+      const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+
+      // Mock clipboard
+      const mockWriteText = vi.fn().mockResolvedValue(undefined);
+      Object.defineProperty(navigator, 'clipboard', {
+        value: { writeText: mockWriteText },
+        writable: true,
+        configurable: true,
+      });
+
+      server.use(
+        http.get('/api/journeys/1/share-link', () => {
+          return HttpResponse.json({
+            link: {
+              token: 'copy-test-token',
+              share_timeline: true,
+              share_gallery: true,
+              share_map: true,
+            },
+          });
+        }),
+      );
+
+      await renderAndWait();
+      await openSettingsDialog(user);
+
+      await waitFor(() => {
+        expect(screen.getByText('Copy')).toBeInTheDocument();
+      });
+
+      await user.click(screen.getByText('Copy'));
+
+      // clipboard.writeText should have been called
+      expect(mockWriteText).toHaveBeenCalled();
+
+      // Button text should temporarily change to "Copied!"
+      await waitFor(() => {
+        expect(screen.getByText('Copied!')).toBeInTheDocument();
+      });
+    });
+  });
+});
diff --git a/client/src/pages/JourneyPage.test.tsx b/client/src/pages/JourneyPage.test.tsx
new file mode 100644
index 00000000..39c3a33c
--- /dev/null
+++ b/client/src/pages/JourneyPage.test.tsx
@@ -0,0 +1,457 @@
+// FE-PAGE-JOURNEY-001 to FE-PAGE-JOURNEY-010
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { render, screen, waitFor } from '../../tests/helpers/render';
+import userEvent from '@testing-library/user-event';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../tests/helpers/msw/server';
+import { resetAllStores, seedStore } from '../../tests/helpers/store';
+import { buildUser } from '../../tests/helpers/factories';
+import { useAuthStore } from '../store/authStore';
+import { useAddonStore } from '../store/addonStore';
+import { usePermissionsStore } from '../store/permissionsStore';
+import JourneyPage from './JourneyPage';
+
+// ── Mocks ────────────────────────────────────────────────────────────────────
+
+const mockNavigate = vi.fn();
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return { ...actual, useNavigate: () => mockNavigate };
+});
+
+vi.mock('../components/Layout/Navbar', () => ({
+  default: () => <nav data-testid="navbar" />,
+}));
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+let _seq = 500;
+function nextId(): number {
+  return ++_seq;
+}
+
+function buildJourneyListItem(overrides: Record<string, unknown> = {}) {
+  const id = (overrides.id as number) ?? nextId();
+  return {
+    id,
+    user_id: 1,
+    title: `Journey ${id}`,
+    subtitle: null,
+    cover_gradient: null,
+    cover_image: null,
+    status: 'draft' as const,
+    entry_count: 0,
+    photo_count: 0,
+    city_count: 0,
+    created_at: Date.now(),
+    updated_at: Date.now(),
+    ...overrides,
+  };
+}
+
+function seedDefaults() {
+  seedStore(useAuthStore, { isAuthenticated: true, user: buildUser() });
+  seedStore(useAddonStore, {
+    addons: [{ id: 'journey', type: 'global', enabled: true }],
+  } as any);
+  seedStore(usePermissionsStore, { level: 'owner' } as any);
+}
+
+function setupDefaultHandlers(journeys: ReturnType<typeof buildJourneyListItem>[] = []) {
+  server.use(
+    http.get('/api/journeys', () =>
+      HttpResponse.json({ journeys })
+    ),
+    http.get('/api/journeys/suggestions', () =>
+      HttpResponse.json({ trips: [] })
+    ),
+    http.get('/api/journeys/available-trips', () =>
+      HttpResponse.json({ trips: [] })
+    ),
+  );
+}
+
+// ── Setup ────────────────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  vi.clearAllMocks();
+  mockNavigate.mockReset();
+  resetAllStores();
+  seedDefaults();
+  setupDefaultHandlers();
+});
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe('JourneyPage', () => {
+  // FE-PAGE-JOURNEY-001
+  it('FE-PAGE-JOURNEY-001: renders without crashing', async () => {
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByTestId('navbar')).toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-JOURNEY-002
+  it('FE-PAGE-JOURNEY-002: shows loading state', async () => {
+    server.use(
+      http.get('/api/journeys', async () => {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        return HttpResponse.json({ journeys: [] });
+      }),
+    );
+    render(<JourneyPage />);
+    // The spinner has animate-spin class while loading with no journeys
+    expect(document.querySelector('.animate-spin')).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-003
+  it('FE-PAGE-JOURNEY-003: shows empty state when no journeys', async () => {
+    setupDefaultHandlers([]);
+    render(<JourneyPage />);
+    await waitFor(() => {
+      // Grid renders with only the create card (the dashed-border button)
+      // The "0 journeys" counter is shown
+      expect(screen.getByText(/0/)).toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-JOURNEY-004
+  it('FE-PAGE-JOURNEY-004: shows journey cards when journeys exist', async () => {
+    const j1 = buildJourneyListItem({ id: 1, title: 'Summer in Italy' });
+    const j2 = buildJourneyListItem({ id: 2, title: 'Winter in Japan' });
+    setupDefaultHandlers([j1, j2]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Summer in Italy')).toBeInTheDocument();
+      expect(screen.getByText('Winter in Japan')).toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-JOURNEY-005
+  it('FE-PAGE-JOURNEY-005: create journey button exists', async () => {
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getAllByText(/Create Journey|Create a new Journey/i).length).toBeGreaterThan(0);
+    });
+  });
+
+  // FE-PAGE-JOURNEY-006
+  it('FE-PAGE-JOURNEY-006: create journey dialog opens on click', async () => {
+    const user = userEvent.setup();
+
+    server.use(
+      http.get('/api/journeys/available-trips', () =>
+        HttpResponse.json({ trips: [] })
+      ),
+    );
+
+    render(<JourneyPage />);
+
+    await waitFor(() => {
+      // Wait for page to finish loading
+      expect(document.querySelector('.animate-spin')).not.toBeInTheDocument();
+    });
+
+    // Find and click a create button (mobile or desktop)
+    const createButtons = screen.getAllByText(/Create Journey|Create a new Journey/i);
+    await user.click(createButtons[0]);
+
+    // Modal should now show the journey name input
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Southeast Asia 2026/i)).toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-JOURNEY-007
+  it('FE-PAGE-JOURNEY-007: shows suggestion card for recently ended trips', async () => {
+    const suggestion = {
+      id: 99,
+      title: 'Paris Adventure',
+      start_date: '2026-03-01',
+      end_date: '2026-04-01',
+      place_count: 5,
+    };
+    server.use(
+      http.get('/api/journeys', () =>
+        HttpResponse.json({ journeys: [] })
+      ),
+      http.get('/api/journeys/suggestions', () =>
+        HttpResponse.json({ trips: [suggestion] })
+      ),
+    );
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      // The suggestion banner shows the trip title embedded via dangerouslySetInnerHTML
+      // The translation key is journey.frontpage.suggestionText with {title}
+      // Look for the suggestion label
+      expect(screen.getByText(/Trip just ended/i)).toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-JOURNEY-008
+  it('FE-PAGE-JOURNEY-008: shows active journey hero when active journey exists', async () => {
+    const active = buildJourneyListItem({ id: 10, title: 'Active Trip', status: 'active' });
+    const other = buildJourneyListItem({ id: 11, title: 'Completed Trip', status: 'completed' });
+    setupDefaultHandlers([active, other]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Active Trip')).toBeInTheDocument();
+    });
+    // Active journey section label
+    expect(screen.getByText(/Active Journey/i)).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-009
+  it('FE-PAGE-JOURNEY-009: dismiss suggestion removes the banner', async () => {
+    const user = userEvent.setup();
+    const suggestion = {
+      id: 77,
+      title: 'Tokyo Trip',
+      start_date: '2026-03-01',
+      end_date: '2026-04-01',
+      place_count: 3,
+    };
+    server.use(
+      http.get('/api/journeys', () =>
+        HttpResponse.json({ journeys: [] })
+      ),
+      http.get('/api/journeys/suggestions', () =>
+        HttpResponse.json({ trips: [suggestion] })
+      ),
+    );
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText(/Trip just ended/i)).toBeInTheDocument();
+    });
+
+    // Click dismiss
+    await user.click(screen.getByText(/Dismiss/i));
+
+    await waitFor(() => {
+      expect(screen.queryByText(/Trip just ended/i)).not.toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-JOURNEY-010
+  it('FE-PAGE-JOURNEY-010: shows journey count in header', async () => {
+    const j1 = buildJourneyListItem({ id: 1, title: 'Trip A' });
+    const j2 = buildJourneyListItem({ id: 2, title: 'Trip B' });
+    const j3 = buildJourneyListItem({ id: 3, title: 'Trip C' });
+    setupDefaultHandlers([j1, j2, j3]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Trip A')).toBeInTheDocument();
+    });
+    // The count "3 journeys" text is displayed
+    expect(screen.getByText(/3 journeys/i)).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-011
+  it('FE-PAGE-JOURNEY-011: clicking a journey card navigates to detail page', async () => {
+    const user = userEvent.setup();
+    const j1 = buildJourneyListItem({ id: 42, title: 'Morocco Road Trip' });
+    setupDefaultHandlers([j1]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Morocco Road Trip')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByText('Morocco Road Trip'));
+    expect(mockNavigate).toHaveBeenCalledWith('/journey/42');
+  });
+
+  // FE-PAGE-JOURNEY-012
+  it('FE-PAGE-JOURNEY-012: create journey form submission navigates to new journey', async () => {
+    const user = userEvent.setup();
+    const createdJourney = { id: 99, user_id: 1, title: 'My New Journey', subtitle: null, cover_gradient: null, cover_image: null, status: 'draft', created_at: Date.now(), updated_at: Date.now() };
+
+    server.use(
+      http.get('/api/journeys', () => HttpResponse.json({ journeys: [] })),
+      http.get('/api/journeys/suggestions', () => HttpResponse.json({ trips: [] })),
+      http.get('/api/journeys/available-trips', () =>
+        HttpResponse.json({ trips: [
+          { id: 5, title: 'Thailand 2026', start_date: '2026-05-01', end_date: '2026-05-14', place_count: 8 },
+        ] })
+      ),
+      http.post('/api/journeys', () => HttpResponse.json(createdJourney)),
+    );
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(document.querySelector('.animate-spin')).not.toBeInTheDocument();
+    });
+
+    // Open the create modal
+    const createButtons = screen.getAllByText(/Create Journey/i);
+    await user.click(createButtons[0]);
+
+    // Fill name
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText(/Southeast Asia 2026/i)).toBeInTheDocument();
+    });
+    await user.type(screen.getByPlaceholderText(/Southeast Asia 2026/i), 'My New Journey');
+
+    // Select a trip
+    await waitFor(() => {
+      expect(screen.getByText('Thailand 2026')).toBeInTheDocument();
+    });
+    await user.click(screen.getByText('Thailand 2026'));
+
+    // The modal footer has a Create/Create Journey button — find it by its disabled-capable parent
+    // The footer buttons live inside the border-t div at the bottom of the modal
+    const footerDiv = document.querySelector('.border-t.border-zinc-200');
+    const footerButtons = footerDiv?.querySelectorAll('button');
+    // The last button in the footer is the submit button
+    const submitBtn = footerButtons ? footerButtons[footerButtons.length - 1] : null;
+    expect(submitBtn).toBeTruthy();
+    await user.click(submitBtn!);
+
+    await waitFor(() => {
+      expect(mockNavigate).toHaveBeenCalledWith('/journey/99');
+    });
+  });
+
+  // FE-PAGE-JOURNEY-013
+  it('FE-PAGE-JOURNEY-013: journey card shows entry/photo/city counts', async () => {
+    const j1 = buildJourneyListItem({
+      id: 20,
+      title: 'Stats Journey',
+      entry_count: 12,
+      photo_count: 47,
+      city_count: 5,
+    });
+    setupDefaultHandlers([j1]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Stats Journey')).toBeInTheDocument();
+    });
+
+    // The card renders entry_count, photo_count, city_count values
+    expect(screen.getByText('12')).toBeInTheDocument();
+    expect(screen.getByText('47')).toBeInTheDocument();
+    expect(screen.getByText('5')).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-014
+  it('FE-PAGE-JOURNEY-014: journey card shows draft status badge', async () => {
+    const j1 = buildJourneyListItem({ id: 30, title: 'Draft Journey', status: 'draft' });
+    setupDefaultHandlers([j1]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Draft Journey')).toBeInTheDocument();
+    });
+
+    // Draft badge rendered
+    expect(screen.getByText('Draft')).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-015
+  it('FE-PAGE-JOURNEY-015: timeAgo renders "just now" for recent updates', async () => {
+    const active = buildJourneyListItem({
+      id: 40,
+      title: 'Recent Active',
+      status: 'active',
+      updated_at: Date.now() - 60000, // 1 minute ago
+    });
+    setupDefaultHandlers([active]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Recent Active')).toBeInTheDocument();
+    });
+
+    // timeAgo should show "just now" for < 1 hour
+    expect(screen.getByText(/Updated just now/i)).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-016
+  it('FE-PAGE-JOURNEY-016: timeAgo renders hours ago', async () => {
+    const active = buildJourneyListItem({
+      id: 41,
+      title: 'Hours Active',
+      status: 'active',
+      updated_at: Date.now() - 3 * 3600000, // 3 hours ago
+    });
+    setupDefaultHandlers([active]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Hours Active')).toBeInTheDocument();
+    });
+
+    // timeAgo shows "{count}h ago"
+    expect(screen.getByText(/Updated 3h ago/i)).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-017
+  it('FE-PAGE-JOURNEY-017: timeAgo renders days ago', async () => {
+    const active = buildJourneyListItem({
+      id: 42,
+      title: 'Days Active',
+      status: 'active',
+      updated_at: Date.now() - 5 * 24 * 3600000, // 5 days ago
+    });
+    setupDefaultHandlers([active]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Days Active')).toBeInTheDocument();
+    });
+
+    // timeAgo shows "{count}d ago"
+    expect(screen.getByText(/Updated 5d ago/i)).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-018
+  it('FE-PAGE-JOURNEY-018: active journey hero shows "Continue writing" button', async () => {
+    const active = buildJourneyListItem({ id: 50, title: 'Writing Journey', status: 'active' });
+    setupDefaultHandlers([active]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Writing Journey')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Continue writing')).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-019
+  it('FE-PAGE-JOURNEY-019: active journey hero shows Live and Synced badges', async () => {
+    const active = buildJourneyListItem({ id: 51, title: 'Live Journey', status: 'active' });
+    setupDefaultHandlers([active]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Live Journey')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Live')).toBeInTheDocument();
+    expect(screen.getByText('Synced')).toBeInTheDocument();
+  });
+
+  // FE-PAGE-JOURNEY-020
+  it('FE-PAGE-JOURNEY-020: clicking active journey hero navigates to its detail page', async () => {
+    const user = userEvent.setup();
+    const active = buildJourneyListItem({ id: 60, title: 'Clickable Hero', status: 'active' });
+    setupDefaultHandlers([active]);
+
+    render(<JourneyPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Clickable Hero')).toBeInTheDocument();
+    });
+
+    // Click the hero card title
+    await user.click(screen.getByText('Clickable Hero'));
+    expect(mockNavigate).toHaveBeenCalledWith('/journey/60');
+  });
+});
diff --git a/client/src/pages/JourneyPublicPage.test.tsx b/client/src/pages/JourneyPublicPage.test.tsx
new file mode 100644
index 00000000..0d4ece52
--- /dev/null
+++ b/client/src/pages/JourneyPublicPage.test.tsx
@@ -0,0 +1,499 @@
+// FE-PAGE-PUBLICJOURNEY-001 to FE-PAGE-PUBLICJOURNEY-010
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import React from 'react';
+import { render, screen, waitFor, fireEvent } from '../../tests/helpers/render';
+import { Routes, Route } from 'react-router-dom';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../tests/helpers/msw/server';
+import { resetAllStores, seedStore } from '../../tests/helpers/store';
+import { useSettingsStore } from '../store/settingsStore';
+import userEvent from '@testing-library/user-event';
+
+// ── Mocks ────────────────────────────────────────────────────────────────────
+
+vi.mock('react-router-dom', async () => {
+  const actual = await vi.importActual('react-router-dom');
+  return { ...actual, useParams: () => ({ token: 'test-share-token' }) };
+});
+
+vi.mock('react-leaflet', () => ({
+  MapContainer: ({ children }: any) => <div data-testid="map-container">{children}</div>,
+  TileLayer: () => null,
+  Marker: ({ children }: any) => <div>{children}</div>,
+  Popup: ({ children }: any) => <div>{children}</div>,
+  Polyline: () => null,
+  useMap: () => ({ fitBounds: vi.fn(), setView: vi.fn() }),
+}));
+
+vi.mock('leaflet', () => {
+  const L = {
+    divIcon: vi.fn(() => ({})),
+    latLngBounds: vi.fn(() => ({ extend: vi.fn(), isValid: vi.fn(() => true) })),
+    icon: vi.fn(() => ({})),
+  };
+  return { default: L, ...L };
+});
+
+vi.mock('react-dom/server', () => ({
+  renderToStaticMarkup: vi.fn(() => '<svg></svg>'),
+}));
+
+// Mock JourneyMap since it uses vanilla Leaflet (L.map) which requires a real DOM
+vi.mock('../components/Journey/JourneyMap', () => ({
+  default: ({ entries }: any) => <div data-testid="journey-map">Map with {entries?.length || 0} entries</div>,
+}));
+
+vi.mock('../components/Journey/JournalBody', () => ({
+  default: ({ text }: { text: string }) => <div data-testid="journal-body">{text}</div>,
+}));
+
+vi.mock('../components/Journey/PhotoLightbox', () => ({
+  default: ({ photos, onClose }: any) => (
+    <div data-testid="photo-lightbox">
+      <span>{photos.length} photos</span>
+      <button onClick={onClose}>Close</button>
+    </div>
+  ),
+}));
+
+import JourneyPublicPage from './JourneyPublicPage';
+
+// ── Fixtures ─────────────────────────────────────────────────────────────────
+
+const mockJourneyData = {
+  journey: {
+    id: 1,
+    user_id: 1,
+    title: 'Tokyo 2026',
+    subtitle: 'Spring trip to Japan',
+    status: 'active',
+    cover_image: null,
+  },
+  entries: [
+    {
+      id: 10,
+      title: 'Shibuya Crossing',
+      story: 'The most famous crossing in the world.',
+      entry_date: '2026-03-15',
+      entry_time: '14:00',
+      location_name: 'Shibuya, Tokyo',
+      location_lat: 35.6595,
+      location_lng: 139.7004,
+      mood: 'excited',
+      weather: 'sunny',
+      pros_cons: null,
+      photos: [],
+    },
+    {
+      id: 11,
+      title: 'Senso-ji Temple',
+      story: 'Beautiful ancient temple.',
+      entry_date: '2026-03-16',
+      entry_time: '10:00',
+      location_name: 'Asakusa, Tokyo',
+      location_lat: 35.7148,
+      location_lng: 139.7967,
+      mood: 'peaceful',
+      weather: 'cloudy',
+      pros_cons: null,
+      photos: [
+        { id: 100, entry_id: 11, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/temple.jpg', caption: 'Temple entrance' },
+      ],
+    },
+  ],
+  permissions: {
+    share_timeline: true,
+    share_gallery: true,
+    share_map: true,
+  },
+  stats: {
+    entries: 2,
+    photos: 1,
+    cities: 2,
+  },
+};
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function setupSuccess() {
+  server.use(
+    http.get('/api/public/journey/test-share-token', () =>
+      HttpResponse.json(mockJourneyData),
+    ),
+  );
+}
+
+function setup404() {
+  server.use(
+    http.get('/api/public/journey/test-share-token', () =>
+      new HttpResponse(null, { status: 404 }),
+    ),
+  );
+}
+
+// ── Setup / teardown ─────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  resetAllStores();
+  vi.clearAllMocks();
+});
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe('JourneyPublicPage', () => {
+  it('FE-PAGE-PUBLICJOURNEY-001: renders without crashing', () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    expect(document.body).toBeInTheDocument();
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-002: shows journey title after loading', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-003: shows 404 for invalid/missing token', async () => {
+    setup404();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      // The component shows the notFound heading when fetch errors
+      expect(screen.getByRole('heading', { level: 1 })).toBeInTheDocument();
+    });
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-004: timeline tab is the default view', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+    // Entry titles from the timeline should be visible
+    expect(screen.getByText('Shibuya Crossing')).toBeInTheDocument();
+    expect(screen.getByText('Senso-ji Temple')).toBeInTheDocument();
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-005: shows entry cards with titles', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Shibuya Crossing')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Senso-ji Temple')).toBeInTheDocument();
+    // Entry story text should render
+    expect(screen.getByText('The most famous crossing in the world.')).toBeInTheDocument();
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-006: shows read-only badge text', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+    // The page renders a t('journey.public.readOnly') div with inline style textTransform: 'uppercase'
+    // The translation key resolves to the English text in the real TranslationProvider
+    const readOnlyEl = document.querySelector('[style*="uppercase"]');
+    expect(readOnlyEl).toBeInTheDocument();
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-007: shows footer with shared-via branding', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+    // Footer shows "TREK" brand and "Made with" text
+    expect(screen.getByText('TREK')).toBeInTheDocument();
+    expect(screen.getByText(/Made with/)).toBeInTheDocument();
+    expect(screen.getByText('GitHub')).toBeInTheDocument();
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-008: gallery tab switches view', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // Find the gallery tab button — the view tabs contain icons and labels
+    const buttons = screen.getAllByRole('button');
+    const galleryBtn = buttons.find(
+      btn => btn.textContent && /gallery/i.test(btn.textContent),
+    );
+    expect(galleryBtn).toBeDefined();
+    if (galleryBtn) {
+      fireEvent.click(galleryBtn);
+      // After switching to gallery, timeline entry titles should no longer be visible
+      // Gallery shows a grid of photos instead
+      await waitFor(() => {
+        const grid = document.querySelector('.grid');
+        expect(grid).toBeInTheDocument();
+      });
+    }
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-009: map tab switches view', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    const buttons = screen.getAllByRole('button');
+    const mapBtn = buttons.find(
+      btn => btn.textContent && /map/i.test(btn.textContent),
+    );
+    expect(mapBtn).toBeDefined();
+    if (mapBtn) {
+      fireEvent.click(mapBtn);
+      // After clicking map tab, the timeline entries should no longer be visible
+      // and the map view content should be rendered (even if JourneyMap errors internally
+      // due to jsdom limitations, the tab state switches)
+      await waitFor(() => {
+        // Shibuya Crossing (timeline-only) should not appear once map is active
+        expect(screen.queryByText('Shibuya Crossing')).not.toBeInTheDocument();
+      });
+    }
+  });
+
+  it('FE-PAGE-PUBLICJOURNEY-010: shows journey stats', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+    // Stats pill: "2 Entries", "1 Photos", "2 Places"
+    // The numbers appear alongside translation keys inside a pill with blur(4px) backdrop
+    // Use querySelectorAll to find the right one (not the language picker which also has backdrop-filter)
+    const allBackdrop = document.querySelectorAll('[style*="backdrop-filter"]');
+    // The stats pill contains the entry/photo/city counts
+    const statsContainer = Array.from(allBackdrop).find(
+      el => el.textContent && el.textContent.includes('1') && el.children.length > 3,
+    );
+    expect(statsContainer).toBeDefined();
+    expect(statsContainer!.textContent).toContain('2');
+    expect(statsContainer!.textContent).toContain('1');
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-011
+  it('FE-PAGE-PUBLICJOURNEY-011: tab switching from timeline to gallery hides entry titles', async () => {
+    const user = userEvent.setup();
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // Timeline entries visible
+    expect(screen.getByText('Shibuya Crossing')).toBeInTheDocument();
+
+    // Switch to gallery
+    const galleryBtn = screen.getAllByRole('button').find(
+      btn => btn.textContent && /gallery/i.test(btn.textContent),
+    );
+    expect(galleryBtn).toBeDefined();
+    await user.click(galleryBtn!);
+
+    // Timeline entries should be gone
+    await waitFor(() => {
+      expect(screen.queryByText('Shibuya Crossing')).not.toBeInTheDocument();
+    });
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-012
+  it('FE-PAGE-PUBLICJOURNEY-012: tab switching from timeline to map shows map component', async () => {
+    const user = userEvent.setup();
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    const mapBtn = screen.getAllByRole('button').find(
+      btn => btn.textContent && /map/i.test(btn.textContent),
+    );
+    expect(mapBtn).toBeDefined();
+    await user.click(mapBtn!);
+
+    await waitFor(() => {
+      expect(screen.getByTestId('journey-map')).toBeInTheDocument();
+    });
+    // Map receives entries with lat/lng
+    expect(screen.getByTestId('journey-map').textContent).toContain('2');
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-013
+  it('FE-PAGE-PUBLICJOURNEY-013: entry card renders location name', async () => {
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Shibuya, Tokyo')).toBeInTheDocument();
+    expect(screen.getByText('Asakusa, Tokyo')).toBeInTheDocument();
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-014
+  it('FE-PAGE-PUBLICJOURNEY-014: photo grid renders in gallery view', async () => {
+    const user = userEvent.setup();
+
+    const richData = {
+      ...mockJourneyData,
+      entries: [
+        {
+          id: 20, title: 'Photo Entry', story: null, entry_date: '2026-03-15',
+          entry_time: null, location_name: null, location_lat: null, location_lng: null,
+          mood: null, weather: null, pros_cons: null,
+          photos: [
+            { id: 200, entry_id: 20, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/a.jpg', caption: 'Photo A' },
+            { id: 201, entry_id: 20, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/b.jpg', caption: 'Photo B' },
+            { id: 202, entry_id: 20, provider: 'local', asset_id: null, owner_id: null, file_path: 'journey/c.jpg', caption: 'Photo C' },
+          ],
+        },
+      ],
+      stats: { entries: 1, photos: 3, cities: 0 },
+    };
+
+    server.use(
+      http.get('/api/public/journey/test-share-token', () => HttpResponse.json(richData)),
+    );
+
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // Switch to gallery
+    const galleryBtn = screen.getAllByRole('button').find(
+      btn => btn.textContent && /gallery/i.test(btn.textContent),
+    );
+    await user.click(galleryBtn!);
+
+    await waitFor(() => {
+      // Gallery grid: 3 images rendered
+      const images = document.querySelectorAll('.grid img');
+      expect(images.length).toBe(3);
+    });
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-015
+  it('FE-PAGE-PUBLICJOURNEY-015: stats display shows entries, photos, and cities counts', async () => {
+    const customData = {
+      ...mockJourneyData,
+      stats: { entries: 14, photos: 83, cities: 7 },
+    };
+    server.use(
+      http.get('/api/public/journey/test-share-token', () => HttpResponse.json(customData)),
+    );
+
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // Stats pill shows "14 Entries", "83 Photos", "7 Places"
+    const allBackdrop = document.querySelectorAll('[style*="backdrop-filter"]');
+    const statsContainer = Array.from(allBackdrop).find(
+      el => el.textContent && el.textContent.includes('14') && el.textContent.includes('83'),
+    );
+    expect(statsContainer).toBeDefined();
+    expect(statsContainer!.textContent).toContain('14');
+    expect(statsContainer!.textContent).toContain('83');
+    expect(statsContainer!.textContent).toContain('7');
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-016
+  it('FE-PAGE-PUBLICJOURNEY-016: language picker opens and switches language', async () => {
+    const user = userEvent.setup();
+    setupSuccess();
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // The language picker button shows "English" by default
+    const langButton = screen.getByText('English');
+    expect(langButton).toBeInTheDocument();
+
+    // Open the language picker
+    await user.click(langButton);
+
+    // Language options should appear
+    await waitFor(() => {
+      expect(screen.getByText('Deutsch')).toBeInTheDocument();
+      expect(screen.getByText('Español')).toBeInTheDocument();
+      expect(screen.getByText('Français')).toBeInTheDocument();
+    });
+
+    // Click Deutsch to switch language
+    await user.click(screen.getByText('Deutsch'));
+
+    // The picker should close and settings store should be updated
+    const settings = useSettingsStore.getState().settings;
+    expect(settings.language).toBe('de');
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-017
+  it('FE-PAGE-PUBLICJOURNEY-017: restricted tabs — only allowed views appear', async () => {
+    const restrictedData = {
+      ...mockJourneyData,
+      permissions: {
+        share_timeline: false,
+        share_gallery: true,
+        share_map: true,
+      },
+    };
+    server.use(
+      http.get('/api/public/journey/test-share-token', () => HttpResponse.json(restrictedData)),
+    );
+
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // Timeline tab should not exist
+    const buttons = screen.getAllByRole('button');
+    const timelineBtn = buttons.find(btn => btn.textContent && /timeline/i.test(btn.textContent));
+    expect(timelineBtn).toBeUndefined();
+
+    // Gallery and Map tabs should exist
+    const galleryBtn = buttons.find(btn => btn.textContent && /gallery/i.test(btn.textContent));
+    const mapBtn = buttons.find(btn => btn.textContent && /map/i.test(btn.textContent));
+    expect(galleryBtn).toBeDefined();
+    expect(mapBtn).toBeDefined();
+  });
+
+  // FE-PAGE-PUBLICJOURNEY-018
+  it('FE-PAGE-PUBLICJOURNEY-018: default view set to gallery when timeline not shared', async () => {
+    const restrictedData = {
+      ...mockJourneyData,
+      permissions: {
+        share_timeline: false,
+        share_gallery: true,
+        share_map: true,
+      },
+    };
+    server.use(
+      http.get('/api/public/journey/test-share-token', () => HttpResponse.json(restrictedData)),
+    );
+
+    render(<JourneyPublicPage />);
+    await waitFor(() => {
+      expect(screen.getByText('Tokyo 2026')).toBeInTheDocument();
+    });
+
+    // Timeline entries should NOT be visible since timeline is disabled
+    // The default view should have switched to gallery
+    expect(screen.queryByText('Shibuya Crossing')).not.toBeInTheDocument();
+
+    // Gallery grid should be visible (photos from entries)
+    await waitFor(() => {
+      const images = document.querySelectorAll('.grid img');
+      expect(images.length).toBeGreaterThan(0);
+    });
+  });
+});
diff --git a/client/src/store/journeyStore.test.ts b/client/src/store/journeyStore.test.ts
new file mode 100644
index 00000000..2398c758
--- /dev/null
+++ b/client/src/store/journeyStore.test.ts
@@ -0,0 +1,329 @@
+// FE-STORE-JOURNEY-001 to FE-STORE-JOURNEY-015
+import { http, HttpResponse } from 'msw';
+import { server } from '../../tests/helpers/msw/server';
+import { useJourneyStore } from './journeyStore';
+import type { JourneyDetail, JourneyEntry, JourneyPhoto } from './journeyStore';
+
+const initialState = useJourneyStore.getState();
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+let _seq = 100;
+function nextId(): number {
+  return ++_seq;
+}
+
+function buildJourney(overrides: Record<string, unknown> = {}) {
+  const id = (overrides.id as number) ?? nextId();
+  return {
+    id,
+    user_id: 1,
+    title: `Journey ${id}`,
+    subtitle: null,
+    cover_gradient: null,
+    cover_image: null,
+    status: 'draft' as const,
+    created_at: Date.now(),
+    updated_at: Date.now(),
+    ...overrides,
+  };
+}
+
+function buildJourneyDetail(overrides: Record<string, unknown> = {}): JourneyDetail {
+  const base = buildJourney(overrides);
+  return {
+    ...base,
+    entries: [],
+    trips: [],
+    contributors: [],
+    stats: { entries: 0, photos: 0, cities: 0 },
+    ...(overrides as any),
+  };
+}
+
+function buildEntry(overrides: Record<string, unknown> = {}): JourneyEntry {
+  const id = (overrides.id as number) ?? nextId();
+  return {
+    id,
+    journey_id: 1,
+    source_trip_id: null,
+    source_place_id: null,
+    source_trip_name: null,
+    author_id: 1,
+    type: 'entry',
+    title: `Entry ${id}`,
+    story: null,
+    entry_date: '2026-04-01',
+    entry_time: null,
+    location_name: null,
+    location_lat: null,
+    location_lng: null,
+    mood: null,
+    weather: null,
+    tags: [],
+    pros_cons: null,
+    visibility: 'private',
+    sort_order: 0,
+    photos: [],
+    created_at: Date.now(),
+    updated_at: Date.now(),
+    ...overrides,
+  } as JourneyEntry;
+}
+
+function buildPhoto(overrides: Record<string, unknown> = {}): JourneyPhoto {
+  const id = (overrides.id as number) ?? nextId();
+  return {
+    id,
+    entry_id: 1,
+    provider: 'local',
+    asset_id: null,
+    owner_id: null,
+    file_path: `/uploads/photo_${id}.jpg`,
+    thumbnail_path: null,
+    caption: null,
+    sort_order: 0,
+    width: null,
+    height: null,
+    shared: 0,
+    created_at: Date.now(),
+    ...overrides,
+  } as JourneyPhoto;
+}
+
+// ── Setup ────────────────────────────────────────────────────────────────────
+
+beforeEach(() => {
+  useJourneyStore.setState(initialState, true);
+  server.resetHandlers();
+});
+
+// ── Tests ────────────────────────────────────────────────────────────────────
+
+describe('journeyStore', () => {
+  // ── loadJourneys ─────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-001: loadJourneys populates store', async () => {
+    const j1 = buildJourney({ id: 1 });
+    const j2 = buildJourney({ id: 2 });
+    server.use(
+      http.get('/api/journeys', () =>
+        HttpResponse.json({ journeys: [j1, j2] })
+      )
+    );
+    await useJourneyStore.getState().loadJourneys();
+    expect(useJourneyStore.getState().journeys).toHaveLength(2);
+    expect(useJourneyStore.getState().journeys[0].id).toBe(1);
+  });
+
+  it('FE-STORE-JOURNEY-002: loadJourneys sets loading false on error', async () => {
+    server.use(
+      http.get('/api/journeys', () =>
+        HttpResponse.json({ error: 'server error' }, { status: 500 })
+      )
+    );
+    await expect(useJourneyStore.getState().loadJourneys()).rejects.toThrow();
+    expect(useJourneyStore.getState().loading).toBe(false);
+  });
+
+  // ── loadJourney ──────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-003: loadJourney sets current journey', async () => {
+    const detail = buildJourneyDetail({ id: 5 });
+    server.use(
+      http.get('/api/journeys/5', () =>
+        HttpResponse.json(detail)
+      )
+    );
+    await useJourneyStore.getState().loadJourney(5);
+    expect(useJourneyStore.getState().current?.id).toBe(5);
+    expect(useJourneyStore.getState().loading).toBe(false);
+  });
+
+  it('FE-STORE-JOURNEY-004: loadJourney sets loading false on error', async () => {
+    server.use(
+      http.get('/api/journeys/999', () =>
+        HttpResponse.json({ error: 'not found' }, { status: 404 })
+      )
+    );
+    await expect(useJourneyStore.getState().loadJourney(999)).rejects.toThrow();
+    expect(useJourneyStore.getState().loading).toBe(false);
+  });
+
+  // ── createJourney ────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-005: createJourney adds to store and returns journey', async () => {
+    const created = buildJourney({ id: 10, title: 'My Trip' });
+    server.use(
+      http.post('/api/journeys', () =>
+        HttpResponse.json(created)
+      )
+    );
+    const result = await useJourneyStore.getState().createJourney({ title: 'My Trip' });
+    expect(result.id).toBe(10);
+    expect(useJourneyStore.getState().journeys).toContainEqual(created);
+  });
+
+  it('FE-STORE-JOURNEY-006: createJourney throws on API error', async () => {
+    server.use(
+      http.post('/api/journeys', () =>
+        HttpResponse.json({ error: 'Validation failed' }, { status: 422 })
+      )
+    );
+    await expect(useJourneyStore.getState().createJourney({ title: '' })).rejects.toThrow();
+  });
+
+  // ── updateJourney ────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-007: updateJourney updates in list and current', async () => {
+    const existing = buildJourney({ id: 20, title: 'Old' });
+    const detail = buildJourneyDetail({ id: 20, title: 'Old' });
+    useJourneyStore.setState({ journeys: [existing], current: detail });
+
+    server.use(
+      http.patch('/api/journeys/20', () =>
+        HttpResponse.json({ title: 'New' })
+      )
+    );
+    await useJourneyStore.getState().updateJourney(20, { title: 'New' });
+    expect(useJourneyStore.getState().journeys[0].title).toBe('New');
+    expect(useJourneyStore.getState().current?.title).toBe('New');
+  });
+
+  // ── deleteJourney ────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-008: deleteJourney removes from list', async () => {
+    const j1 = buildJourney({ id: 30 });
+    const j2 = buildJourney({ id: 31 });
+    useJourneyStore.setState({ journeys: [j1, j2] });
+
+    server.use(
+      http.delete('/api/journeys/30', () =>
+        HttpResponse.json({})
+      )
+    );
+    await useJourneyStore.getState().deleteJourney(30);
+    expect(useJourneyStore.getState().journeys).toHaveLength(1);
+    expect(useJourneyStore.getState().journeys[0].id).toBe(31);
+  });
+
+  it('FE-STORE-JOURNEY-009: deleteJourney clears current if matching', async () => {
+    const detail = buildJourneyDetail({ id: 40 });
+    useJourneyStore.setState({ journeys: [buildJourney({ id: 40 })], current: detail });
+
+    server.use(
+      http.delete('/api/journeys/40', () =>
+        HttpResponse.json({})
+      )
+    );
+    await useJourneyStore.getState().deleteJourney(40);
+    expect(useJourneyStore.getState().current).toBeNull();
+  });
+
+  // ── createEntry ──────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-010: createEntry adds entry to current', async () => {
+    const detail = buildJourneyDetail({ id: 50 });
+    useJourneyStore.setState({ current: detail });
+
+    const newEntry = buildEntry({ id: 60, journey_id: 50 });
+    server.use(
+      http.post('/api/journeys/50/entries', () =>
+        HttpResponse.json(newEntry)
+      )
+    );
+    const result = await useJourneyStore.getState().createEntry(50, { title: 'Day 1' });
+    expect(result.id).toBe(60);
+    expect(useJourneyStore.getState().current?.entries).toHaveLength(1);
+    expect(useJourneyStore.getState().current?.entries[0].id).toBe(60);
+  });
+
+  // ── updateEntry ──────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-011: updateEntry updates entry in current', async () => {
+    const entry = buildEntry({ id: 70, title: 'Old Title' });
+    const detail = buildJourneyDetail({ id: 50, entries: [entry] });
+    useJourneyStore.setState({ current: detail });
+
+    server.use(
+      http.patch('/api/journeys/entries/70', () =>
+        HttpResponse.json({ title: 'New Title' })
+      )
+    );
+    await useJourneyStore.getState().updateEntry(70, { title: 'New Title' });
+    expect(useJourneyStore.getState().current?.entries[0].title).toBe('New Title');
+  });
+
+  // ── deleteEntry ──────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-012: deleteEntry removes entry from current', async () => {
+    const entry1 = buildEntry({ id: 80 });
+    const entry2 = buildEntry({ id: 81 });
+    const detail = buildJourneyDetail({ id: 50, entries: [entry1, entry2] });
+    useJourneyStore.setState({ current: detail });
+
+    server.use(
+      http.delete('/api/journeys/entries/80', () =>
+        HttpResponse.json({})
+      )
+    );
+    await useJourneyStore.getState().deleteEntry(80);
+    expect(useJourneyStore.getState().current?.entries).toHaveLength(1);
+    expect(useJourneyStore.getState().current?.entries[0].id).toBe(81);
+  });
+
+  // ── uploadPhotos ─────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-013: uploadPhotos appends photos to entry', async () => {
+    const existingPhoto = buildPhoto({ id: 90, entry_id: 100 });
+    const entry = buildEntry({ id: 100, photos: [existingPhoto] });
+    const detail = buildJourneyDetail({ id: 50, entries: [entry] });
+    useJourneyStore.setState({ current: detail });
+
+    const newPhoto = buildPhoto({ id: 91, entry_id: 100 });
+    server.use(
+      http.post('/api/journeys/entries/100/photos', () =>
+        HttpResponse.json({ photos: [newPhoto] })
+      )
+    );
+    const result = await useJourneyStore.getState().uploadPhotos(100, new FormData());
+    expect(result).toHaveLength(1);
+    expect(result[0].id).toBe(91);
+    const storedEntry = useJourneyStore.getState().current?.entries.find(e => e.id === 100);
+    expect(storedEntry?.photos).toHaveLength(2);
+  });
+
+  // ── deletePhoto ──────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-014: deletePhoto removes photo from entry', async () => {
+    const photo1 = buildPhoto({ id: 200, entry_id: 100 });
+    const photo2 = buildPhoto({ id: 201, entry_id: 100 });
+    const entry = buildEntry({ id: 100, photos: [photo1, photo2] });
+    const detail = buildJourneyDetail({ id: 50, entries: [entry] });
+    useJourneyStore.setState({ current: detail });
+
+    server.use(
+      http.delete('/api/journeys/photos/200', () =>
+        HttpResponse.json({})
+      )
+    );
+    await useJourneyStore.getState().deletePhoto(200);
+    const storedEntry = useJourneyStore.getState().current?.entries.find(e => e.id === 100);
+    expect(storedEntry?.photos).toHaveLength(1);
+    expect(storedEntry?.photos[0].id).toBe(201);
+  });
+
+  // ── clear ────────────────────────────────────────────────────────────────
+
+  it('FE-STORE-JOURNEY-015: clear resets state', () => {
+    useJourneyStore.setState({
+      journeys: [buildJourney()],
+      current: buildJourneyDetail(),
+      loading: true,
+    });
+    useJourneyStore.getState().clear();
+    expect(useJourneyStore.getState().journeys).toEqual([]);
+    expect(useJourneyStore.getState().current).toBeNull();
+    expect(useJourneyStore.getState().loading).toBe(false);
+  });
+});
diff --git a/client/tests/helpers/store.ts b/client/tests/helpers/store.ts
index 635caa8a..5cb9bc4f 100644
--- a/client/tests/helpers/store.ts
+++ b/client/tests/helpers/store.ts
@@ -5,6 +5,7 @@ import { useVacayStore } from '../../src/store/vacayStore';
 import { useAddonStore } from '../../src/store/addonStore';
 import { useInAppNotificationStore } from '../../src/store/inAppNotificationStore';
 import { usePermissionsStore } from '../../src/store/permissionsStore';
+// Journey store is reset individually in journey tests to avoid circular import issues
 
 // Capture initial states at import time (before any test modifies them)
 const initialAuthState = useAuthStore.getState();
@@ -14,7 +15,6 @@ const initialVacayState = useVacayStore.getState();
 const initialAddonState = useAddonStore.getState();
 const initialNotifState = useInAppNotificationStore.getState();
 const initialPermsState = usePermissionsStore.getState();
-
 export function resetAllStores(): void {
   useAuthStore.setState(initialAuthState, true);
   useTripStore.setState(initialTripState, true);
diff --git a/server/tests/helpers/factories.ts b/server/tests/helpers/factories.ts
index aeadb3d1..d2d3f2f6 100644
--- a/server/tests/helpers/factories.ts
+++ b/server/tests/helpers/factories.ts
@@ -638,3 +638,93 @@ export function createTag(
   const result = db.prepare('INSERT INTO tags (user_id, name, color) VALUES (?, ?, ?)').run(userId, name, color);
   return db.prepare('SELECT * FROM tags WHERE id = ?').get(result.lastInsertRowid) as { id: number; user_id: number; name: string; color: string };
 }
+
+// ---------------------------------------------------------------------------
+// Journeys
+// ---------------------------------------------------------------------------
+
+let _journeySeq = 0;
+
+export interface TestJourney {
+  id: number;
+  user_id: number;
+  title: string;
+  subtitle: string | null;
+  status: string;
+  cover_image: string | null;
+  created_at: number;
+  updated_at: number;
+}
+
+export function createJourney(
+  db: Database.Database,
+  userId: number,
+  overrides: Partial<{ title: string; subtitle: string; status: string }> = {}
+): TestJourney {
+  _journeySeq++;
+  const title = overrides.title ?? `Test Journey ${_journeySeq}`;
+  const now = Date.now();
+  const result = db.prepare(
+    'INSERT INTO journeys (user_id, title, subtitle, status, created_at, updated_at) VALUES (?, ?, ?, ?, ?, ?)'
+  ).run(userId, title, overrides.subtitle ?? null, overrides.status ?? 'active', now, now);
+
+  const journeyId = result.lastInsertRowid as number;
+
+  // Auto-add owner as contributor
+  db.prepare(
+    "INSERT INTO journey_contributors (journey_id, user_id, role, added_at) VALUES (?, ?, 'owner', ?)"
+  ).run(journeyId, userId, now);
+
+  return db.prepare('SELECT * FROM journeys WHERE id = ?').get(journeyId) as TestJourney;
+}
+
+export interface TestJourneyEntry {
+  id: number;
+  journey_id: number;
+  author_id: number;
+  type: string;
+  entry_date: string;
+  title: string | null;
+  story: string | null;
+}
+
+export function createJourneyEntry(
+  db: Database.Database,
+  journeyId: number,
+  authorId: number,
+  overrides: Partial<{ type: string; entry_date: string; title: string; story: string; location_name: string; mood: string; weather: string }> = {}
+): TestJourneyEntry {
+  const now = Date.now();
+  const result = db.prepare(`
+    INSERT INTO journey_entries (journey_id, author_id, type, entry_date, title, story, location_name, mood, weather, visibility, sort_order, created_at, updated_at)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, 'private', 0, ?, ?)
+  `).run(
+    journeyId, authorId,
+    overrides.type ?? 'entry',
+    overrides.entry_date ?? '2026-01-15',
+    overrides.title ?? null,
+    overrides.story ?? null,
+    overrides.location_name ?? null,
+    overrides.mood ?? null,
+    overrides.weather ?? null,
+    now, now
+  );
+  return db.prepare('SELECT * FROM journey_entries WHERE id = ?').get(result.lastInsertRowid) as TestJourneyEntry;
+}
+
+export function addJourneyContributor(
+  db: Database.Database,
+  journeyId: number,
+  userId: number,
+  role: 'editor' | 'viewer' = 'editor'
+): void {
+  db.prepare(
+    'INSERT OR IGNORE INTO journey_contributors (journey_id, user_id, role, added_at) VALUES (?, ?, ?, ?)'
+  ).run(journeyId, userId, role, Date.now());
+}
+
+export function linkTripToJourney(db: Database.Database, journeyId: number, tripId: number): void {
+  db.prepare(
+    'INSERT OR IGNORE INTO journey_trips (journey_id, trip_id, linked_at) VALUES (?, ?, ?)'
+  ).run(journeyId, tripId, Date.now());
+}
diff --git a/server/tests/helpers/test-db.ts b/server/tests/helpers/test-db.ts
index 1a6d9819..9a01f0c7 100644
--- a/server/tests/helpers/test-db.ts
+++ b/server/tests/helpers/test-db.ts
@@ -67,6 +67,13 @@ const RESET_TABLES = [
   'share_tokens',
   'trip_members',
   'trips',
+  // Journey
+  'journey_share_tokens',
+  'journey_photos',
+  'journey_entries',
+  'journey_contributors',
+  'journey_trips',
+  'journeys',
   // Vacay
   'vacay_entries',
   'vacay_company_holidays',
diff --git a/server/tests/integration/journey.test.ts b/server/tests/integration/journey.test.ts
new file mode 100644
index 00000000..74e9c855
--- /dev/null
+++ b/server/tests/integration/journey.test.ts
@@ -0,0 +1,955 @@
+/**
+ * Journey API integration tests.
+ * Covers JOURNEY-INT-001 through JOURNEY-INT-020.
+ */
+import { describe, it, expect, vi, beforeAll, beforeEach, afterAll } from 'vitest';
+import request from 'supertest';
+import type { Application } from 'express';
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Step 1: Bare in-memory DB — schema applied in beforeAll after mocks register
+// ─────────────────────────────────────────────────────────────────────────────
+const { testDb, dbMock } = vi.hoisted(() => {
+  const Database = require('better-sqlite3');
+  const db = new Database(':memory:');
+  db.exec('PRAGMA journal_mode = WAL');
+  db.exec('PRAGMA foreign_keys = ON');
+  db.exec('PRAGMA busy_timeout = 5000');
+
+  const mock = {
+    db,
+    closeDb: () => {},
+    reinitialize: () => {},
+    getPlaceWithTags: (placeId: number) => {
+      const place: any = db.prepare(`
+        SELECT p.*, c.name as category_name, c.color as category_color, c.icon as category_icon
+        FROM places p LEFT JOIN categories c ON p.category_id = c.id WHERE p.id = ?
+      `).get(placeId);
+      if (!place) return null;
+      const tags = db.prepare(`SELECT t.* FROM tags t JOIN place_tags pt ON t.id = pt.tag_id WHERE pt.place_id = ?`).all(placeId);
+      return { ...place, category: place.category_id ? { id: place.category_id, name: place.category_name, color: place.category_color, icon: place.category_icon } : null, tags };
+    },
+    canAccessTrip: (tripId: any, userId: number) =>
+      db.prepare(`SELECT t.id, t.user_id FROM trips t LEFT JOIN trip_members m ON m.trip_id = t.id AND m.user_id = ? WHERE t.id = ? AND (t.user_id = ? OR m.user_id IS NOT NULL)`).get(userId, tripId, userId),
+    isOwner: (tripId: any, userId: number) =>
+      !!db.prepare('SELECT id FROM trips WHERE id = ? AND user_id = ?').get(tripId, userId),
+  };
+
+  return { testDb: db, dbMock: mock };
+});
+
+vi.mock('../../src/db/database', () => dbMock);
+vi.mock('../../src/config', () => ({
+  JWT_SECRET: 'test-jwt-secret-for-trek-testing-only',
+  ENCRYPTION_KEY: 'a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2',
+  updateJwtSecret: () => {},
+}));
+vi.mock('../../src/websocket', () => ({
+  broadcast: vi.fn(),
+  broadcastToUser: vi.fn(),
+  setupWebSocket: vi.fn(),
+  getOnlineUserIds: vi.fn(() => []),
+}));
+vi.mock('../../src/services/memories/immichService', () => ({
+  uploadToImmich: vi.fn(async () => null),
+  getImmichCredentials: vi.fn(() => null),
+}));
+
+import { createApp } from '../../src/app';
+import { createTables } from '../../src/db/schema';
+import { runMigrations } from '../../src/db/migrations';
+import { resetTestDb } from '../helpers/test-db';
+import {
+  createUser,
+  createAdmin,
+  createTrip,
+  createJourney,
+  createJourneyEntry,
+  addJourneyContributor,
+} from '../helpers/factories';
+import { authCookie } from '../helpers/auth';
+import { loginAttempts, mfaAttempts } from '../../src/routes/auth';
+import { invalidatePermissionsCache } from '../../src/services/permissions';
+
+const app: Application = createApp();
+
+beforeAll(() => { createTables(testDb); runMigrations(testDb); });
+beforeEach(() => {
+  resetTestDb(testDb);
+  loginAttempts.clear();
+  mfaAttempts.clear();
+  invalidatePermissionsCache();
+  // Enable the journey addon
+  testDb.prepare(
+    "INSERT OR REPLACE INTO addons (id, name, description, type, icon, enabled, sort_order) VALUES ('journey', 'Journey', 'Travel journal', 'global', 'Compass', 1, 35)"
+  ).run();
+});
+afterAll(() => { testDb.close(); });
+
+// ─────────────────────────────────────────────────────────────────────────────
+// List journeys (JOURNEY-INT-001, 002)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('List journeys', () => {
+  it('JOURNEY-INT-001 — GET /api/journeys returns 200 with empty list initially', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .get('/api/journeys')
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.journeys).toEqual([]);
+  });
+
+  it('JOURNEY-INT-002 — GET /api/journeys returns 401 without auth', async () => {
+    const res = await request(app).get('/api/journeys');
+    expect(res.status).toBe(401);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Create journey (JOURNEY-INT-003)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Create journey', () => {
+  it('JOURNEY-INT-003 — POST /api/journeys creates a journey', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .post('/api/journeys')
+      .set('Cookie', authCookie(user.id))
+      .send({ title: 'Japan 2026', subtitle: 'Cherry blossom season' });
+
+    expect(res.status).toBe(201);
+    expect(res.body.title).toBe('Japan 2026');
+    expect(res.body.subtitle).toBe('Cherry blossom season');
+    expect(res.body.id).toBeDefined();
+
+    // Should appear in listing now
+    const list = await request(app)
+      .get('/api/journeys')
+      .set('Cookie', authCookie(user.id));
+    expect(list.body.journeys).toHaveLength(1);
+    expect(list.body.journeys[0].title).toBe('Japan 2026');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Get journey detail (JOURNEY-INT-004, 005)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Get journey detail', () => {
+  it('JOURNEY-INT-004 — GET /api/journeys/:id returns full detail', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Iceland' });
+
+    const res = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.title).toBe('Iceland');
+    expect(res.body.entries).toBeDefined();
+    expect(res.body.contributors).toBeDefined();
+    expect(res.body.stats).toBeDefined();
+  });
+
+  it('JOURNEY-INT-005 — GET /api/journeys/:id returns 404 for non-existent', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .get('/api/journeys/99999')
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(404);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Update journey (JOURNEY-INT-006)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Update journey', () => {
+  it('JOURNEY-INT-006 — PATCH /api/journeys/:id updates journey', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Draft' });
+
+    const res = await request(app)
+      .patch(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(user.id))
+      .send({ title: 'Updated Title', subtitle: 'New subtitle' });
+
+    expect(res.status).toBe(200);
+    expect(res.body.title).toBe('Updated Title');
+    expect(res.body.subtitle).toBe('New subtitle');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete journey (JOURNEY-INT-007)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Delete journey', () => {
+  it('JOURNEY-INT-007 — DELETE /api/journeys/:id deletes journey', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .delete(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+
+    // Verify it's gone
+    const get = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(user.id));
+    expect(get.status).toBe(404);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Journey trips (JOURNEY-INT-008, 009)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey trips', () => {
+  it('JOURNEY-INT-008 — POST /api/journeys/:id/trips links a trip', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, { title: 'Paris', start_date: '2026-06-01', end_date: '2026-06-05' });
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/trips`)
+      .set('Cookie', authCookie(user.id))
+      .send({ trip_id: trip.id });
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+
+    // Verify trip appears in journey detail
+    const detail = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(user.id));
+    expect(detail.body.trips).toHaveLength(1);
+    expect(detail.body.trips[0].trip_id).toBe(trip.id);
+  });
+
+  it('JOURNEY-INT-009 — DELETE /api/journeys/:id/trips/:tripId unlinks trip', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, { title: 'Rome', start_date: '2026-07-01', end_date: '2026-07-03' });
+
+    // Link via API first (avoids factory column mismatch)
+    await request(app)
+      .post(`/api/journeys/${journey.id}/trips`)
+      .set('Cookie', authCookie(user.id))
+      .send({ trip_id: trip.id });
+
+    const res = await request(app)
+      .delete(`/api/journeys/${journey.id}/trips/${trip.id}`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Journey entries (JOURNEY-INT-010, 011, 012)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey entries', () => {
+  it('JOURNEY-INT-010 — POST /api/journeys/:id/entries creates an entry', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/entries`)
+      .set('Cookie', authCookie(user.id))
+      .send({
+        title: 'First day in Tokyo',
+        story: 'Arrived at Narita airport.',
+        entry_date: '2026-04-01',
+        entry_time: '14:00',
+        location_name: 'Narita Airport',
+      });
+
+    expect(res.status).toBe(201);
+    expect(res.body.title).toBe('First day in Tokyo');
+    expect(res.body.entry_date).toBe('2026-04-01');
+    expect(res.body.id).toBeDefined();
+  });
+
+  it('JOURNEY-INT-011 — PATCH /api/journeys/entries/:id updates entry', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, {
+      title: 'Original',
+      entry_date: '2026-04-01',
+    });
+
+    const res = await request(app)
+      .patch(`/api/journeys/entries/${entry.id}`)
+      .set('Cookie', authCookie(user.id))
+      .send({ title: 'Updated entry title', story: 'Now with a story' });
+
+    expect(res.status).toBe(200);
+    expect(res.body.title).toBe('Updated entry title');
+    expect(res.body.story).toBe('Now with a story');
+  });
+
+  it('JOURNEY-INT-012 — DELETE /api/journeys/entries/:id deletes entry', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, {
+      title: 'To delete',
+      entry_date: '2026-04-02',
+    });
+
+    const res = await request(app)
+      .delete(`/api/journeys/entries/${entry.id}`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Contributors (JOURNEY-INT-013, 014)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey contributors', () => {
+  it('JOURNEY-INT-013 — POST /api/journeys/:id/contributors adds a contributor', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contributor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/contributors`)
+      .set('Cookie', authCookie(owner.id))
+      .send({ user_id: contributor.id, role: 'editor' });
+
+    expect(res.status).toBe(201);
+    expect(res.body.success).toBe(true);
+
+    // Contributor should now be able to access the journey
+    const detail = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(contributor.id));
+    expect(detail.status).toBe(200);
+    expect(detail.body.title).toBeDefined();
+  });
+
+  it('JOURNEY-INT-014 — DELETE /api/journeys/:id/contributors/:userId removes contributor', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contributor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, contributor.id, 'editor');
+
+    const res = await request(app)
+      .delete(`/api/journeys/${journey.id}/contributors/${contributor.id}`)
+      .set('Cookie', authCookie(owner.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+
+    // Contributor should no longer access the journey
+    const detail = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(contributor.id));
+    expect(detail.status).toBe(404);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Share link (JOURNEY-INT-015, 016, 017)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey share link', () => {
+  it('JOURNEY-INT-015 — GET /api/journeys/:id/share-link returns null initially', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .get(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.link).toBeNull();
+  });
+
+  it('JOURNEY-INT-016 — POST /api/journeys/:id/share-link creates a share link', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id))
+      .send({ share_timeline: true, share_gallery: true, share_map: false });
+
+    expect(res.status).toBe(200);
+    expect(res.body.token).toBeDefined();
+    expect(typeof res.body.token).toBe('string');
+    expect(res.body.created).toBe(true);
+
+    // GET should now return the link
+    const get = await request(app)
+      .get(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id));
+    expect(get.body.link).not.toBeNull();
+    expect(get.body.link.token).toBe(res.body.token);
+    expect(get.body.link.share_timeline).toBe(true);
+    expect(get.body.link.share_gallery).toBe(true);
+    expect(get.body.link.share_map).toBe(false);
+  });
+
+  it('JOURNEY-INT-017 — DELETE /api/journeys/:id/share-link deletes the share link', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    // Create first
+    await request(app)
+      .post(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id))
+      .send({ share_timeline: true, share_gallery: true, share_map: true });
+
+    // Delete
+    const res = await request(app)
+      .delete(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+
+    // Verify it's gone
+    const get = await request(app)
+      .get(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id));
+    expect(get.body.link).toBeNull();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Permission checks (JOURNEY-INT-018, 019)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey permissions', () => {
+  it('JOURNEY-INT-018 — contributor (viewer) can read but non-member cannot', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const { user: outsider } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id, { title: 'Private Journey' });
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+
+    // Viewer can read
+    const viewerRes = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(viewer.id));
+    expect(viewerRes.status).toBe(200);
+    expect(viewerRes.body.title).toBe('Private Journey');
+
+    // Outsider cannot
+    const outsiderRes = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(outsider.id));
+    expect(outsiderRes.status).toBe(404);
+  });
+
+  it('JOURNEY-INT-019 — non-owner cannot delete a journey', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+
+    // Editor can read
+    const readRes = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(editor.id));
+    expect(readRes.status).toBe(200);
+
+    // Editor cannot delete — only owner can
+    const delRes = await request(app)
+      .delete(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(editor.id));
+    expect(delRes.status).toBe(404);
+
+    // Journey still exists
+    const verify = await request(app)
+      .get(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(owner.id));
+    expect(verify.status).toBe(200);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Suggestions (JOURNEY-INT-020)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey suggestions', () => {
+  it('JOURNEY-INT-020 — GET /api/journeys/suggestions returns trip suggestions', async () => {
+    const { user } = createUser(testDb);
+
+    // Create a recent trip so it shows up in suggestions
+    createTrip(testDb, user.id, {
+      title: 'Recent Trip',
+      start_date: '2026-03-01',
+      end_date: '2026-03-05',
+    });
+
+    const res = await request(app)
+      .get('/api/journeys/suggestions')
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.trips).toBeDefined();
+    expect(Array.isArray(res.body.trips)).toBe(true);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Available trips (JOURNEY-INT-021)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Available trips', () => {
+  it('JOURNEY-INT-021 — GET /api/journeys/available-trips returns user trips', async () => {
+    const { user } = createUser(testDb);
+    createTrip(testDb, user.id, { title: 'My Trip', start_date: '2026-05-01', end_date: '2026-05-03' });
+
+    const res = await request(app)
+      .get('/api/journeys/available-trips')
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.trips).toBeDefined();
+    expect(Array.isArray(res.body.trips)).toBe(true);
+    expect(res.body.trips.length).toBeGreaterThanOrEqual(1);
+    expect(res.body.trips[0].title).toBe('My Trip');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Create journey validation (JOURNEY-INT-022)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Create journey validation', () => {
+  it('JOURNEY-INT-022 — POST /api/journeys returns 400 without title', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .post('/api/journeys')
+      .set('Cookie', authCookie(user.id))
+      .send({ subtitle: 'No title provided' });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('Title is required');
+  });
+
+  it('JOURNEY-INT-023 — POST /api/journeys returns 400 for blank title', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .post('/api/journeys')
+      .set('Cookie', authCookie(user.id))
+      .send({ title: '   ' });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('Title is required');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Provider photos (JOURNEY-INT-024, 025, 026)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Provider photos', () => {
+  it('JOURNEY-INT-024 — POST /api/journeys/entries/:id/provider-photos creates provider photo', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+
+    const res = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/provider-photos`)
+      .set('Cookie', authCookie(user.id))
+      .send({ provider: 'immich', asset_id: 'abc-123', caption: 'Nice view' });
+
+    expect(res.status).toBe(201);
+    expect(res.body.provider).toBe('immich');
+    expect(res.body.asset_id).toBe('abc-123');
+    expect(res.body.caption).toBe('Nice view');
+  });
+
+  it('JOURNEY-INT-025 — POST /api/journeys/entries/:id/provider-photos returns 400 without required fields', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+
+    const res = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/provider-photos`)
+      .set('Cookie', authCookie(user.id))
+      .send({ caption: 'Missing provider and asset_id' });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('provider and asset_id required');
+  });
+
+  it('JOURNEY-INT-026 — POST /api/journeys/entries/:id/provider-photos returns 403 for viewer', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+    const entry = createJourneyEntry(testDb, journey.id, owner.id, { entry_date: '2026-04-01' });
+
+    const res = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/provider-photos`)
+      .set('Cookie', authCookie(viewer.id))
+      .send({ provider: 'immich', asset_id: 'xyz-456' });
+
+    expect(res.status).toBe(403);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Link photo to entry (JOURNEY-INT-027, 028)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Link photo to entry', () => {
+  it('JOURNEY-INT-027 — POST /api/journeys/entries/:id/link-photo moves photo', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry1 = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+    const entry2 = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-02' });
+
+    // Add a provider photo to entry1
+    const photoRes = await request(app)
+      .post(`/api/journeys/entries/${entry1.id}/provider-photos`)
+      .set('Cookie', authCookie(user.id))
+      .send({ provider: 'immich', asset_id: 'link-test-asset' });
+
+    // Link it to entry2
+    const res = await request(app)
+      .post(`/api/journeys/entries/${entry2.id}/link-photo`)
+      .set('Cookie', authCookie(user.id))
+      .send({ photo_id: photoRes.body.id });
+
+    expect(res.status).toBe(201);
+    expect(res.body.entry_id).toBe(entry2.id);
+  });
+
+  it('JOURNEY-INT-028 — POST /api/journeys/entries/:id/link-photo returns 400 without photo_id', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+
+    const res = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/link-photo`)
+      .set('Cookie', authCookie(user.id))
+      .send({});
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('photo_id required');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Update photo (JOURNEY-INT-029, 030)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Update photo', () => {
+  it('JOURNEY-INT-029 — PATCH /api/journeys/photos/:id updates caption and sort_order', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+
+    // Add a provider photo first
+    const photoRes = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/provider-photos`)
+      .set('Cookie', authCookie(user.id))
+      .send({ provider: 'immich', asset_id: 'update-test-asset' });
+
+    const res = await request(app)
+      .patch(`/api/journeys/photos/${photoRes.body.id}`)
+      .set('Cookie', authCookie(user.id))
+      .send({ caption: 'Updated caption', sort_order: 5 });
+
+    expect(res.status).toBe(200);
+    expect(res.body.caption).toBe('Updated caption');
+    expect(res.body.sort_order).toBe(5);
+  });
+
+  it('JOURNEY-INT-030 — PATCH /api/journeys/photos/:id returns 404 for non-existent photo', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .patch('/api/journeys/photos/99999')
+      .set('Cookie', authCookie(user.id))
+      .send({ caption: 'No photo here' });
+
+    expect(res.status).toBe(404);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Delete photo via route (JOURNEY-INT-031, 032)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Delete photo (route)', () => {
+  it('JOURNEY-INT-031 — DELETE /api/journeys/photos/:id deletes photo', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+
+    const photoRes = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/provider-photos`)
+      .set('Cookie', authCookie(user.id))
+      .send({ provider: 'immich', asset_id: 'del-test-asset' });
+
+    const res = await request(app)
+      .delete(`/api/journeys/photos/${photoRes.body.id}`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+  });
+
+  it('JOURNEY-INT-032 — DELETE /api/journeys/photos/:id returns 404 for non-existent', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .delete('/api/journeys/photos/99999')
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(404);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Journey entries sub-routes (JOURNEY-INT-033, 034)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Journey entries sub-routes', () => {
+  it('JOURNEY-INT-033 — GET /api/journeys/:id/entries returns entries list', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    createJourneyEntry(testDb, journey.id, user.id, { title: 'Day 1', entry_date: '2026-04-01' });
+    createJourneyEntry(testDb, journey.id, user.id, { title: 'Day 2', entry_date: '2026-04-02' });
+
+    const res = await request(app)
+      .get(`/api/journeys/${journey.id}/entries`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(200);
+    expect(res.body.entries).toHaveLength(2);
+  });
+
+  it('JOURNEY-INT-034 — GET /api/journeys/:id/entries returns 404 for inaccessible journey', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: outsider } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const res = await request(app)
+      .get(`/api/journeys/${journey.id}/entries`)
+      .set('Cookie', authCookie(outsider.id));
+
+    expect(res.status).toBe(404);
+  });
+
+  it('JOURNEY-INT-035 — POST /api/journeys/:id/entries returns 400 without entry_date', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/entries`)
+      .set('Cookie', authCookie(user.id))
+      .send({ title: 'Missing date' });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('entry_date is required');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Update entry edge cases (JOURNEY-INT-036, 037)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Update entry edge cases', () => {
+  it('JOURNEY-INT-036 — PATCH /api/journeys/entries/:id returns 404 for non-existent entry', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .patch('/api/journeys/entries/99999')
+      .set('Cookie', authCookie(user.id))
+      .send({ title: 'Does not exist' });
+
+    expect(res.status).toBe(404);
+  });
+
+  it('JOURNEY-INT-037 — DELETE /api/journeys/entries/:id returns 404 for non-existent entry', async () => {
+    const { user } = createUser(testDb);
+
+    const res = await request(app)
+      .delete('/api/journeys/entries/99999')
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(404);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Trip link validation (JOURNEY-INT-038, 039)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Trip link validation', () => {
+  it('JOURNEY-INT-038 — POST /api/journeys/:id/trips returns 400 without trip_id', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/trips`)
+      .set('Cookie', authCookie(user.id))
+      .send({});
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('trip_id required');
+  });
+
+  it('JOURNEY-INT-039 — DELETE /api/journeys/:id/trips/:tripId returns 403 for non-owner', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+    const trip = createTrip(testDb, owner.id, { title: 'Link Trip', start_date: '2026-06-01', end_date: '2026-06-03' });
+
+    await request(app)
+      .post(`/api/journeys/${journey.id}/trips`)
+      .set('Cookie', authCookie(owner.id))
+      .send({ trip_id: trip.id });
+
+    const res = await request(app)
+      .delete(`/api/journeys/${journey.id}/trips/${trip.id}`)
+      .set('Cookie', authCookie(editor.id));
+
+    expect(res.status).toBe(403);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Contributor routes (JOURNEY-INT-040, 041, 042)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Contributor route validation', () => {
+  it('JOURNEY-INT-040 — POST /api/journeys/:id/contributors returns 400 without user_id', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .post(`/api/journeys/${journey.id}/contributors`)
+      .set('Cookie', authCookie(user.id))
+      .send({ role: 'editor' });
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('user_id required');
+  });
+
+  it('JOURNEY-INT-041 — PATCH /api/journeys/:id/contributors/:userId updates role', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, contrib.id, 'viewer');
+
+    const res = await request(app)
+      .patch(`/api/journeys/${journey.id}/contributors/${contrib.id}`)
+      .set('Cookie', authCookie(owner.id))
+      .send({ role: 'editor' });
+
+    expect(res.status).toBe(200);
+    expect(res.body.success).toBe(true);
+  });
+
+  it('JOURNEY-INT-042 — PATCH /api/journeys/:id/contributors/:userId returns 403 for non-owner', async () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const { user: target } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+    addJourneyContributor(testDb, journey.id, target.id, 'viewer');
+
+    const res = await request(app)
+      .patch(`/api/journeys/${journey.id}/contributors/${target.id}`)
+      .set('Cookie', authCookie(editor.id))
+      .send({ role: 'editor' });
+
+    expect(res.status).toBe(403);
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Share link with update (JOURNEY-INT-043, 044)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Share link update', () => {
+  it('JOURNEY-INT-043 — POST /api/journeys/:id/share-link updates existing share link permissions', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    // Create initial share link
+    const create = await request(app)
+      .post(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id))
+      .send({ share_timeline: true, share_gallery: true, share_map: true });
+
+    expect(create.body.created).toBe(true);
+
+    // Update permissions (same endpoint creates or updates)
+    const update = await request(app)
+      .post(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id))
+      .send({ share_timeline: true, share_gallery: false, share_map: false });
+
+    expect(update.status).toBe(200);
+    expect(update.body.token).toBe(create.body.token);
+    expect(update.body.created).toBe(false);
+
+    // Verify updated permissions
+    const get = await request(app)
+      .get(`/api/journeys/${journey.id}/share-link`)
+      .set('Cookie', authCookie(user.id));
+    expect(get.body.link.share_timeline).toBe(true);
+    expect(get.body.link.share_gallery).toBe(false);
+    expect(get.body.link.share_map).toBe(false);
+  });
+
+  it('JOURNEY-INT-044 — journey PATCH /:id can update status', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const res = await request(app)
+      .patch(`/api/journeys/${journey.id}`)
+      .set('Cookie', authCookie(user.id))
+      .send({ status: 'archived' });
+
+    expect(res.status).toBe(200);
+    expect(res.body.status).toBe('archived');
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Photo upload without files (JOURNEY-INT-045)
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('Photo upload validation', () => {
+  it('JOURNEY-INT-045 — POST /api/journeys/entries/:id/photos returns 400 without files', async () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-04-01' });
+
+    const res = await request(app)
+      .post(`/api/journeys/entries/${entry.id}/photos`)
+      .set('Cookie', authCookie(user.id));
+
+    expect(res.status).toBe(400);
+    expect(res.body.error).toBe('No files uploaded');
+  });
+});
diff --git a/server/tests/unit/services/journeyService.test.ts b/server/tests/unit/services/journeyService.test.ts
new file mode 100644
index 00000000..4b6b8aa5
--- /dev/null
+++ b/server/tests/unit/services/journeyService.test.ts
@@ -0,0 +1,1352 @@
+/**
+ * Unit tests for journeyService (JOURNEY-SVC-001 through JOURNEY-SVC-038).
+ * Uses a real in-memory SQLite DB so SQL logic is exercised faithfully.
+ */
+import { describe, it, expect, vi, beforeAll, beforeEach, afterAll } from 'vitest';
+
+// -- DB setup -----------------------------------------------------------------
+
+const { testDb, dbMock } = vi.hoisted(() => {
+  const Database = require('better-sqlite3');
+  const db = new Database(':memory:');
+  db.exec('PRAGMA journal_mode = WAL');
+  db.exec('PRAGMA foreign_keys = ON');
+  db.exec('PRAGMA busy_timeout = 5000');
+  const mock = {
+    db,
+    closeDb: () => {},
+    reinitialize: () => {},
+    getPlaceWithTags: () => null,
+    canAccessTrip: () => null,
+    isOwner: () => false,
+  };
+  return { testDb: db, dbMock: mock };
+});
+
+vi.mock('../../../src/db/database', () => dbMock);
+vi.mock('../../../src/config', () => ({
+  JWT_SECRET: 'test-secret',
+  ENCRYPTION_KEY: 'a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2',
+  updateJwtSecret: () => {},
+}));
+vi.mock('../../../src/websocket', () => ({ broadcastToUser: vi.fn() }));
+
+import { createTables } from '../../../src/db/schema';
+import { runMigrations } from '../../../src/db/migrations';
+import { resetTestDb } from '../../helpers/test-db';
+import {
+  createUser,
+  createTrip,
+  createJourney,
+  createJourneyEntry,
+  addJourneyContributor,
+  createPlace,
+  createDay,
+  createDayAssignment,
+  addTripPhoto,
+} from '../../helpers/factories';
+import {
+  canAccessJourney,
+  isOwner,
+  canEdit,
+  listJourneys,
+  createJourney as svcCreateJourney,
+  getJourneyFull,
+  updateJourney,
+  deleteJourney,
+  addTripToJourney,
+  removeTripFromJourney,
+  listEntries,
+  createEntry,
+  updateEntry,
+  deleteEntry,
+  addPhoto,
+  addProviderPhoto,
+  deletePhoto,
+  addContributor,
+  updateContributorRole,
+  removeContributor,
+  getSuggestions,
+  syncTripPlaces,
+  onPlaceCreated,
+  onPlaceUpdated,
+  onPlaceDeleted,
+  linkPhotoToEntry,
+  setPhotoProvider,
+  updatePhoto,
+  listUserTrips,
+} from '../../../src/services/journeyService';
+
+beforeAll(() => {
+  createTables(testDb);
+  runMigrations(testDb);
+});
+
+beforeEach(() => {
+  resetTestDb(testDb);
+});
+
+afterAll(() => {
+  testDb.close();
+});
+
+// -- Access control -----------------------------------------------------------
+
+describe('canAccessJourney', () => {
+  it('JOURNEY-SVC-001: returns journey for owner', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'My Journey' });
+
+    const result = canAccessJourney(journey.id, user.id);
+
+    expect(result).not.toBeNull();
+    expect(result!.id).toBe(journey.id);
+    expect(result!.title).toBe('My Journey');
+  });
+
+  it('JOURNEY-SVC-002: returns journey for contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, contrib.id, 'editor');
+
+    const result = canAccessJourney(journey.id, contrib.id);
+
+    expect(result).not.toBeNull();
+    expect(result!.id).toBe(journey.id);
+  });
+
+  it('JOURNEY-SVC-003: returns null for stranger', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: stranger } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const result = canAccessJourney(journey.id, stranger.id);
+
+    expect(result).toBeNull();
+  });
+});
+
+describe('isOwner', () => {
+  it('JOURNEY-SVC-004: returns true for owner', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    expect(isOwner(journey.id, user.id)).toBe(true);
+  });
+
+  it('JOURNEY-SVC-005: returns false for contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, contrib.id, 'editor');
+
+    expect(isOwner(journey.id, contrib.id)).toBe(false);
+  });
+
+  it('JOURNEY-SVC-006: returns false for stranger', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: stranger } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    expect(isOwner(journey.id, stranger.id)).toBe(false);
+  });
+});
+
+describe('canEdit', () => {
+  it('JOURNEY-SVC-007: owner can edit', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    expect(canEdit(journey.id, user.id)).toBe(true);
+  });
+
+  it('JOURNEY-SVC-008: editor contributor can edit', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+
+    expect(canEdit(journey.id, editor.id)).toBe(true);
+  });
+
+  it('JOURNEY-SVC-009: viewer contributor cannot edit', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+
+    expect(canEdit(journey.id, viewer.id)).toBe(false);
+  });
+
+  it('JOURNEY-SVC-010: stranger cannot edit', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: stranger } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    expect(canEdit(journey.id, stranger.id)).toBe(false);
+  });
+});
+
+// -- Journey CRUD -------------------------------------------------------------
+
+describe('listJourneys', () => {
+  it('JOURNEY-SVC-011: returns owned journeys with counts', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Road Trip' });
+    createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01', location_name: 'Paris' });
+    createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-02', location_name: 'Lyon' });
+
+    const result = listJourneys(user.id);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].title).toBe('Road Trip');
+    expect(result[0].entry_count).toBe(2);
+    expect(result[0].city_count).toBe(2);
+  });
+
+  it('JOURNEY-SVC-012: includes journeys where user is contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id, { title: 'Shared Trip' });
+    addJourneyContributor(testDb, journey.id, contrib.id, 'editor');
+
+    const result = listJourneys(contrib.id);
+
+    expect(result).toHaveLength(1);
+    expect(result[0].title).toBe('Shared Trip');
+  });
+
+  it('JOURNEY-SVC-013: does not include other users journeys', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: other } = createUser(testDb);
+    createJourney(testDb, owner.id, { title: 'Private' });
+
+    const result = listJourneys(other.id);
+
+    expect(result).toHaveLength(0);
+  });
+});
+
+describe('createJourney (service)', () => {
+  it('JOURNEY-SVC-014: creates journey with contributor record', () => {
+    const { user } = createUser(testDb);
+
+    const journey = svcCreateJourney(user.id, { title: 'New Journey', subtitle: 'Subtitle' });
+
+    expect(journey.title).toBe('New Journey');
+    expect(journey.subtitle).toBe('Subtitle');
+    expect(journey.user_id).toBe(user.id);
+    expect(journey.status).toBe('active');
+
+    // owner should be added as contributor
+    const contrib = testDb.prepare(
+      'SELECT * FROM journey_contributors WHERE journey_id = ? AND user_id = ?'
+    ).get(journey.id, user.id) as { role: string } | undefined;
+    expect(contrib).toBeDefined();
+    expect(contrib!.role).toBe('owner');
+  });
+
+  it('JOURNEY-SVC-015: links trips when trip_ids provided', () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id, { title: 'Paris 2026' });
+
+    const journey = svcCreateJourney(user.id, { title: 'Euro Trip', trip_ids: [trip.id] });
+
+    const link = testDb.prepare(
+      'SELECT * FROM journey_trips WHERE journey_id = ? AND trip_id = ?'
+    ).get(journey.id, trip.id);
+    expect(link).toBeDefined();
+  });
+});
+
+describe('getJourneyFull', () => {
+  it('JOURNEY-SVC-016: returns full journey with entries, trips, contributors', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Full Journey' });
+    createJourneyEntry(testDb, journey.id, user.id, {
+      title: 'Day 1',
+      entry_date: '2026-03-01',
+      story: 'Arrived!',
+    });
+
+    const result = getJourneyFull(journey.id, user.id);
+
+    expect(result).not.toBeNull();
+    expect(result!.title).toBe('Full Journey');
+    expect(result!.entries).toHaveLength(1);
+    expect(result!.entries[0].title).toBe('Day 1');
+    expect(result!.contributors).toHaveLength(1);
+    expect(result!.stats.entries).toBe(1);
+  });
+
+  it('JOURNEY-SVC-017: returns null for unauthorized user', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: stranger } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const result = getJourneyFull(journey.id, stranger.id);
+
+    expect(result).toBeNull();
+  });
+});
+
+describe('updateJourney', () => {
+  it('JOURNEY-SVC-018: owner can update title and subtitle', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Old Title' });
+
+    const updated = updateJourney(journey.id, user.id, { title: 'New Title', subtitle: 'New Sub' });
+
+    expect(updated).not.toBeNull();
+    expect(updated!.title).toBe('New Title');
+    expect(updated!.subtitle).toBe('New Sub');
+  });
+
+  it('JOURNEY-SVC-019: editor contributor can update', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id, { title: 'Original' });
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+
+    const updated = updateJourney(journey.id, editor.id, { title: 'Edited' });
+
+    expect(updated).not.toBeNull();
+    expect(updated!.title).toBe('Edited');
+  });
+
+  it('JOURNEY-SVC-020: viewer cannot update', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+
+    const result = updateJourney(journey.id, viewer.id, { title: 'Hacked' });
+
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SVC-021: returns journey unchanged when no valid fields provided', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Same' });
+
+    const result = updateJourney(journey.id, user.id, {});
+
+    expect(result).not.toBeNull();
+    expect(result!.title).toBe('Same');
+  });
+});
+
+describe('deleteJourney', () => {
+  it('JOURNEY-SVC-022: owner can delete', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const result = deleteJourney(journey.id, user.id);
+
+    expect(result).toBe(true);
+    const row = testDb.prepare('SELECT * FROM journeys WHERE id = ?').get(journey.id);
+    expect(row).toBeUndefined();
+  });
+
+  it('JOURNEY-SVC-023: non-owner cannot delete', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+
+    const result = deleteJourney(journey.id, editor.id);
+
+    expect(result).toBe(false);
+    const row = testDb.prepare('SELECT * FROM journeys WHERE id = ?').get(journey.id);
+    expect(row).toBeDefined();
+  });
+});
+
+// -- Trip management ----------------------------------------------------------
+
+describe('addTripToJourney / removeTripFromJourney', () => {
+  it('JOURNEY-SVC-024: links a trip to a journey', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, { title: 'Linked Trip' });
+
+    const result = addTripToJourney(journey.id, trip.id, user.id);
+
+    expect(result).toBe(true);
+    const link = testDb.prepare(
+      'SELECT * FROM journey_trips WHERE journey_id = ? AND trip_id = ?'
+    ).get(journey.id, trip.id);
+    expect(link).toBeDefined();
+  });
+
+  it('JOURNEY-SVC-025: syncs places as skeleton entries when linking a trip', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Trip with Places',
+      start_date: '2026-03-01',
+      end_date: '2026-03-03',
+    });
+    const place = createPlace(testDb, trip.id, { name: 'Eiffel Tower' });
+
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    const skeletons = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND source_place_id = ? AND type = 'skeleton'"
+    ).all(journey.id, place.id);
+    expect(skeletons.length).toBe(1);
+  });
+
+  it('JOURNEY-SVC-026: owner can remove a trip from journey', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, { title: 'Remove Me' });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    const result = removeTripFromJourney(journey.id, trip.id, user.id);
+
+    expect(result).toBe(true);
+    const link = testDb.prepare(
+      'SELECT * FROM journey_trips WHERE journey_id = ? AND trip_id = ?'
+    ).get(journey.id, trip.id);
+    expect(link).toBeUndefined();
+  });
+
+  it('JOURNEY-SVC-027: non-owner cannot remove a trip', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    const trip = createTrip(testDb, owner.id, { title: 'Stay Linked' });
+    addTripToJourney(journey.id, trip.id, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+
+    const result = removeTripFromJourney(journey.id, trip.id, editor.id);
+
+    expect(result).toBe(false);
+  });
+});
+
+// -- Entries ------------------------------------------------------------------
+
+describe('listEntries', () => {
+  it('JOURNEY-SVC-028: returns entries with photos for authorized user', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, {
+      title: 'Morning Walk',
+      entry_date: '2026-03-01',
+    });
+
+    const result = listEntries(journey.id, user.id);
+
+    expect(result).not.toBeNull();
+    expect(result).toHaveLength(1);
+    expect(result![0].title).toBe('Morning Walk');
+    expect(result![0].photos).toEqual([]);
+  });
+
+  it('JOURNEY-SVC-029: returns null for unauthorized user', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: stranger } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const result = listEntries(journey.id, stranger.id);
+
+    expect(result).toBeNull();
+  });
+});
+
+describe('createEntry', () => {
+  it('JOURNEY-SVC-030: creates entry for editor', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const entry = createEntry(journey.id, user.id, {
+      title: 'Beach Day',
+      entry_date: '2026-03-10',
+      story: 'Beautiful sunset',
+      mood: 'happy',
+      weather: 'sunny',
+      tags: ['beach', 'sunset'],
+    });
+
+    expect(entry).not.toBeNull();
+    expect(entry!.title).toBe('Beach Day');
+    expect(entry!.story).toBe('Beautiful sunset');
+    expect(entry!.mood).toBe('happy');
+    expect(entry!.type).toBe('entry');
+    expect(entry!.author_id).toBe(user.id);
+  });
+
+  it('JOURNEY-SVC-031: viewer cannot create entry', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+
+    const entry = createEntry(journey.id, viewer.id, {
+      title: 'Should Fail',
+      entry_date: '2026-03-10',
+    });
+
+    expect(entry).toBeNull();
+  });
+});
+
+describe('updateEntry', () => {
+  it('JOURNEY-SVC-032: updates entry fields', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, {
+      title: 'Old',
+      entry_date: '2026-03-01',
+    });
+
+    const updated = updateEntry(entry.id, user.id, { title: 'Updated', mood: 'excited' });
+
+    expect(updated).not.toBeNull();
+    expect(updated!.title).toBe('Updated');
+    expect(updated!.mood).toBe('excited');
+  });
+
+  it('JOURNEY-SVC-033: promotes skeleton to entry when story is added', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, {
+      type: 'skeleton',
+      title: 'Placeholder',
+      entry_date: '2026-03-01',
+    });
+
+    const updated = updateEntry(entry.id, user.id, { story: 'Now I have a story!' });
+
+    expect(updated).not.toBeNull();
+    expect(updated!.type).toBe('entry');
+    expect(updated!.story).toBe('Now I have a story!');
+  });
+
+  it('JOURNEY-SVC-034: returns null for non-existent entry', () => {
+    const { user } = createUser(testDb);
+
+    const result = updateEntry(99999, user.id, { title: 'No Such Entry' });
+
+    expect(result).toBeNull();
+  });
+});
+
+describe('deleteEntry', () => {
+  it('JOURNEY-SVC-035: deletes entry for editor', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+
+    const result = deleteEntry(entry.id, user.id);
+
+    expect(result).toBe(true);
+    const row = testDb.prepare('SELECT * FROM journey_entries WHERE id = ?').get(entry.id);
+    expect(row).toBeUndefined();
+  });
+
+  it('JOURNEY-SVC-036: returns false for non-existent entry', () => {
+    const { user } = createUser(testDb);
+
+    expect(deleteEntry(99999, user.id)).toBe(false);
+  });
+
+  it('JOURNEY-SVC-037: viewer cannot delete entry', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+    const entry = createJourneyEntry(testDb, journey.id, owner.id, { entry_date: '2026-03-01' });
+
+    expect(deleteEntry(entry.id, viewer.id)).toBe(false);
+  });
+});
+
+// -- Photos -------------------------------------------------------------------
+
+describe('addPhoto / addProviderPhoto / deletePhoto', () => {
+  it('JOURNEY-SVC-038: addPhoto creates a local photo on an entry', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+
+    const photo = addPhoto(entry.id, user.id, '/uploads/photo.jpg', '/uploads/thumb.jpg', 'Sunset');
+
+    expect(photo).not.toBeNull();
+    expect(photo!.file_path).toBe('/uploads/photo.jpg');
+    expect(photo!.thumbnail_path).toBe('/uploads/thumb.jpg');
+    expect(photo!.caption).toBe('Sunset');
+    expect(photo!.provider).toBe('local');
+  });
+
+  it('JOURNEY-SVC-039: addPhoto returns null for non-existent entry', () => {
+    const { user } = createUser(testDb);
+
+    const result = addPhoto(99999, user.id, '/uploads/photo.jpg');
+
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SVC-040: addProviderPhoto creates a provider-backed photo', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+
+    const photo = addProviderPhoto(entry.id, user.id, 'immich', 'asset-123', 'My caption');
+
+    expect(photo).not.toBeNull();
+    expect(photo!.provider).toBe('immich');
+    expect(photo!.asset_id).toBe('asset-123');
+    expect(photo!.caption).toBe('My caption');
+  });
+
+  it('JOURNEY-SVC-041: addProviderPhoto skips duplicate asset', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+
+    addProviderPhoto(entry.id, user.id, 'immich', 'dup-asset');
+    const duplicate = addProviderPhoto(entry.id, user.id, 'immich', 'dup-asset');
+
+    expect(duplicate).toBeNull();
+  });
+
+  it('JOURNEY-SVC-042: deletePhoto removes photo and returns it', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/delete-me.jpg');
+
+    const deleted = deletePhoto(photo!.id, user.id);
+
+    expect(deleted).not.toBeNull();
+    expect(deleted!.id).toBe(photo!.id);
+    const row = testDb.prepare('SELECT * FROM journey_photos WHERE id = ?').get(photo!.id);
+    expect(row).toBeUndefined();
+  });
+
+  it('JOURNEY-SVC-043: deletePhoto returns null for non-existent photo', () => {
+    const { user } = createUser(testDb);
+
+    expect(deletePhoto(99999, user.id)).toBeNull();
+  });
+
+  it('JOURNEY-SVC-044: viewer cannot add photo', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+    const entry = createJourneyEntry(testDb, journey.id, owner.id, { entry_date: '2026-03-01' });
+
+    const result = addPhoto(entry.id, viewer.id, '/uploads/no.jpg');
+
+    expect(result).toBeNull();
+  });
+});
+
+// -- Contributors -------------------------------------------------------------
+
+describe('addContributor / updateContributorRole / removeContributor', () => {
+  it('JOURNEY-SVC-045: owner can add contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: newContrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const result = addContributor(journey.id, owner.id, newContrib.id, 'editor');
+
+    expect(result).toBe(true);
+    const row = testDb.prepare(
+      'SELECT * FROM journey_contributors WHERE journey_id = ? AND user_id = ?'
+    ).get(journey.id, newContrib.id) as { role: string } | undefined;
+    expect(row).toBeDefined();
+    expect(row!.role).toBe('editor');
+  });
+
+  it('JOURNEY-SVC-046: non-owner cannot add contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const { user: newUser } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+
+    const result = addContributor(journey.id, editor.id, newUser.id, 'viewer');
+
+    expect(result).toBe(false);
+  });
+
+  it('JOURNEY-SVC-047: owner cannot add themselves as contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    const result = addContributor(journey.id, owner.id, owner.id, 'editor');
+
+    expect(result).toBe(false);
+  });
+
+  it('JOURNEY-SVC-048: owner can update contributor role', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, contrib.id, 'viewer');
+
+    const result = updateContributorRole(journey.id, owner.id, contrib.id, 'editor');
+
+    expect(result).toBe(true);
+    const row = testDb.prepare(
+      'SELECT role FROM journey_contributors WHERE journey_id = ? AND user_id = ?'
+    ).get(journey.id, contrib.id) as { role: string };
+    expect(row.role).toBe('editor');
+  });
+
+  it('JOURNEY-SVC-049: non-owner cannot update contributor role', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: editor } = createUser(testDb);
+    const { user: target } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, editor.id, 'editor');
+    addJourneyContributor(testDb, journey.id, target.id, 'viewer');
+
+    const result = updateContributorRole(journey.id, editor.id, target.id, 'editor');
+
+    expect(result).toBe(false);
+  });
+
+  it('JOURNEY-SVC-050: owner can remove contributor', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: contrib } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, contrib.id, 'editor');
+
+    const result = removeContributor(journey.id, owner.id, contrib.id);
+
+    expect(result).toBe(true);
+    const row = testDb.prepare(
+      'SELECT * FROM journey_contributors WHERE journey_id = ? AND user_id = ?'
+    ).get(journey.id, contrib.id);
+    expect(row).toBeUndefined();
+  });
+
+  it('JOURNEY-SVC-051: removeContributor does not remove owner contributor record', () => {
+    const { user: owner } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+
+    // attempting to remove the owner's own contributor record should not work
+    // (the SQL filters role != 'owner')
+    removeContributor(journey.id, owner.id, owner.id);
+
+    const row = testDb.prepare(
+      'SELECT * FROM journey_contributors WHERE journey_id = ? AND user_id = ?'
+    ).get(journey.id, owner.id);
+    expect(row).toBeDefined();
+  });
+});
+
+// -- Suggestions --------------------------------------------------------------
+
+describe('getSuggestions', () => {
+  it('JOURNEY-SVC-052: returns recently ended trips not yet in a journey', () => {
+    const { user } = createUser(testDb);
+    // Trip that ended 5 days ago (within 30-day window)
+    const fiveDaysAgo = new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    const tenDaysAgo = new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    createTrip(testDb, user.id, {
+      title: 'Recent Trip',
+      start_date: tenDaysAgo,
+      end_date: fiveDaysAgo,
+    });
+
+    const suggestions = getSuggestions(user.id);
+
+    expect(suggestions.length).toBe(1);
+    expect((suggestions[0] as any).title).toBe('Recent Trip');
+  });
+
+  it('JOURNEY-SVC-053: excludes trips already linked to a journey', () => {
+    const { user } = createUser(testDb);
+    const fiveDaysAgo = new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    const tenDaysAgo = new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    const trip = createTrip(testDb, user.id, {
+      title: 'Already Linked',
+      start_date: tenDaysAgo,
+      end_date: fiveDaysAgo,
+    });
+    const journey = createJourney(testDb, user.id);
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    const suggestions = getSuggestions(user.id);
+
+    expect(suggestions.length).toBe(0);
+  });
+
+  it('JOURNEY-SVC-054: excludes trips ending in the future', () => {
+    const { user } = createUser(testDb);
+    const tomorrow = new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    createTrip(testDb, user.id, {
+      title: 'Future Trip',
+      start_date: '2026-04-01',
+      end_date: tomorrow,
+    });
+
+    const suggestions = getSuggestions(user.id);
+
+    expect(suggestions.length).toBe(0);
+  });
+});
+
+// -- syncTripPlaces ------------------------------------------------------------
+
+describe('syncTripPlaces', () => {
+  it('JOURNEY-SVC-055: creates skeleton entries for each trip place', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Sync Trip',
+      start_date: '2026-05-01',
+      end_date: '2026-05-03',
+    });
+    const place1 = createPlace(testDb, trip.id, { name: 'Eiffel Tower' });
+    const place2 = createPlace(testDb, trip.id, { name: 'Louvre' });
+
+    syncTripPlaces(journey.id, trip.id, user.id);
+
+    const skeletons = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND type = 'skeleton'"
+    ).all(journey.id) as any[];
+    expect(skeletons.length).toBe(2);
+    const names = skeletons.map((s: any) => s.title).sort();
+    expect(names).toEqual(['Eiffel Tower', 'Louvre']);
+  });
+
+  it('JOURNEY-SVC-056: skips places that already have skeleton entries', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Idempotent Trip',
+      start_date: '2026-05-01',
+      end_date: '2026-05-02',
+    });
+    createPlace(testDb, trip.id, { name: 'Notre Dame' });
+
+    syncTripPlaces(journey.id, trip.id, user.id);
+    syncTripPlaces(journey.id, trip.id, user.id); // second call
+
+    const skeletons = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND type = 'skeleton'"
+    ).all(journey.id);
+    expect(skeletons.length).toBe(1);
+  });
+
+  it('JOURNEY-SVC-057: uses day date for skeleton entry_date when available', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    // Trip with dates auto-creates days; grab an existing day to assign the place
+    const trip = createTrip(testDb, user.id, {
+      title: 'Dated Trip',
+      start_date: '2026-06-10',
+      end_date: '2026-06-12',
+    });
+    const day = testDb.prepare(
+      "SELECT * FROM days WHERE trip_id = ? AND date = '2026-06-11'"
+    ).get(trip.id) as { id: number };
+    const place = createPlace(testDb, trip.id, { name: 'Colosseum' });
+    createDayAssignment(testDb, day.id, place.id);
+
+    syncTripPlaces(journey.id, trip.id, user.id);
+
+    const skeleton = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND source_place_id = ?"
+    ).get(journey.id, place.id) as any;
+    expect(skeleton).toBeDefined();
+    expect(skeleton.entry_date).toBe('2026-06-11');
+  });
+});
+
+// -- onPlaceCreated / onPlaceUpdated / onPlaceDeleted -------------------------
+
+describe('onPlaceCreated', () => {
+  it('JOURNEY-SVC-058: creates skeleton entry in linked journeys', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Webhook Trip',
+      start_date: '2026-07-01',
+      end_date: '2026-07-03',
+    });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    // Create a new place after trip is linked
+    const place = createPlace(testDb, trip.id, { name: 'Sagrada Familia' });
+    onPlaceCreated(trip.id, place.id);
+
+    const skeleton = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND source_place_id = ? AND type = 'skeleton'"
+    ).get(journey.id, place.id);
+    expect(skeleton).toBeDefined();
+  });
+
+  it('JOURNEY-SVC-059: does nothing if trip is not linked to any journey', () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id, { title: 'Unlinked Trip' });
+    const place = createPlace(testDb, trip.id, { name: 'Remote Place' });
+
+    onPlaceCreated(trip.id, place.id);
+
+    const entries = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE source_place_id = ?"
+    ).all(place.id);
+    expect(entries.length).toBe(0);
+  });
+
+  it('JOURNEY-SVC-060: does not duplicate if skeleton already exists', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Dup Trip',
+      start_date: '2026-07-01',
+      end_date: '2026-07-02',
+    });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    const place = createPlace(testDb, trip.id, { name: 'Arc de Triomphe' });
+    onPlaceCreated(trip.id, place.id);
+    onPlaceCreated(trip.id, place.id); // second call
+
+    const entries = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND source_place_id = ?"
+    ).all(journey.id, place.id);
+    expect(entries.length).toBe(1);
+  });
+});
+
+describe('onPlaceUpdated', () => {
+  it('JOURNEY-SVC-061: updates skeleton entry fields when place changes', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Update Place Trip',
+      start_date: '2026-08-01',
+      end_date: '2026-08-03',
+    });
+    const place = createPlace(testDb, trip.id, { name: 'Old Name' });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    // Update the place name directly in DB
+    testDb.prepare('UPDATE places SET name = ?, address = ? WHERE id = ?').run('New Name', 'New Address', place.id);
+    onPlaceUpdated(place.id);
+
+    const entry = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND source_place_id = ? AND type = 'skeleton'"
+    ).get(journey.id, place.id) as any;
+    expect(entry).toBeDefined();
+    expect(entry.title).toBe('New Name');
+    expect(entry.location_name).toBe('New Address');
+  });
+
+  it('JOURNEY-SVC-062: only updates location on filled entries, not title', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Filled Entry Trip',
+      start_date: '2026-08-01',
+      end_date: '2026-08-02',
+    });
+    const place = createPlace(testDb, trip.id, { name: 'Original Place' });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    // Promote the skeleton to a full entry
+    const skeleton = testDb.prepare(
+      "SELECT id FROM journey_entries WHERE journey_id = ? AND source_place_id = ?"
+    ).get(journey.id, place.id) as { id: number };
+    updateEntry(skeleton.id, user.id, { story: 'My story', title: 'Custom Title' });
+
+    // Now update the place
+    testDb.prepare('UPDATE places SET name = ?, address = ? WHERE id = ?').run('Changed Place', 'Changed Addr', place.id);
+    onPlaceUpdated(place.id);
+
+    const entry = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE id = ?"
+    ).get(skeleton.id) as any;
+    expect(entry.title).toBe('Custom Title'); // title unchanged
+    expect(entry.location_name).toBe('Changed Addr'); // location updated
+  });
+
+  it('JOURNEY-SVC-063: does nothing if place has no linked entries', () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id, { title: 'Orphan Trip' });
+    const place = createPlace(testDb, trip.id, { name: 'Orphan Place' });
+
+    // Should not throw
+    onPlaceUpdated(place.id);
+
+    const entries = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE source_place_id = ?"
+    ).all(place.id);
+    expect(entries.length).toBe(0);
+  });
+});
+
+describe('onPlaceDeleted', () => {
+  it('JOURNEY-SVC-064: deletes empty skeleton entries', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Delete Place Trip',
+      start_date: '2026-09-01',
+      end_date: '2026-09-02',
+    });
+    const place = createPlace(testDb, trip.id, { name: 'To Be Deleted' });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    onPlaceDeleted(place.id);
+
+    const entry = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE source_place_id = ?"
+    ).get(place.id);
+    expect(entry).toBeUndefined();
+  });
+
+  it('JOURNEY-SVC-065: detaches filled entries and adds note instead of deleting', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Detach Trip',
+      start_date: '2026-09-01',
+      end_date: '2026-09-02',
+    });
+    const place = createPlace(testDb, trip.id, { name: 'Detach Place' });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    // Promote the skeleton to a filled entry
+    const skeleton = testDb.prepare(
+      "SELECT id FROM journey_entries WHERE journey_id = ? AND source_place_id = ?"
+    ).get(journey.id, place.id) as { id: number };
+    updateEntry(skeleton.id, user.id, { story: 'I really enjoyed this place' });
+
+    onPlaceDeleted(place.id);
+
+    const entry = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE id = ?"
+    ).get(skeleton.id) as any;
+    expect(entry).toBeDefined();
+    expect(entry.source_place_id).toBeNull();
+    expect(entry.source_trip_id).toBeNull();
+    expect(entry.story).toContain('original trip place was removed');
+  });
+
+  it('JOURNEY-SVC-066: does nothing for unlinked places', () => {
+    const { user } = createUser(testDb);
+    const trip = createTrip(testDb, user.id, { title: 'Unlinked' });
+    const place = createPlace(testDb, trip.id, { name: 'Nowhere' });
+
+    // Should not throw
+    onPlaceDeleted(place.id);
+  });
+});
+
+// -- linkPhotoToEntry ----------------------------------------------------------
+
+describe('linkPhotoToEntry', () => {
+  it('JOURNEY-SVC-067: moves photo from one entry to another', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry1 = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const entry2 = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-02' });
+
+    const photo = addPhoto(entry1.id, user.id, '/uploads/link-test.jpg');
+    expect(photo).not.toBeNull();
+
+    const result = linkPhotoToEntry(entry2.id, photo!.id, user.id);
+    expect(result).not.toBeNull();
+    expect(result!.entry_id).toBe(entry2.id);
+  });
+
+  it('JOURNEY-SVC-068: returns same photo if already on target entry', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/same-entry.jpg');
+
+    const result = linkPhotoToEntry(entry.id, photo!.id, user.id);
+    expect(result).not.toBeNull();
+    expect(result!.id).toBe(photo!.id);
+    expect(result!.entry_id).toBe(entry.id);
+  });
+
+  it('JOURNEY-SVC-069: returns null for non-existent entry', () => {
+    const { user } = createUser(testDb);
+
+    const result = linkPhotoToEntry(99999, 1, user.id);
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SVC-070: returns null for non-existent photo', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+
+    const result = linkPhotoToEntry(entry.id, 99999, user.id);
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SVC-071: viewer cannot link photo', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+    const entry = createJourneyEntry(testDb, journey.id, owner.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, owner.id, '/uploads/owner-photo.jpg');
+
+    const result = linkPhotoToEntry(entry.id, photo!.id, viewer.id);
+    expect(result).toBeNull();
+  });
+});
+
+// -- setPhotoProvider ----------------------------------------------------------
+
+describe('setPhotoProvider', () => {
+  it('JOURNEY-SVC-072: sets provider info on an existing photo', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/provider-test.jpg');
+
+    setPhotoProvider(photo!.id, 'immich', 'immich-asset-789', user.id);
+
+    const updated = testDb.prepare('SELECT * FROM journey_photos WHERE id = ?').get(photo!.id) as any;
+    expect(updated.provider).toBe('immich');
+    expect(updated.asset_id).toBe('immich-asset-789');
+    expect(updated.owner_id).toBe(user.id);
+  });
+});
+
+// -- updatePhoto ---------------------------------------------------------------
+
+describe('updatePhoto', () => {
+  it('JOURNEY-SVC-073: updates caption on photo', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/caption-test.jpg', undefined, 'Old caption');
+
+    const result = updatePhoto(photo!.id, user.id, { caption: 'New caption' });
+
+    expect(result).not.toBeNull();
+    expect(result!.caption).toBe('New caption');
+  });
+
+  it('JOURNEY-SVC-074: updates sort_order on photo', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/sort-test.jpg');
+
+    const result = updatePhoto(photo!.id, user.id, { sort_order: 10 });
+
+    expect(result).not.toBeNull();
+    expect(result!.sort_order).toBe(10);
+  });
+
+  it('JOURNEY-SVC-075: returns null for non-existent photo', () => {
+    const { user } = createUser(testDb);
+
+    const result = updatePhoto(99999, user.id, { caption: 'Nope' });
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SVC-076: returns photo unchanged when no fields provided', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/noop-test.jpg', undefined, 'Stay');
+
+    const result = updatePhoto(photo!.id, user.id, {});
+
+    expect(result).not.toBeNull();
+    expect(result!.caption).toBe('Stay');
+  });
+
+  it('JOURNEY-SVC-077: viewer cannot update photo', () => {
+    const { user: owner } = createUser(testDb);
+    const { user: viewer } = createUser(testDb);
+    const journey = createJourney(testDb, owner.id);
+    addJourneyContributor(testDb, journey.id, viewer.id, 'viewer');
+    const entry = createJourneyEntry(testDb, journey.id, owner.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, owner.id, '/uploads/viewer-update.jpg');
+
+    const result = updatePhoto(photo!.id, viewer.id, { caption: 'Hacked' });
+    expect(result).toBeNull();
+  });
+});
+
+// -- listUserTrips -------------------------------------------------------------
+
+describe('listUserTrips', () => {
+  it('JOURNEY-SVC-078: returns all user trips', () => {
+    const { user } = createUser(testDb);
+    createTrip(testDb, user.id, { title: 'Trip A', start_date: '2026-01-01', end_date: '2026-01-03' });
+    createTrip(testDb, user.id, { title: 'Trip B', start_date: '2026-02-01', end_date: '2026-02-03' });
+
+    const trips = listUserTrips(user.id);
+
+    expect(trips.length).toBe(2);
+    // ordered by start_date DESC
+    expect((trips[0] as any).title).toBe('Trip B');
+    expect((trips[1] as any).title).toBe('Trip A');
+  });
+
+  it('JOURNEY-SVC-079: returns empty for user with no trips', () => {
+    const { user } = createUser(testDb);
+
+    const trips = listUserTrips(user.id);
+
+    expect(trips.length).toBe(0);
+  });
+
+  it('JOURNEY-SVC-080: does not return other users trips', () => {
+    const { user: user1 } = createUser(testDb);
+    const { user: user2 } = createUser(testDb);
+    createTrip(testDb, user1.id, { title: 'User1 Trip' });
+
+    const trips = listUserTrips(user2.id);
+
+    expect(trips.length).toBe(0);
+  });
+});
+
+// -- Edge cases ----------------------------------------------------------------
+
+describe('Edge cases', () => {
+  it('JOURNEY-SVC-081: deleteEntry moves photos to Gallery entry instead of deleting them', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+    const photo = addPhoto(entry.id, user.id, '/uploads/gallery-move.jpg');
+
+    const result = deleteEntry(entry.id, user.id);
+    expect(result).toBe(true);
+
+    // Photo should still exist, moved to a Gallery entry
+    const movedPhoto = testDb.prepare('SELECT * FROM journey_photos WHERE id = ?').get(photo!.id) as any;
+    expect(movedPhoto).toBeDefined();
+    expect(movedPhoto.entry_id).not.toBe(entry.id);
+
+    const galleryEntry = testDb.prepare('SELECT * FROM journey_entries WHERE id = ?').get(movedPhoto.entry_id) as any;
+    expect(galleryEntry.title).toBe('Gallery');
+  });
+
+  it('JOURNEY-SVC-082: updateJourney can set cover_gradient', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const result = updateJourney(journey.id, user.id, { cover_gradient: 'linear-gradient(to right, #ff0000, #0000ff)' });
+
+    expect(result).not.toBeNull();
+    expect((result as any).cover_gradient).toBe('linear-gradient(to right, #ff0000, #0000ff)');
+  });
+
+  it('JOURNEY-SVC-083: updateJourney ignores unknown fields', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Original' });
+
+    const result = updateJourney(journey.id, user.id, { bogus: 'field' } as any);
+
+    expect(result).not.toBeNull();
+    expect(result!.title).toBe('Original');
+  });
+
+  it('JOURNEY-SVC-084: createEntry stores tags and pros_cons as JSON', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const entry = createEntry(journey.id, user.id, {
+      entry_date: '2026-03-10',
+      tags: ['food', 'culture'],
+      pros_cons: { pros: ['Great view'], cons: ['Expensive'] },
+    });
+
+    expect(entry).not.toBeNull();
+    // Read raw from DB
+    const raw = testDb.prepare('SELECT tags, pros_cons FROM journey_entries WHERE id = ?').get(entry!.id) as any;
+    expect(JSON.parse(raw.tags)).toEqual(['food', 'culture']);
+    expect(JSON.parse(raw.pros_cons)).toEqual({ pros: ['Great view'], cons: ['Expensive'] });
+  });
+
+  it('JOURNEY-SVC-085: updateEntry handles tags and pros_cons update', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, { entry_date: '2026-03-01' });
+
+    const result = updateEntry(entry.id, user.id, {
+      tags: ['beach', 'adventure'],
+      pros_cons: { pros: ['Fun'], cons: [] },
+    });
+
+    expect(result).not.toBeNull();
+    const raw = testDb.prepare('SELECT tags, pros_cons FROM journey_entries WHERE id = ?').get(entry.id) as any;
+    expect(JSON.parse(raw.tags)).toEqual(['beach', 'adventure']);
+    expect(JSON.parse(raw.pros_cons)).toEqual({ pros: ['Fun'], cons: [] });
+  });
+
+  it('JOURNEY-SVC-086: addTripToJourney syncs trip photos when present', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Photo Trip',
+      start_date: '2026-04-01',
+      end_date: '2026-04-03',
+    });
+    addTripPhoto(testDb, trip.id, user.id, 'immich-photo-1', 'immich', { shared: true });
+
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    // Should have a [Trip Photos] entry with the imported photo
+    const photoEntry = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND title = '[Trip Photos]'"
+    ).get(journey.id) as any;
+    expect(photoEntry).toBeDefined();
+
+    const photos = testDb.prepare(
+      'SELECT * FROM journey_photos WHERE entry_id = ?'
+    ).all(photoEntry.id);
+    expect(photos.length).toBe(1);
+    expect((photos[0] as any).asset_id).toBe('immich-photo-1');
+  });
+
+  it('JOURNEY-SVC-087: removeTripFromJourney detaches filled entries, deletes skeletons', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const trip = createTrip(testDb, user.id, {
+      title: 'Mixed Trip',
+      start_date: '2026-04-01',
+      end_date: '2026-04-03',
+    });
+    const place1 = createPlace(testDb, trip.id, { name: 'Skeleton Place' });
+    const place2 = createPlace(testDb, trip.id, { name: 'Filled Place' });
+    addTripToJourney(journey.id, trip.id, user.id);
+
+    // Promote one skeleton to a filled entry
+    const filled = testDb.prepare(
+      "SELECT id FROM journey_entries WHERE journey_id = ? AND source_place_id = ? AND type = 'skeleton'"
+    ).get(journey.id, place2.id) as { id: number };
+    updateEntry(filled.id, user.id, { story: 'Now filled!' });
+
+    removeTripFromJourney(journey.id, trip.id, user.id);
+
+    // skeleton for place1 should be deleted
+    const skeletonRow = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE journey_id = ? AND source_place_id = ?"
+    ).get(journey.id, place1.id);
+    expect(skeletonRow).toBeUndefined();
+
+    // filled entry for place2 should be detached but still present
+    const filledRow = testDb.prepare(
+      "SELECT * FROM journey_entries WHERE id = ?"
+    ).get(filled.id) as any;
+    expect(filledRow).toBeDefined();
+    expect(filledRow.source_trip_id).toBeNull();
+    expect(filledRow.source_place_id).toBeNull();
+  });
+});
diff --git a/server/tests/unit/services/journeyShareService.test.ts b/server/tests/unit/services/journeyShareService.test.ts
new file mode 100644
index 00000000..e62c06b7
--- /dev/null
+++ b/server/tests/unit/services/journeyShareService.test.ts
@@ -0,0 +1,368 @@
+/**
+ * Unit tests for journeyShareService — JOURNEY-SHARE-001 through JOURNEY-SHARE-018.
+ * Uses a real in-memory SQLite DB so SQL logic is exercised faithfully.
+ */
+import { describe, it, expect, vi, beforeAll, beforeEach, afterAll } from 'vitest';
+
+// -- DB setup -----------------------------------------------------------------
+
+const { testDb, dbMock } = vi.hoisted(() => {
+  const Database = require('better-sqlite3');
+  const db = new Database(':memory:');
+  db.exec('PRAGMA journal_mode = WAL');
+  db.exec('PRAGMA foreign_keys = ON');
+  db.exec('PRAGMA busy_timeout = 5000');
+  const mock = {
+    db,
+    closeDb: () => {},
+    reinitialize: () => {},
+    getPlaceWithTags: () => null,
+    canAccessTrip: () => null,
+    isOwner: () => false,
+  };
+  return { testDb: db, dbMock: mock };
+});
+
+vi.mock('../../../src/db/database', () => dbMock);
+vi.mock('../../../src/config', () => ({
+  JWT_SECRET: 'test-secret',
+  ENCRYPTION_KEY: 'a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2a3b4c5d6a7b8c9d0e1f2',
+  updateJwtSecret: () => {},
+}));
+
+import { createTables } from '../../../src/db/schema';
+import { runMigrations } from '../../../src/db/migrations';
+import { resetTestDb } from '../../helpers/test-db';
+import { createUser, createJourney, createJourneyEntry } from '../../helpers/factories';
+import {
+  createOrUpdateJourneyShareLink,
+  getJourneyShareLink,
+  deleteJourneyShareLink,
+  validateShareTokenForPhoto,
+  validateShareTokenForAsset,
+  getPublicJourney,
+} from '../../../src/services/journeyShareService';
+
+beforeAll(() => {
+  createTables(testDb);
+  runMigrations(testDb);
+});
+
+beforeEach(() => {
+  resetTestDb(testDb);
+});
+
+afterAll(() => {
+  testDb.close();
+});
+
+// -- Helpers ------------------------------------------------------------------
+
+/** Insert a journey_photos row and return its id. */
+function insertJourneyPhoto(
+  entryId: number,
+  opts: { filePath?: string; assetId?: string; ownerId?: number } = {}
+): number {
+  const result = testDb.prepare(`
+    INSERT INTO journey_photos (entry_id, file_path, caption, sort_order, created_at, asset_id, owner_id)
+    VALUES (?, ?, NULL, 0, ?, ?, ?)
+  `).run(entryId, opts.filePath ?? '/photos/test.jpg', Date.now(), opts.assetId ?? null, opts.ownerId ?? null);
+  return result.lastInsertRowid as number;
+}
+
+// -- Tests --------------------------------------------------------------------
+
+describe('createOrUpdateJourneyShareLink', () => {
+  it('JOURNEY-SHARE-001: creates a new share link with default permissions', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const result = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    expect(result.created).toBe(true);
+    expect(result.token).toBeTruthy();
+    expect(result.token.length).toBeGreaterThan(10);
+  });
+
+  it('JOURNEY-SHARE-002: creates a share link with custom permissions', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    createOrUpdateJourneyShareLink(journey.id, user.id, {
+      share_timeline: true,
+      share_gallery: false,
+      share_map: false,
+    });
+
+    const link = getJourneyShareLink(journey.id);
+    expect(link).not.toBeNull();
+    expect(link!.share_timeline).toBe(true);
+    expect(link!.share_gallery).toBe(false);
+    expect(link!.share_map).toBe(false);
+  });
+
+  it('JOURNEY-SHARE-003: updates permissions on existing link without regenerating token', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const first = createOrUpdateJourneyShareLink(journey.id, user.id, {
+      share_timeline: true,
+      share_gallery: true,
+      share_map: true,
+    });
+    const second = createOrUpdateJourneyShareLink(journey.id, user.id, {
+      share_timeline: true,
+      share_gallery: false,
+      share_map: false,
+    });
+
+    expect(second.created).toBe(false);
+    expect(second.token).toBe(first.token);
+
+    const link = getJourneyShareLink(journey.id);
+    expect(link!.share_gallery).toBe(false);
+    expect(link!.share_map).toBe(false);
+  });
+
+  it('JOURNEY-SHARE-004: different journeys get different tokens', () => {
+    const { user } = createUser(testDb);
+    const j1 = createJourney(testDb, user.id);
+    const j2 = createJourney(testDb, user.id);
+
+    const r1 = createOrUpdateJourneyShareLink(j1.id, user.id, {});
+    const r2 = createOrUpdateJourneyShareLink(j2.id, user.id, {});
+
+    expect(r1.token).not.toBe(r2.token);
+  });
+});
+
+describe('getJourneyShareLink', () => {
+  it('JOURNEY-SHARE-005: returns null when no share link exists', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    const result = getJourneyShareLink(journey.id);
+
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SHARE-006: returns share link info when it exists', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    createOrUpdateJourneyShareLink(journey.id, user.id, {
+      share_timeline: true,
+      share_gallery: false,
+      share_map: true,
+    });
+
+    const result = getJourneyShareLink(journey.id);
+
+    expect(result).not.toBeNull();
+    expect(result!.token).toBeTruthy();
+    expect(result!.share_timeline).toBe(true);
+    expect(result!.share_gallery).toBe(false);
+    expect(result!.share_map).toBe(true);
+    expect(result!.created_at).toBeTruthy();
+  });
+});
+
+describe('deleteJourneyShareLink', () => {
+  it('JOURNEY-SHARE-007: removes an existing share link', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    deleteJourneyShareLink(journey.id);
+
+    expect(getJourneyShareLink(journey.id)).toBeNull();
+  });
+
+  it('JOURNEY-SHARE-008: does not throw when deleting non-existent link', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+
+    expect(() => deleteJourneyShareLink(journey.id)).not.toThrow();
+  });
+});
+
+describe('validateShareTokenForPhoto', () => {
+  it('JOURNEY-SHARE-009: returns journeyId and ownerId for valid token + photo', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id);
+    const photoId = insertJourneyPhoto(entry.id, { ownerId: user.id });
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = validateShareTokenForPhoto(token, photoId);
+
+    expect(result).not.toBeNull();
+    expect(result!.journeyId).toBe(journey.id);
+    expect(result!.ownerId).toBe(user.id);
+  });
+
+  it('JOURNEY-SHARE-010: returns null for invalid token', () => {
+    const result = validateShareTokenForPhoto('nonexistent-token', 1);
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SHARE-011: returns null when photo does not belong to shared journey', () => {
+    const { user } = createUser(testDb);
+    const journey1 = createJourney(testDb, user.id);
+    const journey2 = createJourney(testDb, user.id);
+    const entry2 = createJourneyEntry(testDb, journey2.id, user.id);
+    const photoId = insertJourneyPhoto(entry2.id);
+    const { token } = createOrUpdateJourneyShareLink(journey1.id, user.id, {});
+
+    const result = validateShareTokenForPhoto(token, photoId);
+
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SHARE-012: falls back to journey owner_id when photo has no owner_id', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id);
+    const photoId = insertJourneyPhoto(entry.id, { ownerId: undefined });
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = validateShareTokenForPhoto(token, photoId);
+
+    expect(result).not.toBeNull();
+    expect(result!.ownerId).toBe(user.id);
+  });
+});
+
+describe('validateShareTokenForAsset', () => {
+  it('JOURNEY-SHARE-013: returns ownerId when asset belongs to shared journey', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id);
+    insertJourneyPhoto(entry.id, { assetId: 'immich-asset-123', ownerId: user.id });
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = validateShareTokenForAsset(token, 'immich-asset-123');
+
+    expect(result).not.toBeNull();
+    expect(result!.ownerId).toBe(user.id);
+  });
+
+  it('JOURNEY-SHARE-014: returns null for invalid token', () => {
+    const result = validateShareTokenForAsset('bad-token', 'some-asset');
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SHARE-015: falls back to journey owner when asset not found in photos', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = validateShareTokenForAsset(token, 'nonexistent-asset');
+
+    expect(result).not.toBeNull();
+    expect(result!.ownerId).toBe(user.id);
+  });
+});
+
+describe('getPublicJourney', () => {
+  it('JOURNEY-SHARE-016: returns null for invalid token', () => {
+    const result = getPublicJourney('invalid-token');
+    expect(result).toBeNull();
+  });
+
+  it('JOURNEY-SHARE-017: returns journey data with entries, stats, and permissions', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, {
+      title: 'Japan 2026',
+      subtitle: 'Cherry blossom season',
+    });
+    const entry1 = createJourneyEntry(testDb, journey.id, user.id, {
+      type: 'entry',
+      title: 'Arrived in Tokyo',
+      entry_date: '2026-03-20',
+      location_name: 'Tokyo',
+    });
+    createJourneyEntry(testDb, journey.id, user.id, {
+      type: 'entry',
+      title: 'Kyoto Day Trip',
+      entry_date: '2026-03-22',
+      location_name: 'Kyoto',
+    });
+    insertJourneyPhoto(entry1.id);
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {
+      share_timeline: true,
+      share_gallery: true,
+      share_map: false,
+    });
+
+    const result = getPublicJourney(token);
+
+    expect(result).not.toBeNull();
+    expect(result!.journey.title).toBe('Japan 2026');
+    expect(result!.journey.subtitle).toBe('Cherry blossom season');
+    expect(result!.entries).toHaveLength(2);
+    expect(result!.stats.entries).toBe(2);
+    expect(result!.stats.photos).toBe(1);
+    expect(result!.stats.cities).toBe(2);
+    expect(result!.permissions.share_timeline).toBe(true);
+    expect(result!.permissions.share_gallery).toBe(true);
+    expect(result!.permissions.share_map).toBe(false);
+  });
+
+  it('JOURNEY-SHARE-018: excludes skeleton entries from public view', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    createJourneyEntry(testDb, journey.id, user.id, {
+      type: 'entry',
+      title: 'Visible Entry',
+      entry_date: '2026-01-10',
+    });
+    createJourneyEntry(testDb, journey.id, user.id, {
+      type: 'skeleton',
+      title: 'Skeleton Entry',
+      entry_date: '2026-01-11',
+    });
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = getPublicJourney(token);
+
+    expect(result).not.toBeNull();
+    expect(result!.entries).toHaveLength(1);
+    expect(result!.entries[0].title).toBe('Visible Entry');
+  });
+
+  it('JOURNEY-SHARE-019: enriches entries with parsed tags and photos', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id);
+    const entry = createJourneyEntry(testDb, journey.id, user.id, {
+      type: 'entry',
+      entry_date: '2026-04-01',
+    });
+    // Set tags on the entry directly
+    testDb.prepare('UPDATE journey_entries SET tags = ? WHERE id = ?')
+      .run(JSON.stringify(['food', 'culture']), entry.id);
+    insertJourneyPhoto(entry.id, { filePath: '/photos/a.jpg' });
+    insertJourneyPhoto(entry.id, { filePath: '/photos/b.jpg' });
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = getPublicJourney(token);
+
+    expect(result).not.toBeNull();
+    const enriched = result!.entries[0];
+    expect(enriched.tags).toEqual(['food', 'culture']);
+    expect(enriched.photos).toHaveLength(2);
+  });
+
+  it('JOURNEY-SHARE-020: returns empty entries array for journey with no entries', () => {
+    const { user } = createUser(testDb);
+    const journey = createJourney(testDb, user.id, { title: 'Empty Journey' });
+    const { token } = createOrUpdateJourneyShareLink(journey.id, user.id, {});
+
+    const result = getPublicJourney(token);
+
+    expect(result).not.toBeNull();
+    expect(result!.entries).toEqual([]);
+    expect(result!.stats.entries).toBe(0);
+    expect(result!.stats.photos).toBe(0);
+    expect(result!.stats.cities).toBe(0);
+  });
+});
diff --git a/sonar-project.properties b/sonar-project.properties
index ff8d3c00..771b1f12 100644
--- a/sonar-project.properties
+++ b/sonar-project.properties
@@ -24,4 +24,5 @@ sonar.coverage.exclusions=\
    server/src/db/migrations.ts,\
    server/src/scheduler.ts,\
    client/src/main.tsx,\
-   client/src/types.ts
+   client/src/types.ts,\
+   client/src/components/Memories/MemoriesPanel.tsx