moex-vibe/docs/features/frontend-fsd-final/plan.md

FSD Final Cleanup Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development to implement task-by-task.

Goal: Complete FSD migration by fixing all remaining compliance gaps in apps/frontend/src/

Architecture: Five independent phases: (1) fix ../../../ → @/ in 8 broker files, (2) move BrokerAccountLayout from entities to widgets, (3) add api/ to entities/search, (4) fix app layer deep imports to use barrel, (5) fix test relative imports to use @/. Each phase is safe, mechanical, and independently verifiable.

Tech Stack: TypeScript, React, Feature-Sliced Design, Vitest

---

File Structure Changes

Create

• apps/frontend/src/widgets/broker-account-layout/index.ts
• apps/frontend/src/widgets/broker-account-layout/ui/BrokerAccountLayout.tsx
• apps/frontend/src/entities/search/api/searchApi.ts

Delete

• apps/frontend/src/entities/broker-account/ui/BrokerAccountLayout.tsx
• apps/frontend/src/entities/broker-account/ui/ (if empty)

Modify (20+ files)

See per-task sections below.

---

Phase 1: Fix import aliases

Task 1: Fix ../../../ → @/ in 8 broker files

Files to modify:

• apps/frontend/src/pages/broker-accounts/ui/BrokerAccountsPage.tsx — 3 relative imports
• apps/frontend/src/pages/broker-positions/ui/BrokerPositionsPage.tsx — 2 relative imports
• apps/frontend/src/pages/broker-operations/ui/BrokerOperationsPage.tsx — 3 relative imports
• apps/frontend/src/pages/broker-account/ui/BrokerAccountOverviewPage.tsx — 4 relative imports
• apps/frontend/src/widgets/broker-allocation-chart/ui/BrokerAllocationChart.tsx — 1 relative import
• apps/frontend/src/widgets/broker-operations-table/ui/BrokerOperationsTable.tsx — 2 relative imports
• apps/frontend/src/widgets/broker-account-card/ui/BrokerAccountCard.tsx — 2 relative imports
• apps/frontend/src/widgets/broker-accounts-summary/ui/BrokerAccountsSummary.tsx — 3 relative imports

Each replacement follows the same pattern: ../../../entities/... → @/entities/... and ../../../widgets/... → @/widgets/....

For pages at depth 2 (../../entities/) — same prefix. Only files at depth 3 (../../../) exist in this set.

Note: 3 pages import useBrokerAccountContext from ../../../entities/broker-account/ui/BrokerAccountLayout — these will be updated again in Phase 2 after the move.

Phase 2: Move BrokerAccountLayout to widgets

Task 2: Create widgets/broker-account-layout

• widgets/broker-account-layout/index.ts — re-exports BrokerAccountLayout and useBrokerAccountContext
• widgets/broker-account-layout/ui/BrokerAccountLayout.tsx — copied from entities, with ../model/useBrokerPortfolio → @/entities/broker-account

Task 3: Update imports and delete old location

• 3 broker pages: @/entities/broker-account/ui/BrokerAccountLayout → @/widgets/broker-account-layout
• app/routing/AppRoutes.tsx: same update
• Delete entities/broker-account/ui/BrokerAccountLayout.tsx
• Remove entities/broker-account/ui/ directory if empty

Phase 3: Add api/ to entities/search

Task 4: Create entities/search/api/searchApi.ts

Contains searchSecurities function extracted from shared/api/client.ts. Imports request from shared.

Task 5: Update consumers and remove from shared

• entities/search/model/useSearch.ts: @/shared/api/client → ../api/searchApi
• entities/search/index.ts: add re-export of searchSecurities
• shared/api/client.ts: remove searchSecurities function
• shared/api/index.ts: remove searchSecurities re-export

Phase 4: Fix app layer deep imports

Task 6: Fix AppLayout.tsx, SessionProvider.tsx, ProtectedRoute.tsx

• app/layouts/AppLayout.tsx: @/entities/session/model/useSession → @/entities/session
• app/providers/SessionProvider.tsx: both deep imports → @/entities/session
• app/routing/ProtectedRoute.tsx: @/entities/session/model/useSession → @/entities/session

Phase 5: Fix test relative imports

Task 7: Fix test/test-utils.tsx relative import

• test/test-utils.tsx: ../app/providers/SessionProvider → @/app/providers/SessionProvider

Task 8: Fix 9 test files

• shared/api/client.test.ts: ../../test/server → @/test/server
• entities/session/api/sessionApi.test.ts: ../../../test/server → @/test/server
• entities/stock/model/useStockDividends.test.tsx: ../../../test/server → @/test/server
• entities/stock/model/useStockCandles.test.tsx: ../../../test/server → @/test/server
• entities/bond/model/useBondCandles.test.tsx: ../../../test/server → @/test/server
• app/providers/SessionProvider.test.tsx: ../../test/server → @/test/server
• pages/login/LoginPage.test.tsx: ../../test/server → @/test/server, ../../test/test-utils → @/test/test-utils
• pages/register/RegisterPage.test.tsx: same
• pages/profile/ProfilePage.test.tsx: same

Verification

Task 9: Run tests, lint, build

• npm run lint -w apps/frontend
• npm run test -w apps/frontend
• npm run build -w apps/frontend