chore(release): 1.4.0

.ai/architecture.md

@@ -8,7 +8,7 @@ Vitest — отдельную JSDOM конфигурацию. Точные versi
 [package.json](../package.json), реализация — source of truth.
 
 ```text
-app → pages → widgets → features → entities → shared
+app → pages → features → entities → shared
 page container → page VM → entity/feature query → shared/api → backend /api/v1
                          ↓
                  props → state/section views
@@ -30,14 +30,13 @@ contract; frontend не читает его checkout для генерации
 | --- | --- |
 | Bootstrap, глобальные providers, routes | `app` |
 | Композиция маршрута и поведение, нужное только этому экрану | `pages/<page>` |
-| Крупная переиспользуемая композиция экрана | `widgets/<widget>` |
 | Самостоятельная пользовательская возможность с собственным смыслом | `features/<capability>` |
 | Представление/поведение бизнес-сущности | `entities/<entity>` |
 | Переиспользуемый код без WealthLedger domain meaning | `shared` |
 
-Локальный FSD profile: `app → pages → widgets → features → entities → shared`.
-Widget собирает несколько нижних слоёв в самостоятельный UI-блок; компонент для
-одной page остаётся у page. Form, mutation или click handler сами по себе не
+Локальный FSD profile: `app → pages → features → entities → shared`.
+Слой `widgets` не используется: композиция экрана и компонент для одной page
+остаются у page. Form, mutation или click handler сами по себе не
 требуют feature. Два callers не делают domain helper generic shared.
 Slice именуется по ответственности, а не `helpers`, `hooks` или `types`.
 
@@ -49,12 +48,12 @@ Slice именуется по ответственности, а не `helpers`,
 
 Cross-slice consumer использует `@/` и `index.ts` владельца, например
 `@/entities/portfolio`. Alias Vite и TypeScript согласован. Другой slice не
-импортирует внутренний файл напрямую. Slices `pages`, `widgets`, `features`, `entities` не зависят от соседнего slice своего слоя;
+импортирует внутренний файл напрямую. Slices `pages`, `features`, `entities` не зависят от соседнего slice своего слоя;
 композиция принадлежит вышележащему owner. Existing меж-slice исключения
 не являются разрешением добавлять новые.
 
 Направление зависимостей, public imports и запрет соседних slices в
-`pages`, `widgets`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
+`pages`, `features`, `entities` проверяет `npm run deps`. Внутренние imports
 одного slice и связи shared segments этот запрет не ограничивает.
 Knip проверяет использование exports, а не смысл placement.
 

.dockerignore

@@ -13,6 +13,9 @@
 !public/**
 !docker/
 !docker/**
+!scripts/
+!scripts/minimatch-compat/
+!scripts/minimatch-compat/**
 !packages/
 !packages/tokens/
 !packages/tokens/package.json

.gitea/workflows/verify.yml

@@ -66,7 +66,7 @@ jobs:
       - name: Verify pre-commit secret blocking and redaction
         run: PATH=/tmp/gitleaks-bin:$PATH node --test scripts/test-pre-commit.mjs
       - name: Audit runtime and development dependencies
-        run: npm audit --include=dev --audit-level=low
+        run: npm audit --include=dev --audit-level=moderate
 
   verify:
     needs: [commits, security]

CHANGELOG.md

@@ -1,5 +1,75 @@
 # Changelog
 
+## [1.4.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.3.0...v1.4.0) (2026-11-06)
+
+### Features
+
+* **investments:** warn and offer retry after exhausted read retries (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#136](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/136)) ([8ce1e8e](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/8ce1e8e44486dcc23d4c074559ca2bb517880b60))
+
+### Bug Fixes
+
+* **account:** show source metadata on empty account and income (WealthLedger/frontend[#55](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/55)) ([#133](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/133)) ([9619dc9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/9619dc979172dbc16391206e801ed67862d20116))
+* align audit findings for Events, currency and auth (WealthLedger/frontend[#155](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/155)) ([668f2ef](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/668f2ef70e535a1222e7f600b1be4a31fefc6f8b))
+
+### Refactoring
+
+* **api:** consume bank operation oneOf contract (WealthLedger/frontend[#144](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/144)) ([#152](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/152)) ([2d070ce](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2d070ce2b54bbee466ecf6cc18b437910f0c07f8))
+* drop dead query helpers and simplify read deadline (WealthLedger/frontend[#141](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/141)) ([#149](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/149)) ([5077bd4](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5077bd4f0baa4a59643e875485c2f08253cc198d))
+* move portfolio structure into account page, drop widgets (WealthLedger/frontend[#139](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/139)) ([#140](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/140)) ([e2d143d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/e2d143df46e650139e49b7c80a886008ede86d2a))
+* normalize view models and share breadcrumbs and titles (WealthLedger/frontend[#143](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/143)) ([#153](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/153)) ([2db39f2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/2db39f25d9478350ad56a1b2e2ca6496068257c5))
+* replace repeated lazy page wrappers with lazyPage helper ([#131](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/131)) ([#132](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/132)) ([71fbe77](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71fbe7774d3ed63fcb84bc644da997921bc049b2))
+* share path-root query predicate (WealthLedger/frontend[#142](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/142)) ([#154](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/154)) ([cadba8d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/cadba8d075daf9b20c0c9de97ad5bd8f5a3e74fc))
+
+### Maintenance
+
+* **api:** update OpenAPI snapshot with UpcomingEventsDto.window (WealthLedger/frontend[#134](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/134)) ([#135](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/135)) ([aaee959](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/aaee9591d7880193ee9b0c14339e8477264e4a94))
+* **deps:** set Renovate release age, PR limit and update groups (WealthLedger/main[#6](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/6)) ([#137](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/137)) ([ad93725](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/ad93725a84615ec329631b71ed8db33337085740))
+
+## [1.3.0](https://git.personal.ksv741.ru/WealthLedger/frontend/compare/v1.2.1...v1.3.0) (2026-11-01)
+
+### Features
+
+* **account:** add concentration tab with top-5 slices and chart (WealthLedger/main[#48](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/48)) ([#127](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/127)) ([70a2c33](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/70a2c335fdddb8b6a99e3f609befe06aeb8cc45d))
+* group all-account rows by instrument and day (WealthLedger/main[#47](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/47)) ([#126](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/126)) ([71126c9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/71126c91f0b30f4d65a313ddc7d7f86963340455))
+* make brokerage account list compact ([#111](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/111)) ([c24704a](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/c24704affacbe7fbc08f5e2b61bb6e7ffa6053b9))
+* remove top header and rework mobile bottom navigation ([#109](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/109)) ([1a92f02](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/1a92f023c1c79f646424f72710ab74de63386a11))
+* replace account page accordion with tabs and show open position result ([#112](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/112)) ([3075081](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/3075081df188de0630d314ba15a34fe6efd1eea9))
+* show return, cash and structure on account cards ([#114](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/114)) ([431559b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/431559be0fca9eb37f6a09d930d502f939884e39))
+
+### Bug Fixes
+
+* round money to currency minor units without negative zero (WealthLedger/frontend[#118](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/118)) ([#119](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/119)) ([1d49904](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/1d4990491f254e1ec6bafad8204872eaae2982d0))
+* show account source sync status (WealthLedger/frontend[#120](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/120)) ([#121](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/121)) ([a56edf2](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/a56edf2b3757ef0b0f6c42ecbd422a1a563f6505))
+* show history loading alert only while loading (WealthLedger/frontend[#124](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/124)) ([#125](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/125)) ([6792f5b](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/6792f5b70aa3ba90b2eb2df7e63d3ae2f669e295))
+* stabilize auth client registration (WealthLedger/frontend[#95](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/95)) ([#122](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/122)) ([5796d2d](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/5796d2d789963e66a3a4bcd79eab44700f16bd31))
+
+### Refactoring
+
+* derive api error codes from contract (WealthLedger/backend[#117](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/117)) ([#123](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/123)) ([32e8fe9](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/32e8fe9402665ea0c350f5f247d87e328ffd44c8))
+
+### Tests
+
+* pin date in all accounts events test ([#115](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/115)) ([58b4e12](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/58b4e126330d01c1d6865bd0e9dd066a028fba08))
+
+### Maintenance
+
+* **deps:** resolve minimatch and glob audit advisories (WealthLedger/main[#49](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/49)) ([#128](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/128)) ([7242240](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/7242240b2188e9d1ca1325e65d0e1a0a3655d882))
+* sync brokerage accounts contract (WealthLedger/backend[#138](https://git.personal.ksv741.ru/WealthLedger/frontend/issues/138)) ([0e4bbec](https://git.personal.ksv741.ru/WealthLedger/frontend/commit/0e4bbec2a7b814579095ea7ef6db68a70508fa29))
+
+## [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

@@ -5,6 +5,7 @@ COPY package.json package-lock.json ./
 COPY packages/tokens/package.json ./packages/tokens/
 COPY packages/ui/package.json ./packages/ui/
 COPY packages/icons/package.json ./packages/icons/
+COPY scripts/minimatch-compat ./scripts/minimatch-compat
 RUN npm ci
 
 FROM dependencies AS development

README.md

@@ -123,10 +123,12 @@ Chromium при ширинах 375 и 1280 px. Browser project не исполь
 Новый запуск отменяет устаревший для того же PR/ветки и типа события
 (требуется Gitea 1.26+). Ежедневно в 05:17 UTC выполняется только `security`.
 Job `security` проверяет полную доступную историю Gitleaks 8.30.1 и выполняет
-`npm audit --include=dev --audit-level=low`. Любой advisory блокирует security job;
-исключений frontend нет. Локально можно выполнить те же команды:
+`npm audit --include=dev --audit-level=moderate`. Advisory уровня moderate и выше
+блокирует security job; low не блокирует, т.к. для них часто нет исправленной версии
+(например, GHSA-gcqx-w48m-w2h4 в build-only deepmerge). Других исключений нет.
+Локально можно выполнить те же команды:
 `gitleaks git --log-opts=--all --redact=100 --no-banner` и
-`npm audit --include=dev --audit-level=low`. Audit требует доступа к npm registry;
+`npm audit --include=dev --audit-level=moderate`. Audit требует доступа к npm registry;
 проверка секретов выполняется локально и не выводит их значения.
 
 Имена jobs `commits`, `security`, `verify` сохранены, но Gitea включает имя

dependency-cruiser.cjs

@@ -29,17 +29,17 @@ module.exports = {
 		},
 		{
 			from: {
-				path: "^src/(app|pages|widgets|features|entities|shared)/([^/]+)/",
+				path: "^src/(app|pages|features|entities|shared)/([^/]+)/",
 			},
 			name: "slices-must-use-public-api",
 			severity: "error",
 			to: {
-				path: String.raw`^src/(app|pages|widgets|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
+				path: String.raw`^src/(app|pages|features|entities|shared)/([^/]+)/(?!index\.ts$)`,
 				pathNot: "^src/$1/$2/",
 			},
 		},
 		{
-			from: { path: "^src/(pages|widgets|features|entities)/([^/]+)/" },
+			from: { path: "^src/(pages|features|entities)/([^/]+)/" },
 			name: "no-same-layer-cross-slice-imports",
 			severity: "error",
 			to: { path: "^src/$1/", pathNot: "^src/$1/$2/" },
@@ -48,24 +48,18 @@ module.exports = {
 			from: { path: "^src/shared/" },
 			name: "shared-must-not-depend-on-layers",
 			severity: "error",
-			to: { path: "^src/(entities|features|widgets|pages|app)/" },
+			to: { path: "^src/(entities|features|pages|app)/" },
 		},
 		{
 			from: { path: "^src/entities/" },
 			name: "entities-must-not-depend-on-higher-layers",
 			severity: "error",
-			to: { path: "^src/(features|widgets|pages|app)/" },
+			to: { path: "^src/(features|pages|app)/" },
 		},
 		{
 			from: { path: "^src/features/" },
 			name: "features-must-not-depend-on-higher-layers",
 			severity: "error",
-			to: { path: "^src/(widgets|pages|app)/" },
-		},
-		{
-			from: { path: "^src/widgets/" },
-			name: "widgets-must-not-depend-on-higher-layers",
-			severity: "error",
 			to: { path: "^src/(pages|app)/" },
 		},
 		{

docker/nginx.conf

@@ -17,12 +17,21 @@ http {
         default $http_x_forwarded_proto;
         '' $scheme;
     }
+    # One shared budget: the external proxy's client-IP forwarding is not verified.
+    map "$request_method:$uri" $auth_admission_key {
+        default "";
+        POST:/api/v1/auth/login auth;
+        POST:/api/v1/auth/register auth;
+    }
+    limit_req_zone $auth_admission_key zone=auth_admission:1m rate=2r/s;
+    limit_req_status 429;
     server {
         listen 8080;
         server_name _;
         root /usr/share/nginx/html;
         resolver 127.0.0.11 valid=5s ipv6=off;
         location /api/ {
+            limit_req zone=auth_admission burst=5 nodelay;
             set $backend http://backend:3000;
             proxy_pass $backend$request_uri;
             proxy_set_header Host $http_host;

eslint-rules.mjs

@@ -25,7 +25,11 @@ const readability = {
 				)
 					context.report({ messageId: "schema", node });
 			},
-			FunctionDeclaration: checkParameters,
+			FunctionDeclaration(node) {
+				checkParameters(node);
+				if (node.id?.name?.endsWith?.("ViewModel"))
+					context.report({ messageId: "vmName", node: node.id });
+			},
 			FunctionExpression: checkParameters,
 			ImportDeclaration(node) {
 				if (
@@ -95,6 +99,7 @@ const readability = {
 			schema: "Declare Zod schemas in a dedicated *.schema.ts file.",
 			svg: "Own SVG markup in packages/icons, and import its public component.",
 			union: "Put complex union members on separate lines.",
+			vmName: "Name custom hooks use*Vm, not use*ViewModel.",
 		},
 		schema: [],
 		type: "suggestion",

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>

knip.json

@@ -1,5 +1,5 @@
 {
-	"ignoreDependencies": ["conventional-changelog-conventionalcommits"],
+	"ignoreDependencies": ["conventional-changelog-conventionalcommits", "minimatch"],
 	"workspaces": {
 		".": {
 			"project": ["src/**/*.{ts,tsx}", "!src/shared/api/generated/**"]

package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "wealth-ledger-frontend",
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "wealth-ledger-frontend",
-			"version": "1.2.0",
+			"version": "1.4.0",
 			"workspaces": [
 				"packages/*"
 			],
@@ -80,6 +80,7 @@
 				"jsdom": "30.1.3",
 				"knip": "6.43.0",
 				"lint-staged": "17.6.0",
+				"minimatch": "file:scripts/minimatch-compat",
 				"msw": "2.15.0",
 				"openapi-typescript": "7.13.0",
 				"playwright": "1.64.1",
@@ -88,7 +89,7 @@
 				"typescript": "5.9.3",
 				"typescript-eslint": "8.72.0",
 				"vite": "8.3.5",
-				"vite-plugin-pwa": "1.3.0",
+				"vite-plugin-pwa": "2.0.0",
 				"vitest": "5.0.5"
 			},
 			"engines": {
@@ -2511,14 +2512,12 @@
 				}
 			}
 		},
-		"node_modules/@isaacs/cliui": {
-			"version": "9.0.0",
-			"integrity": "sha512-AokJm4tuBHillT+FpMtxQ60n8ObyXBatq7jD2/JA9dxbDDokKQm8KMht5ibGzLVU9IJDIKK4TPKgMHEYMn3lMg==",
+		"node_modules/@isaacs/nonrecursive-glob-match": {
+			"version": "1.0.3",
+			"resolved": "https://registry.npmjs.org/@isaacs/nonrecursive-glob-match/-/nonrecursive-glob-match-1.0.3.tgz",
+			"integrity": "sha512-SI7kyKHq4XXDRozw+r9GlRZkia1ZkFrpLW98r2IC2Bpr8YkFGE3fvjzmxCG0x78A++69HmDNrDvSMYBZmHGpKA==",
 			"dev": true,
-			"license": "BlueOak-1.0.0",
-			"engines": {
-				"node": ">=18"
-			}
+			"license": "BlueOak-1.0.0"
 		},
 		"node_modules/@joshwooding/vite-plugin-react-docgen-typescript": {
 			"version": "0.7.0",
@@ -3720,33 +3719,6 @@
 				"npm": ">=9.5.0"
 			}
 		},
-		"node_modules/@redocly/openapi-core/node_modules/balanced-match": {
-			"version": "1.0.2",
-			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/@redocly/openapi-core/node_modules/brace-expansion": {
-			"version": "2.1.7",
-			"integrity": "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/@redocly/openapi-core/node_modules/minimatch": {
-			"version": "5.1.9",
-			"integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
 		"node_modules/@reduxjs/toolkit": {
 			"version": "2.12.0",
 			"integrity": "sha512-KiT+RzZbp6mQET+Mg+h2c97+9j1sNflUxQkIHI7Yuzf6Peu+OYpmkn6nbHWmLLWj+1ZODUJFwGZ7gx3L9R9EOw==",
@@ -6448,6 +6420,7 @@
 		},
 		"node_modules/balanced-match": {
 			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-4.0.4.tgz",
 			"integrity": "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==",
 			"dev": true,
 			"license": "MIT",
@@ -6495,6 +6468,7 @@
 		},
 		"node_modules/brace-expansion": {
 			"version": "5.0.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-5.0.12.tgz",
 			"integrity": "sha512-YovQ3rzhaLMIrDjNDMkNS01tea93qhEhG5xy8f6+R0l+dw3Ki+5sCoIoI942iuLZTHWogWktgwVDhU09iNEimQ==",
 			"dev": true,
 			"license": "MIT",
@@ -9097,33 +9071,6 @@
 				"minimatch": "^5.0.1"
 			}
 		},
-		"node_modules/filelist/node_modules/balanced-match": {
-			"version": "1.0.2",
-			"integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-			"dev": true,
-			"license": "MIT"
-		},
-		"node_modules/filelist/node_modules/brace-expansion": {
-			"version": "2.1.7",
-			"integrity": "sha512-uZbew1NqdmPDTMJ8ah1y+b+9QEJrfkXFk3RcTQw3X0jW/xRUvFKsg1CfQdSYGdTbXZWExtU3J3ccxtnfw1Fi0g==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"balanced-match": "^1.0.0"
-			}
-		},
-		"node_modules/filelist/node_modules/minimatch": {
-			"version": "5.1.9",
-			"integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"brace-expansion": "^2.0.1"
-			},
-			"engines": {
-				"node": ">=10"
-			}
-		},
 		"node_modules/find-up": {
 			"version": "5.0.0",
 			"integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
@@ -9194,22 +9141,6 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
-		"node_modules/foreground-child": {
-			"version": "3.3.1",
-			"integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
-			"dev": true,
-			"license": "ISC",
-			"dependencies": {
-				"cross-spawn": "^7.0.6",
-				"signal-exit": "^4.0.1"
-			},
-			"engines": {
-				"node": ">=14"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
 		"node_modules/formatly": {
 			"version": "0.11.4",
 			"resolved": "https://registry.npmjs.org/formatly/-/formatly-0.11.4.tgz",
@@ -9488,14 +9419,15 @@
 			}
 		},
 		"node_modules/glob": {
-			"version": "13.0.6",
-			"integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
+			"version": "14.0.3",
+			"resolved": "https://registry.npmjs.org/glob/-/glob-14.0.3.tgz",
+			"integrity": "sha512-A1vjIwC3qpdCso45Iw127gnp7sPhqgY8lUQhDrArIs+GbmfaaVPFuoyy7WyLT9EPZCRZ7j7aLdwUhQmHWesEow==",
 			"dev": true,
 			"license": "BlueOak-1.0.0",
 			"dependencies": {
-				"minimatch": "^10.2.2",
+				"minimatch": "^11.0.2",
 				"minipass": "^7.1.3",
-				"path-scurry": "^2.0.2"
+				"path-scurry": "^3.0.0"
 			},
 			"engines": {
 				"node": "18 || 20 || >=22"
@@ -10670,21 +10602,6 @@
 				"node": "^18.17 || >=20.6.1"
 			}
 		},
-		"node_modules/jackspeak": {
-			"version": "4.2.3",
-			"integrity": "sha512-ykkVRwrYvFm1nb2AJfKKYPr0emF6IiXDYUaFx4Zn9ZuIH7MrzEZ3sD5RlqGXNRpHtvUHJyOnCEFxOlNDtGo7wg==",
-			"dev": true,
-			"license": "BlueOak-1.0.0",
-			"dependencies": {
-				"@isaacs/cliui": "^9.0.0"
-			},
-			"engines": {
-				"node": "20 || >=22"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
 		"node_modules/jake": {
 			"version": "10.9.4",
 			"integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
@@ -11473,12 +11390,19 @@
 			}
 		},
 		"node_modules/minimatch": {
-			"version": "10.2.6",
-			"integrity": "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A==",
+			"resolved": "scripts/minimatch-compat",
+			"link": true
+		},
+		"node_modules/minimatch-11": {
+			"name": "minimatch",
+			"version": "11.0.2",
+			"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-11.0.2.tgz",
+			"integrity": "sha512-pWTgz5CN3tjqyZNSK2tePlSmu9IwM41q8yn8Usdqqwe9TIHh+9dEpLLjF4uApsfPEAZY71qtSiA2B2APEr+1Yw==",
 			"dev": true,
 			"license": "BlueOak-1.0.0",
 			"dependencies": {
-				"brace-expansion": "^5.0.8"
+				"@isaacs/nonrecursive-glob-match": "^1.0.2",
+				"brace-expansion": "^5.0.12"
 			},
 			"engines": {
 				"node": "18 || 20 || >=22"
@@ -12212,12 +12136,6 @@
 				"quickjs-wasi": "^2.2.0"
 			}
 		},
-		"node_modules/package-json-from-dist": {
-			"version": "1.0.1",
-			"integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
-			"dev": true,
-			"license": "BlueOak-1.0.0"
-		},
 		"node_modules/package-manager-detector": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/package-manager-detector/-/package-manager-detector-1.9.0.tgz",
@@ -12314,8 +12232,9 @@
 			"license": "MIT"
 		},
 		"node_modules/path-scurry": {
-			"version": "2.0.2",
-			"integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-3.0.0.tgz",
+			"integrity": "sha512-1pTbQqH1wIwMi/eleQ5leFTTCkzFsPcgXNjwOA8YGGW/W4/kHT3dssE7Z6NH+zuqNLOzOB0uaD61yl7cAcVhgg==",
 			"dev": true,
 			"license": "BlueOak-1.0.0",
 			"dependencies": {
@@ -15929,8 +15848,9 @@
 			}
 		},
 		"node_modules/vite-plugin-pwa": {
-			"version": "1.3.0",
-			"integrity": "sha512-c5kMgN+ITrOtHXp8PAtk2uOIEea6XjP/unCGxOWWBzQ6qa65qj/awHg0wf+QF9E/2u9vh86LqxPwzEPNbM2r5A==",
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/vite-plugin-pwa/-/vite-plugin-pwa-2.0.0.tgz",
+			"integrity": "sha512-6G9dsPKT9QKYpeTuTLJM28zZL3HsXUTUM/QUZBEgQk2jbfrPJDq2i8gTewAKqi1c9Mt6MiidrL4SFI+HthiQMg==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -15941,13 +15861,13 @@
 				"workbox-window": "^7.4.1"
 			},
 			"engines": {
-				"node": ">=16.0.0"
+				"node": ">=20.19.0"
 			},
 			"funding": {
 				"url": "https://github.com/sponsors/antfu"
 			},
 			"peerDependencies": {
-				"@vite-pwa/assets-generator": "^1.0.0",
+				"@vite-pwa/assets-generator": "^1.0.0 || ^2.0.0",
 				"vite": "^3.1.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
 				"workbox-build": "^7.4.1",
 				"workbox-window": "^7.4.1"
@@ -17642,30 +17562,6 @@
 				"@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0"
 			}
 		},
-		"node_modules/workbox-build/node_modules/glob": {
-			"version": "11.1.0",
-			"integrity": "sha512-vuNwKSaKiqm7g0THUBu2x7ckSs3XJLXE+2ssL7/MfTGPLLcrJQ/4Uq1CjPTtO5cCIiRxqvN6Twy1qOwhL0Xjcw==",
-			"deprecated": "Old versions of glob are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me",
-			"dev": true,
-			"license": "BlueOak-1.0.0",
-			"dependencies": {
-				"foreground-child": "^3.3.1",
-				"jackspeak": "^4.1.1",
-				"minimatch": "^10.1.1",
-				"minipass": "^7.1.2",
-				"package-json-from-dist": "^1.0.0",
-				"path-scurry": "^2.0.0"
-			},
-			"bin": {
-				"glob": "dist/esm/bin.mjs"
-			},
-			"engines": {
-				"node": "20 || >=22"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/isaacs"
-			}
-		},
 		"node_modules/workbox-build/node_modules/lru-cache": {
 			"version": "5.1.1",
 			"integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
@@ -18076,6 +17972,14 @@
 				"react": "19.3.1",
 				"react-dom": "19.3.1"
 			}
+		},
+		"scripts/minimatch-compat": {
+			"name": "minimatch",
+			"version": "11.0.2-compat.0",
+			"dev": true,
+			"dependencies": {
+				"minimatch-11": "npm:minimatch@11.0.2"
+			}
 		}
 	}
 }

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "wealth-ledger-frontend",
 	"private": true,
-	"version": "1.2.0",
+	"version": "1.4.0",
 	"type": "module",
 	"engines": {
 		"node": "24.22.1"
@@ -106,6 +106,7 @@
 		"jsdom": "30.1.3",
 		"knip": "6.43.0",
 		"lint-staged": "17.6.0",
+		"minimatch": "file:scripts/minimatch-compat",
 		"msw": "2.15.0",
 		"openapi-typescript": "7.13.0",
 		"playwright": "1.64.1",
@@ -114,7 +115,7 @@
 		"typescript": "5.9.3",
 		"typescript-eslint": "8.72.0",
 		"vite": "8.3.5",
-		"vite-plugin-pwa": "1.3.0",
+		"vite-plugin-pwa": "2.0.0",
 		"vitest": "5.0.5"
 	},
 	"overrides": {
@@ -124,7 +125,9 @@
 		},
 		"@vitest/browser": "5.0.5",
 		"@vitest/ui": "5.0.5",
-		"@vitest/mocker": "5.0.5"
+		"@vitest/mocker": "5.0.5",
+		"minimatch": "$minimatch",
+		"glob": "14.0.3"
 	},
 	"allowScripts": {
 		"esbuild@0.28.2": true,

packages/ui/src/EntryCard/EntryCard.tsx

@@ -16,7 +16,7 @@ type EntryCardProps = {
 	tone: "negative"
 		| "neutral"
 		| "positive";
-	value: string;
+	value: ReactNode;
 	valueLabel: string;
 	wrap?: boolean;
 };
@@ -32,6 +32,7 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 
 	const valueContainerClass = props.actions ? classes.valueFooter : undefined;
 	const valueLabelClass = `${classes[props.tone]} ${props.actions ? classes.valueLabel : ""}`;
+	const valueComponent = typeof props.value === "string" ? undefined : "div";
 
 	return (
 		<Paper
@@ -63,7 +64,11 @@ const EntryCard: FC<EntryCardProps> = (props) => {
 			</Stack>
 
 			<Stack className={classes.value} gap={2}>
-				<Text className={classes[props.tone]} fw={700}>
+				<Text
+					className={classes[props.tone]}
+					component={valueComponent}
+					fw={700}
+				>
 					{props.value}
 				</Text>
 

renovate.json

@@ -1,15 +1,30 @@
 {
 	"$schema": "https://docs.renovatebot.com/renovate-schema.json",
-	"extends": ["config:recommended", ":semanticCommitTypeAll(chore)"],
+	"extends": ["config:recommended", ":semanticCommitTypeAll(chore)", "security:minimumReleaseAgeNpm"],
 	"timezone": "Europe/Moscow",
 	"labels": ["dependencies"],
 	"dependencyDashboard": true,
 	"rangeStrategy": "pin",
+	"prConcurrentLimit": 5,
+	"lockFileMaintenance": {
+		"enabled": true,
+		"schedule": ["before 4am on the first day of the month"]
+	},
 	"packageRules": [
 		{
 			"matchUpdateTypes": ["minor", "patch"],
 			"groupName": "non-major dependencies"
 		},
+		{
+			"matchManagers": ["github-actions"],
+			"matchUpdateTypes": ["minor", "patch"],
+			"groupName": "non-major github actions"
+		},
+		{
+			"matchManagers": ["docker-compose", "dockerfile"],
+			"matchUpdateTypes": ["minor", "patch"],
+			"groupName": "non-major container images"
+		},
 		{
 			"matchUpdateTypes": ["major"],
 			"dependencyDashboardApproval": true

scripts/minimatch-compat/index.cjs

@@ -0,0 +1,9 @@
+// ponytail: CommonJS twin of index.js (import-x ships lib/index.cjs too).
+const minimatch = require("minimatch-11");
+
+module.exports = {
+	...minimatch,
+	makeRe: (pattern, options = {}) => ({
+		test: path => minimatch.minimatch(path, pattern, options),
+	}),
+};

scripts/minimatch-compat/index.js

@@ -0,0 +1,11 @@
+// ponytail: shim for eslint-plugin-import-x@4.17.1, which still imports the
+// makeRe export removed in minimatch 11. Its only caller (no-internal-modules)
+// uses the result via .test(), so a matcher object is enough. Delete this
+// package and the override once import-x supports minimatch 11.
+import { minimatch } from "minimatch-11";
+
+export * from "minimatch-11";
+
+export const makeRe = (pattern, options = {}) => ({
+	test: path => minimatch(path, pattern, options),
+});

scripts/minimatch-compat/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "minimatch",
+	"version": "11.0.2-compat.0",
+	"private": true,
+	"description": "minimatch 11 plus the makeRe export eslint-plugin-import-x 4.17.1 still imports. Remove when import-x supports minimatch 11.",
+	"type": "module",
+	"exports": {
+		"import": "./index.js",
+		"require": "./index.cjs"
+	},
+	"dependencies": {
+		"minimatch-11": "npm:minimatch@11.0.2"
+	}
+}

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

@@ -11,7 +11,7 @@ import {
 } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import { MemoryRouter, useLocation } from "react-router";
-import { beforeEach, describe, expect, it } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
 import type { BrokerageOperation } from "@/entities/broker-operation";
 import type { IncomeAnalytics } from "@/entities/income";
@@ -46,8 +46,10 @@ const position: Portfolio["positions"][number]
 		displayName: "Сбербанк",
 		figi: "SBER",
 		isin: null,
+		issuer: null,
 		logoName: null,
 		quantity: "2",
+		sector: null,
 		ticker: "SBER",
 		type: "STOCK",
 	};
@@ -145,6 +147,7 @@ function renderPage(path: string) {
 	return client;
 }
 
+afterEach(() => vi.useRealTimers());
 beforeEach(() => {
 	server.use(
 		http.post("*/api/v1/auth/refresh", () =>
@@ -214,6 +217,7 @@ beforeEach(() => {
 							}),
 					),
 					incomeTotalsByCurrency: [],
+					window: { from: "2026-09-01", to: "2026-10-01" },
 				}),
 			),
 		),
@@ -271,6 +275,8 @@ describe("All accounts routes", () => {
 	);
 
 	it("restores applied dates when switching accounts in events", async () => {
+		vi.useFakeTimers({ toFake: ["Date"] });
+		vi.setSystemTime(new Date("2026-10-15T12:00:00Z"));
 		// The events calendar blocks past dates, so pick within selectable dates.
 		const search = `?from=${defaultPeriod()[0]}&to=${defaultPeriod()[1]}`;
 		renderPage(`/accounts/all/events${search}`);
@@ -303,14 +309,16 @@ describe("All accounts routes", () => {
 				"href",
 				`/accounts/${account.id}`,
 			);
-		for (const suffix of ["operations", "income", "events"])
-			expect(
-				screen
-					.getAllByRole("link")
-					.find(
-						link => link.getAttribute("href") === `/accounts/all/${suffix}`,
-					),
-			).toBeInTheDocument();
+
+		for (const [suffix, tab] of [
+			["operations", "Операции"],
+			["income", "Доход"],
+			["events", "События"],
+		]) {
+			fireEvent.click(screen.getByRole("tab", { name: tab }));
+			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

@@ -232,7 +232,8 @@ describe("AppRoutes", () => {
 			}),
 		).toBeInTheDocument();
 		expect(
-			screen.getByRole("navigation", { name: "WealthLedger" }),
-		).toBeInTheDocument();
+			screen.getAllByRole("navigation", { name: "Основная навигация" }),
+		).toHaveLength(2);
+		expect(screen.queryByRole("banner")).not.toBeInTheDocument();
 	});
 });

src/app/routes/AppRoutes/AppRoutes.tsx

@@ -1,4 +1,4 @@
-import type { FC } from "react";
+import type { ComponentType, FC } from "react";
 
 import { lazy } from "react";
 import { Navigate, Route, Routes } from "react-router";
@@ -6,101 +6,35 @@ import { Navigate, Route, Routes } from "react-router";
 import { LazyPage } from "../RouteFallback";
 import { Protected, Public } from "../RouteGuards";
 
-const CardPage = lazy(async () => {
-	const { CardPage } = await import("@/pages/card");
+// Pages use named exports; React.lazy needs a default export per dynamic import (one chunk each).
+function lazyPage<Name extends string>(
+	load: () => Promise<Record<Name, ComponentType>>,
+	name: Name,
+) {
+	return lazy(async () => {
+		const page = await load();
 
-	return { default: CardPage };
-});
+		// eslint-disable-next-line security/detect-object-injection -- `name` is a compile-time literal checked against the module's exports.
+		return { default: page[name] };
+	});
+}
 
-const CardsPage = lazy(async () => {
-	const { CardsPage } = await import("@/pages/cards");
-
-	return { default: CardsPage };
-});
-
-const BondPage = lazy(async () => {
-	const { BondPage } = await import("@/pages/bond");
-
-	return { default: BondPage };
-});
-
-const BondsPage = lazy(async () => {
-	const { BondsPage } = await import("@/pages/bonds");
-
-	return { default: BondsPage };
-});
-
-const StockPage = lazy(async () => {
-	const { StockPage } = await import("@/pages/stock");
-
-	return { default: StockPage };
-});
-
-const StocksPage = lazy(async () => {
-	const { StocksPage } = await import("@/pages/stocks");
-
-	return { default: StocksPage };
-});
-
-const AccountPage = lazy(async () => {
-	const { AccountPage } = await import("@/pages/account");
-
-	return { default: AccountPage };
-});
-
-const AccountEventsPage = lazy(async () => {
-	const { AccountEventsPage } = await import("@/pages/account-events");
-
-	return { default: AccountEventsPage };
-});
-
-const AccountOperationsPage = lazy(async () => {
-	const { AccountOperationsPage } = await import("@/pages/account-operations");
-
-	return { default: AccountOperationsPage };
-});
-
-const AccountIncomePage = lazy(async () => {
-	const { AccountIncomePage } = await import("@/pages/account-income");
-
-	return { default: AccountIncomePage };
-});
-
-const AccountsPage = lazy(async () => {
-	const { AccountsPage } = await import("@/pages/accounts");
-
-	return { default: AccountsPage };
-});
-
-const LoginPage = lazy(async () => {
-	const { LoginPage } = await import("@/pages/login");
-
-	return { default: LoginPage };
-});
-
-const NotFoundPage = lazy(async () => {
-	const { NotFoundPage } = await import("@/pages/not-found");
-
-	return { default: NotFoundPage };
-});
-
-const RegisterPage = lazy(async () => {
-	const { RegisterPage } = await import("@/pages/register");
-
-	return { default: RegisterPage };
-});
-
-const SettingsPage = lazy(async () => {
-	const { SettingsPage } = await import("@/pages/settings");
-
-	return { default: SettingsPage };
-});
-
-const ProtectedLayout = lazy(async () => {
-	const { ProtectedLayout } = await import("../ProtectedLayout");
-
-	return { default: ProtectedLayout };
-});
+const CardPage = lazyPage(async () => import("@/pages/card"), "CardPage");
+const CardsPage = lazyPage(async () => import("@/pages/cards"), "CardsPage");
+const BondPage = lazyPage(async () => import("@/pages/bond"), "BondPage");
+const BondsPage = lazyPage(async () => import("@/pages/bonds"), "BondsPage");
+const StockPage = lazyPage(async () => import("@/pages/stock"), "StockPage");
+const StocksPage = lazyPage(async () => import("@/pages/stocks"), "StocksPage");
+const AccountPage = lazyPage(async () => import("@/pages/account"), "AccountPage");
+const AccountEventsPage = lazyPage(async () => import("@/pages/account-events"), "AccountEventsPage");
+const AccountOperationsPage = lazyPage(async () => import("@/pages/account-operations"), "AccountOperationsPage");
+const AccountIncomePage = lazyPage(async () => import("@/pages/account-income"), "AccountIncomePage");
+const AccountsPage = lazyPage(async () => import("@/pages/accounts"), "AccountsPage");
+const LoginPage = lazyPage(async () => import("@/pages/login"), "LoginPage");
+const NotFoundPage = lazyPage(async () => import("@/pages/not-found"), "NotFoundPage");
+const RegisterPage = lazyPage(async () => import("@/pages/register"), "RegisterPage");
+const SettingsPage = lazyPage(async () => import("@/pages/settings"), "SettingsPage");
+const ProtectedLayout = lazyPage(async () => import("../ProtectedLayout"), "ProtectedLayout");
 
 const AppRoutes: FC = () => (
 	<Routes>

src/app/routes/DocumentTitle/DocumentTitle.tsx

@@ -1,6 +1,5 @@
 import type { FC } from "react";
 
-import { useDocumentTitle } from "@mantine/hooks";
 import { useTranslation } from "react-i18next";
 
 import { useCurrentRoute } from "@/app/model";
@@ -8,12 +7,12 @@ import { useBankCard } from "@/entities/bank-card";
 import { useBond } from "@/entities/bond";
 import { useBrokerageAccounts } from "@/entities/brokerage-account";
 import { useStock } from "@/entities/stock";
+import { useAppDocumentTitle } from "@/shared/ui";
 
 type DocumentTitleProps = { title: string };
 
 const DocumentTitle: FC<DocumentTitleProps> = (props): undefined => {
-	const { t } = useTranslation();
-	useDocumentTitle(`${props.title} — ${t("appName")}`);
+	useAppDocumentTitle(props.title);
 };
 
 type AccountDocumentTitleProps = {

src/app/routes/RouteErrorBoundary/RouteErrorBoundary.tsx

@@ -1,12 +1,12 @@
 import type { FC, PropsWithChildren } from "react";
 
 import { Button, Stack, Text, Title } from "@mantine/core";
-import { useDocumentTitle } from "@mantine/hooks";
 import { Component } from "react";
 import { useTranslation } from "react-i18next";
 import { Link, useLocation } from "react-router";
 
 import { useAuth } from "@/features/auth";
+import { useAppDocumentTitle } from "@/shared/ui";
 
 type BoundaryProps = PropsWithChildren<{
 	authenticated: boolean;
@@ -37,7 +37,7 @@ class Boundary extends Component<BoundaryProps, State> {
 const RouteErrorFallback: FC<RouteErrorFallbackProps> = (props) => {
 	const { authenticated } = props;
 	const { t } = useTranslation();
-	useDocumentTitle(`${t("routeError.title")} — ${t("appName")}`);
+	useAppDocumentTitle(t("routeError.title"));
 	const to = authenticated ? "/accounts" : "/login";
 
 	return (

src/app/ui/AppBreadcrumbs/AppBreadcrumbs.tsx

@@ -7,10 +7,8 @@ import { useCurrentRoute } from "@/app/model";
 
 import { AccountBreadcrumbs } from "./AccountBreadcrumbs";
 import { AccountScopeSwitch } from "./AccountScopeSwitch/AccountScopeSwitch";
-import { BondBreadcrumbs } from "./BondBreadcrumbs";
 import { BreadcrumbTrail } from "./BreadcrumbTrail";
-import { CardBreadcrumbs } from "./CardBreadcrumbs";
-import { StockBreadcrumbs } from "./StockBreadcrumbs";
+import { EntityBreadcrumbs } from "./EntityBreadcrumbs";
 
 const AppBreadcrumbs: FC = () => {
 	const { t } = useTranslation();
@@ -26,9 +24,16 @@ const AppBreadcrumbs: FC = () => {
 		stock,
 	} = useCurrentRoute();
 
-	if (bond) return <BondBreadcrumbs identifier={bond.params.bondId ?? ""} />;
-	if (stock)
-		return <StockBreadcrumbs identifier={stock.params.stockId ?? ""} />;
+	if (bond) {
+		return <EntityBreadcrumbs identifier={bond.params.bondId ?? ""} kind="bond" />;
+	}
+
+	if (stock) {
+		return (
+			<EntityBreadcrumbs identifier={stock.params.stockId ?? ""} kind="stock" />
+		);
+	}
+
 	if (account && (section || !account.params.section))
 		return (
 			<Stack gap={0} mb="md">
@@ -43,8 +48,13 @@ const AppBreadcrumbs: FC = () => {
 				/>
 			</Stack>
 		);
-	if (card) return <CardBreadcrumbs identifier={card.params.cardId ?? ""} />;
+
+	if (card) {
+		return <EntityBreadcrumbs identifier={card.params.cardId ?? ""} kind="card" />;
+	}
+
 	if (cards) return <BreadcrumbTrail items={[{ label: t("bank.title") }]} />;
+
 	if (accounts)
 		return <BreadcrumbTrail items={[{ label: t("breadcrumbs.accounts") }]} />;
 

src/app/ui/AppBreadcrumbs/BondBreadcrumbs.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useTranslation } from "react-i18next";
-
-import { useBond } from "@/entities/bond";
-
-import { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-type BondBreadcrumbsProps = { identifier: string };
-
-const BondBreadcrumbs: FC<BondBreadcrumbsProps> = (props) => {
-	const { data } = useBond(props.identifier);
-	const { t } = useTranslation();
-
-	return (
-		<BreadcrumbTrail
-			items={[
-				{ label: t("bond.searchTitle"), to: "/bonds" },
-				{ label: data?.name ?? t("bond.instrument") },
-			]}
-		/>
-	);
-};
-
-export { BondBreadcrumbs };

src/app/ui/AppBreadcrumbs/BreadcrumbTrail.tsx

@@ -39,4 +39,4 @@ const BreadcrumbTrail: FC<BreadcrumbTrailProps> = (props) => {
 	);
 };
 
-export { BreadcrumbTrail };
+export { BreadcrumbTrail, type Crumb };

src/app/ui/AppBreadcrumbs/CardBreadcrumbs.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useTranslation } from "react-i18next";
-
-import { useBankCard } from "@/entities/bank-card";
-
-import { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-type CardBreadcrumbsProps = { identifier: string };
-
-const CardBreadcrumbs: FC<CardBreadcrumbsProps> = (props) => {
-	const { data } = useBankCard(props.identifier);
-	const { t } = useTranslation();
-
-	return (
-		<BreadcrumbTrail
-			items={[
-				{ label: t("bank.title"), to: "/cards" },
-				{ label: data?.name ?? t("bank.card") },
-			]}
-		/>
-	);
-};
-
-export { CardBreadcrumbs };

src/app/ui/AppBreadcrumbs/EntityBreadcrumbs.tsx

@@ -0,0 +1,48 @@
+import type { FC } from "react";
+
+import { useTranslation } from "react-i18next";
+
+import { useBankCard } from "@/entities/bank-card";
+import { useBond } from "@/entities/bond";
+import { useStock } from "@/entities/stock";
+
+import type { Crumb } from "./BreadcrumbTrail";
+
+import { BreadcrumbTrail } from "./BreadcrumbTrail";
+
+type EntityBreadcrumbsProps = {
+	identifier: string;
+	kind:
+		| "bond"
+		| "card"
+		| "stock";
+};
+
+const EntityBreadcrumbs: FC<EntityBreadcrumbsProps> = (props) => {
+	const { identifier, kind } = props;
+	const { t } = useTranslation();
+
+	const bond = useBond(kind === "bond" ? identifier : "");
+	const card = useBankCard(kind === "card" ? identifier : "");
+	const stock = useStock(kind === "stock" ? identifier : "");
+
+	let parent: Crumb;
+	let name: string;
+
+	if (kind === "bond") {
+		parent = { label: t("bond.searchTitle"), to: "/bonds" };
+		name = bond.data?.name ?? t("bond.instrument");
+	}
+	else if (kind === "stock") {
+		parent = { label: t("stock.searchTitle"), to: "/stocks" };
+		name = stock.data?.name ?? t("stock.share");
+	}
+	else {
+		parent = { label: t("bank.title"), to: "/cards" };
+		name = card.data?.name ?? t("bank.card");
+	}
+
+	return <BreadcrumbTrail items={[parent, { label: name }]} />;
+};
+
+export { EntityBreadcrumbs };

src/app/ui/AppBreadcrumbs/StockBreadcrumbs.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useTranslation } from "react-i18next";
-
-import { useStock } from "@/entities/stock";
-
-import { BreadcrumbTrail } from "./BreadcrumbTrail";
-
-type StockBreadcrumbsProps = { identifier: string };
-
-const StockBreadcrumbs: FC<StockBreadcrumbsProps> = (props) => {
-	const { data } = useStock(props.identifier);
-	const { t } = useTranslation();
-
-	return (
-		<BreadcrumbTrail
-			items={[
-				{ label: t("stock.searchTitle"), to: "/stocks" },
-				{ label: data?.name ?? t("stock.share") },
-			]}
-		/>
-	);
-};
-
-export { StockBreadcrumbs };

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: flex;
-		justify-content: space-around;
-		left: 0;
-		padding: var(--mantine-spacing-xs) 2px;
-		gap: 2px;
-		font-size: 11px;
-		& a {
-			min-width: 0;
-			padding: 8px 2px;
-			text-align: center;
-		}
+		display: grid;
+		grid-template-columns: repeat(5, minmax(0, 1fr));
+		inset: auto 0 0;
+		min-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom, 0px));
+		padding-bottom: env(safe-area-inset-bottom, 0px);
+		padding-inline:
+			max(4px, env(safe-area-inset-left, 0px))
+			max(4px, env(safe-area-inset-right, 0px));
 		position: fixed;
-		right: 0;
-		z-index: 200;
+		z-index: var(--mantine-z-index-app);
+	}
+
+	.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}>
-				<Text fw={700}>{t("appName")}</Text>
-			</MantineAppShell.Header>
+			<MantineAppShell.Navbar aria-label={t("navigation.primary")}>
+				<div className={classes.brand}>
+					<Text fw={700}>{t("appName")}</Text>
+				</div>
 
-			<MantineAppShell.Navbar p="sm">
-				{items.map(item => (
-					<NavLink
-						active={pathname.startsWith(item.to)}
-						className={classes.navLink}
-						component={RouterNavLink}
-						key={item.to}
-						label={item.label}
-						leftSection={(
-							<span
-								className={`${classes.navIcon} ${item.iconClassName ?? ""}`}
-							>
-								{item.icon}
-							</span>
-						)}
-						to={item.to}
-					/>
-				))}
+				<div className={classes.navList}>
+					{items.map(item => (
+						<NavLink
+							active={pathname.startsWith(item.to)}
+							className={classes.navLink}
+							component={RouterNavLink}
+							key={item.to}
+							label={item.label}
+							leftSection={(
+								<span className={`${classes.navIcon} ${item.iconClassName}`}>
+									<item.Icon size={20} />
+								</span>
+							)}
+							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}>
-				{items.map((item) => {
-					const appearanceClass = pathname.startsWith(item.to)
-						? classes.active
-						: undefined;
+			<nav
+				aria-label={t("navigation.primary")}
+				className={classes.bottomNav}
+			>
+				{items.map(item => (
+					<RouterNavLink
+						className={getBottomNavItemClass}
+						key={item.to}
+						to={item.to}
+					>
+						<span className={classes.iconPill}>
+							<item.Icon size={24} />
+						</span>
 
-					return (
-						<RouterNavLink
-							className={appearanceClass}
-							key={item.to}
-							to={item.to}
-						>
-							{item.label}
-						</RouterNavLink>
-					);
-				})}
+						<span className={classes.bottomNavLabel}>{item.label}</span>
+					</RouterNavLink>
+				))}
 			</nav>
 		</MantineAppShell>
 	);

src/entities/bank-card/api/mutations.ts

@@ -5,6 +5,7 @@ import {
 	ApiErrorCode,
 	apiErrorCode,
 	isApiErrorCode,
+	isGetUnder,
 } from "@/shared/api";
 
 import type {
@@ -26,21 +27,14 @@ async function mutationData<T>(
 	return data;
 }
 
+const bankCardGetPredicate = isGetUnder(["/api/v1/bank-cards"]);
+
 function useBankMutationOptions() {
 	const queryClient = useQueryClient();
 
 	const invalidate = () =>
 		queryClient.invalidateQueries({
-			predicate: ({ queryKey }) => {
-				const [method, path] = queryKey;
-
-				return (
-					method === "get"
-					&& typeof path === "string"
-					&& (path === "/api/v1/bank-cards"
-						|| path.startsWith("/api/v1/bank-cards/"))
-				);
-			},
+			predicate: ({ queryKey }) => bankCardGetPredicate(queryKey),
 		});
 
 	return {

src/entities/broker-operation/index.ts

@@ -5,5 +5,7 @@ export {
 	type OperationCategory,
 	useBrokerageOperations,
 } from "./api/useBrokerageOperations";
+export { brokerageOperationGroupKey } from "./model/display";
 export { useBrokerageOperationHistory } from "./model/useBrokerageOperationHistory";
 export { LedgerEntryRow } from "./ui/LedgerEntryRow";
+export { OperationGroup } from "./ui/OperationGroup";

src/entities/broker-operation/model/display.test.ts

@@ -1,9 +1,12 @@
-import { expect, it } from "vitest";
+import { describe, expect, it } from "vitest";
 
-import { operationLabelKey } from "./display";
+import type { BrokerageOperation } from "../api/useBrokerageOperations";
+
+import { brokerageOperationGroupKey, operationLabelKey } from "./display";
 
 it.each([
 	["OPERATION_TYPE_BUY", "buy"],
+	["OPERATION_TYPE_COUPON", "other"],
 	["OPERATION_TYPE_BUY_CARD", "buy"],
 	["OPERATION_TYPE_BUY_MARGIN", "buy"],
 	["OPERATION_TYPE_SELL", "sell"],
@@ -21,3 +24,71 @@ it.each([
 ])("preserves the wire operation label for %s", (type, label) => {
 	expect(operationLabelKey(type)).toBe(`ledger.operationType.${label}`);
 });
+
+describe("brokerageOperationGroupKey", () => {
+	const base: BrokerageOperation = {
+		account: { id: "account-1", name: "Брокерский" },
+		accruedInterest: null,
+		category: "income",
+		commission: null,
+		description: "Купон",
+		figi: "FIGI",
+		id: "operation",
+		instrumentType: "bond",
+		instrumentUid: "UID",
+		logoName: null,
+		occurredAt: "2026-08-14T10:00:00Z",
+		payment: null,
+		price: null,
+		quantity: null,
+		ticker: "BOND",
+		type: "OPERATION_TYPE_COUPON",
+	};
+
+	it("uses screen day, preferred identity and exact type, not account", () => {
+		const first = brokerageOperationGroupKey(base);
+
+		const same = brokerageOperationGroupKey({
+			...base,
+			account: { id: "account-2", name: "ИИС" },
+			figi: "OTHER-FIGI",
+			occurredAt: "2026-08-14T11:00:00Z",
+		});
+
+		expect(same).toBe(first);
+		expect(brokerageOperationGroupKey({
+			...base,
+			type: "OPERATION_TYPE_DIVIDEND",
+		})).not.toBe(first);
+	});
+
+	it("keeps buy and sell of one instrument in different groups", () => {
+		expect(brokerageOperationGroupKey({ ...base, type: "OPERATION_TYPE_BUY" }))
+			.not.toBe(brokerageOperationGroupKey({
+				...base,
+				type: "OPERATION_TYPE_SELL",
+			}));
+	});
+
+	it("separates local midnight and joins one local day across UTC dates", () => {
+		const before = new Date(2026, 7, 14, 23, 59).toISOString();
+		const after = new Date(2026, 7, 15, 0, 1).toISOString();
+		const morning = new Date(2026, 7, 14, 1).toISOString();
+		const evening = new Date(2026, 7, 14, 23).toISOString();
+
+		expect(brokerageOperationGroupKey({ ...base, occurredAt: before }))
+			.not.toBe(brokerageOperationGroupKey({ ...base, occurredAt: after }));
+		expect(brokerageOperationGroupKey({ ...base, occurredAt: morning }))
+			.toBe(brokerageOperationGroupKey({ ...base, occurredAt: evening }));
+	});
+
+	it("falls back to FIGI and leaves missing identity ungrouped", () => {
+		expect(brokerageOperationGroupKey({ ...base, instrumentUid: null }))
+			.toBe(brokerageOperationGroupKey({ ...base, instrumentUid: "" }));
+		expect(brokerageOperationGroupKey({
+			...base,
+			figi: null,
+			instrumentUid: null,
+		})).toBeNull();
+	});
+});

src/entities/broker-operation/model/display.ts

@@ -1,4 +1,4 @@
-import { formatMoney } from "@/shared/lib";
+import { formatMoney, formatSnapshotDay } from "@/shared/lib";
 
 import type { BrokerageOperation } from "../api/useBrokerageOperations";
 
@@ -27,6 +27,19 @@ type PaymentPresentation = {
 		| "positive";
 };
 
+function brokerageOperationGroupKey(
+	operation: BrokerageOperation,
+): null | string {
+	const identity = operation.instrumentUid || operation.figi;
+	if (!identity) return null;
+
+	return JSON.stringify([
+		formatSnapshotDay(operation.occurredAt),
+		identity,
+		operation.type,
+	]);
+}
+
 function entryLabelKey(operation: BrokerageOperation): string {
 	if (operation.category === "income")
 		return isOperationType(operation.type, OperationType.Coupon)
@@ -115,4 +128,11 @@ function paymentPresentation(
 	};
 }
 
-export { isIncomePayment, operationLabelKey, paymentPresentation };
+export {
+	brokerageOperationGroupKey,
+	entryLabelKey,
+	isIncomePayment,
+	isZeroDecimal,
+	operationLabelKey,
+	paymentPresentation,
+};

src/entities/broker-operation/ui/OperationGroup.test.tsx

@@ -0,0 +1,131 @@
+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 type { BrokerageOperation } from "../api/useBrokerageOperations";
+
+import { OperationGroup } from "./OperationGroup";
+
+function operation(
+	id: string,
+	account: { id: string; name: string },
+	value: null | string,
+	currency = "RUB",
+): BrokerageOperation {
+	return {
+		account,
+		accruedInterest: null,
+		category: "income",
+		commission: null,
+		description: "Купон",
+		figi: "FIGI",
+		id,
+		instrumentType: "bond",
+		instrumentUid: "UID",
+		logoName: null,
+		occurredAt: "2026-08-14T10:00:00Z",
+		payment: value === null ? null : { currency, value },
+		price: null,
+		quantity: null,
+		ticker: "BOND",
+		type: "OPERATION_TYPE_COUPON",
+	};
+}
+
+function renderGroup(
+	operations: BrokerageOperation[],
+	isTotalVisible = true,
+) {
+	return render(
+		<MantineProvider>
+			<MemoryRouter>
+				<ul>
+					<OperationGroup
+						entries={operations.map((operation, index) => ({
+							key: `${operation.id}-${index}`,
+							operation,
+						}))}
+						totalVisible={isTotalVisible}
+					/>
+				</ul>
+			</MemoryRouter>
+		</MantineProvider>,
+	);
+}
+
+describe("OperationGroup", () => {
+	it("shows the header, exact total and separate card rows per account", () => {
+		renderGroup([
+			operation("1", { id: "broker", name: "Брокерский" }, "0.1"),
+			operation("2", { id: "iis", name: "ИИС" }, "0.2"),
+		]);
+
+		expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
+		expect(screen.getByText("+0,3 ₽")).toBeInTheDocument();
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Купон · BOND, Исполнено 14\.08\.2026.*, \+0,3 ₽/,
+		}));
+
+		expect(accounts.getByRole("listitem", { name: "Брокерский, +0,1 ₽" }))
+			.toHaveTextContent("Купон");
+		expect(accounts.getByRole("listitem", { name: "ИИС, +0,2 ₽" }))
+			.toHaveTextContent("Купон");
+		expect(accounts.queryByText(/Исполнено/)).not.toBeInTheDocument();
+		expect(accounts.queryByRole("link")).not.toBeInTheDocument();
+	});
+
+	it("announces the hidden total as unavailable", () => {
+		renderGroup([
+			operation("1", { id: "broker", name: "Брокерский" }, "100"),
+			operation("2", { id: "iis", name: "ИИС" }, null),
+		]);
+
+		expect(screen.getByRole("list", {
+			name: /Купон · BOND, Исполнено .*Итог недоступен/,
+		})).toBeInTheDocument();
+	});
+
+	it.each(["0", "0.000"])(
+		"hides the whole total for a zero source amount (%s)",
+		(value) => {
+			renderGroup([
+				operation("1", { id: "broker", name: "Брокерский" }, value),
+				operation("2", { id: "iis", name: "ИИС" }, "100"),
+			]);
+
+			expect(screen.getAllByText("+100 ₽")).toHaveLength(1);
+			expect(screen.getByText("Итог недоступен")).toBeInTheDocument();
+		},
+	);
+
+	it("hides the total for incomplete data but keeps compensated zero", () => {
+		const { unmount } = renderGroup([
+			operation("1", { id: "broker", name: "Брокерский" }, "100"),
+			operation("2", { id: "iis", name: "ИИС" }, "100"),
+		], false);
+
+		expect(screen.queryByText("+200 ₽")).not.toBeInTheDocument();
+		unmount();
+
+		renderGroup([
+			operation("1", { id: "broker", name: "Брокерский" }, "100"),
+			operation("2", { id: "iis", name: "ИИС" }, "-100"),
+		]);
+		expect(screen.getByText("0 ₽")).toBeInTheDocument();
+	});
+
+	it("renders repeated ids inside one group as separate rows", () => {
+		renderGroup([
+			operation("same", { id: "broker", name: "Брокерский" }, "10"),
+			operation("same", { id: "iis", name: "ИИС" }, "20"),
+		]);
+
+		expect(screen.getByText("+30 ₽")).toBeInTheDocument();
+		const accounts = within(screen.getByRole("list", { name: /Купон/ }));
+		expect(accounts.getAllByText("Брокерский")).toHaveLength(1);
+		expect(accounts.getAllByText("ИИС")).toHaveLength(1);
+		expect(accounts.getAllByRole("listitem")).toHaveLength(2);
+	});
+});

src/entities/broker-operation/ui/OperationGroup.tsx

@@ -0,0 +1,96 @@
+import type { FC } from "react";
+
+import { EntryCard } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+
+import {
+	formatSnapshotDay,
+	instrumentLogoUrl,
+	sumMoney,
+	totalText,
+} from "@/shared/lib";
+import { AccountCardRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
+
+import type { BrokerageOperation } from "../api/useBrokerageOperations";
+
+import {
+	entryLabelKey,
+	isZeroDecimal,
+	operationLabelKey,
+	paymentPresentation,
+} from "../model/display";
+
+type OperationGroupProps = {
+	entries: { key: string; operation: BrokerageOperation }[];
+	totalVisible: boolean;
+};
+
+const OperationGroup: FC<OperationGroupProps> = (props) => {
+	const { t } = useTranslation();
+	const operations = props.entries.map(entry => entry.operation);
+	const first = operations.at(0);
+
+	// groupItems only emits groups of at least two entries.
+	if (!first) return null;
+
+	const typeLabel = t(first.category === "income"
+		? entryLabelKey(first)
+		: operationLabelKey(first.type));
+
+	const instrument
+		= first.ticker ?? first.instrumentType ?? t("ledger.noInstrument");
+
+	const amounts = operations.flatMap(operation =>
+		operation.payment ? [operation.payment] : [],
+	);
+
+	const isAmountsKnown = amounts.length === operations.length
+		&& amounts.every(amount => !isZeroDecimal(amount.value));
+
+	const totals = isAmountsKnown && props.totalVisible
+		? sumMoney(amounts)
+		: null;
+
+	const date = formatSnapshotDay(first.occurredAt);
+	const title = `${typeLabel} · ${instrument}`;
+	const totalsText = totalText(totals, true);
+
+	const accessibleName = [
+		title,
+		t("payout.executedAt", { date }),
+		totalsText || t("entryGroup.totalUnavailable"),
+	].join(", ");
+
+	return (
+		<EntryGroup
+			header={(
+				<EntryCard
+					imageSrc={instrumentLogoUrl(first.logoName)}
+					initial={(first.ticker?.trim()[0] ?? "?").toUpperCase()}
+					metadata={t("payout.executedAt", { date })}
+					title={title}
+					tone="neutral"
+					value={<EntryGroupTotal isSigned totals={totals} />}
+					valueLabel={typeLabel}
+					wrap
+				/>
+			)}
+			label={accessibleName}
+		>
+			{props.entries.map(({ key, operation }) => {
+				const payment = paymentPresentation(operation);
+
+				return (
+					<AccountCardRow
+						accountName={operation.account?.name ?? "—"}
+						key={key}
+						value={payment.amount}
+						valueLabel={t(payment.label)}
+					/>
+				);
+			})}
+		</EntryGroup>
+	);
+};
+
+export { OperationGroup };

src/entities/brokerage-account/model/display.ts

@@ -8,11 +8,15 @@ const VISIBLE_CURRENCY_LIMIT = 2;
 
 type BrokerageAccountCard = {
 	account: BrokerageAccount;
-	positionCounts: null
-		| { bonds: number; stocks: number };
+	positionCounts: null | PositionCounts;
 	source?: NonNullable<InvestmentResourceMeta["dependencies"]>[number];
 	summary:
-		| { remainingCurrencyCount: number; state: "available"; totals: Money[] }
+		| {
+			portfolio: NonNullable<BrokerageAccount["portfolioSummary"]>;
+			remainingCurrencyCount: number;
+			state: "available";
+			totals: Money[];
+		}
 		| { state: "empty" }
 		| { state: "unavailable" };
 };
@@ -21,6 +25,8 @@ type Money = NonNullable<
 	BrokerageAccount["portfolioSummary"]
 >["totalsByCurrency"][number];
 
+type PositionCounts = { bonds: number; stocks: number; total: number };
+
 function accountTypeKey(type: BrokerageAccount["type"]) {
 	return `accounts.types.${type}` as const;
 }
@@ -48,6 +54,7 @@ function brokerageAccountCards(
 		const positionCounts = {
 			bonds: summary.bondPositionCount,
 			stocks: summary.stockPositionCount,
+			total: summary.totalPositionCount,
 		};
 
 		if (summary.totalsByCurrency.length === 0)
@@ -58,6 +65,7 @@ function brokerageAccountCards(
 			positionCounts,
 			source,
 			summary: {
+				portfolio: summary,
 				remainingCurrencyCount: Math.max(
 					summary.totalsByCurrency.length - VISIBLE_CURRENCY_LIMIT,
 					0,

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.module.css

@@ -1,166 +1,144 @@
 .list {
+	display: grid;
 	width: 100%;
+	margin: 0;
+	padding: 0;
+	gap: var(--mantine-spacing-sm);
+	list-style: none;
 }
 
-.card {
-	min-width: 0;
-	gap: var(--mantine-spacing-xl);
-	background: var(--mantine-color-white);
-	border-color: var(--mantine-color-gray-3);
-	box-shadow: 0 4px 16px rgb(15 23 42 / 3%);
+.row {
+	display: grid;
+	grid-template-areas:
+		"identity balance"
+		"details balance"
+		"structure structure";
+	grid-template-columns: minmax(0, 1fr) minmax(0, auto);
+	gap: var(--mantine-spacing-sm) var(--mantine-spacing-xl);
+	align-items: center;
+	padding: var(--mantine-spacing-lg);
+	border: 1px solid var(--wl-color-border);
+	border-left: 3px solid var(--wl-color-primary);
+	border-radius: var(--mantine-radius-md);
+	background: var(--wl-color-surface);
 	color: inherit;
 	text-decoration: none;
-	transition:
-		transform 160ms ease,
-		box-shadow 160ms ease,
-		border-color 160ms ease;
+	transition: background-color 160ms ease, border-color 160ms ease;
 }
 
-.card:hover,
-.card:focus-visible {
-	border-color: var(--mantine-color-blue-3);
-	box-shadow: 0 12px 28px rgb(15 23 42 / 8%);
-	transform: translateY(-3px);
+.row:hover,
+.row:focus-visible {
+	border-color: var(--wl-color-primary);
+	background: var(--wl-color-subtle);
 }
 
-.card:focus-visible {
-	outline: 2px solid var(--mantine-color-blue-6);
-	outline-offset: 3px;
+.row:focus-visible {
+	outline: 2px solid var(--wl-color-primary);
+	outline-offset: -2px;
 }
 
 .identity {
+	grid-area: identity;
 	min-width: 0;
 }
 
-.kicker {
-	padding: 5px 10px;
-	border-radius: var(--mantine-radius-sm);
-	background: var(--mantine-color-blue-0);
-	color: var(--mantine-color-blue-8);
-	letter-spacing: 0.02em;
-}
-
-.accountIcon {
-	width: 28px;
-	height: 28px;
-	flex-shrink: 0;
-	color: var(--mantine-color-blue-5);
-}
-
 .name {
 	margin: 0;
-	font-size: var(--mantine-h3-font-size);
-	line-height: 1.3;
+	color: var(--wl-color-text);
+	font-size: var(--mantine-font-size-md);
+	line-height: var(--mantine-line-height-md);
 	overflow-wrap: anywhere;
 }
 
+.accountType {
+	flex-shrink: 0;
+	align-self: flex-start;
+	padding: 2px var(--mantine-spacing-xs);
+	border-radius: var(--mantine-radius-sm);
+}
+
 .balance {
-	flex: 1;
+	grid-area: balance;
+	min-width: 0;
+	text-align: right;
 }
 
 .summary {
-	font-variant-numeric: tabular-nums;
+	font-variant-numeric: tabular-nums lining-nums;
+	white-space: nowrap;
 }
 
 .total {
-	font-size: clamp(1.5rem, 2.8vw, 2.25rem);
-	letter-spacing: -0.035em;
-	line-height: 1.2;
-	overflow-wrap: anywhere;
-}
-
-.total + .total {
+	color: var(--wl-color-text);
 	font-size: var(--mantine-font-size-lg);
-	font-weight: 500;
-	letter-spacing: 0;
-	color: var(--mantine-color-gray-7);
+	line-height: var(--mantine-line-height-lg);
 }
 
-.positions {
-	display: grid;
-	grid-template-columns: repeat(2, minmax(0, 1fr));
-	gap: var(--mantine-spacing-sm);
-	margin: 0;
+.return,
+.cashValue {
+	font-variant-numeric: tabular-nums lining-nums;
+	white-space: nowrap;
 }
 
-.positions > div {
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: space-between;
-	gap: 4px var(--mantine-spacing-sm);
-	padding: var(--mantine-spacing-sm) var(--mantine-spacing-md);
-	border-radius: var(--mantine-radius-md);
+.positive {
+	color: var(--wl-color-positive);
 }
 
-.stocks {
-	background: var(--mantine-color-blue-0);
-	color: var(--mantine-color-blue-8);
+.negative {
+	color: var(--wl-color-negative);
 }
 
-.bonds {
-	background: var(--mantine-color-grape-0);
-	color: var(--mantine-color-grape-8);
+.neutral {
+	color: var(--wl-color-muted);
 }
 
-.positions dt {
-	font-size: var(--mantine-font-size-sm);
-	font-weight: 500;
+.cash {
+	font-variant-numeric: tabular-nums lining-nums;
 }
 
-.positions dd {
-	margin: 0;
-	font-size: 1.75rem;
-	font-weight: 700;
-	font-variant-numeric: tabular-nums;
-	line-height: 1.25;
-	overflow-wrap: anywhere;
+.details {
+	grid-area: details;
+	min-width: 0;
+	font-variant-numeric: tabular-nums lining-nums;
 }
 
-.footer {
-	border-top: 1px solid var(--mantine-color-gray-2);
-	padding-top: var(--mantine-spacing-md);
-}
-
-.open {
-	display: inline-flex;
-	align-items: center;
+.structure {
+	grid-area: structure;
 	gap: var(--mantine-spacing-xs);
-	margin-left: auto;
-	color: var(--mantine-color-blue-7);
 }
 
-.arrow {
-	font-size: var(--mantine-font-size-lg);
-	transition: transform 160ms ease;
+.structureBar {
+	display: flex;
+	width: 100%;
+	height: 6px;
+	overflow: hidden;
+	border-radius: var(--mantine-radius-xs);
+	background: var(--wl-color-subtle);
 }
 
-.card:hover .arrow {
-	transform: translateX(3px);
+.structureSection {
+	flex: none;
+	height: 100%;
+	background: var(--category-color);
 }
 
-@media (max-width: 36em) {
-	.card {
+@media (max-width: 47.9375em) {
+	.row {
+		grid-template-areas:
+			"identity"
+			"balance"
+			"structure"
+			"details";
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--mantine-spacing-sm);
 		padding: var(--mantine-spacing-md);
-		gap: var(--mantine-spacing-lg);
 	}
 
-	.positions > div {
-		flex-direction: column;
-		align-items: flex-start;
-		padding: var(--mantine-spacing-sm);
+	.balance {
+		text-align: left;
 	}
-}
 
-@media (prefers-reduced-motion: reduce) {
-	.card,
-	.arrow {
-		transition: none;
-	}
-
-	.card:hover,
-	.card:focus-visible,
-	.card:hover .arrow {
-		transform: none;
+	.balance > div {
+		justify-content: flex-start;
 	}
 }

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.stories.tsx

@@ -2,32 +2,86 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { MemoryRouter } from "react-router";
 
+import { resource } from "@/test/resource";
+
 import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
 
 import { brokerageAccountCards } from "../../model/display";
 import { BrokerageAccountList } from "./BrokerageAccountList";
 
-const syntheticAccount = {
-	id: "storybook-account",
-	name: "Учебный брокерский счёт",
-	openedOn: "2025-03-15",
-	portfolioSummary: {
-		bondPositionCount: 12,
-		stockPositionCount: 5,
-		totalsByCurrency: [
-			{ currency: "RUB", value: "125000.50" },
-			{ currency: "USD", value: "320" },
-			{ currency: "EUR", value: "210" },
-		],
+type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
+
+const rubReturn = {
+	absolute: "136900",
+	costBasis: "1103600.50",
+	currency: "RUB",
+	partial: false,
+	percent: "12.40",
+};
+
+const portfolioSummary = {
+	bondPositionCount: 12,
+	cashBalances: [
+		{ currency: "RUB", value: "82500.50" },
+		{ currency: "USD", value: "1500" },
+	],
+	fundPositionCount: 2,
+	stockPositionCount: 5,
+	structure: {
+		currencies: [{
+			categories: [
+				{ sharePercent: "55.000000", type: "STOCK", value: "682500" },
+				{ sharePercent: "25.000000", type: "BOND", value: "310500" },
+				{ sharePercent: "10.000000", type: "OTHER", value: "124200" },
+				{ sharePercent: "10.000000", type: "CASH", value: "124200" },
+			],
+			currency: "RUB",
+			hasNegativeValues: false,
+			totalValue: "1241400",
+		}],
+		unvaluedCategories: [],
 	},
-	type: "BROKERAGE",
-} satisfies BrokerageAccount;
+	totalPositionCount: 19,
+	totalsByCurrency: [{ currency: "RUB", value: "1240500.50" }],
+	unrealizedReturnByCurrency: [rubReturn],
+} satisfies PortfolioSummary;
+
+function account(
+	id: string,
+	name: string,
+	summary: null | PortfolioSummary = portfolioSummary,
+	type: BrokerageAccount["type"] = "BROKERAGE",
+): BrokerageAccount {
+	return {
+		id,
+		name,
+		openedOn: "2025-03-15",
+		portfolioSummary: summary,
+		type,
+	};
+}
+
+const negativeSummary: PortfolioSummary = {
+	...portfolioSummary,
+	unrealizedReturnByCurrency: [{
+		...rubReturn,
+		absolute: "-4200",
+		percent: "-3.05",
+	}],
+};
+
+const emptySummary: PortfolioSummary = {
+	...portfolioSummary,
+	cashBalances: [],
+	structure: { currencies: [], unvaluedCategories: [] },
+	totalPositionCount: 0,
+	totalsByCurrency: [],
+	unrealizedReturnByCurrency: [],
+};
 
 const meta = {
-	args: { accounts: brokerageAccountCards([syntheticAccount]) },
-	argTypes: {
-		accounts: { control: false },
-	},
+	args: { accounts: brokerageAccountCards([account("normal", "Основной ИИС")]) },
+	argTypes: { accounts: { control: false } },
 	component: BrokerageAccountList,
 	decorators: [
 		Story => (
@@ -40,7 +94,7 @@ const meta = {
 		docs: {
 			description: {
 				component:
-					"Карточки счетов WealthLedger со сводкой по валютам и числом наименований акций и облигаций. Используйте на экране выбора счёта; отсутствие сводки и отсутствие сумм имеют разные сообщения. Примеры содержат вымышленные данные. Ссылки меняют только локальный маршрут MemoryRouter; страница назначения в этой истории не отображается.",
+					"Карточки счетов: стоимость и доходность по валютам, деньги, структура и свежесть источника. Денежные и процентные значения остаются строками. Все примеры содержат вымышленные данные; ссылки работают только внутри MemoryRouter.",
 			},
 		},
 	},
@@ -52,188 +106,112 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Available: Story = {
-	name: "Сводка по нескольким валютам",
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Показываются первые две валюты и количество остальных. Суммы разных валют не складываются в общий итог.",
-			},
-		},
+export const Normal: Story = {};
+
+export const MultiCurrency: Story = {
+	args: {
+		accounts: brokerageAccountCards([account("multi", "Мультивалютный", {
+			...portfolioSummary,
+			cashBalances: [
+				{ currency: "RUB", value: "82500.50" },
+				{ currency: "USD", value: "1500" },
+			],
+			totalsByCurrency: [
+				{ currency: "RUB", value: "1240500.50" },
+				{ currency: "USD", value: "3200" },
+				{ currency: "EUR", value: "900" },
+			],
+			unrealizedReturnByCurrency: [
+				...portfolioSummary.unrealizedReturnByCurrency,
+				{
+					absolute: "20",
+					costBasis: "3180",
+					currency: "USD",
+					partial: false,
+					percent: "2.10",
+				},
+				{
+					absolute: "0",
+					costBasis: "900",
+					currency: "EUR",
+					partial: false,
+					percent: null,
+				},
+			],
+		})]),
 	},
 };
 
-export const Unavailable: Story
-	= {
-		args: {
-			accounts: brokerageAccountCards([
-				{ ...syntheticAccount, openedOn: null, portfolioSummary: null },
-			]),
-		},
-		name: "Сводка недоступна",
-		parameters: {
-			docs: {
-				description: {
-					story:
-						"Счёт остаётся доступен для открытия, даже если сводка временно недоступна. Неизвестные суммы не заменяются нулём; отсутствующая дата открытия не отображается.",
-				},
-			},
-		},
-	};
+export const Negative: Story = {
+	args: {
+		accounts: brokerageAccountCards([
+			account("negative", "Просевший портфель", negativeSummary),
+		]),
+	},
+};
+
+export const Partial: Story = {
+	args: {
+		accounts: brokerageAccountCards([account("partial", "Частичные данные", {
+			...portfolioSummary,
+			unrealizedReturnByCurrency: [{
+				...rubReturn,
+				partial: true,
+			}],
+		})]),
+	},
+};
 
 export const Empty: Story = {
 	args: {
 		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				portfolioSummary: {
-					bondPositionCount: 0,
-					stockPositionCount: 0,
-					totalsByCurrency: [],
-				},
-			},
+			account("empty", "Новый пустой счёт", emptySummary),
 		]),
 	},
-	name: "Нет текущих сумм",
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Успешно полученная пустая сводка отличается от ошибки получения данных. Карточка сохраняет название, тип счёта и переход.",
-			},
-		},
+};
+
+export const Unavailable: Story = {
+	args: {
+		accounts: brokerageAccountCards([
+			account("unavailable", "Счёт без сводки", null),
+		]),
+	},
+};
+
+export const Stale: Story = {
+	args: {
+		accounts: brokerageAccountCards([
+			account("stale", "Устаревший портфель"),
+		], resource([], {
+			dependencies: [{
+				availability: "available",
+				completeness: "complete",
+				dataRevision: "stale-revision",
+				freshness: "stale",
+				lastAttempt: {
+					finishedAt: null,
+					problems: [],
+					startedAt: null,
+					state: "none",
+				},
+				lastSuccessfulAt: "2026-08-13T00:00:00Z",
+				resourceKey: "portfolio/stale",
+			}],
+			freshness: "stale",
+			lastSuccessfulAt: "2026-08-14T00:00:00Z",
+		}).meta.dependencies),
 	},
 };
 
 export const LongName: Story = {
 	args: {
 		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				name: "Учебный индивидуальный инвестиционный счёт для долгосрочных накоплений",
-				type: "INDIVIDUAL_INVESTMENT",
-			},
-		]),
-	},
-	name: "Длинное название счёта",
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Проверьте перенос длинного названия на узком экране и доступность всей карточки с клавиатуры.",
-			},
-		},
-	},
-};
-
-export const AccountGrid: Story = {
-	args: {
-		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				name: "Основной",
-				portfolioSummary: {
-					bondPositionCount: 14,
-					stockPositionCount: 8,
-					totalsByCurrency: [{ currency: "RUB", value: "1256430.50" }],
-				},
-			},
-			{
-				...syntheticAccount,
-				id: "storybook-iis",
-				name: "Долгосрочные инвестиции",
-				portfolioSummary: {
-					bondPositionCount: 6,
-					stockPositionCount: 0,
-					totalsByCurrency: [{ currency: "RUB", value: "480250" }],
-				},
-				type: "INDIVIDUAL_INVESTMENT",
-			},
-		]),
-	},
-	name: "Несколько счетов",
-};
-
-export const UnvaluedPositions: Story = {
-	args: {
-		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				portfolioSummary: {
-					bondPositionCount: 1,
-					stockPositionCount: 2,
-					totalsByCurrency: [],
-				},
-			},
-		]),
-	},
-	name: "Бумаги без текущей оценки",
-};
-
-export const LargeValues: Story = {
-	args: {
-		accounts: brokerageAccountCards([
-			{
-				...syntheticAccount,
-				portfolioSummary: {
-					bondPositionCount: 105,
-					stockPositionCount: 21,
-					totalsByCurrency: [
-						{ currency: "RUB", value: "1234567890123456789.50" },
-						{ currency: "USD", value: "-9876543210987654321.50" },
-					],
-				},
-			},
-		]),
-	},
-	name: "Длинные суммы",
-};
-
-export const IndependentFreshness: Story
-	= {
-		args: {
-			accounts: brokerageAccountCards(
-				[
-					syntheticAccount,
-					{
-						...syntheticAccount,
-						id: "waiting",
-						name: "Новый счёт",
-						portfolioSummary: null,
-					},
-				],
-				[
-					{
-						availability: "available",
-						completeness: "complete",
-						dataRevision: "1",
-						freshness: "stale",
-						lastAttempt: {
-							finishedAt: "2026-09-24T10:31:00Z",
-							problems: [],
-							startedAt: "2026-09-24T10:30:00Z",
-							state: "failed",
-						},
-						lastSuccessfulAt: "2026-09-24T10:30:00Z",
-						resourceKey: "portfolio/storybook-account",
-					},
-					{
-						availability: "initial-loading",
-						completeness: "incomplete",
-						dataRevision: "0",
-						freshness: "unknown",
-						lastAttempt: {
-							finishedAt: null,
-							problems: [],
-							startedAt: "2026-09-24T10:30:00Z",
-							state: "running",
-						},
-						lastSuccessfulAt: null,
-						resourceKey: "portfolio/waiting",
-					},
-				],
+			account(
+				"long",
+				"Очень длинное название индивидуального инвестиционного счёта, которое должно корректно переноситься на узком экране",
+				portfolioSummary,
+				"INDIVIDUAL_INVESTMENT",
 			),
-		},
-		name: "Независимая свежесть и ошибка сводок",
-	};
+		]),
+	},
+};

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.test.tsx

@@ -5,122 +5,202 @@ import { describe, expect, it } from "vitest";
 
 import { resource } from "@/test/resource";
 
+import type { BrokerageAccount } from "../../api/useBrokerageAccounts";
+
 import { brokerageAccountCards } from "../../model/display";
 import { BrokerageAccountList } from "./BrokerageAccountList";
 
-describe("BrokerageAccountList", () => {
-	it("renders account details and an account link", () => {
-		render(
-			<MantineProvider>
-				<MemoryRouter>
-					<BrokerageAccountList
-						accounts={brokerageAccountCards([
-							{
-								id: "account-1",
-								name: "Основной",
-								openedOn: "2024-08-13",
-								portfolioSummary: {
-									bondPositionCount: 12,
-									stockPositionCount: 5,
-									totalsByCurrency: [
-										{ currency: "RUB", value: "1500" },
-										{ currency: "USD", value: "20" },
-										{ currency: "EUR", value: "5" },
-									],
-								},
-								type: "BROKERAGE",
+type PortfolioSummary = NonNullable<BrokerageAccount["portfolioSummary"]>;
 
-							},
-							{
-								id: "account-2",
-								name: "Недоступный",
-								openedOn: null,
-								portfolioSummary: null,
-								type: "BROKERAGE",
-							},
-							{
-								id: "account-3",
-								name: "Пустой",
-								openedOn: null,
-								portfolioSummary: {
-									bondPositionCount: 0,
-									stockPositionCount: 2,
-									totalsByCurrency: [],
-								},
-								type: "BROKERAGE",
-							},
-						])}
-					/>
-				</MemoryRouter>
-			</MantineProvider>,
-		);
+const portfolioSummary = {
+	bondPositionCount: 12,
+	cashBalances: [
+		{ currency: "RUB", value: "82500.5" },
+		{ currency: "USD", value: "20" },
+	],
+	fundPositionCount: 0,
+	stockPositionCount: 5,
+	structure: {
+		currencies: [{
+			categories: [
+				{ sharePercent: "50.000000", type: "STOCK", value: "100" },
+				{ sharePercent: "30.000000", type: "BOND", value: "60" },
+				{ sharePercent: "0.000000", type: "OTHER", value: "0" },
+				{ sharePercent: "20.000000", type: "CASH", value: "40" },
+			],
+			currency: "RUB",
+			hasNegativeValues: false,
+			totalValue: "200",
+		}],
+		unvaluedCategories: [],
+	},
+	totalPositionCount: 17,
+	totalsByCurrency: [
+		{ currency: "RUB", value: "123456789012345678901.995" },
+		{ currency: "USD", value: "20" },
+		{ currency: "EUR", value: "5" },
+	],
+	unrealizedReturnByCurrency: [
+		{
+			absolute: "136900",
+			costBasis: "1000000",
+			currency: "RUB",
+			partial: true,
+			percent: "12.40",
+		},
+		{
+			absolute: "-4.2",
+			costBasis: "24.2",
+			currency: "USD",
+			partial: false,
+			percent: "-3.05",
+		},
+		{
+			absolute: "0",
+			costBasis: "5",
+			currency: "EUR",
+			partial: false,
+			percent: null,
+		},
+	],
+} satisfies PortfolioSummary;
 
-		expect(screen.getByRole("link", { name: /Основной/ })).toHaveAttribute(
-			"href",
-			"/accounts/account-1",
-		);
-		expect(screen.getAllByText("Брокерский счет")).toHaveLength(3);
-		expect(screen.getByText(/^Открыт /)).toBeInTheDocument();
-		expect(screen.getByText("1 500 ₽")).toBeInTheDocument();
-		expect(screen.getByText("20 USD")).toBeInTheDocument();
-		expect(screen.getByText("Еще 1 валюта")).toBeInTheDocument();
-		expect(screen.getByText("Сводка временно недоступна")).toBeInTheDocument();
-		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
-		expect(screen.getAllByText("Открыть счет")).toHaveLength(3);
-		const available = within(screen.getByRole("link", { name: /Основной/ }));
-		expect(available.getAllByRole("definition")[0]).toHaveTextContent("5");
-		expect(available.getAllByRole("definition")[1]).toHaveTextContent("12");
-		const unvalued = within(screen.getByRole("link", { name: /Пустой/ }));
-		expect(unvalued.getAllByRole("definition")[0]).toHaveTextContent("2");
-		expect(unvalued.getAllByRole("definition")[1]).toHaveTextContent("0");
-		expect(
-			within(screen.getByRole("link", { name: /Недоступный/ })).queryByText(
-				"Акции",
-			),
-		).not.toBeInTheDocument();
-	});
-});
+type BrokerageAccountCardInput = Parameters<typeof BrokerageAccountList>[0][
+	"accounts"
+];
 
-it("shows portfolio summary freshness independently for each account", () => {
-	const accounts = brokerageAccountCards(
-		["fresh", "stale"].map(
+function account(
+	id: string,
+	name: string,
+	summary: null | PortfolioSummary,
+): BrokerageAccount {
+	return {
+		id,
+		name,
+		openedOn: null,
+		portfolioSummary: summary,
+		type: "BROKERAGE",
+	};
+}
 
-			id =>
-				({
-					id,
-					name: id,
-					openedOn: null,
-					portfolioSummary: {
-						bondPositionCount: 0,
-						stockPositionCount: 1,
-						totalsByCurrency: [{ currency: "RUB", value: "10" }],
-					},
-					type: "BROKERAGE" as const,
-				}),
-		),
-		[
-			resource(null, { freshness: "fresh", resourceKey: "portfolio/fresh" })
-				.meta,
-			resource(null, { freshness: "stale", resourceKey: "portfolio/stale" })
-				.meta,
-		],
-	);
-
-	render(
+function renderList(accounts: BrokerageAccountCardInput) {
+	return render(
 		<MantineProvider>
 			<MemoryRouter>
 				<BrokerageAccountList accounts={accounts} />
 			</MemoryRouter>
 		</MantineProvider>,
 	);
-	expect(
-		within(screen.getByRole("link", { name: /stale/ })).getByText(
-			"Данные требуют обновления",
-		),
-	).toBeVisible();
-	expect(
-		within(screen.getByRole("link", { name: /fresh/ })).queryByText(
-			"Данные требуют обновления",
-		),
-	).not.toBeInTheDocument();
+}
+
+describe("BrokerageAccountList", () => {
+	it("renders returns, cash and structure with precise totals", () => {
+		const nullReturnSummary: PortfolioSummary = {
+			...portfolioSummary,
+			cashBalances: [],
+			structure: { currencies: [], unvaluedCategories: [] },
+			totalsByCurrency: [{ currency: "EUR", value: "5" }],
+			unrealizedReturnByCurrency: [{
+				absolute: "0",
+				costBasis: "5",
+				currency: "EUR",
+				partial: false,
+				percent: null,
+			}],
+		};
+
+		renderList(brokerageAccountCards([
+			account("account-1", "Основной", portfolioSummary),
+			account("account-2", "Без доходности", nullReturnSummary),
+		]));
+
+		const link = screen.getByRole("link", { name: /Основной/ });
+		expect(link).toHaveAttribute("href", "/accounts/account-1");
+		expect(within(link).getByText("123 456 789 012 345 678 902,00 ₽"))
+			.toBeInTheDocument();
+		expect(within(link).getByText("Еще 1 валюта")).toBeInTheDocument();
+		expect(within(link).getByText("+12,40 %")).toBeInTheDocument();
+		expect(within(link).getByText("+136 900 ₽")).toBeInTheDocument();
+		expect(within(link).getByText("−3,05 %")).toBeInTheDocument();
+		expect(within(link).getByText("−4,2 USD")).toBeInTheDocument();
+		const nullReturnLink = screen.getByRole("link", { name: /Без доходности/ });
+		expect(within(nullReturnLink).getByText("—")).toBeInTheDocument();
+		expect(within(link).getByText("частично")).toBeInTheDocument();
+		expect(within(link).getByText("82 500,50 ₽")).toBeInTheDocument();
+		expect(within(link).getAllByText("20,00 USD")).not.toHaveLength(0);
+		expect(within(link).getByText("17 позиций")).toBeInTheDocument();
+		expect(screen.getByRole("img", {
+			name: "Структура в RUB: Акции 50 %; Облигации 30 %; "
+				+ "Другие активы 0 %; Свободные деньги 20 %",
+		})).toBeInTheDocument();
+		const stockLegend = within(link).getByText(/Акции 50 %/);
+		expect(stockLegend).toHaveTextContent("● Акции 50 %");
+		// eslint-disable-next-line testing-library/no-node-access -- The legend is aria-hidden, so only DOM traversal reaches its container.
+		expect(stockLegend.parentElement).toHaveAttribute("aria-hidden", "true");
+		expect(within(link).queryByText(/Другие активы 0 %/)).not.toBeInTheDocument();
+		expect(link).toHaveTextContent("По данным брокера");
+		expect(link).toHaveTextContent("Структура RUB: Акции 100");
+	});
+
+	it("preserves empty, unavailable and stale states", () => {
+		const emptySummary: PortfolioSummary = {
+			...portfolioSummary,
+			cashBalances: [],
+			structure: { currencies: [], unvaluedCategories: [] },
+			totalPositionCount: 0,
+			totalsByCurrency: [],
+			unrealizedReturnByCurrency: [],
+		};
+
+		const cards = brokerageAccountCards([
+			account("empty", "Пустой", emptySummary),
+			account("unavailable", "Недоступный", null),
+			account("stale", "Устаревший", portfolioSummary),
+			account("failed", "Ошибка обновления", null),
+		], resource([], {
+			dependencies: [{
+				availability: "available",
+				completeness: "complete",
+				dataRevision: "stale-revision",
+				freshness: "stale",
+				lastAttempt: {
+					finishedAt: null,
+					problems: [],
+					startedAt: null,
+					state: "none",
+				},
+				lastSuccessfulAt: "2026-08-13T00:00:00Z",
+				resourceKey: "portfolio/stale",
+			}, {
+				availability: "available",
+				completeness: "complete",
+				dataRevision: "failed-revision",
+				freshness: "stale",
+				lastAttempt: {
+					finishedAt: "2026-08-14T00:01:00Z",
+					problems: [],
+					startedAt: "2026-08-14T00:00:00Z",
+					state: "failed",
+				},
+				lastSuccessfulAt: "2026-08-13T00:00:00Z",
+				resourceKey: "portfolio/failed",
+			}],
+			freshness: "stale",
+			lastSuccessfulAt: "2026-08-14T00:00:00Z",
+		}).meta.dependencies);
+
+		renderList(cards);
+
+		expect(screen.getByText("Нет текущих сумм")).toBeInTheDocument();
+		expect(screen.getAllByText("Сводка временно недоступна"))
+			.toHaveLength(2);
+		const staleLink = screen.getByRole("link", { name: /Устаревший/ });
+		expect(within(staleLink).getByText("Данные требуют обновления"))
+			.toBeInTheDocument();
+		expect(within(staleLink).getByText(/Данные на/)).toBeInTheDocument();
+		const failedLink = screen.getByRole("link", { name: /Ошибка обновления/ });
+		expect(within(failedLink).getByText(
+			"Не удалось обновить данные. Показаны последние полученные.",
+		)).toBeInTheDocument();
+	});
 });

src/entities/brokerage-account/ui/BrokerageAccountList/BrokerageAccountList.tsx

@@ -1,11 +1,10 @@
-import type { FC } from "react";
+import type { CSSProperties, FC } from "react";
 
-import { Card, Group, SimpleGrid, Stack, Text } from "@mantine/core";
-import { WalletIcon } from "@wealthledger/icons";
+import { Badge, Group, Stack, Text, VisuallyHidden } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
-import { formatDate, formatMoney } from "@/shared/lib";
+import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
 import { SourceSyncStatus } from "@/shared/ui";
 
 import type { BrokerageAccountCard } from "../../model/display";
@@ -13,12 +12,176 @@ import type { BrokerageAccountCard } from "../../model/display";
 import { accountTypeKey } from "../../model/display";
 import classes from "./BrokerageAccountList.module.css";
 
+const DECIMAL_PART_COUNT = 2;
+const STRUCTURE_CATEGORY_ORDER = ["STOCK", "BOND", "OTHER", "CASH"] as const;
+
+type AvailableSummary = Extract<
+	BrokerageAccountCard["summary"],
+	{ state: "available" }
+>;
+
 type BrokerageAccountListProps = { accounts: BrokerageAccountCard[] };
 
 type BrokerageAccountSummaryProps = {
 	summary: BrokerageAccountCard["summary"];
 };
 
+type PortfolioSummary = AvailableSummary["portfolio"];
+
+type ReturnValueProps = {
+	item: PortfolioSummary["unrealizedReturnByCurrency"][number];
+};
+
+type StructureCurrency = PortfolioSummary["structure"]["currencies"][number];
+
+function formatPercent(value: null | string) {
+	if (value === null) return "—";
+
+	const formatted = `${value.replace(".", ",")}\u{A0}%`;
+	if (isZero(value))
+		return value.startsWith("-") ? formatted.slice(1) : formatted;
+
+	return value.startsWith("-") ? `−${formatted.slice(1)}` : `+${formatted}`;
+}
+
+function formatStructurePercent(value: string) {
+	let trimmed = value;
+	while (trimmed.includes(".") && trimmed.endsWith("0"))
+		trimmed = trimmed.slice(0, -1);
+	if (trimmed.endsWith(".")) trimmed = trimmed.slice(0, -1);
+
+	return trimmed.replace(".", ",");
+}
+
+function isZero(value: string) {
+	const unsigned = value.startsWith("-") ? value.slice(1) : value;
+	const [integer = "", fraction = ""] = unsigned.split(".", DECIMAL_PART_COUNT);
+
+	return integer.replaceAll("0", "") === ""
+		&& fraction.replaceAll("0", "") === "";
+}
+
+const ReturnValue: FC<ReturnValueProps> = (props) => {
+	const { t } = useTranslation();
+	const { item } = props;
+
+	const isNegative = item.percent !== null
+		&& item.percent.startsWith("-")
+		&& !isZero(item.percent);
+
+	const isPositive = item.percent !== null
+		&& !item.percent.startsWith("-")
+		&& !isZero(item.percent);
+
+	let toneClass = classes.neutral;
+	if (isNegative) toneClass = classes.negative;
+	else if (isPositive) toneClass = classes.positive;
+
+	return (
+		<Group className={classes.return} gap="xs" wrap="nowrap">
+			<Text className={toneClass} fw={700} size="sm">
+				{formatPercent(item.percent)}
+			</Text>
+
+			<Text className={toneClass} size="sm">
+				{formatMoney(
+					{ currency: item.currency, value: item.absolute },
+					{ withSign: true },
+				)}
+			</Text>
+
+			{item.partial && (
+				<Text c="dimmed" size="xs">
+					{t("accounts.partial")}
+				</Text>
+			)}
+		</Group>
+	);
+};
+
+type StructureBarProps = { item: StructureCurrency };
+
+const StructureBar: FC<StructureBarProps> = (props) => {
+	const { t } = useTranslation();
+
+	const categories = STRUCTURE_CATEGORY_ORDER.flatMap((type) => {
+		const category = props.item.categories.find(item => item.type === type);
+
+		return category ? [category] : [];
+	});
+
+	const description = categories.map((category) => {
+		const label = t(portfolioCategoryPresentation[category.type].label);
+
+		const percent = category.sharePercent === null
+			? null
+			: formatStructurePercent(category.sharePercent);
+
+		return percent === null
+			? t("accounts.structure.incomplete", { category: label })
+			: t("accounts.structure.category", { category: label, percent });
+	}).join("; ");
+
+	const label = t("accounts.structure.label", {
+		currency: props.item.currency,
+		value: description,
+	});
+
+	const legendCategories = categories.filter(category =>
+		category.sharePercent === null || !isZero(category.sharePercent));
+
+	return (
+		<Stack gap={4}>
+			<div
+				aria-label={label}
+				className={classes.structureBar}
+				role="img"
+				title={label}
+			>
+				{categories.map((category) => {
+					const presentation = portfolioCategoryPresentation[category.type];
+
+					const style = {
+						"--category-color": `var(--mantine-color-${presentation.color.replace(".", "-")})`,
+						"width": `${category.sharePercent ?? 0}%`,
+					} as CSSProperties;
+
+					return (
+						<div
+							aria-hidden
+							className={classes.structureSection}
+							key={category.type}
+							style={style}
+						/>
+					);
+				})}
+			</div>
+
+			<Group aria-hidden gap="xs" wrap="wrap">
+				{legendCategories.map((category) => {
+					const presentation = portfolioCategoryPresentation[category.type];
+					const categoryLabel = t(presentation.label);
+
+					const text = category.sharePercent === null
+						? categoryLabel
+						: t("accounts.structure.category", {
+								category: categoryLabel,
+								percent: formatStructurePercent(category.sharePercent),
+							});
+
+					return (
+						<Text c="dimmed" key={category.type} size="xs">
+							<Text c={presentation.color} component="span">●</Text>
+							{" "}
+							{text}
+						</Text>
+					);
+				})}
+			</Group>
+		</Stack>
+	);
+};
+
 const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 	const { summary } = props;
 	const { t } = useTranslation();
@@ -36,19 +199,51 @@ const BrokerageAccountSummary: FC<BrokerageAccountSummaryProps> = (props) => {
 		);
 
 	return (
-		<Stack className={classes.summary} gap={4}>
-			{summary.totals.map(total => (
-				<Text className={classes.total} fw={700} key={total.currency}>
-					{formatMoney(total)}
-				</Text>
-			))}
+		<Stack className={classes.balance} gap="xs">
+			<Group align="flex-start" gap="lg" justify="flex-end" wrap="nowrap">
+				<Stack className={classes.summary} gap={4}>
+					{summary.totals.map(total => (
+						<Text className={classes.total} fw={700} key={total.currency}>
+							{formatMoney(total, { withRoundedCents: true })}
+						</Text>
+					))}
 
-			{!!summary.remainingCurrencyCount && (
-				<Text c="dimmed" size="sm">
-					{t("accounts.remainingCurrencies", {
-						count: summary.remainingCurrencyCount,
+					{!!summary.remainingCurrencyCount && (
+						<Text c="dimmed" size="sm">
+							{t("accounts.remainingCurrencies", {
+								count: summary.remainingCurrencyCount,
+							})}
+						</Text>
+					)}
+				</Stack>
+
+				<Stack gap={4}>
+					{summary.totals.map((total) => {
+						const item = summary.portfolio.unrealizedReturnByCurrency.find(
+							returnItem => returnItem.currency === total.currency,
+						);
+
+						return item
+							? <ReturnValue item={item} key={total.currency} />
+							: null;
 					})}
-				</Text>
+				</Stack>
+			</Group>
+
+			{summary.portfolio.cashBalances.length > 0 && (
+				<Group className={classes.cash} gap="xs" justify="flex-end">
+					<Text c="dimmed" size="xs">
+						{t("accounts.cash")}
+					</Text>
+
+					<Stack gap={0}>
+						{summary.portfolio.cashBalances.map(cash => (
+							<Text className={classes.cashValue} key={cash.currency} size="sm">
+								{formatMoney(cash, { withRoundedCents: true })}
+							</Text>
+						))}
+					</Stack>
+				</Group>
 			)}
 		</Stack>
 	);
@@ -61,13 +256,13 @@ type BrokerageAccountSourceStatusProps = {
 const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
 	props,
 ) => {
-	const { source } = props;
 	const { t } = useTranslation();
-
+	const { source } = props;
 	const isSyncing = source?.lastAttempt.state === "running";
 
-	const errorText
-		= source?.lastAttempt.state === "failed" ? t("accounts.refreshError") : null;
+	const errorText = source?.lastAttempt.state === "failed"
+		? t("accounts.refreshError")
+		: null;
 
 	return (
 		<>
@@ -87,86 +282,110 @@ const BrokerageAccountSourceStatus: FC<BrokerageAccountSourceStatusProps> = (
 	);
 };
 
+type AccountDescriptionProps = {
+	account: BrokerageAccountCard;
+};
+
+const AccountDescription: FC<AccountDescriptionProps> = (props) => {
+	const { t } = useTranslation();
+	const { account, summary } = props.account;
+	if (summary.state !== "available") return null;
+
+	const returns = summary.portfolio.unrealizedReturnByCurrency.map(item =>
+		t("accounts.description.return", {
+			absolute: formatMoney(
+				{ currency: item.currency, value: item.absolute },
+				{ withSign: true },
+			),
+			currency: item.currency,
+			percent: formatPercent(item.percent),
+		}),
+	);
+
+	const structures = summary.portfolio.structure.currencies.map((item) => {
+		const categories = item.categories.map(category =>
+			t("accounts.description.structureCategory", {
+				category: t(portfolioCategoryPresentation[category.type].label),
+				value: formatMoney(
+					{ currency: item.currency, value: category.value },
+					{ withRoundedCents: true },
+				),
+			}),
+		).join(", ");
+
+		return t("accounts.description.structure", {
+			currency: item.currency,
+			value: categories,
+		});
+	});
+
+	const hasPartialReturn = summary.portfolio.unrealizedReturnByCurrency.some(
+		item => item.partial,
+	);
+
+	const details = [...returns, ...structures].join(". ");
+
+	return (
+		<VisuallyHidden>
+			{t("accounts.description.start", {
+				name: account.name,
+				type: t(accountTypeKey(account.type)),
+			})}
+			{t("accounts.description.currentValue", {
+				value: summary.portfolio.totalsByCurrency
+					.map(total => formatMoney(total)).join(", "),
+			})}
+			{details ? `${details}. ` : ""}
+			{hasPartialReturn ? t("accounts.brokerDescription") : ""}
+		</VisuallyHidden>
+	);
+};
+
 const BrokerageAccountList: FC<BrokerageAccountListProps> = (props) => {
-	const { accounts } = props;
 	const { t } = useTranslation();
 
 	return (
-		<SimpleGrid className={classes.list} cols={1} spacing="lg">
-			{accounts.map(({ account, positionCounts, source, summary }) => (
-				<Card
-					className={classes.card}
-					component={Link}
-					key={account.id}
-					padding="xl"
-					radius="lg"
-					to={`/accounts/${account.id}`}
-					withBorder
-				>
-					<Stack className={classes.identity} gap="sm">
-						<Group gap="sm" justify="space-between" wrap="nowrap">
-							<Text className={classes.kicker} fw={700} size="xs">
+		<ul className={classes.list}>
+			{props.accounts.map(({ account, positionCounts, source, summary }) => (
+				<li key={account.id}>
+					<Link className={classes.row} to={`/accounts/${account.id}`}>
+						<Group className={classes.identity} wrap="nowrap">
+							<h2 className={classes.name}>{account.name}</h2>
+
+							<Badge className={classes.accountType} variant="light">
 								{t(accountTypeKey(account.type))}
-							</Text>
-
-							<WalletIcon className={classes.accountIcon} />
+							</Badge>
 						</Group>
 
-						<Text className={classes.name} component="h2" fw={700}>
-							{account.name}
-						</Text>
-					</Stack>
-
-					<Stack className={classes.balance} gap="xs">
-						<Text c="dimmed" size="sm">
-							{t("accounts.currentValue")}
-						</Text>
-
 						<BrokerageAccountSummary summary={summary} />
 
-						<BrokerageAccountSourceStatus source={source} />
-					</Stack>
+						<Stack className={classes.details} gap={2}>
+							{positionCounts && (
+								<Text c="dimmed" size="xs">
+									{t("accounts.positions", {
+										count: positionCounts.total,
+									})}
+								</Text>
+							)}
 
-					{!!positionCounts && (
-						<dl className={classes.positions}>
-							<div className={classes.stocks}>
-								<dt>{t("accounts.stocks")}</dt>
+							<BrokerageAccountSourceStatus source={source} />
+						</Stack>
 
-								<dd>
-									{new Intl.NumberFormat("ru-RU").format(positionCounts.stocks)}
-								</dd>
-							</div>
-
-							<div className={classes.bonds}>
-								<dt>{t("accounts.bonds")}</dt>
-
-								<dd>
-									{new Intl.NumberFormat("ru-RU").format(positionCounts.bonds)}
-								</dd>
-							</div>
-						</dl>
-					)}
-
-					<Group className={classes.footer} gap="sm" justify="space-between">
-						{!!account.openedOn && (
-							<Text c="dimmed" size="xs">
-								{t("accounts.openedOn", {
-									date: formatDate(account.openedOn),
-								})}
-							</Text>
+						{summary.state === "available" && (
+							<Stack className={classes.structure} gap={4}>
+								{summary.portfolio.structure.currencies.map(item => (
+									<StructureBar item={item} key={item.currency} />
+								))}
+							</Stack>
 						)}
 
-						<Text className={classes.open} component="span" fw={600} size="sm">
-							{t("accounts.openAccount")}
-
-							<span aria-hidden="true" className={classes.arrow}>
-								→
-							</span>
-						</Text>
-					</Group>
-				</Card>
+						<AccountDescription
+							account={{ account, positionCounts, source, summary }}
+						/>
+					</Link>
+				</li>
 			))}
-		</SimpleGrid>
+		</ul>
 	);
 };
 

src/entities/brokerage-event/index.ts

@@ -2,8 +2,9 @@ export {
 	type BrokerageEvent,
 	useBrokerageEvents,
 } from "./api/useBrokerageEvents";
-export { brokerageEventKey } from "./model/event-key";
+export { brokerageEventGroupKey, brokerageEventKey } from "./model/event-key";
 export { BrokerageEventCard } from "./ui/BrokerageEventCard";
+export { BrokerageEventGroup } from "./ui/BrokerageEventGroup";
 export {
 	BrokerageEventsPreview,
 	type BrokerageEventsPreviewState,

src/entities/brokerage-event/model/event-key.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from "vitest";
+
+import type { BrokerageEvent } from "../api/useBrokerageEvents";
+
+import { brokerageEventGroupKey } from "./event-key";
+
+const base: BrokerageEvent = {
+	account: { id: "account-1", name: "Брокерский" },
+	date: "2026-08-20",
+	dateKind: "event",
+	displayName: "ОФЗ 26238",
+	figi: "FIGI",
+	instrumentUid: "UID",
+	isin: "RU000A0JX0J2",
+	logoName: null,
+	projectedAmount: { currency: "RUB", value: "100" },
+	ticker: "OFZ",
+	type: "coupon",
+};
+
+describe("brokerageEventGroupKey", () => {
+	it("uses date, preferred identity, exact type and dateKind", () => {
+		const key = brokerageEventGroupKey(base);
+
+		expect(brokerageEventGroupKey({
+			...base,
+			account: { id: "account-2", name: "ИИС" },
+			figi: "OTHER-FIGI",
+		})).toBe(key);
+		expect(brokerageEventGroupKey({ ...base, date: "2026-08-21" }))
+			.not.toBe(key);
+		expect(brokerageEventGroupKey({ ...base, dateKind: "registry" }))
+			.not.toBe(key);
+		expect(brokerageEventGroupKey({ ...base, type: "dividend" }))
+			.not.toBe(key);
+	});
+
+	it("falls back through FIGI and ISIN and rejects missing identity", () => {
+		expect(brokerageEventGroupKey({ ...base, instrumentUid: null }))
+			.toBe(brokerageEventGroupKey({ ...base, instrumentUid: "" }));
+		expect(brokerageEventGroupKey({
+			...base,
+			figi: null,
+			instrumentUid: null,
+		})).toBe(brokerageEventGroupKey({
+			...base,
+			figi: "",
+			instrumentUid: null,
+		}));
+		expect(brokerageEventGroupKey({
+			...base,
+			figi: null,
+			instrumentUid: null,
+			isin: null,
+		})).toBeNull();
+	});
+});

src/entities/brokerage-event/model/event-key.ts

@@ -1,5 +1,13 @@
 import type { BrokerageEvent } from "../api/useBrokerageEvents";
 
+function brokerageEventGroupKey(event: BrokerageEvent): null | string {
+	const identity = event.instrumentUid || event.figi || event.isin;
+
+	return identity
+		? JSON.stringify([event.date, identity, event.type, event.dateKind])
+		: null;
+}
+
 function brokerageEventKey(event: BrokerageEvent) {
 	return JSON.stringify([
 		event.account?.id, event.type, event.date, event.instrumentUid,
@@ -7,4 +15,4 @@ function brokerageEventKey(event: BrokerageEvent) {
 	]);
 }
 
-export { brokerageEventKey };
+export { brokerageEventGroupKey, brokerageEventKey };

src/entities/brokerage-event/ui/BrokerageEventGroup.test.tsx

@@ -0,0 +1,122 @@
+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 type { BrokerageEvent } from "../api/useBrokerageEvents";
+
+import { BrokerageEventGroup } from "./BrokerageEventGroup";
+
+function event(
+	account: { id: string; name: string },
+	value: null | string,
+	currency = "RUB",
+): BrokerageEvent {
+	return {
+		account,
+		date: "2026-08-20",
+		dateKind: "registry",
+		displayName: "ОФЗ 26238",
+		figi: "FIGI",
+		instrumentUid: "UID",
+		isin: "RU000A0JX0J2",
+		logoName: null,
+		projectedAmount: value === null ? null : { currency, value },
+		ticker: "OFZ",
+		type: "coupon",
+	};
+}
+
+function renderGroup(
+	events: [BrokerageEvent, BrokerageEvent],
+	isTotalVisible = true,
+) {
+	return render(
+		<MantineProvider>
+			<MemoryRouter>
+				<ul>
+					<BrokerageEventGroup
+						events={events}
+						totalVisible={isTotalVisible}
+					/>
+				</ul>
+			</MemoryRouter>
+		</MantineProvider>,
+	);
+}
+
+describe("BrokerageEventGroup", () => {
+	it("shows an unsigned forecast total and every account forecast", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "100.5"),
+			event({ id: "iis", name: "ИИС" }, "49.5"),
+		]);
+
+		expect(screen.getByText("Купон · ОФЗ 26238")).toBeInTheDocument();
+		expect(screen.getByText("150 ₽")).toBeInTheDocument();
+		expect(screen.getAllByText("Прогноз").length).toBeGreaterThanOrEqual(3);
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Купон · ОФЗ 26238, 20\.08\.2026 · Дата реестра, 150 ₽/,
+		}));
+
+		expect(accounts.getByText("Брокерский")).toBeInTheDocument();
+		expect(accounts.getByText("ИИС")).toBeInTheDocument();
+		expect(accounts.getByText("100,5 ₽")).toBeInTheDocument();
+		expect(accounts.getByText("49,5 ₽")).toBeInTheDocument();
+		expect(accounts.queryByRole("link")).not.toBeInTheDocument();
+	});
+
+	it("announces an unknown total as unavailable", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, null),
+			event({ id: "iis", name: "ИИС" }, "49.5"),
+		]);
+
+		expect(screen.getByRole("list", {
+			name: /Купон · ОФЗ 26238.*Итог недоступен/,
+		})).toBeInTheDocument();
+		expect(screen.getByText("Сумма неизвестна")).toBeInTheDocument();
+	});
+
+	it("hides the total for incomplete data", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "100.5"),
+			event({ id: "iis", name: "ИИС" }, "49.5"),
+		], false);
+		expect(screen.queryByText("150 ₽")).not.toBeInTheDocument();
+	});
+
+	it("allows zero source forecasts to produce a visible zero total", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "0"),
+			event({ id: "iis", name: "ИИС" }, "0.00"),
+		]);
+
+		expect(screen.getAllByText("0 ₽")).toHaveLength(2);
+		expect(screen.getByText("0,00 ₽")).toBeInTheDocument();
+	});
+
+	it("shows separate forecast totals per currency without conversion", () => {
+		renderGroup([
+			event({ id: "broker", name: "Брокерский" }, "10", "USD"),
+			event({ id: "iis", name: "ИИС" }, "200"),
+		]);
+
+		expect(screen.getByRole("list", { name: /10 USD.*200 ₽/ }))
+			.toBeInTheDocument();
+	});
+
+	it("shows an offer group without a total", () => {
+		renderGroup([
+			{ ...event({ id: "broker", name: "Брокерский" }, null), type: "offer" },
+			{ ...event({ id: "iis", name: "ИИС" }, null), type: "offer" },
+		]);
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Итог недоступен/,
+		}));
+
+		expect(accounts.getAllByRole("listitem")).toHaveLength(2);
+	});
+});

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

@@ -0,0 +1,87 @@
+import type { FC } from "react";
+
+import { EntryCard } from "@wealthledger/ui";
+import { useTranslation } from "react-i18next";
+
+import {
+	formatDate,
+	formatMoney,
+	instrumentLogoUrl,
+	sumMoney,
+	totalText,
+} from "@/shared/lib";
+import { AccountRow, EntryGroup, EntryGroupTotal } from "@/shared/ui";
+
+import type { BrokerageEvent } from "../api/useBrokerageEvents";
+
+import { brokerageEventKey } from "../model/event-key";
+
+type BrokerageEventGroupProps = {
+	events: [BrokerageEvent, BrokerageEvent, ...BrokerageEvent[]];
+	totalVisible: boolean;
+};
+
+const BrokerageEventGroup: FC<BrokerageEventGroupProps> = (props) => {
+	const { t } = useTranslation();
+	const [first] = props.events;
+	const typeLabel = t(`events.type.${first.type}`);
+
+	const amounts = props.events.flatMap(event =>
+		event.projectedAmount ? [event.projectedAmount] : [],
+	);
+
+	const totals = props.totalVisible && amounts.length === props.events.length
+		? sumMoney(amounts)
+		: null;
+
+	const date = formatDate(first.date);
+
+	const metadata = [
+		date,
+		first.dateKind === "registry" ? t("events.dateKind.registry") : null,
+	].filter(Boolean).join(" · ");
+
+	const title = `${typeLabel} · ${first.displayName}`;
+	const totalsText = totalText(totals, false);
+
+	const accessibleName = [
+		title,
+		metadata,
+		totalsText || t("entryGroup.totalUnavailable"),
+	].join(", ");
+
+	return (
+		<EntryGroup
+			header={(
+				<EntryCard
+					imageSrc={instrumentLogoUrl(first.logoName)}
+					initial={(first.ticker.trim()[0] ?? "?").toUpperCase()}
+					metadata={metadata}
+					title={title}
+					tone="neutral"
+					value={<EntryGroupTotal totals={totals} />}
+					valueLabel={t("payout.forecast")}
+					wrap
+				/>
+			)}
+			label={accessibleName}
+		>
+			{props.events.map((event) => {
+				const value = event.projectedAmount
+					? formatMoney(event.projectedAmount)
+					: t("events.noAmount");
+
+				return (
+					<AccountRow
+						accountName={event.account?.name ?? "—"}
+						key={brokerageEventKey(event)}
+						value={value}
+						valueLabel={t("payout.forecast")}
+					/>
+				);
+			})}
+		</EntryGroup>
+	);
+};
+
+export { BrokerageEventGroup };

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

@@ -5,13 +5,18 @@ import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
+import { groupItems } from "@/shared/lib";
+
 import type { BrokerageEvent } from "../../api/useBrokerageEvents";
 
-import { brokerageEventKey } from "../../model/event-key";
+import { brokerageEventGroupKey, brokerageEventKey } from "../../model/event-key";
 import { BrokerageEventCard } from "../BrokerageEventCard";
+import { BrokerageEventGroup } from "../BrokerageEventGroup";
 
 type BrokerageEventsPreviewProps = {
+	allAccounts?: boolean;
 	events: BrokerageEventsPreviewState;
+	moreLabel?: string;
 };
 
 type BrokerageEventsPreviewState
@@ -19,6 +24,7 @@ type BrokerageEventsPreviewState
 		items: BrokerageEvent[];
 		state: "loaded" | "partial";
 		to: string;
+		totalVisible?: boolean;
 	}
 	| { state: "empty"
 		| "error"
@@ -42,16 +48,35 @@ const BrokerageEventsPreview: FC<BrokerageEventsPreviewProps> = (props) => {
 
 			{events.state === "partial" && <Text role="status">{t("investment.partial")}</Text>}
 
-			{(events.state === "loaded" || events.state === "partial")
-				&& events.items.map(event => (
-					<BrokerageEventCard
-						event={event}
-						key={brokerageEventKey(event)}
-					/>
-				))}
+			{(events.state === "loaded" || events.state === "partial") && (
+				<Stack
+					component="ul"
+					gap="sm"
+					m={0}
+					p={0}
+					style={{ listStyle: "none" }}
+				>
+					{groupItems(
+						events.items,
+						props.allAccounts ? brokerageEventGroupKey : () => null,
+					).map(entry => entry.type === "group"
+						? (
+								<BrokerageEventGroup
+									events={entry.items}
+									key={entry.key}
+									totalVisible={events.totalVisible === true}
+								/>
+							)
+						: (
+								<li key={brokerageEventKey(entry.item)}>
+									<BrokerageEventCard event={entry.item} />
+								</li>
+							))}
+				</Stack>
+			)}
 
 			<Button component={Link} to={events.to} variant="subtle">
-				{t("events.open")}
+				{props.moreLabel ?? t("events.open")}
 			</Button>
 		</Stack>
 	);

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

@@ -3,8 +3,9 @@ import type { FC, PropsWithChildren } from "react";
 import { QueryClientProvider, useQueryClient } from "@tanstack/react-query";
 import { act, renderHook, waitFor } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, onTestFinished, vi } from "vitest";
 
+import * as sharedApi from "@/shared/api";
 import { apiClient, apiQueryClient, useAuthenticatedQuery } from "@/shared/api";
 import { createTestQueryClient } from "@/test/query";
 import { resource } from "@/test/resource";
@@ -398,4 +399,23 @@ describe("AuthProvider", () => {
 			expect(result.current.cards.data?.[0]?.id).toBe("b-card"),
 		);
 	});
+
+	it("registers auth handlers once until unmount", async () => {
+		const configure = vi.spyOn(sharedApi, "configureAuthClient");
+		onTestFinished(() => configure.mockRestore());
+
+		const { rerender, result, unmount } = renderHook(useAuth, {
+			wrapper: createAuthWrapper(createTestQueryClient()),
+		});
+
+		await waitFor(() => expect(result.current.ready).toBe(true));
+		const registrations = configure.mock.calls.length;
+
+		rerender();
+		expect(configure).toHaveBeenCalledTimes(registrations);
+
+		unmount();
+		expect(configure).toHaveBeenCalledTimes(registrations + 1);
+		expect(configure).toHaveBeenLastCalledWith();
+	});
 });

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

@@ -161,7 +161,8 @@ function useAuthProviderVm() {
 			refresh,
 			unavailable: () => unavailableRef.current,
 		});
