Upload folder using huggingface_hub (part 3)

.gitattributes

@@ -32,3 +32,13 @@ client/public/fonts/Poppins-Regular.ttf filter=lfs diff=lfs merge=lfs -text
 client/public/fonts/Poppins-SemiBold.ttf filter=lfs diff=lfs merge=lfs -text
 client/public/icons/trek-loading-dark.gif filter=lfs diff=lfs merge=lfs -text
 client/public/icons/trek-loading-light.gif filter=lfs diff=lfs merge=lfs -text
+docs/TREK-Generated-by-MCP.pdf filter=lfs diff=lfs merge=lfs -text
+docs/logo-trek-dark.gif filter=lfs diff=lfs merge=lfs -text
+docs/logo-trek-light.gif filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/atlas.png filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/budget.png filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/dashboard.png filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/journey.png filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/trip-iceland.png filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/trip-planner.png filter=lfs diff=lfs merge=lfs -text
+docs/screenshots/vacay.png filter=lfs diff=lfs merge=lfs -text

client/tests/environment/jsdom-native-abort.ts

@@ -0,0 +1,38 @@
+/**
+ * Custom Vitest environment that extends jsdom but preserves the native
+ * Node.js AbortController and AbortSignal.
+ *
+ * Problem: jsdom replaces globalThis.AbortController and AbortSignal with its
+ * own implementations. Node.js's undici-based fetch validates signals via
+ * `signal instanceof AbortSignal` against its own native class reference.
+ * jsdom's AbortSignal instances fail this check, causing fetch to throw:
+ *   TypeError: RequestInit: Expected signal ("AbortSignal {}") to be an
+ *   instance of AbortSignal.
+ *
+ * Fix: after jsdom installs its globals, restore the native AbortController
+ * and AbortSignal so fetch works correctly in tests.
+ */
+
+import { builtinEnvironments } from 'vitest/environments';
+
+const jsdomEnv = builtinEnvironments.jsdom;
+
+export default {
+  name: 'jsdom-native-abort',
+  transformMode: 'web' as const,
+
+  async setup(global: typeof globalThis, options: Record<string, unknown>) {
+    // Capture native AbortController/AbortSignal BEFORE jsdom patches them
+    const NativeAbortController = global.AbortController;
+    const NativeAbortSignal = global.AbortSignal;
+
+    // Run standard jsdom setup (installs jsdom globals, including its own AbortController)
+    const env = await jsdomEnv.setup(global, options as Parameters<typeof jsdomEnv.setup>[1]);
+
+    // Restore native AbortController so Node.js fetch (undici) accepts the signals
+    global.AbortController = NativeAbortController;
+    global.AbortSignal = NativeAbortSignal;
+
+    return env;
+  },
+};

client/tests/helpers/factories.ts

@@ -0,0 +1,304 @@
+/**
+ * Pure data builder functions for frontend tests.
+ * These return typed objects matching interfaces in src/types.ts.
+ * They do NOT touch a database.
+ */
+
+import type {
+  User,
+  Trip,
+  Day,
+  Place,
+  Assignment,
+  DayNote,
+  PackingItem,
+  TodoItem,
+  BudgetItem,
+  Reservation,
+  TripFile,
+  Tag,
+  Category,
+  Settings,
+  AppConfig,
+} from '../../src/types';
+
+// ── Counters ──────────────────────────────────────────────────────────────────
+
+let _seq = 0;
+function next(): number {
+  return ++_seq;
+}
+
+// ── InAppNotification (local interface, not in types.ts) ──────────────────────
+
+export interface InAppNotification {
+  id: number;
+  type: string;
+  message: string;
+  read: boolean;
+  created_at: string;
+  trip_id?: number | null;
+}
+
+// ── Builders ──────────────────────────────────────────────────────────────────
+
+export function buildUser(overrides: Partial<User> = {}): User {
+  const id = next();
+  return {
+    id,
+    username: `user${id}`,
+    email: `user${id}@example.com`,
+    role: 'user',
+    avatar_url: null,
+    maps_api_key: null,
+    created_at: '2025-01-01T00:00:00.000Z',
+    mfa_enabled: false,
+    must_change_password: false,
+    ...overrides,
+  };
+}
+
+export function buildAdmin(overrides: Partial<User> = {}): User {
+  return buildUser({ role: 'admin', ...overrides });
+}
+
+export function buildTrip(overrides: Partial<Trip> = {}): Trip {
+  const id = next();
+  return {
+    id,
+    user_id: 1,
+    title: `Trip ${id}`,
+    description: null,
+    start_date: '2025-06-01',
+    end_date: '2025-06-05',
+    currency: 'EUR',
+    cover_image: null,
+    is_archived: 0,
+    reminder_days: 7,
+    created_at: '2025-01-01T00:00:00.000Z',
+    updated_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+export function buildDay(overrides: Partial<Day> = {}): Day {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    date: '2025-06-01',
+    title: null,
+    notes: null,
+    assignments: [],
+    notes_items: [],
+    ...overrides,
+  };
+}
+
+export function buildPlace(overrides: Partial<Place> = {}): Place {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    name: `Place ${id}`,
+    description: null,
+    lat: 48.8566,
+    lng: 2.3522,
+    address: null,
+    category_id: null,
+    price: null,
+    currency: null,
+    image_url: null,
+    google_place_id: null,
+    osm_id: null,
+    route_geometry: null,
+    place_time: null,
+    end_time: null,
+    duration_minutes: 60,
+    notes: null,
+    transport_mode: 'walking',
+    website: null,
+    phone: null,
+    created_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+export function buildAssignment(overrides: Partial<Assignment> = {}): Assignment {
+  const id = next();
+  const place = overrides.place ?? buildPlace();
+  return {
+    id,
+    day_id: 1,
+    place_id: place.id,
+    order_index: 0,
+    notes: null,
+    place,
+    ...overrides,
+  };
+}
+
+export function buildDayNote(overrides: Partial<DayNote> = {}): DayNote {
+  const id = next();
+  return {
+    id,
+    day_id: 1,
+    text: 'Test note',
+    time: null,
+    icon: null,
+    sort_order: 0,
+    created_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+export function buildPackingItem(overrides: Partial<PackingItem> = {}): PackingItem {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    name: `Packing item ${id}`,
+    category: null,
+    checked: 0,
+    sort_order: 0,
+    quantity: 1,
+    ...overrides,
+  };
+}
+
+export function buildTodoItem(overrides: Partial<TodoItem> = {}): TodoItem {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    name: `Todo ${id}`,
+    category: null,
+    checked: 0,
+    sort_order: 0,
+    due_date: null,
+    description: null,
+    assigned_user_id: null,
+    priority: 0,
+    ...overrides,
+  };
+}
+
+export function buildBudgetItem(overrides: Partial<BudgetItem> = {}): BudgetItem {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    category: 'Other',
+    name: `Budget item ${id}`,
+    total_price: 100,
+    persons: 1,
+    days: null,
+    note: null,
+    sort_order: 0,
+    members: [],
+    expense_date: null,
+    created_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+export function buildReservation(overrides: Partial<Reservation> = {}): Reservation {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    title: `Reservation ${id}`,
+    type: 'restaurant',
+    status: 'confirmed',
+    reservation_time: null,
+    reservation_end_time: null,
+    location: null,
+    confirmation_number: null,
+    notes: null,
+    created_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+export function buildTripFile(overrides: Partial<TripFile> = {}): TripFile {
+  const id = next();
+  return {
+    id,
+    trip_id: 1,
+    filename: 'test.pdf',
+    original_name: 'test.pdf',
+    mime_type: 'application/pdf',
+    url: `/api/trips/1/files/${id}/download`,
+    created_at: '2025-01-01T00:00:00.000Z',
+    ...overrides,
+  };
+}
+
+export function buildTag(overrides: Partial<Tag> = {}): Tag {
+  const id = next();
+  return {
+    id,
+    name: `Tag ${id}`,
+    color: '#ff0000',
+    user_id: 1,
+    ...overrides,
+  };
+}
+
+export function buildCategory(overrides: Partial<Category> = {}): Category {
+  const id = next();
+  return {
+    id,
+    name: `Category ${id}`,
+    color: '#6366f1',
+    icon: 'restaurant',
+    user_id: 1,
+    ...overrides,
+  };
+}
+
+export function buildSettings(overrides: Partial<Settings> = {}): Settings {
+  return {
+    map_tile_url: '',
+    default_lat: 48.8566,
+    default_lng: 2.3522,
+    default_zoom: 10,
+    dark_mode: false,
+    default_currency: 'USD',
+    language: 'en',
+    temperature_unit: 'fahrenheit',
+    time_format: '12h',
+    show_place_description: false,
+    blur_booking_codes: false,
+    ...overrides,
+  };
+}
+
+export function buildInAppNotification(overrides: Partial<InAppNotification> = {}): InAppNotification {
+  const id = next();
+  return {
+    id,
+    type: 'trip_invite',
+    message: `Notification ${id}`,
+    read: false,
+    created_at: '2025-01-01T00:00:00.000Z',
+    trip_id: null,
+    ...overrides,
+  };
+}
+
+export function buildAppConfig(overrides: Partial<AppConfig> = {}): AppConfig {
+  return {
+    has_users: true,
+    allow_registration: true,
+    demo_mode: false,
+    oidc_configured: false,
+    oidc_only_mode: false,
+    password_login: true,
+    password_registration: true,
+    oidc_login: true,
+    oidc_registration: true,
+    env_override_oidc_only: false,
+    ...overrides,
+  };
+}

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

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

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

@@ -0,0 +1,137 @@
+import { http, HttpResponse } from 'msw';
+import { buildUser, buildAdmin } from '../../factories';
+
+export const adminHandlers = [
+  http.get('/api/admin/users', () => {
+    const user1 = buildUser({ username: 'alice', email: 'alice@example.com' });
+    const admin1 = buildAdmin({ username: 'admin', email: 'admin@example.com' });
+    return HttpResponse.json({ users: [admin1, user1] });
+  }),
+
+  http.post('/api/admin/users', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const user = buildUser({ ...body });
+    return HttpResponse.json({ user });
+  }),
+
+  http.put('/api/admin/users/:id', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const user = buildUser({ id: Number(params.id), ...body });
+    return HttpResponse.json({ user });
+  }),
+
+  http.delete('/api/admin/users/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.get('/api/admin/stats', () => {
+    return HttpResponse.json({
+      totalUsers: 2,
+      totalTrips: 5,
+      totalPlaces: 42,
+      totalFiles: 8,
+    });
+  }),
+
+  http.get('/api/admin/invites', () => {
+    return HttpResponse.json({ invites: [] });
+  }),
+
+  http.post('/api/admin/invites', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json({ invite: { id: 1, token: 'test-invite-token', ...body } });
+  }),
+
+  http.delete('/api/admin/invites/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.get('/api/admin/oidc', () => {
+    return HttpResponse.json({
+      issuer: '',
+      client_id: '',
+      client_secret: '',
+      client_secret_set: false,
+      display_name: '',
+      oidc_only: false,
+      discovery_url: '',
+    });
+  }),
+
+  http.put('/api/admin/oidc', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json({ ...body });
+  }),
+
+  http.get('/api/admin/version-check', () => {
+    return HttpResponse.json({ update_available: false, latest: '1.0.0', current: '1.0.0' });
+  }),
+
+  http.get('/api/admin/bag-tracking', () => {
+    return HttpResponse.json({ enabled: false });
+  }),
+
+  http.put('/api/admin/bag-tracking', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json({ enabled: body.enabled });
+  }),
+
+  http.get('/api/admin/addons', () => {
+    return HttpResponse.json({ addons: [] });
+  }),
+
+  http.get('/api/admin/packing-templates', () => {
+    return HttpResponse.json({ templates: [] });
+  }),
+
+  http.get('/api/admin/audit-log', () => {
+    return HttpResponse.json({ logs: [], total: 0 });
+  }),
+
+  http.get('/api/admin/mcp-tokens', () => {
+    return HttpResponse.json({ tokens: [] });
+  }),
+
+  http.get('/api/admin/oauth-sessions', () => {
+    return HttpResponse.json({ sessions: [] });
+  }),
+
+  http.delete('/api/admin/oauth-sessions/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.delete('/api/admin/mcp-tokens/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.get('/api/admin/permissions', () => {
+    return HttpResponse.json({ permissions: {} });
+  }),
+
+  http.get('/api/admin/notification-preferences', () => {
+    return HttpResponse.json({
+      event_types: [],
+      available_channels: {},
+      implemented_combos: {},
+      preferences: {},
+    });
+  }),
+
+  // Auth settings endpoints used by AdminPage
+  http.get('/api/auth/app-settings', () => {
+    return HttpResponse.json({});
+  }),
+
+  http.put('/api/auth/app-settings', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json({ ...body });
+  }),
+
+  http.get('/api/auth/me/settings', () => {
+    return HttpResponse.json({ settings: { maps_api_key: '', openweather_api_key: '' } });
+  }),
+
+  http.get('/api/auth/validate-keys', () => {
+    return HttpResponse.json({ maps: true, weather: true });
+  }),
+];

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

@@ -0,0 +1,28 @@
+import { http, HttpResponse } from 'msw';
+import { buildAssignment, buildPlace } from '../../factories';
+
+export const assignmentsHandlers = [
+  http.post('/api/trips/:id/days/:dayId/assignments', async ({ params, request }) => {
+    const body = await request.json() as { place_id: number };
+    const place = buildPlace({ id: body.place_id, trip_id: Number(params.id) });
+    const assignment = buildAssignment({
+      day_id: Number(params.dayId),
+      place_id: body.place_id,
+      place,
+      order_index: 0,
+    });
+    return HttpResponse.json({ assignment });
+  }),
+
+  http.delete('/api/trips/:id/days/:dayId/assignments/:assignmentId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.put('/api/trips/:id/days/:dayId/assignments/reorder', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.put('/api/trips/:id/assignments/:assignmentId/move', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,31 @@
+import { http, HttpResponse } from 'msw';
+import { buildUser, buildAppConfig } from '../../factories';
+
+export const authHandlers = [
+  http.post('/api/auth/login', () => {
+    const user = buildUser();
+    return HttpResponse.json({ user, token: 'mock-token' });
+  }),
+
+  http.get('/api/auth/me', () => {
+    const user = buildUser();
+    return HttpResponse.json({ user });
+  }),
+
+  http.post('/api/auth/register', () => {
+    const user = buildUser();
+    return HttpResponse.json({ user, token: 'mock-token' });
+  }),
+
+  http.get('/api/auth/app-config', () => {
+    return HttpResponse.json(buildAppConfig());
+  }),
+
+  http.post('/api/auth/ws-token', () => {
+    return HttpResponse.json({ token: 'mock-ws-token' });
+  }),
+
+  http.post('/api/auth/logout', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,38 @@
+import { http, HttpResponse } from 'msw';
+import { buildBudgetItem } from '../../factories';
+
+export const budgetHandlers = [
+  http.get('/api/trips/:id/budget', ({ params }) => {
+    return HttpResponse.json({
+      items: [buildBudgetItem({ trip_id: Number(params.id) })],
+    });
+  }),
+
+  http.post('/api/trips/:id/budget', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const item = buildBudgetItem({ trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ item });
+  }),
+
+  http.put('/api/trips/:id/budget/:itemId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const item = buildBudgetItem({ id: Number(params.itemId), trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ item });
+  }),
+
+  http.delete('/api/trips/:id/budget/:itemId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.put('/api/trips/:id/budget/:itemId/members', async ({ params, request }) => {
+    const body = await request.json() as { user_ids: number[] };
+    const members = body.user_ids.map(uid => ({ user_id: uid, paid: 0, username: `user${uid}` }));
+    const item = buildBudgetItem({ id: Number(params.itemId), trip_id: Number(params.id), persons: body.user_ids.length, members });
+    return HttpResponse.json({ members, item });
+  }),
+
+  http.put('/api/trips/:id/budget/:itemId/members/:userId/paid', async ({ params, request }) => {
+    const body = await request.json() as { paid: boolean };
+    return HttpResponse.json({ success: true, paid: body.paid });
+  }),
+];

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

@@ -0,0 +1,31 @@
+import { http, HttpResponse } from 'msw';
+import { buildDayNote } from '../../factories';
+
+export const dayNotesHandlers = [
+  http.get('/api/trips/:id/days/:dayId/notes', ({ params }) => {
+    return HttpResponse.json({
+      notes: [buildDayNote({ day_id: Number(params.dayId) })],
+    });
+  }),
+
+  http.post('/api/trips/:id/days/:dayId/notes', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const note = buildDayNote({ day_id: Number(params.dayId), ...body });
+    return HttpResponse.json({ note });
+  }),
+
+  http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const note = buildDayNote({ id: Number(params.noteId), day_id: Number(params.dayId), ...body });
+    return HttpResponse.json({ note });
+  }),
+
+  http.delete('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.put('/api/trips/:id/days/:dayId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    return HttpResponse.json({ day: { id: Number(params.dayId), trip_id: Number(params.id), ...body } });
+  }),
+];

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

