specs/openspec/changes/archive/2026-08-25-codify-frontend-view-model-boundary/tasks.md

codify-frontend-view-model-boundary — Tasks

1. Frontend: зафиксировать VM-derived behavior тестами

• 1.1 Добавить focused tests для useAccountPageViewModel в frontend/src/pages/account/ui/AccountPage.vm.test.tsx или расширить существующий colocated account page test, если текущая test setup уже надёжно покрывает hook под QueryClientProvider, MantineProvider и MemoryRouter. Tests должны зафиксировать, что ViewModel возвращает grouped position sections для stocks/bonds/other, display-only share values, refresh/retry props и loaded/empty/error state selection без обращения к DOM-rendering details. Verification: npm run test:run -- src/pages/account/ui/AccountPage.vm.test.tsx в frontend либо точный account page test file, если tests останутся в существующем файле.
• 1.2 Добавить focused tests для recent Account Ledger и Future Cash Events presentation state в ViewModel: loading, error, empty, loaded first five items/events и isolated retry/open-link data должны приходить из VM как props/state для presentation views. Verification: npm run test:run -- src/pages/account/ui/AccountPage.vm.test.tsx в frontend либо точный account page test file, если tests останутся в существующем файле.
• 1.3 Сохранить existing account page render regressions для stale Portfolio Snapshot, nullable values, logo fallback, signed returns, recent section failure isolation и cached portfolio visibility. Если после refactor меняются props state views, обновить tests только на новую presentation interface без изменения expected visible behavior. Verification: npm run test:run -- src/pages/account/ui/AccountPage.test.tsx в frontend.

2. Frontend: перенести account page logic во ViewModel

• 2.1 Расширить frontend/src/pages/account/ui/AccountPage.vm.ts, чтобы он возвращал discriminated presentation model для top-level states и loaded/empty content: account heading data, portfolio refresh state, totals, cash balances, position sections и retry callbacks. Verification: focused VM tests из 1.1 проходят.
• 2.2 Перенести useBrokerageOperations и useBrokerageEvents из view layer в AccountPage.vm.ts. ViewModel должен ограничивать recent operations/events до данных, необходимых presentation components, включая loading/error/empty/loaded flags, first five events, operation payment fallback data и route target для full ledger/events pages. Verification: focused VM tests из 1.2 проходят.
• 2.3 Перенести из view layer grouping Portfolio Positions по STOCK, BOND и other, вычисление currency denominators/share display data, wide-section flags и signed/unlabeled return display flags. ViewModel не должен локализовать text или собирать JSX. Verification: focused VM tests из 1.1 проходят, npm run typecheck в frontend.
• 2.4 Убрать accessToken из props state views account page, если после переноса recent hooks он больше нужен только ViewModel. Не менять signatures entity API hooks и не выполнять auth-gating refactor вне scope. Verification: rg -n "accessToken" src/pages/account/ui в frontend показывает token только там, где он остаётся responsibility VM/container.

3. Frontend: раздробить account page presentation

• 3.1 Создать nearby presentation components под frontend/src/pages/account/ui/components/ для самостоятельных sections account page: heading, portfolio refresh state, portfolio totals, cash balances, position section/card/logo, recent operations и recent events. Каждый component должен получать props и рендерить JSX без data/auth/router/navigation/VM hooks. Verification: npm run typecheck в frontend.
• 3.2 Обновить frontend/src/pages/account/ui/AccountPage.view.tsx, чтобы exported Loading/Error/Empty/Loaded views только компоновали presentation props и nearby components. Файл не должен импортировать useBrokerageOperations, useBrokerageEvents, useAuth, useParams, useNavigate или useAccountPageViewModel, и не должен содержать collection grouping или share denominator calculations. Verification: rg -n "useBrokerageOperations|useBrokerageEvents|useAuth|useParams|useNavigate|useAccountPageViewModel|denominators|positions\\.filter" src/pages/account/ui/*.view.tsx src/pages/account/ui/components в frontend не находит запрещённые occurrences в view files, кроме false positives, явно проверенных вручную.
• 3.3 Сохранить допустимые presentation hooks во view components: useTranslation для labels и локальный UI-only useState для image fallback. Не переносить локализованные strings или Avatar fallback state в ViewModel. Verification: account page render tests из 1.3 проходят.
• 3.4 Убедиться, что split не создаёт cross-slice deep imports и не расширяет public API страницы сверх существующих exports AccountPage* из AccountPage.tsx. Verification: npm run deps и npm run knip в frontend.

4. Frontend: уточнить AI guidance и conventions

• 4.1 Обновить frontend/docs/UI-PATTERN.md: явно описать роли *.tsx container, *.vm.ts ViewModel и *.view.tsx presentation views; перечислить запрет для view modules на data/auth/router/navigation/VM hooks, domain grouping и derived collection calculations; зафиксировать допустимые presentation hooks useTranslation, form-context hooks и локальный UI-only state. Verification: manual read-through против Design D1-D3.
• 4.2 Обновить frontend/docs/CONVENTIONS.md: расширить File roles так, чтобы AI agent видел не только suffix names, но и boundary responsibilities, включая правило semantic split для маленьких files по ответственности. Verification: manual read-through против Design D4-D5.
• 4.3 Обновить frontend/AGENTS.md коротким pointer на VM/view boundary в docs/UI-PATTERN.md и semantic split guidance. Не дублировать полный документ в AGENTS. Verification: rg -n "ViewModel|view|UI-PATTERN|semantic|responsibility" AGENTS.md docs/UI-PATTERN.md docs/CONVENTIONS.md в frontend.

5. Verification, semantic review и workspace gate

• 5.1 Запустить targeted account page tests после refactor. Verification: npm run test:run -- src/pages/account/ui/AccountPage.test.tsx src/pages/account/ui/AccountPage.vm.test.tsx в frontend; если VM tests размещены в существующем файле, команда должна указывать фактические test files.
• 5.2 Запустить frontend canonical gate под Node 22. Verification: npm ci && npm run verify в frontend.
• 5.3 Проверить OpenSpec change структурно. Verification: openspec validate codify-frontend-view-model-boundary --type change --strict --store wealth-ledger-specs из specs.
• 5.4 Выполнить semantic verification против Proposal и Design: подтвердить, что user-visible account page behavior, routes, localized text keys, loading/error/empty/loaded states, cached-snapshot behavior, API contract, backend behavior и non-goals не изменились. Verification: записать checked areas и conclusion в implementation summary перед archive.
• 5.5 Запустить workspace change dispatcher под Node 22 после завершения affected tasks. Verification: bash specs/scripts/verify-workspace-change.sh codify-frontend-view-model-boundary из workspace root.