feat: recent activity card on Home and Retention card on Settings

web/src/views/__tests__/HomeActivityCard.spec.ts

@@ -0,0 +1,384 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import router from '@/router'
+import { initializeLocale, setLocale } from '@/i18n'
+import { useSessionStore } from '@/stores/session'
+import type { ActivityItem } from '@/lib/activity'
+import HomeView from '../HomeView.vue'
+import { anonymous, makeItem, target } from './activityFixtures'
+
+const ACTIVITY_ROUTE = 'GET /v1/activity?size=5'
+const ARTICLES_ROUTE = 'GET /v1/article/?format=html'
+
+type Handler = () => Response | Promise<Response>
+
+function response(status: number, body: unknown = null) {
+	return {
+		ok: status >= 200 && status < 300,
+		status,
+		headers: { get: () => null },
+		json: async () => body,
+	} as unknown as Response
+}
+
+function page(items: ActivityItem[], total = items.length) {
+	return response(200, { items, total, page: 1, size: 5 })
+}
+
+function recentItems(count: number) {
+	const created = new Date(Date.now() - 30_000).toISOString()
+	return Array.from({ length: count }, (_, index) =>
+		makeItem({ id: index + 1, created_at: created }),
+	)
+}
+
+const articles = [
+	{
+		id: 1,
+		title: 'First article',
+		body: '',
+		images: [],
+		is_online: true,
+		created_at: '2026-01-01T00:00:00Z',
+		updated_at: '2026-01-06T00:00:00Z',
+	},
+]
+
+let wrapper: Awaited<ReturnType<typeof mountHome>> | null = null
+let calls: string[] = []
+
+async function mountHome(role: 'owner' | 'admin' | undefined, handlers: Record<string, Handler>) {
+	setActivePinia(createPinia())
+	const session = useSessionStore()
+	session.session = { verified: true, username: 'marta', role }
+	session.status = 'ready'
+	calls = []
+	global.fetch = vi.fn((url: string, init?: RequestInit) => {
+		const key = `${init?.method ?? 'GET'} ${url}`
+		calls.push(key)
+		const handler = handlers[key]
+		if (!handler) {
+			return Promise.reject(new TypeError(`Unexpected fetch call: ${key}`))
+		}
+		return Promise.resolve(handler())
+	}) as unknown as typeof fetch
+	await router.push('/home')
+	const mounted = mount(HomeView, {
+		attachTo: document.body,
+		global: { plugins: [router, uiPlugin] },
+	})
+	wrapper = mounted
+	await flushPromises()
+	return mounted
+}
+
+function card() {
+	return wrapper!.find('[data-testid="recent-activity-card"]')
+}
+
+function rows() {
+	return wrapper!.findAll('[data-testid="recent-activity-row"]')
+}
+
+afterEach(async () => {
+	wrapper?.unmount()
+	wrapper = null
+	vi.useRealTimers()
+	localStorage.clear()
+	initializeLocale()
+	await router.push('/login')
+})
+
+describe('Home, owner or admin, the last five events with the actor name', () => {
+	it.each(['owner', 'admin'] as const)('shows five rows with names for %s', async (role) => {
+		await mountHome(role, {
+			[ACTIVITY_ROUTE]: () => page(recentItems(5)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		expect(card().find('h2').text()).toBe('Recent activity')
+		const viewAll = card().find('a[href="/activity"]')
+		expect(viewAll.text()).toBe('View all')
+		expect(rows()).toHaveLength(5)
+		const first = rows()[0]!
+		expect(first.find('[data-testid="activity-sentence"]').text()).toBe(
+			'Published the article Spring release',
+		)
+		expect(first.find('[data-testid="activity-sentence"] .font-semibold').text()).toBe(
+			'Spring release',
+		)
+		expect(first.find('[data-testid="recent-activity-meta"]').text()).toMatch(
+			/^Marta Alves · .+/,
+		)
+		expect(first.text()).toContain('MA')
+		expect(calls.filter((call) => call === ACTIVITY_ROUTE)).toHaveLength(1)
+		expect(calls.some((call) => call.includes('actor'))).toBe(false)
+		expect(calls.some((call) => call.includes('summary') || call.includes('export'))).toBe(
+			false,
+		)
+	})
+})
+
+describe('Home, regular user, own events only and no actor name', () => {
+	it.each([['editor' as const], [undefined]])('shows only the time for %s', async (role) => {
+		await mountHome(role as undefined, {
+			[ACTIVITY_ROUTE]: () => page(recentItems(3)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		expect(card().find('h2').text()).toBe('Your recent activity')
+		expect(rows()).toHaveLength(3)
+		const meta = rows()[0]!.find('[data-testid="recent-activity-meta"]').text()
+		expect(meta).not.toContain('Marta')
+		expect(meta).not.toContain('·')
+	})
+})
+
+describe('Home rows, failure and security markers', () => {
+	it('shows the badge and the shield as the outcome and security dictate', async () => {
+		const items = [
+			makeItem({ id: 1 }),
+			makeItem({ id: 2, outcome: 'failed' }),
+			makeItem({ id: 3, security: true }),
+			makeItem({ id: 4, outcome: 'failed', security: true }),
+		]
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(items),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const marks = rows().map((row) => ({
+			badge: row.text().includes('Failed'),
+			shield: row.find('[data-testid="recent-activity-security"]').exists(),
+		}))
+		expect(marks).toEqual([
+			{ badge: false, shield: false },
+			{ badge: true, shield: false },
+			{ badge: false, shield: true },
+			{ badge: true, shield: false },
+		])
+	})
+})
+
+describe('Home rows, unknown action, failed login and not interactive', () => {
+	it('renders an unknown action and a failed login without throwing', async () => {
+		const items = [
+			makeItem({ id: 1, action: 'article.archive', target: null }),
+			makeItem({
+				id: 2,
+				action: 'auth.login_failed',
+				category: 'auth',
+				actor: anonymous('alex@example.com'),
+				target: null,
+				outcome: 'failed',
+			}),
+		]
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(items),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		expect(rows()[0]!.text()).toContain('article.archive')
+		expect(rows()[1]!.text()).toContain('Failed login attempt for alex@example.com')
+		expect(rows()[1]!.text()).toContain('Failed')
+	})
+
+	it('has no button or link inside a row and keeps the route on a click', async () => {
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(recentItems(2)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const row = rows()[0]!
+		await row.trigger('click')
+
+		expect(row.find('a, button').exists()).toBe(false)
+		expect(router.currentRoute.value.path).toBe('/home')
+	})
+
+	it('clamps a long sentence to two lines', async () => {
+		const items = [makeItem({ id: 1, target: target('article', '8', 'T'.repeat(150)) })]
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(items),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		expect(rows()[0]!.find('.line-clamp-2').exists()).toBe(true)
+		expect(rows()[0]!.find('[data-testid="recent-activity-meta"]').classes()).toContain(
+			'truncate',
+		)
+	})
+})
+
+describe('Home card, skeleton rows only after 150 ms', () => {
+	it('draws nothing, then five skeletons, then the rows', async () => {
+		vi.useFakeTimers()
+		let resolve: (() => void) | null = null
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () =>
+				new Promise((done) => {
+					resolve = () => done(page(recentItems(5)))
+				}),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		expect(card().attributes('aria-busy')).toBeUndefined()
+		expect(wrapper!.findAll('[data-testid="recent-activity-skeleton"]')).toHaveLength(0)
+
+		await vi.advanceTimersByTimeAsync(150)
+
+		expect(card().attributes('aria-busy')).toBe('true')
+		expect(wrapper!.findAll('[data-testid="recent-activity-skeleton"]')).toHaveLength(5)
+
+		resolve?.()
+		await vi.advanceTimersByTimeAsync(0)
+		await flushPromises()
+
+		expect(card().attributes('aria-busy')).toBeUndefined()
+		expect(rows()).toHaveLength(5)
+	})
+
+	it('never shows a skeleton for a fast response', async () => {
+		vi.useFakeTimers()
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(recentItems(5)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+		await vi.advanceTimersByTimeAsync(200)
+
+		expect(wrapper!.findAll('[data-testid="recent-activity-skeleton"]')).toHaveLength(0)
+		expect(rows()).toHaveLength(5)
+	})
+})
+
+describe('Home card, error shows a retryable alert that leaves the page alone', () => {
+	it.each([
+		['500', () => response(500)],
+		['403', () => response(403)],
+		['network', () => Promise.reject(new TypeError('offline'))],
+	])('shows the alert on %s and recovers on Try again', async (_name, failure) => {
+		let attempt = 0
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => {
+				attempt += 1
+				return attempt === 1 ? (failure() as Response) : page(recentItems(2))
+			},
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const alert = card().find('[role="alert"]')
+		expect(alert.text()).toContain("Couldn't load recent activity")
+		expect(wrapper!.find('[data-testid="stat-tile"]').exists()).toBe(true)
+		expect(wrapper!.text()).toContain('Connect your website')
+
+		const retry = alert.findAll('button').find((button) => button.text() === 'Try again')
+		await retry!.trigger('click')
+		await flushPromises()
+
+		expect(calls.filter((call) => call === ACTIVITY_ROUTE)).toHaveLength(2)
+		expect(card().find('[role="alert"]').exists()).toBe(false)
+		expect(rows()).toHaveLength(2)
+	})
+})
+
+describe('Home card, empty when there are no events yet', () => {
+	it.each([
+		['owner' as const, 'Actions on your site will appear here.'],
+		[undefined, 'Your actions will appear here.'],
+	])('says so for %s', async (role, text) => {
+		await mountHome(role as 'owner', {
+			[ACTIVITY_ROUTE]: () => page([], 0),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const empty = card().find('[data-testid="recent-activity-empty"]')
+		expect(empty.text()).toContain('No activity yet')
+		expect(empty.text()).toContain(text)
+		expect(card().find('a[href="/activity"]').text()).toBe('View all')
+	})
+})
+
+describe('Home card and article list are independent', () => {
+	it('shows the articles alert and the activity rows together', async () => {
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(recentItems(5)),
+			[ARTICLES_ROUTE]: () => response(500),
+		})
+
+		expect(wrapper!.text()).toContain("Couldn't load your articles")
+		expect(rows()).toHaveLength(5)
+	})
+
+	it('shows the articles empty state and the card error together', async () => {
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => response(500),
+			[ARTICLES_ROUTE]: () => response(200, []),
+		})
+
+		expect(wrapper!.text()).toContain('Write your first article')
+		expect(card().text()).toContain("Couldn't load recent activity")
+	})
+})
+
+describe('Home layout is two columns from lg and stacked below', () => {
+	it('uses the lg two-column grid with the 420 px column and no max-width cap', async () => {
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(recentItems(1)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const grid = card().element.parentElement!
+		expect(grid.className).toContain('lg:grid-cols-[minmax(0,1fr)_--spacing(105)]')
+		expect(grid.className).toContain('lg:items-start')
+		expect(grid.className).toContain('gap-4')
+		const capped = [grid, grid.parentElement!].some((element) =>
+			/(^|\s)max-w-/.test(element.className),
+		)
+		expect(capped).toBe(false)
+		expect(card().classes()).toContain('lg:order-2')
+	})
+})
+
+describe('Home card, the request URL', () => {
+	it('asks for exactly /v1/activity?size=5 and nothing else', async () => {
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(recentItems(5)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const activityCalls = calls.filter((call) => call.includes('/v1/activity'))
+		expect(activityCalls).toEqual(['GET /v1/activity?size=5'])
+	})
+})
+
+describe('Home card, "View all" opens the activity page', () => {
+	it('navigates to /activity', async () => {
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page(recentItems(1)),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		const push = vi.spyOn(router, 'push')
+
+		await card().find('a[href="/activity"]').trigger('click')
+
+		expect(push).toHaveBeenCalledWith('/activity')
+		push.mockRestore()
+	})
+})
+
+describe('Home card, the French interface', () => {
+	it('titles and words the card in French', async () => {
+		setLocale('fr')
+		await mountHome('owner', {
+			[ACTIVITY_ROUTE]: () => page([], 0),
+			[ARTICLES_ROUTE]: () => response(200, articles),
+		})
+
+		expect(card().find('h2').text()).toBe('Activité récente')
+		expect(card().text()).toContain('Tout voir')
+		expect(card().text()).toContain('Aucune activité pour le moment')
+	})
+})

web/src/views/__tests__/HomeView.spec.ts

@@ -107,7 +107,11 @@ async function mountHome(handlers: Record<string, () => Response | Promise<Respo
 	const session = useSessionStore()
 	session.session = { verified: true, username: 'marta' }
 	session.status = 'ready'
-	global.fetch = fetchRouter(handlers) as unknown as typeof fetch
+	global.fetch = fetchRouter({
+		'GET /v1/activity?size=5': () =>
+			Promise.resolve(mockResponse(200, { items: [], total: 0, page: 1, size: 5 })),
+		...handlers,
+	}) as unknown as typeof fetch
 	await router.push('/home')
 	const wrapper = mount(HomeView, {
 		attachTo: document.body,

web/src/views/__tests__/SettingsRetention.spec.ts

@@ -0,0 +1,478 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, flushPromises, type VueWrapper } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import uiPlugin from '@nuxt/ui/vue-plugin'
+import USelectMenu from '@nuxt/ui/components/SelectMenu.vue'
+import router from '@/router'
+import { initializeLocale, setLocale } from '@/i18n'
+import { ApiError, NetworkError, useApi } from '@/composables/useApi'
+import type { WorkspaceSettings } from '@/composables/useSettings'
+import { useSessionStore } from '@/stores/session'
+import SettingsView from '../SettingsView.vue'
+import { DEFAULT_PURGE_SETTINGS, PURGE_SETTINGS_PATH } from './updateTestKit'
+
+vi.mock('@/composables/useApi', async (importOriginal) => {
+	const actual = await importOriginal<typeof import('@/composables/useApi')>()
+	return {
+		...actual,
+		useApi: vi.fn(),
+	}
+})
+
+const SETTINGS_PATH = '/v1/settings/'
+const SAVED_VISIBLE_MS = 2000
+
+function at(day: number, hour: number) {
+	return new Date(2026, 9, day, hour, 0).toISOString()
+}
+
+function settings(overrides: Partial<WorkspaceSettings> = {}): WorkspaceSettings {
+	return {
+		version: 'v2.2.0-beta',
+		activity_retention_days: 90,
+		activity_last_cleanup_at: at(6, 3),
+		activity_last_cleanup_removed: 142,
+		activity_next_cleanup_at: at(7, 3),
+		...overrides,
+	}
+}
+
+let requestMock: ReturnType<typeof vi.fn>
+let getMeMock: ReturnType<typeof vi.fn>
+let wrapper: VueWrapper | null = null
+
+function deferred<T>() {
+	let resolve!: (value: T) => void
+	let reject!: (reason: unknown) => void
+	const promise = new Promise<T>((res, rej) => {
+		resolve = res
+		reject = rej
+	})
+	return { promise, resolve, reject }
+}
+
+async function mountPage(
+	role: 'owner' | 'admin' | 'editor' | undefined,
+	load: () => Promise<unknown>,
+	patch: (body: unknown) => Promise<unknown> = () => Promise.resolve(settings()),
+) {
+	setActivePinia(createPinia())
+	const session = useSessionStore()
+	session.session = { verified: true, username: 'marta', id: 1, role }
+	session.status = 'ready'
+	requestMock = vi.fn((path: string, init?: RequestInit) => {
+		if (path === SETTINGS_PATH && init?.method === 'PATCH') {
+			return patch(JSON.parse(init.body as string))
+		}
+		if (path === SETTINGS_PATH) {
+			return load()
+		}
+		if (path === PURGE_SETTINGS_PATH) {
+			return Promise.resolve(DEFAULT_PURGE_SETTINGS)
+		}
+		throw new Error(`Unexpected request: ${path}`)
+	})
+	getMeMock = vi.fn().mockResolvedValue({ verified: true, username: 'marta', id: 1, role })
+	vi.mocked(useApi).mockReturnValue({ getMe: getMeMock, request: requestMock })
+	await router.push('/settings')
+	wrapper = mount(SettingsView, {
+		attachTo: document.body,
+		global: { plugins: [router, uiPlugin] },
+	})
+	await flushPromises()
+	return wrapper
+}
+
+function retention() {
+	return document.body.querySelector('[data-testid="retention-card"]')
+}
+
+function text() {
+	return retention()?.textContent?.replace(/\s+/g, ' ') ?? ''
+}
+
+function line(testId: string) {
+	return document.body.querySelector(`[data-testid="${testId}"]`)?.textContent?.trim()
+}
+
+function patches() {
+	return requestMock.mock.calls.filter(([, init]) => init?.method === 'PATCH')
+}
+
+function settingsGets() {
+	return requestMock.mock.calls.filter(
+		([path, init]) => path === SETTINGS_PATH && init?.method !== 'PATCH',
+	)
+}
+
+function button(label: string) {
+	return Array.from(document.body.querySelectorAll('button')).find(
+		(candidate) => candidate.textContent?.trim() === label,
+	)
+}
+
+async function choose(days: number) {
+	wrapper!.findComponent(USelectMenu).vm.$emit('update:modelValue', days)
+	await flushPromises()
+}
+
+function selectedLabel() {
+	const select = wrapper!.findComponent(USelectMenu)
+	const value = select.props('modelValue')
+	return (select.props('items') as { value: number; label: string }[]).find(
+		(item) => item.value === value,
+	)?.label
+}
+
+afterEach(async () => {
+	wrapper?.unmount()
+	wrapper = null
+	vi.useRealTimers()
+	localStorage.clear()
+	initializeLocale()
+	await router.push('/login')
+	document.body.innerHTML = ''
+})
+
+describe('Settings retention is hidden for everyone but the owner', () => {
+	it.each([['admin' as const], ['editor' as const], [undefined]])(
+		'renders nothing for %s',
+		async (role) => {
+			await mountPage(role, () => Promise.resolve(settings()))
+
+			expect(retention()).toBeNull()
+			expect(document.body.textContent).not.toContain('Keep activity for')
+			expect(document.body.textContent).toContain('Media cleanup')
+			expect(settingsGets()).toHaveLength(1)
+		},
+	)
+})
+
+describe('Settings retention, Default with 90 days', () => {
+	it('shows the header, the select, the helper, the lock alert and the lines', async () => {
+		await mountPage('owner', () => Promise.resolve(settings()))
+
+		expect(text()).toContain('Retention')
+		expect(text()).toContain('How long activity is kept.')
+		expect(selectedLabel()).toBe('90 days')
+		expect(text()).toContain('Older events are removed automatically.')
+		expect(text()).toContain('Activity logs are append-only')
+		expect(line('retention-last')).toBe('6 Oct 2026, 03:00 · 142 events removed')
+		expect(line('retention-next')).toBe('7 Oct 2026, 03:00')
+		expect(text()).not.toContain('Saved')
+		expect(patches()).toHaveLength(0)
+		expect(settingsGets()).toHaveLength(1)
+	})
+
+	it('reads Never before the first cleanup', async () => {
+		await mountPage('owner', () =>
+			Promise.resolve(settings({ activity_last_cleanup_at: null })),
+		)
+
+		expect(line('retention-last')).toBe('Never')
+		expect(line('retention-next')).toBe('7 Oct 2026, 03:00')
+	})
+
+	it('reads Never and Not scheduled for Forever when never cleaned', async () => {
+		await mountPage('owner', () =>
+			Promise.resolve(
+				settings({
+					activity_retention_days: 0,
+					activity_last_cleanup_at: null,
+					activity_next_cleanup_at: null,
+				}),
+			),
+		)
+
+		expect(selectedLabel()).toBe('Forever')
+		expect(line('retention-last')).toBe('Never')
+		expect(line('retention-next')).toBe('Not scheduled')
+		expect(text()).toContain('Nothing is removed automatically. The log grows over time.')
+	})
+})
+
+describe('Settings retention, skeleton and load failure', () => {
+	it('draws nothing in the body for 150 ms, then skeleton lines', async () => {
+		vi.useFakeTimers()
+		const pending = deferred<unknown>()
+		await mountPage('owner', () => pending.promise)
+
+		expect(retention()?.getAttribute('aria-busy')).toBeNull()
+		expect(text()).not.toContain('Keep activity for')
+
+		await vi.advanceTimersByTimeAsync(150)
+
+		expect(retention()?.getAttribute('aria-busy')).toBe('true')
+		expect(text()).not.toContain('Keep activity for')
+	})
+
+	it('shows the shared alert and re-runs the shared load', async () => {
+		let attempt = 0
+		await mountPage('owner', () => {
+			attempt += 1
+			return attempt === 1 ? Promise.reject(new ApiError(500)) : Promise.resolve(settings())
+		})
+
+		expect(text()).toContain("Couldn't reach RenewCMS. Check your connection and try again.")
+
+		const inCard = Array.from(retention()!.querySelectorAll('button')).find(
+			(candidate) => candidate.textContent?.trim() === 'Try again',
+		)
+		inCard!.click()
+		await flushPromises()
+
+		expect(settingsGets()).toHaveLength(2)
+		expect(selectedLabel()).toBe('90 days')
+	})
+})
+
+describe('Settings retention, a longer period saves at once', () => {
+	it.each([
+		[90, 365],
+		[30, 90],
+		[90, 0],
+	])('saves %s to %s with one PATCH and shows Saved for 2 s', async (from, to) => {
+		vi.useFakeTimers()
+		const pending = deferred<unknown>()
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings({ activity_retention_days: from })),
+			() => pending.promise,
+		)
+
+		await choose(to)
+
+		expect(patches()).toHaveLength(1)
+		expect(patches()[0]![1].body).toBe(JSON.stringify({ activity_retention_days: to }))
+		expect(text()).toContain('Saving…')
+		expect(text()).not.toContain('Events older than')
+
+		pending.resolve(
+			settings({
+				activity_retention_days: to,
+				activity_next_cleanup_at: to === 0 ? null : at(8, 3),
+			}),
+		)
+		await flushPromises()
+
+		expect(text()).toContain('Saved')
+		expect(line('retention-next')).toBe(to === 0 ? 'Not scheduled' : '8 Oct 2026, 03:00')
+		expect(line('retention-last')).toBe('6 Oct 2026, 03:00 · 142 events removed')
+
+		await vi.advanceTimersByTimeAsync(SAVED_VISIBLE_MS)
+
+		expect(text()).not.toContain('Saved')
+	})
+})
+
+describe('Settings retention, shortening asks first', () => {
+	it('warns without sending, then applies', async () => {
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings()),
+			() => Promise.resolve(settings({ activity_retention_days: 30 })),
+		)
+
+		await choose(30)
+
+		expect(patches()).toHaveLength(0)
+		expect(selectedLabel()).toBe('30 days')
+		expect(text()).toContain('Events older than 30 days will be removed')
+		expect(text()).toContain(
+			"This happens at the next cleanup on 7 Oct 2026, 03:00. It can't be undone.",
+		)
+
+		button('Apply 30 days')!.click()
+		await flushPromises()
+
+		expect(patches()).toHaveLength(1)
+		expect(patches()[0]![1].body).toBe(JSON.stringify({ activity_retention_days: 30 }))
+		expect(text()).not.toContain('Events older than')
+		expect(text()).toContain('Saved')
+	})
+
+	it('cancels back to the saved period without any request', async () => {
+		await mountPage('owner', () => Promise.resolve(settings()))
+		await choose(30)
+
+		button('Cancel')!.click()
+		await flushPromises()
+
+		expect(text()).not.toContain('Events older than')
+		expect(selectedLabel()).toBe('90 days')
+		expect(patches()).toHaveLength(0)
+	})
+
+	it.each([
+		[0, 365, true],
+		[365, 90, true],
+		[90, 90, false],
+		[30, 0, false],
+	])('saved %s then chosen %s warns: %s', async (saved, chosen, warns) => {
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings({ activity_retention_days: saved })),
+			() => Promise.resolve(settings({ activity_retention_days: chosen })),
+		)
+
+		await choose(chosen)
+
+		expect(text().includes('Events older than')).toBe(warns)
+		expect(patches()).toHaveLength(saved === chosen || warns ? 0 : 1)
+	})
+
+	it('drops the warning when a longer period is chosen', async () => {
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings()),
+			() => Promise.resolve(settings({ activity_retention_days: 365 })),
+		)
+		await choose(30)
+
+		await choose(365)
+
+		expect(text()).not.toContain('Events older than')
+		expect(patches()).toHaveLength(1)
+		expect(patches()[0]![1].body).toBe(JSON.stringify({ activity_retention_days: 365 }))
+	})
+
+	it('describes a shortening from Forever without a date', async () => {
+		await mountPage('owner', () =>
+			Promise.resolve(
+				settings({ activity_retention_days: 0, activity_next_cleanup_at: null }),
+			),
+		)
+
+		await choose(365)
+
+		expect(text()).toContain('Events older than 365 days will be removed')
+		expect(text()).toContain(
+			"Older events will be removed at the next cleanup. It can't be undone.",
+		)
+	})
+})
+
+describe('Settings retention, save error reverts the control and Try again retries', () => {
+	it.each([
+		['500', () => Promise.reject(new ApiError(500))],
+		['400', () => Promise.reject(new ApiError(400))],
+		['403', () => Promise.reject(new ApiError(403))],
+		['network', () => Promise.reject(new NetworkError())],
+	])('on %s', async (_name, failure) => {
+		let attempt = 0
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings()),
+			() => {
+				attempt += 1
+				return attempt === 1
+					? failure()
+					: Promise.resolve(settings({ activity_retention_days: 365 }))
+			},
+		)
+
+		await choose(365)
+
+		expect(text()).toContain("Couldn't save the retention period")
+		expect(text()).toContain('Your previous setting is still in place.')
+		expect(selectedLabel()).toBe('90 days')
+		expect(line('retention-next')).toBe('7 Oct 2026, 03:00')
+		expect(text()).not.toContain('Saved')
+
+		const retry = Array.from(retention()!.querySelectorAll('button')).find(
+			(candidate) => candidate.textContent?.trim() === 'Try again',
+		)
+		retry!.click()
+		await flushPromises()
+
+		expect(patches()).toHaveLength(2)
+		expect(patches()[1]![1].body).toBe(JSON.stringify({ activity_retention_days: 365 }))
+		expect(text()).toContain('Saved')
+		expect(text()).not.toContain("Couldn't save")
+	})
+
+	it('retries an applied shortening without asking again', async () => {
+		let attempt = 0
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings()),
+			() => {
+				attempt += 1
+				return attempt === 1
+					? Promise.reject(new ApiError(500))
+					: Promise.resolve(settings({ activity_retention_days: 30 }))
+			},
+		)
+		await choose(30)
+		button('Apply 30 days')!.click()
+		await flushPromises()
+
+		expect(text()).not.toContain('Events older than')
+		expect(text()).toContain("Couldn't save the retention period")
+		expect(selectedLabel()).toBe('90 days')
+
+		Array.from(retention()!.querySelectorAll('button'))
+			.find((candidate) => candidate.textContent?.trim() === 'Try again')!
+			.click()
+		await flushPromises()
+
+		expect(patches()).toHaveLength(2)
+		expect(text()).not.toContain('Events older than')
+	})
+
+	it('refreshes the session on a 403 and removes the card for a demoted owner', async () => {
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings()),
+			() => Promise.reject(new ApiError(403)),
+		)
+		getMeMock.mockResolvedValue({ verified: true, username: 'marta', id: 1, role: 'admin' })
+
+		await choose(365)
+
+		expect(getMeMock).toHaveBeenCalled()
+		expect(retention()).toBeNull()
+	})
+
+	it('shows no card alert on a 401', async () => {
+		await mountPage(
+			'owner',
+			() => Promise.resolve(settings()),
+			() => Promise.reject(new ApiError(401)),
+		)
+
+		await choose(365)
+
+		expect(text()).not.toContain("Couldn't save")
+		expect(selectedLabel()).toBe('90 days')
+	})
+})
+
+describe('Settings retention, offline disables the controls', () => {
+	it('disables the select and the warning buttons', async () => {
+		await mountPage('owner', () => Promise.resolve(settings()))
+		await choose(30)
+
+		const online = vi.spyOn(window.navigator, 'onLine', 'get').mockReturnValue(false)
+		window.dispatchEvent(new Event('offline'))
+		await flushPromises()
+
+		expect(wrapper!.findComponent(USelectMenu).props('disabled')).toBe(true)
+		expect(button('Apply 30 days')!.disabled).toBe(true)
+		expect(button('Cancel')!.disabled).toBe(true)
+		online.mockRestore()
+	})
+})
+
+describe('Settings retention, the French interface', () => {
+	it('words the card in French', async () => {
+		setLocale('fr')
+		await mountPage('owner', () => Promise.resolve(settings()))
+
+		expect(text()).toContain('Conservation')
+		expect(text()).toContain('Conserver l’activité pendant')
+		expect(text()).toContain('Dernier nettoyage')
+		expect(text()).toContain('Prochain nettoyage')
+		expect(selectedLabel()).toBe('90 jours')
+	})
+})