@@ -0,0 +1,19 @@
+import { http, HttpResponse } from 'msw';
+import { buildTripFile } from '../../factories';
+
+export const filesHandlers = [
+  http.get('/api/trips/:id/files', ({ params }) => {
+    return HttpResponse.json({
+      files: [buildTripFile({ trip_id: Number(params.id) })],
+    });
+  }),
+
+  http.post('/api/trips/:id/files', ({ params }) => {
+    const file = buildTripFile({ trip_id: Number(params.id) });
+    return HttpResponse.json({ file });
+  }),
+
+  http.delete('/api/trips/:id/files/:fileId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,37 @@
+import { authHandlers } from './auth';
+import { settingsHandlers } from './settings';
+import { addonHandlers } from './addons';
+import { notificationHandlers } from './notifications';
+import { vacayHandlers } from './vacay';
+import { tripsHandlers } from './trips';
+import { placesHandlers } from './places';
+import { assignmentsHandlers } from './assignments';
+import { packingHandlers } from './packing';
+import { todoHandlers } from './todo';
+import { budgetHandlers } from './budget';
+import { reservationsHandlers } from './reservations';
+import { filesHandlers } from './files';
+import { tagsHandlers } from './tags';
+import { dayNotesHandlers } from './dayNotes';
+import { adminHandlers } from './admin';
+import { sharedHandlers } from './shared';
+
+export const defaultHandlers = [
+  ...authHandlers,
+  ...settingsHandlers,
+  ...addonHandlers,
+  ...notificationHandlers,
+  ...vacayHandlers,
+  ...tripsHandlers,
+  ...placesHandlers,
+  ...assignmentsHandlers,
+  ...packingHandlers,
+  ...todoHandlers,
+  ...budgetHandlers,
+  ...reservationsHandlers,
+  ...filesHandlers,
+  ...tagsHandlers,
+  ...dayNotesHandlers,
+  ...adminHandlers,
+  ...sharedHandlers,
+];

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

@@ -0,0 +1,94 @@
+import { http, HttpResponse } from 'msw';
+
+export const notificationHandlers = [
+  http.get('/api/notifications/in-app', ({ request }) => {
+    const url = new URL(request.url);
+    const offset = parseInt(url.searchParams.get('offset') || '0', 10);
+    const limit = parseInt(url.searchParams.get('limit') || '20', 10);
+
+    const allNotifications = Array.from({ length: 25 }, (_, i) => ({
+      id: i + 1,
+      type: 'simple',
+      scope: 'trip',
+      target: 1,
+      sender_id: 2,
+      sender_username: 'alice',
+      sender_avatar: null,
+      recipient_id: 1,
+      title_key: 'notif.title',
+      title_params: '{}',
+      text_key: 'notif.text',
+      text_params: '{}',
+      positive_text_key: null,
+      negative_text_key: null,
+      response: null,
+      navigate_text_key: null,
+      navigate_target: null,
+      is_read: i < 5 ? 0 : 1,
+      created_at: '2025-01-01T00:00:00.000Z',
+    }));
+
+    const page = allNotifications.slice(offset, offset + limit);
+
+    return HttpResponse.json({
+      notifications: page,
+      total: allNotifications.length,
+      unread_count: 5,
+    });
+  }),
+
+  http.get('/api/notifications/in-app/unread-count', () => {
+    return HttpResponse.json({ count: 5 });
+  }),
+
+  http.put('/api/notifications/in-app/:id/read', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.put('/api/notifications/in-app/:id/unread', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.put('/api/notifications/in-app/read-all', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.delete('/api/notifications/in-app/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.delete('/api/notifications/in-app/all', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/notifications/test-ntfy', async () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/notifications/in-app/:id/respond', async ({ request, params }) => {
+    const body = await request.json() as { response: string };
+    return HttpResponse.json({
+      notification: {
+        id: Number(params.id),
+        type: 'boolean',
+        scope: 'trip',
+        target: 1,
+        sender_id: 2,
+        sender_username: 'alice',
+        sender_avatar: null,
+        recipient_id: 1,
+        title_key: 'notif.title',
+        title_params: '{}',
+        text_key: 'notif.text',
+        text_params: '{}',
+        positive_text_key: 'accept',
+        negative_text_key: 'decline',
+        response: body.response,
+        navigate_text_key: null,
+        navigate_target: null,
+        is_read: 1,
+        created_at: '2025-01-01T00:00:00.000Z',
+      },
+    });
+  }),
+];

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

@@ -0,0 +1,26 @@
+import { http, HttpResponse } from 'msw';
+import { buildPackingItem } from '../../factories';
+
+export const packingHandlers = [
+  http.get('/api/trips/:id/packing', ({ params }) => {
+    return HttpResponse.json({
+      items: [buildPackingItem({ trip_id: Number(params.id) })],
+    });
+  }),
+
+  http.post('/api/trips/:id/packing', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const item = buildPackingItem({ trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ item });
+  }),
+
+  http.put('/api/trips/:id/packing/:itemId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const item = buildPackingItem({ id: Number(params.itemId), trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ item });
+  }),
+
+  http.delete('/api/trips/:id/packing/:itemId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,25 @@
+import { http, HttpResponse } from 'msw';
+import { buildPlace } from '../../factories';
+
+export const placesHandlers = [
+  http.get('/api/trips/:id/places', ({ params }) => {
+    const tripId = Number(params.id);
+    return HttpResponse.json({ places: [buildPlace({ trip_id: tripId }), buildPlace({ trip_id: tripId })] });
+  }),
+
+  http.post('/api/trips/:id/places', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const place = buildPlace({ trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ place });
+  }),
+
+  http.put('/api/trips/:id/places/:placeId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const place = buildPlace({ id: Number(params.placeId), trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ place });
+  }),
+
+  http.delete('/api/trips/:id/places/:placeId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,30 @@
+import { http, HttpResponse } from 'msw';
+import { buildReservation } from '../../factories';
+
+export const reservationsHandlers = [
+  http.get('/api/trips/:id/reservations', ({ params }) => {
+    return HttpResponse.json({
+      reservations: [buildReservation({ trip_id: Number(params.id) })],
+    });
+  }),
+
+  http.post('/api/trips/:id/reservations', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const reservation = buildReservation({ trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ reservation });
+  }),
+
+  http.put('/api/trips/:id/reservations/:reservationId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const reservation = buildReservation({
+      id: Number(params.reservationId),
+      trip_id: Number(params.id),
+      ...body,
+    });
+    return HttpResponse.json({ reservation });
+  }),
+
+  http.delete('/api/trips/:id/reservations/:reservationId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,16 @@
+import { http, HttpResponse } from 'msw';
+import { buildSettings } from '../../factories';
+
+export const settingsHandlers = [
+  http.get('/api/settings', () => {
+    return HttpResponse.json({ settings: buildSettings() });
+  }),
+
+  http.put('/api/settings', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/settings/bulk', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,36 @@
+import { http, HttpResponse } from 'msw';
+import { buildTrip, buildDay, buildPlace } from '../../factories';
+
+export const sharedHandlers = [
+  http.get('/api/shared/:token', ({ params }) => {
+    const { token } = params;
+
+    if (token === 'invalid-token' || token === 'expired-token') {
+      return new HttpResponse(null, { status: 404 });
+    }
+
+    const trip = { ...buildTrip({ start_date: '2026-07-01', end_date: '2026-07-05' }), title: 'Shared Paris Trip' };
+    const day1 = buildDay({ trip_id: trip.id, date: '2026-07-01' });
+    const place1 = buildPlace({ trip_id: trip.id, name: 'Eiffel Tower', lat: 48.8584, lng: 2.2945 });
+
+    return HttpResponse.json({
+      trip,
+      days: [day1],
+      assignments: {},
+      dayNotes: {},
+      places: [place1],
+      reservations: [],
+      accommodations: [],
+      packing: [],
+      budget: [],
+      categories: [],
+      permissions: {
+        share_bookings: true,
+        share_packing: false,
+        share_budget: false,
+        share_collab: false,
+      },
+      collab: [],
+    });
+  }),
+];

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

@@ -0,0 +1,24 @@
+import { http, HttpResponse } from 'msw';
+import { buildTag, buildCategory } from '../../factories';
+
+export const tagsHandlers = [
+  http.get('/api/tags', () => {
+    return HttpResponse.json({ tags: [buildTag(), buildTag()] });
+  }),
+
+  http.post('/api/tags', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const tag = buildTag(body);
+    return HttpResponse.json({ tag });
+  }),
+
+  http.get('/api/categories', () => {
+    return HttpResponse.json({ categories: [buildCategory(), buildCategory()] });
+  }),
+
+  http.post('/api/categories', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const category = buildCategory(body);
+    return HttpResponse.json({ category });
+  }),
+];

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

@@ -0,0 +1,26 @@
+import { http, HttpResponse } from 'msw';
+import { buildTodoItem } from '../../factories';
+
+export const todoHandlers = [
+  http.get('/api/trips/:id/todo', ({ params }) => {
+    return HttpResponse.json({
+      items: [buildTodoItem({ trip_id: Number(params.id) })],
+    });
+  }),
+
+  http.post('/api/trips/:id/todo', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const item = buildTodoItem({ trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ item });
+  }),
+
+  http.put('/api/trips/:id/todo/:itemId', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const item = buildTodoItem({ id: Number(params.itemId), trip_id: Number(params.id), ...body });
+    return HttpResponse.json({ item });
+  }),
+
+  http.delete('/api/trips/:id/todo/:itemId', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

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

@@ -0,0 +1,75 @@
+import { http, HttpResponse } from 'msw';
+import { buildTrip, buildDay, buildUser, buildPlace, buildPackingItem, buildTodoItem, buildBudgetItem, buildReservation, buildTripFile } from '../../factories';
+
+export const tripsHandlers = [
+  // List all trips (active or archived)
+  http.get('/api/trips', ({ request }) => {
+    const url = new URL(request.url);
+    const archived = url.searchParams.get('archived');
+    if (archived) {
+      return HttpResponse.json({ trips: [] });
+    }
+    const trip1 = buildTrip({ title: 'Paris Adventure', start_date: '2026-07-01', end_date: '2026-07-10' });
+    const trip2 = buildTrip({ title: 'Tokyo Trip', start_date: '2026-09-01', end_date: '2026-09-15' });
+    return HttpResponse.json({ trips: [trip1, trip2] });
+  }),
+
+  http.get('/api/trips/:id', ({ params }) => {
+    const trip = buildTrip({ id: Number(params.id) });
+    return HttpResponse.json({ trip });
+  }),
+
+  http.get('/api/trips/:id/days', ({ params }) => {
+    const tripId = Number(params.id);
+    const day1 = buildDay({ trip_id: tripId, assignments: [], notes_items: [] });
+    const day2 = buildDay({ trip_id: tripId, assignments: [], notes_items: [] });
+    return HttpResponse.json({ days: [day1, day2] });
+  }),
+
+  http.put('/api/trips/:id', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const trip = buildTrip({ id: Number(params.id), ...body });
+    return HttpResponse.json({ trip });
+  }),
+
+  http.post('/api/trips', async ({ request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const trip = buildTrip({ ...body });
+    return HttpResponse.json({ trip });
+  }),
+
+  http.get('/api/trips/:id/members', ({ params }) => {
+    const owner = buildUser();
+    return HttpResponse.json({ owner, members: [] });
+  }),
+
+  http.get('/api/trips/:id/accommodations', () => {
+    return HttpResponse.json({ accommodations: [] });
+  }),
+
+  http.get('/api/trips/:id/bundle', ({ params }) => {
+    const tripId = Number(params.id);
+    const trip = buildTrip({ id: tripId });
+    const day = buildDay({ trip_id: tripId, assignments: [], notes_items: [] });
+    return HttpResponse.json({
+      trip,
+      days: [day],
+      places: [buildPlace({ trip_id: tripId })],
+      packingItems: [buildPackingItem({ trip_id: tripId })],
+      todoItems: [buildTodoItem({ trip_id: tripId })],
+      budgetItems: [buildBudgetItem({ trip_id: tripId })],
+      reservations: [buildReservation({ trip_id: tripId })],
+      files: [buildTripFile({ trip_id: tripId })],
+    });
+  }),
+
+  http.delete('/api/trips/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/trips/:id/copy', async ({ params, request }) => {
+    const body = await request.json() as Record<string, unknown>;
+    const trip = buildTrip({ id: Number(params.id) + 1000, ...body });
+    return HttpResponse.json({ trip });
+  }),
+];

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

@@ -0,0 +1,127 @@
+import { http, HttpResponse } from 'msw';
+
+export const vacayHandlers = [
+  http.get('/api/addons/vacay/plan', () => {
+    return HttpResponse.json({
+      plan: {
+        id: 1,
+        holidays_enabled: false,
+        holidays_region: null,
+        holiday_calendars: [],
+        block_weekends: true,
+        carry_over_enabled: false,
+        company_holidays_enabled: false,
+      },
+      users: [{ id: 1, username: 'user1', color: '#3b82f6' }],
+      pendingInvites: [],
+      incomingInvites: [],
+      isOwner: true,
+      isFused: false,
+    });
+  }),
+
+  http.put('/api/addons/vacay/plan', () => {
+    return HttpResponse.json({
+      plan: {
+        id: 1,
+        holidays_enabled: true,
+        holidays_region: null,
+        holiday_calendars: [],
+        block_weekends: true,
+        carry_over_enabled: false,
+        company_holidays_enabled: false,
+      },
+    });
+  }),
+
+  http.get('/api/addons/vacay/years', () => {
+    return HttpResponse.json({ years: [2025, 2026] });
+  }),
+
+  http.post('/api/addons/vacay/years', () => {
+    return HttpResponse.json({ years: [2025, 2026, 2027] });
+  }),
+
+  http.delete('/api/addons/vacay/years/:year', () => {
+    return HttpResponse.json({ years: [2025] });
+  }),
+
+  http.get('/api/addons/vacay/entries/:year', () => {
+    return HttpResponse.json({
+      entries: [
+        { date: '2025-06-15', user_id: 1 },
+        { date: '2025-06-16', user_id: 1 },
+      ],
+      companyHolidays: [],
+    });
+  }),
+
+  http.post('/api/addons/vacay/entries/toggle', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/entries/company-holiday', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.get('/api/addons/vacay/stats/:year', () => {
+    return HttpResponse.json({
+      stats: [{ user_id: 1, vacation_days: 30, used: 2 }],
+    });
+  }),
+
+  http.put('/api/addons/vacay/stats/:year', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.get('/api/addons/vacay/holidays/countries', () => {
+    return HttpResponse.json({ countries: ['DE', 'US', 'FR'] });
+  }),
+
+  http.get('/api/addons/vacay/holidays/:year/:country', () => {
+    return HttpResponse.json([
+      { date: '2025-12-25', name: 'Christmas', localName: 'Weihnachten', global: true, counties: null },
+      { date: '2025-01-01', name: 'New Year', localName: 'Neujahr', global: true, counties: null },
+    ]);
+  }),
+
+  http.put('/api/addons/vacay/color', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/invite', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/invite/accept', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/invite/decline', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/invite/cancel', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/dissolve', () => {
+    return HttpResponse.json({ success: true });
+  }),
+
+  http.post('/api/addons/vacay/plan/holiday-calendars', () => {
+    return HttpResponse.json({
+      calendar: { id: 1, plan_id: 1, region: 'DE', label: null, color: '#ef4444', sort_order: 0 },
+    });
+  }),
+
+  http.put('/api/addons/vacay/plan/holiday-calendars/:id', () => {
+    return HttpResponse.json({
+      calendar: { id: 1, plan_id: 1, region: 'US', label: 'US Holidays', color: '#3b82f6', sort_order: 0 },
+    });
+  }),
+
+  http.delete('/api/addons/vacay/plan/holiday-calendars/:id', () => {
+    return HttpResponse.json({ success: true });
+  }),
+];

client/tests/helpers/msw/server.ts

@@ -0,0 +1,4 @@
+import { setupServer } from 'msw/node';
+import { defaultHandlers } from './handlers';
+
+export const server = setupServer(...defaultHandlers);

client/tests/helpers/render.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { render, type RenderOptions } from '@testing-library/react';
+import { MemoryRouter, type MemoryRouterProps } from 'react-router-dom';
+import { TranslationProvider } from '../../src/i18n/TranslationContext';
+
+interface RenderWithProvidersOptions extends Omit<RenderOptions, 'wrapper'> {
+  initialEntries?: MemoryRouterProps['initialEntries'];
+}
+
+function renderWithProviders(
+  ui: React.ReactElement,
+  { initialEntries = ['/'], ...options }: RenderWithProvidersOptions = {},
+) {
+  function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <MemoryRouter initialEntries={initialEntries}>
+        <TranslationProvider>{children}</TranslationProvider>
+      </MemoryRouter>
+    );
+  }
+
+  return render(ui, { wrapper: Wrapper, ...options });
+}
+
+export * from '@testing-library/react';
+export { renderWithProviders as render };

client/tests/helpers/store.ts

@@ -0,0 +1,41 @@
+import { useAuthStore } from '../../src/store/authStore';
+import { useTripStore } from '../../src/store/tripStore';
+import { useSettingsStore } from '../../src/store/settingsStore';
+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();
+const initialTripState = useTripStore.getState();
+const initialSettingsState = useSettingsStore.getState();
+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);
+  useSettingsStore.setState(initialSettingsState, true);
+  useVacayStore.setState(initialVacayState, true);
+  useAddonStore.setState(initialAddonState, true);
+  useInAppNotificationStore.setState(initialNotifState, true);
+  usePermissionsStore.setState(initialPermsState, true);
+}
+
+/**
+ * Tests routinely seed a store with a partially-populated slice of state,
+ * including partial nested objects (e.g. only `settings.time_format`). The
+ * store's own setState wants the exact field types, so seeding accepts a
+ * deep-partial view and casts at the boundary.
+ */
+type DeepPartial<T> = T extends object ? { [P in keyof T]?: DeepPartial<T[P]> } : T;
+
+export function seedStore<T extends object>(
+  store: { setState: (partial: Partial<T>, replace?: boolean) => void },
+  state: DeepPartial<T>,
+): void {
+  store.setState(state as Partial<T>);
+}

client/tests/integration/api/client.test.ts

