feat: show persisted investment data and sync state

Consume the provided resource-envelope API snapshot. Preserve financial snapshots during
refresh, observe synchronization without importing, and fence late responses across
account and connection changes.

src/pages/account-income/ui/AccountIncomePage/components/AccountIncomePageLoaded.view.tsx

@@ -11,6 +11,7 @@ import { StateView } from "@wealthledger/ui";
 import type { FC } from "react";
 import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import { formatSnapshotTime } from "@/shared/lib";
 import classes from "../AccountIncomePage.module.css";
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
 import { IncomeComparisons } from "./IncomeComparisons.view";
@@ -34,7 +35,17 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 	const { t } = useTranslation();
 	return (
 		<Stack gap="lg" className={classes.page}>
+			{props.lastSuccessfulAt ? (
+				<Text size="xs" c="dimmed">
+					{t("investment.sourceTime", {
+						date: formatSnapshotTime(props.lastSuccessfulAt),
+					})}
+				</Text>
+			) : null}
 			<Title order={1}>{t("income.title")}</Title>
+			<Button onClick={retry} disabled={refreshing} w="fit-content">
+				{t("investment.refresh")}
+			</Button>
 			<FormProvider {...form}>
 				<IncomePeriodForm
 					key={props.formRevision}
@@ -49,16 +60,24 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 				</Group>
 			) : null}
 			{refreshError ? (
-				<Alert color="orange">
+				<Alert color="orange" role="status" aria-live="polite">
 					<Stack gap="sm">
-						<Text>{t("income.refreshError")}</Text>
+						<Text>
+							{t(
+								props.sourceError
+									? "investment.syncFailed"
+									: "income.refreshError",
+							)}
+						</Text>
 						<Button onClick={retry} variant="default">
 							{t("income.retry")}
 						</Button>
 					</Stack>
 				</Alert>
 			) : null}
-			{analytics.totalsByCurrency.length ? (
+			{props.partial ? (
+				<Alert role="status">{t("investment.partial")}</Alert>
+			) : analytics.totalsByCurrency.length ? (
 				<IncomeSummary totals={analytics.totalsByCurrency} />
 			) : (
 				<StateView
@@ -67,7 +86,16 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 				/>
 			)}
 			<Alert color="blue">{t("income.taxBoundary")}</Alert>
-			<IncomeComparisons comparison={display.comparison} />
+			<IncomeComparisons
+				title={t("income.previousPeriod")}
+				comparison={display.previousComparison}
+				notice={t(`income.${display.previousNotice}`)}
+			/>
+			<IncomeComparisons
+				title={t("income.yearAgo")}
+				comparison={display.comparison}
+				notice={t(`income.${display.yearNotice}`)}
+			/>
 			<IncomePayments entries={display.entries} />
 		</Stack>
 	);

src/pages/account-income/ui/AccountIncomePage/components/IncomeComparisons.view.tsx

@@ -5,8 +5,14 @@ import { formatMoney } from "@/shared/lib";
 import classes from "../AccountIncomePage.module.css";
 import type { IncomeDisplayModel } from "../AccountIncomePage.vm";
 
-type IncomeComparisonsProps = { comparison: IncomeDisplayModel["comparison"] };
-type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]>;
+type IncomeComparisonsProps = {
+	comparison: IncomeDisplayModel["comparison"];
+	title: string;
+	notice: string;
+};
+type ComparisonProps = NonNullable<IncomeDisplayModel["comparison"]> & {
+	title: string;
+};
 type ComparisonValuesProps = {
 	kind: "selected" | "compared" | "difference";
 	label: string;
@@ -15,16 +21,15 @@ type ComparisonValuesProps = {
 };
 
 const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
-	const { t } = useTranslation();
 	return (
 		<Stack>
-			<Title order={2}>{t("income.yearAgo")}</Title>
+			<Title order={2}>{props.title}</Title>
 			{props.comparison ? (
-				<Comparison {...props.comparison} />
+				<Comparison {...props.comparison} title={props.title} />
 			) : (
 				<Paper p="sm" radius="md" className={classes.comparisonNotice}>
-					<Text size="sm" c="gray.7">
-						{t("income.yearUnavailable")}
+					<Text size="sm" c="gray.7" role="status" aria-live="polite">
+						{props.notice}
 					</Text>
 				</Paper>
 			)}
@@ -35,7 +40,7 @@ const IncomeComparisons: FC<IncomeComparisonsProps> = (props) => {
 const Comparison: FC<ComparisonProps> = (props) => {
 	const { t } = useTranslation();
 	return (
-		<section aria-label={t("income.yearAgo")} className={classes.comparison}>
+		<section aria-label={props.title} className={classes.comparison}>
 			<Stack gap="md">
 				{props.values.map((value) => (
 					<Stack