feat: add quiet reading with rare confirmations

Part of the quiet-user-feedback change; docs and specs land in their own repositories.

src/features/tbank-connection/model/screen-sync.ts

@@ -1,4 +1,9 @@
-import { type QueryKey, useQueryClient } from "@tanstack/react-query";
+import {
+	focusManager,
+	onlineManager,
+	type QueryKey,
+	useQueryClient,
+} from "@tanstack/react-query";
 import { useEffect, useRef } from "react";
 
 import {
@@ -21,9 +26,39 @@ type ScreenResource = {
 	meta?: InvestmentResourceMeta;
 	observe: () => Promise<unknown>;
 	queryKey: QueryKey;
+	refetch: () => Promise<unknown>;
 };
 
 const STATUS_INTERVAL_MS = 1000;
+const FIRST_SOURCE_RECOVERY_DELAY_MS = 5000;
+const SECOND_SOURCE_RECOVERY_DELAY_MS = 15_000;
+
+function requiresSourceRecovery(meta?: InvestmentResourceMeta): boolean {
+	if (!meta || meta.unavailableReason) return false;
+
+	return ["cancelled", "failed"].includes(meta.sync.state)
+		|| meta.availability === "missing"
+		|| meta.freshness === "stale"
+		|| (meta.dependencies ?? []).some(dependency =>
+			requiresSourceRecovery(dependency),
+		);
+}
+
+function sourceRecoveryDelay(attempt: number): number | undefined {
+	switch (attempt) {
+		case 0: {
+			return FIRST_SOURCE_RECOVERY_DELAY_MS;
+		}
+
+		case 1: {
+			return SECOND_SOURCE_RECOVERY_DELAY_MS;
+		}
+
+		default: {
+			return undefined;
+		}
+	}
+}
 
 function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
 	const mutation = apiQueryClient.useMutation("post", "/api/v1/tbank-sync", {
@@ -35,6 +70,9 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
 	const scopeKey = JSON.stringify(scope);
 
 	const requestInFlightRef = useRef<null | string>(null);
+	const lifecycleRecoveryRef = useRef(new Set<string>());
+	const sourceRecoveryRef = useRef(new Map<string, number>());
+	const sourceTimersRef = useRef(new Set<ReturnType<typeof setTimeout>>());
 
 	const isCurrentMutation
 		= JSON.stringify(mutation.variables?.body) === scopeKey;
@@ -110,6 +148,73 @@ function useScreenSync(scope: InvestmentScreen, resources: ScreenResource[]) {
 				void resource.observe().catch(() => {});
 	}, [client, statuses, resources, scopeKey]);
 
+	useEffect(() => {
+		const timers = sourceTimersRef.current;
+		const attempts = sourceRecoveryRef.current;
+
+		return () => {
+			for (const timer of timers) clearTimeout(timer);
+			timers.clear();
+			attempts.clear();
+		};
+	}, [scopeKey]);
+
+	useEffect(() => {
+		for (const resource of resources) {
+			if (
+				!requiresSourceRecovery(resource.meta)
+				|| resource.isFetching
+			) continue;
+
+			const key = JSON.stringify([scopeKey, resource.queryKey]);
+			const attempt = sourceRecoveryRef.current.get(key) ?? 0;
+			const delay = sourceRecoveryDelay(attempt);
+			if (delay === undefined) continue;
+
+			sourceRecoveryRef.current.set(key, attempt + 1);
+
+			const timer = setTimeout(() => {
+				sourceTimersRef.current.delete(timer);
+				void resource.refetch().catch(() => {});
+			}, delay);
+
+			sourceTimersRef.current.add(timer);
+		}
+	}, [resources, scopeKey]);
+
+	useEffect(() => {
+		const recover = () => {
+			for (const resource of resources) {
+				if (
+					!requiresSourceRecovery(resource.meta)
+					|| resource.isFetching
+				) continue;
+
+				const key = JSON.stringify([scopeKey, resource.queryKey]);
+				if (lifecycleRecoveryRef.current.has(key)) continue;
+
+				sourceRecoveryRef.current.delete(key);
+				lifecycleRecoveryRef.current.add(key);
+				void resource.refetch()
+					.catch(() => {})
+					.finally(() => lifecycleRecoveryRef.current.delete(key));
+			}
+		};
+
+		const unsubscribeFocus = focusManager.subscribe((focused) => {
+			if (focused) recover();
+		});
+
+		const unsubscribeOnline = onlineManager.subscribe((online) => {
+			if (online) recover();
+		});
+
+		return () => {
+			unsubscribeFocus();
+			unsubscribeOnline();
+		};
+	}, [resources, scopeKey]);
+
 	const isRefreshing
 		= (isCurrentMutation && mutation.isPending)
 			|| statuses.some(