@@ -0,0 +1,974 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { buildUser } from '../../helpers/factories';
+
+// The global setup.ts mocks websocket with getSocketId returning null.
+// We need to be able to control what getSocketId returns per-test.
+// Re-mock here to get full control.
+vi.mock('../../../src/api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => 'mock-socket-id'),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  joinTrip: vi.fn(),
+  leaveTrip: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+}));
+
+const wsMock = await import('../../../src/api/websocket');
+
+// Import the API client AFTER the mock is set up so it picks up our getSocketId mock
+const {
+  apiClient,
+  authApi,
+  tripsApi,
+  placesApi,
+  packingApi,
+  inAppNotificationsApi,
+  shareApi,
+  backupApi,
+  daysApi,
+  assignmentsApi,
+  tagsApi,
+  categoriesApi,
+  adminApi,
+  addonsApi,
+  mapsApi,
+  budgetApi,
+  filesApi,
+  reservationsApi,
+  weatherApi,
+  settingsApi,
+  accommodationsApi,
+  dayNotesApi,
+  collabApi,
+  notificationsApi,
+} = await import('../../../src/api/client');
+
+describe('API client interceptors', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Default: socket ID available
+    (wsMock.getSocketId as ReturnType<typeof vi.fn>).mockReturnValue('mock-socket-id');
+  });
+
+  afterEach(() => {
+    // Reset window.location to a neutral path
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/', pathname: '/', search: '', hash: '' },
+    });
+  });
+
+  it('FE-API-001: requests include X-Socket-Id header when getSocketId returns a value', async () => {
+    let receivedSocketId: string | null = null;
+
+    server.use(
+      http.get('/api/auth/me', ({ request }) => {
+        receivedSocketId = request.headers.get('X-Socket-Id');
+        return HttpResponse.json({ user: buildUser() });
+      })
+    );
+
+    await authApi.me();
+
+    expect(receivedSocketId).toBe('mock-socket-id');
+  });
+
+  it('FE-API-002: X-Socket-Id header is absent when getSocketId returns null', async () => {
+    (wsMock.getSocketId as ReturnType<typeof vi.fn>).mockReturnValue(null);
+    let receivedSocketId: string | null = 'sentinel';
+
+    server.use(
+      http.get('/api/auth/me', ({ request }) => {
+        receivedSocketId = request.headers.get('X-Socket-Id');
+        return HttpResponse.json({ user: buildUser() });
+      })
+    );
+
+    await authApi.me();
+
+    expect(receivedSocketId).toBeNull();
+  });
+
+  it('FE-API-003: 401 with AUTH_REQUIRED → redirects to /login with redirect param', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/', pathname: '/dashboard', search: '', hash: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+      })
+    );
+
+    try {
+      await authApi.me();
+    } catch {
+      // Expected to reject
+    }
+
+    expect(window.location.href).toBe('/login?redirect=%2Fdashboard');
+  });
+
+  it('FE-API-003b: 401 without AUTH_REQUIRED code does not redirect', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/dashboard', pathname: '/dashboard', search: '' },
+    });
+
+    const originalHref = window.location.href;
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ error: 'Unauthorized' }, { status: 401 });
+      })
+    );
+
+    try {
+      await authApi.me();
+    } catch {
+      // Expected to reject
+    }
+
+    expect(window.location.href).toBe(originalHref);
+  });
+
+  it('FE-API-003c: 401 on /login page does not redirect', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/login', pathname: '/login', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+      })
+    );
+
+    try {
+      await authApi.me();
+    } catch {
+      // Expected to reject
+    }
+
+    // href should NOT have been changed to /login?redirect=...
+    expect(window.location.href).toBe('http://localhost/login');
+  });
+
+  it('FE-API-004: 403 with MFA_REQUIRED → redirects to /settings?mfa=required', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/', pathname: '/dashboard', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'MFA_REQUIRED' }, { status: 403 });
+      })
+    );
+
+    try {
+      await authApi.me();
+    } catch {
+      // Expected to reject
+    }
+
+    expect(window.location.href).toBe('/settings?mfa=required');
+  });
+
+  it('FE-API-004b: 403 with MFA_REQUIRED on /settings page does not redirect', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/settings', pathname: '/settings', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'MFA_REQUIRED' }, { status: 403 });
+      })
+    );
+
+    try {
+      await authApi.me();
+    } catch {
+      // Expected to reject
+    }
+
+    // Should NOT redirect when already on /settings
+    expect(window.location.href).toBe('http://localhost/settings');
+  });
+
+  it('FE-API-005: successful API call returns response data', async () => {
+    const user = buildUser();
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ user });
+      })
+    );
+
+    const data = await authApi.me();
+
+    expect(data).toMatchObject({ user: { id: user.id, email: user.email } });
+  });
+
+  it('FE-API-006: socket ID header reflects current value from getSocketId at request time', async () => {
+    const headers: Array<string | null> = [];
+
+    (wsMock.getSocketId as ReturnType<typeof vi.fn>)
+      .mockReturnValueOnce('socket-A')
+      .mockReturnValueOnce('socket-B');
+
+    server.use(
+      http.get('/api/auth/me', ({ request }) => {
+        headers.push(request.headers.get('X-Socket-Id'));
+        return HttpResponse.json({ user: buildUser() });
+      })
+    );
+
+    await authApi.me();
+    await authApi.me();
+
+    expect(headers[0]).toBe('socket-A');
+    expect(headers[1]).toBe('socket-B');
+  });
+
+  it('FE-API-007: non-401/403 errors are passed through as rejections', async () => {
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ error: 'Internal error' }, { status: 500 });
+      })
+    );
+
+    await expect(authApi.me()).rejects.toThrow();
+  });
+
+  // ── 401 edge cases ───────────────────────────────────────────────────────────
+
+  it('FE-API-008: 401 AUTH_REQUIRED on /register path does not redirect', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/register', pathname: '/register', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+      })
+    );
+
+    try { await authApi.me(); } catch { /* expected */ }
+
+    expect(window.location.href).toBe('http://localhost/register');
+  });
+
+  it('FE-API-009: 401 AUTH_REQUIRED on /shared/:token path does not redirect', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/shared/abc123', pathname: '/shared/abc123', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+      })
+    );
+
+    try { await authApi.me(); } catch { /* expected */ }
+
+    expect(window.location.href).toBe('http://localhost/shared/abc123');
+  });
+
+  it('FE-API-010: 401 AUTH_REQUIRED still rejects the promise even when redirect fires', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/dashboard', pathname: '/dashboard', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'AUTH_REQUIRED' }, { status: 401 });
+      })
+    );
+
+    await expect(authApi.me()).rejects.toThrow();
+  });
+
+  // ── 403 edge cases ───────────────────────────────────────────────────────────
+
+  it('FE-API-011: 403 without MFA_REQUIRED code does not redirect', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/dashboard', pathname: '/dashboard', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ error: 'Forbidden' }, { status: 403 });
+      })
+    );
+
+    try { await authApi.me(); } catch { /* expected */ }
+
+    expect(window.location.href).toBe('http://localhost/dashboard');
+  });
+
+  it('FE-API-012: 403 MFA_REQUIRED still rejects the promise after redirect fires', async () => {
+    Object.defineProperty(window, 'location', {
+      writable: true,
+      value: { href: 'http://localhost/dashboard', pathname: '/dashboard', search: '' },
+    });
+
+    server.use(
+      http.get('/api/auth/me', () => {
+        return HttpResponse.json({ code: 'MFA_REQUIRED' }, { status: 403 });
+      })
+    );
+
+    await expect(authApi.me()).rejects.toThrow();
+  });
+
+  // ── backupApi.download ───────────────────────────────────────────────────────
+
+  it('FE-API-013: backupApi.download creates a temp anchor and clicks it', async () => {
+    // backupApi.download uses native fetch (not axios). Mock fetch directly and
+    // use a plain-object Response duck-type to avoid MSW patching the Response
+    // constructor (which calls blob.stream() — not implemented in jsdom's Blob).
+    const blob = new Blob(['zip-bytes'], { type: 'application/zip' });
+    vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce({
+      ok: true,
+      blob: () => Promise.resolve(blob),
+    } as unknown as Response);
+    const createObjectURL = vi.spyOn(URL, 'createObjectURL').mockReturnValue('blob:mock-url');
+    const revokeObjectURL = vi.spyOn(URL, 'revokeObjectURL').mockImplementation(() => {});
+
+    // Spy on createElement to intercept the anchor click
+    const originalCreate = document.createElement.bind(document);
+    const clickSpy = vi.fn();
+    vi.spyOn(document, 'createElement').mockImplementation((tag: string) => {
+      const el = originalCreate(tag);
+      if (tag === 'a') {
+        Object.defineProperty(el, 'click', { writable: true, value: clickSpy });
+      }
+      return el;
+    });
+
+    await expect(backupApi.download('backup.zip')).resolves.toBeUndefined();
+    expect(createObjectURL).toHaveBeenCalled();
+    expect(revokeObjectURL).toHaveBeenCalled();
+
+    vi.restoreAllMocks();
+  });
+
+  it('FE-API-014: backupApi.download throws when response is not ok', async () => {
+    server.use(
+      http.get('/api/backup/download/missing.zip', () => {
+        return new HttpResponse(null, { status: 404 });
+      })
+    );
+
+    await expect(backupApi.download('missing.zip')).rejects.toThrow('Download failed');
+  });
+
+  // ── API namespace URL spot-checks ────────────────────────────────────────────
+
+  it('FE-API-015: tripsApi.list() makes GET to /api/trips', async () => {
+    server.use(
+      http.get('/api/trips', () => HttpResponse.json([]))
+    );
+
+    const result = await tripsApi.list();
+    expect(result).toEqual([]);
+  });
+
+  it('FE-API-016: tripsApi.get(42) makes GET to /api/trips/42', async () => {
+    let hitUrl = '';
+    server.use(
+      http.get('/api/trips/42', ({ request }) => {
+        hitUrl = new URL(request.url).pathname;
+        return HttpResponse.json({ id: 42 });
+      })
+    );
+
+    await tripsApi.get(42);
+    expect(hitUrl).toBe('/api/trips/42');
+  });
+
+  it('FE-API-017: placesApi.create posts to /api/trips/1/places and returns data directly', async () => {
+    const place = { id: 1, name: 'Paris', trip_id: 1 };
+    server.use(
+      http.post('/api/trips/1/places', () => HttpResponse.json(place))
+    );
+
+    const result = await placesApi.create(1, { name: 'Paris' });
+    expect(result).toMatchObject({ name: 'Paris' });
+  });
+
+  it('FE-API-018: packingApi.bulkImport posts correct payload', async () => {
+    let receivedBody: unknown;
+    server.use(
+      http.post('/api/trips/1/packing/import', async ({ request }) => {
+        receivedBody = await request.json();
+        return HttpResponse.json({ imported: 1 });
+      })
+    );
+
+    await packingApi.bulkImport(1, [{ name: 'Sunscreen' }]);
+    expect(receivedBody).toMatchObject({ items: [{ name: 'Sunscreen' }] });
+  });
+
+  it('FE-API-019: inAppNotificationsApi.list passes unread_only query param', async () => {
+    let searchParams: URLSearchParams | null = null;
+    server.use(
+      http.get('/api/notifications/in-app', ({ request }) => {
+        searchParams = new URL(request.url).searchParams;
+        return HttpResponse.json([]);
+      })
+    );
+
+    await inAppNotificationsApi.list({ unread_only: true });
+    expect(searchParams?.get('unread_only')).toBe('true');
+  });
+
+  it('FE-API-020: shareApi.getSharedTrip hits /api/shared/tok123', async () => {
+    let hitPath = '';
+    server.use(
+      http.get('/api/shared/tok123', ({ request }) => {
+        hitPath = new URL(request.url).pathname;
+        return HttpResponse.json({ token: 'tok123' });
+      })
+    );
+
+    const result = await shareApi.getSharedTrip('tok123');
+    expect(hitPath).toBe('/api/shared/tok123');
+    expect(result).toMatchObject({ token: 'tok123' });
+  });
+
+  // ── authApi method spot-checks ───────────────────────────────────────────────
+
+  it('FE-API-021: authApi.login posts email and password to /api/auth/login', async () => {
+    const user = buildUser();
+    let receivedBody: unknown;
+    server.use(
+      http.post('/api/auth/login', async ({ request }) => {
+        receivedBody = await request.json();
+        return HttpResponse.json({ user });
+      })
+    );
+
+    const result = await authApi.login({ email: 'a@b.com', password: 'pass' });
+    expect(receivedBody).toMatchObject({ email: 'a@b.com', password: 'pass' });
+    expect(result).toMatchObject({ user: { id: user.id } });
+  });
+
+  it('FE-API-022: authApi.uploadAvatar sends multipart/form-data', async () => {
+    // jsdom's FormData ≠ undici's FormData — MSW body serialisation of FormData
+    // hangs under CI resource constraints. Spy + mock at the axios level to verify
+    // the correct args are passed without going through the network stack.
+    const postSpy = vi.spyOn(apiClient, 'post').mockResolvedValueOnce({ data: { avatar_url: '/uploads/avatar.jpg' } } as any);
+
+    const formData = new FormData();
+    formData.append('avatar', new Blob(['img'], { type: 'image/jpeg' }), 'avatar.jpg');
+
+    await authApi.uploadAvatar(formData);
+    expect(postSpy).toHaveBeenCalledWith('/auth/avatar', expect.any(FormData), expect.anything());
+    postSpy.mockRestore();
+  });
+
+  it('FE-API-023: authApi.mcpTokens.create posts name to /api/auth/mcp-tokens', async () => {
+    let receivedBody: unknown;
+    server.use(
+      http.post('/api/auth/mcp-tokens', async ({ request }) => {
+        receivedBody = await request.json();
+        return HttpResponse.json({ id: 1, name: 'My Token', token: 'tok' });
+      })
+    );
+
+    await authApi.mcpTokens.create('My Token');
+    expect(receivedBody).toMatchObject({ name: 'My Token' });
+  });
+});
+
+describe('API namespace smoke tests', () => {
+  it('daysApi.list fetches trip days', async () => {
+    server.use(http.get('/api/trips/1/days', () => HttpResponse.json([])));
+    await expect(daysApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('assignmentsApi.list fetches day assignments', async () => {
+    server.use(http.get('/api/trips/1/days/1/assignments', () => HttpResponse.json([])));
+    await expect(assignmentsApi.list(1, 1)).resolves.toEqual([]);
+  });
+
+  it('tagsApi.list fetches tags', async () => {
+    server.use(http.get('/api/tags', () => HttpResponse.json([])));
+    await expect(tagsApi.list()).resolves.toEqual([]);
+  });
+
+  it('categoriesApi.list fetches categories', async () => {
+    server.use(http.get('/api/categories', () => HttpResponse.json([])));
+    await expect(categoriesApi.list()).resolves.toEqual([]);
+  });
+
+  it('adminApi.users fetches admin users', async () => {
+    server.use(http.get('/api/admin/users', () => HttpResponse.json([])));
+    await expect(adminApi.users()).resolves.toEqual([]);
+  });
+
+  it('addonsApi.enabled fetches enabled addons', async () => {
+    server.use(http.get('/api/addons', () => HttpResponse.json([])));
+    await expect(addonsApi.enabled()).resolves.toEqual([]);
+  });
+
+  it('mapsApi.search posts query', async () => {
+    server.use(http.post('/api/maps/search', () => HttpResponse.json({ results: [] })));
+    await expect(mapsApi.search('Paris')).resolves.toMatchObject({ results: [] });
+  });
+
+  it('budgetApi.list fetches budget items', async () => {
+    server.use(http.get('/api/trips/1/budget', () => HttpResponse.json([])));
+    await expect(budgetApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('filesApi.list fetches trip files', async () => {
+    server.use(http.get('/api/trips/1/files', () => HttpResponse.json([])));
+    await expect(filesApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('reservationsApi.list fetches reservations', async () => {
+    server.use(http.get('/api/trips/1/reservations', () => HttpResponse.json([])));
+    await expect(reservationsApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('weatherApi.get fetches weather data', async () => {
+    server.use(http.get('/api/weather', () => HttpResponse.json({ temp: 20 })));
+    await expect(weatherApi.get(48.8, 2.3, '2025-06-01')).resolves.toMatchObject({ temp: 20 });
+  });
+
+  it('settingsApi.get fetches settings', async () => {
+    server.use(http.get('/api/settings', () => HttpResponse.json({ dark_mode: false })));
+    await expect(settingsApi.get()).resolves.toMatchObject({ dark_mode: false });
+  });
+
+  it('accommodationsApi.list fetches accommodations', async () => {
+    server.use(http.get('/api/trips/1/accommodations', () => HttpResponse.json([])));
+    await expect(accommodationsApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('dayNotesApi.list fetches day notes', async () => {
+    server.use(http.get('/api/trips/1/days/1/notes', () => HttpResponse.json([])));
+    await expect(dayNotesApi.list(1, 1)).resolves.toEqual([]);
+  });
+
+  it('collabApi.getNotes fetches collab notes', async () => {
+    server.use(http.get('/api/trips/1/collab/notes', () => HttpResponse.json([])));
+    await expect(collabApi.getNotes(1)).resolves.toEqual([]);
+  });
+
+  it('notificationsApi.getPreferences fetches preferences', async () => {
+    server.use(http.get('/api/notifications/preferences', () => HttpResponse.json({ email: true })));
+    await expect(notificationsApi.getPreferences()).resolves.toMatchObject({ email: true });
+  });
+
+  it('inAppNotificationsApi.unreadCount fetches unread count', async () => {
+    server.use(http.get('/api/notifications/in-app/unread-count', () => HttpResponse.json({ count: 3 })));
+    await expect(inAppNotificationsApi.unreadCount()).resolves.toMatchObject({ count: 3 });
+  });
+
+  it('inAppNotificationsApi.markRead marks a notification read', async () => {
+    server.use(http.put('/api/notifications/in-app/5/read', () => HttpResponse.json({ ok: true })));
+    await expect(inAppNotificationsApi.markRead(5)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('inAppNotificationsApi.markAllRead marks all notifications read', async () => {
+    server.use(http.put('/api/notifications/in-app/read-all', () => HttpResponse.json({ ok: true })));
+    await expect(inAppNotificationsApi.markAllRead()).resolves.toMatchObject({ ok: true });
+  });
+
+  it('inAppNotificationsApi.delete deletes a notification', async () => {
+    server.use(http.delete('/api/notifications/in-app/5', () => HttpResponse.json({ ok: true })));
+    await expect(inAppNotificationsApi.delete(5)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('inAppNotificationsApi.markUnread marks a notification unread', async () => {
+    server.use(http.put('/api/notifications/in-app/5/unread', () => HttpResponse.json({ ok: true })));
+    await expect(inAppNotificationsApi.markUnread(5)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('inAppNotificationsApi.deleteAll deletes all notifications', async () => {
+    server.use(http.delete('/api/notifications/in-app/all', () => HttpResponse.json({ ok: true })));
+    await expect(inAppNotificationsApi.deleteAll()).resolves.toMatchObject({ ok: true });
+  });
+
+  it('inAppNotificationsApi.respond posts a response', async () => {
+    server.use(http.post('/api/notifications/in-app/5/respond', () => HttpResponse.json({ ok: true })));
+    await expect(inAppNotificationsApi.respond(5, 'positive')).resolves.toMatchObject({ ok: true });
+  });
+
+  it('notificationsApi.updatePreferences updates preferences', async () => {
+    server.use(http.put('/api/notifications/preferences', () => HttpResponse.json({ ok: true })));
+    await expect(notificationsApi.updatePreferences({ email: { trip_invite: true } })).resolves.toMatchObject({ ok: true });
+  });
+
+  it('backupApi.list fetches backup list', async () => {
+    server.use(http.get('/api/backup/list', () => HttpResponse.json([])));
+    await expect(backupApi.list()).resolves.toEqual([]);
+  });
+
+  // ── tripsApi additional methods ──────────────────────────────────────────────
+
+  it('tripsApi.create posts new trip', async () => {
+    server.use(http.post('/api/trips', () => HttpResponse.json({ id: 1, title: 'Test' })));
+    await expect(tripsApi.create({ title: 'Test' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('tripsApi.update puts trip data', async () => {
+    server.use(http.put('/api/trips/1', () => HttpResponse.json({ id: 1 })));
+    await expect(tripsApi.update(1, { title: 'Updated' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('tripsApi.delete deletes a trip', async () => {
+    server.use(http.delete('/api/trips/1', () => HttpResponse.json({ ok: true })));
+    await expect(tripsApi.delete(1)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('tripsApi.getMembers fetches trip members', async () => {
+    server.use(http.get('/api/trips/1/members', () => HttpResponse.json([])));
+    await expect(tripsApi.getMembers(1)).resolves.toEqual([]);
+  });
+
+  it('tripsApi.copy copies a trip', async () => {
+    server.use(http.post('/api/trips/1/copy', () => HttpResponse.json({ id: 99 })));
+    await expect(tripsApi.copy(1)).resolves.toMatchObject({ id: 99 });
+  });
+
+  // ── placesApi additional methods ─────────────────────────────────────────────
+
+  it('placesApi.list fetches places', async () => {
+    server.use(http.get('/api/trips/1/places', () => HttpResponse.json([])));
+    await expect(placesApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('placesApi.get fetches a place', async () => {
+    server.use(http.get('/api/trips/1/places/5', () => HttpResponse.json({ id: 5 })));
+    await expect(placesApi.get(1, 5)).resolves.toMatchObject({ id: 5 });
+  });
+
+  it('placesApi.update updates a place', async () => {
+    server.use(http.put('/api/trips/1/places/5', () => HttpResponse.json({ id: 5 })));
+    await expect(placesApi.update(1, 5, { name: 'Rome' })).resolves.toMatchObject({ id: 5 });
+  });
+
+  it('placesApi.delete deletes a place', async () => {
+    server.use(http.delete('/api/trips/1/places/5', () => HttpResponse.json({ ok: true })));
+    await expect(placesApi.delete(1, 5)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── packingApi additional methods ────────────────────────────────────────────
+
+  it('packingApi.list fetches packing items', async () => {
+    server.use(http.get('/api/trips/1/packing', () => HttpResponse.json([])));
+    await expect(packingApi.list(1)).resolves.toEqual([]);
+  });
+
+  it('packingApi.create creates a packing item', async () => {
+    server.use(http.post('/api/trips/1/packing', () => HttpResponse.json({ id: 1, name: 'Towel' })));
+    await expect(packingApi.create(1, { name: 'Towel' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('packingApi.delete deletes a packing item', async () => {
+    server.use(http.delete('/api/trips/1/packing/1', () => HttpResponse.json({ ok: true })));
+    await expect(packingApi.delete(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── assignmentsApi additional methods ────────────────────────────────────────
+
+  it('assignmentsApi.create creates an assignment', async () => {
+    server.use(http.post('/api/trips/1/days/1/assignments', () => HttpResponse.json({ id: 1 })));
+    await expect(assignmentsApi.create(1, 1, { place_id: 5 })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('assignmentsApi.delete deletes an assignment', async () => {
+    server.use(http.delete('/api/trips/1/days/1/assignments/1', () => HttpResponse.json({ ok: true })));
+    await expect(assignmentsApi.delete(1, 1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('assignmentsApi.reorder reorders assignments', async () => {
+    server.use(http.put('/api/trips/1/days/1/assignments/reorder', () => HttpResponse.json({ ok: true })));
+    await expect(assignmentsApi.reorder(1, 1, [3, 1, 2])).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── daysApi additional methods ───────────────────────────────────────────────
+
+  it('daysApi.create creates a day', async () => {
+    server.use(http.post('/api/trips/1/days', () => HttpResponse.json({ id: 1 })));
+    await expect(daysApi.create(1, { date: '2025-06-01' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('daysApi.delete deletes a day', async () => {
+    server.use(http.delete('/api/trips/1/days/1', () => HttpResponse.json({ ok: true })));
+    await expect(daysApi.delete(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── tagsApi / categoriesApi additional methods ────────────────────────────────
+
+  it('tagsApi.create creates a tag', async () => {
+    server.use(http.post('/api/tags', () => HttpResponse.json({ id: 1, name: 'Fun' })));
+    await expect(tagsApi.create({ name: 'Fun' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('tagsApi.delete deletes a tag', async () => {
+    server.use(http.delete('/api/tags/1', () => HttpResponse.json({ ok: true })));
+    await expect(tagsApi.delete(1)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('categoriesApi.create creates a category', async () => {
+    server.use(http.post('/api/categories', () => HttpResponse.json({ id: 1, name: 'Food' })));
+    await expect(categoriesApi.create({ name: 'Food' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('categoriesApi.delete deletes a category', async () => {
+    server.use(http.delete('/api/categories/1', () => HttpResponse.json({ ok: true })));
+    await expect(categoriesApi.delete(1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── adminApi additional methods ───────────────────────────────────────────────
+
+  it('adminApi.stats fetches admin stats', async () => {
+    server.use(http.get('/api/admin/stats', () => HttpResponse.json({ trips: 5 })));
+    await expect(adminApi.stats()).resolves.toMatchObject({ trips: 5 });
+  });
+
+  it('adminApi.createUser creates a user', async () => {
+    server.use(http.post('/api/admin/users', () => HttpResponse.json({ id: 10 })));
+    await expect(adminApi.createUser({ email: 'x@x.com' })).resolves.toMatchObject({ id: 10 });
+  });
+
+  // ── budgetApi additional methods ─────────────────────────────────────────────
+
+  it('budgetApi.create creates a budget item', async () => {
+    server.use(http.post('/api/trips/1/budget', () => HttpResponse.json({ id: 1 })));
+    await expect(budgetApi.create(1, { name: 'Hotel' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('budgetApi.delete deletes a budget item', async () => {
+    server.use(http.delete('/api/trips/1/budget/1', () => HttpResponse.json({ ok: true })));
+    await expect(budgetApi.delete(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── reservationsApi additional methods ───────────────────────────────────────
+
+  it('reservationsApi.create creates a reservation', async () => {
+    server.use(http.post('/api/trips/1/reservations', () => HttpResponse.json({ id: 1 })));
+    await expect(reservationsApi.create(1, { title: 'Hotel' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('reservationsApi.delete deletes a reservation', async () => {
+    server.use(http.delete('/api/trips/1/reservations/1', () => HttpResponse.json({ ok: true })));
+    await expect(reservationsApi.delete(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── settingsApi additional methods ───────────────────────────────────────────
+
+  it('settingsApi.set updates a setting', async () => {
+    server.use(http.put('/api/settings', () => HttpResponse.json({ ok: true })));
+    await expect(settingsApi.set('dark_mode', true)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── accommodationsApi additional methods ─────────────────────────────────────
+
+  it('accommodationsApi.create creates accommodation', async () => {
+    server.use(http.post('/api/trips/1/accommodations', () => HttpResponse.json({ id: 1 })));
+    await expect(accommodationsApi.create(1, { place_id: 1, start_day_id: 1, end_day_id: 1 })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('accommodationsApi.delete deletes accommodation', async () => {
+    server.use(http.delete('/api/trips/1/accommodations/1', () => HttpResponse.json({ ok: true })));
+    await expect(accommodationsApi.delete(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── dayNotesApi additional methods ───────────────────────────────────────────
+
+  it('dayNotesApi.create creates a day note', async () => {
+    server.use(http.post('/api/trips/1/days/1/notes', () => HttpResponse.json({ id: 1 })));
+    await expect(dayNotesApi.create(1, 1, { text: 'Hello' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('dayNotesApi.delete deletes a day note', async () => {
+    server.use(http.delete('/api/trips/1/days/1/notes/1', () => HttpResponse.json({ ok: true })));
+    await expect(dayNotesApi.delete(1, 1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── collabApi additional methods ─────────────────────────────────────────────
+
+  it('collabApi.createNote creates a note', async () => {
+    server.use(http.post('/api/trips/1/collab/notes', () => HttpResponse.json({ id: 1 })));
+    await expect(collabApi.createNote(1, { title: 'Note' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('collabApi.deleteNote deletes a note', async () => {
+    server.use(http.delete('/api/trips/1/collab/notes/1', () => HttpResponse.json({ ok: true })));
+    await expect(collabApi.deleteNote(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── backupApi additional methods ─────────────────────────────────────────────
+
+  it('backupApi.getAutoSettings fetches auto backup settings', async () => {
+    server.use(http.get('/api/backup/auto-settings', () => HttpResponse.json({ enabled: true })));
+    await expect(backupApi.getAutoSettings()).resolves.toMatchObject({ enabled: true });
+  });
+
+  it('backupApi.delete deletes a backup', async () => {
+    server.use(http.delete('/api/backup/backup.zip', () => HttpResponse.json({ ok: true })));
+    await expect(backupApi.delete('backup.zip')).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── shareApi additional methods ───────────────────────────────────────────────
+
+  it('shareApi.createLink creates a share link', async () => {
+    server.use(http.post('/api/trips/1/share-link', () => HttpResponse.json({ token: 'abc' })));
+    await expect(shareApi.createLink(1)).resolves.toMatchObject({ token: 'abc' });
+  });
+
+  it('shareApi.deleteLink deletes a share link', async () => {
+    server.use(http.delete('/api/trips/1/share-link', () => HttpResponse.json({ ok: true })));
+    await expect(shareApi.deleteLink(1)).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── notificationsApi additional methods ───────────────────────────────────────
+
+  it('notificationsApi.testWebhook tests webhook endpoint', async () => {
+    server.use(http.post('/api/notifications/test-webhook', () => HttpResponse.json({ ok: true })));
+    await expect(notificationsApi.testWebhook('http://example.com')).resolves.toMatchObject({ ok: true });
+  });
+
+  it('notificationsApi.testSmtp tests smtp endpoint', async () => {
+    server.use(http.post('/api/notifications/test-smtp', () => HttpResponse.json({ ok: true })));
+    await expect(notificationsApi.testSmtp('user@example.com')).resolves.toMatchObject({ ok: true });
+  });
+
+  // ── mapsApi additional methods ────────────────────────────────────────────────
+
+  it('mapsApi.reverse fetches reverse geocode', async () => {
+    server.use(http.get('/api/maps/reverse', () => HttpResponse.json({ address: 'Paris' })));
+    await expect(mapsApi.reverse(48.8, 2.3)).resolves.toMatchObject({ address: 'Paris' });
+  });
+
+  // ── collabApi messaging methods ───────────────────────────────────────────────
+
+  it('collabApi.getMessages fetches messages', async () => {
+    server.use(http.get('/api/trips/1/collab/messages', () => HttpResponse.json([])));
+    await expect(collabApi.getMessages(1)).resolves.toEqual([]);
+  });
+
+  it('collabApi.sendMessage sends a message', async () => {
+    server.use(http.post('/api/trips/1/collab/messages', () => HttpResponse.json({ id: 1 })));
+    await expect(collabApi.sendMessage(1, { text: 'Hello' })).resolves.toMatchObject({ id: 1 });
+  });
+
+  it('collabApi.deleteMessage deletes a message', async () => {
+    server.use(http.delete('/api/trips/1/collab/messages/1', () => HttpResponse.json({ ok: true })));
+    await expect(collabApi.deleteMessage(1, 1)).resolves.toMatchObject({ ok: true });
+  });
+
+  it('collabApi.reactMessage reacts to a message', async () => {
+    server.use(http.post('/api/trips/1/collab/messages/1/react', () => HttpResponse.json({ ok: true })));
+    await expect(collabApi.reactMessage(1, 1, '👍')).resolves.toMatchObject({ ok: true });
+  });
+
+  it('collabApi.getPolls fetches polls', async () => {
+    server.use(http.get('/api/trips/1/collab/polls', () => HttpResponse.json([])));
+    await expect(collabApi.getPolls(1)).resolves.toEqual([]);
+  });
+
+  it('backupApi.uploadRestore uploads and restores a backup', async () => {
+    // FormData POST hangs on CI — mock at the axios level (see FE-API-022 comment).
+    const postSpy = vi.spyOn(apiClient, 'post').mockResolvedValueOnce({ data: { ok: true } } as any);
+    const file = new File(['data'], 'backup.zip', { type: 'application/zip' });
+    await expect(backupApi.uploadRestore(file)).resolves.toMatchObject({ ok: true });
+    postSpy.mockRestore();
+  });
+
+  it('backupApi.restore restores a named backup', async () => {
+    server.use(http.post('/api/backup/restore/backup.zip', () => HttpResponse.json({ ok: true })));
+    await expect(backupApi.restore('backup.zip')).resolves.toMatchObject({ ok: true });
+  });
+
+  it('backupApi.create creates a backup', async () => {
+    server.use(http.post('/api/backup/create', () => HttpResponse.json({ filename: 'backup.zip' })));
+    await expect(backupApi.create()).resolves.toMatchObject({ filename: 'backup.zip' });
+  });
+});
+
+describe('mapsApi', () => {
+  it('FE-MAPS-001: mapsApi.autocomplete sends input, lang, and locationBias', async () => {
+    let capturedBody: any = null;
+
+    server.use(
+      http.post('/api/maps/autocomplete', async ({ request }) => {
+        capturedBody = await request.json();
+        return HttpResponse.json({
+          suggestions: [{ placeId: 'ChIJ1234', mainText: 'Paris', secondaryText: 'France' }],
+          source: 'google',
+        });
+      })
+    );
+
+    const result = await mapsApi.autocomplete('Par', 'fr', { low: { lat: 48.5, lng: 2.0 }, high: { lat: 49.0, lng: 2.8 } });
+
+    expect(capturedBody).toEqual({
+      input: 'Par',
+      lang: 'fr',
+      locationBias: { low: { lat: 48.5, lng: 2.0 }, high: { lat: 49.0, lng: 2.8 } },
+    });
+    expect(result.suggestions).toHaveLength(1);
+    expect(result.suggestions[0].mainText).toBe('Paris');
+    expect(result.source).toBe('google');
+  });
+
+  it('FE-MAPS-002: mapsApi.autocomplete works without optional params', async () => {
+    server.use(
+      http.post('/api/maps/autocomplete', async ({ request }) => {
+        const body: any = await request.json();
+        expect(body.lang).toBeUndefined();
+        expect(body.locationBias).toBeUndefined();
+        return HttpResponse.json({ suggestions: [], source: 'nominatim' });
+      })
+    );
+
+    const result = await mapsApi.autocomplete('test');
+    expect(result.suggestions).toEqual([]);
+  });
+
+  it('FE-MAPS-003: mapsApi.autocomplete rejects on server error', async () => {
+    server.use(
+      http.post('/api/maps/autocomplete', () => {
+        return HttpResponse.json({ error: 'Rate limited' }, { status: 429 });
+      })
+    );
+
+    await expect(mapsApi.autocomplete('test')).rejects.toThrow();
+  });
+
+  it('FE-MAPS-004: mapsApi.autocomplete rejects when AbortSignal is aborted', async () => {
+    const controller = new AbortController();
+
+    server.use(
+      http.post('/api/maps/autocomplete', async () => {
+        // Never resolves — request will be aborted
+        await new Promise(() => {});
+        return HttpResponse.json({ suggestions: [] });
+      })
+    );
+
+    const promise = mapsApi.autocomplete('Paris', undefined, undefined, controller.signal);
+    controller.abort();
+
+    await expect(promise).rejects.toThrow();
+  });
+});

client/tests/integration/api/websocket.test.ts

@@ -0,0 +1,438 @@
+// IMPORTANT: unmock must be the very first statement before any imports
+vi.unmock('../../../src/api/websocket');
+
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import {
+  connect,
+  disconnect,
+  joinTrip,
+  leaveTrip,
+  addListener,
+  removeListener,
+  getSocketId,
+  setRefetchCallback,
+} from '../../../src/api/websocket';
+
+// ── Fake WebSocket ────────────────────────────────────────────────────────────
+
+class MockWebSocket {
+  static CONNECTING = 0;
+  static OPEN = 1;
+  static CLOSING = 2;
+  static CLOSED = 3;
+
+  readyState: number = MockWebSocket.OPEN;
+  send = vi.fn();
+  close = vi.fn();
+  onopen: (() => void) | null = null;
+  onmessage: ((event: { data: string }) => void) | null = null;
+  onclose: (() => void) | null = null;
+  onerror: (() => void) | null = null;
+
+  constructor(public url: string) {
+    MockWebSocket.instances.push(this);
+  }
+
+  static instances: MockWebSocket[] = [];
+  static reset() {
+    MockWebSocket.instances = [];
+  }
+}
+
+beforeEach(() => {
+  vi.useFakeTimers();
+  MockWebSocket.reset();
+
+  // Replace globalThis.WebSocket with MockWebSocket directly.
+  // jsdom marks WebSocket as non-writable, so we must use defineProperty.
+  Object.defineProperty(globalThis, 'WebSocket', {
+    writable: true,
+    configurable: true,
+    value: MockWebSocket,
+  });
+
+  // Default handler: ws-token returns a valid token
+  server.use(
+    http.post('/api/auth/ws-token', () =>
+      HttpResponse.json({ token: 'test-ws-token' })
+    )
+  );
+});
+
+afterEach(() => {
+  disconnect();
+  setRefetchCallback(null);
+  vi.useRealTimers();
+  server.resetHandlers();
+});
+
+// Helper to get the most recently created MockWebSocket instance
+function lastSocket(): MockWebSocket {
+  return MockWebSocket.instances[MockWebSocket.instances.length - 1];
+}
+
+// ── connect / disconnect ──────────────────────────────────────────────────────
+
+describe('connect / disconnect', () => {
+  it('FE-COMP-WS-001: connect() fetches ws-token and creates a WebSocket with it', async () => {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(MockWebSocket.instances).toHaveLength(1);
+    expect(MockWebSocket.instances[0].url).toContain('token=test-ws-token');
+  });
+
+  it('FE-COMP-WS-002: connect() sets shouldReconnect so onclose triggers reconnect', async () => {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(MockWebSocket.instances).toHaveLength(1);
+
+    // Simulate socket close (triggers scheduleReconnect)
+    lastSocket().onclose!();
+
+    // Advance past initial reconnect delay (1000ms) — reconnect fires
+    await vi.advanceTimersByTimeAsync(1001);
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(MockWebSocket.instances).toHaveLength(2);
+  });
+
+  it('FE-COMP-WS-003: disconnect() prevents reconnect after socket close', async () => {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    const sock = lastSocket();
+    disconnect();
+
+    // After disconnect, onclose is nulled — simulating close should be safe
+    // but we also fire it manually to be sure
+    if (sock.onclose) sock.onclose();
+
+    await vi.advanceTimersByTimeAsync(5000);
+    await vi.advanceTimersByTimeAsync(0);
+
+    // Still only the original socket
+    expect(MockWebSocket.instances).toHaveLength(1);
+  });
+
+  it('FE-COMP-WS-004: connect() is idempotent — calling twice creates only one socket', async () => {
+    connect();
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(MockWebSocket.instances).toHaveLength(1);
+  });
+});
+
+// ── ws-token fetch failures ───────────────────────────────────────────────────
+
+describe('ws-token fetch failures', () => {
+  it('FE-COMP-WS-005: 401 on ws-token fetch stops reconnect entirely', async () => {
+    server.use(
+      http.post('/api/auth/ws-token', () =>
+        new HttpResponse(null, { status: 401 })
+      )
+    );
+
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    // No socket should be created
+    expect(MockWebSocket.instances).toHaveLength(0);
+
+    // Advance timers — no retry should fire
+    await vi.advanceTimersByTimeAsync(10000);
+    await vi.advanceTimersByTimeAsync(0);
+
+    expect(MockWebSocket.instances).toHaveLength(0);
+  });
+
+  it('FE-COMP-WS-006: non-401 error on ws-token schedules a reconnect', async () => {
+    server.use(
+      http.post('/api/auth/ws-token', () =>
+        new HttpResponse(null, { status: 503 })
+      )
+    );
+
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    // No socket yet
+    expect(MockWebSocket.instances).toHaveLength(0);
+
+    // Now allow the next fetch to succeed
+    server.use(
+      http.post('/api/auth/ws-token', () =>
+        HttpResponse.json({ token: 'retry-token' })
+      )
+    );
+
+    // Advance past initial reconnect delay
+    await vi.advanceTimersByTimeAsync(1001);
+    await vi.advanceTimersByTimeAsync(0);
+
+    // A socket should now be created
+    expect(MockWebSocket.instances).toHaveLength(1);
+  });
+});
+
+// ── onopen / join on reconnect ────────────────────────────────────────────────
+
+describe('onopen / join on reconnect', () => {
+  it('FE-COMP-WS-007: onopen sends join messages for all active trips', async () => {
+    joinTrip(42);
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    const sock = lastSocket();
+    sock.onopen!();
+
+    expect(sock.send).toHaveBeenCalledWith(
+      JSON.stringify({ type: 'join', tripId: '42' })
+    );
+  });
+
+  it('FE-COMP-WS-008: onopen invokes refetchCallback for each active trip', async () => {
+    const refetch = vi.fn();
+    setRefetchCallback(refetch);
+    joinTrip(1);
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    lastSocket().onopen!();
+
+    expect(refetch).toHaveBeenCalledWith('1');
+  });
+});
+
+// ── joinTrip / leaveTrip ──────────────────────────────────────────────────────
+
+describe('joinTrip / leaveTrip', () => {
+  it('FE-COMP-WS-009: joinTrip sends join message immediately when socket is open', async () => {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+    const sock = lastSocket();
+    sock.onopen!();
+
+    joinTrip(99);
+
+    expect(sock.send).toHaveBeenCalledWith(
+      JSON.stringify({ type: 'join', tripId: '99' })
+    );
+  });
+
+  it('FE-COMP-WS-010: joinTrip queues trip when socket is not open yet', async () => {
+    joinTrip(5);
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+
+    const sock = lastSocket();
+    sock.onopen!();
+
+    expect(sock.send).toHaveBeenCalledWith(
+      JSON.stringify({ type: 'join', tripId: '5' })
+    );
+  });
+
+  it('FE-COMP-WS-011: leaveTrip sends leave message and removes from activeTrips', async () => {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+    const sock = lastSocket();
+    sock.onopen!();
+
+    joinTrip(7);
+    leaveTrip(7);
+
+    expect(sock.send).toHaveBeenCalledWith(
+      JSON.stringify({ type: 'leave', tripId: '7' })
+    );
+
+    // Simulate close + reconnect — trip 7 should NOT be re-joined
+    sock.onclose!();
+    await vi.advanceTimersByTimeAsync(1001);
+    await vi.advanceTimersByTimeAsync(0);
+
+    const sock2 = lastSocket();
+    sock2.onopen!();
+
+    // send called for initial join (trip 7) but not after leaveTrip
+    const joinCalls = sock2.send.mock.calls.filter(
+      c => JSON.parse(c[0]).tripId === '7'
+    );
+    expect(joinCalls).toHaveLength(0);
+  });
+});
+
+// ── handleMessage / listeners ─────────────────────────────────────────────────
+
+describe('handleMessage / listeners', () => {
+  async function setupConnectedSocket() {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+    const sock = lastSocket();
+    sock.onopen!();
+    return sock;
+  }
+
+  it('FE-COMP-WS-012: welcome message sets socketId and is NOT dispatched to listeners', async () => {
+    const sock = await setupConnectedSocket();
+    const listener = vi.fn();
+    addListener(listener);
+
+    sock.onmessage!({ data: JSON.stringify({ type: 'welcome', socketId: 'server-sid-1' }) });
+
+    expect(getSocketId()).toBe('server-sid-1');
+    expect(listener).not.toHaveBeenCalled();
+
+    removeListener(listener);
+  });
+
+  it('FE-COMP-WS-013: non-welcome messages are dispatched to all registered listeners', async () => {
+    const sock = await setupConnectedSocket();
+    const l1 = vi.fn();
+    const l2 = vi.fn();
+    addListener(l1);
+    addListener(l2);
+
+    const msg = { type: 'place_added', tripId: '1' };
+    sock.onmessage!({ data: JSON.stringify(msg) });
+
+    expect(l1).toHaveBeenCalledWith(msg);
+    expect(l2).toHaveBeenCalledWith(msg);
+
+    removeListener(l1);
+    removeListener(l2);
+  });
+
+  it('FE-COMP-WS-014: listener error is caught and does not prevent other listeners from firing', async () => {
+    const sock = await setupConnectedSocket();
+    const throwing = vi.fn().mockImplementation(() => { throw new Error('boom'); });
+    const working = vi.fn();
+    addListener(throwing);
+    addListener(working);
+
+    expect(() => {
+      sock.onmessage!({ data: JSON.stringify({ type: 'some_event' }) });
+    }).not.toThrow();
+
+    expect(working).toHaveBeenCalled();
+
+    removeListener(throwing);
+    removeListener(working);
+  });
+
+  it('FE-COMP-WS-015: malformed JSON in message is caught silently', async () => {
+    const sock = await setupConnectedSocket();
+    const listener = vi.fn();
+    addListener(listener);
+
+    expect(() => {
+      sock.onmessage!({ data: 'not-json' });
+    }).not.toThrow();
+
+    expect(listener).not.toHaveBeenCalled();
+
+    removeListener(listener);
+  });
+
+  it('FE-COMP-WS-016: removeListener stops a listener from receiving messages', async () => {
+    const sock = await setupConnectedSocket();
+    const listener = vi.fn();
+    addListener(listener);
+    removeListener(listener);
+
+    sock.onmessage!({ data: JSON.stringify({ type: 'update' }) });
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+});
+
+// ── addListener / removeListener ─────────────────────────────────────────────
+
+describe('addListener / removeListener symmetry', () => {
+  it('FE-COMP-WS-017: listener set grows and shrinks correctly', async () => {
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+    const sock = lastSocket();
+    sock.onopen!();
+
+    const l1 = vi.fn();
+    const l2 = vi.fn();
+    addListener(l1);
+    addListener(l2);
+
+    sock.onmessage!({ data: JSON.stringify({ type: 'ping' }) });
+    expect(l1).toHaveBeenCalledTimes(1);
+    expect(l2).toHaveBeenCalledTimes(1);
+
+    removeListener(l1);
+
+    sock.onmessage!({ data: JSON.stringify({ type: 'ping' }) });
+    expect(l1).toHaveBeenCalledTimes(1); // no new calls
+    expect(l2).toHaveBeenCalledTimes(2);
+
+    removeListener(l2);
+  });
+});
+
+// ── getSocketId / setRefetchCallback ─────────────────────────────────────────
+
+describe('getSocketId / setRefetchCallback', () => {
+  it('FE-COMP-WS-018: getSocketId() returns null before welcome message', async () => {
+    // mySocketId is a module-level singleton that persists between tests.
+    // Use vi.resetModules() + dynamic import to get a fresh module state.
+    vi.resetModules();
+    const freshWs = await import('../../../src/api/websocket');
+    expect(freshWs.getSocketId()).toBeNull();
+    // Clean up: restore the real module for subsequent tests by resetting again
+    vi.resetModules();
+  });
+
+  it('FE-COMP-WS-019: setRefetchCallback(null) clears the callback', async () => {
+    const cb = vi.fn();
+    setRefetchCallback(cb);
+    setRefetchCallback(null);
+
+    joinTrip(10);
+    connect();
+    await vi.advanceTimersByTimeAsync(0);
+    lastSocket().onopen!();
+
+    expect(cb).not.toHaveBeenCalled();
+  });
+});
+
+// ── Reconnect backoff ─────────────────────────────────────────────────────────
+
+describe('reconnect backoff', () => {
+  it('FE-COMP-WS-020: reconnect delay doubles on each failure up to 30s max', async () => {
+    // Make every fetch fail with 503 so reconnect keeps firing
+    server.use(
+      http.post('/api/auth/ws-token', () =>
+        new HttpResponse(null, { status: 503 })
+      )
+    );
+
+    connect();
+
+    const delays = [1000, 2000, 4000, 8000, 16000, 30000];
+    let totalAdvanced = 0;
+
+    for (const delay of delays) {
+      // Wait for the fetch to complete
+      await vi.advanceTimersByTimeAsync(0);
+      // No socket should ever be created
+      expect(MockWebSocket.instances).toHaveLength(0);
+      // Advance to trigger next reconnect
+      await vi.advanceTimersByTimeAsync(delay + 1);
+      totalAdvanced += delay + 1;
+    }
+
+    // After advancing through all delays, still no socket
+    await vi.advanceTimersByTimeAsync(0);
+    expect(MockWebSocket.instances).toHaveLength(0);
+  });
+});

client/tests/integration/hooks/useDayNotes.test.ts

@@ -0,0 +1,448 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { useDayNotes } from '../../../src/hooks/useDayNotes';
+import { useTripStore } from '../../../src/store/tripStore';
+import { TranslationProvider } from '../../../src/i18n/TranslationContext';
+import { server } from '../../helpers/msw/server';
+import { buildDayNote } from '../../helpers/factories';
+import { resetAllStores } from '../../helpers/store';
+
+const wrapper = ({ children }: { children: React.ReactNode }) =>
+  React.createElement(TranslationProvider, null, children);
+
+const TRIP_ID = 1;
+const DAY_ID = 10;
+
+describe('useDayNotes', () => {
+  beforeEach(() => {
+    resetAllStores();
+    vi.clearAllMocks();
+  });
+
+  it('FE-HOOK-DAYNOTES-001: initial noteUi state is empty', () => {
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+    expect(result.current.noteUi).toEqual({});
+  });
+
+  it('FE-HOOK-DAYNOTES-002: initial dayNotes comes from tripStore', () => {
+    const note = buildDayNote({ day_id: DAY_ID });
+    useTripStore.setState({ dayNotes: { [String(DAY_ID)]: [note] } });
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+    expect(result.current.dayNotes[String(DAY_ID)]).toEqual([note]);
+  });
+
+  it('FE-HOOK-DAYNOTES-003: openAddNote sets mode=add and default sort order', () => {
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.openAddNote(DAY_ID, () => []);
+    });
+
+    expect(result.current.noteUi[DAY_ID]).toMatchObject({
+      mode: 'add',
+      text: '',
+      sortOrder: 0, // maxKey(-1) + 1 = 0
+    });
+  });
+
+  it('FE-HOOK-DAYNOTES-004: openAddNote calculates sortOrder as max(sortKey) + 1 from merged items', () => {
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 5, data: buildDayNote() },
+      { type: 'note' as const, sortKey: 10, data: buildDayNote() },
+    ];
+
+    act(() => {
+      result.current.openAddNote(DAY_ID, getMergedItems);
+    });
+
+    expect(result.current.noteUi[DAY_ID]).toMatchObject({
+      mode: 'add',
+      sortOrder: 11, // max(5,10) + 1
+    });
+  });
+
+  it('FE-HOOK-DAYNOTES-005: openEditNote sets mode=edit with note data', () => {
+    const note = buildDayNote({ id: 99, text: 'Hello', time: '10:00', icon: 'Star' });
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.openEditNote(DAY_ID, note);
+    });
+
+    expect(result.current.noteUi[DAY_ID]).toMatchObject({
+      mode: 'edit',
+      noteId: 99,
+      text: 'Hello',
+      time: '10:00',
+      icon: 'Star',
+    });
+  });
+
+  it('FE-HOOK-DAYNOTES-006: cancelNote removes the UI entry for that day', () => {
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.openAddNote(DAY_ID, () => []);
+    });
+    expect(result.current.noteUi[DAY_ID]).toBeDefined();
+
+    act(() => {
+      result.current.cancelNote(DAY_ID);
+    });
+    expect(result.current.noteUi[DAY_ID]).toBeUndefined();
+  });
+
+  it('FE-HOOK-DAYNOTES-007: saveNote with empty text is a no-op', async () => {
+    const spy = vi.fn();
+    server.use(
+      http.post('/api/trips/:id/days/:dayId/notes', () => {
+        spy();
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.setNoteUi({ [DAY_ID]: { mode: 'add', text: '', time: '', icon: 'FileText', sortOrder: 0 } });
+    });
+
+    await act(async () => {
+      await result.current.saveNote(DAY_ID);
+    });
+
+    expect(spy).not.toHaveBeenCalled();
+    // noteUi remains set (no cancelNote was called)
+    expect(result.current.noteUi[DAY_ID]).toBeDefined();
+  });
+
+  it('FE-HOOK-DAYNOTES-008: saveNote in add mode calls addDayNote and clears UI', async () => {
+    const createdNote = buildDayNote({ day_id: DAY_ID, text: 'New note' });
+    server.use(
+      http.post('/api/trips/:id/days/:dayId/notes', async () => {
+        return HttpResponse.json({ note: createdNote });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.setNoteUi({
+        [DAY_ID]: { mode: 'add', text: 'New note', time: '', icon: 'FileText', sortOrder: 0 },
+      });
+    });
+
+    await act(async () => {
+      await result.current.saveNote(DAY_ID);
+    });
+
+    // UI should be cleared after successful save
+    expect(result.current.noteUi[DAY_ID]).toBeUndefined();
+  });
+
+  it('FE-HOOK-DAYNOTES-009: saveNote in edit mode calls updateDayNote and clears UI', async () => {
+    const noteId = 55;
+    const updatedNote = buildDayNote({ id: noteId, day_id: DAY_ID, text: 'Updated' });
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', async () => {
+        return HttpResponse.json({ note: updatedNote });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.setNoteUi({
+        [DAY_ID]: { mode: 'edit', noteId, text: 'Updated', time: '', icon: 'FileText' },
+      });
+    });
+
+    await act(async () => {
+      await result.current.saveNote(DAY_ID);
+    });
+
+    expect(result.current.noteUi[DAY_ID]).toBeUndefined();
+  });
+
+  it('FE-HOOK-DAYNOTES-010: deleteNote calls deleteDayNote on the store', async () => {
+    const note = buildDayNote({ id: 77, day_id: DAY_ID });
+    useTripStore.setState({ dayNotes: { [String(DAY_ID)]: [note] } });
+
+    server.use(
+      http.delete('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+        return HttpResponse.json({ success: true });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    await act(async () => {
+      await result.current.deleteNote(DAY_ID, 77);
+    });
+
+    // Note should be removed from the store
+    const dayNotes = useTripStore.getState().dayNotes[String(DAY_ID)] || [];
+    expect(dayNotes.find((n) => n.id === 77)).toBeUndefined();
+  });
+
+  it('FE-HOOK-DAYNOTES-011: saveNote on API error shows toast', async () => {
+    const toastSpy = vi.fn();
+    window.__addToast = toastSpy;
+
+    server.use(
+      http.post('/api/trips/:id/days/:dayId/notes', () => {
+        return HttpResponse.json({ error: 'Server error' }, { status: 500 });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.setNoteUi({
+        [DAY_ID]: { mode: 'add', text: 'Test note', time: '', icon: 'FileText', sortOrder: 0 },
+      });
+    });
+
+    await act(async () => {
+      await result.current.saveNote(DAY_ID);
+    });
+
+    expect(toastSpy).toHaveBeenCalledWith(expect.any(String), 'error', undefined);
+    delete window.__addToast;
+  });
+
+  it('FE-HOOK-DAYNOTES-012: deleteNote on API error shows toast', async () => {
+    const toastSpy = vi.fn();
+    window.__addToast = toastSpy;
+
+    const note = buildDayNote({ id: 88, day_id: DAY_ID });
+    useTripStore.setState({ dayNotes: { [String(DAY_ID)]: [note] } });
+
+    server.use(
+      http.delete('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+        return HttpResponse.json({ error: 'Server error' }, { status: 500 });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    await act(async () => {
+      await result.current.deleteNote(DAY_ID, 88);
+    });
+
+    expect(toastSpy).toHaveBeenCalledWith(expect.any(String), 'error', undefined);
+    delete window.__addToast;
+  });
+
+  it('FE-HOOK-DAYNOTES-013: moveNote up calculates midpoint sort order', async () => {
+    let capturedBody: Record<string, unknown> = {};
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+        capturedBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const noteB = buildDayNote({ id: 2 });
+    const noteC = buildDayNote({ id: 3 });
+
+    // merged items with sortKeys 0, 2, 4
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 0, data: noteA },
+      { type: 'note' as const, sortKey: 2, data: noteB },
+      { type: 'note' as const, sortKey: 4, data: noteC },
+    ];
+
+    // Move noteC (idx=2) up → new order should be between idx=0 and idx=1 → (0+2)/2 = 1
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteC.id, 'up', getMergedItems);
+    });
+
+    expect(capturedBody.sort_order).toBe(1); // (sortKey[0] + sortKey[1]) / 2 = (0+2)/2
+  });
+
+  it('FE-HOOK-DAYNOTES-014: moveNote down calculates midpoint sort order', async () => {
+    let capturedBody: Record<string, unknown> = {};
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+        capturedBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const noteB = buildDayNote({ id: 2 });
+    const noteC = buildDayNote({ id: 3 });
+
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 0, data: noteA },
+      { type: 'note' as const, sortKey: 2, data: noteB },
+      { type: 'note' as const, sortKey: 4, data: noteC },
+    ];
+
+    // Move noteA (idx=0) down → new order between idx=1 and idx=2 → (2+4)/2 = 3
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+    });
+
+    expect(capturedBody.sort_order).toBe(3); // (sortKey[1] + sortKey[2]) / 2 = (2+4)/2
+  });
+
+  it('FE-HOOK-DAYNOTES-015: moveNote up at index 0 is a no-op', async () => {
+    const spy = vi.fn();
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+        spy();
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 0, data: noteA },
+    ];
+
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteA.id, 'up', getMergedItems);
+    });
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('FE-HOOK-DAYNOTES-016: moveNote down at last index is a no-op', async () => {
+    const spy = vi.fn();
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+        spy();
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 0, data: noteA },
+    ];
+
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+    });
+
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('FE-HOOK-DAYNOTES-017: moveNote down at last item uses sortKey + 1', async () => {
+    let capturedBody: Record<string, unknown> = {};
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+        capturedBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const noteB = buildDayNote({ id: 2 });
+
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 5, data: noteA },
+      { type: 'note' as const, sortKey: 10, data: noteB },
+    ];
+
+    // Move noteA (idx=0) down — only 2 items, so idx < length-1 is false after going down
+    // direction=down, idx=0, length=2, idx < length-2 is false (0 < 0), so newSortOrder = sortKey[1]+1 = 11
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+    });
+
+    expect(capturedBody.sort_order).toBe(11); // sortKey[idx+1] + 1 = 10 + 1
+  });
+
+  it('FE-HOOK-DAYNOTES-018: moveNote on error shows toast', async () => {
+    const toastSpy = vi.fn();
+    window.__addToast = toastSpy;
+
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', () => {
+        return HttpResponse.json({ error: 'Server error' }, { status: 500 });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const noteB = buildDayNote({ id: 2 });
+
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 0, data: noteA },
+      { type: 'note' as const, sortKey: 1, data: noteB },
+    ];
+
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteA.id, 'down', getMergedItems);
+    });
+
+    expect(toastSpy).toHaveBeenCalledWith(expect.any(String), 'error', undefined);
+    delete window.__addToast;
+  });
+
+  it('FE-HOOK-DAYNOTES-019: moveNote up with only 1 item before uses sortKey - 1', async () => {
+    let capturedBody: Record<string, unknown> = {};
+    server.use(
+      http.put('/api/trips/:id/days/:dayId/notes/:noteId', async ({ request }) => {
+        capturedBody = await request.json() as Record<string, unknown>;
+        return HttpResponse.json({ note: buildDayNote() });
+      })
+    );
+
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    const noteA = buildDayNote({ id: 1 });
+    const noteB = buildDayNote({ id: 2 });
+
+    const getMergedItems = () => [
+      { type: 'note' as const, sortKey: 5, data: noteA },
+      { type: 'note' as const, sortKey: 10, data: noteB },
+    ];
+
+    // Move noteB (idx=1) up — idx >= 2 is false, so newSortOrder = sortKey[idx-1] - 1 = 5-1 = 4
+    await act(async () => {
+      await result.current.moveNote(DAY_ID, noteB.id, 'up', getMergedItems);
+    });
+
+    expect(capturedBody.sort_order).toBe(4); // sortKey[0] - 1 = 5 - 1
+  });
+
+  it('FE-HOOK-DAYNOTES-020: openAddNote calls expandDay if provided', () => {
+    const expandDay = vi.fn();
+    const { result } = renderHook(() => useDayNotes(TRIP_ID), { wrapper });
+
+    act(() => {
+      result.current.openAddNote(DAY_ID, () => [], expandDay);
+    });
+
+    expect(expandDay).toHaveBeenCalledWith(DAY_ID);
+  });
+});
+
+// Type augment for window.__addToast — must mirror the canonical declaration
+// in components/shared/Toast.tsx (a divergent signature is a merge conflict).
+declare global {
+  interface Window {
+    __addToast?: (message: string, type?: 'success' | 'error' | 'warning' | 'info', duration?: number) => number;
+  }
+}

client/tests/integration/hooks/useInAppNotificationListener.test.ts

@@ -0,0 +1,226 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useInAppNotificationStore } from '../../../src/store/inAppNotificationStore';
+import { resetAllStores } from '../../helpers/store';
+
+// Capture the listener registered via addListener so we can simulate WS events
+let capturedListener: ((event: Record<string, unknown>) => void) | null = null;
+
+vi.mock('../../../src/api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+  joinTrip: vi.fn(),
+  leaveTrip: vi.fn(),
+  addListener: vi.fn((fn) => {
+    capturedListener = fn;
+  }),
+  removeListener: vi.fn(),
+}));
+
+const wsMock = await import('../../../src/api/websocket');
+
+// Import the hook after the mock is in place
+const { useInAppNotificationListener } = await import('../../../src/hooks/useInAppNotificationListener');
+
+describe('useInAppNotificationListener', () => {
+  beforeEach(() => {
+    capturedListener = null;
+    resetAllStores();
+    vi.clearAllMocks();
+    // Re-capture after clear
+    (wsMock.addListener as ReturnType<typeof vi.fn>).mockImplementation((fn) => {
+      capturedListener = fn;
+    });
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-001: on mount, addListener is called once', () => {
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+    expect(wsMock.addListener).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-002: on unmount, removeListener is called with the same function', () => {
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+
+    const registeredFn = (wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
+    unmount();
+
+    expect(wsMock.removeListener).toHaveBeenCalledWith(registeredFn);
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-003: notification:new event calls handleNewNotification on the store', () => {
+    const handleNew = vi.fn();
+    useInAppNotificationStore.setState({ handleNewNotification: handleNew } as any);
+
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+
+    expect(capturedListener).toBeTypeOf('function');
+
+    const notification = {
+      id: 1, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+      sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: '{}',
+      text_key: 'test_body', text_params: '{}', positive_text_key: null, negative_text_key: null,
+      response: null, navigate_text_key: null, navigate_target: null, is_read: 0,
+      created_at: '2025-01-01T00:00:00Z',
+    };
+
+    act(() => {
+      capturedListener!({ type: 'notification:new', notification });
+    });
+
+    expect(handleNew).toHaveBeenCalledWith(notification);
+    unmount();
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-004: notification:updated event calls handleUpdatedNotification on the store', () => {
+    const handleUpdated = vi.fn();
+    useInAppNotificationStore.setState({ handleUpdatedNotification: handleUpdated } as any);
+
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+
+    const notification = {
+      id: 5, type: 'simple', scope: 'user', target: 1, sender_id: null, sender_username: null,
+      sender_avatar: null, recipient_id: 2, title_key: 'updated', title_params: '{}',
+      text_key: 'updated_body', text_params: '{}', positive_text_key: null, negative_text_key: null,
+      response: 'positive', navigate_text_key: null, navigate_target: null, is_read: 1,
+      created_at: '2025-01-01T00:00:00Z',
+    };
+
+    act(() => {
+      capturedListener!({ type: 'notification:updated', notification });
+    });
+
+    expect(handleUpdated).toHaveBeenCalledWith(notification);
+    unmount();
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-005: unrelated event types are ignored', () => {
+    const handleNew = vi.fn();
+    const handleUpdated = vi.fn();
+    useInAppNotificationStore.setState({
+      handleNewNotification: handleNew,
+      handleUpdatedNotification: handleUpdated,
+    } as any);
+
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+
+    act(() => {
+      capturedListener!({ type: 'place:created', data: {} });
+    });
+
+    expect(handleNew).not.toHaveBeenCalled();
+    expect(handleUpdated).not.toHaveBeenCalled();
+    unmount();
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-006: notification:new actually updates the store unreadCount', () => {
+    renderHook(() => useInAppNotificationListener());
+
+    const initialCount = useInAppNotificationStore.getState().unreadCount;
+
+    act(() => {
+      capturedListener!({
+        type: 'notification:new',
+        notification: {
+          id: 99, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+          sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: {},
+          text_key: 'body', text_params: {}, positive_text_key: null, negative_text_key: null,
+          response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+          created_at: '2025-01-01T00:00:00Z',
+        },
+      });
+    });
+
+    expect(useInAppNotificationStore.getState().unreadCount).toBe(initialCount + 1);
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-007: notification:updated updates the notification in the store', () => {
+    // Seed a notification
+    useInAppNotificationStore.setState({
+      notifications: [{
+        id: 10, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+        sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: {},
+        text_key: 'body', text_params: {}, positive_text_key: null, negative_text_key: null,
+        response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+        created_at: '2025-01-01T00:00:00Z',
+      }],
+    });
+
+    renderHook(() => useInAppNotificationListener());
+
+    act(() => {
+      capturedListener!({
+        type: 'notification:updated',
+        notification: {
+          id: 10, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+          sender_avatar: null, recipient_id: 2, title_key: 'test', title_params: {},
+          text_key: 'body', text_params: {}, positive_text_key: null, negative_text_key: null,
+          response: 'positive', navigate_text_key: null, navigate_target: null, is_read: true,
+          created_at: '2025-01-01T00:00:00Z',
+        },
+      });
+    });
+
+    const updated = useInAppNotificationStore.getState().notifications.find((n) => n.id === 10);
+    expect(updated?.response).toBe('positive');
+    expect(updated?.is_read).toBe(true);
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-008: multiple events processed correctly in sequence', () => {
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+
+    const initial = useInAppNotificationStore.getState().unreadCount;
+
+    act(() => {
+      capturedListener!({
+        type: 'notification:new',
+        notification: {
+          id: 101, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+          sender_avatar: null, recipient_id: 2, title_key: 'k1', title_params: {},
+          text_key: 'b1', text_params: {}, positive_text_key: null, negative_text_key: null,
+          response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+          created_at: '2025-01-01T00:00:00Z',
+        },
+      });
+      capturedListener!({
+        type: 'notification:new',
+        notification: {
+          id: 102, type: 'simple', scope: 'trip', target: 1, sender_id: null, sender_username: null,
+          sender_avatar: null, recipient_id: 2, title_key: 'k2', title_params: {},
+          text_key: 'b2', text_params: {}, positive_text_key: null, negative_text_key: null,
+          response: null, navigate_text_key: null, navigate_target: null, is_read: false,
+          created_at: '2025-01-01T00:00:00Z',
+        },
+      });
+    });
+
+    expect(useInAppNotificationStore.getState().unreadCount).toBe(initial + 2);
+    unmount();
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-009: listener added on mount is the same one removed on unmount', () => {
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+
+    const addedFn = (wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
+    unmount();
+    const removedFn = (wsMock.removeListener as ReturnType<typeof vi.fn>).mock.calls[0][0];
+
+    expect(addedFn).toBe(removedFn);
+  });
+
+  it('FE-HOOK-NOTIFLISTENER-010: after unmount, listener no longer processes events', () => {
+    const handleNew = vi.fn();
+    useInAppNotificationStore.setState({ handleNewNotification: handleNew } as any);
+
+    const { unmount } = renderHook(() => useInAppNotificationListener());
+    unmount();
+
+    // capturedListener is captured but the component is unmounted
+    // The removeListener was called — the actual implementation would have unregistered it
+    // We verify removeListener was called (the cleanup ran)
+    expect(wsMock.removeListener).toHaveBeenCalled();
+  });
+});

client/tests/integration/hooks/useResizablePanels.test.ts

@@ -0,0 +1,168 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { fireEvent } from '@testing-library/react';
+import { useResizablePanels } from '../../../src/hooks/useResizablePanels';
+
+describe('useResizablePanels', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  it('FE-HOOK-PANELS-001: default leftWidth is 340 when localStorage is empty', () => {
+    const { result } = renderHook(() => useResizablePanels());
+    expect(result.current.leftWidth).toBe(340);
+  });
+
+  it('FE-HOOK-PANELS-002: default rightWidth is 300 when localStorage is empty', () => {
+    const { result } = renderHook(() => useResizablePanels());
+    expect(result.current.rightWidth).toBe(300);
+  });
+
+  it('FE-HOOK-PANELS-003: leftWidth loaded from localStorage when set', () => {
+    localStorage.setItem('sidebarLeftWidth', '400');
+    const { result } = renderHook(() => useResizablePanels());
+    expect(result.current.leftWidth).toBe(400);
+  });
+
+  it('FE-HOOK-PANELS-004: rightWidth loaded from localStorage when set', () => {
+    localStorage.setItem('sidebarRightWidth', '350');
+    const { result } = renderHook(() => useResizablePanels());
+    expect(result.current.rightWidth).toBe(350);
+  });
+
+  it('FE-HOOK-PANELS-005: startResizeLeft sets body cursor to col-resize', () => {
+    const { result } = renderHook(() => useResizablePanels());
+    act(() => {
+      result.current.startResizeLeft();
+    });
+    expect(document.body.style.cursor).toBe('col-resize');
+  });
+
+  it('FE-HOOK-PANELS-006: startResizeRight sets body cursor to col-resize', () => {
+    const { result } = renderHook(() => useResizablePanels());
+    act(() => {
+      result.current.startResizeRight();
+    });
+    expect(document.body.style.cursor).toBe('col-resize');
+  });
+
+  it('FE-HOOK-PANELS-007: mousedown → mousemove → mouseup updates leftWidth and persists to localStorage', async () => {
+    const { result } = renderHook(() => useResizablePanels());
+
+    act(() => {
+      result.current.startResizeLeft();
+    });
+
+    // mousemove with clientX=350 → w = max(200, min(520, 350-10)) = 340
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 350 });
+    });
+
+    expect(result.current.leftWidth).toBe(340);
+    expect(localStorage.getItem('sidebarLeftWidth')).toBe('340');
+
+    act(() => {
+      fireEvent.mouseUp(document);
+    });
+
+    expect(document.body.style.cursor).toBe('');
+  });
+
+  it('FE-HOOK-PANELS-008: mousedown → mousemove → mouseup updates rightWidth and persists to localStorage', () => {
+    // Set window.innerWidth for the right panel calculation
+    Object.defineProperty(window, 'innerWidth', { writable: true, configurable: true, value: 1200 });
+
+    const { result } = renderHook(() => useResizablePanels());
+
+    act(() => {
+      result.current.startResizeRight();
+    });
+
+    // mousemove with clientX=800 → w = max(200, min(520, 1200-800-10)) = max(200, min(520, 390)) = 390
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 800 });
+    });
+
+    expect(result.current.rightWidth).toBe(390);
+    expect(localStorage.getItem('sidebarRightWidth')).toBe('390');
+
+    act(() => {
+      fireEvent.mouseUp(document);
+    });
+
+    expect(document.body.style.cursor).toBe('');
+  });
+
+  it('FE-HOOK-PANELS-009: min width constraint (200) is enforced for left panel', () => {
+    const { result } = renderHook(() => useResizablePanels());
+
+    act(() => {
+      result.current.startResizeLeft();
+    });
+
+    // clientX=50 → w = max(200, min(520, 50-10)) = max(200, 40) = 200
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 50 });
+    });
+
+    expect(result.current.leftWidth).toBe(200);
+  });
+
+  it('FE-HOOK-PANELS-010: max width constraint (520) is enforced for left panel', () => {
+    const { result } = renderHook(() => useResizablePanels());
+
+    act(() => {
+      result.current.startResizeLeft();
+    });
+
+    // clientX=600 → w = max(200, min(520, 600-10)) = min(520, 590) = 520
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 600 });
+    });
+
+    expect(result.current.leftWidth).toBe(520);
+  });
+
+  it('FE-HOOK-PANELS-011: mousemove without prior startResize does nothing', () => {
+    const { result } = renderHook(() => useResizablePanels());
+
+    const initialLeft = result.current.leftWidth;
+    const initialRight = result.current.rightWidth;
+
+    act(() => {
+      fireEvent.mouseMove(document, { clientX: 400 });
+    });
+
+    expect(result.current.leftWidth).toBe(initialLeft);
+    expect(result.current.rightWidth).toBe(initialRight);
+  });
+
+  it('FE-HOOK-PANELS-012: body userSelect set to none during resize, cleared on mouseup', () => {
+    const { result } = renderHook(() => useResizablePanels());
+
+    act(() => {
+      result.current.startResizeLeft();
+    });
+
+    expect(document.body.style.userSelect).toBe('none');
+
+    act(() => {
+      fireEvent.mouseUp(document);
+    });
+
+    expect(document.body.style.userSelect).toBe('');
+  });
+
+  it('FE-HOOK-PANELS-013: leftCollapsed and rightCollapsed default to false', () => {
+    const { result } = renderHook(() => useResizablePanels());
+    expect(result.current.leftCollapsed).toBe(false);
+    expect(result.current.rightCollapsed).toBe(false);
+  });
+
+  it('FE-HOOK-PANELS-014: setLeftCollapsed and setRightCollapsed are exposed', () => {
+    const { result } = renderHook(() => useResizablePanels());
+    expect(result.current.setLeftCollapsed).toBeTypeOf('function');
+    expect(result.current.setRightCollapsed).toBeTypeOf('function');
+  });
+});

client/tests/integration/hooks/useRouteCalculation.test.ts

@@ -0,0 +1,294 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useRouteCalculation } from '../../../src/hooks/useRouteCalculation';
+import { useTripStore } from '../../../src/store/tripStore';
+import { buildAssignment, buildPlace } from '../../helpers/factories';
+import type { TripStoreState } from '../../../src/store/tripStore';
+import type { RouteSegment } from '../../../src/types';
+
+// Mock the RouteCalculator module to avoid real OSRM fetch calls
+vi.mock('../../../src/components/Map/RouteCalculator', () => ({
+  calculateRouteWithLegs: vi.fn(),
+  calculateRoute: vi.fn(),
+  optimizeRoute: vi.fn((waypoints: unknown[]) => waypoints),
+  generateGoogleMapsUrl: vi.fn(),
+}));
+
+const { calculateRouteWithLegs } = await import('../../../src/components/Map/RouteCalculator');
+
+function buildMockStore(assignments: Record<string, ReturnType<typeof buildAssignment>[]> = {}): Partial<TripStoreState> {
+  // Also populate the real Zustand store so updateRouteForDay (which reads from
+  // useTripStore.getState()) sees the same assignments as the hook's tripStore param.
+  // Reset reservations and days to empty so transport-split logic doesn't interfere.
+  useTripStore.setState({ assignments, reservations: [], days: [] } as any);
+  return { assignments } as Partial<TripStoreState>;
+}
+
+const MOCK_SEGMENTS: RouteSegment[] = [
+  {
+    mid: [48.5, 2.5],
+    from: [48.86, 2.35],
+    to: [48.21, 16.37],
+    distance: 343000,
+    duration: 12600,
+    distanceText: '343 km',
+    durationText: '3 h 30 min',
+    walkingText: '70 h',
+    drivingText: '3 h 30 min',
+  },
+];
+
+// Empty coordinates make the hook fall back to the straight-line geometry,
+// so the `route` assertions keep checking the raw waypoints while the legs
+// still flow through to `routeSegments`.
+const MOCK_ROUTE_WITH_LEGS = {
+  coordinates: [] as [number, number][],
+  distance: 343000,
+  duration: 12600,
+  legs: MOCK_SEGMENTS,
+};
+
+describe('useRouteCalculation', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    // Reset trip store assignments so each test starts clean
+    useTripStore.setState({ assignments: {} } as any);
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockResolvedValue(MOCK_ROUTE_WITH_LEGS);
+  });
+
+  it('FE-HOOK-ROUTE-001: with no selectedDayId, route is null', () => {
+    const store = buildMockStore({});
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, null)
+    );
+    expect(result.current.route).toBeNull();
+  });
+
+  it('FE-HOOK-ROUTE-002: with < 2 waypoints, route remains null', async () => {
+    const place = buildPlace({ lat: 48.8566, lng: 2.3522 });
+    const assignment = buildAssignment({ day_id: 5, order_index: 0, place });
+    const store = buildMockStore({ '5': [assignment] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+    expect(result.current.route).toBeNull();
+  });
+
+  it('FE-HOOK-ROUTE-003: with ≥ 2 geo-coded assignments, sets route coordinates', async () => {
+    const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
+    const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+    // route is an array of segments; no transport → single segment with all places
+    expect(result.current.route).toEqual([
+      [[p1.lat, p1.lng], [p2.lat, p2.lng]],
+    ]);
+  });
+
+  it('FE-HOOK-ROUTE-004: calls calculateRouteWithLegs and exposes the returned segments', async () => {
+    const p1 = buildPlace({ lat: 48.8566, lng: 2.3522 });
+    const p2 = buildPlace({ lat: 51.5074, lng: -0.1278 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+
+    expect(calculateRouteWithLegs).toHaveBeenCalled();
+    expect(result.current.routeSegments).toEqual(MOCK_SEGMENTS);
+  });
+
+  it('FE-HOOK-ROUTE-006: assignments are sorted by order_index before extracting waypoints', async () => {
+    const p1 = buildPlace({ lat: 10, lng: 10 });
+    const p2 = buildPlace({ lat: 20, lng: 20 });
+    // order_index 1 comes before 0 in the array, but should be sorted
+    const a1 = buildAssignment({ day_id: 5, order_index: 1, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 0, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+
+    // After sort: a2 (order_index=0) first, then a1 (order_index=1)
+    expect(result.current.route).toEqual([
+      [[p2.lat, p2.lng], [p1.lat, p1.lng]],
+    ]);
+  });
+
+  it('FE-HOOK-ROUTE-007: assignments with no lat/lng are filtered out', async () => {
+    const pValid = buildPlace({ lat: 48.8566, lng: 2.3522 });
+    const pNoGeo = buildPlace({ lat: null as any, lng: null as any });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: pNoGeo });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: pValid });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+    // Only 1 valid waypoint → route is null
+    expect(result.current.route).toBeNull();
+  });
+
+  it('FE-HOOK-ROUTE-008: AbortController.abort() is called when selectedDayId changes', async () => {
+
+    // Make calculateRouteWithLegs resolve slowly
+    let resolveSegments!: (val: typeof MOCK_ROUTE_WITH_LEGS) => void;
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockImplementationOnce(
+      (_waypoints: unknown[], options: { signal?: AbortSignal }) => {
+        return new Promise<typeof MOCK_ROUTE_WITH_LEGS>((resolve) => {
+          resolveSegments = resolve;
+          options?.signal?.addEventListener('abort', () => resolve(MOCK_ROUTE_WITH_LEGS));
+        });
+      }
+    );
+
+    const p1 = buildPlace({ lat: 10, lng: 10 });
+    const p2 = buildPlace({ lat: 20, lng: 20 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+
+    const store1 = buildMockStore({ '5': [a1, a2], '6': [a1, a2] });
+
+    const { rerender } = renderHook(
+      ({ dayId }: { dayId: number }) => useRouteCalculation(store1 as TripStoreState, dayId),
+      { initialProps: { dayId: 5 } }
+    );
+
+    // Change to day 6 — should abort in-flight request for day 5
+    await act(async () => {
+      rerender({ dayId: 6 });
+    });
+
+    // calculateRouteWithLegs should have been called at least once for day 5
+    // and once more for day 6
+    expect((calculateRouteWithLegs as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(1);
+
+    // Cleanup
+    resolveSegments?.(MOCK_ROUTE_WITH_LEGS);
+  });
+
+  it('FE-HOOK-ROUTE-009: AbortError from calculateSegments does not set routeSegments to []', async () => {
+
+    const abortError = new Error('Aborted');
+    abortError.name = 'AbortError';
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockRejectedValueOnce(abortError);
+
+    const p1 = buildPlace({ lat: 10, lng: 10 });
+    const p2 = buildPlace({ lat: 20, lng: 20 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+    // AbortError should be swallowed silently — segments remain empty
+    expect(result.current.routeSegments).toEqual([]);
+  });
+
+  it('FE-HOOK-ROUTE-010: non-AbortError from calculateSegments sets routeSegments to []', async () => {
+
+    (calculateRouteWithLegs as ReturnType<typeof vi.fn>).mockRejectedValueOnce(new Error('Network error'));
+
+    const p1 = buildPlace({ lat: 10, lng: 10 });
+    const p2 = buildPlace({ lat: 20, lng: 20 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+    expect(result.current.routeSegments).toEqual([]);
+  });
+
+  it('FE-HOOK-ROUTE-011: when selectedDayId is null, route and segments are cleared', async () => {
+    const p1 = buildPlace({ lat: 10, lng: 10 });
+    const p2 = buildPlace({ lat: 20, lng: 20 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+    const store = buildMockStore({ '5': [a1, a2] });
+
+    const { result, rerender } = renderHook(
+      ({ dayId }: { dayId: number | null }) => useRouteCalculation(store as TripStoreState, dayId),
+      { initialProps: { dayId: 5 as number | null } }
+    );
+
+    await act(async () => {});
+    // Some route may have been set for day 5
+
+    await act(async () => {
+      rerender({ dayId: null });
+    });
+
+    expect(result.current.route).toBeNull();
+    expect(result.current.routeSegments).toEqual([]);
+  });
+
+  it('FE-HOOK-ROUTE-012: setRoute and setRouteInfo are exposed', () => {
+    const store = buildMockStore({});
+    const { result } = renderHook(() =>
+      useRouteCalculation(store as TripStoreState, null)
+    );
+    expect(result.current.setRoute).toBeTypeOf('function');
+    expect(result.current.setRouteInfo).toBeTypeOf('function');
+  });
+
+  it('FE-HOOK-ROUTE-013: route recalculates when assignments change via store update', async () => {
+
+    const p1 = buildPlace({ lat: 10, lng: 10 });
+    const p2 = buildPlace({ lat: 20, lng: 20 });
+    const a1 = buildAssignment({ day_id: 5, order_index: 0, place: p1 });
+    const a2 = buildAssignment({ day_id: 5, order_index: 1, place: p2 });
+
+    let storeData = buildMockStore({ '5': [a1, a2] });
+
+    const { result, rerender } = renderHook(() =>
+      useRouteCalculation(storeData as TripStoreState, 5)
+    );
+
+    await act(async () => {});
+
+    expect(result.current.route).toEqual([
+      [[p1.lat, p1.lng], [p2.lat, p2.lng]],
+    ]);
+
+    // Now add a third place — update both the local store object and the Zustand store
+    const p3 = buildPlace({ lat: 30, lng: 30 });
+    const a3 = buildAssignment({ day_id: 5, order_index: 2, place: p3 });
+    storeData = buildMockStore({ '5': [a1, a2, a3] }); // also calls useTripStore.setState
+
+    await act(async () => {
+      rerender();
+    });
+
+    await act(async () => {});
+
+    expect(result.current.route).toEqual([
+      [[p1.lat, p1.lng], [p2.lat, p2.lng], [p3.lat, p3.lng]],
+    ]);
+  });
+});

client/tests/integration/hooks/useTripWebSocket.test.ts

@@ -0,0 +1,135 @@
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useTripWebSocket } from '../../../src/hooks/useTripWebSocket';
+import { useTripStore } from '../../../src/store/tripStore';
+
+vi.mock('../../../src/api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => 'mock-socket-id'),
+  joinTrip: vi.fn(),
+  leaveTrip: vi.fn(),
+  addListener: vi.fn(),
+  removeListener: vi.fn(),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+}));
+
+// Import the mocked module AFTER vi.mock
+const wsMock = await import('../../../src/api/websocket');
+
+describe('useTripWebSocket', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('FE-HOOK-WS-001: on mount, joinTrip(tripId) is called', () => {
+    const { unmount } = renderHook(() => useTripWebSocket(42));
+    expect(wsMock.joinTrip).toHaveBeenCalledWith(42);
+    unmount();
+  });
+
+  it('FE-HOOK-WS-002: on mount, addListener is called (registers event handlers)', () => {
+    const { unmount } = renderHook(() => useTripWebSocket(42));
+    // addListener is called twice: once for handleRemoteEvent, once for collabFileSync
+    expect(wsMock.addListener).toHaveBeenCalled();
+    expect((wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls.length).toBeGreaterThanOrEqual(1);
+    unmount();
+  });
+
+  it('FE-HOOK-WS-003: on unmount, leaveTrip(tripId) is called', () => {
+    const { unmount } = renderHook(() => useTripWebSocket(42));
+    unmount();
+    expect(wsMock.leaveTrip).toHaveBeenCalledWith(42);
+  });
+
+  it('FE-HOOK-WS-004: on unmount, removeListener is called', () => {
+    const { unmount } = renderHook(() => useTripWebSocket(42));
+    unmount();
+    expect(wsMock.removeListener).toHaveBeenCalled();
+  });
+
+  it('FE-HOOK-WS-005: when tripId changes, leaves old trip and joins new one', () => {
+    const { rerender, unmount } = renderHook(({ id }) => useTripWebSocket(id), {
+      initialProps: { id: 1 as number | undefined },
+    });
+    expect(wsMock.joinTrip).toHaveBeenCalledWith(1);
+
+    rerender({ id: 2 });
+
+    expect(wsMock.leaveTrip).toHaveBeenCalledWith(1);
+    expect(wsMock.joinTrip).toHaveBeenCalledWith(2);
+    unmount();
+  });
+
+  it('FE-HOOK-WS-006: one of the registered listeners is handleRemoteEvent from tripStore', () => {
+    const handler = useTripStore.getState().handleRemoteEvent;
+    renderHook(() => useTripWebSocket(42));
+
+    const addListenerCalls = (wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls;
+    const registeredFunctions = addListenerCalls.map((call) => call[0]);
+    expect(registeredFunctions).toContain(handler);
+  });
+
+  it('FE-HOOK-WS-006b: collab file sync listener is also registered (second addListener call)', () => {
+    const { unmount } = renderHook(() => useTripWebSocket(42));
+    // Two listeners registered: handleRemoteEvent + collabFileSync
+    expect((wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls.length).toBe(2);
+    unmount();
+  });
+
+  it('FE-HOOK-WS-006c: collab file sync listener reacts to collab:note:deleted events', () => {
+    const mockLoadFiles = vi.fn();
+    useTripStore.setState({ loadFiles: mockLoadFiles } as any);
+
+    renderHook(() => useTripWebSocket(42));
+
+    // The second addListener call is the collabFileSync function
+    const addListenerCalls = (wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls;
+    const collabFileSync = addListenerCalls[1]?.[0];
+    expect(collabFileSync).toBeTypeOf('function');
+
+    act(() => {
+      collabFileSync({ type: 'collab:note:deleted' });
+    });
+
+    expect(mockLoadFiles).toHaveBeenCalledWith(42);
+  });
+
+  it('FE-HOOK-WS-006d: collab file sync listener reacts to collab:note:updated events', () => {
+    const mockLoadFiles = vi.fn();
+    useTripStore.setState({ loadFiles: mockLoadFiles } as any);
+
+    renderHook(() => useTripWebSocket(42));
+
+    const addListenerCalls = (wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls;
+    const collabFileSync = addListenerCalls[1]?.[0];
+
+    act(() => {
+      collabFileSync({ type: 'collab:note:updated' });
+    });
+
+    expect(mockLoadFiles).toHaveBeenCalledWith(42);
+  });
+
+  it('FE-HOOK-WS-006e: collab file sync listener ignores unrelated event types', () => {
+    const mockLoadFiles = vi.fn();
+    useTripStore.setState({ loadFiles: mockLoadFiles } as any);
+
+    renderHook(() => useTripWebSocket(42));
+
+    const addListenerCalls = (wsMock.addListener as ReturnType<typeof vi.fn>).mock.calls;
+    const collabFileSync = addListenerCalls[1]?.[0];
+
+    act(() => {
+      collabFileSync({ type: 'place:created' });
+    });
+
+    expect(mockLoadFiles).not.toHaveBeenCalled();
+  });
+
+  it('FE-HOOK-WS-007: no joinTrip call when tripId is undefined', () => {
+    renderHook(() => useTripWebSocket(undefined));
+    expect(wsMock.joinTrip).not.toHaveBeenCalled();
+  });
+});

client/tests/setup.ts

@@ -0,0 +1,86 @@
+import '@testing-library/jest-dom/vitest';
+import 'fake-indexeddb/auto';
+import { cleanup } from '@testing-library/react';
+import { afterAll, afterEach, beforeAll, vi } from 'vitest';
+import { server } from './helpers/msw/server';
+
+// Mock the websocket module so stores don't try to open real connections
+vi.mock('../src/api/websocket', () => ({
+  connect: vi.fn(),
+  disconnect: vi.fn(),
+  getSocketId: vi.fn(() => null),
+  setRefetchCallback: vi.fn(),
+  setPreReconnectHook: vi.fn(),
+}));
+
+// MSW lifecycle
+beforeAll(() => server.listen({ onUnhandledRequest: 'warn' }));
+afterEach(() => {
+  server.resetHandlers();
+  cleanup();
+  localStorage.clear();
+  sessionStorage.clear();
+});
+afterAll(() => server.close());
+
+// ── jsdom stubs ────────────────────────────────────────────────────────────────
+
+// Force en-US locale for toLocaleDateString so tests are deterministic on
+// non-US dev machines (Windows-de-DE returns "Sonntag" instead of "Sunday").
+// Only affects calls without an explicit locale — callers that pass a locale
+// keep their behavior.
+const _origToLocaleDateString = Date.prototype.toLocaleDateString
+Date.prototype.toLocaleDateString = function (locales?: Intl.LocalesArgument, options?: Intl.DateTimeFormatOptions) {
+  return _origToLocaleDateString.call(this, locales ?? 'en-US', options)
+}
+
+// window.matchMedia — used by dark mode / responsive components
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: vi.fn().mockImplementation((query: string) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: vi.fn(),
+    removeListener: vi.fn(),
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+    dispatchEvent: vi.fn(),
+  })),
+});
+
+// IntersectionObserver — used by lazy loading
+// Must use a class or regular function (not arrow function) so 'new IntersectionObserver()' works
+class _MockIntersectionObserver {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+  root = null
+  rootMargin = ''
+  thresholds: ReadonlyArray<number> = []
+  takeRecords = vi.fn(() => [])
+  constructor(_callback: IntersectionObserverCallback, _options?: IntersectionObserverInit) {}
+}
+globalThis.IntersectionObserver = _MockIntersectionObserver as unknown as typeof IntersectionObserver;
+
+// ResizeObserver — used by resizable panels
+class _MockResizeObserver {
+  observe = vi.fn()
+  unobserve = vi.fn()
+  disconnect = vi.fn()
+  constructor(_callback: ResizeObserverCallback) {}
+}
+globalThis.ResizeObserver = _MockResizeObserver as unknown as typeof ResizeObserver;
+
+// URL.createObjectURL / revokeObjectURL — Node 22 URL.createObjectURL requires
+// a native node:buffer Blob; passing a jsdom Blob throws ERR_INVALID_ARG_TYPE.
+// Tests that need blob URLs should mock fetch to return node:buffer Blobs so
+// the real URL.createObjectURL works. For tests that only need the method to
+// exist without returning a real URL, stub it here as a vi.fn fallback.
+if (typeof URL.createObjectURL === 'undefined') {
+  Object.defineProperty(URL, 'createObjectURL', { writable: true, configurable: true, value: vi.fn(() => 'blob:mock') });
+  Object.defineProperty(URL, 'revokeObjectURL', { writable: true, configurable: true, value: vi.fn() });
+}
+
+// Element.prototype.scrollIntoView — jsdom doesn't implement it
+Element.prototype.scrollIntoView = vi.fn();

client/tests/unit/api/authUrl.test.ts

@@ -0,0 +1,237 @@
+/// <reference types="node" />
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../helpers/msw/server';
+import { getAuthUrl, fetchImageAsBlob, clearImageQueue } from '../../../src/api/authUrl';
+
+// Flush microtasks + a macro-task so async handlers finish
+const flushPromises = () => new Promise<void>(r => setTimeout(r, 10));
+
+beforeEach(() => {
+  clearImageQueue();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+});
+
+// ── getAuthUrl ─────────────────────────────────────────────────────────────────
+
+describe('getAuthUrl', () => {
+  describe('FE-COMP-AUTHURL-001: empty URL returns early', () => {
+    it('returns empty string without hitting the network', async () => {
+      const result = await getAuthUrl('', 'download');
+      expect(result).toBe('');
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-002: token appended with ?', () => {
+    it('appends token as first query param when URL has no query string', async () => {
+      server.use(
+        http.post('/api/auth/resource-token', () =>
+          HttpResponse.json({ token: 'abc123' })
+        )
+      );
+      const result = await getAuthUrl('/uploads/file.pdf', 'download');
+      expect(result).toBe('/uploads/file.pdf?token=abc123');
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-003: token appended with &', () => {
+    it('appends token as additional query param when URL already has a query string', async () => {
+      server.use(
+        http.post('/api/auth/resource-token', () =>
+          HttpResponse.json({ token: 'xyz' })
+        )
+      );
+      const result = await getAuthUrl('/uploads/file.pdf?size=lg', 'download');
+      expect(result).toBe('/uploads/file.pdf?size=lg&token=xyz');
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-004: non-ok API response returns original URL', () => {
+    it('returns original URL unchanged when resource-token returns 500', async () => {
+      server.use(
+        http.post('/api/auth/resource-token', () =>
+          HttpResponse.json({}, { status: 500 })
+        )
+      );
+      const result = await getAuthUrl('/uploads/file.pdf', 'download');
+      expect(result).toBe('/uploads/file.pdf');
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-005: fetch throws returns original URL', () => {
+    it('returns original URL when fetch throws a network error', async () => {
+      vi.spyOn(globalThis, 'fetch').mockRejectedValueOnce(
+        new TypeError('Network error')
+      );
+      const result = await getAuthUrl('/uploads/file.pdf', 'download');
+      expect(result).toBe('/uploads/file.pdf');
+    });
+  });
+});
+
+// ── fetchImageAsBlob ───────────────────────────────────────────────────────────
+
+describe('fetchImageAsBlob', () => {
+  describe('FE-COMP-AUTHURL-006: empty URL returns empty string', () => {
+    it('resolves to empty string without network call', async () => {
+      const result = await fetchImageAsBlob('');
+      expect(result).toBe('');
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-007: successful fetch returns blob object URL', () => {
+    it('resolves to a blob URL for a valid image response', async () => {
+      // Node 22 URL.createObjectURL requires a native node:buffer Blob, not a
+      // jsdom Blob — passing the wrong type throws ERR_INVALID_ARG_TYPE (caught,
+      // returns ''). Mock fetch directly with a Node Blob so the real
+      // URL.createObjectURL works without any mocking needed.
+      const { Blob: NodeBlob } = await import('node:buffer');
+      vi.spyOn(globalThis, 'fetch').mockResolvedValueOnce({
+        ok: true,
+        blob: () => Promise.resolve(new NodeBlob(['fake-image'], { type: 'image/jpeg' }) as unknown as Blob),
+      } as unknown as Response);
+      const result = await fetchImageAsBlob('/uploads/photo.jpg');
+      expect(result).toMatch(/^blob:/);
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-008: non-ok response resolves to empty string', () => {
+    it('resolves to empty string when image URL returns 404', async () => {
+      server.use(
+        http.get('/uploads/missing.jpg', () =>
+          HttpResponse.json({}, { status: 404 })
+        )
+      );
+      const result = await fetchImageAsBlob('/uploads/missing.jpg');
+      expect(result).toBe('');
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-009: fetch throws resolves to empty string', () => {
+    it('resolves to empty string when fetch rejects', async () => {
+      vi.spyOn(globalThis, 'fetch').mockRejectedValueOnce(
+        new TypeError('Network error')
+      );
+      const result = await fetchImageAsBlob('/uploads/error.jpg');
+      expect(result).toBe('');
+    });
+  });
+
+  // ── Concurrency tests use vi.spyOn(fetch) for synchronous barrier control ──
+  // When the spy mock runs, it executes synchronously up to its first `await`,
+  // so `resolvers.push(r)` happens synchronously inside fetchImageAsBlob(), giving
+  // us deterministic access to in-flight requests without needing flushPromises().
+
+  describe('FE-COMP-AUTHURL-010: concurrency cap at MAX_CONCURRENT=6', () => {
+    it('fires at most 6 requests simultaneously', async () => {
+      let concurrent = 0;
+      let maxConcurrent = 0;
+      const resolvers: Array<() => void> = [];
+
+      vi.spyOn(globalThis, 'fetch').mockImplementation(async () => {
+        concurrent++;
+        maxConcurrent = Math.max(maxConcurrent, concurrent);
+        await new Promise<void>(r => resolvers.push(r));
+        concurrent--;
+        return new Response(new Blob(['img'], { type: 'image/jpeg' }), { status: 200 });
+      });
+
+      const urls = Array.from({ length: 8 }, (_, i) => `/uploads/img${i}.jpg`);
+      const promises = urls.map(url => fetchImageAsBlob(url));
+
+      // After synchronous calls: 6 run()s called fetch() and pushed to resolvers,
+      // 2 are in the module queue
+      expect(resolvers.length).toBe(6);
+      expect(maxConcurrent).toBeLessThanOrEqual(6);
+
+      // Drain iteratively: each pass resolves current in-flight requests,
+      // then the next batch from the queue starts and pushes new resolvers
+      while (resolvers.length > 0) {
+        resolvers.splice(0).forEach(r => r());
+        await flushPromises();
+      }
+
+      await Promise.all(promises);
+      expect(maxConcurrent).toBeLessThanOrEqual(6);
+    });
+  });
+
+  describe('FE-COMP-AUTHURL-011: queued request runs after active slot frees', () => {
+    it('7th request eventually resolves once one of the 6 active slots is freed', async () => {
+      const resolvers: Array<() => void> = [];
+      const { Blob: NodeBlob } = await import('node:buffer');
+
+      vi.spyOn(globalThis, 'fetch').mockImplementation(async () => {
+        await new Promise<void>(r => resolvers.push(r));
+        return {
+          ok: true,
+          blob: () => Promise.resolve(new NodeBlob(['img'], { type: 'image/jpeg' }) as unknown as Blob),
+        } as unknown as Response;
+      });
+
+      const urls = Array.from({ length: 7 }, (_, i) => `/uploads/queue${i}.jpg`);
+      const promises = urls.map(url => fetchImageAsBlob(url));
+
+      // 6 in-flight, 1 queued
+      expect(resolvers.length).toBe(6);
+
+      // Resolve the 6 active requests
+      resolvers.splice(0).forEach(r => r());
+      await flushPromises();
+
+      // 7th should now have started
+      expect(resolvers.length).toBe(1);
+
+      // Resolve the 7th
+      resolvers.splice(0).forEach(r => r());
+
+      const results = await Promise.all(promises);
+      expect(results).toHaveLength(7);
+      results.forEach(r => expect(r).toMatch(/^blob:/));
+    });
+  });
+});
+
+// ── clearImageQueue ────────────────────────────────────────────────────────────
+
+describe('clearImageQueue', () => {
+  describe('FE-COMP-AUTHURL-012: clearImageQueue discards pending entries', () => {
+    it('removes queued items so they never execute after active slots drain', async () => {
+      const resolvers: Array<() => void> = [];
+      // Track completions via fetch mock instead of URL.createObjectURL spy —
+      // URL.createObjectURL is a Node built-in whose identity varies across
+      // Node versions, making it unreliable to spy on in jsdom tests on CI.
+      let completedFetches = 0;
+      const { Blob: NodeBlob } = await import('node:buffer');
+
+      vi.spyOn(globalThis, 'fetch').mockImplementation(async () => {
+        await new Promise<void>(r => resolvers.push(r));
+        completedFetches++;
+        return {
+          ok: true,
+          blob: () => Promise.resolve(new NodeBlob(['img'], { type: 'image/jpeg' }) as unknown as Blob),
+        } as unknown as Response;
+      });
+
+      const urls = Array.from({ length: 7 }, (_, i) => `/uploads/clear${i}.jpg`);
+      const promises = urls.map(url => fetchImageAsBlob(url));
+
+      // 6 in-flight, 1 queued
+      expect(resolvers.length).toBe(6);
+
+      // Discard the queued 7th request
+      clearImageQueue();
+
+      // Resolve the 6 active requests and let them drain
+      resolvers.splice(0).forEach(r => r());
+      await flushPromises();
+
+      // 6 active slots completed; queue was cleared so the 7th never ran
+      expect(completedFetches).toBe(6);
+
+      // First 6 promises resolved; 7th is orphaned (never resolves)
+      await Promise.all(promises.slice(0, 6));
+    });
+  });
+});

client/tests/unit/api/client.interceptor.test.ts

@@ -0,0 +1,71 @@
+// FE-CLIENT-INTERCEPTOR-001 to FE-CLIENT-INTERCEPTOR-012
+import { describe, it, expect } from 'vitest'
+import { isAuthPublicPath } from '../../../src/api/client'
+
+describe('FE-CLIENT-INTERCEPTOR: 401 AUTH_REQUIRED redirect allowlist', () => {
+  describe('exact-match public paths — no redirect', () => {
+    it('FE-CLIENT-INTERCEPTOR-001: /login', () => {
+      expect(isAuthPublicPath('/login')).toBe(true)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-002: /register', () => {
+      expect(isAuthPublicPath('/register')).toBe(true)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-003: /forgot-password', () => {
+      expect(isAuthPublicPath('/forgot-password')).toBe(true)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-004: /reset-password', () => {
+      expect(isAuthPublicPath('/reset-password')).toBe(true)
+    })
+  })
+
+  describe('prefix-match public paths — no redirect', () => {
+    it('FE-CLIENT-INTERCEPTOR-005: /shared/:token', () => {
+      expect(isAuthPublicPath('/shared/abc123token')).toBe(true)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-006: /public/journey/:token', () => {
+      expect(isAuthPublicPath('/public/journey/xyz789')).toBe(true)
+    })
+  })
+
+  describe('paths that matched via includes() before fix — must redirect', () => {
+    it('FE-CLIENT-INTERCEPTOR-007: /admin/login', () => {
+      expect(isAuthPublicPath('/admin/login')).toBe(false)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-008: /admin/register', () => {
+      expect(isAuthPublicPath('/admin/register')).toBe(false)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-009: /some-login-page', () => {
+      expect(isAuthPublicPath('/some-login-page')).toBe(false)
+    })
+  })
+
+  describe('paths that matched via loose startsWith before fix — must redirect', () => {
+    it('FE-CLIENT-INTERCEPTOR-010: /reset-password-extra', () => {
+      expect(isAuthPublicPath('/reset-password-extra')).toBe(false)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-011: /forgot-password-extra', () => {
+      expect(isAuthPublicPath('/forgot-password-extra')).toBe(false)
+    })
+  })
+
+  describe('private app paths — must redirect', () => {
+    it('FE-CLIENT-INTERCEPTOR-012: /dashboard', () => {
+      expect(isAuthPublicPath('/dashboard')).toBe(false)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-013: /trips/123', () => {
+      expect(isAuthPublicPath('/trips/123')).toBe(false)
+    })
+
+    it('FE-CLIENT-INTERCEPTOR-014: / (root)', () => {
+      expect(isAuthPublicPath('/')).toBe(false)
+    })
+  })
+})

client/tests/unit/db/offlineDb.test.ts

@@ -0,0 +1,370 @@
+/**
+ * offlineDb unit tests.
+ *
+ * Uses fake-indexeddb so no real browser IDB is needed.
+ * Each test gets a fresh database by using `use-fake-indexeddb` with Dexie.
+ */
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import 'fake-indexeddb/auto';
+import Dexie from 'dexie';
+
+// Re-import after fake-indexeddb is set up so Dexie picks up the shim.
+// We re-open a clean db in each test to isolate state.
+import {
+  offlineDb,
+  clearTripData,
+  clearAll,
+  upsertTrip,
+  upsertDays,
+  upsertPlaces,
+  upsertPackingItems,
+  upsertTodoItems,
+  upsertBudgetItems,
+  upsertReservations,
+  upsertTripFiles,
+  upsertSyncMeta,
+  reopenForUser,
+  reopenAnonymous,
+  deleteCurrentUserDb,
+  enforceBlobBudget,
+  type QueuedMutation,
+  type SyncMeta,
+  type BlobCacheEntry,
+} from '../../../src/db/offlineDb';
+import type { Trip, Day, Place, PackingItem, TodoItem, BudgetItem, Reservation, TripFile } from '../../../src/types';
+
+// ── Fixtures ──────────────────────────────────────────────────────────────────
+
+const makeTrip = (id = 1): Trip => ({
+  id,
+  user_id: 42,
+  title: `Trip ${id}`,
+  description: null,
+  start_date: '2026-07-01',
+  end_date: '2026-07-05',
+  currency: 'EUR',
+  cover_image: null,
+  is_archived: 0,
+  reminder_days: 3,
+  created_at: '2026-01-01T00:00:00Z',
+  updated_at: '2026-01-01T00:00:00Z',
+});
+
+const makeDay = (id: number, tripId = 1): Day => ({
+  id,
+  trip_id: tripId,
+  date: '2026-07-01',
+  title: null,
+  notes: null,
+  assignments: [],
+  notes_items: [],
+});
+
+const makePlace = (id: number, tripId = 1): Place => ({
+  id,
+  trip_id: tripId,
+  name: `Place ${id}`,
+  description: null,
+  notes: null,
+  lat: 48.8566,
+  lng: 2.3522,
+  address: null,
+  category_id: null,
+  price: null,
+  currency: null,
+  image_url: null,
+  google_place_id: null,
+  osm_id: null,
+  route_geometry: null,
+  place_time: null,
+  end_time: null,
+  duration_minutes: null,
+  transport_mode: null,
+  website: null,
+  phone: null,
+  created_at: '2026-01-01T00:00:00Z',
+});
+
+const makeBlob = (url: string, tripId = 1, bytes = 10, cachedAt = 1): BlobCacheEntry => ({
+  url,
+  tripId,
+  blob: new Blob(['x'.repeat(bytes)], { type: 'application/pdf' }),
+  bytes,
+  mime: 'application/pdf',
+  cachedAt,
+});
+
+// ── Lifecycle ─────────────────────────────────────────────────────────────────
+
+beforeEach(async () => {
+  // Ensure DB is open (fake-indexeddb resets between test files but not between tests).
+  if (!offlineDb.isOpen()) await offlineDb.open();
+  // Clear all tables before each test.
+  await clearAll();
+});
+
+afterEach(async () => {
+  if (!offlineDb.isOpen()) await offlineDb.open();
+});
+
+// ── Tests ─────────────────────────────────────────────────────────────────────
+
+describe('offlineDb — trips', () => {
+  it('stores and retrieves a trip via upsertTrip', async () => {
+    const trip = makeTrip(10);
+    await upsertTrip(trip);
+    const stored = await offlineDb.trips.get(10);
+    expect(stored).toBeDefined();
+    expect(stored!.title).toBe('Trip 10');
+  });
+
+  it('upsertTrip overwrites an existing trip (put semantics)', async () => {
+    await upsertTrip(makeTrip(1));
+    await upsertTrip({ ...makeTrip(1), title: 'Updated' });
+    const stored = await offlineDb.trips.get(1);
+    expect(stored!.title).toBe('Updated');
+  });
+});
+
+describe('offlineDb — days', () => {
+  it('stores days and retrieves by trip_id index', async () => {
+    await upsertDays([makeDay(1, 5), makeDay(2, 5), makeDay(3, 9)]);
+    const trip5Days = await offlineDb.days.where('trip_id').equals(5).toArray();
+    expect(trip5Days).toHaveLength(2);
+    expect(trip5Days.map(d => d.id)).toContain(1);
+    expect(trip5Days.map(d => d.id)).toContain(2);
+  });
+});
+
+describe('offlineDb — places', () => {
+  it('stores places and retrieves by trip_id', async () => {
+    await upsertPlaces([makePlace(10, 1), makePlace(11, 1), makePlace(12, 2)]);
+    const places = await offlineDb.places.where('trip_id').equals(1).toArray();
+    expect(places).toHaveLength(2);
+  });
+});
+
+describe('offlineDb — packing / todo / budget / reservations / files', () => {
+  it('upserts packing items', async () => {
+    const item: PackingItem = { id: 1, trip_id: 1, name: 'Passport', category: null, checked: 0, sort_order: 0, quantity: 1 };
+    await upsertPackingItems([item]);
+    expect(await offlineDb.packingItems.count()).toBe(1);
+  });
+
+  it('upserts todo items', async () => {
+    const item: TodoItem = {
+      id: 1, trip_id: 1, name: 'Book hotel', category: null, checked: 0,
+      sort_order: 0, due_date: null, description: null, assigned_user_id: null, priority: 0,
+    };
+    await upsertTodoItems([item]);
+    expect(await offlineDb.todoItems.count()).toBe(1);
+  });
+
+  it('upserts budget items', async () => {
+    const item: BudgetItem = {
+      id: 1, trip_id: 1, name: 'Flight', total_price: 500,
+      category: 'Transport', persons: 1, members: [], expense_date: null, sort_order: 0,
+    };
+    await upsertBudgetItems([item]);
+    expect(await offlineDb.budgetItems.count()).toBe(1);
+  });
+
+  it('upserts reservations', async () => {
+    const item: Reservation = {
+      id: 1, trip_id: 1, title: 'Hotel', type: 'hotel', status: 'confirmed',
+      reservation_time: null, confirmation_number: null, notes: null, created_at: '2026-01-01T00:00:00Z',
+    };
+    await upsertReservations([item]);
+    expect(await offlineDb.reservations.count()).toBe(1);
+  });
+
+  it('upserts trip files', async () => {
+    const file: TripFile = {
+      id: 1, trip_id: 1, filename: 'ticket.pdf', original_name: 'Ticket.pdf',
+      mime_type: 'application/pdf', url: '/api/trips/1/files/1/download', created_at: '2026-01-01T00:00:00Z',
+    };
+    await upsertTripFiles([file]);
+    expect(await offlineDb.tripFiles.count()).toBe(1);
+  });
+});
+
+describe('offlineDb — syncMeta', () => {
+  it('stores and retrieves syncMeta by tripId', async () => {
+    const meta: SyncMeta = {
+      tripId: 7,
+      lastSyncedAt: Date.now(),
+      status: 'idle',
+      tilesBbox: null,
+      filesCachedCount: 0,
+    };
+    await upsertSyncMeta(meta);
+    const stored = await offlineDb.syncMeta.get(7);
+    expect(stored).toBeDefined();
+    expect(stored!.status).toBe('idle');
+  });
+});
+
+describe('offlineDb — mutationQueue', () => {
+  it('stores queued mutations queryable by status', async () => {
+    const pending: QueuedMutation = {
+      id: 'uuid-1', tripId: 1, method: 'POST', url: '/api/trips/1/places',
+      body: { name: 'Eiffel Tower' }, createdAt: Date.now(),
+      status: 'pending', attempts: 0, lastError: null,
+    };
+    const failed: QueuedMutation = {
+      id: 'uuid-2', tripId: 1, method: 'PUT', url: '/api/trips/1/places/5',
+      body: { name: 'Updated' }, createdAt: Date.now(),
+      status: 'failed', attempts: 3, lastError: 'Network error',
+    };
+    await offlineDb.mutationQueue.bulkPut([pending, failed]);
+
+    const pendingRows = await offlineDb.mutationQueue.where('status').equals('pending').toArray();
+    expect(pendingRows).toHaveLength(1);
+    expect(pendingRows[0].id).toBe('uuid-1');
+
+    const failedRows = await offlineDb.mutationQueue.where('status').equals('failed').toArray();
+    expect(failedRows).toHaveLength(1);
+    expect(failedRows[0].lastError).toBe('Network error');
+  });
+});
+
+describe('offlineDb — blobCache', () => {
+  it('stores and retrieves a Blob entry', async () => {
+    const blob = new Blob(['%PDF-1.4 test'], { type: 'application/pdf' });
+    const entry: BlobCacheEntry = {
+      url: '/api/files/99/download',
+      tripId: 1,
+      blob,
+      bytes: blob.size,
+      mime: 'application/pdf',
+      cachedAt: Date.now(),
+    };
+    await offlineDb.blobCache.put(entry);
+
+    const stored = await offlineDb.blobCache.get('/api/files/99/download');
+    expect(stored).toBeDefined();
+    expect(stored!.mime).toBe('application/pdf');
+    expect(stored!.blob).toBeDefined();
+  });
+
+  it('queries blobs by tripId index', async () => {
+    await offlineDb.blobCache.bulkPut([
+      makeBlob('/api/files/1/download', 1),
+      makeBlob('/api/files/2/download', 1),
+      makeBlob('/api/files/3/download', 2),
+    ]);
+    const trip1 = await offlineDb.blobCache.where('tripId').equals(1).toArray();
+    expect(trip1).toHaveLength(2);
+  });
+});
+
+describe('offlineDb — enforceBlobBudget', () => {
+  it('evicts oldest-by-cachedAt entries past the count budget', async () => {
+    // 5 entries with strictly increasing cachedAt; cap to 3.
+    for (let i = 0; i < 5; i++) {
+      await offlineDb.blobCache.put(makeBlob(`/api/files/${i}/download`, 1, 10, i + 1));
+    }
+    await enforceBlobBudget(3, Infinity);
+
+    expect(await offlineDb.blobCache.count()).toBe(3);
+    // Oldest two (cachedAt 1 and 2) are gone; newest survive.
+    expect(await offlineDb.blobCache.get('/api/files/0/download')).toBeUndefined();
+    expect(await offlineDb.blobCache.get('/api/files/1/download')).toBeUndefined();
+    expect(await offlineDb.blobCache.get('/api/files/4/download')).toBeDefined();
+  });
+
+  it('evicts oldest entries past the byte budget', async () => {
+    // 3 entries of 100 bytes each; cap to 250 bytes → newest two (200) survive.
+    for (let i = 0; i < 3; i++) {
+      await offlineDb.blobCache.put(makeBlob(`/api/files/${i}/download`, 1, 100, i + 1));
+    }
+    await enforceBlobBudget(Infinity, 250);
+
+    expect(await offlineDb.blobCache.count()).toBe(2);
+    expect(await offlineDb.blobCache.get('/api/files/0/download')).toBeUndefined();
+  });
+
+  it('is a no-op when already within budget', async () => {
+    await offlineDb.blobCache.put(makeBlob('/api/files/1/download', 1));
+    await enforceBlobBudget(10, Infinity);
+    expect(await offlineDb.blobCache.count()).toBe(1);
+  });
+});
+
+describe('offlineDb — clearTripData', () => {
+  it('removes all data for the given trip across all tables', async () => {
+    await upsertTrip(makeTrip(1));
+    await upsertDays([makeDay(1, 1), makeDay(2, 1)]);
+    await upsertPlaces([makePlace(10, 1)]);
+    const item: PackingItem = { id: 5, trip_id: 1, name: 'Towel', category: null, checked: 0, sort_order: 0, quantity: 1 };
+    await upsertPackingItems([item]);
+
+    await offlineDb.blobCache.put(makeBlob('/api/files/1/download', 1));
+
+    // Also add data for a different trip — should NOT be removed
+    await upsertTrip(makeTrip(2));
+    await upsertDays([makeDay(99, 2)]);
+    await offlineDb.blobCache.put(makeBlob('/api/files/2/download', 2));
+
+    await clearTripData(1);
+
+    expect(await offlineDb.trips.get(1)).toBeUndefined();
+    expect(await offlineDb.days.where('trip_id').equals(1).count()).toBe(0);
+    expect(await offlineDb.places.where('trip_id').equals(1).count()).toBe(0);
+    expect(await offlineDb.packingItems.where('trip_id').equals(1).count()).toBe(0);
+    expect(await offlineDb.blobCache.where('tripId').equals(1).count()).toBe(0);
+
+    // Trip 2 intact
+    expect(await offlineDb.trips.get(2)).toBeDefined();
+    expect(await offlineDb.days.where('trip_id').equals(2).count()).toBe(1);
+    expect(await offlineDb.blobCache.get('/api/files/2/download')).toBeDefined();
+  });
+});
+
+describe('offlineDb — clearAll', () => {
+  it('empties all tables', async () => {
+    await upsertTrip(makeTrip(1));
+    await upsertDays([makeDay(1, 1), makeDay(2, 1)]);
+    await upsertPlaces([makePlace(10, 1)]);
+
+    await clearAll();
+
+    expect(await offlineDb.trips.count()).toBe(0);
+    expect(await offlineDb.days.count()).toBe(0);
+    expect(await offlineDb.places.count()).toBe(0);
+  });
+});
+
+describe('offlineDb — per-user scoping (B4)', () => {
+  afterEach(async () => {
+    // Leave the suite on the anonymous DB so other tests are unaffected.
+    await reopenAnonymous();
+  });
+
+  it('isolates one user\'s cached data from another', async () => {
+    await reopenForUser(1);
+    await upsertPlaces([makePlace(10, 1)]);
+    expect(await offlineDb.places.count()).toBe(1);
+
+    // Switching users must not expose user 1's rows.
+    await reopenForUser(2);
+    expect(await offlineDb.places.count()).toBe(0);
+
+    // Switching back restores user 1's data (different physical DB).
+    await reopenForUser(1);
+    expect(await offlineDb.places.get(10)).toBeDefined();
+  });
+
+  it('deleteCurrentUserDb wipes the user DB and returns to anonymous', async () => {
+    await reopenForUser(5);
+    await upsertPlaces([makePlace(20, 1)]);
+
+    await deleteCurrentUserDb();
+    // Now on the anonymous DB — no user data.
+    expect(await offlineDb.places.count()).toBe(0);
+
+    // Re-opening user 5 starts empty (DB was deleted, not just detached).
+    await reopenForUser(5);
+    expect(await offlineDb.places.count()).toBe(0);
+  });
+});

client/tests/unit/hooks/usePlaceSelection.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { usePlaceSelection } from '../../../src/hooks/usePlaceSelection';
+
+// FE-HOOK-SEL-001 onwards
+
+describe('usePlaceSelection', () => {
+  it('FE-HOOK-SEL-001: initially both IDs are null', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    expect(result.current.selectedPlaceId).toBeNull();
+    expect(result.current.selectedAssignmentId).toBeNull();
+  });
+
+  it('FE-HOOK-SEL-002: setSelectedPlaceId sets selectedPlaceId', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    act(() => { result.current.setSelectedPlaceId(42); });
+    expect(result.current.selectedPlaceId).toBe(42);
+  });
+
+  it('FE-HOOK-SEL-003: setSelectedPlaceId clears selectedAssignmentId', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    // First set an assignment via selectAssignment
+    act(() => { result.current.selectAssignment(99, 10); });
+    expect(result.current.selectedAssignmentId).toBe(99);
+
+    // Now change the place — assignment must be cleared
+    act(() => { result.current.setSelectedPlaceId(20); });
+    expect(result.current.selectedPlaceId).toBe(20);
+    expect(result.current.selectedAssignmentId).toBeNull();
+  });
+
+  it('FE-HOOK-SEL-004: selectAssignment sets both selectedAssignmentId and selectedPlaceId', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    act(() => { result.current.selectAssignment(7, 3); });
+    expect(result.current.selectedAssignmentId).toBe(7);
+    expect(result.current.selectedPlaceId).toBe(3);
+  });
+
+  it('FE-HOOK-SEL-005: setSelectedPlaceId(null) resets selectedPlaceId to null and clears assignment', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    act(() => { result.current.selectAssignment(5, 1); });
+    act(() => { result.current.setSelectedPlaceId(null); });
+    expect(result.current.selectedPlaceId).toBeNull();
+    expect(result.current.selectedAssignmentId).toBeNull();
+  });
+
+  it('FE-HOOK-SEL-006: selectAssignment(null, null) clears both IDs', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    act(() => { result.current.selectAssignment(5, 1); });
+    act(() => { result.current.selectAssignment(null, null); });
+    expect(result.current.selectedAssignmentId).toBeNull();
+    expect(result.current.selectedPlaceId).toBeNull();
+  });
+
+  it('FE-HOOK-SEL-007: selecting a different place after an assignment clears the assignment', () => {
+    const { result } = renderHook(() => usePlaceSelection());
+    act(() => { result.current.selectAssignment(11, 5); });
+    // Switch to a different place without going through selectAssignment
+    act(() => { result.current.setSelectedPlaceId(99); });
+    expect(result.current.selectedPlaceId).toBe(99);
+    expect(result.current.selectedAssignmentId).toBeNull();
+  });
+});

client/tests/unit/hooks/usePlannerHistory.test.ts

@@ -0,0 +1,92 @@
+import { describe, it, expect, vi } from 'vitest';
+import { renderHook, act } from '@testing-library/react';
+import { usePlannerHistory } from '../../../src/hooks/usePlannerHistory';
+
+// FE-HOOK-HIST-001 onwards
+
+describe('usePlannerHistory', () => {
+  it('FE-HOOK-HIST-001: starts with canUndo=false and lastActionLabel=null', () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.lastActionLabel).toBeNull();
+  });
+
+  it('FE-HOOK-HIST-002: pushing an entry sets canUndo=true and lastActionLabel', () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    act(() => {
+      result.current.pushUndo('Delete place', vi.fn());
+    });
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.lastActionLabel).toBe('Delete place');
+  });
+
+  it('FE-HOOK-HIST-003: calling undo fires the undo function and sets canUndo=false', async () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    const undoFn = vi.fn();
+    act(() => {
+      result.current.pushUndo('Add place', undoFn);
+    });
+    await act(async () => {
+      await result.current.undo();
+    });
+    expect(undoFn).toHaveBeenCalledOnce();
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it('FE-HOOK-HIST-004: multiple entries stack in LIFO order', () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    act(() => {
+      result.current.pushUndo('First', vi.fn());
+      result.current.pushUndo('Second', vi.fn());
+      result.current.pushUndo('Third', vi.fn());
+    });
+    expect(result.current.lastActionLabel).toBe('Third');
+  });
+
+  it('FE-HOOK-HIST-005: undo consumes entries in LIFO order', async () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    const fn1 = vi.fn();
+    const fn2 = vi.fn();
+    act(() => {
+      result.current.pushUndo('First', fn1);
+      result.current.pushUndo('Second', fn2);
+    });
+    await act(async () => { await result.current.undo(); });
+    expect(fn2).toHaveBeenCalledOnce();
+    expect(fn1).not.toHaveBeenCalled();
+    expect(result.current.lastActionLabel).toBe('First');
+
+    await act(async () => { await result.current.undo(); });
+    expect(fn1).toHaveBeenCalledOnce();
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it('FE-HOOK-HIST-006: caps history at 30 entries', () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    act(() => {
+      for (let i = 0; i < 31; i++) {
+        result.current.pushUndo(`Action ${i}`, vi.fn());
+      }
+    });
+    // After 31 pushes with cap=30, the oldest entry (Action 0) should be dropped.
+    // canUndo must be true and the stack should not exceed 30.
+    expect(result.current.canUndo).toBe(true);
+    expect(result.current.lastActionLabel).toBe('Action 30');
+  });
+
+  it('FE-HOOK-HIST-007: undo on an empty stack does not throw', async () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    await expect(
+      act(async () => { await result.current.undo(); })
+    ).resolves.not.toThrow();
+    expect(result.current.canUndo).toBe(false);
+  });
+
+  it('FE-HOOK-HIST-008: undo still sets canUndo=false after consuming the last entry', async () => {
+    const { result } = renderHook(() => usePlannerHistory());
+    act(() => { result.current.pushUndo('Only', vi.fn()); });
+    await act(async () => { await result.current.undo(); });
+    expect(result.current.canUndo).toBe(false);
+    expect(result.current.lastActionLabel).toBeNull();
+  });
+});

client/tests/unit/i18n/index.test.ts

@@ -0,0 +1,265 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { render } from '@testing-library/react'
+import React from 'react'
+import {
+  TranslationProvider,
+  useTranslation,
+  getLocaleForLanguage,
+  getIntlLanguage,
+  isRtlLanguage,
+  SUPPORTED_LANGUAGES,
+  detectBrowserLanguage,
+} from '../../../src/i18n'
+import { resetAllStores, seedStore } from '../../helpers/store'
+import { useSettingsStore } from '../../../src/store/settingsStore'
+import { buildSettings } from '../../helpers/factories'
+
+beforeEach(() => {
+  resetAllStores()
+  vi.clearAllMocks()
+})
+
+// ── FE-COMP-I18N-001: Barrel re-exports ───────────────────────────────────────
+
+describe('barrel re-exports', () => {
+  it('FE-COMP-I18N-001: all named exports are defined with expected types', () => {
+    expect(TranslationProvider).toBeDefined()
+    expect(typeof TranslationProvider).toBe('function')
+    expect(useTranslation).toBeDefined()
+    expect(typeof useTranslation).toBe('function')
+    expect(getLocaleForLanguage).toBeDefined()
+    expect(typeof getLocaleForLanguage).toBe('function')
+    expect(getIntlLanguage).toBeDefined()
+    expect(typeof getIntlLanguage).toBe('function')
+    expect(isRtlLanguage).toBeDefined()
+    expect(typeof isRtlLanguage).toBe('function')
+    expect(SUPPORTED_LANGUAGES).toBeDefined()
+    expect(Array.isArray(SUPPORTED_LANGUAGES)).toBe(true)
+  })
+})
+
+// ── FE-COMP-I18N-002/003: getLocaleForLanguage ────────────────────────────────
+
+describe('getLocaleForLanguage', () => {
+  it('FE-COMP-I18N-002: returns correct locale for known languages', () => {
+    expect(getLocaleForLanguage('en')).toBe('en-US')
+    expect(getLocaleForLanguage('de')).toBe('de-DE')
+    expect(getLocaleForLanguage('zh-TW')).toBe('zh-TW')
+    expect(getLocaleForLanguage('ar')).toBe('ar-SA')
+    expect(getLocaleForLanguage('br')).toBe('pt-BR')
+  })
+
+  it('FE-COMP-I18N-003: falls back to en-US for unknown language codes', () => {
+    expect(getLocaleForLanguage('xx')).toBe('en-US')
+  })
+})
+
+// ── FE-COMP-I18N-004/005/006: getIntlLanguage ─────────────────────────────────
+
+describe('getIntlLanguage', () => {
+  it('FE-COMP-I18N-004: returns language code for known supported languages', () => {
+    expect(getIntlLanguage('de')).toBe('de')
+    expect(getIntlLanguage('fr')).toBe('fr')
+    expect(getIntlLanguage('zh-TW')).toBe('zh-TW')
+  })
+
+  it('FE-COMP-I18N-005: maps br to pt-BR', () => {
+    expect(getIntlLanguage('br')).toBe('pt-BR')
+  })
+
+  it('FE-COMP-I18N-006: falls back to en for unknown codes', () => {
+    expect(getIntlLanguage('xx')).toBe('en')
+  })
+})
+
+// ── FE-COMP-I18N-007/008: isRtlLanguage ──────────────────────────────────────
+
+describe('isRtlLanguage', () => {
+  it('FE-COMP-I18N-007: returns true only for Arabic', () => {
+    expect(isRtlLanguage('ar')).toBe(true)
+  })
+
+  it('FE-COMP-I18N-008: returns false for all other supported languages', () => {
+    expect(isRtlLanguage('en')).toBe(false)
+    expect(isRtlLanguage('de')).toBe(false)
+    expect(isRtlLanguage('zh-TW')).toBe(false)
+  })
+})
+
+// ── FE-COMP-I18N-009: SUPPORTED_LANGUAGES ────────────────────────────────────
+
+describe('SUPPORTED_LANGUAGES', () => {
+  it('FE-COMP-I18N-009: contains expected entries with value/label shape', () => {
+    expect(Array.isArray(SUPPORTED_LANGUAGES)).toBe(true)
+    expect(SUPPORTED_LANGUAGES).toHaveLength(20)
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'en', label: 'English' }))
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'tr', label: 'Türkçe' }))
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ja', label: '日本語' }))
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ko', label: '한국어' }))
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'uk', label: 'Українська' }))
+    expect(SUPPORTED_LANGUAGES).toContainEqual(expect.objectContaining({ value: 'ar', label: 'العربية' }))
+  })
+})
+
+// ── FE-COMP-I18N-016 to 023: detectBrowserLanguage ───────────────────────────
+
+describe('detectBrowserLanguage', () => {
+  afterEach(() => {
+    Object.defineProperty(navigator, 'languages', { value: [], configurable: true })
+    Object.defineProperty(navigator, 'language', { value: '', configurable: true })
+  })
+
+  it('FE-COMP-I18N-016: exact match returns the matched code', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['de'], configurable: true })
+    expect(detectBrowserLanguage()).toBe('de')
+  })
+
+  it('FE-COMP-I18N-017: region-tagged exact match (zh-TW) returns zh-TW', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['zh-TW'], configurable: true })
+    expect(detectBrowserLanguage()).toBe('zh-TW')
+  })
+
+  it('FE-COMP-I18N-018: prefix match (de-AT → de)', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['de-AT'], configurable: true })
+    expect(detectBrowserLanguage()).toBe('de')
+  })
+
+  it('FE-COMP-I18N-019: pt-PT returns null (European Portuguese is a distinct language)', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['pt-PT'], configurable: true })
+    expect(detectBrowserLanguage()).toBeNull()
+  })
+
+  it('FE-COMP-I18N-020: pt-BR maps to br', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['pt-BR'], configurable: true })
+    expect(detectBrowserLanguage()).toBe('br')
+  })
+
+  it('FE-COMP-I18N-021: first-match-wins across multiple entries', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['xx-XX', 'fr'], configurable: true })
+    expect(detectBrowserLanguage()).toBe('fr')
+  })
+
+  it('FE-COMP-I18N-022: unknown language returns null', () => {
+    Object.defineProperty(navigator, 'languages', { value: ['xx'], configurable: true })
+    expect(detectBrowserLanguage()).toBeNull()
+  })
+
+  it('FE-COMP-I18N-023: falls back to navigator.language when navigator.languages is empty', () => {
+    Object.defineProperty(navigator, 'languages', { value: [], configurable: true })
+    Object.defineProperty(navigator, 'language', { value: 'es', configurable: true })
+    expect(detectBrowserLanguage()).toBe('es')
+  })
+})
+
+// ── FE-COMP-I18N-010 to 015: TranslationProvider + useTranslation ─────────────
+
+describe('TranslationProvider + useTranslation integration', () => {
+  it('FE-COMP-I18N-010: useTranslation returns t, language, and locale', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }) })
+
+    let result: { language: string; locale: string; tResult: string } | null = null
+
+    function TestComponent() {
+      const { t, language, locale } = useTranslation()
+      result = { language, locale, tResult: t('common.loading') }
+      return null
+    }
+
+    render(
+      React.createElement(TranslationProvider, null, React.createElement(TestComponent))
+    )
+
+    expect(result).not.toBeNull()
+    expect(result!.language).toBe('en')
+    expect(result!.locale).toBe('en-US')
+    expect(result!.tResult).toBeTruthy()
+    expect(typeof result!.tResult).toBe('string')
+  })
+
+  it('FE-COMP-I18N-011: t() with params substitutes {count} placeholders', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }) })
+
+    let translated = ''
+
+    function TestComponent() {
+      const { t } = useTranslation()
+      translated = t('dashboard.subtitle.trips', { count: 5, archived: 2 })
+      return null
+    }
+
+    render(
+      React.createElement(TranslationProvider, null, React.createElement(TestComponent))
+    )
+
+    expect(translated).toContain('5')
+    expect(translated).toContain('2')
+    expect(translated).not.toContain('{count}')
+    expect(translated).not.toContain('{archived}')
+  })
+
+  it('FE-COMP-I18N-012: TranslationProvider sets document.documentElement.lang', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'de' }) })
+
+    function TestComponent() {
+      useTranslation()
+      return null
+    }
+
+    render(
+      React.createElement(TranslationProvider, null, React.createElement(TestComponent))
+    )
+
+    expect(document.documentElement.lang).toBe('de')
+  })
+
+  it('FE-COMP-I18N-013: TranslationProvider sets dir=rtl for Arabic', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'ar' }) })
+
+    function TestComponent() {
+      useTranslation()
+      return null
+    }
+
+    render(
+      React.createElement(TranslationProvider, null, React.createElement(TestComponent))
+    )
+
+    expect(document.documentElement.dir).toBe('rtl')
+  })
+
+  it('FE-COMP-I18N-014: TranslationProvider sets dir=ltr for non-RTL language', () => {
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'en' }) })
+
+    function TestComponent() {
+      useTranslation()
+      return null
+    }
+
+    render(
+      React.createElement(TranslationProvider, null, React.createElement(TestComponent))
+    )
+
+    expect(document.documentElement.dir).toBe('ltr')
+  })
+
+  it('FE-COMP-I18N-015: t() falls back to English for unknown language', () => {
+    // Seed with a non-existent language to trigger fallback to English translations
+    seedStore(useSettingsStore, { settings: buildSettings({ language: 'xx' as any }) })
+
+    let translated = ''
+
+    function TestComponent() {
+      const { t } = useTranslation()
+      translated = t('common.loading')
+      return null
+    }
+
+    render(
+      React.createElement(TranslationProvider, null, React.createElement(TestComponent))
+    )
+
+    // Should fall back to English translation (non-empty, not the key itself if key exists in en)
+    expect(typeof translated).toBe('string')
+    expect(translated.length).toBeGreaterThan(0)
+  })
+})

client/tests/unit/i18n/parity.test.ts

@@ -0,0 +1,64 @@
+import { describe, it, expect } from 'vitest'
+import type { TranslationStrings } from '@trek/shared/i18n'
+import en from '@trek/shared/i18n/en'
+import de from '@trek/shared/i18n/de'
+import es from '@trek/shared/i18n/es'
+import fr from '@trek/shared/i18n/fr'
+import hu from '@trek/shared/i18n/hu'
+import itIT from '@trek/shared/i18n/it'
+import tr from '@trek/shared/i18n/tr'
+import ru from '@trek/shared/i18n/ru'
+import zh from '@trek/shared/i18n/zh'
+import zhTW from '@trek/shared/i18n/zh-TW'
+import nl from '@trek/shared/i18n/nl'
+import idID from '@trek/shared/i18n/id'
+import ar from '@trek/shared/i18n/ar'
+import br from '@trek/shared/i18n/br'
+import cs from '@trek/shared/i18n/cs'
+import pl from '@trek/shared/i18n/pl'
+import ja from '@trek/shared/i18n/ja'
+import ko from '@trek/shared/i18n/ko'
+import uk from '@trek/shared/i18n/uk'
+import gr from '@trek/shared/i18n/gr'
+
+// Runtime guard for the aggregated i18n bundles. `t()` resolves keys against the
+// active locale's flat dot-key map (see TranslationContext), so a key that is
+// present in en but missing in another locale silently falls back to English at
+// runtime — easy to ship, hard to notice. This test fails loudly when any locale
+// drifts away from the en key set so translators get an explicit, diagnostic list.
+//
+// The shared package also runs a file-level parity check (shared/scripts), but
+// that one only inspects per-domain source files; this one asserts the *merged*
+// export each locale actually serves to the app.
+
+const NON_EN_LOCALES: Record<string, TranslationStrings> = {
+  de, es, fr, hu, it: itIT, tr, ru, zh, 'zh-TW': zhTW, nl, id: idID,
+  ar, br, cs, pl, ja, ko, uk, gr,
+}
+
+const enKeys = new Set(Object.keys(en))
+
+describe('i18n locale key parity', () => {
+  it('covers every non-en locale', () => {
+    // Keep the assertion set in lockstep with the supported language list minus en.
+    expect(Object.keys(NON_EN_LOCALES)).toHaveLength(19)
+  })
+
+  for (const [locale, strings] of Object.entries(NON_EN_LOCALES)) {
+    it(`${locale} has the exact same key set as en`, () => {
+      const localeKeys = new Set(Object.keys(strings))
+      const missing = [...enKeys].filter((k) => !localeKeys.has(k))
+      const extra = [...localeKeys].filter((k) => !enKeys.has(k))
+
+      const diagnostic =
+        `Locale "${locale}" key drift vs en — ` +
+        `missing ${missing.length}` +
+        (missing.length ? ` (${missing.slice(0, 10).join(', ')}${missing.length > 10 ? ', …' : ''})` : '') +
+        `; extra ${extra.length}` +
+        (extra.length ? ` (${extra.slice(0, 10).join(', ')}${extra.length > 10 ? ', …' : ''})` : '')
+
+      expect(missing, diagnostic).toEqual([])
+      expect(extra, diagnostic).toEqual([])
+    })
+  }
+})

client/tests/unit/remoteEventHandler/assignments.test.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildDay, buildAssignment, buildPlace } from '../../helpers/factories';
+import type { Assignment } from '../../../src/types';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > assignments', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      days: [buildDay({ id: 10 }), buildDay({ id: 20 })],
+      assignments: {
+        '10': [buildAssignment({ id: 100, day_id: 10 })],
+        '20': [],
+      },
+    });
+  };
+
+  it('FE-WSEVT-ASSIGN-001: assignment:created adds assignment to correct day', () => {
+    seedData();
+    const newAssignment = buildAssignment({ id: 200, day_id: 20 });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: newAssignment });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['20']).toHaveLength(1);
+    expect(assignments['20'][0].id).toBe(200);
+    expect(assignments['10']).toHaveLength(1);
+  });
+
+  it('FE-WSEVT-ASSIGN-002: assignment:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildAssignment({ id: 100, day_id: 10 });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: duplicate });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(1);
+  });
+
+  it('FE-WSEVT-ASSIGN-003: assignment:created replaces temp (negative) ID assignment with same place_id', () => {
+    const place = buildPlace({ id: 55 });
+    const tempAssignment = buildAssignment({ id: -1, day_id: 10, place, place_id: place.id });
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      assignments: { '10': [tempAssignment] },
+    });
+    const realAssignment = buildAssignment({ id: 500, day_id: 10, place, place_id: place.id });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: realAssignment });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(1);
+    expect(assignments['10'][0].id).toBe(500);
+  });
+
+  it('FE-WSEVT-ASSIGN-003b: a second assignment of an already-present place is NOT suppressed (H11)', () => {
+    const place = buildPlace({ id: 55 });
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      // A committed (positive-id) assignment of place 55 already on the day.
+      assignments: { '10': [buildAssignment({ id: 100, day_id: 10, place, place_id: place.id })] },
+    });
+    // A legitimately new, distinct assignment of the same place arrives.
+    const second = buildAssignment({ id: 300, day_id: 10, place, place_id: place.id });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: second });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(2);
+    expect(assignments['10'].map(a => a.id).sort((x, y) => x - y)).toEqual([100, 300]);
+  });
+
+  it('FE-WSEVT-ASSIGN-003c: temp reconciliation replaces only the matching place, not a sibling temp (H11)', () => {
+    const place55 = buildPlace({ id: 55 });
+    const place66 = buildPlace({ id: 66 });
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      assignments: {
+        '10': [
+          buildAssignment({ id: -1, day_id: 10, place: place55, place_id: 55 }),
+          buildAssignment({ id: -2, day_id: 10, place: place66, place_id: 66 }),
+        ],
+      },
+    });
+    const real = buildAssignment({ id: 500, day_id: 10, place: place55, place_id: 55 });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: real });
+    const { assignments } = useTripStore.getState();
+    const ids = assignments['10'].map(a => a.id);
+    expect(assignments['10']).toHaveLength(2);
+    expect(ids).toContain(500);   // temp 55 reconciled to real
+    expect(ids).toContain(-2);    // sibling temp 66 untouched
+    expect(ids).not.toContain(-1);
+  });
+
+  it('FE-WSEVT-ASSIGN-003d: place-less assignments do not collapse onto each other (H11)', () => {
+    // Defensive: a malformed event lacking place data must not let the
+    // `place?.id === placeId` reconciliation match undefined === undefined.
+    const placeless = (id: number): Assignment =>
+      ({ ...buildAssignment({ id, day_id: 10 }), place: undefined, place_id: undefined } as unknown as Assignment);
+    useTripStore.setState({
+      days: [buildDay({ id: 10 })],
+      assignments: { '10': [placeless(-1)] },
+    });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:created', assignment: placeless(700) });
+    const { assignments } = useTripStore.getState();
+    // No placeId → no reconcile; both survive as distinct rows (no collapse).
+    expect(assignments['10']).toHaveLength(2);
+  });
+
+  it('FE-WSEVT-ASSIGN-004: assignment:updated merges updated data into correct day', () => {
+    seedData();
+    const updated = buildAssignment({ id: 100, day_id: 10, notes: 'Updated notes' });
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:updated', assignment: updated });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10'][0].notes).toBe('Updated notes');
+  });
+
+  it('FE-WSEVT-ASSIGN-005: assignment:deleted removes assignment from day', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'assignment:deleted', assignmentId: 100, dayId: 10 });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(0);
+  });
+
+  it('FE-WSEVT-ASSIGN-006: assignment:moved removes from old day and adds to new day', () => {
+    const movedAssignment = buildAssignment({ id: 100, day_id: 20 });
+    useTripStore.setState({
+      days: [buildDay({ id: 10 }), buildDay({ id: 20 })],
+      assignments: {
+        '10': [movedAssignment],
+        '20': [],
+      },
+    });
+    useTripStore.getState().handleRemoteEvent({
+      type: 'assignment:moved',
+      assignment: movedAssignment,
+      oldDayId: 10,
+      newDayId: 20,
+    });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(0);
+    expect(assignments['20']).toHaveLength(1);
+    expect(assignments['20'][0].id).toBe(100);
+  });
+
+  it('FE-WSEVT-ASSIGN-007: assignment:reordered updates order_index values', () => {
+    const a1 = buildAssignment({ id: 1, day_id: 10, order_index: 0 });
+    const a2 = buildAssignment({ id: 2, day_id: 10, order_index: 1 });
+    const a3 = buildAssignment({ id: 3, day_id: 10, order_index: 2 });
+    useTripStore.setState({
+      assignments: { '10': [a1, a2, a3] },
+    });
+    useTripStore.getState().handleRemoteEvent({
+      type: 'assignment:reordered',
+      dayId: 10,
+      orderedIds: [3, 1, 2],
+    });
+    const { assignments } = useTripStore.getState();
+    const reordered = assignments['10'];
+    const item3 = reordered.find(a => a.id === 3);
+    const item1 = reordered.find(a => a.id === 1);
+    const item2 = reordered.find(a => a.id === 2);
+    expect(item3?.order_index).toBe(0);
+    expect(item1?.order_index).toBe(1);
+    expect(item2?.order_index).toBe(2);
+  });
+});

client/tests/unit/remoteEventHandler/budget.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildBudgetItem } from '../../helpers/factories';
+import type { BudgetItemMember } from '../../../src/types';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > budget', () => {
+  const member1: BudgetItemMember = { user_id: 5, paid: 0, username: 'eve' };
+  const member2: BudgetItemMember = { user_id: 6, paid: 1, username: 'frank' };
+
+  const seedData = () => {
+    useTripStore.setState({
+      budgetItems: [
+        buildBudgetItem({ id: 1, persons: 1, members: [{ ...member1 }] }),
+        buildBudgetItem({ id: 2, persons: 2, members: [{ ...member2 }] }),
+      ],
+    });
+  };
+
+  it('FE-WSEVT-BUDGET-001: budget:created adds item to budgetItems', () => {
+    seedData();
+    const newItem = buildBudgetItem({ id: 99, name: 'Hotel' });
+    useTripStore.getState().handleRemoteEvent({ type: 'budget:created', item: newItem });
+    const { budgetItems } = useTripStore.getState();
+    expect(budgetItems).toHaveLength(3);
+    expect(budgetItems.find(i => i.id === 99)).toBeDefined();
+  });
+
+  it('FE-WSEVT-BUDGET-002: budget:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildBudgetItem({ id: 1, name: 'Duplicate' });
+    useTripStore.getState().handleRemoteEvent({ type: 'budget:created', item: duplicate });
+    const { budgetItems } = useTripStore.getState();
+    expect(budgetItems).toHaveLength(2);
+  });
+
+  it('FE-WSEVT-BUDGET-003: budget:updated replaces item in array', () => {
+    seedData();
+    const updated = buildBudgetItem({ id: 1, name: 'Updated Hotel', total_price: 500 });
+    useTripStore.getState().handleRemoteEvent({ type: 'budget:updated', item: updated });
+    const { budgetItems } = useTripStore.getState();
+    const item = budgetItems.find(i => i.id === 1);
+    expect(item?.name).toBe('Updated Hotel');
+    expect(item?.total_price).toBe(500);
+  });
+
+  it('FE-WSEVT-BUDGET-004: budget:deleted removes item by ID', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'budget:deleted', itemId: 1 });
+    const { budgetItems } = useTripStore.getState();
+    expect(budgetItems).toHaveLength(1);
+    expect(budgetItems.find(i => i.id === 1)).toBeUndefined();
+  });
+
+  it('FE-WSEVT-BUDGET-005: budget:members-updated replaces entire members array and persons count', () => {
+    seedData();
+    const newMembers: BudgetItemMember[] = [{ user_id: 7, paid: 1, username: 'grace' }, { user_id: 8, paid: 0, username: 'heidi' }];
+    useTripStore.getState().handleRemoteEvent({
+      type: 'budget:members-updated',
+      itemId: 1,
+      members: newMembers,
+      persons: 3,
+    });
+    const { budgetItems } = useTripStore.getState();
+    const item = budgetItems.find(i => i.id === 1);
+    expect(item?.members).toEqual(newMembers);
+    expect(item?.persons).toBe(3);
+    // Other item should be unchanged
+    const item2 = budgetItems.find(i => i.id === 2);
+    expect(item2?.members).toEqual([{ ...member2 }]);
+  });
+
+  it('FE-WSEVT-BUDGET-006: budget:member-paid-updated toggles specific member paid status', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({
+      type: 'budget:member-paid-updated',
+      itemId: 1,
+      userId: 5,
+      paid: true,
+    });
+    const { budgetItems } = useTripStore.getState();
+    const item = budgetItems.find(i => i.id === 1);
+    const m = item?.members?.find(m => m.user_id === 5);
+    expect(m?.paid).toBe(true);
+    // Other item members unchanged (member2 keeps its seeded paid value)
+    const item2 = budgetItems.find(i => i.id === 2);
+    expect(item2?.members?.[0].paid).toBe(1);
+  });
+});

client/tests/unit/remoteEventHandler/dayNotes.test.ts

@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildDayNote } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > dayNotes', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      dayNotes: {
+        '10': [buildDayNote({ id: 1, day_id: 10, text: 'Original' })],
+        '20': [],
+      },
+    });
+  };
+
+  it('FE-WSEVT-DAYNOTE-001: dayNote:created adds note to correct day', () => {
+    seedData();
+    const newNote = buildDayNote({ id: 99, day_id: 10, text: 'New note' });
+    useTripStore.getState().handleRemoteEvent({ type: 'dayNote:created', dayId: 10, note: newNote });
+    const { dayNotes } = useTripStore.getState();
+    expect(dayNotes['10']).toHaveLength(2);
+    expect(dayNotes['10'].find(n => n.id === 99)).toBeDefined();
+  });
+
+  it('FE-WSEVT-DAYNOTE-002: dayNote:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildDayNote({ id: 1, day_id: 10, text: 'Duplicate' });
+    useTripStore.getState().handleRemoteEvent({ type: 'dayNote:created', dayId: 10, note: duplicate });
+    const { dayNotes } = useTripStore.getState();
+    expect(dayNotes['10']).toHaveLength(1);
+    expect(dayNotes['10'][0].text).toBe('Original');
+  });
+
+  it('FE-WSEVT-DAYNOTE-003: dayNote:updated replaces note in correct day', () => {
+    seedData();
+    const updated = buildDayNote({ id: 1, day_id: 10, text: 'Updated text' });
+    useTripStore.getState().handleRemoteEvent({ type: 'dayNote:updated', dayId: 10, note: updated });
+    const { dayNotes } = useTripStore.getState();
+    expect(dayNotes['10'][0].text).toBe('Updated text');
+  });
+
+  it('FE-WSEVT-DAYNOTE-004: dayNote:deleted removes note from correct day', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'dayNote:deleted', dayId: 10, noteId: 1 });
+    const { dayNotes } = useTripStore.getState();
+    expect(dayNotes['10']).toHaveLength(0);
+  });
+
+  it('FE-WSEVT-DAYNOTE-005: operations on day 10 do not affect day 20', () => {
+    seedData();
+    const newNote = buildDayNote({ id: 50, day_id: 10, text: 'Day 10 note' });
+    useTripStore.getState().handleRemoteEvent({ type: 'dayNote:created', dayId: 10, note: newNote });
+    const { dayNotes } = useTripStore.getState();
+    expect(dayNotes['20']).toHaveLength(0);
+  });
+});

