feat(broker): per-type positions pagination with independent tables

- Add type query param to GET /accounts/:accountId/positions endpoint - Backend filters T-Bank portfolio positions by instrument type before pagination - Each instrument type (share, bond, etf, fund) has its own frontend table with independent cursor-based pagination and skeleton loading - Groups with no positions are automatically hidden - Cache key includes type for correct per-type caching - Remove centralized positions pagination state from BrokerAccountDetailPage - 94 backend tests / 112 frontend tests pass
test(frontend): update broker tests for positions hook and removal from portfolio
2026-06-18 06:02:54 +03:00 · 2026-06-17 14:50:35 +03:00 · 2026-06-17 14:47:10 +03:00 · 2026-06-17 14:46:48 +03:00 · 2026-06-17 14:46:06 +03:00 · 2026-06-17 14:45:27 +03:00
22 changed files with 1054 additions and 222 deletions
--- a/AGENTS.md
+++ b/AGENTS.md
@ -9,6 +9,7 @@ npm workspaces монорепозиторий: `apps/backend` (NestJS), `apps/fr
 - **SDD (Specification-Driven Development)**: перед значимыми изменениями сначала зафиксировать спецификацию нужного масштаба — PRD/цели, доменную модель, ADR, API-контракт, frontend/backend architecture и этапы реализации. Для небольших maintenance-правок достаточно короткого обоснования и acceptance criteria.
 - **Superpowers**: использовать релевантные Skills при старте задачи. Обычно: brainstorming для уточнения дизайна, systematic-debugging для багов, test-driven-development для feature/bugfix, writing-plans/executing-plans для крупных многошаговых работ, frontend-design для UI, requesting-code-review перед завершением крупных изменений.
 - **MCP-инструменты**: использовать MCP для анализа, дизайна, работы с API, генерации кода и проверки локального UI, когда это полезно задаче.
+- **Visual Companion**: при обсуждении дизайна UI (mockups, макеты, варианты внешнего вида) использовать visual companion в браузере.

 ## Git workflow

--- a/apps/backend/src/modules/tbank/dto/broker-position-query.dto.ts
+++ b/apps/backend/src/modules/tbank/dto/broker-position-query.dto.ts
@ -15,4 +15,9 @@ export class BrokerPositionQueryDto {
  @Min(1)
  @Max(100)
  limit?: number = 10;
+
+  @ApiPropertyOptional({ description: 'Filter by instrument type (share, bond, etf, etc.)' })
+  @IsOptional()
+  @IsString()
+  type?: string;
 }
--- a/apps/backend/src/modules/tbank/mappers/portfolio.mapper.spec.ts
+++ b/apps/backend/src/modules/tbank/mappers/portfolio.mapper.spec.ts
@ -11,7 +11,7 @@ describe('portfolio.mapper', () => {
    accessLevel: 'ACCOUNT_ACCESS_LEVEL_FULL_ACCESS',
  };

-  it('combines portfolio totals, cash, and enriched positions', () => {
+  it('combines portfolio totals and cash (positions removed)', () => {
    const result = mapBrokerPortfolio({
      account,
      portfolio: {
@ -44,11 +44,5 @@ describe('portfolio.mapper', () => {
    expect(result.totals.shares?.value).toBe(1000);
    expect(result.cash[0].value).toBe(500);
    expect(result.blockedCash[0].value).toBe(10);
-    expect(result.positions[0]).toMatchObject({
-      ticker: 'SBER',
-      name: 'Sberbank',
-      quantity: 10,
-      currentValue: { value: 2500 },
-    });
  });
 });
--- a/apps/backend/src/modules/tbank/services/broker-operation-sync.service.spec.ts
+++ b/apps/backend/src/modules/tbank/services/broker-operation-sync.service.spec.ts
@ -32,6 +32,7 @@ describe('BrokerOperationSyncService', () => {
              category: 'trade',
              description: null,
              state: 'OPERATION_STATE_EXECUTED',
+              name: null,
              instrumentUid: 'uid-1',
              figi: null,
              ticker: 'SBER',
@ -98,6 +99,7 @@ describe('BrokerOperationSyncService', () => {
            category: 'trade',
            description: null,
            state: null,
+            name: null,
            instrumentUid: null,
            figi: null,
            ticker: null,
--- a/apps/backend/src/modules/tbank/services/broker-portfolio.service.spec.ts
+++ b/apps/backend/src/modules/tbank/services/broker-portfolio.service.spec.ts
@ -22,7 +22,7 @@ describe('BrokerPortfolioService', () => {
    await expect(service.getPortfolio('missing')).rejects.toThrow(NotFoundException);
  });

-  it('fetches portfolio and positions through cache', async () => {
+  it('fetches portfolio through cache without positions', async () => {
    vi.mocked(accounts.findById).mockResolvedValue({
      id: 'acc-1',
      type: 'brokerage',
@ -60,6 +60,7 @@ describe('BrokerPortfolioService', () => {

    expect(result.data.account.id).toBe('acc-1');
    expect(result.data.cash[0].value).toBe(1000);
+    expect('positions' in result.data).toBe(false);
    expect(cache.getOrFetch).toHaveBeenCalledWith(
      'tbank:portfolio',
      ['acc-1'],
@ -68,73 +69,237 @@ describe('BrokerPortfolioService', () => {
    );
  });

-  it('returns portfolio when one instrument enrichment request fails', async () => {
-    vi.mocked(accounts.findById).mockResolvedValue({
-      id: 'acc-1',
-      type: 'brokerage',
-      name: 'Broker',
-      status: 'ACCOUNT_STATUS_OPEN',
-      openedAt: null,
-      accessLevel: null,
+  describe('getPositions', () => {
+    function mockAccount() {
+      vi.mocked(accounts.findById).mockResolvedValue({
+        id: 'acc-1',
+        type: 'brokerage',
+        name: 'Broker',
+        status: 'ACCOUNT_STATUS_OPEN',
+        openedAt: null,
+        accessLevel: null,
+      });
+    }
+
+    function mockCache() {
+      vi.mocked(cache.getOrFetch).mockImplementation(
+        async (_prefix: string, _parts: string[], fetchFn: () => Promise<unknown>) => ({
+          data: await fetchFn(),
+          fromCache: false,
+          cachedAt: null,
+        }),
+      );
+    }
+
+    it('throws 404 for missing account', async () => {
+      vi.mocked(accounts.findById).mockResolvedValue(null);
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+
+      await expect(service.getPositions('missing')).rejects.toThrow(NotFoundException);
    });
-    vi.mocked(cache.getOrFetch).mockImplementation(
-      async (_prefix: string, _parts: string[], fetchFn: () => Promise<unknown>) => ({
-        data: await fetchFn(),
-        fromCache: false,
-        cachedAt: null,
-      }),
-    );
-    vi.mocked(client.getServiceClient).mockReturnValue({
-      getPortfolio: vi.fn(),
-      getPositions: vi.fn(),
-    } as any);
-    vi.mocked(client.callUnary)
-      .mockResolvedValueOnce({
+
+    it('returns first page of positions', async () => {
+      mockAccount();
+      mockCache();
+      vi.mocked(client.getServiceClient).mockReturnValue({
+        getPortfolio: vi.fn(),
+      } as any);
+      vi.mocked(client.callUnary).mockResolvedValueOnce({
        accountId: 'acc-1',
        totalAmountPortfolio: { currency: 'rub', units: '1000', nano: 0 },
        positions: [
          {
            figi: 'figi-1',
            instrumentUid: 'uid-1',
-            quantity: { units: '1', nano: 0 },
+            positionUid: 'pos-1',
+            quantity: { units: '10', nano: 0 },
          },
          {
            figi: 'figi-2',
            instrumentUid: 'uid-2',
-            quantity: { units: '2', nano: 0 },
+            positionUid: 'pos-2',
+            quantity: { units: '20', nano: 0 },
          },
        ],
-      })
-      .mockResolvedValueOnce({
-        accountId: 'acc-1',
-        money: [],
-        blocked: [],
-        securities: [],
      });
-    vi.mocked(instruments.findByInstrumentUid)
-      .mockResolvedValueOnce({
-        uid: 'uid-1',
-        figi: 'figi-1',
-        ticker: 'AAA',
-        classCode: 'TQBR',
-        name: 'First share',
-        instrumentType: 'share',
-      })
-      .mockRejectedValueOnce(new Error('instrument lookup failed'));

-    const service = new BrokerPortfolioService(accounts, instruments, client, cache);
-    const result = await service.getPortfolio('acc-1');
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+      const result = await service.getPositions('acc-1', undefined, 1);

-    expect(result.data.positions).toHaveLength(2);
-    expect(result.data.positions[0]).toMatchObject({
-      instrumentUid: 'uid-1',
-      ticker: 'AAA',
-      name: 'First share',
+      expect(result.data.accountId).toBe('acc-1');
+      expect(result.data.items).toHaveLength(1);
+      expect(result.data.items[0].positionUid).toBe('pos-1');
+      expect(result.data.hasNext).toBe(true);
+      expect(result.data.nextCursor).toBe('pos-1');
    });
-    expect(result.data.positions[1]).toMatchObject({
-      instrumentUid: 'uid-2',
-      ticker: null,
-      name: null,
+
+    it('paginates using cursor', async () => {
+      mockAccount();
+      mockCache();
+      vi.mocked(client.getServiceClient).mockReturnValue({
+        getPortfolio: vi.fn(),
+      } as any);
+      vi.mocked(client.callUnary).mockResolvedValueOnce({
+        accountId: 'acc-1',
+        totalAmountPortfolio: { currency: 'rub', units: '1000', nano: 0 },
+        positions: [
+          {
+            figi: 'f1',
+            instrumentUid: 'u1',
+            positionUid: 'p1',
+            quantity: { units: '10', nano: 0 },
+          },
+          {
+            figi: 'f2',
+            instrumentUid: 'u2',
+            positionUid: 'p2',
+            quantity: { units: '20', nano: 0 },
+          },
+          {
+            figi: 'f3',
+            instrumentUid: 'u3',
+            positionUid: 'p3',
+            quantity: { units: '30', nano: 0 },
+          },
+        ],
+      });
+
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+      const result = await service.getPositions('acc-1', 'p1', 1);
+
+      expect(result.data.items).toHaveLength(1);
+      expect(result.data.items[0].positionUid).toBe('p2');
+      expect(result.data.nextCursor).toBe('p2');
+      expect(result.data.hasNext).toBe(true);
+    });
+
+    it('returns last page with hasNext=false', async () => {
+      mockAccount();
+      mockCache();
+      vi.mocked(client.getServiceClient).mockReturnValue({
+        getPortfolio: vi.fn(),
+      } as any);
+      vi.mocked(client.callUnary).mockResolvedValueOnce({
+        accountId: 'acc-1',
+        totalAmountPortfolio: { currency: 'rub', units: '1000', nano: 0 },
+        positions: [
+          {
+            figi: 'f1',
+            instrumentUid: 'u1',
+            positionUid: 'p1',
+            quantity: { units: '10', nano: 0 },
+          },
+        ],
+      });
+
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+      const result = await service.getPositions('acc-1', undefined, 10);
+
+      expect(result.data.items).toHaveLength(1);
+      expect(result.data.hasNext).toBe(false);
+      expect(result.data.nextCursor).toBeNull();
+    });
+
+    it('caches positions with cursor/limit/type in key and tbankPositionsTtl', async () => {
+      mockAccount();
+      mockCache();
+      vi.mocked(client.getServiceClient).mockReturnValue({
+        getPortfolio: vi.fn(),
+      } as any);
+      vi.mocked(client.callUnary).mockResolvedValueOnce({
+        accountId: 'acc-1',
+        totalAmountPortfolio: { currency: 'rub', units: '1000', nano: 0 },
+        positions: [],
+      });
+
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+      await service.getPositions('acc-1', 'some-cursor', 5);
+
+      expect(cache.getOrFetch).toHaveBeenCalledWith(
+        'tbank:positions',
+        ['acc-1', 'some-cursor', '5', ''],
+        expect.any(Function),
+        'tbankPositionsTtl',
+      );
+    });
+
+    it('filters by instrument type and caches with type in key', async () => {
+      mockAccount();
+      mockCache();
+      vi.mocked(client.getServiceClient).mockReturnValue({
+        getPortfolio: vi.fn(),
+      } as any);
+      vi.mocked(client.callUnary).mockResolvedValueOnce({
+        accountId: 'acc-1',
+        totalAmountPortfolio: { currency: 'rub', units: '5000', nano: 0 },
+        positions: [
+          {
+            figi: 'f1',
+            instrumentUid: 'u1',
+            positionUid: 'p1',
+            instrumentType: 'share',
+            ticker: 'SBER',
+            quantity: { units: '10', nano: 0 },
+          },
+          {
+            figi: 'f2',
+            instrumentUid: 'u2',
+            positionUid: 'p2',
+            instrumentType: 'bond',
+            ticker: 'SU26238RMFS5',
+            quantity: { units: '5', nano: 0 },
+          },
+          {
+            figi: 'f3',
+            instrumentUid: 'u3',
+            positionUid: 'p3',
+            instrumentType: 'share',
+            ticker: 'GAZP',
+            quantity: { units: '3', nano: 0 },
+          },
+        ],
+      });
+
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+      const result = await service.getPositions('acc-1', undefined, 10, 'share');
+
+      expect(result.data.items).toHaveLength(2);
+      expect(result.data.items.map((i) => i.ticker)).toEqual(['SBER', 'GAZP']);
+      expect(cache.getOrFetch).toHaveBeenCalledWith(
+        'tbank:positions',
+        ['acc-1', '', '10', 'share'],
+        expect.any(Function),
+        'tbankPositionsTtl',
+      );
+    });
+
+    it('returns empty items when type filter matches nothing', async () => {
+      mockAccount();
+      mockCache();
+      vi.mocked(client.getServiceClient).mockReturnValue({
+        getPortfolio: vi.fn(),
+      } as any);
+      vi.mocked(client.callUnary).mockResolvedValueOnce({
+        accountId: 'acc-1',
+        totalAmountPortfolio: { currency: 'rub', units: '5000', nano: 0 },
+        positions: [
+          {
+            figi: 'f1',
+            instrumentUid: 'u1',
+            positionUid: 'p1',
+            instrumentType: 'share',
+            ticker: 'SBER',
+            quantity: { units: '10', nano: 0 },
+          },
+        ],
+      });
+
+      const service = new BrokerPortfolioService(accounts, instruments, client, cache);
+      const result = await service.getPositions('acc-1', undefined, 10, 'etf');
+
+      expect(result.data.items).toHaveLength(0);
+      expect(result.data.hasNext).toBe(false);
+      expect(result.data.nextCursor).toBeNull();
    });
  });
 });
--- a/apps/backend/src/modules/tbank/services/broker-portfolio.service.ts
+++ b/apps/backend/src/modules/tbank/services/broker-portfolio.service.ts
@ -66,6 +66,7 @@ export class BrokerPortfolioService {
    accountId: string,
    cursor?: string,
    limit = 10,
+    type?: string,
  ): Promise<{
    data: BrokerPositionsPage;
    meta: { fromCache: boolean; cachedAt: string | null };
@ -75,7 +76,7 @@ export class BrokerPortfolioService {

    const result = await this.cacheService.getOrFetch(
      TBANK_CACHE_KEYS.positions,
-      [accountId, cursor ?? '', String(limit)],
+      [accountId, cursor ?? '', String(limit), type ?? ''],
      async () => {
        const operationsClient = this.tbankClient.getServiceClient('OperationsService') as any;
        const portfolio = await this.tbankClient.callUnary<
@ -86,11 +87,18 @@ export class BrokerPortfolioService {
          currency: 'RUB',
        });

-        const instrumentMap = await this.buildInstrumentMap(portfolio);
+        const filteredPositions = type
+          ? (portfolio.positions ?? []).filter(
+              (p) => p.instrumentType?.toLowerCase() === type.toLowerCase(),
+            )
+          : portfolio.positions;
+
+        const filteredPortfolio = { ...portfolio, positions: filteredPositions };
+        const instrumentMap = await this.buildInstrumentMap(filteredPortfolio);

        return mapBrokerPositionsPage({
          accountId,
-          portfolio,
+          portfolio: filteredPortfolio,
          instruments: instrumentMap,
          cursor,
          limit,
--- a/apps/backend/src/modules/tbank/tbank.config.spec.ts
+++ b/apps/backend/src/modules/tbank/tbank.config.spec.ts
@ -21,6 +21,7 @@ describe('T-Bank configuration', () => {
    expect(config.tbank.baseUrl).toBe('invest-public-api.tbank.ru:443');
    expect(config.tbank.rateLimitPerSecond).toBe(5);
    expect(config.cache.tbankPortfolioTtl).toBe(60);
+    expect(config.cache.tbankPositionsTtl).toBe(60);
  });

  it('reads T-Bank token and TTL overrides from environment', () => {
@ -29,6 +30,7 @@ describe('T-Bank configuration', () => {
    process.env.T_BANK_CA_CERT_PATH = '/tmp/tbank-root-ca.pem';
    process.env.T_BANK_RATE_LIMIT_PER_SECOND = '2';
    process.env.CACHE_TBANK_ACCOUNTS_TTL = '120';
+    process.env.CACHE_TBANK_POSITIONS_TTL = '45';

    const config = configuration();

@ -37,5 +39,6 @@ describe('T-Bank configuration', () => {
    expect(config.tbank.caCertPath).toBe('/tmp/tbank-root-ca.pem');
    expect(config.tbank.rateLimitPerSecond).toBe(2);
    expect(config.cache.tbankAccountsTtl).toBe(120);
+    expect(config.cache.tbankPositionsTtl).toBe(45);
  });
 });
--- a/apps/backend/src/modules/tbank/tbank.controller.ts
+++ b/apps/backend/src/modules/tbank/tbank.controller.ts
@ -56,6 +56,7 @@ export class TBankController {
      accountId,
      query.cursor,
      query.limit,
+      query.type,
    );
    return new ApiResponse(result.data, result.meta.fromCache, result.meta.cachedAt);
  }
--- a/apps/frontend/package.json
+++ b/apps/frontend/package.json
@ -21,18 +21,18 @@
    "react-router-dom": "^6.20.0"
  },
  "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.0.0",
-    "@typescript-eslint/parser": "^7.0.0",
-    "eslint": "^8.0.0",
-    "eslint-plugin-react": "^7.34.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
    "@testing-library/jest-dom": "^6.9.1",
    "@testing-library/react": "^16.3.2",
    "@testing-library/user-event": "^14.6.1",
    "@types/node": "^25.9.3",
    "@types/react": "^18.3.0",
    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
    "jsdom": "^29.1.1",
    "msw": "^2.14.6",
    "openapi-typescript": "^7.0.0",
--- a/apps/frontend/src/api/broker.test.ts
+++ b/apps/frontend/src/api/broker.test.ts
@ -1,5 +1,5 @@
 import { afterEach, describe, expect, it, vi } from 'vitest';
-import { getBrokerOperations } from './broker';
+import { getBrokerOperations, getBrokerPositions } from './broker';

 describe('broker api', () => {
  afterEach(() => {
@ -24,4 +24,23 @@ describe('broker api', () => {
      expect.any(Object),
    );
  });
+
+  it('serializes positions query parameters', async () => {
+    vi.spyOn(globalThis, 'fetch').mockResolvedValue({
+      ok: true,
+      json: async () => ({
+        data: {
+          data: { accountId: 'acc-1', items: [], nextCursor: null, hasNext: false, asOf: 'now' },
+          meta: { fromCache: false, cachedAt: null },
+        },
+      }),
+    } as Response);
+
+    await getBrokerPositions('acc-1', { cursor: 'pos-1', limit: 5 });
+
+    expect(fetch).toHaveBeenCalledWith(
+      expect.stringContaining('/api/v1/broker/accounts/acc-1/positions?cursor=pos-1&limit=5'),
+      expect.any(Object),
+    );
+  });
 });
--- a/apps/frontend/src/api/broker.ts
+++ b/apps/frontend/src/api/broker.ts
@ -4,6 +4,7 @@ import type {
  BrokerAccount,
  BrokerOperationsPage,
  BrokerPortfolio,
+  BrokerPositionsPage,
 } from './responses';

 export type BrokerOperationQuery = {
@ -49,3 +50,17 @@ export function getBrokerOperations(
    },
  );
 }
+
+export function getBrokerPositions(
+  accountId: string,
+  query: { cursor?: string; limit?: number; type?: string } = {},
+): Promise<{ data: BrokerPositionsPage; meta: ApiResponseMeta }> {
+  return request<BrokerPositionsPage>(
+    `/api/v1/broker/accounts/${encodeURIComponent(accountId)}/positions`,
+    {
+      cursor: query.cursor,
+      limit: query.limit ? String(query.limit) : undefined,
+      type: query.type,
+    },
+  );
+}
--- a/apps/frontend/src/api/responses.ts
+++ b/apps/frontend/src/api/responses.ts
@ -299,7 +299,6 @@ export interface BrokerPortfolio {
  };
  cash: BrokerMoney[];
  blockedCash: BrokerMoney[];
-  positions: BrokerPosition[];
  asOf: string;
 }

@ -314,6 +313,7 @@ export interface BrokerOperation {
  type: string;
  category: BrokerOperationCategory;
  description: string | null;
+  name: string | null;
  state: string | null;
  instrumentUid: string | null;
  figi: string | null;
@ -336,3 +336,11 @@ export interface BrokerOperationsPage {
  hasNext: boolean;
  asOf: string;
 }
+
+export interface BrokerPositionsPage {
+  accountId: string;
+  items: BrokerPosition[];
+  nextCursor: string | null;
+  hasNext: boolean;
+  asOf: string;
+}
--- a/apps/frontend/src/components/SkeletonBlock.tsx
+++ b/apps/frontend/src/components/SkeletonBlock.tsx
@ -0,0 +1,20 @@
+export function SkeletonBlock({
+  width,
+  height,
+  borderRadius = 4,
+}: {
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: number;
+}) {
+  return (
+    <div
+      className="skeleton"
+      style={{
+        width: width ?? '100%',
+        height: height ?? 16,
+        borderRadius,
+      }}
+    />
+  );
+}
--- a/apps/frontend/src/components/TableSkeleton.tsx
+++ b/apps/frontend/src/components/TableSkeleton.tsx
@ -0,0 +1,25 @@
+import { SkeletonBlock } from './SkeletonBlock';
+
+const tdStyle = {
+  borderBottom: '1px solid #eeeeee',
+  padding: '10px 8px',
+  verticalAlign: 'top',
+} satisfies React.CSSProperties;
+
+type Column = { width: string };
+
+export function TableSkeleton({ rows = 5, columns }: { rows?: number; columns: Column[] }) {
+  return (
+    <tbody>
+      {Array.from({ length: rows }).map((_, i) => (
+        <tr key={i}>
+          {columns.map((col, j) => (
+            <td key={j} style={tdStyle}>
+              <SkeletonBlock height={12} width={col.width} />
+            </td>
+          ))}
+        </tr>
+      ))}
+    </tbody>
+  );
+}
--- a/apps/frontend/src/hooks/useBrokerPositions.ts
+++ b/apps/frontend/src/hooks/useBrokerPositions.ts
@ -0,0 +1,18 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query';
+import { getBrokerPositions } from '../api/broker';
+import type { BrokerPositionsPage } from '../api/responses';
+
+export function useBrokerPositions(
+  accountId: string | undefined,
+  query: { cursor?: string; limit?: number; type?: string } = {},
+) {
+  return useQuery<BrokerPositionsPage>({
+    queryKey: ['broker', 'positions', accountId, query],
+    enabled: Boolean(accountId),
+    queryFn: async () => (await getBrokerPositions(accountId!, query)).data,
+    staleTime: 60_000,
+    retry: 2,
+    placeholderData: keepPreviousData,
+    refetchOnWindowFocus: false,
+  });
+}
--- a/apps/frontend/src/pages/broker/BrokerAccountDetailPage.tsx
+++ b/apps/frontend/src/pages/broker/BrokerAccountDetailPage.tsx
@ -5,10 +5,10 @@ import { useBrokerOperations } from '../../hooks/useBrokerOperations';
 import { useBrokerPortfolio } from '../../hooks/useBrokerPortfolio';
 import { BrokerOperationsTable } from './BrokerOperationsTable';
 import { BrokerPositionsSection } from './BrokerPositionsSection';
+import { SkeletonBlock } from '../../components/SkeletonBlock';

 function formatMoney(value: BrokerMoney | null | undefined) {
  if (!value) return '-';
-
  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: value.currency || 'RUB',
@ -23,7 +23,40 @@ export function BrokerAccountDetailPage() {
  const portfolio = useBrokerPortfolio(accountId);
  const operations = useBrokerOperations(accountId, { limit: 10, cursor: operationCursor });

-  if (portfolio.isLoading) return <p>Загрузка портфеля...</p>;
+  if (portfolio.isLoading) {
+    return (
+      <div style={{ display: 'grid', gap: 24 }}>
+        <div style={{ display: 'grid', gap: 12 }}>
+          <SkeletonBlock height={32} width="60%" />
+          <SkeletonBlock height={24} width="40%" />
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
+            gap: 12,
+          }}
+        >
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              style={{
+                padding: 16,
+                background: 'var(--color-surface)',
+                border: '1px solid #e0e0e0',
+                borderRadius: 8,
+              }}
+            >
+              <SkeletonBlock height={14} width="40%" />
+              <div style={{ height: 8 }} />
+              <SkeletonBlock height={20} width="60%" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
  if (portfolio.error || !portfolio.data) {
    return <p style={{ color: 'var(--color-negative)' }}>Не удалось загрузить портфель</p>;
  }
@ -31,14 +64,12 @@ export function BrokerAccountDetailPage() {
  function handleNextOperationsPage() {
    const nextCursor = operations.data?.nextCursor;
    if (!nextCursor || !operations.data?.hasNext) return;
-
    setOperationCursorStack((previous) => [...previous, operationCursor]);
    setOperationCursor(nextCursor);
  }

  function handlePreviousOperationsPage() {
    if (operationCursorStack.length === 0) return;
-
    const nextStack = operationCursorStack.slice(0, -1);
    const previousCursor = operationCursorStack[operationCursorStack.length - 1];
    setOperationCursorStack(nextStack);
@ -87,7 +118,7 @@ export function BrokerAccountDetailPage() {
        ))}
      </section>

-      <BrokerPositionsSection positions={portfolio.data.positions} />
+      <BrokerPositionsSection accountId={accountId!} />

      <BrokerOperationsTable
        isLoading={operations.isLoading}
--- a/apps/frontend/src/pages/broker/BrokerAccountsPage.tsx
+++ b/apps/frontend/src/pages/broker/BrokerAccountsPage.tsx
@ -1,5 +1,6 @@
 import { Link } from 'react-router-dom';
 import { useBrokerAccounts } from '../../hooks/useBrokerAccounts';
+import { SkeletonBlock } from '../../components/SkeletonBlock';

 const cardStyle = {
  display: 'block',
@ -15,7 +16,43 @@ const cardStyle = {
 export function BrokerAccountsPage() {
  const { data: accounts, isLoading, error } = useBrokerAccounts();

-  if (isLoading) return <p>Загрузка брокерских счетов...</p>;
+  if (isLoading) {
+    return (
+      <div>
+        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 20 }}>
+          <h1 style={{ fontSize: 28, lineHeight: 1.2 }}>Брокерские счета</h1>
+        </div>
+        <div
+          style={{
+            display: 'grid',
+            gap: 16,
+            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
+          }}
+        >
+          {[1, 2, 3].map((i) => (
+            <div
+              key={i}
+              style={{
+                padding: 20,
+                background: 'var(--color-surface)',
+                border: '1px solid #e0e0e0',
+                borderRadius: 8,
+                boxShadow: 'var(--shadow)',
+              }}
+            >
+              <SkeletonBlock height={20} width="60%" />
+              <div style={{ height: 10 }} />
+              <SkeletonBlock height={12} width="40%" />
+              <div style={{ height: 6 }} />
+              <SkeletonBlock height={12} width="30%" />
+              <div style={{ height: 6 }} />
+              <SkeletonBlock height={12} width="50%" />
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
  if (error) return <p style={{ color: 'var(--color-negative)' }}>Не удалось загрузить счета</p>;

  return (
--- a/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
+++ b/apps/frontend/src/pages/broker/BrokerOperationsTable.tsx
@ -6,6 +6,7 @@ import {
  getBrokerOperationTypeLabel,
  type BrokerOperationImpact,
 } from './brokerDisplay';
+import { TableSkeleton } from '../../components/TableSkeleton';

 const tableStyle = {
  width: '100%',
@ -50,18 +51,28 @@ function moneyColor(impact: BrokerOperationImpact): string {
 }

 function OperationInstrument({ operation }: { operation: BrokerOperation }) {
-  const label = operation.ticker || operation.description || '-';
+  const ticker = operation.ticker || operation.description || '-';
  const path = getBrokerInstrumentPath({
    ticker: operation.ticker,
    instrumentType: operation.instrumentType,
    classCode: operation.classCode,
  });
+  const name = operation.name || operation.description;

-  if (!path || label === '-') {
-    return <span>{label}</span>;
-  }
+  if (!path && !name) return <span>-</span>;
+  if (!path) return <span>{name}</span>;
+  if (!ticker || ticker === '-') return <Link to={path}>{name}</Link>;

-  return <Link to={path}>{label}</Link>;
+  return (
+    <div style={{ display: 'grid', gap: 2 }}>
+      <Link to={path} style={{ fontWeight: 700 }}>
+        {ticker}
+      </Link>
+      {name && name !== ticker && (
+        <span style={{ color: 'var(--color-text-secondary)', fontSize: 12 }}>{name}</span>
+      )}
+    </div>
+  );
 }

 const pagButtonStyle = {
@ -145,7 +156,30 @@ export function BrokerOperationsTable({
      </div>

      {isLoading ? (
-        <p>Загрузка операций...</p>
+        <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
+          <table style={tableStyle}>
+            <thead>
+              <tr>
+                <th align="left" style={thStyle}>
+                  Дата
+                </th>
+                <th align="left" style={thStyle}>
+                  Тип
+                </th>
+                <th align="left" style={thStyle}>
+                  Инструмент
+                </th>
+                <th align="right" style={thStyle}>
+                  Сумма
+                </th>
+              </tr>
+            </thead>
+            <TableSkeleton
+              rows={5}
+              columns={[{ width: '35%' }, { width: '30%' }, { width: '40%' }, { width: '25%' }]}
+            />
+          </table>
+        </div>
      ) : operations.length === 0 ? (
        <p style={{ color: 'var(--color-text-secondary)' }}>Операций за выбранный период нет</p>
      ) : (
--- a/apps/frontend/src/pages/broker/BrokerPages.test.tsx
+++ b/apps/frontend/src/pages/broker/BrokerPages.test.tsx
@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { type ReactElement } from 'react';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
@ -7,6 +7,8 @@ import { describe, expect, it, vi } from 'vitest';
 import * as accountHook from '../../hooks/useBrokerAccounts';
 import * as operationsHook from '../../hooks/useBrokerOperations';
 import * as portfolioHook from '../../hooks/useBrokerPortfolio';
+import * as positionsHook from '../../hooks/useBrokerPositions';
+import type { BrokerPosition } from '../../api/responses';
 import { BrokerAccountDetailPage } from './BrokerAccountDetailPage';
 import { BrokerAccountsPage } from './BrokerAccountsPage';

@ -20,6 +22,45 @@ function renderWithClient(ui: ReactElement, initialEntries = ['/broker']) {
  );
 }

+function createPosition(input: Partial<BrokerPosition>): BrokerPosition {
+  return {
+    figi: null,
+    instrumentUid: null,
+    positionUid: null,
+    ticker: null,
+    classCode: null,
+    instrumentType: null,
+    name: null,
+    quantity: null,
+    blockedLots: null,
+    currentPrice: null,
+    currentValue: null,
+    averagePositionPrice: null,
+    expectedYieldPercent: null,
+    dailyYield: null,
+    ...input,
+  };
+}
+
+/** Spy on useBrokerPositions and return only positions matching query.type . */
+function mockUseBrokerPositions(...positions: BrokerPosition[]) {
+  return vi.spyOn(positionsHook, 'useBrokerPositions').mockImplementation((_accountId, query) => {
+    const type = query.type?.toLowerCase();
+    const filtered = type ? positions.filter((p) => p.instrumentType?.toLowerCase() === type) : [];
+    return {
+      data: {
+        accountId: 'acc-1',
+        items: filtered,
+        nextCursor: null,
+        hasNext: false,
+        asOf: '2026-06-17T00:00:00.000Z',
+      },
+      isLoading: false,
+      error: null,
+    } as any;
+  });
+}
+
 describe('Broker pages', () => {
  it('renders broker and IIS accounts', () => {
    vi.spyOn(accountHook, 'useBrokerAccounts').mockReturnValue({
@ -66,24 +107,6 @@ describe('Broker pages', () => {
        yields: { expectedPercent: 5, daily: null, dailyPercent: null },
        cash: [{ currency: 'RUB', units: '100', nano: 0, value: 100 }],
        blockedCash: [],
-        positions: [
-          {
-            figi: null,
-            instrumentUid: 'uid-1',
-            positionUid: null,
-            ticker: 'SBER',
-            classCode: 'TQBR',
-            instrumentType: 'share',
-            name: 'Sberbank',
-            quantity: 10,
-            blockedLots: null,
-            currentPrice: null,
-            currentValue: { currency: 'RUB', units: '1000', nano: 0, value: 1000 },
-            averagePositionPrice: null,
-            expectedYieldPercent: null,
-            dailyYield: null,
-          },
-        ],
        asOf: '2026-06-16T00:00:00.000Z',
      },
      isLoading: false,
@ -124,6 +147,17 @@ describe('Broker pages', () => {
      isLoading: false,
      error: null,
    } as any);
+    mockUseBrokerPositions(
+      createPosition({
+        instrumentUid: 'uid-1',
+        ticker: 'SBER',
+        classCode: 'TQBR',
+        instrumentType: 'share',
+        name: 'Sberbank',
+        quantity: 10,
+        currentValue: { currency: 'RUB', units: '1000', nano: 0, value: 1000 },
+      }),
+    );

    renderWithClient(
      <Routes>
@ -151,40 +185,6 @@ describe('Broker pages', () => {
        yields: { expectedPercent: 5, daily: null, dailyPercent: null },
        cash: [],
        blockedCash: [],
-        positions: [
-          {
-            figi: null,
-            instrumentUid: 'share-uid',
-            positionUid: null,
-            ticker: 'SBER',
-            classCode: 'TQBR',
-            instrumentType: 'share',
-            name: 'Sberbank',
-            quantity: 10,
-            blockedLots: null,
-            currentPrice: { currency: 'RUB', units: '250', nano: 0, value: 250 },
-            currentValue: { currency: 'RUB', units: '2500', nano: 0, value: 2500 },
-            averagePositionPrice: null,
-            expectedYieldPercent: 20,
-            dailyYield: null,
-          },
-          {
-            figi: null,
-            instrumentUid: 'bond-uid',
-            positionUid: null,
-            ticker: 'SU26238RMFS5',
-            classCode: 'TQOB',
-            instrumentType: 'bond',
-            name: 'ОФЗ 26238',
-            quantity: 2,
-            blockedLots: null,
-            currentPrice: { currency: 'RUB', units: '900', nano: 0, value: 900 },
-            currentValue: { currency: 'RUB', units: '1800', nano: 0, value: 1800 },
-            averagePositionPrice: null,
-            expectedYieldPercent: 10,
-            dailyYield: null,
-          },
-        ],
        asOf: '2026-06-17T00:00:00.000Z',
      },
      isLoading: false,
@ -201,6 +201,30 @@ describe('Broker pages', () => {
      isLoading: false,
      error: null,
    } as any);
+    mockUseBrokerPositions(
+      createPosition({
+        instrumentUid: 'share-uid',
+        ticker: 'SBER',
+        classCode: 'TQBR',
+        instrumentType: 'share',
+        name: 'Sberbank',
+        quantity: 10,
+        currentPrice: { currency: 'RUB', units: '250', nano: 0, value: 250 },
+        currentValue: { currency: 'RUB', units: '2500', nano: 0, value: 2500 },
+        expectedYieldPercent: 20,
+      }),
+      createPosition({
+        instrumentUid: 'bond-uid',
+        ticker: 'SU26238RMFS5',
+        classCode: 'TQOB',
+        instrumentType: 'bond',
+        name: 'ОФЗ 26238',
+        quantity: 2,
+        currentPrice: { currency: 'RUB', units: '900', nano: 0, value: 900 },
+        currentValue: { currency: 'RUB', units: '1800', nano: 0, value: 1800 },
+        expectedYieldPercent: 10,
+      }),
+    );

    renderWithClient(
      <Routes>
@ -237,7 +261,6 @@ describe('Broker pages', () => {
        yields: { expectedPercent: null, daily: null, dailyPercent: null },
        cash: [],
        blockedCash: [],
-        positions: [],
        asOf: '2026-06-17T00:00:00.000Z',
      },
      isLoading: false,
@ -301,6 +324,7 @@ describe('Broker pages', () => {
      isLoading: false,
      error: null,
    } as any);
+    mockUseBrokerPositions();

    renderWithClient(
      <Routes>
@ -334,7 +358,6 @@ describe('Broker pages', () => {
        yields: { expectedPercent: null, daily: null, dailyPercent: null },
        cash: [],
        blockedCash: [],
-        positions: [],
        asOf: '2026-06-17T00:00:00.000Z',
      },
      isLoading: false,
@ -411,6 +434,7 @@ describe('Broker pages', () => {
          error: null,
        }) as any,
    );
+    mockUseBrokerPositions();

    renderWithClient(
      <Routes>
@ -421,9 +445,10 @@ describe('Broker pages', () => {

    expect(operationsSpy).toHaveBeenLastCalledWith('acc-1', { limit: 10, cursor: undefined });

-    // Find pagination buttons by their text content (← and →)
-    const nextButton = screen.getByRole('button', { name: '→' });
-    const prevButton = screen.getByRole('button', { name: '←' });
+    const operationsSection = screen.getByRole('heading', { name: 'Операции' }).closest('section')!;
+    const withinOperations = within(operationsSection);
+    const nextButton = withinOperations.getByRole('button', { name: '→' });
+    const prevButton = withinOperations.getByRole('button', { name: '←' });
    expect(prevButton).toBeDisabled();
    expect(nextButton).not.toBeDisabled();

@ -434,12 +459,11 @@ describe('Broker pages', () => {
      cursor: 'cursor-page-2',
    });

-    // Page number is shown as just a number (without "Страница" label)
-    expect(screen.getByText('2')).toBeInTheDocument();
+    expect(withinOperations.getByText('2')).toBeInTheDocument();

-    await user.click(screen.getByRole('button', { name: '←' }));
+    await user.click(prevButton);

    expect(operationsSpy).toHaveBeenLastCalledWith('acc-1', { limit: 10, cursor: undefined });
-    expect(screen.getByText('1')).toBeInTheDocument();
+    expect(withinOperations.getByText('1')).toBeInTheDocument();
  });
 });
--- a/apps/frontend/src/pages/broker/BrokerPositionsSection.tsx
+++ b/apps/frontend/src/pages/broker/BrokerPositionsSection.tsx
@ -1,18 +1,25 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 import type { BrokerMoney, BrokerPosition } from '../../api/responses';
-import { getBrokerInstrumentPath, getBrokerPositionGroup } from './brokerDisplay';
+import { getBrokerInstrumentPath } from './brokerDisplay';
+import { TableSkeleton } from '../../components/TableSkeleton';
+import { useBrokerPositions } from '../../hooks/useBrokerPositions';

 type BrokerPositionGroupConfig = {
-  key: 'shares' | 'bonds' | 'other';
+  key: string;
+  type?: string;
  title: string;
 };

 const GROUPS: BrokerPositionGroupConfig[] = [
-  { key: 'shares', title: 'Акции' },
-  { key: 'bonds', title: 'Облигации' },
-  { key: 'other', title: 'Другие инструменты' },
+  { key: 'shares', type: 'share', title: 'Акции' },
+  { key: 'bonds', type: 'bond', title: 'Облигации' },
+  { key: 'etf', type: 'etf', title: 'ETF' },
+  { key: 'fund', type: 'fund', title: 'Фонды' },
 ];

+const KNOWN_TYPES = new Set(GROUPS.map((g) => g.type).filter(Boolean));
+
 const tableStyle = {
  width: '100%',
  borderCollapse: 'collapse',
@ -32,9 +39,26 @@ const tdStyle = {
  verticalAlign: 'top',
 } satisfies React.CSSProperties;

+const pagButtonStyle = {
+  padding: '6px 14px',
+  borderRadius: 6,
+  border: '1px solid #e0e0e0',
+  background: 'var(--color-surface)',
+  color: 'var(--color-text)',
+  fontSize: 14,
+  fontWeight: 600,
+  cursor: 'pointer',
+  lineHeight: 1.4,
+} satisfies React.CSSProperties;
+
+const pagButtonDisabledStyle = {
+  ...pagButtonStyle,
+  opacity: 0.35,
+  cursor: 'not-allowed',
+} satisfies React.CSSProperties;
+
 function formatMoney(value: BrokerMoney | null | undefined) {
  if (!value) return '-';
-
  return new Intl.NumberFormat('ru-RU', {
    style: 'currency',
    currency: value.currency || 'RUB',
@ -65,87 +89,199 @@ function PositionTicker({ position }: { position: BrokerPosition }) {
  );
 }

-function PositionTable({ title, positions }: { title: string; positions: BrokerPosition[] }) {
-  return (
-    <section>
-      <h3 style={{ fontSize: 18, marginBottom: 10 }}>{title}</h3>
-      <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
-        <table aria-label={`Брокерские позиции: ${title}`} style={tableStyle}>
-          <thead>
-            <tr>
-              <th align="left" style={thStyle}>
-                Тикер
-              </th>
-              <th align="left" style={thStyle}>
-                Название
-              </th>
-              <th align="right" style={thStyle}>
-                Количество
-              </th>
-              <th align="right" style={thStyle}>
-                Цена
-              </th>
-              <th align="right" style={thStyle}>
-                Стоимость
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {positions.map((position) => (
-              <tr
-                key={
-                  position.positionUid || position.instrumentUid || position.ticker || position.figi
-                }
-              >
-                <td style={tdStyle}>
-                  <PositionTicker position={position} />
-                </td>
-                <td style={tdStyle}>
-                  <span style={{ color: 'var(--color-text-secondary)' }}>
-                    {position.name || '-'}
-                  </span>
-                </td>
-                <td align="right" style={tdStyle}>
-                  {formatQuantity(position.quantity)}
-                </td>
-                <td align="right" style={tdStyle}>
-                  {formatMoney(position.currentPrice)}
-                </td>
-                <td align="right" style={tdStyle}>
-                  {formatMoney(position.currentValue)}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  );
-}
+function PositionGroupTable({
+  accountId,
+  group,
+}: {
+  accountId: string;
+  group: BrokerPositionGroupConfig;
+}) {
+  const [cursorStack, setCursorStack] = useState<Array<string | undefined>>([]);
+  const [cursor, setCursor] = useState<string | undefined>(undefined);

-export function BrokerPositionsSection({ positions }: { positions: BrokerPosition[] }) {
-  const grouped = GROUPS.map((group) => ({
-    ...group,
-    positions: positions.filter((position) => getBrokerPositionGroup(position) === group.key),
-  })).filter((group) => group.positions.length > 0);
+  const query = group.type ? { type: group.type, limit: 10, cursor } : { limit: 100, cursor };
+  const { data: page, isLoading } = useBrokerPositions(accountId, query);

-  if (grouped.length === 0) {
-    return (
-      <section>
-        <h2 style={{ fontSize: 20, marginBottom: 12 }}>Позиции</h2>
-        <p style={{ color: 'var(--color-text-secondary)' }}>В портфеле нет позиций</p>
-      </section>
-    );
+  const rawPositions = page?.items ?? [];
+  const positions = group.type
+    ? rawPositions
+    : rawPositions.filter(
+        (p) => p.instrumentType && !KNOWN_TYPES.has(p.instrumentType.toLowerCase()),
+      );
+
+  const pageNumber = cursorStack.length + 1;
+  const canGoBack = cursorStack.length > 0;
+  const canGoForward = Boolean(page?.hasNext && page.nextCursor && !!group.type);
+
+  function handleNext() {
+    const nextCursor = page?.nextCursor;
+    if (!nextCursor || !page?.hasNext || !group.type) return;
+    setCursorStack((prev) => [...prev, cursor]);
+    setCursor(nextCursor);
+  }
+
+  function handlePrevious() {
+    if (cursorStack.length === 0) return;
+    const prev = cursorStack[cursorStack.length - 1];
+    setCursorStack((prevStack) => prevStack.slice(0, -1));
+    setCursor(prev);
+  }
+
+  if (!isLoading && positions.length === 0) {
+    return null;
  }

  return (
    <section>
-      <h2 style={{ fontSize: 20, marginBottom: 12 }}>Позиции</h2>
-      <div style={{ display: 'grid', gap: 20 }}>
-        {grouped.map((group) => (
-          <PositionTable key={group.key} title={group.title} positions={group.positions} />
-        ))}
+      <div
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          gap: 12,
+          justifyContent: 'space-between',
+          marginBottom: 10,
+        }}
+      >
+        <h3 style={{ fontSize: 18, margin: 0 }}>{group.title}</h3>
+        {group.type && (
+          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+            <button
+              type="button"
+              onClick={handlePrevious}
+              disabled={!canGoBack}
+              style={canGoBack ? pagButtonStyle : pagButtonDisabledStyle}
+            >
+              ←
+            </button>
+            <span
+              style={{
+                minWidth: 20,
+                textAlign: 'center',
+                color: 'var(--color-text-secondary)',
+                fontSize: 14,
+                fontWeight: 600,
+              }}
+            >
+              {pageNumber}
+            </span>
+            <button
+              type="button"
+              onClick={handleNext}
+              disabled={!canGoForward}
+              style={canGoForward ? pagButtonStyle : pagButtonDisabledStyle}
+            >
+              →
+            </button>
+          </div>
+        )}
      </div>
+
+      {isLoading && (
+        <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
+          <table style={tableStyle}>
+            <thead>
+              <tr>
+                <th align="left" style={thStyle}>
+                  Тикер
+                </th>
+                <th align="left" style={thStyle}>
+                  Название
+                </th>
+                <th align="right" style={thStyle}>
+                  Количество
+                </th>
+                <th align="right" style={thStyle}>
+                  Цена
+                </th>
+                <th align="right" style={thStyle}>
+                  Стоимость
+                </th>
+              </tr>
+            </thead>
+            <TableSkeleton
+              rows={4}
+              columns={[
+                { width: '30%' },
+                { width: '50%' },
+                { width: '20%' },
+                { width: '25%' },
+                { width: '25%' },
+              ]}
+            />
+          </table>
+        </div>
+      )}
+
+      {!isLoading && positions.length > 0 && (
+        <div style={{ overflowX: 'auto', background: 'var(--color-surface)' }}>
+          <table aria-label={`Брокерские позиции: ${group.title}`} style={tableStyle}>
+            <thead>
+              <tr>
+                <th align="left" style={thStyle}>
+                  Тикер
+                </th>
+                <th align="left" style={thStyle}>
+                  Название
+                </th>
+                <th align="right" style={thStyle}>
+                  Количество
+                </th>
+                <th align="right" style={thStyle}>
+                  Цена
+                </th>
+                <th align="right" style={thStyle}>
+                  Стоимость
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {positions.map((position) => (
+                <tr
+                  key={
+                    position.positionUid ||
+                    position.instrumentUid ||
+                    position.ticker ||
+                    position.figi
+                  }
+                >
+                  <td style={tdStyle}>
+                    <PositionTicker position={position} />
+                  </td>
+                  <td style={tdStyle}>
+                    <span style={{ color: 'var(--color-text-secondary)' }}>
+                      {position.name || '-'}
+                    </span>
+                  </td>
+                  <td align="right" style={tdStyle}>
+                    {formatQuantity(position.quantity)}
+                  </td>
+                  <td align="right" style={tdStyle}>
+                    {formatMoney(position.currentPrice)}
+                  </td>
+                  <td align="right" style={tdStyle}>
+                    {formatMoney(position.currentValue)}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
    </section>
  );
 }
+
+type BrokerPositionsSectionProps = {
+  accountId: string;
+};
+
+export function BrokerPositionsSection({ accountId }: BrokerPositionsSectionProps) {
+  return (
+    <div style={{ display: 'grid', gap: 20 }}>
+      <h2 style={{ fontSize: 20, margin: 0 }}>Позиции</h2>
+      {GROUPS.map((group) => (
+        <PositionGroupTable key={group.key} accountId={accountId} group={group} />
+      ))}
+    </div>
+  );
+}
--- a/apps/frontend/src/styles.css
+++ b/apps/frontend/src/styles.css
@ -33,3 +33,20 @@ a {
  color: var(--color-primary);
  text-decoration: none;
 }
+
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--color-bg) 25%,
+    #f0f0f0 50%,
+    var(--color-bg) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
--- a/docs/superpowers/specs/2026-06-17-broker-positions-pagination-and-loading.md
+++ b/docs/superpowers/specs/2026-06-17-broker-positions-pagination-and-loading.md
@ -0,0 +1,269 @@
+# Пагинация позиций, скелетоны, название инструмента в операциях
+
+Дата: 2026-06-17
+Статус: черновик
+
+## Контекст
+
+Страница брокерского счёта показывает таблицы позиций (Акции, Облигации, Другие инструменты) и
+операций. Сейчас позиции приходят единым списком внутри `GET /portfolio`, что неэффективно при
+большом количестве позиций. Также отсутствуют loading-индикаторы (просто текст "Загрузка...").
+
+## Цель
+
+1. Выделить позиции в отдельный paginated endpoint (10 на страницу)
+2. Заменить текстовые loading-индикаторы на shimmer-скелетоны
+3. Добавить название инструмента в колонку "Инструмент" таблицы операций
+4. Добавить визуальный loading-индикатор при переключении страниц таблиц
+
+## Изменения
+
+### 1. Backend: отдельный endpoint для позиций
+
+**Новый endpoint:** `GET /api/v1/broker/accounts/:accountId/positions`
+
+Query params:
+- `cursor` — positionUid последней позиции на тек. странице (string, опционально)
+- `limit` — размер страницы (number, default 10)
+
+Response:
+```ts
+interface BrokerPositionsPage {
+  accountId: string;
+  items: BrokerPosition[];
+  nextCursor: string | null;
+  hasNext: boolean;
+  asOf: string;
+}
+```
+
+**Логика:**
+- `broker-portfolio.service.ts` уже делает gRPC вызов `GetPortfolio`, который возвращает все позиции
+- Новый метод `getPositions(accountId, cursor?, limit?)` делает тот же gRPC вызов, кэширует полный список,
+  затем возвращает paginated slice
+- Cursor: позиция с `positionUid === cursor` — начало следующей страницы
+- Кэширование: `CACHE_POSITIONS_TTL` (60s) — отдельно от портфеля, т.к. цены меняются быстро
+- Если `cursor` не указан — возвращается первая страница
+
+**Изменение `BrokerPortfolio`:** убрать `positions` из типа/DTO портфеля.
+Фронтенд теперь грузит позиции отдельным запросом.
+
+**Новый файл:** `dto/broker-positions-page-response.dto.ts`
+
+**Изменяемые backend-файлы:**
+| Файл | Изменение |
+|---|---|
+| `types/broker.types.ts` | Добавить `BrokerPositionsPage` тип. Убрать `positions` из `BrokerPortfolio` |
+| `dto/broker-portfolio-response.dto.ts` | Убрать `positions` из `BrokerPortfolioResponseDto` |
+| `dto/broker-position-response.dto.ts` | Создать (перенести `BrokerPositionResponseDto` сюда из portfolio) |
+| `dto/broker-positions-page-response.dto.ts` | Создать |
+| `services/broker-portfolio.service.ts` | Добавить `getPositions()`, убрать positions из `getPortfolio()` |
+| `mappers/portfolio.mapper.ts` | Разделить маппинг: `mapBrokerPortfolio()` без positions, `mapBrokerPosition()` отдельно |
+| `tbank.controller.ts` | Добавить `GET /accounts/:accountId/positions` |
+| `tbank.config.ts` | Добавить `CACHE_POSITIONS_TTL` (60s) |
+| `operation.mapper.ts` | Добавить `name: item.name ?? null` в `mapOperation()` |
+| `types/broker.types.ts` | Добавить `name` в `BrokerOperation` |
+| `dto/broker-operation-response.dto.ts` | Добавить `name` |
+
+### 2. Frontend: новый хук и типы для позиций
+
+**Новый хук:** `apps/frontend/src/hooks/useBrokerPositions.ts`
+```ts
+export function useBrokerPositions(accountId, query = {}) {
+  return useQuery<BrokerPositionsPage>({
+    queryKey: ['broker', 'positions', accountId, query],
+    enabled: Boolean(accountId),
+    queryFn: () => getBrokerPositions(accountId!, query),
+    placeholderData: keepPreviousData,
+    staleTime: 60_000,
+    retry: 2,
+    refetchOnWindowFocus: false,
+  });
+}
+```
+
+**Новый API-вызов:** `apps/frontend/src/api/broker.ts`
+```ts
+export function getBrokerPositions(accountId, query) { ... }
+```
+
+**Новые типы в `responses.ts`:**
+- `BrokerPositionsPage` — интерфейс с items, nextCursor, hasNext
+- `name: string | null` в `BrokerOperation`
+- Убрать `positions` из `BrokerPortfolio`
+
+### 3. BrokerPositionsSection с пагинацией
+
+Компонент теперь принимает пропсы для пагинации (как BrokerOperationsTable):
+
+```tsx
+interface Props {
+  page: BrokerPositionsPage | undefined;
+  isLoading: boolean;
+  pageNumber: number;
+  canGoBack: boolean;
+  canGoForward: boolean;
+  onPrevious: () => void;
+  onNext: () => void;
+}
+```
+
+**Логика:**
+- `BrokerPositionsSection` рендерит те же группы (Акции / Облигации / Другие инструменты),
+  но только для позиций с текущей страницы
+- Снизу — кнопки пагинации ← N →
+- При `isLoading=true` — показывать 5 shimmer-строк (вместо реальных данных)
+- При `isLoading=true` и отсутствии данных (первая загрузка) — показывать
+  PositionTable skeleton (shimmer-строки для заглушки)
+
+### 4. Shimmer-скелетоны (CSS + компоненты)
+
+**CSS в `styles.css`:**
+```css
+@keyframes shimmer {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    #eee 25%,
+    #f5f5f5 50%,
+    #eee 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s ease-in-out infinite;
+  border-radius: 4px;
+}
+```
+
+**Компонент `SkeletonBlock`:**
+```tsx
+function SkeletonBlock({ width, height, borderRadius = 4 }: {
+  width?: string | number;
+  height?: string | number;
+  borderRadius?: number;
+}) {
+  return <div className="skeleton" style={{ width, height, borderRadius }} />;
+}
+```
+
+**BrokerAccountsPage:** 
+- Вместо `<p>Загрузка...</p>` — 3 карточки-скелетона в grid
+```tsx
+{isLoading && (
+  <div style={{ display: 'grid', gap: 16, gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))' }}>
+    {[1,2,3].map(i => (
+      <div key={i} style={{ padding: 20, background: 'var(--color-surface)', borderRadius: 8 }}>
+        <SkeletonBlock height={20} width="60%" />
+        <div style={{ height: 10 }} />
+        <SkeletonBlock height={12} width="40%" />
+        <div style={{ height: 6 }} />
+        <SkeletonBlock height={12} width="30%" />
+      </div>
+    ))}
+  </div>
+)}
+```
+
+**BrokerAccountDetailPage:**
+- Вместо `<p>Загрузка портфеля...</p>` — shimmer-блоки под header + cash + positions
+- Позиции грузятся отдельно через `useBrokerPositions` — свой skeleton
+
+### 5. Название инструмента в операциях
+
+**Изменение `OperationInstrument`:**
+
+```tsx
+function OperationInstrument({ operation }: { operation: BrokerOperation }) {
+  const ticker = operation.ticker;
+  const path = getBrokerInstrumentPath({ ticker, instrumentType: operation.instrumentType, classCode: operation.classCode });
+  const name = operation.name || operation.description;
+
+  if (!path && !name) return <span>-</span>;
+  if (!path) return <span>{name}</span>;
+
+  return (
+    <div style={{ display: 'grid', gap: 2 }}>
+      <Link to={path} style={{ fontWeight: 700 }}>{ticker}</Link>
+      {name && name !== ticker && (
+        <span style={{ color: 'var(--color-text-secondary)', fontSize: 12 }}>{name}</span>
+      )}
+    </div>
+  );
+}
+```
+
+### 6. Loading-индикатор при переключении страниц (shimmer-строки)
+
+**BrokerOperationsTable:**
+- При `isLoading=true` и наличии `page` (уже были данные, но грузится новая страница):
+  показываем 5 shimmer-строк вместо table body
+- При `isLoading=true` и отсутствии `page` (первая загрузка):
+  показываем header таблицы + 5 shimmer-строк
+- Используем `keepPreviousData` в TanStack Query, но визуально не показываем старые данные —
+  показываем shimmer-строки
+
+**BrokerPositionsSection:**
+- Аналогичное поведение при переключении страниц позиций
+
+**Компонент `TableSkeleton`:**
+```tsx
+function TableSkeleton({ rows = 5 }) {
+  return (
+    <tbody>
+      {Array.from({ length: rows }).map((_, i) => (
+        <tr key={i}>
+          <td style={tdStyle}><SkeletonBlock height={12} width="70%" /></td>
+          <td style={tdStyle}><SkeletonBlock height={12} width="50%" /></td>
+          <td style={tdStyle}><SkeletonBlock height={12} width="30%" /></td>
+          <td style={tdStyle}><SkeletonBlock height={12} width="40%" /></td>
+          <td style={tdStyle}><SkeletonBlock height={12} width="40%" /></td>
+        </tr>
+      ))}
+    </tbody>
+  );
+}
+```
+
+Количество колонок и их ширина зависит от таблицы (operations vs positions).
+
+## Файлы для изменения
+
+### Backend
+| Файл | Изменение |
+|---|---|
+| `apps/backend/src/modules/tbank/types/broker.types.ts` | Убрать `positions` из `BrokerPortfolio`. Добавить `BrokerPositionsPage`. Добавить `name` в `BrokerOperation` |
+| `apps/backend/src/modules/tbank/dto/broker-portfolio-response.dto.ts` | Убрать `positions` из `BrokerPortfolioResponseDto`. Вынести `BrokerPositionResponseDto` |
+| `apps/backend/src/modules/tbank/dto/broker-position-response.dto.ts` | Создать (из `BrokerPositionResponseDto`) |
+| `apps/backend/src/modules/tbank/dto/broker-positions-page-response.dto.ts` | Создать |
+| `apps/backend/src/modules/tbank/dto/broker-operation-response.dto.ts` | Добавить `name` |
+| `apps/backend/src/modules/tbank/mappers/portfolio.mapper.ts` | Разделить маппинг portfolio/positions |
+| `apps/backend/src/modules/tbank/mappers/operation.mapper.ts` | Добавить `name` в mapOperation |
+| `apps/backend/src/modules/tbank/services/broker-portfolio.service.ts` | Добавить `getPositions()`, убрать positions из portfolio |
+| `apps/backend/src/modules/tbank/tbank.controller.ts` | Добавить GET /positions endpoint |
+| `apps/backend/src/modules/tbank/tbank.config.ts` | Добавить CACHE_POSITIONS_TTL |
+
+### Frontend
+| Файл | Изменение |
+|---|---|
+| `apps/frontend/src/styles.css` | Добавить `@keyframes shimmer` и `.skeleton` |
+| `apps/frontend/src/api/responses.ts` | Убрать `positions` из `BrokerPortfolio`. Добавить `BrokerPositionsPage`, `name` в `BrokerOperation` |
+| `apps/frontend/src/api/broker.ts` | Добавить `getBrokerPositions()` |
+| `apps/frontend/src/hooks/useBrokerPositions.ts` | Создать |
+| `apps/frontend/src/pages/broker/BrokerPositionsSection.tsx` | Пагинация + shimmer-строки |
+| `apps/frontend/src/pages/broker/BrokerOperationsTable.tsx` | Shimmer-строки при loading, обновить OperationInstrument |
+| `apps/frontend/src/pages/broker/BrokerAccountDetailPage.tsx` | Скелетоны, хук позиций |
+| `apps/frontend/src/pages/broker/BrokerAccountsPage.tsx` | Скелетоны |
+| `apps/frontend/src/pages/broker/BrokerPages.test.tsx` | Обновить тесты |
+
+## Тестирование
+
+- Backend: обновить `broker-portfolio.service.spec.ts` — убрать positions из portfolio, покрыть getPositions
+- Backend: обновить `portfolio.mapper.spec.ts`
+- Frontend: `npm run test:frontend` — все тесты должны проходить
+- Проверить, что скелетоны отображаются при загрузке
+- Проверить, что пагинация позиций работает
+- Проверить, что shimmer-строки показываются при переключении страниц
+- Проверить, что название инструмента отображается в операциях
Author	SHA1	Message	Date
Sergey Krylov	49ee364856	feat(broker): per-type positions pagination with independent tables All checks were successful CI / lint (pull_request) Successful in 2m9s Details CI / test (pull_request) Successful in 1m56s Details CI / build (pull_request) Successful in 2m6s Details CI / lint (push) Successful in 1m56s Details CI / test (push) Successful in 1m55s Details CI / build (push) Successful in 2m19s Details - Add type query param to GET /accounts/:accountId/positions endpoint - Backend filters T-Bank portfolio positions by instrument type before pagination - Each instrument type (share, bond, etf, fund) has its own frontend table with independent cursor-based pagination and skeleton loading - Groups with no positions are automatically hidden - Cache key includes type for correct per-type caching - Remove centralized positions pagination state from BrokerAccountDetailPage - 94 backend tests / 112 frontend tests pass	2026-06-18 06:02:54 +03:00
Sergey Krylov	5ccd421259	test(frontend): update broker tests for positions hook and removal from portfolio	2026-06-17 14:50:35 +03:00
Sergey Krylov	e25daa931a	feat(frontend): add skeleton cards to broker accounts page	2026-06-17 14:47:10 +03:00
Sergey Krylov	28579321a9	feat(frontend): add positions hook and skeleton loading to account detail page	2026-06-17 14:46:48 +03:00
Sergey Krylov	2670097a5e	feat(frontend): add shimmer loading and instrument name in operations table	2026-06-17 14:46:06 +03:00
Sergey Krylov	e0c9d97ded	feat(frontend): add pagination and skeleton to BrokerPositionsSection	2026-06-17 14:45:27 +03:00
Sergey Krylov	d7b5a376a0	feat(frontend): add SkeletonBlock and TableSkeleton components	2026-06-17 14:44:15 +03:00
Sergey Krylov	608e521674	feat(frontend): add BrokerPositionsPage types, API, and hook	2026-06-17 14:43:50 +03:00
Sergey Krylov	33199a8749	feat(frontend): add shimmer animation and .skeleton CSS class	2026-06-17 14:42:49 +03:00
Sergey Krylov	4b87eccba4	test(tbank): update portfolio tests, add getPositions tests, fix operation fixture name	2026-06-17 14:41:32 +03:00