-	});
+		// `user` tracks access-token changes, which configureAuthClient publishes as session state.
+	}, [clearSession, refresh, user]);
 	useEffect(() => () => configureAuthClient(), []);
 
 	const authContextValue = {

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 
 import { resource } from "@/test/resource";
 
@@ -76,4 +76,29 @@ describe("instrument source and transport presentation", () => {
 			loading: false,
 		});
 	});
+
+	it("carries the retry of an exhausted read and only of that read", () => {
+		const refetch = vi.fn(() => Promise.resolve());
+
+		const state = section({
+			data: { rows: [] },
+			error: { code: "TBANK_UNAVAILABLE", status: 503 },
+			isError: true,
+			isFetching: false,
+			refetch,
+		});
+
+		expect(state.readRetry?.exhausted).toBe(true);
+		state.readRetry?.onRetry();
+		expect(refetch).toHaveBeenCalledOnce();
+	});
+
+	it("offers no retry for access loss or a healthy read", () => {
+		const base = { data: undefined, isFetching: false, refetch: vi.fn() };
+
+		expect(section({ ...base, error: { code: "NOT_FOUND" }, isError: true })
+			.readRetry?.exhausted).toBe(false);
+		expect(section({ ...base, error: null, isError: false })
+			.readRetry?.exhausted).toBe(false);
+	});
 });

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