client/tests/unit/remoteEventHandler/days.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildDay, buildAssignment, buildDayNote } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > days', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      days: [buildDay({ id: 10 }), buildDay({ id: 20 })],
+      assignments: {
+        '10': [buildAssignment({ id: 100, day_id: 10 })],
+        '20': [],
+      },
+      dayNotes: {
+        '10': [buildDayNote({ id: 1, day_id: 10 })],
+        '20': [],
+      },
+    });
+  };
+
+  it('FE-WSEVT-DAY-001: day:created adds day to days array', () => {
+    seedData();
+    const newDay = buildDay({ id: 30 });
+    useTripStore.getState().handleRemoteEvent({ type: 'day:created', day: newDay });
+    const { days } = useTripStore.getState();
+    expect(days).toHaveLength(3);
+    expect(days.find(d => d.id === 30)).toBeDefined();
+  });
+
+  it('FE-WSEVT-DAY-002: day:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildDay({ id: 10 });
+    useTripStore.getState().handleRemoteEvent({ type: 'day:created', day: duplicate });
+    const { days } = useTripStore.getState();
+    expect(days).toHaveLength(2);
+  });
+
+  it('FE-WSEVT-DAY-003: day:updated replaces day in days array', () => {
+    seedData();
+    const updated = buildDay({ id: 10, title: 'New Title' });
+    useTripStore.getState().handleRemoteEvent({ type: 'day:updated', day: updated });
+    const { days } = useTripStore.getState();
+    const day10 = days.find(d => d.id === 10);
+    expect(day10?.title).toBe('New Title');
+  });
+
+  it('FE-WSEVT-DAY-004: day:deleted removes day from days array', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+    const { days } = useTripStore.getState();
+    expect(days).toHaveLength(1);
+    expect(days.find(d => d.id === 10)).toBeUndefined();
+  });
+
+  it('FE-WSEVT-DAY-005: day:deleted removes the assignments key for deleted day', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+    const { assignments } = useTripStore.getState();
+    expect('10' in assignments).toBe(false);
+  });
+
+  it('FE-WSEVT-DAY-006: day:deleted removes the dayNotes key for deleted day', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+    const { dayNotes } = useTripStore.getState();
+    expect('10' in dayNotes).toBe(false);
+  });
+
+  it('FE-WSEVT-DAY-007: day:deleted does not remove other days assignments/dayNotes', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'day:deleted', dayId: 10 });
+    const { assignments, dayNotes } = useTripStore.getState();
+    expect('20' in assignments).toBe(true);
+    expect('20' in dayNotes).toBe(true);
+  });
+});

