feat: replace account page accordion with tabs and show open position result (#112)

.ai/conventions/data.md

@@ -40,6 +40,11 @@ Authorization. Auth endpoints исключены из Bearer/retry middleware. R
 координируется single-flight; после `401` с `UNAUTHORIZED` возможен один retry.
 Не добавляй собственный refresh/retry loop в caller.
 
+Refresh, завершившийся `401`, очищает session. Сетевая ошибка и `5xx`
+(например, деплой backend) не доказывают конец session: она сохраняется,
+`unavailable` показывает retry-экран вместо login, а следующий `401` снова
+запускает refresh. Retry/backoff внутри refresh не добавляется.
+
 Cookie-writing requests упорядочены только в текущей вкладке. Cross-tab auth
 synchronization не требуется; допустим reload/re-login. Web Locks и отдельные
 token stores не добавляются.

.nvmrc

@@ -1 +1 @@
-24.21.0
+24.22.1

CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [1.2.1](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.0...v1.2.1) (2026-10-24)
+
+### Bug Fixes
+
+* keep session when refresh fails on network error or 5xx (WealthLedger/frontend[#97](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/97)) ([3af9df0](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3af9df0ae2f0fb314c276504ef7d50a7472de680))
+* show snapshot time in browser time zone ([#101](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/101)) ([b009101](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b009101b7b954e8462672a9da859267ebb71edc4))
+
+### Maintenance
+
+* bump Node to 24.22.1 (WealthLedger/backend[#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([2cd6b1e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2cd6b1e72d97117b0c37465aac3d989b0469c1c3))
+* bump test stack and fix npm audit findings ([#105](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/105)) ([7e6fd95](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7e6fd95cfaf7d288242fb46ec7091f561e6f3de5))
+* **deps:** update non-major dependencies [#9](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/9) ([b5ceb77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/b5ceb77208e35a0e389258f3d3c4b85852980042))
+* resolve dev dependency audit findings (WealthLedger/frontend[#103](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/103)) ([7b6f34c](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7b6f34c776fa3517c93b5c3468e3b277aaa6273f))
+
 ## [1.2.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.1.0...v1.2.0) (2026-10-18)
 
 ### Features

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.21.0-bookworm-slim AS dependencies
+FROM node:24.22.1-bookworm-slim AS dependencies
 WORKDIR /app
 ENV HUSKY=0
 COPY package.json package-lock.json ./
@@ -19,7 +19,7 @@ COPY . .
 ENV VITE_API_BASE_URL=""
 RUN npm run build
 
-FROM nginx:1.28.0-alpine AS production
+FROM nginx:1.31.8-alpine AS production
 ARG VERSION
 ARG REVISION
 LABEL org.opencontainers.image.version=$VERSION \

index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <meta name="theme-color" content="#ffffff" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <title>WealthLedger</title>
   </head>
   <body>

package.json

@@ -1,10 +1,10 @@
 {
 	"name": "wealth-ledger-frontend",
 	"private": true,
-	"version": "1.2.0",
+	"version": "1.2.1",
 	"type": "module",
 	"engines": {
-		"node": "24.21.0"
+		"node": "24.22.1"
 	},
 	"scripts": {
 		"dev": "npm run build:packages && vite",
@@ -37,89 +37,94 @@
 		"*.{js,mjs,cjs,ts,tsx}": "eslint --fix --max-warnings=0 --no-warn-ignored"
 	},
 	"dependencies": {
-		"@hookform/resolvers": "5.9.1",
+		"@hookform/resolvers": "5.9.2",
-		"@mantine/charts": "9.6.1",
+		"@mantine/charts": "9.7.3",
-		"@mantine/core": "9.6.1",
+		"@mantine/core": "9.7.3",
-		"@mantine/dates": "9.6.1",
+		"@mantine/dates": "9.7.3",
-		"@mantine/hooks": "9.6.1",
+		"@mantine/hooks": "9.7.3",
-		"@mantine/notifications": "9.6.1",
+		"@mantine/notifications": "9.7.3",
-		"@tanstack/react-query": "5.102.8",
+		"@tanstack/react-query": "5.104.5",
 		"@wealthledger/icons": "file:packages/icons",
 		"@wealthledger/tokens": "file:packages/tokens",
 		"@wealthledger/ui": "file:packages/ui",
 		"dayjs": "1.11.23",
-		"i18next": "26.4.2",
+		"i18next": "26.5.10",
-		"motion": "13.2.0",
+		"motion": "13.5.1",
 		"openapi-fetch": "0.17.0",
 		"openapi-react-query": "0.5.4",
-		"react": "19.3.0",
+		"react": "19.3.1",
-		"react-dom": "19.3.0",
+		"react-dom": "19.3.1",
-		"react-hook-form": "7.88.0",
+		"react-hook-form": "7.91.0",
-		"react-i18next": "17.0.14",
+		"react-i18next": "17.1.8",
-		"react-is": "19.3.0",
+		"react-is": "19.3.1",
-		"react-router": "8.3.1",
+		"react-router": "8.5.0",
 		"recharts": "3.10.1",
-		"zod": "4.6.4"
+		"zod": "4.6.7"
 	},
 	"devDependencies": {
-		"@babel/core": "8.0.5",
+		"@babel/core": "8.0.9",
-		"@commitlint/cli": "21.2.2",
+		"@commitlint/cli": "21.2.4",
-		"@commitlint/config-conventional": "21.2.2",
+		"@commitlint/config-conventional": "21.2.4",
-		"@eslint-react/eslint-plugin": "5.21.0",
+		"@eslint-react/eslint-plugin": "5.28.8",
 		"@eslint/js": "10.0.1",
-		"@release-it/conventional-changelog": "12.0.0",
+		"@release-it/conventional-changelog": "12.0.2",
 		"@rolldown/plugin-babel": "0.2.4",
-		"@storybook/addon-docs": "10.6.0",
+		"@storybook/addon-docs": "10.6.3",
-		"@storybook/react-vite": "10.6.0",
+		"@storybook/react-vite": "10.6.3",
 		"@stylistic/eslint-plugin": "5.10.0",
-		"@tanstack/eslint-plugin-query": "5.104.0",
+		"@tanstack/eslint-plugin-query": "5.104.5",
 		"@testing-library/jest-dom": "7.0.1",
 		"@testing-library/react": "16.3.3",
-		"@types/node": "24.13.4",
+		"@types/node": "24.19.2",
 		"@types/react": "19.3.0",
 		"@types/react-dom": "19.3.0",
-		"@vitejs/plugin-react": "6.1.1",
+		"@vitejs/plugin-react": "6.1.2",
-		"@vitest/browser-playwright": "5.0.0",
+		"@vitest/browser": "5.0.5",
-		"@vitest/coverage-v8": "5.0.0",
+		"@vitest/browser-playwright": "5.0.5",
+		"@vitest/coverage-v8": "5.0.5",
 		"@vitest/eslint-plugin": "1.6.27",
+		"@vitest/ui": "5.0.5",
 		"babel-plugin-react-compiler": "1.0.0",
-		"conventional-changelog-conventionalcommits": "10.4.0",
+		"conventional-changelog-conventionalcommits": "10.4.1",
-		"dependency-cruiser": "18.2.0",
+		"dependency-cruiser": "18.7.0",
-		"eslint": "10.11.0",
+		"eslint": "10.13.0",
 		"eslint-import-resolver-typescript": "4.4.5",
 		"eslint-plugin-import-x": "4.17.1",
 		"eslint-plugin-jest-dom": "5.10.1",
 		"eslint-plugin-no-unsanitized": "4.1.5",
-		"eslint-plugin-perfectionist": "5.12.1",
+		"eslint-plugin-perfectionist": "5.13.0",
 		"eslint-plugin-react-hooks": "7.1.1",
 		"eslint-plugin-react-refresh": "0.5.7",
 		"eslint-plugin-regexp": "3.3.1",
-		"eslint-plugin-security": "4.1.0",
+		"eslint-plugin-security": "4.2.0",
-		"eslint-plugin-sonarjs": "4.2.1",
+		"eslint-plugin-sonarjs": "4.2.2",
-		"eslint-plugin-storybook": "10.6.0",
+		"eslint-plugin-storybook": "10.6.3",
 		"eslint-plugin-testing-library": "7.16.2",
 		"eslint-plugin-unicorn": "76.0.0",
-		"globals": "17.12.0",
+		"globals": "17.13.0",
 		"husky": "9.1.7",
-		"jsdom": "30.0.1",
+		"jsdom": "30.1.3",
-		"knip": "6.35.1",
+		"knip": "6.43.0",
-		"lint-staged": "17.5.1",
+		"lint-staged": "17.6.0",
 		"msw": "2.15.0",
 		"openapi-typescript": "7.13.0",
-		"playwright": "1.63.0",
+		"playwright": "1.64.1",
-		"release-it": "21.0.2",
+		"release-it": "21.1.1",
-		"storybook": "10.6.0",
+		"storybook": "10.6.3",
 		"typescript": "5.9.3",
-		"typescript-eslint": "8.70.1",
+		"typescript-eslint": "8.72.0",
-		"vite": "8.3.0",
+		"vite": "8.3.5",
 		"vite-plugin-pwa": "1.3.0",
-		"vitest": "5.0.0"
+		"vitest": "5.0.5"
 	},
 	"overrides": {
 		"release-it": {
-			"basic-ftp": "6.2.1",
+			"basic-ftp": "6.2.3",
-			"undici": "7.29.1"
+			"undici": "8.12.3"
-		}
+		},
+		"@vitest/browser": "5.0.5",
+		"@vitest/ui": "5.0.5",
+		"@vitest/mocker": "5.0.5"
 	},
 	"allowScripts": {
 		"esbuild@0.28.2": true,

packages/icons/package.json

@@ -20,14 +20,14 @@
 		"build": "vite build && tsc -p tsconfig.json"
 	},
 	"peerDependencies": {
-		"react": "19.3.0"
+		"react": "19.3.1"
 	},
 	"devDependencies": {
-		"@storybook/react-vite": "10.6.0",
+		"@storybook/react-vite": "10.6.3",
 		"@testing-library/react": "16.3.3",
 		"@types/react": "19.3.0",
 		"typescript": "5.9.3",
-		"vite": "8.3.0",
+		"vite": "8.3.5",
-		"vitest": "5.0.0"
+		"vitest": "5.0.5"
 	}
 }

packages/ui/package.json

@@ -27,18 +27,18 @@
 		"@wealthledger/tokens": "0.3.0"
 	},
 	"peerDependencies": {
-		"@mantine/core": "9.6.1",
+		"@mantine/core": "9.7.3",
-		"@mantine/hooks": "9.6.1",
+		"@mantine/hooks": "9.7.3",
-		"react": "19.3.0",
+		"react": "19.3.1",
-		"react-dom": "19.3.0"
+		"react-dom": "19.3.1"
 	},
 	"devDependencies": {
-		"@storybook/react-vite": "10.6.0",
+		"@storybook/react-vite": "10.6.3",
 		"@testing-library/react": "16.3.3",
 		"@types/react": "19.3.0",
-		"storybook": "10.6.0",
+		"storybook": "10.6.3",
 		"typescript": "5.9.3",
-		"vite": "8.3.0",
+		"vite": "8.3.5",
-		"vitest": "5.0.0"
+		"vitest": "5.0.5"
 	}
 }

src/app/routes/AppRoutes/AllAccounts.test.tsx

@@ -303,14 +303,16 @@ describe("All accounts routes", () => {
 				"href",
 				`/accounts/${account.id}`,
 			);
-		for (const suffix of ["operations", "income", "events"])
+
-			expect(
+		for (const [suffix, tab] of [
-				screen
+			["operations", "Операции"],
-					.getAllByRole("link")
+			["income", "Доход"],
-					.find(
+			["events", "События"],
-						link => link.getAttribute("href") === `/accounts/all/${suffix}`,
+		]) {
-					),
+			fireEvent.click(screen.getByRole("tab", { name: tab }));
-			).toBeInTheDocument();
+			expect(screen.getByRole("link", { name: "Подробнее" }))
+				.toHaveAttribute("href", `/accounts/all/${suffix}`);
+		}
 	});
 
 	it("switches accounts within operations with applied filters and a fresh cursor", async () => {

src/app/routes/AppRoutes/AppRoutes.test.tsx

@@ -190,6 +190,30 @@ describe("AppRoutes", () => {
 		expect(document.title).toBe("Карты — WealthLedger");
 	});
 
+	it("offers a retry instead of the login form while the server is unreachable, then restores the route", async () => {
+		let isOutage = true;
+		server.use(
+			http.post("*/api/v1/auth/refresh", () =>
+				isOutage
+					? new HttpResponse(null, { status: 502 })
+					: HttpResponse.json({
+							accessToken: "test-token",
+							user: { email: "user@example.com", id: "user-1" },
+						}),
+			),
+		);
+		renderRoutes("/accounts");
+
+		expect(await screen.findByRole("alert")).toHaveTextContent("Не удалось подключиться");
+		expect(screen.queryByRole("heading", { name: "Вход" })).not.toBeInTheDocument();
+		isOutage = false;
+		fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
+
+		expect(
+			await screen.findByRole("heading", { level: 2, name: "Нет инвестиционных счетов" }),
+		).toBeVisible();
+	});
+
 	it("lazy-loads the protected shell for an authenticated accounts route", async () => {
 		server.use(
 			http.post("*/api/v1/auth/refresh", () =>
@@ -208,7 +232,8 @@ describe("AppRoutes", () => {
 			}),
 		).toBeInTheDocument();
 		expect(
-			screen.getByRole("navigation", { name: "WealthLedger" }),
+			screen.getAllByRole("navigation", { name: "Основная навигация" }),
-		).toBeInTheDocument();
+		).toHaveLength(2);
+		expect(screen.queryByRole("banner")).not.toBeInTheDocument();
 	});
 });

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

@@ -10,7 +10,6 @@ import { useAuth } from "@/features/auth";
 
 type BoundaryProps = PropsWithChildren<{
 	authenticated: boolean;
-	routeKey: string;
 }>;
 
 type RouteErrorFallbackProps = {
@@ -26,12 +25,6 @@ class Boundary extends Component<BoundaryProps, State> {
 
 	override state: State = { hasError: false };
 
-	override componentDidUpdate(previousProps: BoundaryProps) {
-		if (previousProps.routeKey !== this.props.routeKey && this.state.hasError) {
-			this.setState({ hasError: false });
-		}
-	}
-
 	override render() {
 		return this.state.hasError
 			? <RouteErrorFallback authenticated={this.props.authenticated} />
@@ -70,10 +63,7 @@ const RouteErrorBoundary: FC<PropsWithChildren> = (props) => {
 	const { user } = useAuth();
 
 	return (
-		<Boundary
+		<Boundary authenticated={Boolean(user)} key={`${pathname}${search}:${key}`}>
-			authenticated={Boolean(user)}
-			routeKey={`${pathname}${search}:${key}`}
-		>
 			{children}
 		</Boundary>
 	);

src/app/routes/RouteGuards.tsx

@@ -1,4 +1,7 @@
+import { Button, Container } from "@mantine/core";
+import { StateView } from "@wealthledger/ui";
 import { type FC, type PropsWithChildren, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Navigate, useLocation } from "react-router";
 
 import { useAuth } from "@/features/auth";
@@ -7,12 +10,26 @@ import { RouteSkeleton } from "./RouteFallback";
 
 const Protected: FC<PropsWithChildren> = (props) => {
 	const { children } = props;
-	const { ready, signedOut, user } = useAuth();
+	const { ready, retry, signedOut, unavailable, user } = useAuth();
+	const { t } = useTranslation();
 	const location = useLocation();
 	const [wasAuthenticated, setWasAuthenticated] = useState(false);
 	if (user && !wasAuthenticated) setWasAuthenticated(true);
 	if (!ready) return <RouteSkeleton variant="shell" />;
 
+	// The server was unreachable (e.g. mid-deploy), so the session is unproven, not gone.
+	if (!user && unavailable)
+		return (
+			<Container py="xl" size={560}>
+				<StateView
+					action={<Button onClick={retry}>{t("auth.retry")}</Button>}
+					error
+					text={t("auth.unavailableText")}
+					title={t("auth.unavailableTitle")}
+				/>
+			</Container>
+		);
+
 	const loginState = signedOut && wasAuthenticated
 		? undefined
 		: { returnTo: `${location.pathname}${location.search}` };

src/app/ui/AppShell/AppShell.module.css

@@ -1,12 +1,22 @@
+.root {
+	--bottom-nav-height: 56px;
+}
+
 .content {
 	max-width: 1120px;
 	margin-inline: auto;
 }
 
-.header {
+.brand {
 	align-items: center;
+	border-bottom: 1px solid var(--mantine-color-gray-3);
 	display: flex;
-	padding: 0 var(--mantine-spacing-md);
+	min-height: 60px;
+	padding-inline: var(--mantine-spacing-sm);
+}
+
+.navList {
+	padding: var(--mantine-spacing-sm);
 }
 
 .bottomNav {
@@ -52,29 +62,85 @@
 	.bottomNav {
 		background: var(--mantine-color-white);
 		border-top: 1px solid var(--mantine-color-gray-3);
-		bottom: 0;
+		display: grid;
-		display: flex;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
-		justify-content: space-around;
+		inset: auto 0 0;
-		left: 0;
+		min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
-		padding: var(--mantine-spacing-xs) 2px;
+		padding-bottom: env(safe-area-inset-bottom, 0px);
-		gap: 2px;
+		padding-inline:
-		font-size: 11px;
+			max(4px, env(safe-area-inset-left, 0px))
-		& a {
+			max(4px, env(safe-area-inset-right, 0px));
-			min-width: 0;
-			padding: 8px 2px;
-			text-align: center;
-		}
 		position: fixed;
-		right: 0;
+		z-index: var(--mantine-z-index-app);
-		z-index: 200;
+	}
+
+	.bottomNavItem {
+		align-items: center;
+		color: var(--mantine-color-gray-7);
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+		justify-content: center;
+		min-height: var(--bottom-nav-height);
+		min-width: 0;
+		text-decoration: none;
+
+		&:active .iconPill {
+			background-color: var(--mantine-color-gray-1);
+		}
+
+		&:focus-visible {
+			outline: 2px solid var(--mantine-primary-color-filled);
+			outline-offset: -2px;
+		}
+	}
+
+	@media (hover: hover) {
+		.bottomNavItem:hover .iconPill {
+			background-color: var(--mantine-color-gray-1);
+		}
+	}
+
+	.iconPill {
+		align-items: center;
+		border-radius: 14px;
+		display: inline-flex;
+		height: 28px;
+		justify-content: center;
+		width: 48px;
+	}
+
+	.bottomNavLabel {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 16px;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		.bottomNavItem,
+		.iconPill {
+			transition:
+				background-color 150ms ease-in-out,
+				color 150ms ease-in-out;
+		}
 	}
 
 	.active {
 		color: var(--mantine-primary-color-filled);
-		font-weight: 600;
+
+		& .iconPill {
+			background-color: var(--mantine-primary-color-light);
+		}
 	}
 
 	.main {
-		padding-bottom: 5rem;
+		padding-bottom: calc(
+			var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px) +
+				var(--mantine-spacing-md)
+		);
 	}
 }

src/app/ui/AppShell/AppShell.test.tsx

@@ -0,0 +1,47 @@
+import { MantineProvider } from "@mantine/core";
+import { render, screen, within } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it } from "vitest";
+
+import { AppShell } from "./AppShell";
+
+function renderShell(path: string) {
+	return render(
+		<MantineProvider>
+			<MemoryRouter initialEntries={[path]}>
+				<AppShell />
+			</MemoryRouter>
+		</MantineProvider>,
+	);
+}
+
+describe("AppShell", () => {
+	it("has no header banner", () => {
+		renderShell("/cards");
+
+		expect(screen.queryByRole("banner")).not.toBeInTheDocument();
+	});
+
+	it("marks only the current bottom navigation item", () => {
+		renderShell("/cards");
+
+		const bottomNav = screen
+			.getAllByRole("navigation", { name: "Основная навигация" })
+			.at(-1);
+
+		if (!bottomNav) {
+			throw new Error("Bottom navigation is not rendered");
+		}
+
+		const links = within(bottomNav).getAllByRole("link");
+
+		expect(links).toHaveLength(5);
+		expect(within(bottomNav).getByRole("link", { name: "Карты" })).toHaveAttribute(
+			"aria-current",
+			"page",
+		);
+		expect(
+			within(bottomNav).getByRole("link", { name: "Счета" }),
+		).not.toHaveAttribute("aria-current");
+	});
+});

src/app/ui/AppShell/AppShell.tsx

@@ -17,6 +17,12 @@ type AppShellProps = {
 	contentAboveOutlet?: ReactNode;
 };
 
+function getBottomNavItemClass({ isActive }: { isActive: boolean }) {
+	return isActive
+		? `${classes.bottomNavItem} ${classes.active}`
+		: classes.bottomNavItem;
+}
+
 const AppShell: FC<AppShellProps> = (props) => {
 	const { contentAboveOutlet } = props;
 	const { t } = useTranslation();
@@ -24,31 +30,31 @@ const AppShell: FC<AppShellProps> = (props) => {
 
 	const items = [
 		{
-			icon: <PortfolioIcon size={20} />,
+			Icon: PortfolioIcon,
 			iconClassName: classes.portfolioIcon,
 			label: t("navigation.accounts"),
 			to: "/accounts",
 		},
 		{
-			icon: <CardsIcon size={20} />,
+			Icon: CardsIcon,
 			iconClassName: classes.cardsIcon,
 			label: t("navigation.cards"),
 			to: "/cards",
 		},
 		{
-			icon: <StocksIcon size={20} />,
+			Icon: StocksIcon,
 			iconClassName: classes.stocksIcon,
 			label: t("navigation.stocks"),
 			to: "/stocks",
 		},
 		{
-			icon: <BondsIcon size={20} />,
+			Icon: BondsIcon,
 			iconClassName: classes.bondsIcon,
 			label: t("navigation.bonds"),
 			to: "/bonds",
 		},
 		{
-			icon: <SettingsIcon size={20} />,
+			Icon: SettingsIcon,
 			iconClassName: classes.settingsIcon,
 			label: t("navigation.settings"),
 			to: "/settings",
@@ -57,32 +63,32 @@ const AppShell: FC<AppShellProps> = (props) => {
 
 	return (
 		<MantineAppShell
-			header={{ height: 60 }}
+			className={classes.root}
 			navbar={{ breakpoint: "sm", collapsed: { mobile: true }, width: 220 }}
 			padding="md"
 		>
-			<MantineAppShell.Header className={classes.header}>
+			<MantineAppShell.Navbar aria-label={t("navigation.primary")}>
-				<Text fw={700}>{t("appName")}</Text>
+				<div className={classes.brand}>
-			</MantineAppShell.Header>
+					<Text fw={700}>{t("appName")}</Text>
+				</div>
 
-			<MantineAppShell.Navbar p="sm">
+				<div className={classes.navList}>
-				{items.map(item => (
+					{items.map(item => (
-					<NavLink
+						<NavLink
-						active={pathname.startsWith(item.to)}
+							active={pathname.startsWith(item.to)}
-						className={classes.navLink}
+							className={classes.navLink}
-						component={RouterNavLink}
+							component={RouterNavLink}
-						key={item.to}
+							key={item.to}
-						label={item.label}
+							label={item.label}
-						leftSection={(
+							leftSection={(
-							<span
+								<span className={`${classes.navIcon} ${item.iconClassName}`}>
-								className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
+									<item.Icon size={20} />
-							>
+								</span>
-								{item.icon}
+							)}
-							</span>
+							to={item.to}
-						)}
+						/>
-						to={item.to}
+					))}
-					/>
+				</div>
-				))}
 			</MantineAppShell.Navbar>
 
 			<MantineAppShell.Main className={classes.main}>
@@ -93,22 +99,23 @@ const AppShell: FC<AppShellProps> = (props) => {
 				</div>
 			</MantineAppShell.Main>
 
-			<nav aria-label={t("appName")} className={classes.bottomNav}>
+			<nav
-				{items.map((item) => {
+				aria-label={t("navigation.primary")}
-					const appearanceClass = pathname.startsWith(item.to)
+				className={classes.bottomNav}
-						? classes.active
+			>
-						: undefined;
+				{items.map(item => (
+					<RouterNavLink
+						className={getBottomNavItemClass}
+						key={item.to}
+						to={item.to}
+					>
+						<span className={classes.iconPill}>
+							<item.Icon size={24} />
+						</span>
 
-					return (
+						<span className={classes.bottomNavLabel}>{item.label}</span>
-						<RouterNavLink
+					</RouterNavLink>
-							className={appearanceClass}
+				))}
-							key={item.to}
-							to={item.to}
-						>
-							{item.label}
-						</RouterNavLink>
-					);
-				})}
 			</nav>
 		</MantineAppShell>
 	);

src/entities/brokerage-event/ui/BrokerageEventsPreview/BrokerageEventsPreview.tsx

@@ -12,6 +12,7 @@ import { BrokerageEventCard } from "../BrokerageEventCard";
 
 type BrokerageEventsPreviewProps = {
 	events: BrokerageEventsPreviewState;
+	moreLabel?: string;
 };
 
 type BrokerageEventsPreviewState
@@ -51,7 +52,7 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
 				))}
 
 			<Button component={Link} to={events.to} variant="subtle">
-				{t("events.open")}
+				{props.moreLabel ?? t("events.open")}
 			</Button>
 		</Stack>
 	);

src/features/auth/model/auth-context.ts

@@ -7,7 +7,12 @@ type AuthContextValue = {
 	logout: () => Promise<void>;
 	ready: boolean;
 	register: (email: string, password: string) => Promise<void>;
+	retry: () => void;
 	signedOut: boolean;
+	/**
+	Refresh failed with a network error or 5xx; the refresh cookie may still be valid.
+	*/
+	unavailable: boolean;
 	user: undefined | User;
 };
 

src/features/auth/model/auth.test.tsx

@@ -92,8 +92,10 @@ describe("AuthProvider", () => {
 		);
 	});
 
-	it("settles unauthenticated and clears cached data when cold-start refresh has a transport error", async () => {
+	it("settles unauthenticated and clears cached data when cold-start refresh is rejected with 401", async () => {
-		server.use(http.post("*/api/v1/auth/refresh", () => HttpResponse.error()));
+		server.use(http.post("*/api/v1/auth/refresh", () =>
+			HttpResponse.json({ code: "UNAUTHORIZED" }, { status: 401 }),
+		));
 		const queryClient = createTestQueryClient();
 		queryClient.setQueryData(["cached-query"], { value: "stale" });
 		queryClient.setQueryData(bankCardsKey, [{ id: "bank-card-1" }]);
@@ -103,12 +105,54 @@ describe("AuthProvider", () => {
 		await waitFor(() => expect(result.current.ready).toBe(true));
 
 		expect(result.current.user).toBeUndefined();
+		expect(result.current.unavailable).toBe(false);
 		expect(await requestAuthorization()).toBeNull();
 		expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
 		expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
 	});
 
-	it("keeps the original protected 401 when serialized refresh has a transport error", async () => {
+	it.each([
+		["a transport error", () => HttpResponse.error()],
+		["a 502 from the proxy", () => new HttpResponse(null, { status: 502 })],
+		["a 503 problem", () => HttpResponse.json({ code: "INTERNAL_SERVER_ERROR" }, { status: 503 })],
+	])("settles as unavailable and keeps cached data when cold-start refresh gets %s", async (_name, failure) => {
+		server.use(http.post("*/api/v1/auth/refresh", failure));
+		const queryClient = createTestQueryClient();
+		queryClient.setQueryData(["cached-query"], { value: "kept" });
+		const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => expect(result.current.ready).toBe(true));
+
+		expect(result.current.user).toBeUndefined();
+		expect(result.current.unavailable).toBe(true);
+		expect(queryClient.getQueryData(["cached-query"])).toEqual({ value: "kept" });
+	});
+
+	it("restores the session when retry succeeds after an outage", async () => {
+		let isOutage = true;
+		server.use(http.post("*/api/v1/auth/refresh", () =>
+			isOutage
+				? new HttpResponse(null, { status: 502 })
+				: HttpResponse.json({
+						accessToken: "restored-token",
+						user: { email: "user@example.com", id: "user-1" },
+					}),
+		));
+		const queryClient = createTestQueryClient();
+		const wrapper: FC<PropsWithChildren> = createAuthWrapper(queryClient);
+		const { result } = renderHook(() => useAuth(), { wrapper });
+
+		await waitFor(() => expect(result.current.unavailable).toBe(true));
+		isOutage = false;
+		act(() => result.current.retry());
+
+		await waitFor(() => expect(result.current.user?.id).toBe("user-1"));
+		expect(result.current.unavailable).toBe(false);
+		expect(await requestAuthorization()).toBe("Bearer restored-token");
+	});
+
+	it("keeps the original protected 401 and the session when serialized refresh has a transport error", async () => {
 		let refreshCalls = 0;
 		server.use(
 			http.post("*/api/v1/auth/refresh", () => {
@@ -137,10 +181,11 @@ describe("AuthProvider", () => {
 		const response = await apiClient.GET("/api/v1/brokerage-accounts");
 
 		expect(response.response.status).toBe(401);
-		await waitFor(() => expect(result.current.user).toBeUndefined());
+		// An unreachable server does not prove the session ended; the next 401 refreshes again.
-		expect(await requestAuthorization()).toBeNull();
+		await waitFor(() => expect(result.current.unavailable).toBe(true));
-		expect(queryClient.getQueryData(["cached-query"])).toBeUndefined();
+		expect(result.current.user?.id).toBe("user-1");
-		expect(queryClient.getQueryData(bankCardsKey)).toBeUndefined();
+		expect(queryClient.getQueryData(["cached-query"])).toEqual({ value: "stale" });
+		expect(queryClient.getQueryData(bankCardsKey)).toEqual([{ id: "bank-card-1" }]);
 	});
 
 	it("clears connection status and financial cache independently on logout", async () => {

src/features/auth/model/auth.vm.ts

@@ -5,6 +5,9 @@ import { apiClient, configureAuthClient, type paths } from "@/shared/api";
 
 import { type User } from "./auth-context";
 
+// A 5xx or network error means the server is unreachable, not that the session ended.
+const HTTP_SERVER_ERROR = 500;
+
 type Authentication
 	= paths["/api/v1/auth/login"]["post"]["responses"][200]["content"]["application/json"];
 
@@ -32,6 +35,8 @@ function useAuthProviderVm() {
 	const accessTokenRef = useRef<string | undefined>(undefined);
 	const [ready, setReady] = useState(false);
 	const [signedOut, setSignedOut] = useState(false);
+	const [unavailable, setUnavailable] = useState(false);
+	const unavailableRef = useRef(false);
 
 	const generationRef = useRef(0);
 	const userRef = useRef<undefined | User>(undefined);
@@ -49,12 +54,18 @@ function useAuthProviderVm() {
 		return next;
 	}, []);
 
+	const markUnavailable = useCallback((isUnavailable: boolean) => {
+		unavailableRef.current = isUnavailable;
+		setUnavailable(isUnavailable);
+	}, []);
+
 	const applyAuthentication = useCallback(
 		(authentication: Authentication) => {
 			const changedIdentity
 				= userRef.current && userRef.current.id !== authentication.user.id;
 
 			setSignedOut(false);
+			markUnavailable(false);
 			accessTokenRef.current = authentication.accessToken;
 
 			if (changedIdentity) {
@@ -67,16 +78,17 @@ function useAuthProviderVm() {
 			userRef.current = authentication.user;
 			setUser(authentication.user);
 		},
-		[queryClient],
+		[markUnavailable, queryClient],
 	);
 
 	const clearSession = useCallback(() => {
+		markUnavailable(false);
 		generationRef.current += 1;
 		userRef.current = undefined;
 		setUser(undefined);
 		accessTokenRef.current = undefined;
 		queryClient.clear();
-	}, [queryClient]);
+	}, [markUnavailable, queryClient]);
 
 	const refresh = useCallback((): Promise<boolean> => {
 		if (refreshPromiseRef.current) return refreshPromiseRef.current;
@@ -86,11 +98,12 @@ function useAuthProviderVm() {
 			if (started !== generationRef.current) return false;
 
 			try {
-				const { data } = await apiClient.POST("/api/v1/auth/refresh");
+				const { data, response } = await apiClient.POST("/api/v1/auth/refresh");
 				if (started !== generationRef.current) return false;
 
 				if (!data) {
-					clearSession();
+					if (response.status >= HTTP_SERVER_ERROR) markUnavailable(true);
+					else clearSession();
 
 					return false;
 				}
@@ -100,7 +113,7 @@ function useAuthProviderVm() {
 				return true;
 			}
 			catch {
-				if (started === generationRef.current) clearSession();
+				if (started === generationRef.current) markUnavailable(true);
 
 				return false;
 			}
@@ -112,7 +125,7 @@ function useAuthProviderVm() {
 		refreshPromiseRef.current = pending;
 
 		return pending;
-	}, [applyAuthentication, clearSession, serialize]);
+	}, [applyAuthentication, clearSession, markUnavailable, serialize]);
 
 	useEffect(() => {
 		void refresh().finally(() => setReady(true));
@@ -146,6 +159,7 @@ function useAuthProviderVm() {
 			clear: clearSession,
 			generation: () => generationRef.current,
 			refresh,
+			unavailable: () => unavailableRef.current,
 		});
 	});
 	useEffect(() => () => configureAuthClient(), []);
@@ -157,7 +171,9 @@ function useAuthProviderVm() {
 		ready,
 		register: (email: string, password: string) =>
 			authenticate("/api/v1/auth/register", email, password),
+		retry: () => void refresh(),
 		signedOut,
+		unavailable,
 		user,
 	};
 

src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.filters.test.tsx

@@ -17,7 +17,7 @@ import {
 	useLocation,
 	useNavigate,
 } from "react-router";
-import { beforeEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import { configureAuthClient } from "@/shared/api";
 import { defaultPeriod, formatDate, moscowDate } from "@/shared/lib";
@@ -72,7 +72,14 @@ function renderEvents(accountId: string, searches: string[]) {
 }
 
 describe("Upcoming event date filters", () => {
+	afterEach(() => {
+		vi.useRealTimers();
+	});
 	beforeEach(() => {
+		// Pin "today": the test picks today + 10 days, which must be inside the visible calendar grid.
+		// Real dates can push it beyond the grid (e.g. 2026-10-23 -> 2 November).
+		vi.useFakeTimers({ toFake: ["Date"] });
+		vi.setSystemTime(new Date("2026-08-10T09:00:00Z"));
 		configureAuthClient({
 			accessToken: () => "token",
 			clear: vi.fn(),
@@ -80,6 +87,8 @@ describe("Upcoming event date filters", () => {
 		});
 	});
 
+	afterEach(() => vi.useRealTimers());
+
 	it("keeps reads and sync disabled without an account scope", async () => {
 		const requests: string[] = [];
 		server.use(
@@ -229,6 +238,10 @@ describe("Upcoming event date filters", () => {
 	it.each(["account-1", "all"])(
 		"applies dates only on submit, restores URL dates, and resets from empty results for %s",
 		async (accountId) => {
+			// Pin "today" mid-month so "today + 10 days" stays in the calendar's
+			// visible month regardless of the real date.
+			vi.useFakeTimers({ toFake: ["Date"] });
+			vi.setSystemTime(new Date("2026-10-15T12:00:00+03:00"));
 			const [defaultFrom, defaultTo] = defaultPeriod();
 			const searches: string[] = [];
 			server.use(

src/pages/account/model/positions.test.ts

@@ -2,9 +2,19 @@ import { describe, expect, it } from "vitest";
 
 import type { Portfolio } from "@/entities/portfolio";
 
-import { toAccountPagePositionSections } from "./positions";
+import {
+	formatPositionReturnPercent,
+	toAccountPagePositionSections,
+	toUnrealizedReturns,
+} from "./positions";
 import { portfolio, position, second } from "./positions.fixtures";
 
+function makePosition(
+	overrides: Partial<Portfolio["positions"][number]>,
+): Portfolio["positions"][number] {
+	return { ...position, ...overrides };
+}
+
 function sections(positions: Portfolio["positions"]) {
 	return toAccountPagePositionSections({
 		...portfolio,
@@ -82,6 +92,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Акция",
 						logoSrc: "https://invest-brands.cdn-tinkoff.ru/akciyax160.png",
+						returnPercent: null,
+						returnPercentText: null,
 						returnText: "+10 ₽",
 						returnTone: "positive",
 						shareText: "66,7 %",
@@ -95,6 +107,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Облигация",
 						logoSrc: null,
+						returnPercent: "-11.111111",
+						returnPercentText: "-11,11 %",
 						returnText: "-5 ₽",
 						returnTone: "negative",
 						shareText: "33,3 %",
@@ -107,6 +121,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Фонд",
 						logoSrc: null,
+						returnPercent: null,
+						returnPercentText: null,
 						returnText: null,
 						returnTone: undefined,
 						shareText: null,
@@ -187,3 +203,109 @@ describe("account position sections", () => {
 		expect(source).toEqual(before);
 	});
 });
+
+describe("account position returns", () => {
+	it.each([
+		{
+			absoluteReturn: { currency: "RUB", value: "25" },
+			averagePurchasePrice: { currency: "RUB", value: "280" },
+			expected: "7.142857",
+			name: "gain",
+			quantity: "1.25",
+			type: "STOCK",
+		},
+		{
+			absoluteReturn: { currency: "RUB", value: "-25" },
+			averagePurchasePrice: { currency: "RUB", value: "280" },
+			expected: "-7.142857",
+			name: "loss",
+			quantity: "1.25",
+			type: "STOCK",
+		},
+		{
+			absoluteReturn: { currency: "RUB", value: "-5" },
+			averagePurchasePrice: { currency: "RUB", value: "45" },
+			expected: "-11.111111",
+			name: "bond without accrued interest",
+			quantity: "1",
+			type: "BOND",
+		},
+	] as const)("calculates $name from the clean purchase cost", (testCase) => {
+		const result = sections([makePosition({
+			absoluteReturn: testCase.absoluteReturn,
+			averagePurchasePrice: testCase.averagePurchasePrice,
+			quantity: testCase.quantity,
+			type: testCase.type,
+		})]);
+
+		expect(result[0]?.groups[0]?.positions[0].returnPercent)
+			.toBe(testCase.expected);
+	});
+
+	it.each([
+		{ name: "zero quantity", overrides: { quantity: "0" } },
+		{ name: "negative quantity", overrides: { quantity: "-1" } },
+		{ name: "missing average price", overrides: { averagePurchasePrice: null } },
+		{
+			name: "currency mismatch",
+			overrides: { averagePurchasePrice: { currency: "USD", value: "280" } },
+		},
+		{ name: "zero cost", overrides: { averagePurchasePrice: { currency: "RUB", value: "0" } } },
+	])("returns null for $name", ({ overrides }) => {
+		const result = sections([makePosition({
+			absoluteReturn: { currency: "RUB", value: "25" },
+			averagePurchasePrice: { currency: "RUB", value: "280" },
+			quantity: "1.25",
+			...overrides,
+		})]);
+
+		expect(result[0]?.groups[0]?.positions[0].returnPercent).toBeNull();
+	});
+
+	it.each([
+		{ absoluteReturn: "1", expected: "0.000001" },
+		{ absoluteReturn: "-1", expected: "-0.000001" },
+	])("rounds an exact half away from zero for $absoluteReturn", (testCase) => {
+		const result = sections([makePosition({
+			absoluteReturn: { currency: "RUB", value: testCase.absoluteReturn },
+			averagePurchasePrice: { currency: "RUB", value: "200000000" },
+			quantity: "1",
+		})]);
+
+		expect(result[0]?.groups[0]?.positions[0].returnPercent)
+			.toBe(testCase.expected);
+	});
+
+	it.each([
+		{ expected: "+1.01", value: "1.005" },
+		{ expected: "-1.01", value: "-1.005" },
+	])("formats $value for display with a sign and two decimals", (testCase) => {
+		expect(formatPositionReturnPercent(testCase.value)).toBe(testCase.expected);
+	});
+
+	it("sums complete unrealized returns by currency", () => {
+		const result = toUnrealizedReturns([
+			makePosition({ absoluteReturn: { currency: "RUB", value: "0.1" } }),
+			makePosition({ absoluteReturn: { currency: "RUB", value: "0.2" } }),
+			makePosition({ absoluteReturn: { currency: "USD", value: "-2.5" } }),
+		]);
+
+		expect(result).toEqual([
+			{ currency: "RUB", value: "0.3" },
+			{ currency: "USD", value: "-2.5" },
+		]);
+	});
+
+	it("omits only currencies with incomplete returns", () => {
+		const result = toUnrealizedReturns([
+			makePosition({ absoluteReturn: { currency: "RUB", value: "10" } }),
+			makePosition({
+				absoluteReturn: null,
+				currentValue: { currency: "RUB", value: "100" },
+			}),
+			makePosition({ absoluteReturn: { currency: "USD", value: "2" } }),
+		]);
+
+		expect(result).toEqual([{ currency: "USD", value: "2" }]);
+	});
+});

src/pages/account/model/positions.ts

@@ -1,9 +1,11 @@
 import { formatShare, type Portfolio } from "@/entities/portfolio";
-import { formatMoney, instrumentLogoUrl } from "@/shared/lib";
+import { formatDecimal, formatMoney, instrumentLogoUrl } from "@/shared/lib";
 
 type AccountPagePosition = Portfolio["positions"][number] & {
 	instrumentTo?: string;
 	logoSrc: null | string;
+	returnPercent: null | string;
+	returnPercentText: null | string;
 	returnText: null | string;
 	returnTone?: AccountPageReturnTone;
 	shareText: null | string;
@@ -21,10 +23,73 @@ type AccountPagePositionSection = {
 
 type AccountPageReturnTone = "negative" | "positive";
 
+type Decimal = { scale: number; value: bigint };
+
+type Money = NonNullable<Portfolio["positions"][number]["absoluteReturn"]>;
+
 type PositionSectionKind = "bonds"
 	| "other"
 	| "stocks";
 
+const RADIX = 10n;
+const DECIMAL_PARTS = 2;
+const PERCENT_SCALE = 6;
+const DISPLAY_PERCENT_SCALE = 2;
+const PERCENT_FACTOR = 100n;
+const ROUNDING_FACTOR = 2n;
+
+function decimalFromString(value: string): Decimal {
+	const [whole = "0", fraction = ""] = value.split(".", DECIMAL_PARTS);
+
+	return { scale: fraction.length, value: BigInt(`${whole}${fraction}`) };
+}
+
+function decimalToString(decimal: Decimal): string {
+	const sign = decimal.value < 0n ? "-" : "";
+
+	const digits = (decimal.value < 0n ? -decimal.value : decimal.value)
+		.toString()
+		.padStart(decimal.scale + 1, "0");
+
+	const whole = decimal.scale
+		? digits.slice(0, -decimal.scale)
+		: digits;
+
+	let fraction = decimal.scale ? digits.slice(-decimal.scale) : "";
+
+	while (fraction.endsWith("0")) fraction = fraction.slice(0, -1);
+
+	const suffix = fraction ? `.${fraction}` : "";
+
+	return `${sign}${whole}${suffix}`;
+}
+
+function formatPositionReturnPercent(value: string): string {
+	const decimal = decimalFromString(value);
+	let rounded = decimal.value;
+
+	if (decimal.scale > DISPLAY_PERCENT_SCALE) {
+		const divisor = RADIX ** BigInt(decimal.scale - DISPLAY_PERCENT_SCALE);
+		const remainder = rounded % divisor;
+		const absoluteRemainder = remainder < 0n ? -remainder : remainder;
+		rounded /= divisor;
+
+		if (absoluteRemainder * ROUNDING_FACTOR >= divisor) {
+			rounded += decimal.value < 0n ? -1n : 1n;
+		}
+	}
+	else {
+		rounded *= RADIX ** BigInt(DISPLAY_PERCENT_SCALE - decimal.scale);
+	}
+
+	const sign = rounded > 0n ? "+" : "";
+
+	return `${sign}${decimalToString({
+		scale: DISPLAY_PERCENT_SCALE,
+		value: rounded,
+	})}`;
+}
+
 function groupPositions(
 	positions: AccountPagePosition[],
 ): AccountPagePositionGroup[] {
@@ -67,6 +132,53 @@ function positionIdentity(position: AccountPagePosition) {
 	return position.isin?.trim() ? ["isin", position.isin.trim()] : undefined;
 }
 
+function returnPercent(
+	position: Portfolio["positions"][number],
+): null | string {
+	const result = position.absoluteReturn;
+	const price = position.averagePurchasePrice;
+	if (!result || !price || result.currency !== price.currency) return null;
+
+	const quantity = decimalFromString(position.quantity);
+	const purchasePrice = decimalFromString(price.value);
+
+	const cost = {
+		scale: quantity.scale + purchasePrice.scale,
+		value: quantity.value * purchasePrice.value,
+	};
+
+	if (quantity.value <= 0n || cost.value <= 0n) return null;
+
+	const absoluteReturn = decimalFromString(result.value);
+
+	const numerator = absoluteReturn.value * PERCENT_FACTOR
+		* RADIX ** BigInt(cost.scale + PERCENT_SCALE);
+
+	const denominator = cost.value * RADIX ** BigInt(absoluteReturn.scale);
+	const remainder = numerator % denominator;
+
+	const isRoundsUp = (remainder < 0n ? -remainder : remainder) * ROUNDING_FACTOR
+		>= denominator;
+
+	const rounding = isRoundsUp ? 1n : 0n;
+	const signedRounding = numerator < 0n ? -rounding : rounding;
+	const rounded = numerator / denominator + signedRounding;
+
+	return decimalToString({ scale: PERCENT_SCALE, value: rounded });
+}
+
+function sumDecimals(values: Decimal[]): Decimal {
+	const scale = Math.max(...values.map(value => value.scale));
+
+	const sum = values.reduce(
+		(total, value) => total
+			+ value.value * RADIX ** BigInt(scale - value.scale),
+		0n,
+	);
+
+	return { scale, value: sum };
+}
+
 function toAccountPagePositionSections(
 	portfolio: Portfolio,
 ): AccountPagePositionSection[] {
@@ -111,6 +223,8 @@ function toPosition(
 	const returnPrefix
 		= isExpanded && returnValue !== null && returnValue > 0 ? "+" : "";
 
+	const percent = returnPercent(position);
+
 	return {
 		...position,
 		instrumentTo:
@@ -120,6 +234,10 @@ function toPosition(
 		logoSrc: isExpanded
 			? instrumentLogoUrl(position.logoName)
 			: null,
+		returnPercent: percent,
+		returnPercentText: percent
+			? `${formatDecimal(formatPositionReturnPercent(percent))} %`
+			: null,
 		returnText: position.absoluteReturn
 			? `${returnPrefix}${formatMoney(position.absoluteReturn)}`
 			: null,
@@ -162,9 +280,46 @@ function toSection(
 	};
 }
 
+function toUnrealizedReturns(
+	positions: Portfolio["positions"],
+): Money[] {
+	const totals = new Map<string, {
+		complete: boolean;
+		values: Decimal[];
+	}>();
+
+	for (const position of positions) {
+		const currencies = position.absoluteReturn
+			? [position.absoluteReturn.currency]
+			: [...new Set([
+					position.averagePurchasePrice?.currency,
+					position.currentValue?.currency,
+				].filter((currency): currency is string => !!currency))];
+
+		for (const currency of currencies) {
+			const total = totals.get(currency) ?? { complete: true, values: [] };
+
+			if (position.absoluteReturn) {
+				total.values.push(decimalFromString(position.absoluteReturn.value));
+			}
+			else {
+				total.complete = false;
+			}
+
+			totals.set(currency, total);
+		}
+	}
+
+	return [...totals].flatMap(([currency, total]) => total.complete
+		? [{ currency, value: decimalToString(sumDecimals(total.values)) }]
+		: []);
+}
+
 export {
 	type AccountPagePosition,
 	type AccountPagePositionGroup,
 	type AccountPagePositionSection,
+	formatPositionReturnPercent,
 	toAccountPagePositionSections,
+	toUnrealizedReturns,
 };

src/pages/account/ui/AccountPage/AccountPage.module.css

@@ -98,21 +98,13 @@
 	font-family: var(--mantine-font-family-monospace);
 }
 
-.accordionControl {
+.tabsList {
-	transition:
+	flex-wrap: nowrap;
-		background-color 150ms ease,
+	overflow-x: auto;
-		color 150ms ease;
 }
 
-.accordionLabel {
+.positionFilter {
-	font-size: var(--mantine-h2-font-size);
+	overflow-x: auto;
-	font-weight: var(--mantine-h2-font-weight);
-	line-height: var(--mantine-h2-line-height);
-}
-
-.accordionPanel {
-	padding-left: 0;
-	padding-right: 0;
 }
 
 .accountPositions {

src/pages/account/ui/AccountPage/AccountPage.test.tsx

@@ -1,6 +1,7 @@
 import { MantineProvider } from "@mantine/core";
 import { type QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import {
+	fireEvent,
 	render,
 	screen,
 	waitFor,
@@ -23,7 +24,10 @@ import type {
 	AccountPageRecentOperations,
 } from "../../model/previews";
 
-import { toAccountPagePositionSections } from "../../model/positions";
+import {
+	toAccountPagePositionSections,
+	toUnrealizedReturns,
+} from "../../model/positions";
 import { AccountPage } from "./AccountPage";
 import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
 import { AccountPageError } from "./components/AccountPageError.view";
@@ -142,6 +146,7 @@ function loadedProps(nextPortfolio: Portfolio = portfolio) {
 		positionSections: toAccountPagePositionSections(nextPortfolio),
 		recentEvents: emptyRecentEvents,
 		recentOperations: emptyRecentOperations,
+		unrealizedReturns: toUnrealizedReturns(nextPortfolio.positions),
 	};
 }
 
@@ -246,7 +251,7 @@ describe("AccountPage states", () => {
 		).toHaveTextContent("Данные о структуре портфеля пока недоступны.");
 		expect(
 			screen.getAllByRole("definition").map(node => node.textContent),
-		).toEqual(["1 234,5 ₽", "0,5 $"]);
+		).toEqual(["1 234,5 ₽"]);
 	});
 	it("keeps initial placeholders decorative without amounts or focus targets", () => {
 		const { container } = renderPage(<AccountPageLoading />);
@@ -309,8 +314,10 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
+
 		const balances = within(
-			screen.getByRole("region", { name: "Денежные остатки" }),
+			screen.getByRole("tabpanel", { name: "Деньги" }),
 		);
 
 		expect(
@@ -318,7 +325,12 @@ describe("AccountPage states", () => {
 		).toEqual(["234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
 		expect(
 			screen.getAllByRole("definition").map(node => node.textContent),
-		).toEqual(["1 234,5 ₽", "234,500000000000000001 ₽", "-0,5 $", "3,00 XYZ"]);
+		).toEqual([
+			"1 234,5 ₽",
+			"234,500000000000000001 ₽",
+			"-0,5 $",
+			"3,00 XYZ",
+		]);
 		expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
 		expect(
 			screen.queryByText(/полная оценка|общая стоимость/i),
@@ -341,6 +353,7 @@ describe("AccountPage states", () => {
 			);
 			renderAccountRoute(createTestQueryClient());
 			await screen.findByRole("heading", { level: 1, name: "Портфель" });
+			fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
 			expect(screen.getByRole("definition")).toHaveTextContent("0,5 $");
 			expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
 		},
@@ -381,9 +394,10 @@ describe("AccountPage states", () => {
 			).not.toBeInTheDocument();
 			expect(screen.queryByText("Торгуемая валюта")).not.toBeInTheDocument();
 			expect(screen.queryByText("Портфель пока пуст")).not.toBeInTheDocument();
+			fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
 			expect(
 				within(
-					screen.getByRole("region", { name: "Денежные остатки" }),
+					screen.getByRole("tabpanel", { name: "Деньги" }),
 				).queryByRole("definition"),
 			).not.toBeInTheDocument();
 			expect(
@@ -395,11 +409,25 @@ describe("AccountPage states", () => {
 		},
 	);
 
-	it("renders the empty state", () => {
+	it("renders the empty state with self-descriptive preview links", () => {
-		renderPage(<AccountPageEmpty {...emptyProps()} />);
+		renderPage(
+			<AccountPageEmpty
+				{...emptyProps()}
+				incomeSummary={{
+					state: "empty",
+					to: "/accounts/account-1/income",
+				}}
+			/>,
+		);
 		expect(
 			screen.getByRole("heading", { name: "Портфель пока пуст" }),
 		).toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Открыть журнал" }))
+			.toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Открыть будущие события" }))
+			.toBeInTheDocument();
+		expect(screen.getByRole("link", { name: "Открыть пассивный доход" }))
+			.toBeInTheDocument();
 	});
 
 	it("keeps a null portfolio envelope loading instead of an empty portfolio", async () => {
@@ -455,18 +483,22 @@ describe("AccountPage states", () => {
 		expect(screen.queryByText(/T-Bank временно недоступен/))
 			.not.toBeInTheDocument();
 		expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
-		expect(screen.getByRole("button", { name: "Акции" })).toBeInTheDocument();
+		expect(screen.getByRole("radio", { name: "Акции" })).toBeInTheDocument();
 		expect(
-			screen.getByRole("button", { name: "Облигации" }),
+			screen.getByRole("radio", { name: "Облигации" }),
 		).toBeInTheDocument();
 
-		const positions = screen
+		expect(
-			.getAllByText(/Вторая|Первая/)
+			screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
-			.map(element => element.textContent);
+		).toEqual(["stocks", "bonds"]);
-
+		expect(screen.getByText("Вторая")).toBeInTheDocument();
-		expect(positions).toEqual(["Вторая", "Первая"]);
-		expect(screen.getByText("10 ₽")).toBeInTheDocument();
 		expect(screen.getByText("-1 ₽")).toBeInTheDocument();
+		expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
+			"src",
+			"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
+		);
+		fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
+		expect(screen.getByText("10 ₽")).toBeInTheDocument();
 		expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
 		expect(
 			screen.getByText("Средняя цена: 11 ₽ · Доля: 100 %"),
@@ -475,10 +507,6 @@ describe("AccountPage states", () => {
 			screen.getByText("Количество: 1 · RU000A0JX0J2"),
 		).toBeInTheDocument();
 		expect(screen.queryByText("—")).not.toBeInTheDocument();
-		expect(screen.getByRole("img", { name: "Вторая" })).toHaveAttribute(
-			"src",
-			"https://invest-brands.cdn-tinkoff.ru/vtorayax160.png",
-		);
 	});
 
 	it.each(["STOCK", "BOND"] as const)(
@@ -515,8 +543,11 @@ describe("AccountPage states", () => {
 			expect(screen.getByText("Б")).toBeInTheDocument();
 			expect(screen.getByText("Н")).toBeInTheDocument();
 			expect(screen.getAllByRole("img")).toHaveLength(1);
-			for (const value of ["+3 ₽", "+2 ₽", "0 ₽"])
+
+			for (const value of ["+3 ₽", "+2 ₽", "0 ₽"]) {
 				expect(screen.getByText(value)).toBeInTheDocument();
+			}
+
 			expect(screen.queryByText(/Доход:/)).not.toBeInTheDocument();
 		},
 	);
@@ -564,6 +595,7 @@ describe("AccountPage states", () => {
 		expect(screen.queryByText("STOCK-ISIN")).not.toBeInTheDocument();
 		expect(screen.getByText("Количество: 2 · FALLBACK-ISIN"))
 			.toBeInTheDocument();
+		fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
 		expect(screen.getByText("Количество: 3 · BOND-ISIN"))
 			.toBeInTheDocument();
 		expect(screen.queryByText("OFZ")).not.toBeInTheDocument();
@@ -617,9 +649,11 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
 		expect(
 			screen.getByText("Пока недоступно"),
 		).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 	});
 
@@ -654,6 +688,7 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
 		expect(screen.getByText("Сделка")).toBeInTheDocument();
 		expect(screen.getByText("−12 ₽")).toBeInTheDocument();
 	});
@@ -707,7 +742,8 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
-		const section = screen.getByRole("region", { name: "Будущие события" });
+		fireEvent.click(screen.getByRole("tab", { name: "События" }));
+		const section = screen.getByRole("tabpanel", { name: "События" });
 		const content = within(section);
 		const text = section.textContent ?? "";
 
@@ -734,7 +770,7 @@ describe("AccountPage states", () => {
 		expect(content.queryByText("Без движения денег")).not.toBeInTheDocument();
 		expect(content.queryByText(/^\+/)).not.toBeInTheDocument();
 		expect(
-			content.getByRole("link", { name: "Открыть будущие события" }),
+			content.getByRole("link", { name: "Подробнее" }),
 		).toHaveAttribute("href", "/accounts/account-1/events");
 	});
 
@@ -748,8 +784,10 @@ describe("AccountPage states", () => {
 				/>,
 			);
 
+			fireEvent.click(screen.getByRole("tab", { name: "События" }));
+
 			const content = within(
-				screen.getByRole("region", { name: "Будущие события" }),
+				screen.getByRole("tabpanel", { name: "События" }),
 			);
 
 			if (state === "loading") {
@@ -770,7 +808,7 @@ describe("AccountPage states", () => {
 			}
 
 			expect(
-				content.getByRole("link", { name: "Открыть будущие события" }),
+				content.getByRole("link", { name: "Подробнее" }),
 			).toHaveAttribute("href", "/accounts/account-1/events");
 		},
 	);
@@ -786,9 +824,11 @@ describe("AccountPage states", () => {
 			/>,
 		);
 
+		fireEvent.click(screen.getByRole("tab", { name: "События" }));
 		expect(
 			screen.getByText("Данные появятся здесь, когда чтение восстановится."),
 		).toBeInTheDocument();
+		fireEvent.click(screen.getByRole("tab", { name: "Позиции" }));
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 	});
 
@@ -857,7 +897,7 @@ describe("AccountPage states", () => {
 			expect(screen.getByText("Вторая")).toBeInTheDocument();
 			expect(
 				screen.getAllByRole("definition").map(node => node.textContent),
-			).toEqual(["1 234,5 ₽", "0,5 $"]);
+			).toEqual(["1 234,5 ₽"]);
 			expect(screen.queryByRole("button", { name: "Повторить" }))
 				.not.toBeInTheDocument();
 			void queryClient.invalidateQueries({
@@ -867,7 +907,7 @@ describe("AccountPage states", () => {
 			expect(structure).toHaveTextContent("10 ₽");
 			expect(
 				screen.getAllByRole("definition").map(node => node.textContent),
-			).toEqual(["1 234,5 ₽", "0,5 $"]);
+			).toEqual(["1 234,5 ₽"]);
 			resolveRetry?.(
 				HttpResponse.json(
 					resource(
@@ -886,7 +926,7 @@ describe("AccountPage states", () => {
 			await waitFor(() =>
 				expect(
 					screen.getAllByRole("definition").map(node => node.textContent),
-				).toEqual(["-0,5 $", "2,50 €"]),
+				).toEqual(["-0,5 $"]),
 			);
 			expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
 			expect(structure).not.toHaveTextContent("10 ₽");
@@ -928,7 +968,7 @@ describe("AccountPage states", () => {
 		expect(screen.getByText("Вторая")).toBeInTheDocument();
 		expect(
 			screen.getAllByRole("definition").map(node => node.textContent),
-		).toEqual(["1 234,5 ₽", "0,5 $"]);
+		).toEqual(["1 234,5 ₽"]);
 		expect(screen.queryByText(/Данные получены/)).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole("status", { name: "Загрузка" }),
@@ -938,4 +978,96 @@ describe("AccountPage states", () => {
 
 		resolveRefresh?.(HttpResponse.json(resource(portfolio)));
 	});
+
+	it("opens positions by default and switches between local tabs", () => {
+		renderPage(<AccountPageLoaded {...loadedProps()} />);
+
+		expect(screen.getByRole("tab", { name: "Позиции" }))
+			.toHaveAttribute("aria-selected", "true");
+		expect(screen.getByText("Вторая")).toBeVisible();
+
+		fireEvent.click(screen.getByRole("tab", { name: "Деньги" }));
+		expect(screen.getByRole("tabpanel", { name: "Деньги" }))
+			.toBeVisible();
+		expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
+
+		fireEvent.click(screen.getByRole("tab", { name: "Операции" }));
+		expect(screen.getByText("Последних событий пока нет.")).toBeVisible();
+	});
+
+	it("links operation, event and income previews to their detail pages", () => {
+		renderPage(
+			<AccountPageLoaded
+				{...loadedProps()}
+				incomeSummary={{
+					state: "empty",
+					to: "/accounts/account-1/income",
+				}}
+			/>,
+		);
+
+		for (const [tab, href] of [
+			["Операции", "/accounts/account-1/operations"],
+			["События", "/accounts/account-1/events"],
+			["Доход", "/accounts/account-1/income"],
+		]) {
+			fireEvent.click(screen.getByRole("tab", { name: tab }));
+			expect(screen.getByRole("link", { name: "Подробнее" }))
+				.toHaveAttribute("href", href);
+		}
+	});
+
+	it("filters positions by the kinds present in the portfolio", () => {
+		renderPage(<AccountPageLoaded {...loadedProps()} />);
+
+		expect(
+			screen.getAllByRole<HTMLInputElement>("radio").map(radio => radio.value),
+		).toEqual(["stocks", "bonds"]);
+		expect(screen.getByText("Вторая")).toBeVisible();
+		expect(screen.queryByText("Первая")).not.toBeInTheDocument();
+		fireEvent.click(screen.getByRole("radio", { name: "Облигации" }));
+		expect(screen.getByText("Первая")).toBeVisible();
+		expect(screen.queryByText("Вторая")).not.toBeInTheDocument();
+	});
+
+	it("hides the position filter when only one kind exists", () => {
+		renderPage(
+			<AccountPageLoaded
+				{...loadedProps({
+					...portfolio,
+					positions: [portfolio.positions[0]],
+				})}
+			/>,
+		);
+
+		expect(screen.queryByRole("radiogroup", { name: "Тип позиции" }))
+			.not.toBeInTheDocument();
+	});
+
+	it("hides unrealized returns for a partial portfolio", () => {
+		renderPage(<AccountPageLoaded {...loadedProps()} partial />);
+
+		expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
+			.not.toBeInTheDocument();
+	});
+
+	it("omits an unrealized currency total when any return is incomplete", () => {
+		renderPage(
+			<AccountPageLoaded
+				{...loadedProps({
+					...portfolio,
+					positions: [
+						position({ absoluteReturn: { currency: "RUB", value: "10" } }),
+						position({
+							absoluteReturn: null,
+							currentValue: { currency: "RUB", value: "100" },
+						}),
+					],
+				})}
+			/>,
+		);
+
+		expect(screen.queryByRole("region", { name: "Нереализованный результат" }))
+			.not.toBeInTheDocument();
+	});
 });

src/pages/account/ui/AccountPage/AccountPage.tsx

@@ -31,6 +31,7 @@ const AccountPage: FC = () => {
 			positionSections={viewModel.positionSections}
 			recentEvents={viewModel.recentEvents}
 			recentOperations={viewModel.recentOperations}
+			unrealizedReturns={viewModel.unrealizedReturns}
 		/>
 	);
 };

src/pages/account/ui/AccountPage/AccountPage.vm.ts

@@ -20,6 +20,7 @@ import { useInitialAvailability } from "@/shared/lib";
 import {
 	type AccountPagePositionSection,
 	toAccountPagePositionSections,
+	toUnrealizedReturns,
 } from "../../model/positions";
 import {
 	type AccountPageIncomeSummary,
@@ -48,6 +49,7 @@ type AccountPageLoadedViewModel = AccountPageContent & {
 	positionSections: AccountPagePositionSection[];
 	source?: InvestmentResourceMeta;
 	state: "loaded";
+	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
 type AccountPageViewModel
@@ -133,6 +135,7 @@ function useAccountPageViewModel(): AccountPageViewModel {
 		recentOperations,
 		source: portfolio.meta,
 		state: "loaded" as const,
+		unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
 	};
 }
 

src/pages/account/ui/AccountPage/components/AccountPageLoaded.view.tsx

@@ -1,6 +1,12 @@
-import type { FC } from "react";
+import {
-
+	Alert,
-import { Accordion, Alert, Stack } from "@mantine/core";
+	Group,
+	SegmentedControl,
+	Stack,
+	Tabs,
+	Text,
+} from "@mantine/core";
+import { type FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import type { BrokerageAccount } from "@/entities/brokerage-account";
@@ -8,6 +14,7 @@ import type { Portfolio } from "@/entities/portfolio";
 import type { InvestmentResourceMeta } from "@/shared/api";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
+import { formatMoney } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 import { PortfolioStructure } from "@/widgets/portfolio-structure";
 
@@ -35,18 +42,27 @@ type AccountPageLoadedProps = {
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
 	source?: InvestmentResourceMeta;
+	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
+	const [filter, setFilter] = useState<string>();
 
-	const defaultValue = [
+	const activeSection = props.positionSections.find(
-		...props.positionSections.map(section => section.kind),
+		section => section.kind === filter,
-		"cash",
+	) ?? props.positionSections[0];
-		"recentOperations",
+
-		"recentEvents",
+	const positionKindLabels: Record<AccountPagePositionSection["kind"], string> = {
-		"incomeSummary",
+		bonds: t("portfolio.positionKinds.bonds"),
-	];
+		other: t("portfolio.positionKinds.other"),
+		stocks: t("portfolio.positionKinds.stocks"),
+	};
+
+	const filterOptions = props.positionSections.map(section => ({
+		label: positionKindLabels[section.kind],
+		value: section.kind,
+	}));
 
 	return (
 		<Stack gap="lg">
@@ -62,6 +78,26 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				? <Alert role="status">{t("investment.partial")}</Alert>
 				: <CurrencyCards amounts={props.portfolio.totalsByCurrency} />}
 
+			{!props.partial && props.unrealizedReturns.length > 0 && (
+				<Stack
+					aria-label={t("portfolio.unrealizedResult")}
+					component="section"
+					gap={4}
+				>
+					<Text fw={600}>{t("portfolio.unrealizedResult")}</Text>
+
+					<Group gap="md">
+						{props.unrealizedReturns.map(total => (
+							<Text key={total.currency}>{formatMoney(total)}</Text>
+						))}
+					</Group>
+
+					<Text c="dimmed" size="xs">
+						{t("portfolio.unrealizedResultCaption")}
+					</Text>
+				</Stack>
+			)}
+
 			{!props.partial && (
 				<PortfolioStructure
 					key={props.accountId}
@@ -69,70 +105,73 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				/>
 			)}
 
-			<Accordion
+			<Tabs
-				classNames={{
+				classNames={{ list: classes.tabsList }}
-					chevron: classes.accordionChevron,
+				defaultValue="positions"
-					control: classes.accordionControl,
+				keepMounted={false}
-					label: classes.accordionLabel,
-					panel: classes.accordionPanel,
-				}}
-				defaultValue={defaultValue}
-				multiple
 			>
-				{props.positionSections.map(section => (
+				<Tabs.List aria-label={t("portfolio.sections")} mb="md">
-					<Accordion.Item key={section.kind} value={section.kind}>
+					<Tabs.Tab value="positions">
-						<Accordion.Control>
+						{t("portfolio.tabs.positions")}
-							{t(positionSectionTitleKey(section.kind))}
+					</Tabs.Tab>
-						</Accordion.Control>
 
-						<Accordion.Panel>
+					<Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
-							<PositionSection section={section} />
-						</Accordion.Panel>
-					</Accordion.Item>
-				))}
 
-				<Accordion.Item value="cash">
+					<Tabs.Tab value="operations">
-					<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>
+						{t("portfolio.tabs.operations")}
+					</Tabs.Tab>
 
-					<Accordion.Panel>
+					<Tabs.Tab value="events">{t("portfolio.tabs.events")}</Tabs.Tab>
-						<CurrencyCards amounts={props.portfolio.cashBalances} />
-					</Accordion.Panel>
-				</Accordion.Item>
 
-				<Accordion.Item value="recentOperations">
+					<Tabs.Tab value="income">{t("portfolio.tabs.income")}</Tabs.Tab>
-					<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>
+				</Tabs.List>
 
-					<Accordion.Panel>
+				<Tabs.Panel value="positions">
-						<RecentOperations operations={props.recentOperations} />
+					<Stack gap="md">
-					</Accordion.Panel>
+						{props.positionSections.length > 1 && (
-				</Accordion.Item>
+							<div className={classes.positionFilter}>
-
+								<SegmentedControl
-				<Accordion.Item value="recentEvents">
+									aria-label={t("portfolio.positionFilter")}
-					<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>
+									data={filterOptions}
-
+									onChange={setFilter}
-					<Accordion.Panel>
+									value={activeSection?.kind}
-						<BrokerageEventsPreview events={props.recentEvents} />
+								/>
-					</Accordion.Panel>
+							</div>
-				</Accordion.Item>
-
-				<Accordion.Item value="incomeSummary">
-					<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
-
-					<Accordion.Panel>
-						{!!props.incomeSummary && (
-							<IncomeSummary {...props.incomeSummary} />
 						)}
-					</Accordion.Panel>
+
-				</Accordion.Item>
+						{activeSection && <PositionSection section={activeSection} />}
-			</Accordion>
+					</Stack>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="cash">
+					<CurrencyCards amounts={props.portfolio.cashBalances} />
+				</Tabs.Panel>
+
+				<Tabs.Panel value="operations">
+					<RecentOperations
+						moreLabel={t("portfolio.more")}
+						operations={props.recentOperations}
+					/>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="events">
+					<BrokerageEventsPreview
+						events={props.recentEvents}
+						moreLabel={t("portfolio.more")}
+					/>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="income">
+					{!!props.incomeSummary && (
+						<IncomeSummary
+							{...props.incomeSummary}
+							moreLabel={t("portfolio.more")}
+						/>
+					)}
+				</Tabs.Panel>
+			</Tabs>
 		</Stack>
 	);
 };
 
-function positionSectionTitleKey(kind: AccountPagePositionSection["kind"]) {
-	if (kind === "stocks") return "portfolio.stocks";
-
-	return kind === "bonds" ? "portfolio.bonds" : "portfolio.otherPositions";
-}
-
 export { AccountPageLoaded };

src/pages/account/ui/AccountPage/components/AccountPageLoading/AccountPageLoading.view.tsx

@@ -34,7 +34,9 @@ const AccountPageLoading: FC = () => {
 
 			<Skeleton height={260} radius="sm" />
 
-			{["first", "second", "third"].map(placeholder => <Skeleton height={52} key={placeholder} radius="sm" />)}
+			<Skeleton height={40} radius="sm" />
+
+			<Skeleton height={220} radius="sm" />
 		</LoadingSkeleton>
 	);
 };

src/pages/account/ui/AccountPage/components/IncomeSummary.view.tsx

@@ -9,8 +9,8 @@ import type { IncomeSummary as IncomeSummaryData } from "@/entities/income";
 
 import { formatMoney } from "@/shared/lib";
 
-type IncomeSummaryProps
+type IncomeSummaryProps = { moreLabel?: string } & (
-	= | {
+	| {
 		state: "empty";
 		to: string;
 	}
@@ -27,7 +27,8 @@ type IncomeSummaryProps
 	| {
 		state: "partial";
 		to: string;
-	};
+	}
+);
 
 const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 	const { t } = useTranslation();
@@ -56,7 +57,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 				<Text c="dimmed">{t("income.summaryEmpty")}</Text>
 
 				<Button component={Link} to={props.to} variant="subtle">
-					{t("income.open")}
+					{props.moreLabel ?? t("income.open")}
 				</Button>
 			</Stack>
 		);
@@ -75,7 +76,7 @@ const IncomeSummary: FC<IncomeSummaryProps> = (props) => {
 			))}
 
 			<Button component={Link} to={props.to} variant="subtle">
-				{t("income.open")}
+				{props.moreLabel ?? t("income.open")}
 			</Button>
 		</Stack>
 	);

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.stories.tsx

@@ -15,6 +15,8 @@ const syntheticPosition
 		logoName: null,
 		logoSrc: null,
 		quantity: "100",
+		returnPercent: "25",
+		returnPercentText: "+25,00 %",
 		returnText: "+5 000 ₽",
 		returnTone: "positive",
 		shareText: "20%",
@@ -73,6 +75,8 @@ export const BondLoss: Story
 					"Учебные облигации для долгосрочных накоплений, выпуск 2030",
 				isin: "DEMO-BOND-2030",
 				quantity: "10",
+				returnPercent: "-5",
+				returnPercentText: "-5,00 %",
 				returnText: "−500 ₽",
 				returnTone: "negative",
 				shareText: "7,6%",
@@ -123,6 +127,8 @@ export const MissingValuation: Story
 				averagePurchasePrice: null,
 				currentValue: null,
 				displayName: "Учебная позиция без текущей оценки",
+				returnPercent: null,
+				returnPercentText: null,
 				returnText: null,
 				returnTone: undefined,
 				shareText: null,

src/pages/account/ui/AccountPage/components/PositionCard/PositionCard.view.tsx

@@ -6,7 +6,10 @@ import { Link } from "react-router";
 
 import { formatMoney } from "@/shared/lib";
 
-import type { AccountPagePosition, AccountPagePositionSection } from "../../../../model/positions";
+import type {
+	AccountPagePosition,
+	AccountPagePositionSection,
+} from "../../../../model/positions";
 
 import classes from "../../AccountPage.module.css";
 import { PositionLogo } from "../PositionLogo.view";
@@ -26,8 +29,15 @@ const PositionCard: FC<PositionCardProps> = (props) => {
 		: undefined;
 
 	let returnText = position.returnText;
-	if (returnText && !isExpanded)
+
+	if (returnText && position.returnPercentText) {
+		returnText += ` · ${position.returnPercentText}`;
+	}
+
+	if (returnText && !isExpanded) {
 		returnText = t("portfolio.return", { value: returnText });
+	}
+
 	const instrumentTo = position.instrumentTo;
 
 	const identifier

src/pages/account/ui/AccountPage/components/PositionGroupCard.view.tsx

@@ -6,7 +6,10 @@ import { Link } from "react-router";
 
 import { formatMoney } from "@/shared/lib";
 
-import type { AccountPagePositionGroup, AccountPagePositionSection } from "../../../model/positions";
+import type {
+	AccountPagePositionGroup,
+	AccountPagePositionSection,
+} from "../../../model/positions";
 
 import classes from "../AccountPage.module.css";
 import { PositionLogo } from "./PositionLogo.view";
@@ -60,6 +63,16 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 						? classes[position.returnTone]
 						: undefined;
 
+					const returnPercent = position.returnPercentText
+						? ` · ${position.returnPercentText}`
+						: "";
+
+					const returnValue = `${position.returnText ?? ""}${returnPercent}`;
+
+					const returnText = kind === "other"
+						? t("portfolio.return", { value: returnValue })
+						: returnValue;
+
 					return (
 						<Stack
 							className={classes.accountPosition}
@@ -89,9 +102,7 @@ const PositionGroupCard: FC<PositionGroupCardProps> = (props) => {
 
 								{!!position.returnText && (
 									<Text className={appearanceClass} size="sm">
-										{kind === "other"
+										{returnText}
-											? t("portfolio.return", { value: position.returnText })
-											: position.returnText}
 									</Text>
 								)}
 							</Group>

src/pages/account/ui/AccountPage/components/RecentOperations.view.tsx

@@ -10,6 +10,7 @@ import { LedgerEntryRow } from "@/entities/broker-operation";
 import type { AccountPageRecentOperations } from "../../../model/previews";
 
 type RecentOperationsProps = {
+	moreLabel?: string;
 	operations: AccountPageRecentOperations;
 };
 
@@ -44,7 +45,7 @@ const RecentOperations: FC<RecentOperationsProps> = (props) => {
 				))}
 
 			<Button component={Link} to={operations.to} variant="subtle">
-				{t("ledger.open")}
+				{props.moreLabel ?? t("ledger.open")}
 			</Button>
 		</Stack>
 	);

src/pages/account/ui/AccountPage/position-groups.test.tsx

@@ -36,6 +36,8 @@ describe("Positions grouped by security", () => {
 		).toHaveAttribute("href", "/accounts/a");
 		expect(within(rows[0]).getByText("Количество: 1.25")).toBeInTheDocument();
 		expect(within(rows[0]).getByText("375 ₽")).toBeInTheDocument();
+		expect(within(rows[0]).getByText("+25 ₽ · +7,14 %"))
+			.toBeInTheDocument();
 		expect(
 			within(rows[0]).getByText("Средняя цена: 280 ₽"),
 		).toBeInTheDocument();

src/pages/account/ui/AccountPage/position-layout.browser.test.tsx

@@ -40,6 +40,8 @@ it("keeps expanded positions vertical while other positions adapt to the viewpor
 					logoName: null,
 					logoSrc: null,
 					quantity: "10",
+					returnPercent: null,
+					returnPercentText: null,
 					returnText: null,
 					shareText: null,
 					ticker: null,

src/pages/stock/ui/StockPage/StockPage.test.tsx

@@ -413,7 +413,9 @@ describe("stock page", () => {
 		expect(await screen.findByText("Продажа")).toBeVisible();
 		expect(screen.getByText("2 шт.")).toBeVisible();
 		expect(screen.getByText("Цена: 100 ₽")).toBeVisible();
-		expect(screen.getByText(/02.01.2022, 10:00 UTC/)).toBeVisible();
+		const snapshotTime = new Intl.DateTimeFormat("ru-RU", { dateStyle: "short", timeStyle: "short" });
+		const operationTime = snapshotTime.format(new Date("2022-01-02T10:00:00Z"));
+		expect(screen.getByText(operationTime, { exact: false })).toBeVisible();
 		expect(
 			requests.some(
 				url =>

src/pages/stocks/ui/StocksPage/StocksPage.test.tsx

@@ -93,7 +93,9 @@ describe("stock search", () => {
 		expect(
 			await screen.findByRole("link", { name: /Сбербанк/ }),
 		).toHaveAttribute("href", "/stocks/e6123145-9665-43e0-8413-cd61b8aa9b13");
-		expect(screen.getByText("Список получен 10.10.2026, 10:00")).toBeVisible();
+		const snapshotTime = new Intl.DateTimeFormat("ru-RU", { dateStyle: "short", timeStyle: "short" });
+		const fetchedAt = snapshotTime.format(new Date("2026-10-10T10:00:00Z"));
+		expect(screen.getByText(`Список получен ${fetchedAt}`)).toBeVisible();
 		expect(screen.getByText("Лот: 10 шт.")).toBeVisible();
 		expect(screen.getByText("ISIN: RU0009029540")).toBeVisible();
 		expect(screen.getAllByText("Мосбиржа")[0]).toBeVisible();

src/shared/api/client.test.ts

@@ -67,6 +67,25 @@ describe("apiClient authentication", () => {
 		expect(clear).toHaveBeenCalledOnce();
 	});
 
+	it("keeps the session when refresh failed because the server was unreachable", async () => {
+		const clear = vi.fn();
+		server.use(
+			http.get("*/api/v1/brokerage-accounts", () =>
+				HttpResponse.json({ code: "UNAUTHORIZED" }, { status: 401 }),
+			),
+		);
+		configureAuthClient({
+			accessToken: () => "expired",
+			clear,
+			refresh: () => Promise.resolve(false),
+			unavailable: () => true,
+		});
+
+		await apiClient.GET("/api/v1/brokerage-accounts");
+
+		expect(clear).not.toHaveBeenCalled();
+	});
+
 	it("does not attach Bearer auth to authentication endpoints", async () => {
 		let authorization: null | string
 

src/shared/api/client.ts

@@ -32,6 +32,10 @@ type AuthHandlers = {
 	clear: () => void;
 	generation?: () => number;
 	refresh: () => Promise<boolean>;
+	/**
+	True after a refresh failed transiently (network/5xx): the session is not proven gone.
+	*/
+	unavailable?: () => boolean;
 };
 
 type ReadAttempt = {
@@ -100,7 +104,8 @@ async function authenticatedFetch(request: Request): Promise<Response> {
 	if (!isCurrent()) throw new DOMException("Session changed", "AbortError");
 
 	if (!(await sessionState.handlers.refresh())) {
-		if (isCurrent()) sessionState.handlers.clear();
+		if (isCurrent() && !sessionState.handlers.unavailable?.())
+			sessionState.handlers.clear();
 
 		return response;
 	}

src/shared/i18n/locales/ru.ts

@@ -53,6 +53,9 @@ const ru = {
 			passwordConfirmation: "Подтвердите пароль",
 			register: "Регистрация",
 			requestError: "Не удалось выполнить запрос. Попробуйте ещё раз.",
+			retry: "Повторить",
+			unavailableText: "Сервер временно недоступен. Ваш вход сохранён, попробуйте через минуту.",
+			unavailableTitle: "Не удалось подключиться",
 			validation: {
 				invalidEmail: "Некорректный email",
 				invalidPasswordLength: "Пароль: от 8 до 72 символов, только латинские буквы, цифры, спецсимволы и пробел",
@@ -417,7 +420,7 @@ const ru = {
 			next: "Далее",
 			noInstrument: "Без инструмента",
 			noMoney: "Без движения денег",
-			occurredAt: "{{date}} UTC",
+			occurredAt: "Исполнено {{date}}",
 			open: "Открыть журнал",
 			operationType: {
 				buy: "Покупка",
@@ -447,6 +450,7 @@ const ru = {
 			accounts: "Счета",
 			bonds: "Облигации",
 			cards: "Карты",
+			primary: "Основная навигация",
 			settings: "Настройки",
 			stocks: "Акции",
 		},
@@ -478,13 +482,21 @@ const ru = {
 			},
 			emptyText: "На счете нет позиций и доступных денежных остатков.",
 			emptyTitle: "Портфель пока пуст",
+			more: "Подробнее",
 			otherPositions: "Другие позиции",
+			positionFilter: "Тип позиции",
+			positionKinds: {
+				bonds: "Облигации",
+				other: "Прочее",
+				stocks: "Акции",
+			},
 			positions: "Позиции",
 			quantity: "Количество: {{value}}",
 			refreshError:
 				"Не удалось обновить портфель. Показан последний полученный снимок.",
 			refreshing: "Обновляем портфель",
 			return: "Доход: {{value}}",
+			sections: "Разделы счёта",
 			share: "Доля: {{value}}",
 			staleWarning:
 				"T-Bank временно недоступен. Показан последний успешный снимок.",
@@ -510,7 +522,16 @@ const ru = {
 				unvalued: "Нет оценки",
 				unvaluedCategory: "{{category}}: без оценки — {{count}}",
 			},
+			tabs: {
+				cash: "Деньги",
+				events: "События",
+				income: "Доход",
+				operations: "Операции",
+				positions: "Позиции",
+			},
 			title: "Портфель",
+			unrealizedResult: "Нереализованный результат",
+			unrealizedResultCaption: "по цене, без НКД и купонов",
 			updatedAt: "Данные получены {{date}}",
 		},
 		routeError: {
@@ -629,7 +650,7 @@ const ru = {
 			position: "Моя позиция",
 			previous: "Назад",
 			price: "Цена",
-			priceAt: "Цена на {{date}} UTC",
+			priceAt: "Цена на {{date}}",
 			priceTable: "Цены в таблице",
 			priceTableHint: "Дневные закрытия · записей: {{count}} · сначала новые",
 			priceUnavailable: "Цена недоступна",
@@ -718,7 +739,7 @@ const ru = {
 				SHARE_TYPE_GDR: "Депозитарная расписка",
 				SHARE_TYPE_PREFERRED: "Привилегированная акция",
 			},
-			snapshotAt: "Позиция на {{date}} UTC",
+			snapshotAt: "Позиция на {{date}}",
 			trading: {
 				SECURITY_TRADING_STATUS_BREAK_IN_TRADING: "Перерыв в торгах",
 				SECURITY_TRADING_STATUS_CLOSING_AUCTION: "Аукцион закрытия",

src/shared/lib/display.test.ts

@@ -12,9 +12,16 @@ describe("shared display helpers", () => {
 		expect(formatDate("2027-09-10")).toBe("10.09.2027");
 		expect(formatDate("2024-02-29")).toBe("29.02.2024");
 		expect(formatDate("2027-09-10T00:30:00+03:00")).toBe("09.09.2027");
-		expect(formatSnapshotTime("2027-09-10T00:30:00+03:00")).toBe(
+	});
-			"09.09.2027, 21:30",
+	it("formats snapshot time in the browser time zone", () => {
-		);
+		const instant = "2027-09-10T00:30:00+03:00";
+
+		const expected = new Intl.DateTimeFormat("ru-RU", {
+			dateStyle: "short",
+			timeStyle: "short",
+		}).format(new Date(instant));
+
+		expect(formatSnapshotTime(instant)).toBe(expected);
 	});
 	it("formats decimal strings without financial arithmetic", () => {
 		expect(formatMoney({ currency: "RUB", value: "-1234567.89" })).toBe(

src/shared/lib/display.ts

@@ -61,10 +61,10 @@ function formatMoney(
 	return `${formatDecimal(decimal)} ${currency}`;
 }
 
+// Без timeZone Intl берёт часовой пояс браузера пользователя.
 const snapshotFormatter = new Intl.DateTimeFormat("ru-RU", {
 	dateStyle: "short",
 	timeStyle: "short",
-	timeZone: "UTC",
 });
 
 function formatSnapshotTime(value: string): string {