@@ -1,10 +1,11 @@
-import type { InvestmentResourceMeta } from "@/shared/api";
+import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
 
 type SectionState = {
 	error: boolean;
 	hasData: boolean;
 	loading: boolean;
 	partial?: boolean;
+	readRetry?: ReturnType<typeof readRetry>;
 };
 
 function hasSectionData(data: unknown) {
@@ -13,8 +14,11 @@ function hasSectionData(data: unknown) {
 
 function section(query: {
 	data: unknown;
+	error?: unknown;
 	isError: boolean;
+	isFetching?: boolean;
 	meta?: InvestmentResourceMeta;
+	refetch?: () => Promise<unknown>;
 }): SectionState {
 	const isError = query.isError || query.meta?.lastAttempt.state === "failed";
 	const hasData = hasSectionData(query.data);
@@ -24,6 +28,17 @@ function section(query: {
 		hasData,
 		loading: !hasData && !isError,
 		partial: query.meta?.completeness === "incomplete",
+		// Each section retries only its own GET, so sections recover independently.
+		readRetry: query.refetch
+			? readRetry([
+					{
+						error: query.error,
+						isError: query.isError,
+						isFetching: query.isFetching ?? false,
+						refetch: query.refetch,
+					},
+				])
+			: undefined,
 	};
 }
 

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

@@ -12,6 +12,8 @@ import {
 import { LoadingSkeleton } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
+import { ReadRetry } from "@/shared/ui";
+
 import type { SectionState } from "../model/section";
 
 import classes from "./InstrumentDetails.module.css";
@@ -81,6 +83,8 @@ const InstrumentSection: FC<InstrumentSectionProps> = (props) => {
 				</Alert>
 			)}
 
+			{!!props.state.readRetry && <ReadRetry {...props.state.readRetry} />}
+
 			{sectionContent}
 		</Paper>
 	);

src/features/tbank-connection/model/connection-boundary.ts

@@ -2,19 +2,18 @@ import type { QueryClient } from "@tanstack/react-query";
 
 import {
 	apiQueryClient,
+	isGetUnder,
 	type paths,
 } from "@/shared/api";
 
 type TbankConnectionStatus
 	= paths["/api/v1/tbank-connection"]["get"]["responses"][200]["content"]["application/json"];
 
-function isInvestmentPath(path: string) {
-	return [
-		"/api/v1/brokerage-accounts",
-		"/api/v1/stocks",
-		"/api/v1/bonds",
-	].some(root => path === root || path.startsWith(`${root}/`));
-}
+const investmentGetPredicate = isGetUnder([
+	"/api/v1/brokerage-accounts",
+	"/api/v1/stocks",
+	"/api/v1/bonds",
+]);
 
 const tbankConnectionQueryOptions = () =>
 	apiQueryClient.queryOptions("get", "/api/v1/tbank-connection");
@@ -27,15 +26,7 @@ function commitTbankConnectionBoundary(
 ) {
 	queryClient.setQueryData(tbankConnectionQueryKey, status);
 	void queryClient.resetQueries({
-		predicate: ({ queryKey }) => {
-			const [method, path] = queryKey;
-
-			return (
-				method === "get"
-				&& typeof path === "string"
-				&& isInvestmentPath(path)
-			);
-		},
+		predicate: ({ queryKey }) => investmentGetPredicate(queryKey),
 	});
 }
 

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.tsx

@@ -4,16 +4,16 @@ import {
 	TbankConnectionError,
 	TbankConnectionLoading,
 } from "./TbankConnectionSection.view";
-import { useTbankConnectionViewModel } from "./TbankConnectionSection.vm";
+import { useTbankConnectionSectionVm } from "./TbankConnectionSection.vm";
 import { TbankConnectionSectionLoaded } from "./TbankConnectionSectionLoaded";
 
 const TbankConnectionSection: FC = () => {
-	const viewModel = useTbankConnectionViewModel();
-	if (viewModel.state === "loading") return <TbankConnectionLoading />;
+	const vm = useTbankConnectionSectionVm();
+	if (vm.state === "loading") return <TbankConnectionLoading />;
 
-	return viewModel.state === "error"
-		? <TbankConnectionError retry={viewModel.retry} />
-		: <TbankConnectionSectionLoaded {...viewModel} />;
+	return vm.state === "error"
+		? <TbankConnectionError retry={vm.retry} />
+		: <TbankConnectionSectionLoaded {...vm} />;
 };
 
 export { TbankConnectionSection };

src/features/tbank-connection/ui/TbankConnectionSection/TbankConnectionSection.vm.ts

@@ -2,7 +2,7 @@ import { useAuthenticatedQuery } from "@/shared/api";
 
 import { tbankConnectionQueryOptions } from "../../model/connection-boundary";
 
-function useTbankConnectionViewModel() {
+function useTbankConnectionSectionVm() {
 	const status = useAuthenticatedQuery({
 		...tbankConnectionQueryOptions(),
 	});
@@ -22,4 +22,4 @@ function useTbankConnectionViewModel() {
 	};
 }
 
-export { useTbankConnectionViewModel };
+export { useTbankConnectionSectionVm };

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

@@ -26,7 +26,7 @@ import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 
 import { AccountEventsPage } from "./AccountEventsPage";
-import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm";
+import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
 
 const Navigation: FC = () => {
 	const location = useLocation();
@@ -100,7 +100,7 @@ describe("Upcoming event date filters", () => {
 		);
 		const queryClient = createTestQueryClient();
 
-		const { result } = renderHook(() => useAccountEventsPageViewModel(), {
+		const { result } = renderHook(() => useAccountEventsPageVm(), {
 			wrapper: ({ children }) => (
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={["?from=2099-02-01"]}>
@@ -146,7 +146,7 @@ describe("Upcoming event date filters", () => {
 			const queryClient = createTestQueryClient();
 
 			const { result } = renderHook(
-				() => useAccountEventsPageViewModel(),
+				() => useAccountEventsPageVm(),
 				{
 					wrapper: ({ children }) => (
 						<QueryClientProvider client={queryClient}>
@@ -176,7 +176,11 @@ describe("Upcoming event date filters", () => {
 					({ request }) => {
 						searches.push(new URL(request.url).search);
 
-						return HttpResponse.json(resource({ events: [] }));
+						return HttpResponse.json(resource({
+							calculatedAt: "2026-08-14T00:00:00Z",
+							events: [],
+							window: { from: "2026-08-14", to: "2026-09-13" },
+						}));
 					},
 				),
 			);
@@ -223,7 +227,11 @@ describe("Upcoming event date filters", () => {
 					"*/api/v1/brokerage-accounts/:accountId/events",
 					({ request }) =>
 						new URL(request.url).searchParams.get("from") === defaultFrom
-							? HttpResponse.json(resource({ events: [] }))
+							? HttpResponse.json(resource({
+									calculatedAt: "2026-08-14T00:00:00Z",
+									events: [],
+									window: { from: "2026-08-14", to: "2026-09-13" },
+								}))
 							: HttpResponse.json({ code: "VALIDATION_ERROR" }, { status: 400 }),
 				),
 			);
@@ -256,6 +264,7 @@ describe("Upcoming event date filters", () => {
 								calculatedAt: "2099-01-01T00:00:00Z",
 								events: [],
 								incomeTotalsByCurrency: [],
+								window: { from: "2099-01-01", to: "2099-01-31" },
 							}),
 						);
 					},
@@ -264,6 +273,7 @@ describe("Upcoming event date filters", () => {
 			renderEvents(accountId, ["?from=2026-02-01&to=2026-02-28"]);
 			const from = await screen.findByLabelText("Период");
 			expect(from).toHaveTextContent("01.02.2026 – 28.02.2026");
+			expect(screen.getByText(/Прогноз от .* на 01\.01\.2099 – 31\.01\.2099/)).toBeVisible();
 			expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
 			expect(searches).toEqual(["?from=2026-02-01&to=2026-02-28"]);
 
@@ -361,7 +371,7 @@ it("retains the previous complete forecast when its source refresh fails", async
 	);
 	const queryClient = createTestQueryClient();
 
-	const { result } = renderHook(() => useAccountEventsPageViewModel(), {
+	const { result } = renderHook(() => useAccountEventsPageVm(), {
 		wrapper: ({ children }) => (
 			<QueryClientProvider client={queryClient}>
 				<MemoryRouter initialEntries={["/accounts/all/events"]}>

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

@@ -0,0 +1,167 @@
+import { MantineProvider } from "@mantine/core";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { http, HttpResponse } from "msw";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+
+import { configureAuthClient } from "@/shared/api";
+import { createTestQueryClient } from "@/test/query";
+import { resource } from "@/test/resource";
+import { server } from "@/test/server";
+
+import { AccountEventsPage } from "./AccountEventsPage";
+
+// Automatic read retries wait 1s + 2s before the failure is final.
+const RETRIES_EXHAUSTED_MS = 6000;
+const TEST_MS = 10_000;
+
+const snapshot = resource({
+	accountId: "account-1",
+	calculatedAt: "2026-08-14T00:00:00Z",
+	events: [
+		{
+			date: "2026-10-01",
+			dateKind: "event",
+			displayName: "Synthetic coupon",
+			figi: null,
+			instrumentUid: null,
+			isin: null,
+			logoName: null,
+			projectedAmount: { currency: "RUB", value: "123.45" },
+			ticker: "SYN",
+			type: "coupon",
+		},
+	],
+	incomeTotalsByCurrency: [{ currency: "RUB", value: "123.45" }],
+	window: { from: "2026-08-14", to: "2026-09-13" },
+});
+
+function renderEvents() {
+	configureAuthClient({
+		accessToken: () => "token",
+		clear: vi.fn(),
+		refresh: () => Promise.resolve(true),
+	});
+	const queryClient = createTestQueryClient();
+
+	render(
+		<QueryClientProvider client={queryClient}>
+			<MantineProvider env="test">
+				<MemoryRouter initialEntries={["/accounts/account-1/events"]}>
+					<Routes>
+						<Route
+							element={<AccountEventsPage />}
+							path="/accounts/:accountId/events"
+						/>
+					</Routes>
+				</MemoryRouter>
+			</MantineProvider>
+		</QueryClientProvider>,
+	);
+
+	return { queryClient };
+}
+
+describe("AccountEventsPage read retry", () => {
+	it(
+		"offers retry after an initial failure and recovers in place",
+		{ timeout: TEST_MS },
+		async () => {
+			let isFailing = true;
+			let requests = 0;
+			server.use(
+				http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
+					requests += 1;
+
+					return isFailing
+						? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
+						: HttpResponse.json(snapshot);
+				}),
+			);
+			renderEvents();
+
+			const retry = await screen.findByRole(
+				"button",
+				{ name: "Повторить" },
+				{ timeout: RETRIES_EXHAUSTED_MS },
+			);
+
+			expect(requests).toBe(3);
+
+			isFailing = false;
+			fireEvent.click(retry);
+
+			expect(await screen.findByText("Купон · Synthetic coupon")).toBeInTheDocument();
+			expect(requests).toBe(4);
+		},
+	);
+
+	it(
+		"keeps cached events, warns and retries the same GET",
+		{ timeout: TEST_MS },
+		async () => {
+			let isFailing = false;
+			let requests = 0;
+			let imports = 0;
+			server.use(
+				http.post("*/api/v1/tbank-sync", () => {
+					imports += 1;
+
+					return HttpResponse.json({}, { status: 202 });
+				}),
+				http.get("*/api/v1/brokerage-accounts/:accountId/events", () => {
+					requests += 1;
+
+					return isFailing
+						? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
+						: HttpResponse.json(snapshot);
+				}),
+			);
+			const { queryClient } = renderEvents();
+			await screen.findByText("Купон · Synthetic coupon");
+			expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
+			expect(screen.queryByRole("button", { name: "Повторить" }))
+				.not.toBeInTheDocument();
+
+			isFailing = true;
+			void queryClient.invalidateQueries({
+				queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/events"],
+			});
+
+			const retry = await screen.findByRole(
+				"button",
+				{ name: "Повторить" },
+				{ timeout: RETRIES_EXHAUSTED_MS },
+			);
+
+			expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
+			expect(screen.getByText("Купон · Synthetic coupon")).toBeInTheDocument();
+			expect(screen.getByText(/Прогноз от .* на 14\.08\.2026 – 13\.09\.2026/)).toBeVisible();
+			expect(requests).toBe(4);
+
+			isFailing = false;
+			fireEvent.click(retry);
+
+			await waitFor(() =>
+				expect(screen.queryByText("Не удалось обновить данные"))
+					.not.toBeInTheDocument());
+			expect(requests).toBe(5);
+			expect(imports).toBe(0);
+		},
+	);
+
+	it("does not offer a plain retry when the account is gone", async () => {
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/events", () =>
+				HttpResponse.json({ code: "NOT_FOUND" }, { status: 404 })),
+		);
+		renderEvents();
+
+		await waitFor(() =>
+			expect(screen.queryByRole("heading", { name: "Загрузка" }))
+				.not.toBeInTheDocument());
+		expect(screen.queryByRole("button", { name: "Повторить" }))
+			.not.toBeInTheDocument();
+	});
+});

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

@@ -47,6 +47,7 @@ describe("AccountEventsPage", () => {
 					accountId: "account",
 					calculatedAt: "2026-08-14T00:00:00Z",
 					events: [],
+					window: { from: "2026-08-14", to: "2026-09-13" },
 				},
 				isError: false,
 				isLoading: false,
@@ -136,6 +137,7 @@ describe("AccountEventsPage", () => {
 							type: "offer",
 						},
 					],
+					window: { from: "2026-08-14", to: "2026-09-13" },
 				},
 				isError: false,
 				isLoading: false,
@@ -169,15 +171,18 @@ describe("AccountEventsPage", () => {
 		expect(screen.getAllByText("O")).toHaveLength(2);
 	});
 
-	it("renders empty and quiet error states", async () => {
+	it("renders empty and error states with retry", async () => {
 		const { rerender } = renderPage();
 		expect(
 			screen.getByText("За выбранный период событий не найдено"),
 		).toBeInTheDocument();
 		query.mockReturnValue({
 			data: undefined,
+			error: { code: "TBANK_UNAVAILABLE", status: 503 },
 			isError: true,
+			isFetching: false,
 			isLoading: false,
+			refetch: vi.fn(),
 		} as never);
 		rerender(
 			<MantineProvider>
@@ -187,7 +192,7 @@ describe("AccountEventsPage", () => {
 			</MantineProvider>,
 		);
 		expect(await screen.findByRole("button", { name: "Сбросить" })).toBeVisible();
-		expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Повторить" })).toBeVisible();
 	});
 
 	it("shows a structural busy state before events are available", () => {
@@ -237,4 +242,80 @@ describe("AccountEventsPage", () => {
 			screen.queryByText("За выбранный период событий не найдено"),
 		).not.toBeInTheDocument();
 	});
+
+	it("groups same-day instrument events only in all-account mode", () => {
+		const events = [
+			{
+				account: { id: "broker", name: "Брокерский" },
+				date: "2026-08-20",
+				dateKind: "event",
+				displayName: "ОФЗ 26238",
+				figi: "FIGI",
+				instrumentUid: "UID",
+				isin: "RU000A0JX0J2",
+				logoName: null,
+				projectedAmount: { currency: "RUB", value: "200" },
+				ticker: "OFZ",
+				type: "coupon",
+			},
+			{
+				account: { id: "iis", name: "ИИС" },
+				date: "2026-08-20",
+				dateKind: "event",
+				displayName: "ОФЗ 26238",
+				figi: "FIGI",
+				instrumentUid: "UID",
+				isin: "RU000A0JX0J2",
+				logoName: null,
+				projectedAmount: { currency: "RUB", value: "100" },
+				ticker: "OFZ",
+				type: "coupon",
+			},
+		] as const;
+
+		query.mockReturnValue({
+			data: {
+				accountId: "all",
+				calculatedAt: "2026-08-14T00:00:00Z",
+				events: [...events],
+				window: { from: "2026-08-14", to: "2026-09-13" },
+			},
+			isError: false,
+			isLoading: false,
+			meta: {
+				availability: "available",
+				completeness: "complete",
+				lastAttempt: {
+					finishedAt: null,
+					problems: [],
+					startedAt: null,
+					state: "none",
+				},
+			},
+			refetch: vi.fn(),
+		} as never);
+
+		render(
+			<MantineProvider>
+				<MemoryRouter initialEntries={["/accounts/all/events"]}>
+					<Routes>
+						<Route
+							element={<AccountEventsPage />}
+							path="/accounts/:accountId/events"
+						/>
+					</Routes>
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		expect(screen.getByText("Купон · ОФЗ 26238")).toBeInTheDocument();
+		expect(screen.getByText("300 ₽")).toBeInTheDocument();
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Купон · ОФЗ 26238, 20\.08\.2026, 300 ₽/,
+		}));
+
+		expect(accounts.getByText("Брокерский")).toBeInTheDocument();
+		expect(accounts.getByText("ИИС")).toBeInTheDocument();
+	});
 });

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

@@ -1,17 +1,17 @@
 import type { FC } from "react";
 
-import { useAccountEventsPageViewModel } from "./AccountEventsPage.vm";
+import { useAccountEventsPageVm } from "./AccountEventsPage.vm";
 import { AccountEventsPageError } from "./components/AccountEventsPageError.view";
 import { AccountEventsPageLoaded } from "./components/AccountEventsPageLoaded.view";
 import { AccountEventsPageLoading } from "./components/AccountEventsPageLoading.view";
 
 const AccountEventsPage: FC = () => {
-	const viewModel = useAccountEventsPageViewModel();
-	if (viewModel.state === "loading") return <AccountEventsPageLoading />;
+	const vm = useAccountEventsPageVm();
+	if (vm.state === "loading") return <AccountEventsPageLoading />;
 
-	return viewModel.state === "error"
-		? <AccountEventsPageError {...viewModel} />
-		: <AccountEventsPageLoaded {...viewModel} />;
+	return vm.state === "error"
+		? <AccountEventsPageError {...vm} />
+		: <AccountEventsPageLoaded {...vm} />;
 };
 
 export { AccountEventsPage };

src/pages/account-events/ui/AccountEventsPage/AccountEventsPage.vm.ts

@@ -1,13 +1,12 @@
 import { useState } from "react";
 import { useParams } from "react-router";
 
-import type { InvestmentResourceMeta } from "@/shared/api";
-
 import {
 	type BrokerageEvent,
 	useBrokerageEvents,
 } from "@/entities/brokerage-event";
 import { useScreenSync } from "@/features/tbank-connection";
+import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
 import {
 	defaultPeriod,
 	isValidPeriod,
@@ -18,6 +17,8 @@ import {
 
 type AccountEventsPageViewModel
 	= | {
+		allAccounts: boolean;
+		calculatedAt: string;
 		canApply: boolean;
 		draftPeriod: [null | string, null | string];
 		events: BrokerageEvent[];
@@ -27,13 +28,20 @@ type AccountEventsPageViewModel
 		onPeriodPopoverOpen: () => void;
 		onReset: () => void;
 		partial?: boolean;
+		readRetry: ReturnType<typeof readRetry>;
 		source?: InvestmentResourceMeta;
 		state: "loaded";
+		totalVisible: boolean;
+		window: { from: string; to: string };
+	}
+	| {
+		onReset: () => void;
+		readRetry: ReturnType<typeof readRetry>;
+		state: "error";
 	}
-	| { onReset: () => void; state: "error" }
 	| { state: "loading" };
 
-function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
+function useAccountEventsPageVm(): AccountEventsPageViewModel {
 	const { accountId = "" } = useParams();
 
 	const {
@@ -81,6 +89,8 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
 		isFetching: events.isFetching,
 	});
 
+	const retry = readRetry([events]);
+
 	if (availability === "loading" && events.isLoading)
 		return { state: "loading" };
 
@@ -92,14 +102,17 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
 	if ((events.isError || events.meta?.lastAttempt.state === "failed") && !events.data)
 		return {
 			onReset,
+			readRetry: retry,
 			state: "error",
 		};
 	if (!events.data)
 		return availability === "unavailable"
-			? { onReset, state: "error" }
+			? { onReset, readRetry: retry, state: "error" }
 			: { state: "loading" };
 
 	return {
+		allAccounts: accountId === "all",
+		calculatedAt: events.data.calculatedAt,
 		canApply:
 			(draftFrom !== appliedFrom || draftTo !== appliedTo)
 			&& isValidPeriod(draftFrom, draftTo),
@@ -119,9 +132,12 @@ function useAccountEventsPageViewModel(): AccountEventsPageViewModel {
 		onPeriodPopoverOpen: () => setMinDate(moscowDate(new Date())),
 		onReset,
 		partial: events.meta?.completeness === "incomplete",
+		readRetry: retry,
 		source: events.meta,
 		state: "loaded",
+		totalVisible: events.meta?.completeness === "complete",
+		window: events.data.window,
 	};
 }
 
-export { type AccountEventsPageViewModel, useAccountEventsPageViewModel };
+export { type AccountEventsPageViewModel, useAccountEventsPageVm };

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageError.view.tsx

@@ -4,7 +4,12 @@ import { Button, Group } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-type AccountEventsPageErrorProps = { onReset: () => void };
+import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
+
+type AccountEventsPageErrorProps = {
+	onReset: () => void;
+	readRetry: ReadRetryProps;
+};
 
 const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
 	const { t } = useTranslation();
@@ -13,6 +18,13 @@ const AccountEventsPageError: FC<AccountEventsPageErrorProps> = (props) => {
 		<StateView
 			action={(
 				<Group>
+					{props.readRetry.exhausted && (
+						<ReadRetryButton
+							onRetry={props.readRetry.onRetry}
+							retrying={props.readRetry.retrying}
+						/>
+					)}
+
 					<Button onClick={props.onReset} variant="default">
 						{t("ledger.reset")}
 					</Button>

src/pages/account-events/ui/AccountEventsPage/components/AccountEventsPageLoaded.view.tsx

@@ -13,9 +13,12 @@ import { useTranslation } from "react-i18next";
 
 import {
 	BrokerageEventCard,
+	BrokerageEventGroup,
+	brokerageEventGroupKey,
 	brokerageEventKey,
 } from "@/entities/brokerage-event";
-import { SourceSyncStatus } from "@/shared/ui";
+import { formatDate, formatSnapshotTime, groupItems } from "@/shared/lib";
+import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountEventsPageViewModel } from "../AccountEventsPage.vm";
 
@@ -30,14 +33,32 @@ const AccountEventsPageLoadedEvents: FC<AccountEventsPageLoadedProps> = (
 	props,
 ) => {
 	if (props.events.length > 0) {
+		const entries = groupItems(
+			props.events,
+			props.allAccounts ? brokerageEventGroupKey : () => null,
+		);
+
 		return (
-			<Stack gap="sm">
-				{props.events.map(event => (
-					<BrokerageEventCard
-						event={event}
-						key={brokerageEventKey(event)}
-					/>
-				))}
+			<Stack
+				component="ul"
+				gap="sm"
+				m={0}
+				p={0}
+				style={{ listStyle: "none" }}
+			>
+				{entries.map(entry => entry.type === "group"
+					? (
+							<BrokerageEventGroup
+								events={entry.items}
+								key={entry.key}
+								totalVisible={props.totalVisible}
+							/>
+						)
+					: (
+							<li key={brokerageEventKey(entry.item)}>
+								<BrokerageEventCard event={entry.item} />
+							</li>
+						))}
 			</Stack>
 		);
 	}
@@ -62,10 +83,20 @@ const AccountEventsPageLoaded: FC<AccountEventsPageLoadedProps> = (props) => {
 				stale={props.source?.freshness === "stale"}
 			/>
 
+			<ReadRetry {...props.readRetry} />
+
 			{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
 
 			<Text c="dimmed">{t("events.hint")}</Text>
 
+			<Text c="dimmed" size="sm">
+				{t("events.forecastWindow", {
+					date: formatSnapshotTime(props.calculatedAt),
+					from: formatDate(props.window.from),
+					to: formatDate(props.window.to),
+				})}
+			</Text>
+
 			<Group align="end">
 				<DatePickerInput
 					allowSingleDateInRange

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.test.tsx

@@ -26,6 +26,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import type { IncomeAnalytics } from "@/entities/income";
 
 import { configureAuthClient } from "@/shared/api";
+import { formatSnapshotTime } from "@/shared/lib";
 import { createTestQueryClient } from "@/test/query";
 import { resource } from "@/test/resource";
 import { server } from "@/test/server";
@@ -33,10 +34,14 @@ import { server } from "@/test/server";
 import { toIncomeDisplayModel } from "../../model/display";
 import { AccountIncomePage } from "./AccountIncomePage";
 import {
-	useAccountIncomePageViewModel,
+	useAccountIncomePageVm,
 } from "./AccountIncomePage.vm";
 import { IncomePayments } from "./components/IncomePayments.view";
 
+// Automatic read retries wait 1s + 2s before the failure is final.
+const RETRIES_EXHAUSTED_MS = 6000;
+const TEST_MS = 10_000;
+
 const analytics
 	= {
 		accountId: "account-1",
@@ -100,7 +105,10 @@ function money(currency: string, value: string) {
 	return { currency, value };
 }
 
-function renderPage(search = "from=2026-08-01&to=2026-08-27") {
+function renderPage(
+	search = "from=2026-08-01&to=2026-08-27",
+	accountId = "account-1",
+) {
 	configureAuthClient({
 		accessToken: () => "token",
 		clear: vi.fn(),
@@ -113,7 +121,7 @@ function renderPage(search = "from=2026-08-01&to=2026-08-27") {
 			<DatesProvider settings={{ locale: "ru" }}>
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter
-						initialEntries={[`/accounts/account-1/income?${search}`]}
+						initialEntries={[`/accounts/${accountId}/income?${search}`]}
 					>
 						<LocationProbe />
 
@@ -163,7 +171,7 @@ describe("AccountIncomePage", () => {
 		);
 		const queryClient = createTestQueryClient();
 
-		const { result } = renderHook(() => useAccountIncomePageViewModel(), {
+		const { result } = renderHook(() => useAccountIncomePageVm(), {
 			wrapper: ({ children }) => (
 				<QueryClientProvider client={queryClient}>
 					<MemoryRouter initialEntries={["?from=2024-02-29&to=2024-03-01"]}>
@@ -400,21 +408,124 @@ describe("AccountIncomePage", () => {
 		expect(screen.queryByText(/Сравнение с/)).not.toBeInTheDocument();
 	});
 
-	it("shows a quiet realized error", async () => {
+	it.each([
+		["full", analytics],
+		["empty", { ...analytics, buckets: [], entries: [], instruments: [], totalsByCurrency: [] }],
+	])("shows the server source time and last attempt for a %s result", async (_name, data) => {
 		server.use(
-			http.get(
-				"*/api/v1/brokerage-accounts/account-1/income-analytics",
-				() => new HttpResponse(null, { status: 503 }),
+			http.get("*/api/v1/brokerage-accounts/account-1/income-analytics", () =>
+				HttpResponse.json(
+					resource(data, {
+						freshness: "stale",
+						lastAttempt: {
+							finishedAt: "2026-08-27T01:00:00Z",
+							problems: [],
+							startedAt: "2026-08-27T00:59:00Z",
+							state: "failed",
+						},
+						lastSuccessfulAt: "2026-08-26T12:00:00Z",
+					}),
+				),
 			),
 		);
 		renderPage();
-		expect(
-			await screen.findByText("Не удалось рассчитать пассивный доход", undefined, {
-				timeout: 4000,
-			}),
-		).toBeInTheDocument();
+		expect(await screen.findByText(/^Данные на /)).toHaveTextContent(
+			formatSnapshotTime("2026-08-26T12:00:00Z"),
+		);
+		expect(screen.getByText("Обновление не удалось")).toBeInTheDocument();
+		expect(screen.getByText("Данные требуют обновления")).toBeInTheDocument();
 		expect(screen.queryByRole("button", { name: "Повторить" })).not.toBeInTheDocument();
 	});
+
+	it(
+		"offers retry after an initial failure and recovers in place",
+		{ timeout: TEST_MS },
+		async () => {
+			let isFailing = true;
+			let requests = 0;
+			server.use(
+				http.get(
+					"*/api/v1/brokerage-accounts/account-1/income-analytics",
+					() => {
+						requests += 1;
+
+						return isFailing
+							? new HttpResponse(null, { status: 503 })
+							: HttpResponse.json(resource(analytics));
+					},
+				),
+			);
+			renderPage();
+			expect(
+				await screen.findByText(
+					"Не удалось рассчитать пассивный доход",
+					undefined,
+					{ timeout: RETRIES_EXHAUSTED_MS },
+				),
+			).toBeInTheDocument();
+			const retry = screen.getByRole("button", { name: "Повторить" });
+			expect(requests).toBe(3);
+
+			isFailing = false;
+			fireEvent.click(retry);
+
+			expect(
+				await screen.findByRole("region", { name: "Выплаты" }),
+			).toBeInTheDocument();
+			expect(requests).toBe(4);
+		},
+	);
+
+	it(
+		"keeps cached income, warns and retries the same GET",
+		{ timeout: TEST_MS },
+		async () => {
+			let isFailing = false;
+			let requests = 0;
+			server.use(
+				http.get(
+					"*/api/v1/brokerage-accounts/account-1/income-analytics",
+					() => {
+						requests += 1;
+
+						return isFailing
+							? HttpResponse.json(
+									{ code: "TBANK_UNAVAILABLE" },
+									{ status: 503 },
+								)
+							: HttpResponse.json(resource(analytics));
+					},
+				),
+			);
+			const { queryClient } = renderPage();
+			await screen.findByRole("region", { name: "Выплаты" });
+			expect(screen.queryByRole("button", { name: "Повторить" }))
+				.not.toBeInTheDocument();
+
+			isFailing = true;
+			void queryClient.invalidateQueries({
+				queryKey: ["get", "/api/v1/brokerage-accounts/{accountId}/income-analytics"],
+			});
+
+			const retry = await screen.findByRole(
+				"button",
+				{ name: "Повторить" },
+				{ timeout: RETRIES_EXHAUSTED_MS },
+			);
+
+			expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
+			expect(screen.getByRole("region", { name: "Выплаты" })).toBeInTheDocument();
+			expect(requests).toBe(4);
+
+			isFailing = false;
+			fireEvent.click(retry);
+
+			await waitFor(() =>
+				expect(screen.queryByText("Не удалось обновить данные"))
+					.not.toBeInTheDocument());
+			expect(requests).toBe(5);
+		},
+	);
 });
 
 const LocationProbe: FC = () => {
@@ -680,4 +791,110 @@ describe("income period and snapshot boundary", () => {
 		expect(screen.queryByText(/Итого:|Выплат:/)).not.toBeInTheDocument();
 		expect(screen.queryByRole("button")).not.toBeInTheDocument();
 	});
+
+	it("groups all-account payouts by instrument with an exact total", async () => {
+		server.use(
+			http.get(
+				"*/api/v1/brokerage-accounts/:accountId/income-analytics",
+				() => HttpResponse.json(resource({
+					...analytics,
+					accountId: "all",
+					entries: [
+						{
+							...entry(),
+							account: { id: "broker", name: "Брокерский" },
+							payment: money("RUB", "10"),
+						},
+						{
+							...entry(),
+							account: { id: "iis", name: "ИИС" },
+							id: "coupon-2",
+							payment: money("RUB", "20"),
+						},
+					],
+				})),
+			),
+		);
+		renderPage(undefined, "all");
+
+		expect(await screen.findByText("Купон · BOND")).toBeInTheDocument();
+		expect(screen.getByText("+30 ₽")).toBeInTheDocument();
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Купон · BOND, Исполнено/,
+		}));
+
+		expect(accounts.getByText("Брокерский")).toBeInTheDocument();
+		expect(accounts.getByText("ИИС")).toBeInTheDocument();
+		expect(accounts.queryByRole("link")).not.toBeInTheDocument();
+	});
+
+	it("keeps repeated payout ids inside one group as separate cards", async () => {
+		server.use(
+			http.get(
+				"*/api/v1/brokerage-accounts/:accountId/income-analytics",
+				() => HttpResponse.json(resource({
+					...analytics,
+					accountId: "all",
+					entries: [
+						{
+							...entry(),
+							account: { id: "broker", name: "Брокерский" },
+							payment: money("RUB", "10"),
+						},
+						{
+							...entry(),
+							account: { id: "iis", name: "ИИС" },
+							payment: money("RUB", "20"),
+						},
+					],
+				})),
+			),
+		);
+		renderPage(undefined, "all");
+
+		expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
+
+		const accounts = within(screen.getByRole("list", {
+			name: /Купон · BOND/,
+		}));
+
+		expect(accounts.getAllByRole("listitem")).toHaveLength(2);
+	});
+
+	it("shows the group total after completeness changes to complete", async () => {
+		let completeness: "complete" | "incomplete" = "incomplete";
+
+		const entries = [
+			{
+				...entry(),
+				account: { id: "broker", name: "Брокерский" },
+				payment: money("RUB", "10"),
+			},
+			{
+				...entry(),
+				account: { id: "iis", name: "ИИС" },
+				id: "coupon-2",
+				payment: money("RUB", "20"),
+			},
+		];
+
+		server.use(
+			http.get(
+				"*/api/v1/brokerage-accounts/:accountId/income-analytics",
+				() => HttpResponse.json(
+					resource({ ...analytics, accountId: "all", entries }, { completeness }),
+				),
+			),
+		);
+		const view = renderPage(undefined, "all");
+
+		await screen.findByText("Купон · BOND");
+		expect(screen.queryByText("+30 ₽")).not.toBeInTheDocument();
+		view.unmount();
+
+		completeness = "complete";
+		renderPage(undefined, "all");
+		expect(await screen.findByText("+30 ₽")).toBeInTheDocument();
+	});
 });

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.tsx

@@ -1,17 +1,17 @@
 import type { FC } from "react";
 
-import { useAccountIncomePageViewModel } from "./AccountIncomePage.vm";
+import { useAccountIncomePageVm } from "./AccountIncomePage.vm";
 import { AccountIncomePageError } from "./components/AccountIncomePageError.view";
 import { AccountIncomePageLoaded } from "./components/AccountIncomePageLoaded.view";
 import { AccountIncomePageLoading } from "./components/AccountIncomePageLoading.view";
 
 const AccountIncomePage: FC = () => {
-	const viewModel = useAccountIncomePageViewModel();
-	if (viewModel.state === "loading") return <AccountIncomePageLoading />;
+	const vm = useAccountIncomePageVm();
+	if (vm.state === "loading") return <AccountIncomePageLoading />;
 
-	return viewModel.state === "error"
-		? <AccountIncomePageError {...viewModel} />
-		: <AccountIncomePageLoaded {...viewModel} />;
+	return vm.state === "error"
+		? <AccountIncomePageError {...vm} />
+		: <AccountIncomePageLoaded {...vm} />;
 };
 
 export { AccountIncomePage };

src/pages/account-income/ui/AccountIncomePage/AccountIncomePage.vm.ts

@@ -5,6 +5,7 @@ import { useParams, useSearchParams } from "react-router";
 
 import { type IncomeAnalytics, useIncomeAnalytics } from "@/entities/income";
 import { useScreenSync } from "@/features/tbank-connection";
+import { type InvestmentResourceMeta, readRetry } from "@/shared/api";
 import { isValidPeriod, moscowDate, useInitialAvailability } from "@/shared/lib";
 
 import {
@@ -30,15 +31,19 @@ type AccountIncomePageViewModel
 		onReset: () => void;
 		onSubmit: (values: IncomeForm) => void;
 		partial?: boolean;
+		readRetry: ReturnType<typeof readRetry>;
+		source?: InvestmentResourceMeta;
 		state: "loaded";
+		totalVisible: boolean;
 	}
 	| {
 		period: IncomePeriod;
+		readRetry: ReturnType<typeof readRetry>;
 		state: "error";
 	}
 	| { state: "loading" };
 
-const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
+const useAccountIncomePageVm = (): AccountIncomePageViewModel => {
 	const { accountId = "" } = useParams();
 	const [searchParameters, setSearchParameters] = useSearchParams();
 
@@ -83,12 +88,14 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
 		isFetching: analytics.isFetching,
 	});
 
+	const retry = readRetry([analytics]);
+
 	if (availability === "loading" && analytics.isLoading)
 		return { state: "loading" };
 
 	if (!analytics.data)
 		return availability === "unavailable"
-			? { period, state: "error" }
+			? { period, readRetry: retry, state: "error" }
 			: { state: "loading" };
 
 	const display = toIncomeDisplayModel(analytics.data);
@@ -115,7 +122,10 @@ const useAccountIncomePageViewModel = (): AccountIncomePageViewModel => {
 		onReset,
 		onSubmit,
 		partial: analytics.meta?.completeness === "incomplete",
+		readRetry: retry,
+		source: analytics.meta,
 		state: "loaded",
+		totalVisible: analytics.meta?.completeness === "complete",
 	};
 };
 
@@ -136,5 +146,5 @@ function isValidIncomePeriod(period: IncomePeriod): boolean {
 
 export {
 	type AccountIncomePageViewModel,
-	useAccountIncomePageViewModel,
+	useAccountIncomePageVm,
 };

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

@@ -3,15 +3,27 @@ import type { FC } from "react";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
+import { ReadRetryButton } from "@/shared/ui";
+
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
 
 type ErrorProps = Extract<AccountIncomePageViewModel, { state: "error" }>;
 
-const AccountIncomePageError: FC<ErrorProps> = () => {
+const AccountIncomePageError: FC<ErrorProps> = (props) => {
 	const { t } = useTranslation();
 
+	const retry = props.readRetry.exhausted
+		? (
+				<ReadRetryButton
+					onRetry={props.readRetry.onRetry}
+					retrying={props.readRetry.retrying}
+				/>
+			)
+		: undefined;
+
 	return (
 		<StateView
+			action={retry}
 			error
 			text={t("income.errorText")}
 			title={t("income.errorTitle")}

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

@@ -9,6 +9,8 @@ import { StateView } from "@wealthledger/ui";
 import { FormProvider } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
+import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
+
 import type { AccountIncomePageViewModel } from "../AccountIncomePage.vm";
 
 import classes from "../AccountIncomePage.module.css";
@@ -49,11 +51,23 @@ const AccountIncomePageLoaded: FC<LoadedProps> = (props) => {
 				/>
 			</FormProvider>
 
+			<SourceSyncStatus
+				lastAttempt={props.source?.lastAttempt}
+				lastSuccessfulAt={props.source?.lastSuccessfulAt}
+				stale={props.source?.freshness === "stale"}
+			/>
+
+			<ReadRetry {...props.readRetry} />
+
 			<AccountIncomePageLoadedSummary {...props} />
 
 			<Alert color="blue">{t("income.taxBoundary")}</Alert>
 
-			<IncomePayments entries={display.entries} />
+			<IncomePayments
+				allAccounts={props.analytics.accountId === "all"}
+				entries={display.entries}
+				totalVisible={props.totalVisible}
+			/>
 		</Stack>
 	);
 };

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

@@ -3,13 +3,22 @@ import type { FC } from "react";
 import { Stack, Title } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 
-import { LedgerEntryRow } from "@/entities/broker-operation";
+import {
+	brokerageOperationGroupKey,
+	LedgerEntryRow,
+	OperationGroup,
+} from "@/entities/broker-operation";
+import { groupItems } from "@/shared/lib";
 
 import type { IncomeDisplayModel } from "../../../model/display";
 
 import classes from "../AccountIncomePage.module.css";
 
-type IncomePaymentsProps = { entries: IncomeDisplayModel["entries"] };
+type IncomePaymentsProps = {
+	allAccounts?: boolean;
+	entries: IncomeDisplayModel["entries"];
+	totalVisible?: boolean;
+};
 
 const IncomePayments: FC<IncomePaymentsProps> = (props) => {
 	const { t } = useTranslation();
@@ -19,11 +28,24 @@ const IncomePayments: FC<IncomePaymentsProps> = (props) => {
 			<Title order={2}>{t("income.payments")}</Title>
 
 			<Stack className={classes.entries} component="ul" gap="sm">
-				{props.entries.map(({ key, operation }) => (
-					<li key={key}>
-						<LedgerEntryRow operation={operation} wrap />
-					</li>
-				))}
+				{groupItems(
+					props.entries,
+					entry => props.allAccounts
+						? brokerageOperationGroupKey(entry.operation)
+						: null,
+				).map(entry => entry.type === "group"
+					? (
+							<OperationGroup
+								entries={entry.items}
+								key={entry.key}
+								totalVisible={props.totalVisible === true}
+							/>
+						)
+					: (
+							<li key={entry.item.key}>
+								<LedgerEntryRow operation={entry.item.operation} wrap />
+							</li>
+						))}
 			</Stack>
 		</Stack>
 	);

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.test.tsx

@@ -2,7 +2,7 @@ import type { FC } from "react";
 
 import { MantineProvider } from "@mantine/core";
 import { QueryClientProvider } from "@tanstack/react-query";
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
 import { http, HttpResponse } from "msw";
 import {
 	MemoryRouter,
@@ -44,6 +44,25 @@ const operation: BrokerageOperation
 		type: "OPERATION_TYPE_BUY",
 	};
 
+function coupon(
+	id: string,
+	accountId: string,
+	accountName: string,
+	value: string,
+): BrokerageOperation {
+	return {
+		...operation,
+		account: { id: accountId, name: accountName },
+		category: "income",
+		description: "Купон",
+		id,
+		instrumentUid: "UID",
+		payment: { currency: "RUB", value },
+		ticker: "BOND",
+		type: "OPERATION_TYPE_COUPON",
+	};
+}
+
 const Navigation: FC = () => {
 	const location = useLocation();
 	const navigate = useNavigate();
@@ -71,12 +90,16 @@ function configureTestAuth() {
 	});
 }
 
-function renderPage(search = "") {
+function renderPage(
+	search = "",
+	accountId = "account-1",
+	queryClient = createTestQueryClient(),
+) {
 	return render(
-		<QueryClientProvider client={createTestQueryClient()}>
+		<QueryClientProvider client={queryClient}>
 			<MantineProvider>
 				<MemoryRouter
-					initialEntries={[`/accounts/account-1/operations${search}`]}
+					initialEntries={[`/accounts/${accountId}/operations${search}`]}
 				>
 					<Routes>
 						<Route
@@ -90,6 +113,18 @@ function renderPage(search = "") {
 	);
 }
 
+// Automatic read retries wait 1s + 2s before the failure is final.
+const RETRIES_EXHAUSTED_MS = 6000;
+const TEST_MS = 10_000;
+
+const loadedOperations = {
+	accountId: "account-1",
+	hasNext: false,
+	items: [operation],
+	nextCursor: null,
+	observedAt: "2026-08-14T00:00:00Z",
+};
+
 describe("LedgerEntryRow", () => {
 	it("marks cashless operations without rendering operation details", () => {
 		render(
@@ -217,6 +252,27 @@ describe("LedgerEntryRow", () => {
 	});
 });
 
+const historyStateResource = (historyState: "loading" | "partial") =>
+	HttpResponse.json(
+		resource(
+			{
+				hasNext: false,
+				items: [operation],
+				nextCursor: null,
+			},
+			{
+				coverage: {
+					asOf: null,
+					completeRanges: [],
+					historyBoundary: "unknown",
+					historyState,
+					missingRanges: [],
+					requested: [],
+				},
+			},
+		),
+	);
+
 describe("AccountOperationsPage", () => {
 	it.each(["account-1", "all"])(
 		"normalizes invalid periods and history, preserves one-sided UTC dates and resets cursors for %s",
@@ -478,21 +534,115 @@ describe("AccountOperationsPage", () => {
 		expect(screen.getByRole("button", { name: "Применить" })).toBeDisabled();
 	});
 
-	it("renders an error state", async () => {
+	it("does not show the history loading alert when coverage is partial", async () => {
 		configureTestAuth();
 		server.use(
-			http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
-				HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 }),
+			http.get(
+				"*/api/v1/brokerage-accounts/:accountId/operations",
+				() => historyStateResource("partial"),
+			),
+		);
+		renderPage();
+		await screen.findByText("Покупка акций");
+		expect(screen.queryByText("История догружается")).not.toBeInTheDocument();
+	});
+
+	it("shows the history loading alert while historyState is loading", async () => {
+		configureTestAuth();
+		server.use(
+			http.get(
+				"*/api/v1/brokerage-accounts/:accountId/operations",
+				() => historyStateResource("loading"),
 			),
 		);
 		renderPage();
 		expect(
-			await screen.findByText("Не удалось загрузить журнал", undefined, {
-				timeout: 4000,
-			}),
+			await screen.findByText("История догружается"),
 		).toBeInTheDocument();
 	});
 
+	it(
+		"renders an error state with retry that recovers in place",
+		{ timeout: TEST_MS },
+		async () => {
+			configureTestAuth();
+			let isFailing = true;
+			let requests = 0;
+			server.use(
+				http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
+					requests += 1;
+
+					return isFailing
+						? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
+						: HttpResponse.json(resource(loadedOperations));
+				}),
+			);
+			renderPage();
+			expect(
+				await screen.findByText("Не удалось загрузить журнал", undefined, {
+					timeout: RETRIES_EXHAUSTED_MS,
+				}),
+			).toBeInTheDocument();
+			expect(requests).toBe(3);
+
+			isFailing = false;
+			fireEvent.click(screen.getByRole("button", { name: "Повторить" }));
+
+			expect(await screen.findByText("Покупка акций")).toBeInTheDocument();
+			expect(requests).toBe(4);
+		},
+	);
+
+	it(
+		"keeps cached operations, warns and retries the same GET",
+		{ timeout: TEST_MS },
+		async () => {
+			configureTestAuth();
+			let isFailing = false;
+			let requests = 0;
+			server.use(
+				http.get("*/api/v1/brokerage-accounts/:accountId/operations", () => {
+					requests += 1;
+
+					return isFailing
+						? HttpResponse.json({ code: "TBANK_UNAVAILABLE" }, { status: 503 })
+						: HttpResponse.json(resource(loadedOperations));
+				}),
+			);
+			const queryClient = createTestQueryClient();
+			renderPage("", "account-1", queryClient);
+			await screen.findByText("Покупка акций");
+			expect(screen.queryByRole("button", { name: "Повторить" }))
+				.not.toBeInTheDocument();
+
+			isFailing = true;
+			void queryClient.invalidateQueries({
+				queryKey: [
+					"get",
+					"/api/v1/brokerage-accounts/{accountId}/operations",
+				],
+			});
+
+			const retry = await screen.findByRole(
+				"button",
+				{ name: "Повторить" },
+				{ timeout: RETRIES_EXHAUSTED_MS },
+			);
+
+			expect(screen.getByText("Не удалось обновить данные")).toBeInTheDocument();
+			expect(screen.getByText("Покупка акций")).toBeInTheDocument();
+			expect(requests).toBe(4);
+
+			isFailing = false;
+			fireEvent.click(retry);
+
+			await waitFor(() =>
+				expect(screen.queryByText("Не удалось обновить данные"))
+					.not.toBeInTheDocument());
+			expect(requests).toBe(5);
+		},
+	);
+
 	it("keeps a null operations envelope loading instead of a confirmed empty period", async () => {
 		configureTestAuth();
 		server.use(
@@ -602,3 +752,73 @@ it("recovers an invalid cursor at the first page without clearing applied filter
 	for (const key of ["from", "to", "categories"])
 		expect(searches[2].get(key)).toBe(searches[0].get(key));
 });
+
+describe("all-account operation groups", () => {
+	it("groups only the current page and rebuilds the group at its boundary", async () => {
+		configureTestAuth();
+		server.use(
+			http.get(
+				"*/api/v1/brokerage-accounts/:accountId/operations",
+				({ request }) => {
+					const cursor = new URL(request.url).searchParams.get("cursor");
+
+					const items = cursor
+						? [
+								coupon("X2", "iis", "ИИС", "150"),
+								coupon("X3", "broker", "Брокерский", "50"),
+								operation,
+							]
+						: [coupon("X1", "broker", "Брокерский", "100")];
+
+					return HttpResponse.json(resource({
+						accountId: "all",
+						hasNext: !cursor,
+						items,
+						nextCursor: cursor ? null : "page-2",
+					}));
+				},
+			),
+		);
+		renderPage("", "all");
+
+		await screen.findAllByText("Купон");
+		expect(screen.queryByRole("list", { name: "Разбивка по счетам" }))
+			.not.toBeInTheDocument();
+		fireEvent.click(screen.getByRole("button", { name: "Далее" }));
+
+		const accounts = await screen.findByRole("list", {
+			name: /Купон · BOND, Исполнено/,
+		});
+
+		expect(screen.getByText("Купон · BOND")).toBeInTheDocument();
+		expect(screen.getByText("+200 ₽")).toBeInTheDocument();
+		expect(within(accounts).getAllByRole("listitem")).toHaveLength(2);
+
+		fireEvent.click(screen.getByRole("button", { name: "Назад" }));
+		await screen.findAllByText("Купон");
+		expect(screen.queryByRole("list", { name: "Разбивка по счетам" }))
+			.not.toBeInTheDocument();
+	});
+
+	it("leaves repeated operations ungrouped for one account", async () => {
+		configureTestAuth();
+		server.use(
+			http.get("*/api/v1/brokerage-accounts/:accountId/operations", () =>
+				HttpResponse.json(resource({
+					accountId: "account-1",
+					hasNext: false,
+					items: [
+						coupon("X1", "account-1", "Брокерский", "100"),
+						coupon("X2", "account-1", "Брокерский", "150"),
+					],
+					nextCursor: null,
+				})),
+			),
+		);
+		renderPage();
+
+		await screen.findAllByText("Купон");
+		expect(screen.queryByRole("list", { name: /Разбивка|Исполнено/ }))
+			.not.toBeInTheDocument();
+	});
+});

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.tsx

@@ -6,15 +6,15 @@ import { AccountOperationsPageLoaded } from "./components/AccountOperationsPageL
 import { AccountOperationsPageLoading } from "./components/AccountOperationsPageLoading.view";
 
 const AccountOperationsPage: FC = () => {
-	const viewModel = useAccountOperationsPageVm();
+	const vm = useAccountOperationsPageVm();
 
-	if (viewModel.state === "loading") {
+	if (vm.state === "loading") {
 		return <AccountOperationsPageLoading />;
 	}
 
-	return viewModel.state === "error"
-		? <AccountOperationsPageError {...viewModel} />
-		: <AccountOperationsPageLoaded {...viewModel} />;
+	return vm.state === "error"
+		? <AccountOperationsPageError {...vm} />
+		: <AccountOperationsPageLoaded {...vm} />;
 };
 
 export { AccountOperationsPage };

src/pages/account-operations/ui/AccountOperationsPage/AccountOperationsPage.vm.ts

@@ -12,7 +12,12 @@ import {
 	useBrokerageOperationHistory,
 } from "@/entities/broker-operation";
 import { useScreenSync } from "@/features/tbank-connection";
-import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
+import {
+	ApiErrorCode,
+	apiErrorCode,
+	isApiErrorCode,
+	readRetry,
+} from "@/shared/api";
 import {
 	defaultPeriod,
 	isValidPeriod,
@@ -25,6 +30,7 @@ const operationCategorySet = new Set<string>(operationCategories);
 
 type AccountOperationsPageViewModel
 	= | {
+		allAccounts: boolean;
 		canApply: boolean;
 		draftCategories: OperationCategory[];
 		draftPeriod: [null | string, null | string];
@@ -41,10 +47,16 @@ type AccountOperationsPageViewModel
 		onPrevious: () => void;
 		onReset: () => void;
 		partial?: boolean;
+		readRetry: ReturnType<typeof readRetry>;
 		source?: InvestmentResourceMeta;
 		state: "loaded";
+		totalVisible: boolean;
+	}
+	| {
+		onReset: () => void;
+		readRetry: ReturnType<typeof readRetry>;
+		state: "error";
 	}
-	| { onReset: () => void; state: "error" }
 	| { state: "loading" };
 
 const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
@@ -105,6 +117,8 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
 		isFetching: operations.isFetching,
 	});
 
+	const retry = readRetry([operations]);
+
 	if (availability === "loading" && operations.isLoading)
 		return { state: "loading" };
 
@@ -132,11 +146,11 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
 		(isInvalidCursor || !operations.data)
 		&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
 	)
-		return { onReset, state: "error" };
+		return { onReset, readRetry: retry, state: "error" };
 
 	if (!operations.data)
 		return availability === "unavailable"
-			? { onReset, state: "error" }
+			? { onReset, readRetry: retry, state: "error" }
 			: { state: "loading" };
 
 	const nextCursor = operations.data.nextCursor;
@@ -147,14 +161,13 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
 			|| !isSameCategories(draftCategories, appliedCategories);
 
 	return {
+		allAccounts: accountId === "all",
 		canApply: isDirty && isValidPeriod(draftFrom, draftTo),
 		draftCategories,
 		draftPeriod,
 		hasNext: Boolean(nextCursor && operations.data.hasNext),
 		hasPrevious: history.hasPrevious,
-		historyLoading:
-			operations.meta?.coverage?.historyState === "loading"
-			|| operations.meta?.coverage?.historyState === "partial",
+		historyLoading: operations.meta?.coverage?.historyState === "loading",
 		items: operations.data.items,
 		maxDate,
 		onApply: () => {
@@ -181,8 +194,10 @@ const useAccountOperationsPageVm = (): AccountOperationsPageViewModel => {
 		onPrevious: history.onPrevious,
 		onReset,
 		partial: operations.meta?.completeness === "incomplete",
+		readRetry: retry,
 		source: operations.meta,
 		state: "loaded",
+		totalVisible: operations.meta?.completeness === "complete",
 	};
 };
 

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageError.view.tsx

@@ -1,9 +1,11 @@
 import type { FC } from "react";
 
-import { Button } from "@mantine/core";
+import { Button, Group } from "@mantine/core";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
+import { ReadRetryButton } from "@/shared/ui";
+
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
 type AccountOperationsPageErrorProps = Extract<
@@ -19,9 +21,18 @@ const AccountOperationsPageError: FC<AccountOperationsPageErrorProps> = (
 	return (
 		<StateView
 			action={(
-				<Button onClick={props.onReset} variant="default">
-					{t("ledger.reset")}
-				</Button>
+				<Group gap="sm" justify="center">
+					{props.readRetry.exhausted && (
+						<ReadRetryButton
+							onRetry={props.readRetry.onRetry}
+							retrying={props.readRetry.retrying}
+						/>
+					)}
+
+					<Button onClick={props.onReset} variant="default">
+						{t("ledger.reset")}
+					</Button>
+				</Group>
 			)}
 			text={t("ledger.errorText")}
 			title={t("ledger.errorTitle")}

src/pages/account-operations/ui/AccountOperationsPage/components/AccountOperationsPageLoaded.view.tsx

@@ -12,8 +12,14 @@ import { DatePickerInput } from "@mantine/dates";
 import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
-import { LedgerEntryRow, operationCategories } from "@/entities/broker-operation";
-import { SourceSyncStatus } from "@/shared/ui";
+import {
+	brokerageOperationGroupKey,
+	LedgerEntryRow,
+	operationCategories,
+	OperationGroup,
+} from "@/entities/broker-operation";
+import { groupItems } from "@/shared/lib";
+import { ReadRetry, SourceSyncStatus } from "@/shared/ui";
 
 import type { AccountOperationsPageViewModel } from "../AccountOperationsPage.vm";
 
@@ -24,22 +30,49 @@ type AccountOperationsPageLoadedProps = Extract<
 
 const AccountOperationsPageLoadedOperations: FC<
 	AccountOperationsPageLoadedProps
-> = (props) => { // eslint-disable-line sonarjs/function-return-type -- React renders elements and lists.
+> = (props) => {
 	const { t } = useTranslation();
 
 	const { items } = props;
 
 	if (items.length > 0) {
-		return items.map(operation => (
-			<LedgerEntryRow
-				key={JSON.stringify([
+		const entries = groupItems(
+			items.map(operation => ({
+				key: JSON.stringify([
 					operation.account?.id,
 					operation.id,
 					operation.logoName,
-				])}
-				operation={operation}
-			/>
-		));
+				]),
+				operation,
+			})),
+			entry => props.allAccounts
+				? brokerageOperationGroupKey(entry.operation)
+				: null,
+		);
+
+		return (
+			<Stack
+				component="ul"
+				gap="lg"
+				m={0}
+				p={0}
+				style={{ listStyle: "none" }}
+			>
+				{entries.map(entry => entry.type === "group"
+					? (
+							<OperationGroup
+								entries={entry.items}
+								key={entry.key}
+								totalVisible={props.totalVisible}
+							/>
+						)
+					: (
+							<li key={entry.item.key}>
+								<LedgerEntryRow operation={entry.item.operation} />
+							</li>
+						))}
+			</Stack>
+		);
 	}
 
 	if (props.partial) {
@@ -69,6 +102,8 @@ const AccountOperationsPageLoaded: FC<AccountOperationsPageLoadedProps> = (
 				stale={props.source?.freshness === "stale"}
 			/>
 
+			<ReadRetry {...props.readRetry} />
+
 			{!!props.partial && <Alert role="status">{t("investment.partial")}</Alert>}
 
 			{!!props.historyLoading && <Alert>{t("investment.history")}</Alert>}

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

@@ -0,0 +1,175 @@
+import { describe, expect, it } from "vitest";
+
+import type { Portfolio } from "@/entities/portfolio";
+
+import { toConcentration } from "./concentration";
+import { portfolio, position } from "./positions.fixtures";
+
+function snapshot(positions: Portfolio["positions"]): Portfolio {
+	return { ...portfolio, positions };
+}
+
+function stock(
+	name: string,
+	value: null | string,
+	currency = "RUB",
+	overrides: Partial<Portfolio["positions"][number]> = {},
+): Portfolio["positions"][number] {
+	return {
+		...position,
+		currentValue: value === null ? null : { currency, value },
+		displayName: name,
+		...overrides,
+	};
+}
+
+const labels = {
+	missingIssuer: "Эмитент не указан",
+	missingSector: "Сектор не указан",
+	other: "Прочее",
+	sector: (code: string) => code,
+};
+
+describe("account concentration", () => {
+	it("uses exact positive values and excludes cash, negatives and nulls", () => {
+		const model = toConcentration(snapshot([
+			stock("A", "1"), stock("B", "15"),
+			stock("C", "0"), stock("D", "-50"), stock("E", null),
+			stock("F", null, "USD"), stock("G", "-3", "USD"),
+		]), "stocks", "RUB", labels);
+
+		expect(model.currencies).toEqual(["RUB", "USD"]);
+		expect(model.total).toBe("16");
+		expect(model.items.map(item => item.share)).toEqual(["93,8 %", "6,3 %"]);
+		expect(model.unaccounted).toBe(3);
+		const negative = snapshot([stock("A", "-3", "USD")]);
+		expect(toConcentration(negative, "stocks", "USD", labels))
+			.toMatchObject({ empty: true, unaccounted: 1 });
+	});
+
+	it("ranks seven positions with exact other and top-five totals", () => {
+		const model = toConcentration(snapshot([
+			stock("A", "400"), stock("B", "250"), stock("C", "150"),
+			stock("D", "100"), stock("E", "50"), stock("F", "30"),
+			stock("G", "20"),
+		]), "stocks", "RUB", labels);
+
+		expect(model.items.map(item => item.amount)).toEqual([
+			"400", "250", "150", "100", "50",
+		]);
+		expect(model.other).toMatchObject({
+			amount: "50", count: 2, share: "5 %",
+		});
+		expect(model.top5Share).toBe("95 %");
+		expect(model.other?.entries.map(item => item.share)).toEqual([
+			"3 %", "2 %",
+		]);
+	});
+
+	it("keeps sixth row, tiny share and stable alphabetical ties", () => {
+		const model = toConcentration(snapshot([
+			stock("Сбер", "100"), stock("X5", "100"),
+			stock("VK", "100"), stock("D", "100"),
+			stock("E", "100"), stock("F", "100"),
+		]), "stocks", "RUB", labels);
+
+		expect(model.items).toHaveLength(6);
+		expect(model.other).toBeNull();
+		expect(model.items.slice(0, 2).map(item => item.name)).toEqual([
+			"D", "E",
+		]);
+
+		const tiny = snapshot([
+			stock("Large", "100000000"), stock("Small", "1"),
+		]);
+
+		expect(toConcentration(tiny, "stocks", "RUB", labels).items[1]?.share)
+			.toBe("< 0,1 %");
+	});
+
+	it("groups sectors and issuers by codes, not labels", () => {
+		const positions = [
+			stock("A", "300", "RUB", {
+				issuer: { id: "one", name: "Сбербанк" }, sector: "energy",
+			}),
+			stock("B", "200", "RUB", {
+				issuer: { id: "one", name: "Сбер" }, sector: "energy",
+				type: "BOND",
+			}),
+			stock("C", "100", "RUB", {
+				issuer: { id: "two", name: "Сбер" }, sector: "financial",
+				type: "FUND",
+			}),
+			stock("D", "50", "RUB", { issuer: null, sector: null }),
+		];
+
+		expect(toConcentration(snapshot(positions), "sectors", "RUB", labels)
+			.items.map(item => item.amount)).toEqual(["500", "100", "50"]);
+		expect(toConcentration(snapshot(positions), "issuers", "RUB", labels)
+			.items.map(item => [item.name, item.amount])).toEqual([
+			["Сбербанк", "500"], ["", "50"],
+		]);
+	});
+
+	it("orders equal sums by displayed name", () => {
+		const issuers = snapshot([
+			stock("A", "300", "RUB", {
+				issuer: { id: "g", name: "Газпром" }, sector: "energy",
+			}),
+			stock("B", "300", "RUB", {
+				issuer: { id: "s", name: "Сбер" }, sector: "energy",
+			}),
+			stock("C", "200", "RUB", { issuer: null, sector: "energy" }),
+			stock("D", "100", "RUB", { issuer: null, sector: "energy" }),
+		]);
+
+		expect(toConcentration(issuers, "issuers", "RUB", labels)
+			.items.map(item => [item.label, item.amount])).toEqual([
+			["Газпром", "300"], ["Сбер", "300"], ["Эмитент не указан", "300"],
+		]);
+
+		const sectors = snapshot([
+			stock("A", "100", "RUB", { sector: "it" }),
+			stock("B", "100", "RUB", { sector: "energy" }),
+		]);
+
+		const sectorLabels = {
+			...labels,
+			sector: (code: string) => code === "it"
+				? "Информационные технологии"
+				: "Энергетика",
+		};
+
+		expect(toConcentration(sectors, "sectors", "RUB", sectorLabels)
+			.items.map(item => item.label))
+			.toEqual(["Информационные технологии", "Энергетика"]);
+	});
+
+	it("chooses issuer name from the largest position, then alphabetically", () => {
+		const data = snapshot([
+			stock("A", "100", "RUB", {
+				issuer: { id: "brand", name: "Ястреб" },
+			}),
+			stock("B", "300", "RUB", {
+				issuer: { id: "brand", name: "Альфа" },
+			}),
+			stock("C", "400", "RUB", {
+				issuer: { id: "other", name: "Бета" },
+			}),
+		]);
+
+		expect(toConcentration(data, "issuers", "RUB", labels).items
+			.map(item => [item.name, item.label, item.amount])).toEqual([
+			["Альфа", "Альфа", "400"], ["Бета", "Бета", "400"],
+		]);
+	});
+
+	it("uses ISIN before ticker for bonds", () => {
+		const data = snapshot([stock("Облигация", "100", "RUB", {
+			isin: "RU000A0JX0J2", ticker: "BOND", type: "BOND",
+		})]);
+
+		expect(toConcentration(data, "bonds", "RUB", labels)
+			.items[0]?.logo?.subtitle).toBe("RU000A0JX0J2");
+	});
+});

src/pages/account/model/concentration.ts

@@ -0,0 +1,300 @@
+import type { Portfolio } from "@/entities/portfolio";
+
+import {
+	type Decimal,
+	decimalFromString,
+	decimalToString,
+	instrumentLogoUrl,
+	sumDecimals,
+} from "@/shared/lib";
+
+type Concentration = {
+	currencies: string[];
+	empty: boolean;
+	items: ConcentrationItem[];
+	other: ConcentrationOther | null;
+	top5Share: null | string;
+	total: null | string;
+	unaccounted: number;
+};
+
+type ConcentrationItem = {
+	amount: string;
+	chartValue: number;
+	key: string;
+	label: string;
+	logo: ConcentrationLogo | null;
+	name: string;
+	share: string;
+	unknown: boolean;
+};
+
+type ConcentrationLabels = {
+	missingIssuer: string;
+	missingSector: string;
+	other: string;
+	sector: (code: string) => string;
+};
+
+type ConcentrationLogo = {
+	src: null | string;
+	subtitle: null | string;
+};
+
+type ConcentrationOther = ConcentrationItem & {
+	count: number;
+	entries: ConcentrationItem[];
+};
+
+type Group = {
+	best?: { name: string; value: Decimal };
+	first: number;
+	key: string;
+	label: string;
+	logo: ConcentrationLogo | null;
+	name: string;
+	unknown: boolean;
+	values: Decimal[];
+};
+
+type Position = Portfolio["positions"][number];
+
+type Slice = "bonds"
+	| "issuers"
+	| "sectors"
+	| "stocks";
+
+const eligibleTypes = new Set(["BOND", "FUND", "STOCK"]);
+const RADIX = 10n;
+const CHART_PRECISION = 1_000_000n;
+const SHARE_PRECISION = 1000n;
+const HALF = 2n;
+const TOP = 5;
+const FIRST_OTHER = 7;
+
+const compareNames = (a: string, b: string) =>
+	a.toLowerCase().localeCompare(b.toLowerCase(), "en", {
+		numeric: false,
+	});
+
+function addPosition(
+	groups: Map<string, Group>,
+	position: Position,
+	index: number,
+	slice: Slice,
+	labels: ConcentrationLabels,
+	selected: null | string,
+): number {
+	if (!isIncluded(slice, position.type)) return 0;
+	if (!position.currentValue) return 1;
+	if (position.currentValue.currency !== selected) return 0;
+	const value = decimalFromString(position.currentValue.value);
+	if (value.value < 0n) return 1;
+	if (value.value === 0n) return 0;
+	const identity = groupIdentity(position, slice, index, labels);
+
+	const group = groups.get(identity.key) ?? {
+		...identity, first: index, values: [],
+	};
+
+	group.values.push(value);
+
+	if (slice === "issuers" && !identity.unknown) {
+		const best = group.best;
+
+		if (!best || compareDecimal(value, best.value) > 0
+			|| (compareDecimal(value, best.value) === 0
+				&& compareNames(identity.name, best.name) < 0)) {
+			group.best = { name: identity.name, value };
+			group.name = identity.name;
+			group.label = identity.label;
+		}
+	}
+
+	groups.set(identity.key, group);
+
+	return 0;
+}
+
+function chartValue(part: Decimal, total: Decimal): number {
+	const scale = Math.max(part.scale, total.scale);
+	const numerator = part.value * RADIX ** BigInt(scale - part.scale);
+	const denominator = total.value * RADIX ** BigInt(scale - total.scale);
+
+	return Number(numerator * CHART_PRECISION / denominator)
+		/ Number(CHART_PRECISION);
+}
+
+function compareDecimal(a: Decimal, b: Decimal): number {
+	const scale = Math.max(a.scale, b.scale);
+	const left = a.value * RADIX ** BigInt(scale - a.scale);
+	const right = b.value * RADIX ** BigInt(scale - b.scale);
+
+	if (left > right) return 1;
+
+	return left < right ? -1 : 0;
+}
+
+function concentrationCurrencies(portfolio: Portfolio): string[] {
+	return [...new Set(portfolio.positions
+		.filter(position => eligibleTypes.has(position.type))
+		.filter(position => position.currentValue
+			&& decimalFromString(position.currentValue.value).value !== 0n)
+		.map(position => position.currentValue?.currency)
+		.filter((value): value is string => !!value))]
+		.toSorted((a, b) => a.localeCompare(b));
+}
+
+function groupIdentity(
+	position: Position,
+	slice: Slice,
+	index: number,
+	labels: ConcentrationLabels,
+) {
+	if (slice === "sectors") {
+		const sector = position.sector;
+		const isUnknown = !sector;
+
+		return {
+			key: sector ?? "",
+			label: isUnknown
+				? labels.missingSector
+				: labels.sector(sector),
+			logo: null,
+			name: sector ?? "",
+			unknown: isUnknown,
+		};
+	}
+
+	if (slice === "issuers") {
+		const isUnknown = !position.issuer;
+
+		return {
+			key: position.issuer?.id ?? "",
+			label: position.issuer ? position.issuer.name : labels.missingIssuer,
+			logo: null,
+			name: position.issuer?.name ?? "",
+			unknown: isUnknown,
+		};
+	}
+
+	return {
+		key: String(index),
+		label: position.displayName,
+		logo: {
+			src: instrumentLogoUrl(position.logoName),
+			subtitle: slice === "bonds"
+				? position.isin ?? position.ticker ?? position.figi
+				: position.ticker ?? position.isin ?? position.figi,
+		},
+		name: position.displayName,
+		unknown: false,
+	};
+}
+
+function isIncluded(slice: Slice, type: string): boolean {
+	if (slice === "stocks") return type === "STOCK";
+	if (slice === "bonds") return type === "BOND";
+
+	return slice === "issuers" ? type === "STOCK" || type === "BOND" : eligibleTypes.has(type);
+}
+
+function share(part: Decimal, total: Decimal): string {
+	const scale = Math.max(part.scale, total.scale);
+	const numerator = part.value * RADIX ** BigInt(scale - part.scale);
+	const denominator = total.value * RADIX ** BigInt(scale - total.scale);
+	if (numerator * SHARE_PRECISION < denominator) return "< 0,1 %";
+
+	const tenths = (numerator * SHARE_PRECISION * HALF + denominator)
+		/ (HALF * denominator);
+
+	return tenths % RADIX === 0n ? `${tenths / RADIX} %` : `${tenths / RADIX},${tenths % RADIX} %`;
+}
+
+function toConcentration(
+	portfolio: Portfolio,
+	slice: Slice,
+	currency: null | string,
+	labels: ConcentrationLabels,
+): Concentration {
+	const currencies = concentrationCurrencies(portfolio);
+
+	const selected = currency && currencies.includes(currency)
+		? currency
+		: currencies[0] ?? null;
+
+	const groups = new Map<string, Group>();
+	let unaccounted = 0;
+
+	for (const [index, position] of portfolio.positions.entries()) {
+		unaccounted += addPosition(
+			groups, position, index, slice, labels, selected,
+		);
+	}
+
+	const ranked = Array.from(groups.values(), group => ({
+		...group, sum: sumDecimals(group.values),
+	})).toSorted((a, b) => compareDecimal(b.sum, a.sum)
+		|| compareNames(a.label, b.label) || a.first - b.first);
+
+	const total = ranked.length > 0
+		? sumDecimals(ranked.map(item => item.sum))
+		: null;
+
+	const entries = total
+		? ranked.map(group => ({
+				amount: decimalToString(group.sum),
+				chartValue: chartValue(group.sum, total),
+				key: group.key,
+				label: group.label,
+				logo: group.logo,
+				name: group.name,
+				share: share(group.sum, total),
+				unknown: group.unknown,
+			}))
+		: [];
+
+	const rest = entries.length >= FIRST_OTHER ? entries.slice(TOP) : [];
+
+	const otherSum = rest.length > 0
+		? sumDecimals(ranked.slice(TOP).map(item => item.sum))
+		: null;
+
+	const other = otherSum && total
+		? {
+				amount: decimalToString(otherSum),
+				chartValue: chartValue(otherSum, total),
+				count: rest.length,
+				entries: rest,
+				key: "__other",
+				label: labels.other,
+				logo: null,
+				name: "", share: share(otherSum, total), unknown: false,
+			}
+		: null;
+
+	const top5 = ranked.length > TOP
+		? sumDecimals(ranked.slice(0, TOP).map(item => item.sum))
+		: null;
+
+	return {
+		currencies,
+		empty: !total,
+		items: other ? entries.slice(0, TOP) : entries,
+		other,
+		top5Share: top5 && total ? share(top5, total) : null,
+		total: total && decimalToString(total),
+		unaccounted,
+	};
+}
+
+export {
+	concentrationCurrencies,
+	toConcentration,
+};
+export type {
+	Concentration,
+	ConcentrationItem,
+	ConcentrationLabels,
+	Slice,
+};

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

@@ -13,8 +13,10 @@ const portfolio
 				displayName: "Акция",
 				figi: "FIGI-STOCK",
 				isin: null,
+				issuer: null,
 				logoName: "akciya.png",
 				quantity: "2",
+				sector: null,
 				ticker: null,
 				type: "STOCK",
 			},
@@ -25,8 +27,10 @@ const portfolio
 				displayName: "Облигация",
 				figi: "FIGI-BOND",
 				isin: "RU000A0JX0J2",
+				issuer: null,
 				logoName: null,
 				quantity: "1",
+				sector: null,
 				ticker: null,
 				type: "BOND",
 			},
@@ -37,8 +41,10 @@ const portfolio
 				displayName: "Фонд",
 				figi: "FIGI-FUND",
 				isin: null,
+				issuer: null,
 				logoName: "fond.png",
 				quantity: "3",
+				sector: null,
 				ticker: null,
 				type: "FUND",
 			},

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,
@@ -13,7 +23,7 @@ function sections(positions: Portfolio["positions"]) {
 }
 
 describe("account position sections", () => {
-	it("excludes currency instruments only from display, preserving order and share denominators", () => {
+	it("excludes currency mirrors from display and share denominators", () => {
 		const otherTypes = [
 			"OPTION",
 			"OTHER",
@@ -63,12 +73,30 @@ describe("account position sections", () => {
 			"FIGI-FUND",
 			...otherTypes.map(type => `FIGI-${type}-NEXT`),
 		]);
-		expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("40 %");
-		expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("20 %");
-		expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("20 %");
+		expect(sections[0]?.groups[0]?.positions[0].shareText).toBe("50 %");
+		expect(sections[1]?.groups[0]?.positions[0].shareText).toBe("25 %");
+		expect(sections[2]?.groups[1]?.positions[0].shareText).toBe("25 %");
 		expect(snapshot).toEqual(original);
 	});
 
+	it("keeps all-account positions from both accounts without counting mirrored cash", () => {
+		const result = sections([
+			makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "100" } }),
+			makePosition({ account: { id: "a", name: "Основной" }, currentValue: { currency: "RUB", value: "50" }, type: "CURRENCY" }),
+			makePosition({ account: { id: "b", name: "ИИС" }, currentValue: { currency: "RUB", value: "100" } }),
+		]);
+
+		const visible = result.flatMap(section =>
+			section.groups.flatMap(group => group.positions));
+
+		expect(visible)
+			.toEqual(expect.arrayContaining([
+				expect.objectContaining({ account: { id: "a", name: "Основной" }, shareText: "50 %" }),
+				expect.objectContaining({ account: { id: "b", name: "ИИС" }, shareText: "50 %" }),
+			]));
+		expect(visible).toHaveLength(2);
+	});
+
 	it("prepares grouped position sections with derived display data", () => {
 		expect(
 			toAccountPagePositionSections(portfolio).map(({ groups, kind }) => ({
@@ -82,6 +110,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 +125,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Облигация",
 						logoSrc: null,
+						returnPercent: "-11.111111",
+						returnPercentText: "-11,11 %",
 						returnText: "-5 ₽",
 						returnTone: "negative",
 						shareText: "33,3 %",
@@ -107,6 +139,8 @@ describe("account position sections", () => {
 					{
 						displayName: "Фонд",
 						logoSrc: null,
+						returnPercent: null,
+						returnPercentText: null,
 						returnText: null,
 						returnTone: undefined,
 						shareText: null,
@@ -187,3 +221,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,19 @@
 import { formatShare, type Portfolio } from "@/entities/portfolio";
-import { formatMoney, instrumentLogoUrl } from "@/shared/lib";
+import {
+	type Decimal,
+	decimalFromString,
+	decimalToString,
+	formatDecimal,
+	formatMoney,
+	instrumentLogoUrl,
+	sumDecimals,
+} 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 +31,44 @@ type AccountPagePositionSection = {
 
 type AccountPageReturnTone = "negative" | "positive";
 
+type Money = NonNullable<Portfolio["positions"][number]["absoluteReturn"]>;
+
 type PositionSectionKind = "bonds"
 	| "other"
 	| "stocks";
 
+const RADIX = 10n;
+const PERCENT_SCALE = 6;
+const DISPLAY_PERCENT_SCALE = 2;
+const PERCENT_FACTOR = 100n;
+const ROUNDING_FACTOR = 2n;
+
+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,13 +111,48 @@ 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 toAccountPagePositionSections(
 	portfolio: Portfolio,
 ): AccountPagePositionSection[] {
 	const denominators = new Map<string, number>();
 
 	for (const position of portfolio.positions) {
-		if (!position.currentValue) continue;
+		if (position.type === "CURRENCY" || !position.currentValue) continue;
 		const currency = position.currentValue.currency;
 		denominators.set(
 			currency,
@@ -111,6 +190,8 @@ function toPosition(
 	const returnPrefix
 		= isExpanded && returnValue !== null && returnValue > 0 ? "+" : "";
 
+	const percent = returnPercent(position);
+
 	return {
 		...position,
 		instrumentTo:
@@ -120,6 +201,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 +247,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/model/previews.ts

@@ -33,6 +33,7 @@ type AccountPageRecentOperations
 		stale?: boolean;
 		state: "loaded" | "partial";
 		to: string;
+		totalVisible?: boolean;
 	}
 	| {
 		state: "empty"
@@ -84,6 +85,7 @@ function toRecentEvents(
 			items: events.data?.events.slice(0, RECENT_EVENTS_LIMIT) ?? [],
 			state: "partial",
 			to,
+			totalVisible: false,
 		};
 	if (!events.data && (events.isError || events.meta?.lastAttempt.state === "failed"))
 		return { state: "error", to };
@@ -94,6 +96,7 @@ function toRecentEvents(
 		items,
 		state: "loaded",
 		to,
+		totalVisible: events.meta?.completeness === "complete",
 	};
 }
 
@@ -109,7 +112,12 @@ function toRecentOperations(
 	)
 		return { state: "loading", to };
 	if (operations.meta?.completeness === "incomplete")
-		return { items: operations.data?.items ?? [], state: "partial", to };
+		return {
+			items: operations.data?.items ?? [],
+			state: "partial",
+			to,
+			totalVisible: false,
+		};
 	if (
 		!operations.data
 		&& (operations.isError || operations.meta?.lastAttempt.state === "failed")
@@ -125,6 +133,7 @@ function toRecentOperations(
 		stale: operations.meta?.freshness === "stale",
 		state: "loaded",
 		to,
+		totalVisible: operations.meta?.completeness === "complete",
 	};
 }
 

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

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

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

@@ -1,36 +1,48 @@
 import type { FC } from "react";
 
-import { useAccountPageViewModel } from "./AccountPage.vm";
+import { useAccountPageVm } from "./AccountPage.vm";
 import { AccountPageEmpty } from "./components/AccountPageEmpty.view";
 import { AccountPageError } from "./components/AccountPageError.view";
 import { AccountPageLoaded } from "./components/AccountPageLoaded.view";
 import { AccountPageLoading } from "./components/AccountPageLoading/AccountPageLoading.view";
 
 const AccountPage: FC = () => {
-	const viewModel = useAccountPageViewModel();
-	if (viewModel.state === "loading") return <AccountPageLoading />;
-	if (viewModel.state === "error") return <AccountPageError {...viewModel} />;
-	if (viewModel.state === "empty")
+	const vm = useAccountPageVm();
+	if (vm.state === "loading") return <AccountPageLoading />;
+	if (vm.state === "error") return <AccountPageError {...vm} />;
+	if (vm.state === "empty")
 		return (
 			<AccountPageEmpty
-				account={viewModel.account}
-				accountId={viewModel.accountId}
-				incomeSummary={viewModel.incomeSummary}
-				recentEvents={viewModel.recentEvents}
-				recentOperations={viewModel.recentOperations}
+				account={vm.account}
+				accountId={vm.accountId}
+				incomeSummary={vm.incomeSummary}
+				readRetry={vm.readRetry}
+				recentEvents={vm.recentEvents}
+				recentOperations={vm.recentOperations}
+				source={vm.source}
 			/>
 		);
 
 	return (
 		<AccountPageLoaded
-			account={viewModel.account}
-			accountId={viewModel.accountId}
-			incomeSummary={viewModel.incomeSummary}
-			partial={viewModel.partial}
-			portfolio={viewModel.portfolio}
-			positionSections={viewModel.positionSections}
-			recentEvents={viewModel.recentEvents}
-			recentOperations={viewModel.recentOperations}
+			account={vm.account}
+			accountId={vm.accountId}
+			concentration={vm.concentration}
+			currency={vm.currency}
+			incomeSummary={vm.incomeSummary}
+			onCurrencyChange={vm.onCurrencyChange}
+			onSliceChange={vm.onSliceChange}
+			onTabChange={vm.onTabChange}
+			partial={vm.partial}
+			portfolio={vm.portfolio}
+			positionSections={vm.positionSections}
+			readRetry={vm.readRetry}
+			recentEvents={vm.recentEvents}
+			recentOperations={vm.recentOperations}
+			slice={vm.slice}
+			source={vm.source}
+			tab={vm.tab}
+			unrealizedReturns={vm.unrealizedReturns}
 		/>
 	);
 };

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

@@ -12,7 +12,7 @@ import { resource } from "@/test/resource";
 import { server } from "@/test/server";
 
 import { portfolio } from "../../model/positions.fixtures";
-import { useAccountPageViewModel } from "./AccountPage.vm";
+import { useAccountPageVm } from "./AccountPage.vm";
 
 function configureTestAuth() {
 	configureAuthClient({
@@ -102,12 +102,12 @@ function mockLoadedAccountPage() {
 	);
 }
 
-describe("useAccountPageViewModel", () => {
+describe("useAccountPageVm", () => {
 	it("prepares recent operations and events state for presentation views", async () => {
 		configureTestAuth();
 		mockLoadedAccountPage();
 
-		const { result } = renderHook(() => useAccountPageViewModel(), {
+		const { result } = renderHook(() => useAccountPageVm(), {
 			wrapper: createWrapper(),
 		});
 
@@ -154,7 +154,7 @@ describe("useAccountPageViewModel", () => {
 			),
 		);
 
-		const { result } = renderHook(() => useAccountPageViewModel(), {
+		const { result } = renderHook(() => useAccountPageVm(), {
 			wrapper: createWrapper(),
 		});
 
@@ -194,7 +194,7 @@ it("keeps overview sections independent when their source data is incomplete", a
 		),
 	);
 
-	const { result } = renderHook(() => useAccountPageViewModel(), {
+	const { result } = renderHook(() => useAccountPageVm(), {
 		wrapper: createWrapper(),
 	});
 
@@ -232,7 +232,7 @@ it("keeps overview sections loaded without exposing technical retry", async () =
 		),
 	);
 
-	const { result } = renderHook(() => useAccountPageViewModel(), {
+	const { result } = renderHook(() => useAccountPageVm(), {
 		wrapper: createWrapper(),
 	});
 

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

@@ -1,3 +1,5 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useParams } from "react-router";
 
 import type { Portfolio } from "@/entities/portfolio";
@@ -14,12 +16,20 @@ import {
 import { useIncomeSummary } from "@/entities/income";
 import { usePortfolio } from "@/entities/portfolio";
 import { useScreenSync } from "@/features/tbank-connection";
-import { ApiErrorCode, apiErrorCode, isApiErrorCode } from "@/shared/api";
+import { apiErrorCode, isBrokerageAccessLoss, readRetry } from "@/shared/api";
 import { useInitialAvailability } from "@/shared/lib";
 
+import {
+	type Concentration,
+	concentrationCurrencies,
+	type ConcentrationLabels,
+	type Slice,
+	toConcentration,
+} from "../../model/concentration";
 import {
 	type AccountPagePositionSection,
 	toAccountPagePositionSections,
+	toUnrealizedReturns,
 } from "../../model/positions";
 import {
 	type AccountPageIncomeSummary,
@@ -35,8 +45,10 @@ type AccountPageContent = {
 	accountId?: string;
 	incomeSummary: AccountPageIncomeSummary;
 	partial?: boolean;
+	readRetry: AccountPageReadRetry;
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
+	source?: InvestmentResourceMeta;
 };
 
 type AccountPageEmptyViewModel = AccountPageContent & {
@@ -44,27 +56,47 @@ type AccountPageEmptyViewModel = AccountPageContent & {
 };
 
 type AccountPageLoadedViewModel = AccountPageContent & {
+	concentration: Concentration | null;
+	currency: null | string;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	onTabChange: (tab: null | string) => void;
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
-	source?: InvestmentResourceMeta;
+	slice: Slice;
 	state: "loaded";
+	tab: string;
+	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
+type AccountPageReadRetry = ReturnType<typeof readRetry>;
+
 type AccountPageViewModel
 	= | AccountPageEmptyViewModel
 		| AccountPageLoadedViewModel
-		| { code?: string; state: "error" }
+		| { code?: string; readRetry: AccountPageReadRetry; state: "error" }
 		| { state: "loading" };
 
-function isPortfolioAccessFailure(code?: string) {
-	return isApiErrorCode(code, ApiErrorCode.Forbidden)
-		|| isApiErrorCode(code, ApiErrorCode.InvalidTbankToken)
-		|| isApiErrorCode(code, ApiErrorCode.NotFound)
-		|| isApiErrorCode(code, ApiErrorCode.TbankNotConnected);
-}
-
-function useAccountPageViewModel(): AccountPageViewModel {
+function useAccountPageVm(): AccountPageViewModel {
 	const { accountId } = useParams();
+	const { t } = useTranslation();
+
+	const [selection, setSelection] = useState<{
+		accountId?: string;
+		currency: null | string;
+		slice: Slice;
+		tab: string;
+	}>({ accountId, currency: null, slice: "stocks", tab: "positions" });
+
+	const current = selection.accountId === accountId
+		? selection
+		: {
+				accountId, currency: null, slice: "stocks" as const, tab: "positions",
+			};
+
+	const updateSelection = (change: Partial<typeof selection>) =>
+		setSelection({ ...current, ...change });
+
 	const portfolio = usePortfolio(accountId);
 
 	const operations = useBrokerageOperations(accountId, {
@@ -84,7 +116,9 @@ function useAccountPageViewModel(): AccountPageViewModel {
 	]);
 
 	const code = apiErrorCode(portfolio.error);
-	const isAccessFailure = isPortfolioAccessFailure(code);
+	// The portfolio drives this screen; the retry repeats only its GET.
+	const retry = readRetry([portfolio]);
+	const isAccessFailure = isBrokerageAccessLoss(code);
 
 	const availability = useInitialAvailability({
 		hasContent: !!portfolio.data,
@@ -93,12 +127,13 @@ function useAccountPageViewModel(): AccountPageViewModel {
 		isFetching: portfolio.isFetching,
 	});
 
-	if (isAccessFailure) return { code, state: "error" as const };
+	if (isAccessFailure)
+		return { code, readRetry: retry, state: "error" as const };
 
 	if (!portfolio.data)
-		return {
-			state: availability === "unavailable" ? "error" : "loading",
-		} as const;
+		return availability === "unavailable"
+			? { code, readRetry: retry, state: "error" as const }
+			: { state: "loading" as const };
 
 	const account = accounts.data?.find(item => item.id === accountId);
 	const recentOperations = toRecentOperations(accountId, operations);
@@ -115,25 +150,53 @@ function useAccountPageViewModel(): AccountPageViewModel {
 			account,
 			accountId,
 			incomeSummary,
+			readRetry: retry,
 			recentEvents,
 			recentOperations,
+			source: portfolio.meta,
 			state: "empty" as const,
 		};
 
 	const isPartial = portfolio.meta?.completeness === "incomplete";
+	const currencies = concentrationCurrencies(portfolio.data);
+
+	const currency = current.currency && currencies.includes(current.currency)
+		? current.currency
+		: currencies[0] ?? null;
+
+	const labels: ConcentrationLabels = {
+		missingIssuer: t("portfolio.concentration.missingIssuer"),
+		missingSector: t("portfolio.concentration.missingSector"),
+		other: t("portfolio.concentration.other"),
+		sector: code => t(`stock.sectors.${code}`, { defaultValue: code }),
+	};
+
+	const concentration = accountId !== "all"
+		&& current.tab === "concentration"
+		? toConcentration(portfolio.data, current.slice, currency, labels)
+		: null;
 
 	return {
 		account,
 		accountId,
+		concentration,
+		currency,
 		incomeSummary,
+		onCurrencyChange: value => updateSelection({ currency: value }),
+		onSliceChange: slice => updateSelection({ slice }),
+		onTabChange: tab => updateSelection({ tab: tab ?? "positions" }),
 		partial: isPartial,
 		portfolio: portfolio.data,
 		positionSections: toAccountPagePositionSections(portfolio.data),
+		readRetry: retry,
 		recentEvents,
 		recentOperations,
+		slice: current.slice,
 		source: portfolio.meta,
 		state: "loaded" as const,
+		tab: current.tab,
+		unrealizedReturns: toUnrealizedReturns(portfolio.data.positions),
 	};
 }
 
-export { useAccountPageViewModel };
+export { useAccountPageVm };

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

@@ -5,9 +5,10 @@ import { StateView } from "@wealthledger/ui";
 import { useTranslation } from "react-i18next";
 
 import type { BrokerageAccount } from "@/entities/brokerage-account";
+import type { InvestmentResourceMeta } from "@/shared/api";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
-import { PortfolioStructure } from "@/widgets/portfolio-structure";
+import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
 
 import type {
 	AccountPageIncomeSummary,
@@ -17,14 +18,17 @@ import type {
 
 import { AccountHeading } from "./AccountHeading.view";
 import { IncomeSummary } from "./IncomeSummary.view";
+import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
 import { RecentOperations } from "./RecentOperations.view";
 
 type AccountPageEmptyProps = {
 	account?: BrokerageAccount;
 	accountId?: string;
 	incomeSummary?: AccountPageIncomeSummary;
+	readRetry?: ReadRetryProps;
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
+	source?: InvestmentResourceMeta;
 };
 
 const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
@@ -40,15 +44,29 @@ const AccountPageEmpty: FC<AccountPageEmptyProps> = (props) => {
 		<Stack>
 			<AccountHeading account={props.account} accountId={props.accountId} />
 
+			<SourceSyncStatus
+				lastAttempt={props.source?.lastAttempt}
+				lastSuccessfulAt={props.source?.lastSuccessfulAt}
+				stale={props.source?.freshness === "stale"}
+			/>
+
+			{!!props.readRetry && <ReadRetry {...props.readRetry} />}
+
 			<StateView text={text} title={t("portfolio.emptyTitle")} />
 
 			<PortfolioStructure
 				structure={{ currencies: [], unvaluedCategories: [] }}
 			/>
 
-			<RecentOperations operations={props.recentOperations} />
+			<RecentOperations
+				allAccounts={props.accountId === "all"}
+				operations={props.recentOperations}
+			/>
 
-			<BrokerageEventsPreview events={props.recentEvents} />
+			<BrokerageEventsPreview
+				allAccounts={props.accountId === "all"}
+				events={props.recentEvents}
+			/>
 
 			{!!props.incomeSummary && <IncomeSummary {...props.incomeSummary} />}
 		</Stack>

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

@@ -6,8 +6,12 @@ import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
 import { ApiErrorCode, isApiErrorCode } from "@/shared/api";
+import { ReadRetryButton, type ReadRetryProps } from "@/shared/ui";
 
-type AccountPageErrorProps = { code?: string };
+type AccountPageErrorProps = {
+	code?: string;
+	readRetry?: ReadRetryProps;
+};
 
 const AccountPageError: FC<AccountPageErrorProps> = (props) => {
 	const { code } = props;
@@ -43,8 +47,18 @@ const AccountPageError: FC<AccountPageErrorProps> = (props) => {
 			/>
 		);
 
+	const retry = props.readRetry?.exhausted
+		? (
+				<ReadRetryButton
+					onRetry={props.readRetry.onRetry}
+					retrying={props.readRetry.retrying}
+				/>
+			)
+		: undefined;
+
 	return (
 		<StateView
+			action={retry}
 			text={t("states.unavailableText")}
 			title={t("states.unavailableTitle")}
 		/>

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

@@ -1,6 +1,12 @@
-import type { FC } from "react";
-
-import { Accordion, Alert, Stack } from "@mantine/core";
+import {
+	Alert,
+	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,9 +14,10 @@ import type { Portfolio } from "@/entities/portfolio";
 import type { InvestmentResourceMeta } from "@/shared/api";
 
 import { BrokerageEventsPreview } from "@/entities/brokerage-event";
-import { SourceSyncStatus } from "@/shared/ui";
-import { PortfolioStructure } from "@/widgets/portfolio-structure";
+import { formatMoney } from "@/shared/lib";
+import { ReadRetry, type ReadRetryProps, SourceSyncStatus } from "@/shared/ui";
 
+import type { Concentration as ConcentrationModel, Slice } from "../../../model/concentration";
 import type { AccountPagePositionSection } from "../../../model/positions";
 import type {
 	AccountPageIncomeSummary,
@@ -20,33 +27,55 @@ import type {
 
 import classes from "../AccountPage.module.css";
 import { AccountHeading } from "./AccountHeading.view";
+import { Concentration } from "./Concentration/Concentration.view";
 import { CurrencyCards } from "./CurrencyCards/CurrencyCards.view";
 import { IncomeSummary } from "./IncomeSummary.view";
+import { PortfolioStructure } from "./PortfolioStructure/PortfolioStructure";
 import { PositionSection } from "./PositionSection.view";
 import { RecentOperations } from "./RecentOperations.view";
 
 type AccountPageLoadedProps = {
 	account?: BrokerageAccount;
 	accountId?: string;
+	concentration: ConcentrationModel | null;
+	currency: null | string;
 	incomeSummary?: AccountPageIncomeSummary;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	onTabChange: (tab: null | string) => void;
 	partial?: boolean;
 	portfolio: Portfolio;
 	positionSections: AccountPagePositionSection[];
+	readRetry?: ReadRetryProps;
 	recentEvents: AccountPageRecentEvents;
 	recentOperations: AccountPageRecentOperations;
+	slice: Slice;
 	source?: InvestmentResourceMeta;
+	tab: string;
+	unrealizedReturns: Portfolio["totalsByCurrency"];
 };
 
 const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 	const { t } = useTranslation();
+	const [filter, setFilter] = useState<string>();
+	const tab = props.tab;
 
-	const defaultValue = [
-		...props.positionSections.map(section => section.kind),
-		"cash",
-		"recentOperations",
-		"recentEvents",
-		"incomeSummary",
-	];
+	const onTabChange = props.onTabChange;
+
+	const activeSection = props.positionSections.find(
+		section => section.kind === filter,
+	) ?? props.positionSections[0];
+
+	const positionKindLabels: Record<AccountPagePositionSection["kind"], string> = {
+		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">
@@ -58,10 +87,34 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				stale={props.source?.freshness === "stale"}
 			/>
 
+			{!!props.readRetry && <ReadRetry {...props.readRetry} />}
+
 			{props.partial
-				? <Alert role="status">{t("investment.partial")}</Alert>
+				? tab !== "concentration" && (
+					<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 +122,98 @@ const AccountPageLoaded: FC<AccountPageLoadedProps> = (props) => {
 				/>
 			)}
 
-			<Accordion
-				classNames={{
-					chevron: classes.accordionChevron,
-					control: classes.accordionControl,
-					label: classes.accordionLabel,
-					panel: classes.accordionPanel,
-				}}
-				defaultValue={defaultValue}
-				multiple
+			<Tabs
+				classNames={{ list: classes.tabsList }}
+				keepMounted={false}
+				onChange={onTabChange}
+				value={tab}
 			>
-				{props.positionSections.map(section => (
-					<Accordion.Item key={section.kind} value={section.kind}>
-						<Accordion.Control>
-							{t(positionSectionTitleKey(section.kind))}
-						</Accordion.Control>
+				<Tabs.List aria-label={t("portfolio.sections")} mb="md">
+					<Tabs.Tab value="positions">
+						{t("portfolio.tabs.positions")}
+					</Tabs.Tab>
 
-						<Accordion.Panel>
-							<PositionSection section={section} />
-						</Accordion.Panel>
-					</Accordion.Item>
-				))}
+					{props.accountId !== "all" && (
+						<Tabs.Tab value="concentration">
+							{t("portfolio.concentration.title")}
+						</Tabs.Tab>
+					)}
 
-				<Accordion.Item value="cash">
-					<Accordion.Control>{t("portfolio.cashBalances")}</Accordion.Control>
+					<Tabs.Tab value="cash">{t("portfolio.tabs.cash")}</Tabs.Tab>
 
-					<Accordion.Panel>
-						<CurrencyCards amounts={props.portfolio.cashBalances} />
-					</Accordion.Panel>
-				</Accordion.Item>
+					<Tabs.Tab value="operations">
+						{t("portfolio.tabs.operations")}
+					</Tabs.Tab>
 
-				<Accordion.Item value="recentOperations">
-					<Accordion.Control>{t("ledger.recentTitle")}</Accordion.Control>
+					<Tabs.Tab value="events">{t("portfolio.tabs.events")}</Tabs.Tab>
 
-					<Accordion.Panel>
-						<RecentOperations operations={props.recentOperations} />
-					</Accordion.Panel>
-				</Accordion.Item>
+					<Tabs.Tab value="income">{t("portfolio.tabs.income")}</Tabs.Tab>
+				</Tabs.List>
 
-				<Accordion.Item value="recentEvents">
-					<Accordion.Control>{t("events.recentTitle")}</Accordion.Control>
-
-					<Accordion.Panel>
-						<BrokerageEventsPreview events={props.recentEvents} />
-					</Accordion.Panel>
-				</Accordion.Item>
-
-				<Accordion.Item value="incomeSummary">
-					<Accordion.Control>{t("income.summaryTitle")}</Accordion.Control>
-
-					<Accordion.Panel>
-						{!!props.incomeSummary && (
-							<IncomeSummary {...props.incomeSummary} />
+				<Tabs.Panel value="positions">
+					<Stack gap="md">
+						{props.positionSections.length > 1 && (
+							<div className={classes.positionFilter}>
+								<SegmentedControl
+									aria-label={t("portfolio.positionFilter")}
+									data={filterOptions}
+									onChange={setFilter}
+									value={activeSection?.kind}
+								/>
+							</div>
 						)}
-					</Accordion.Panel>
-				</Accordion.Item>
-			</Accordion>
+
+						{activeSection && <PositionSection section={activeSection} />}
+					</Stack>
+				</Tabs.Panel>
+
+				{props.accountId !== "all" && (
+					<Tabs.Panel value="concentration">
+						{props.concentration && (
+							<Concentration
+								currency={props.currency}
+								key={`${props.slice}-${props.currency}`}
+								model={props.concentration}
+								onCurrencyChange={props.onCurrencyChange}
+								onSliceChange={props.onSliceChange}
+								partial={!!props.partial}
+								slice={props.slice}
+							/>
+						)}
+					</Tabs.Panel>
+				)}
+
+				<Tabs.Panel value="cash">
+					<CurrencyCards amounts={props.portfolio.cashBalances} />
+				</Tabs.Panel>
+
+				<Tabs.Panel value="operations">
+					<RecentOperations
+						allAccounts={props.accountId === "all"}
+						moreLabel={t("portfolio.more")}
+						operations={props.recentOperations}
+					/>
+				</Tabs.Panel>
+
+				<Tabs.Panel value="events">
+					<BrokerageEventsPreview
+						allAccounts={props.accountId === "all"}
+						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/Concentration/Concentration.module.css

@@ -0,0 +1,111 @@
+.layout {
+	display: grid;
+	grid-template-columns: minmax(260px, 1fr) minmax(0, 1.4fr);
+	gap: var(--mantine-spacing-xl);
+	align-items: center;
+}
+
+.chart {
+	position: relative;
+	justify-self: center;
+}
+
+.pattern {
+	position: absolute;
+	width: 0;
+	height: 0;
+}
+
+.center {
+	position: absolute;
+	inset: 32%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-size: clamp(12px, 1.3vw, 17px);
+	overflow-wrap: anywhere;
+	pointer-events: none;
+}
+
+.srOnly {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+}
+
+.list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	gap: var(--mantine-spacing-sm);
+	min-height: 58px;
+	border-bottom: 1px solid var(--mantine-color-gray-2);
+}
+
+.rank {
+	display: grid;
+	place-items: center;
+	width: 28px;
+	height: 28px;
+	flex: none;
+	border-radius: 50%;
+	color: white;
+}
+
+.identity {
+	flex: 1;
+	min-width: 0;
+	overflow-wrap: anywhere;
+}
+
+.bar,
+.bar span {
+	display: block;
+	height: 4px;
+	border-radius: 4px;
+}
+
+.bar {
+	background: var(--mantine-color-gray-2);
+}
+
+.value {
+	text-align: right;
+	white-space: nowrap;
+}
+
+.other {
+	display: flex;
+	justify-content: space-between;
+	gap: var(--mantine-spacing-sm);
+	width: 100%;
+	min-height: 44px;
+	align-items: center;
+	border: 0;
+	background: var(--mantine-color-gray-0);
+	color: inherit;
+	cursor: pointer;
+	text-align: left;
+}
+
+.other:focus-visible {
+	outline: 2px solid var(--mantine-color-blue-6);
+	outline-offset: 2px;
+}
+
+@media (max-width: 700px) {
+	.layout { grid-template-columns: 1fr; }
+	.slices { max-width: 100%; overflow-x: auto; }
+	.other { flex-wrap: wrap; }
+}

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

@@ -0,0 +1,330 @@
+import { DonutChart } from "@mantine/charts";
+import {
+	Alert, Box, Group, Paper, SegmentedControl, Select, Stack,
+	Text, Title,
+} from "@mantine/core";
+import { type FC, useId, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { formatMoney } from "@/shared/lib";
+
+import type {
+	ConcentrationItem,
+	Concentration as ConcentrationModel,
+	Slice,
+} from "../../../../model/concentration";
+
+import { PositionLogo } from "../PositionLogo.view";
+import classes from "./Concentration.module.css";
+
+type Props = {
+	currency: null | string;
+	model: ConcentrationModel;
+	onCurrencyChange: (currency: null | string) => void;
+	onSliceChange: (slice: Slice) => void;
+	partial: boolean;
+	slice: Slice;
+};
+
+const sliceLabels = {
+	bonds: "portfolio.bonds",
+	issuers: "portfolio.concentration.issuers",
+	sectors: "portfolio.concentration.sectors",
+	stocks: "portfolio.stocks",
+} as const;
+
+type RowProps = {
+	color: string;
+	currency: string;
+	index: number;
+	item: ConcentrationItem;
+	logo?: ConcentrationItem["logo"];
+	name: string;
+};
+
+const colors = [
+	"#2563eb", "#18a999", "#f59e0b", "#8b5cf6", "#ef6c5b",
+	"#64748b",
+];
+
+const PERCENT = 100;
+const OTHER_START = 6;
+
+function amountFor(item: ConcentrationItem, currency: string): string {
+	return formatMoney({ currency, value: item.amount });
+}
+
+const ConcentrationRow: FC<RowProps> = props => (
+	<li className={classes.row}>
+		<span
+			aria-hidden="true"
+			className={classes.rank}
+			style={{ backgroundColor: props.color }}
+		>
+			{props.index}
+		</span>
+
+		{props.logo && <PositionLogo label={props.name} src={props.logo.src} />}
+
+		<span className={classes.identity}>
+			<span>{props.name}</span>
+
+			{props.logo?.subtitle && (
+				<Text c="dimmed" size="xs">{props.logo.subtitle}</Text>
+			)}
+
+			<span aria-hidden="true" className={classes.bar}>
+				<span style={{
+					backgroundColor: props.color,
+					width: `${props.item.chartValue * PERCENT}%`,
+				}}
+				/>
+			</span>
+		</span>
+
+		<span className={classes.value}>
+			<strong>{amountFor(props.item, props.currency)}</strong>
+
+			<Text c="dimmed" size="sm">{props.item.share}</Text>
+		</span>
+	</li>
+);
+
+type TooltipProps = {
+	active?: boolean;
+	payload?: { name?: number | string }[];
+	rows: { amount: string; label: string; share: string }[];
+};
+
+function chartCellProps(series: { name: string }, rows: ConcentrationItem[]) {
+	const index = Number(series.name);
+	const item = rows.at(index);
+
+	return {
+		stroke: "white",
+		strokeWidth: 2,
+		...((item?.unknown || (index === rows.length - 1
+			&& item?.key === "__other"))
+		&& { strokeDasharray: "3 2" }),
+	};
+}
+
+function rankLabel({ index }: { index: number; percent?: number }) {
+	return String(index + 1);
+}
+
+const ChartTooltip: FC<TooltipProps> = (props) => {
+	const row = props.rows[Number(props.payload?.[0]?.name)];
+	if (!row || !props.active) return;
+
+	return (
+		<Paper p="sm" radius="md" shadow="sm">
+			<Text fw={600} size="sm">{row.label}</Text>
+
+			<Text size="sm">{row.amount} · {row.share}</Text>
+		</Paper>
+	);
+};
+
+const Concentration: FC<Props> = (props) => {
+	const { t } = useTranslation();
+	const [expanded, setExpanded] = useState(false);
+	const otherId = useId();
+	const chartId = useId();
+	const currency = props.currency ?? "";
+
+	const rows = props.model.other
+		? [...props.model.items, props.model.other]
+		: props.model.items;
+
+	const chartData = rows.map((item, index) => ({
+		color: colors[index % colors.length] ?? colors[0] ?? "blue",
+		name: String(index),
+		value: item.chartValue,
+	}));
+
+	const chartText = [
+		props.model.top5Share && t("portfolio.concentration.top5", {
+			share: props.model.top5Share,
+		}),
+		props.model.total && formatMoney({
+			currency, value: props.model.total,
+		}),
+		...rows.map(item => `${item.label}: ${amountFor(item, currency)}, ${item.share}`),
+	].filter(Boolean).join("; ");
+
+	const slices = [
+		{ label: t("portfolio.stocks"), value: "stocks" },
+		{ label: t("portfolio.bonds"), value: "bonds" },
+		{ label: t("portfolio.concentration.sectors"), value: "sectors" },
+		{ label: t("portfolio.concentration.issuers"), value: "issuers" },
+	];
+
+	// eslint-disable-next-line frontend/readability -- Mantine callback closes over page action.
+	const selectSlice = (value: string) => props.onSliceChange(value as Slice);
+	// eslint-disable-next-line frontend/readability -- Disclosure state belongs to this view.
+	const toggleOther = () => setExpanded(value => !value);
+
+	// eslint-disable-next-line frontend/readability -- Chart callback closes over visible rows.
+	const cellProps = (series: { name: string }) => chartCellProps(series, rows);
+	const pieProps = { isAnimationActive: false, label: rankLabel };
+
+	const tooltipRows = rows.map(item => ({
+		amount: amountFor(item, currency),
+		label: item.label,
+		share: item.share,
+	}));
+
+	const tooltipProps = { content: <ChartTooltip rows={tooltipRows} /> };
+
+	const totalText = props.model.total
+		? formatMoney({ currency, value: props.model.total })
+		: "";
+
+	return (
+		<Stack gap="lg">
+			<Group align="end" justify="space-between">
+				<SegmentedControl
+					aria-label={t("portfolio.concentration.slice")}
+					className={classes.slices}
+					data={slices}
+					onChange={selectSlice}
+					value={props.slice}
+				/>
+
+				{props.model.currencies.length > 1 && (
+					<Select
+						allowDeselect={false}
+						aria-label={t("portfolio.concentration.currency")}
+						data={props.model.currencies}
+						onChange={props.onCurrencyChange}
+						value={props.currency}
+						w={130}
+					/>
+				)}
+			</Group>
+
+			{props.partial && (
+				<Alert role="status">{t("portfolio.concentration.incomplete")}</Alert>
+			)}
+
+			{props.model.empty
+				? (
+						<Stack gap="xs">
+							<Text fw={600}>{t(sliceLabels[props.slice])}
+								{props.currency && ` · ${props.currency}`}
+							</Text>
+
+							<Text>{t("portfolio.concentration.empty")}</Text>
+						</Stack>
+					)
+				: (
+						<Paper className={classes.layout} p="lg" radius="md" withBorder>
+							<Box className={classes.chart}>
+								<DonutChart
+									aria-describedby={chartId}
+									aria-label={t("portfolio.concentration.chart")}
+									cellProps={cellProps}
+									data={chartData}
+									pieProps={pieProps}
+									role="img"
+									size={260}
+									strokeWidth={24}
+									tooltipDataSource="segment"
+									tooltipProps={tooltipProps}
+								/>
+
+								<div aria-hidden="true" className={classes.center}>
+									{props.model.top5Share && (
+										<Text fw={700} size="sm">{t("portfolio.concentration.top5", {
+											share: props.model.top5Share,
+										})}
+										</Text>
+									)}
+
+									<Text fw={700}>{totalText}</Text>
+								</div>
+
+								<Text
+									className={classes.srOnly}
+									id={chartId}
+								>
+									{chartText}
+								</Text>
+							</Box>
+
+							<Stack gap="xs">
+								<Title order={3} size="md">{t("portfolio.concentration.title")}</Title>
+
+								<ol className={classes.list}>
+									{props.model.items.map((item, index) => (
+										<ConcentrationRow
+											color={colors[index % colors.length] ?? "blue"}
+											currency={currency}
+											index={index + 1}
+											item={item}
+											key={item.key}
+											logo={item.logo}
+											name={item.label}
+										/>
+									))}
+								</ol>
+
+								{props.model.other && (
+									<>
+										<button
+											aria-controls={otherId}
+											aria-expanded={expanded}
+											className={classes.other}
+											onClick={toggleOther}
+											type="button"
+										>
+											<span>{t("portfolio.concentration.other")} · {t(
+												"portfolio.concentration.otherCount",
+												{ count: props.model.other.count },
+											)}
+											</span>
+
+											<span>{amountFor(props.model.other, currency)} · {
+												props.model.other.share
+											}
+											</span>
+										</button>
+
+										<ol
+											className={classes.list}
+											hidden={!expanded}
+											id={otherId}
+											start={OTHER_START}
+										>
+											{props.model.other.entries.map((item, index) => (
+												<ConcentrationRow
+													color={colors[(index + OTHER_START) % colors.length]
+														?? "blue"}
+													currency={currency}
+													index={index + OTHER_START}
+													item={item}
+													key={item.key}
+													logo={item.logo}
+													name={item.label}
+												/>
+											))}
+										</ol>
+									</>
+								)}
+							</Stack>
+						</Paper>
+					)}
+
+			{props.model.unaccounted > 0 && (
+				<Text c="dimmed" size="sm">{t(
+					"portfolio.concentration.unaccounted",
+					{ count: props.model.unaccounted },
+				)}
+				</Text>
+			)}
+		</Stack>
+	);
+};
+
+export { Concentration };

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/PortfolioStructure/PortfolioStructure.stories.tsx

@@ -28,7 +28,7 @@ const meta = {
 		},
 	},
 	tags: ["autodocs"],
-	title: "Widgets/PortfolioStructure",
+	title: "Product/PortfolioStructure",
 } satisfies Meta<typeof PortfolioStructure>;
 
 export default meta;

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

@@ -5,20 +5,13 @@ import { useTranslation } from "react-i18next";
 
 import type { Portfolio } from "@/entities/portfolio";
 
-import { formatMoney } from "@/shared/lib";
+import { formatMoney, portfolioCategoryPresentation } from "@/shared/lib";
 
 const MIN_VISIBLE_SHARE_PERCENT = 0.01;
 
 // A cached snapshot or an older running server can predate this response field.
 type PortfolioStructureProps = { structure?: null | Portfolio["structure"] };
 
-const categoryPresentation = {
-	BOND: { color: "grape.6", label: "portfolio.bonds" },
-	CASH: { color: "green.6", label: "portfolio.structure.cash" },
-	OTHER: { color: "orange.6", label: "portfolio.structure.other" },
-	STOCK: { color: "blue.6", label: "portfolio.stocks" },
-} as const;
-
 const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
 	const { structure } = props;
 	const { t } = useTranslation();
@@ -45,7 +38,7 @@ const usePortfolioStructureVm = (props: PortfolioStructureProps) => {
 		unvalued:
 			structure?.unvaluedCategories.map(category =>
 				t("portfolio.structure.unvaluedCategory", {
-					category: t(categoryPresentation[category.type].label),
+					category: t(portfolioCategoryPresentation[category.type].label),
 					count: category.count,
 				}),
 			) ?? [],
@@ -61,7 +54,7 @@ function portfolioRows(
 	if (!selected) return [];
 
 	return selected.categories.map((category) => {
-		const presentation = categoryPresentation[category.type];
+		const presentation = portfolioCategoryPresentation[category.type];
 
 		const percentage
 			= category.sharePercent === null

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

@@ -12,11 +12,15 @@ const syntheticPosition
 		displayName: "Учебные технологии",
 		figi: null,
 		isin: null,
+		issuer: null,
 		logoName: null,
 		logoSrc: null,
 		quantity: "100",
+		returnPercent: "25",
+		returnPercentText: "+25,00 %",
 		returnText: "+5 000 ₽",
 		returnTone: "positive",
+		sector: null,
 		shareText: "20%",
 		ticker: "DEMO",
 		type: "STOCK",
@@ -73,6 +77,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 +129,8 @@ export const MissingValuation: Story
 				averagePurchasePrice: null,
 				currentValue: null,
 				displayName: "Учебная позиция без текущей оценки",
+				returnPercent: null,
+				returnPercentText: null,
 				returnText: null,
 				returnTone: undefined,
 				shareText: null,