client/tests/unit/remoteEventHandler/files.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildTripFile } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > files', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      files: [buildTripFile({ id: 1, original_name: 'document.pdf' })],
+    });
+  };
+
+  it('FE-WSEVT-FILE-001: file:created prepends new file to array', () => {
+    seedData();
+    const newFile = buildTripFile({ id: 99, original_name: 'photo.jpg' });
+    useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: newFile });
+    const { files } = useTripStore.getState();
+    expect(files).toHaveLength(2);
+    expect(files[0].id).toBe(99); // prepended
+  });
+
+  it('FE-WSEVT-FILE-002: file:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildTripFile({ id: 1, original_name: 'document_dup.pdf' });
+    useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: duplicate });
+    const { files } = useTripStore.getState();
+    expect(files).toHaveLength(1);
+    expect(files[0].original_name).toBe('document.pdf');
+  });
+
+  it('FE-WSEVT-FILE-003: file:updated replaces file in array', () => {
+    seedData();
+    const updated = buildTripFile({ id: 1, original_name: 'renamed.pdf' });
+    useTripStore.getState().handleRemoteEvent({ type: 'file:updated', file: updated });
+    const { files } = useTripStore.getState();
+    expect(files[0].original_name).toBe('renamed.pdf');
+  });
+
+  it('FE-WSEVT-FILE-004: file:deleted removes file by ID', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'file:deleted', fileId: 1 });
+    const { files } = useTripStore.getState();
+    expect(files).toHaveLength(0);
+  });
+
+  it('FE-WSEVT-FILE-005: file:created ordering — newest is first', () => {
+    seedData();
+    const f2 = buildTripFile({ id: 2, original_name: 'second.pdf' });
+    const f3 = buildTripFile({ id: 3, original_name: 'third.pdf' });
+    useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: f2 });
+    useTripStore.getState().handleRemoteEvent({ type: 'file:created', file: f3 });
+    const { files } = useTripStore.getState();
+    expect(files[0].id).toBe(3);
+    expect(files[1].id).toBe(2);
+    expect(files[2].id).toBe(1);
+  });
+});

