fix(backup): pause revoked backups and tell users to reconnect

Google answers a revoked or expired refresh token with invalid_grant.
Every save then retried the dead token, and reconnecting never cleared
the old error, so it kept showing on Backup Settings afterwards.

- The Google Drive and Dropbox OAuth callbacks clear lastError when a
  provider is reconnected.
- An invalid_grant, or a missing refresh token, now pauses the
  integration with a readable "reconnect" message instead of retrying
  it on every catch update. Other failures still retry as before.
- A banner on every page and an alert on the Pokédex page point to
  Backup Settings, which shows a "Reconnect needed" badge. The Pokédex
  page re-checks backup status after each export, because saving a
  catch record also exports on the server and may pause a provider
  first.
- Offline sync status and the "Save all artwork" link move from every
  page to a new /offline-guide page, linked from the user menu and the
  home and welcome pages. Only the offline read-only banner stays
  sitewide.
- Unit tests cover every export path and the backup status store. BDD
  covers revocation and reconnecting for both providers, and the
  offline guide. The mock provider can now reject token refreshes, and
  mock control calls fail loudly if a stale mock is reused. Coverage
  thresholds are raised to the new baseline.

tests/bdd/steps/backup.steps.ts

@@ -12,6 +12,17 @@ const SUPABASE_URL = requireLoopbackUrl(
 
 type Provider = 'google_drive' | 'dropbox';
 
+// Outside CI Playwright reuses an already-running mock, which may predate a new control route.
+// Fail loudly then, rather than letting the scenario run against the wrong mock behaviour.
+async function mockControl(route: string) {
+	const response = await fetch(`${MOCK_URL}/__mock/${route}`);
+	if (!response.ok) {
+		throw new Error(
+			`Mock provider rejected /__mock/${route} (${response.status}). Stop any stale mock on port 4199 and rerun.`
+		);
+	}
+}
+
 async function seedIntegration(
 	state: import('../fixtures').ScenarioState,
 	provider: Provider,
@@ -67,10 +78,36 @@ Given('Dropbox is connected with an expired token', async ({ page, state }) => {
 
 Given('Google Drive is connected to a failing mocked provider', async ({ page, state }) => {
 	await seedIntegration(state, 'google_drive');
-	await fetch(`${MOCK_URL}/__mock/fail-uploads`);
+	await mockControl('fail-uploads');
 	await ensureExportDex(page, state);
 });
 
+const PROVIDERS: Record<string, Provider> = { 'Google Drive': 'google_drive', Dropbox: 'dropbox' };
+
+function providerFor(label: string): Provider {
+	const provider = PROVIDERS[label];
+	if (!provider) throw new Error(`Unknown backup provider "${label}"`);
+	return provider;
+}
+
+Given(
+	'{string} is connected with a revoked refresh token',
+	async ({ page, state }, label: string) => {
+		await seedIntegration(state, providerFor(label), {
+			accessTokenExpiresAt: new Date(Date.now() - 60_000).toISOString()
+		});
+		await mockControl('revoke-refresh');
+		await ensureExportDex(page, state);
+	}
+);
+
+Given('{string} previously lost access', async ({ state }, label: string) => {
+	await seedIntegration(state, providerFor(label), {
+		enabled: false,
+		lastError: `${label} access has expired or was revoked. Reconnect ${label} to resume backups.`
+	});
+});
+
 When('I visit backup settings', async ({ page }) => {
 	await page.goto('/backup-settings');
 });
@@ -182,3 +219,65 @@ Then('the provider failure is shown in backup settings', async ({ page }) => {
 	await page.goto('/backup-settings');
 	await expect(page.getByText(/mock upload failure/)).toBeVisible();
 });
+
+Then('the Pokédex page tells me to reconnect {string}', async ({ page }, label: string) => {
+	const toast = page.getByTestId('backup-reconnect-toast');
+	await expect(toast).toBeVisible({ timeout: 15_000 });
+	await expect(toast).toContainText(label);
+	await expect(toast.getByRole('link', { name: 'Reconnect' })).toHaveAttribute(
+		'href',
+		'/backup-settings'
+	);
+});
+
+Then('I can dismiss the reconnect alert', async ({ page }) => {
+	await page.getByTestId('backup-reconnect-toast').getByRole('button', { name: 'Dismiss' }).click();
+	await expect(page.getByTestId('backup-reconnect-toast')).toHaveCount(0);
+	// Dismissing the one-off alert must not hide the standing sitewide warning.
+	await expect(page.getByTestId('backup-reconnect-banner')).toBeVisible();
+});
+
+Then('backup settings asks me to reconnect {string}', async ({ page }, label: string) => {
+	await page.goto('/backup-settings');
+	const card = page.locator('.border').filter({ hasText: label });
+	await expect(card.getByText('Reconnect needed', { exact: true })).toBeVisible();
+	await expect(card.getByText(/access has expired or was revoked/)).toBeVisible();
+	// The settings page already explains the problem, so the sitewide banner stays out of the way.
+	await expect(page.getByTestId('backup-reconnect-banner')).toHaveCount(0);
+});
+
+Then('other pages warn that my {string} backup has stopped', async ({ page }, label: string) => {
+	await page.goto('/my-pokedexes');
+	const banner = page.getByTestId('backup-reconnect-banner');
+	await expect(banner).toBeVisible();
+	await expect(banner).toContainText(label);
+	await expect(banner.getByRole('link', { name: 'Reconnect' })).toHaveAttribute(
+		'href',
+		'/backup-settings'
+	);
+});
+
+Then('{string} is not flagged for reconnection', async ({ page, state }, label: string) => {
+	await page.goto('/backup-settings');
+	const card = page.locator('.border').filter({ hasText: label });
+	await expect(card.getByText('Connected', { exact: true })).toBeVisible();
+	await page.goto('/my-pokedexes');
+	await expect(page.getByTestId('backup-reconnect-banner')).toHaveCount(0);
+	// A transient upload failure leaves the integration enabled, so the next export still tries it.
+	const response = await page.request.post(`/api/pokedexes/${state.pokedexId}/export`);
+	expect(await response.json()).toMatchObject({ attempted: 1 });
+});
+
+Then('later exports do not retry the revoked token', async ({ page, state }) => {
+	const before = (await mockState()).refreshes;
+	const response = await page.request.post(`/api/pokedexes/${state.pokedexId}/export`);
+	expect(response.status()).toBe(200);
+	expect(await response.json()).toMatchObject({ attempted: 0 });
+	expect((await mockState()).refreshes).toBe(before);
+});
+
+Then('the previous backup error is cleared', async ({ page }) => {
+	await expect(page.getByText(/access has expired or was revoked/)).toHaveCount(0);
+	await page.goto('/my-pokedexes');
+	await expect(page.getByTestId('backup-reconnect-banner')).toHaveCount(0);
+});

tests/bdd/steps/pwa.steps.ts

@@ -104,6 +104,23 @@ When('I go offline and reload the current Pokédex', async ({ page, state }) =>
 	});
 });
 
+When('I open the offline guide', async ({ page }) => {
+	await page.goto('/offline-guide');
+});
+
+When('I open the offline guide from the user menu', async ({ page }) => {
+	await page.getByRole('button', { name: 'usericon' }).click();
+	await page.getByRole('link', { name: 'Using Offline' }).click();
+	await page.waitForURL(/\/offline-guide$/);
+});
+
+// Client-side navigation keeps the sync status in memory, so the old layout would show it at once.
+When('I return to my Pokédexes from the user menu', async ({ page }) => {
+	await page.getByRole('button', { name: 'usericon' }).click();
+	await page.getByRole('link', { name: 'My Pokédexes' }).click();
+	await page.waitForURL(/\/my-pokedexes$/);
+});
+
 When('I go offline and then return online', async ({ page }) => {
 	await page.context().setOffline(true);
 	await page.reload({ waitUntil: 'domcontentloaded' });
@@ -167,6 +184,26 @@ Then('the application remains available', async ({ page }) => {
 	await expect(page.getByRole('heading', { name: /Start Your Pokédex Journey/ })).toBeVisible();
 });
 
+Then('the offline guide shows my offline copy status', async ({ page }) => {
+	await expect(
+		page.getByRole('heading', { name: 'Using Living Dex Tracker offline' })
+	).toBeVisible();
+	await expect(page.getByTestId('offline-copy-status')).toBeVisible();
+});
+
+Then('the offline guide shows when my offline copy was updated', async ({ page }) => {
+	await expect(page.getByTestId('offline-copy-status')).toContainText(/Offline copy updated/, {
+		timeout: 30_000
+	});
+});
+
+Then('no offline sync status is shown', async ({ page }) => {
+	await expect(page.getByRole('heading', { name: /My Pok/ }).first()).toBeVisible();
+	await expect(
+		page.getByText(/Offline copy updated|Updating offline copy|Save all artwork for offline/)
+	).toHaveCount(0);
+});
+
 Then('the read-only offline viewer is available', async ({ page }) => {
 	await expect(page.getByText(/offline.*read-only/i)).toBeVisible();
 });