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/features/instrument-details/model/section.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from "vitest";
+import { resource } from "@/test/resource";
+import { section } from "./section";
+
+describe("instrument source and transport presentation", () => {
+	it.each(["missing", "partial", "complete"] as const)(
+		"keeps %s separate from successful transport",
+		(availability) => {
+			const data = availability === "missing" ? undefined : { rows: [] };
+			const state = section({
+				data,
+				meta: resource(data, { availability }).meta,
+				isError: false,
+				isFetching: false,
+				refetch: vi.fn(),
+			});
+			expect(state.loading).toBe(availability === "missing");
+			expect(state.partial).toBe(availability === "partial");
+			expect(state.hasData).toBe(availability !== "missing");
+		},
+	);
+	it("preserves a full fresh source and timestamp when force fails, while offering scoped retry", () => {
+		const retry = vi.fn();
+		const refetch = vi.fn();
+		const meta = resource([], {
+			sync: { id: "work", state: "failed", errorCode: "TBANK_UNAVAILABLE" },
+		}).meta;
+		const state = section(
+			{ data: [], meta, isError: false, isFetching: false, refetch },
+			retry,
+		);
+		expect(state).toMatchObject({
+			hasData: true,
+			loading: false,
+			error: true,
+			refreshing: false,
+			lastSuccessfulAt: meta.lastSuccessfulAt,
+		});
+		state.retry();
+		expect(retry).toHaveBeenCalledOnce();
+		expect(refetch).not.toHaveBeenCalled();
+	});
+	it("shows source failure without a false loading or empty result", () => {
+		const state = section({
+			data: undefined,
+			meta: resource(null, {
+				sync: { id: "work", state: "failed", errorCode: "TBANK_UNAVAILABLE" },
+			}).meta,
+			isError: false,
+			isFetching: false,
+			refetch: vi.fn(),
+		});
+		expect(state).toMatchObject({
+			hasData: false,
+			loading: false,
+			error: true,
+		});
+	});
+});

src/features/instrument-details/model/section.ts

@@ -1,23 +1,44 @@
+import type { paths } from "@/shared/api";
+
+type Meta =
+	paths["/api/v1/tbank-sync/{id}"]["get"]["responses"][200]["content"]["application/json"]["resources"][number];
 type SectionState = {
+	stale?: boolean;
+	sourceError?: boolean;
+	partial?: boolean;
+	lastSuccessfulAt?: string | null;
 	hasData: boolean;
 	loading: boolean;
 	error: boolean;
 	refreshing: boolean;
 	retry: () => void;
 };
-function section(query: {
-	data: unknown;
-	isError: boolean;
-	isFetching: boolean;
-	refetch: () => unknown;
-}): SectionState {
+function section(
+	query: {
+		data: unknown;
+		meta?: Meta;
+		isError: boolean;
+		isFetching: boolean;
+		refetch: () => unknown;
+	},
+	retry?: () => unknown,
+): SectionState {
+	const error = query.isError || query.meta?.sync.state === "failed";
 	return {
+		stale: query.meta?.freshness === "stale",
+		sourceError: query.meta?.sync.state === "failed",
+		partial: query.meta?.availability === "partial",
+		lastSuccessfulAt: query.meta?.lastSuccessfulAt,
 		hasData: Boolean(query.data),
-		loading: !query.data && !query.isError,
-		error: query.isError,
-		refreshing: Boolean(query.data) && query.isFetching,
+		loading: !query.data && !error,
+		error,
+		refreshing:
+			Boolean(query.data) &&
+			(query.isFetching ||
+				query.meta?.sync.state === "running" ||
+				query.meta?.sync.state === "queued"),
 		retry: () => {
-			void query.refetch();
+			void (retry ?? query.refetch)();
 		},
 	};
 }

src/features/instrument-details/model/types.ts

@@ -2,10 +2,12 @@ import type { BrokerageOperation } from "@/entities/broker-operation";
 import type { paths } from "@/shared/api";
 import type { SectionState } from "./section";
 
-type Position =
-	paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"];
-type Candles =
-	paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"];
+type Position = NonNullable<
+	paths["/api/v1/stocks/{uid}/position"]["get"]["responses"][200]["content"]["application/json"]["data"]
+>;
+type Candles = NonNullable<
+	paths["/api/v1/stocks/{uid}/candles"]["get"]["responses"][200]["content"]["application/json"]["data"]
+>;
 type ChartRow = Candles["candles"][number] & { date: string; price: number };
 type InstrumentPositionVm = {
 	position?: Position;

src/features/instrument-details/ui/InstrumentChart.view.tsx

@@ -177,7 +177,13 @@ const InstrumentChart: FC<InstrumentChartProps> = (props) => {
 						</Accordion>
 					</>
 				) : (
-					<Text c="dimmed">{t("stock.noCandles")}</Text>
+					<Text c="dimmed">
+						{t(
+							vm.candlesState.partial
+								? "investment.partial"
+								: "stock.noCandles",
+						)}
+					</Text>
 				)
 			) : null}
 		</InstrumentSection>

src/features/instrument-details/ui/InstrumentEvents.view.tsx

@@ -60,7 +60,11 @@ const InstrumentEvents: FC<InstrumentEventsProps> = (props) => {
 						</Stack>
 					) : (
 						<Text c="dimmed" py="lg">
-							{t("stock.noOperations")}
+							{t(
+								vm.operationsState.partial
+									? "investment.partial"
+									: "stock.noOperations",
+							)}
 						</Text>
 					)}
 					<Group justify="space-between" mt="md">

src/features/instrument-details/ui/InstrumentSection.view.tsx

@@ -11,6 +11,7 @@ import {
 import { LoadingSkeleton } from "@wealthledger/ui";
 import type { FC, PropsWithChildren, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
+import { formatSnapshotTime } from "@/shared/lib";
 import type { SectionState } from "../model/section";
 import classes from "./InstrumentDetails.module.css";
 
@@ -38,20 +39,40 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
 				</Title>
 				{props.controls}
 			</Group>
+			{props.state.stale ? (
+				<Text size="xs">{t("investment.stale")}</Text>
+			) : null}
+			{props.state.partial ? (
+				<Text role="status">{t("investment.partial")}</Text>
+			) : null}
+			{props.state.lastSuccessfulAt ? (
+				<Text size="xs" c="dimmed">
+					{t("investment.sourceTime", {
+						date: formatSnapshotTime(props.state.lastSuccessfulAt),
+					})}
+				</Text>
+			) : null}
 			{props.state.refreshing ? (
 				<Text role="status" size="xs" c="dimmed">
 					{t("accounts.refreshing")}
 				</Text>
 			) : null}
 			{props.state.error ? (
-				<Alert color="orange" mb="sm" role="alert">
+				<Alert color="orange" mb="sm" role="status" aria-live="polite">
 					<Group justify="space-between">
 						<Text size="sm">
-							{props.state.hasData
-								? t("accounts.refreshError")
-								: t("stock.sectionError")}
+							{props.state.sourceError
+								? t("investment.syncFailed")
+								: props.state.hasData
+									? t("accounts.refreshError")
+									: t("stock.sectionError")}
 						</Text>
-						<Button size="xs" variant="default" onClick={props.state.retry}>
+						<Button
+							size="xs"
+							variant="default"
+							onClick={props.state.retry}
+							disabled={props.state.refreshing}
+						>
 							{t("accounts.retry")}
 						</Button>
 					</Group>