client/tests/unit/remoteEventHandler/memories.test.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildPlace } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > memories', () => {
+  it('FE-WSEVT-MEM-001: memories:updated dispatches CustomEvent on window', () => {
+    const received: Event[] = [];
+    const handler = (e: Event) => received.push(e);
+    window.addEventListener('memories:updated', handler);
+    useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+    window.removeEventListener('memories:updated', handler);
+    expect(received).toHaveLength(1);
+  });
+
+  it('FE-WSEVT-MEM-002: memories:updated event type is correct', () => {
+    const received: Event[] = [];
+    const handler = (e: Event) => received.push(e);
+    window.addEventListener('memories:updated', handler);
+    useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+    window.removeEventListener('memories:updated', handler);
+    expect(received[0].type).toBe('memories:updated');
+  });
+
+  it('FE-WSEVT-MEM-003: memories:updated event detail contains the payload', () => {
+    const received: CustomEvent[] = [];
+    const handler = (e: Event) => received.push(e as CustomEvent);
+    window.addEventListener('memories:updated', handler);
+    const payload = { photos: [{ id: 1, url: '/photo.jpg' }] };
+    useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', ...payload });
+    window.removeEventListener('memories:updated', handler);
+    expect(received[0].detail).toMatchObject(payload);
+  });
+
+  it('FE-WSEVT-MEM-004: memories:updated does not modify store state', () => {
+    const places = [buildPlace({ id: 42, name: 'Eiffel Tower' })];
+    useTripStore.setState({ places });
+    useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+    const { places: afterPlaces } = useTripStore.getState();
+    expect(afterPlaces).toHaveLength(1);
+    expect(afterPlaces[0].id).toBe(42);
+  });
+
+  it('FE-WSEVT-MEM-005: memories:updated fires exactly once per event', () => {
+    const received: Event[] = [];
+    const handler = (e: Event) => received.push(e);
+    window.addEventListener('memories:updated', handler);
+    useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+    useTripStore.getState().handleRemoteEvent({ type: 'memories:updated', photos: [] });
+    window.removeEventListener('memories:updated', handler);
+    expect(received).toHaveLength(2);
+  });
+});

