# Broker Accounts Page — Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Migrate broker-accounts page area to use `@moex-vibe/design-system` components.

**Architecture:** Replace legacy CSS classes, inline styles, and shared/components with DS equivalents. Keep business logic and data layer unchanged. The hero gradient section is intentionally left as custom CSS.

**Tech Stack:** React 18, MUI 6.5, `@moex-vibe/design-system` 0.1.0

---

## Files

### Modify
- `apps/frontend/src/pages/broker-accounts/ui/BrokerAccountsPage.tsx`
- `apps/frontend/src/widgets/broker-accounts-summary/ui/BrokerAccountsSummary.tsx`
- `apps/frontend/src/widgets/broker-account-card/ui/BrokerAccountCard.tsx`
- `apps/frontend/src/shared/ui/broker-allocation-bar/BrokerAllocationBar.tsx`
- `apps/frontend/src/styles.css` — удалить осиротевшие классы

### No changes
- Entity layer (`entities/broker-account/`, `entities/broker-position/`) — бизнес-логика не меняется
- Shared formatters (`shared/lib/formatters.ts`) — используются для форматирования значений
- Shared API layer (`shared/api/`) — не меняется

---

## Task 1: BrokerAllocationBar

Replace inline HTML + CSS classes with `<Box>` + `<Text>`.

- Empty: `<p className="broker-allocation-bar__empty">` → `<Text tone="muted">`
- Track: `<div className="broker-allocation-bar__track">` → `<Box>` with `sx`
- Segment: `<span style={{ width, background }}>` → `<Box>` with `sx`
- Legend: `<ul>` / `<li>` → `<Box>` with `sx` flex layout
- Swatch: `<span>` with inline style → `<Box>` with `sx`

Segment width/background и swatch colors остаются как inline styles (dynamic per item, from ALLOCATION_CONFIG).

## Task 2: BrokerAccountCard

Replace legacy shared components and CSS with DS equivalents.

- Skeleton block: `<SkeletonBlock>` → `<Skeleton>` from DS
- Eyebrow: `<p className="broker-account-card__eyebrow">` → `<Text variant="label" tone="secondary">`
- Title: `<h2 className="broker-account-card__title">` → `<Heading level={2}>`
- Stat labels/values: `<span>` + `<strong>` → `<Text variant="label" tone="secondary">` + `<Text>`
- Card wrapper: `<article className="broker-account-card broker-account-card--link">` → `<Surface>` with `component={Link}` or `<Box>` with `sx`
- Error: `<article className="broker-account-card broker-account-card--error">` → `<Surface>` + `<Alert>` + `<Button>`
- Card header layout: `<div className="broker-account-card__header">` → `<Box>` with flex `sx`
- Card grid: `<div className="broker-account-card__grid">` → `<Box>` with grid `sx`
- Card stat: `<div className="broker-account-card__stat">` → `<Box>` with grid `sx`

## Task 3: BrokerAccountsSummary

Replace skeleton, stats, typography with DS equivalents.

- Skeleton: `<SkeletonBlock>` → `<Skeleton>`
- Eyebrow: `<p className="broker-accounts-summary__eyebrow">` → `<Text variant="label" tone="secondary">`
- Title (serif): keep as `<h2>` with CSS class (DS Heading не использует serif, теряется brand-стиль)
- Status counts: `<span>` → `<Text>`
- Currency label: `<p className="broker-accounts-summary__currency">` → `<Text variant="label" tone="secondary">`
- Currency totals: `<strong className="broker-accounts-summary__total">` — keep as `<strong>` with CSS (serif)
- Metrics: `<dl>`/`<dt>`/`<dd>` → `<Metric>` for each stat
- Metric layout grid: `<div className="broker-accounts-summary__metrics">` → `<Box>` with grid `sx`

The hero section (`broker-accounts-summary__hero`) keeps its CSS classes — custom gradient, not replaceable.

## Task 4: BrokerAccountsPage

Replace page-level layout, typography, empty/error states.

- Page grid: `<div className="broker-accounts-page">` → `<Box>` with grid `sx`
- Header: `<header className="broker-accounts-page__header">` → `<Box>` with flex `sx`
- Eyebrow: `<p className="broker-accounts-page__eyebrow">` → `<Text variant="label" tone="secondary">`
- Title: `<h1 className="broker-accounts-page__title">` → `<Heading level={1}>` (note: serif lost)
- Caption: `<p className="broker-accounts-page__caption">` → `<Text tone="secondary">`
- Cards grid: `<div className="broker-accounts-page__cards">` → `<Box>` with grid `sx`
- Empty: `<section className="broker-accounts-empty">` → `<EmptyState>`
- Error: `<p style={{ color: ... }}>` → `<Text tone="negative">`

## Task 5: Clean up orphaned CSS

After all migrations, remove from `styles.css`:
- `.broker-accounts-page`, `.broker-accounts-page__header`, `.broker-accounts-page__eyebrow`, `.broker-accounts-page__title`, `.broker-accounts-page__caption`, `.broker-accounts-page__cards`
- `.broker-accounts-empty`
- `.broker-account-card`, `.broker-account-card--link`, `.broker-account-card--loading`, `.broker-account-card--error`, `.broker-account-card__header`, `.broker-account-card__eyebrow`, `.broker-account-card__title`, `.broker-account-card__opened`, `.broker-account-card__grid`, `.broker-account-card__stat`, `.broker-account-card__stat--wide`, `.broker-account-card__alert`, `.broker-account-card__retry`
- `.broker-allocation-bar`, `.broker-allocation-bar__track`, `.broker-allocation-bar__segment`, `.broker-allocation-bar__legend`, `.broker-allocation-bar__legend-item`, `.broker-allocation-bar__swatch`, `.broker-allocation-bar__empty`
- `.broker-accounts-summary__eyebrow`, `.broker-accounts-summary__currency`, `.broker-accounts-summary__total`, `.broker-accounts-summary__metrics`, `.broker-accounts-summary__metric`
- `.broker-accounts-summary__currency-card` and its children (header, currency, total, metrics, metric)
- `.broker-accounts-summary__status` and children

Keep: `.broker-accounts-summary`, `.broker-accounts-summary--loading`, `.broker-accounts-summary__hero`, `.broker-accounts-summary__title` (serif), shared `.broker-accounts-summary__eyebrow` shared rule (hero-specific), `.broker-accounts-summary__currency-grid`