client/tests/unit/remoteEventHandler/packing.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildPackingItem } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > packing', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      packingItems: [buildPackingItem({ id: 1, name: 'Sunscreen' })],
+    });
+  };
+
+  it('FE-WSEVT-PACK-001: packing:created adds item to packingItems', () => {
+    seedData();
+    const newItem = buildPackingItem({ id: 99, name: 'Hat' });
+    useTripStore.getState().handleRemoteEvent({ type: 'packing:created', item: newItem });
+    const { packingItems } = useTripStore.getState();
+    expect(packingItems).toHaveLength(2);
+    expect(packingItems.find(i => i.id === 99)).toBeDefined();
+  });
+
+  it('FE-WSEVT-PACK-002: packing:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildPackingItem({ id: 1, name: 'Sunscreen Duplicate' });
+    useTripStore.getState().handleRemoteEvent({ type: 'packing:created', item: duplicate });
+    const { packingItems } = useTripStore.getState();
+    expect(packingItems).toHaveLength(1);
+    expect(packingItems[0].name).toBe('Sunscreen');
+  });
+
+  it('FE-WSEVT-PACK-003: packing:updated replaces item in array', () => {
+    seedData();
+    const updated = buildPackingItem({ id: 1, name: 'SPF 50 Sunscreen' });
+    useTripStore.getState().handleRemoteEvent({ type: 'packing:updated', item: updated });
+    const { packingItems } = useTripStore.getState();
+    expect(packingItems[0].name).toBe('SPF 50 Sunscreen');
+  });
+
+  it('FE-WSEVT-PACK-004: packing:deleted removes item by ID', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'packing:deleted', itemId: 1 });
+    const { packingItems } = useTripStore.getState();
+    expect(packingItems).toHaveLength(0);
+  });
+});

client/tests/unit/remoteEventHandler/places.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildPlace, buildAssignment } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > places', () => {
+  const seedData = () => {
+    const place = buildPlace({ id: 1, name: 'Original' });
+    const assignment = buildAssignment({ id: 100, place, day_id: 10 });
+    useTripStore.setState({
+      places: [place],
+      assignments: { '10': [assignment] },
+    });
+  };
+
+  it('FE-WSEVT-PLACE-001: place:created prepends new place to places array', () => {
+    seedData();
+    const newPlace = buildPlace({ id: 99, name: 'New Place' });
+    useTripStore.getState().handleRemoteEvent({ type: 'place:created', place: newPlace });
+    const { places } = useTripStore.getState();
+    expect(places[0].id).toBe(99);
+    expect(places).toHaveLength(2);
+  });
+
+  it('FE-WSEVT-PLACE-002: place:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildPlace({ id: 1, name: 'Duplicate' });
+    useTripStore.getState().handleRemoteEvent({ type: 'place:created', place: duplicate });
+    const { places } = useTripStore.getState();
+    expect(places).toHaveLength(1);
+    expect(places[0].name).toBe('Original');
+  });
+
+  it('FE-WSEVT-PLACE-003: place:updated updates place in places array', () => {
+    seedData();
+    const updated = buildPlace({ id: 1, name: 'Updated Name' });
+    useTripStore.getState().handleRemoteEvent({ type: 'place:updated', place: updated });
+    const { places } = useTripStore.getState();
+    expect(places[0].name).toBe('Updated Name');
+  });
+
+  it('FE-WSEVT-PLACE-004: place:updated cascades into assignments nested place', () => {
+    seedData();
+    const updated = buildPlace({ id: 1, name: 'Cascaded Update' });
+    useTripStore.getState().handleRemoteEvent({ type: 'place:updated', place: updated });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10'][0].place?.name).toBe('Cascaded Update');
+  });
+
+  it('FE-WSEVT-PLACE-005: place:deleted removes place from places array', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'place:deleted', placeId: 1 });
+    const { places } = useTripStore.getState();
+    expect(places).toHaveLength(0);
+  });
+
+  it('FE-WSEVT-PLACE-006: place:deleted cascades — assignments referencing that place are removed', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'place:deleted', placeId: 1 });
+    const { assignments } = useTripStore.getState();
+    expect(assignments['10']).toHaveLength(0);
+  });
+});

client/tests/unit/remoteEventHandler/reservations.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildReservation } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > reservations', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      reservations: [buildReservation({ id: 1, title: 'Hotel Paris' })],
+    });
+  };
+
+  it('FE-WSEVT-RESERV-001: reservation:created prepends new reservation to array', () => {
+    seedData();
+    const newRes = buildReservation({ id: 99, title: 'Flight' });
+    useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: newRes });
+    const { reservations } = useTripStore.getState();
+    expect(reservations).toHaveLength(2);
+    expect(reservations[0].id).toBe(99); // prepended, so first
+  });
+
+  it('FE-WSEVT-RESERV-002: reservation:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildReservation({ id: 1, title: 'Hotel Paris Dup' });
+    useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: duplicate });
+    const { reservations } = useTripStore.getState();
+    expect(reservations).toHaveLength(1);
+    expect(reservations[0].title).toBe('Hotel Paris');
+  });
+
+  it('FE-WSEVT-RESERV-003: reservation:updated replaces reservation in array', () => {
+    seedData();
+    const updated = buildReservation({ id: 1, title: 'Hotel Lyon' });
+    useTripStore.getState().handleRemoteEvent({ type: 'reservation:updated', reservation: updated });
+    const { reservations } = useTripStore.getState();
+    expect(reservations[0].title).toBe('Hotel Lyon');
+  });
+
+  it('FE-WSEVT-RESERV-004: reservation:deleted removes reservation by ID', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'reservation:deleted', reservationId: 1 });
+    const { reservations } = useTripStore.getState();
+    expect(reservations).toHaveLength(0);
+  });
+
+  it('FE-WSEVT-RESERV-005: reservation:created ordering — newest is first', () => {
+    seedData();
+    const r2 = buildReservation({ id: 2, title: 'Second' });
+    const r3 = buildReservation({ id: 3, title: 'Third' });
+    useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: r2 });
+    useTripStore.getState().handleRemoteEvent({ type: 'reservation:created', reservation: r3 });
+    const { reservations } = useTripStore.getState();
+    expect(reservations[0].id).toBe(3);
+    expect(reservations[1].id).toBe(2);
+    expect(reservations[2].id).toBe(1);
+  });
+});

client/tests/unit/remoteEventHandler/todo.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildTodoItem } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > todo', () => {
+  const seedData = () => {
+    useTripStore.setState({
+      todoItems: [buildTodoItem({ id: 1, name: 'Book flights' })],
+    });
+  };
+
+  it('FE-WSEVT-TODO-001: todo:created adds item to todoItems', () => {
+    seedData();
+    const newItem = buildTodoItem({ id: 99, name: 'Pack bags' });
+    useTripStore.getState().handleRemoteEvent({ type: 'todo:created', item: newItem });
+    const { todoItems } = useTripStore.getState();
+    expect(todoItems).toHaveLength(2);
+    expect(todoItems.find(i => i.id === 99)).toBeDefined();
+  });
+
+  it('FE-WSEVT-TODO-002: todo:created is idempotent — no duplicate if same ID', () => {
+    seedData();
+    const duplicate = buildTodoItem({ id: 1, name: 'Book flights duplicate' });
+    useTripStore.getState().handleRemoteEvent({ type: 'todo:created', item: duplicate });
+    const { todoItems } = useTripStore.getState();
+    expect(todoItems).toHaveLength(1);
+    expect(todoItems[0].name).toBe('Book flights');
+  });
+
+  it('FE-WSEVT-TODO-003: todo:updated replaces item in array', () => {
+    seedData();
+    const updated = buildTodoItem({ id: 1, name: 'Book round-trip flights' });
+    useTripStore.getState().handleRemoteEvent({ type: 'todo:updated', item: updated });
+    const { todoItems } = useTripStore.getState();
+    expect(todoItems[0].name).toBe('Book round-trip flights');
+  });
+
+  it('FE-WSEVT-TODO-004: todo:deleted removes item by ID', () => {
+    seedData();
+    useTripStore.getState().handleRemoteEvent({ type: 'todo:deleted', itemId: 1 });
+    const { todoItems } = useTripStore.getState();
+    expect(todoItems).toHaveLength(0);
+  });
+});

client/tests/unit/remoteEventHandler/trip.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { useTripStore } from '../../../src/store/tripStore';
+import { resetAllStores } from '../../helpers/store';
+import { buildTrip, buildPlace } from '../../helpers/factories';
+
+beforeEach(() => {
+  resetAllStores();
+});
+
+describe('remoteEventHandler > trip', () => {
+  it('FE-WSEVT-TRIP-001: trip:updated replaces trip in state', () => {
+    const originalTrip = buildTrip({ id: 1, title: 'Paris Trip' });
+    useTripStore.setState({ trip: originalTrip });
+    const updatedTrip = buildTrip({ id: 1, title: 'Paris & Lyon Trip' });
+    useTripStore.getState().handleRemoteEvent({ type: 'trip:updated', trip: updatedTrip });
+    const { trip } = useTripStore.getState();
+    expect(trip?.title).toBe('Paris & Lyon Trip');
+  });
+
+  it('FE-WSEVT-TRIP-002: trip:updated does not affect other state fields', () => {
+    const existingPlace = buildPlace({ id: 55, name: 'Eiffel Tower' });
+    useTripStore.setState({
+      trip: buildTrip({ id: 1, title: 'Original' }),
+      places: [existingPlace],
+    });
+    const updatedTrip = buildTrip({ id: 1, title: 'Updated' });
+    useTripStore.getState().handleRemoteEvent({ type: 'trip:updated', trip: updatedTrip });
+    const { places } = useTripStore.getState();
+    expect(places).toHaveLength(1);
+    expect(places[0].id).toBe(55);
+  });
+});