MikrotikManager/docs/ux-ui-plan.md

План реализации UX/UI по пятичасовым окнам

Общий план проекта MikrotikManager. Основан на согласованном плане из задачи; состояние на 2026-09-24. Источник фактического прогресса, проверок и ограничений — журнал реализации. Этот документ задаёт объём и критерии завершения, журнал фиксирует результат.

Цель и обязательные требования

Информативный, лаконичный и интуитивно понятный интерфейс с полноценной обработкой API, ошибок, прав и состояний данных. ReUI PRO, Frame и стиль base-nova; переиспользование установленных компонентов и общих композиций KpiStatGrid, ServerTileRail, CodeExportSheet. Основной сценарий — ПК с адаптацией для телефона; доступность обязательна.

Изменения выполняются как fullstack-работа: проверять контракт и поведение backend, а не только внешний вид. Не показывать успешную операцию до подтверждения API, не подменять неизвестные значения нулями. Локальные проверки используют реальные HTTP-пути с подменой ответов. Моки достаточны для локальной проверки UI и обработки ответов, но не доказывают применение конфигурации RouterOS, работу JWT в реальном окружении или точность IPFIX.

Распределение работы и лимиты

• Пятичасовое окно — квота использования, а не пять часов непрерывной разработки. Расход заранее неизвестен; этап ограничивается конкретным результатом и проверками.
• По умолчанию один крупный этап на окно. Небольшие блоки объединять после проверки доступной квоты. Учитывать и общий недельный лимит аккаунта.
• Проверять квоту в начале этапа и после законченного блока. Базовый резерв — 25% пятичасового окна: не начинать новый блок, завершать проверки и сохранять состояние.
• Последующие прямые указания пользователя «до конца лимитов» разрешают работать ниже базового резерва, сохраняя возможность завершить проверки, журнал и коммит. Не начинать блок, который нельзя безопасно закончить.
• Работать последовательно, без параллельных агентских задач. Не менять модель посреди этапа без необходимости.
• После каждого завершённого этапа или самостоятельного проверенного блока делать локальный коммит. Без push. Сообщение коммита — по AGENTS.md, с русским subject после префикса.
• Исторические проценты и даты сброса из первоначального плана не являются текущими: перед работой получать актуальные лимиты.

Этапы и критерии завершения

Этап	Объём	Точка завершения	Распределение
0. Подготовка	Зафиксировать состояние проекта, базовые проверки, таблицы и потребителей Filters, исходные экраны	Журнал, исходные ошибки, карта миграции	Первое окно
1. Достоверность операций	Сохранение, удаление, опрос серверов; сохранение формы и данных при ошибках	Проверены успех, ошибка API, отсутствие доступа, повторное нажатие	Вместе с 0 при достаточном резерве
2. Основа миграции	Связанная группа ReUI Data Grid/TanStack, общая оболочка, одна таблица серверов, подготовка Filters	Эталонная таблица, зависимости и образец миграции	Отдельное окно
3. Основные таблицы	Обзор, серверы, мониторинг, трафик, статистика, справочники	Проверены таблицы группы, оставшиеся потребители перечислены	Отдельное окно
4. Остальные таблицы	VPN, маршрутизация, управление, системные разделы; удаление старого API Filters	Нет смешения старого и нового API, общие проверки проходят	Отдельное окно
5. Состояния данных	Частичные сбои дашборда, последние данные, свежесть, гонки запросов	Проверены первоначальная ошибка, частичный сбой, фоновое обновление	Отдельное окно
6. Оболочка и дашборд	Навигация, контекст, подписи, сводка, очередь проблем, переходы к объектам	Проверены схемы и экраны ПК/телефона, переходы работают	Отдельное окно
7. Серверы и мониторинг	Единый UX таблиц, деталей и форм; URL-контекст, права	Сценарий «проблема → сервер → действие → возврат» работает	Отдельное окно
8. Трафик и статистика	Периоды, единицы, фильтры среза, связь графиков и таблиц, пустые состояния	Нет смешения live/истории и подмены неизвестных значений нулями	Отдельное окно; допускается несколько блоков
9. VPN и сетевые операции	WireGuard, IPsec, GRE, VXLAN, Firewall, Filters; выбор устройства, формы	Контекст устройства сохраняется, результат операций подтверждён API	Отдельное окно
10. Маршрутизация и диагностика	BGP, OSPF, рекурсивные маршруты, оптимизатор, диагностика, карта, терминал	Проверены профильные сценарии без изменения правил сетевых операций	Отдельное окно
11. Администрирование	Пользователи, контейнеры, сертификаты, резервирование, оповещения, сбор данных, релизы, настройки	Общие шаблоны применены, ошибки операций и интеграций понятны	Разделено на 11А и 11Б
12. Итоговая приёмка	Доступность, адаптивность, права, производительность, сквозная регрессия	Production build, тесты, ReUI checklist, список ограничений	Отдельное окно

Это 13 контрольных этапов, а не обещание уложиться в 13 окон. Основная неопределённость — миграция компонентов и применение изменений в сетевых разделах.

Этапы 2–4 выполняются в отдельной ветке миграции (codex/reui-v9-migration). Промежуточные остановки допустимы с точным перечнем ошибок; выпуск до завершения этапа 4 не допускается. Само завершение этапа не является разрешением на push или deployment.

Референсы и схемы

Для каждой группы экранов сначала использовать одну схему как эталон, затем применять её последовательно. Не пересобирать весь визуальный план в каждом окне.

Этапы	Референсы ReUI PRO	Схема доработки
6	App Shell 12, Stats 12	Навигация → сводка → проблемы → измерения
2–4, 7–8	Data Grid Filtering 2	Фильтры → таблица → детали → результат
7, 9–10	List 9, Sheet 8	Сервер → объект → форма → подтверждение API
11	Settings 16	Секция → состояние → действие → результат

flowchart LR
    A["0–1: подготовка и операции"] --> B["2–4: миграция ReUI"]
    B --> C["5: достоверность данных"]
    C --> D["6–8: основные экраны"]
    D --> E["9–10: сетевые разделы"]
    E --> F["11: администрирование"]
    F --> G["12: приёмка"]

ПК:      [Навигация] [Контекст и действия                 ]
                    [Период / фильтры                    ]
                    [Сводка                             ]
                    [Список объектов] [Детали / результат]

Телефон: [Навигация и контекст]
         [Действия / фильтры ]
         [Сводка             ]
         [Список объектов    ]
         [Детали / результат ]

Данные:  контекст → загрузка → подтверждённые данные
                            ↘ ошибка + повтор
         новый контекст ≠ старые данные; неизвестное ≠ ноль

Текущая точка продолжения

По журналу этапы 0–8 завершены в границах локальной приёмки; внешние ограничения сохраняются. Этап 9 начат (блоки 9.1–9.34 — IPsec/GRE/VXLAN и переключение Firewall); этапы 10–12 не начаты. Этап 11 разделён: 11А — пользователи, контейнеры, сертификаты, резервирование; 11Б — оповещения, сбор данных, интеграции, релизы, настройки.

Подробные планы: этап 6, этап 7, этап 8 и итоговая матрица, этап 9.

Этап 8 завершён блоком 8.13: периоды и URL статистики, достоверность REST/SSE, защита от гонок, свежесть и разрывы графиков, месячный отчёт с каталогом неактивных серверов, адаптивность и профильная клавиатурная приёмка. Повреждённые ответы статистики показывают ошибку с повтором. Точный состав проверок и ограничений сохранён в журнале.

Ближайший оставшийся объём:

1. Этап 9: карта разделов и схема сохранены; удаление, импорт, создание, переключение, контекст экспорта и выбор пира WireGuard исправлены в 9.1–9.7; в 9.8 проверено подтверждение восстановления. В 9.9 исправлены разметка и сохранение подтверждения при ошибке у всех шести потребителей. В 9.10 исправлены ошибки и поздние ответы загрузки истории WireGuard. В 9.11 подтверждение восстановления проверено у остальных пяти потребителей. В 9.12 обработаны ошибка/повтор/поздние ответы истории IPsec. В 9.13 подключены ошибка/повтор/защита поздних ответов остальных четырёх разделов и общая валидация ревизий всех шести. В 9.14 исправлены подтверждение инициализации IPsec, сохранение формы и защита повторной отправки. В 9.15 проверены создание/редактирование пользователей IPsec и сохранение формы. В 9.16 проверены получение/повторный экспорт сертификатов, поздние ответы и соответствие отображаемого пароля архиву. В 9.17 подтверждены ответы удаления четырёх типов объектов IPsec и исправлен диалог повторов. В 9.18 исправлено подтверждение сохранения peer IPsec и поведение формы. В 9.19 исправлено подтверждение удаления GRE и сохранение диалога при ошибке. В 9.20 исправлено подтверждение включения/выключения GRE и защита повторов. В 9.21 исправлены подтверждение создания/сохранения GRE и защита формы. В 9.22 исправлены контейнер ответа, первоначальные KPI и сохранение данных при ошибке VXLAN. В 9.23 backend сообщает частичные сбои VXLAN, UI сохраняет данные неответивших устройств и показывает неизвестное состояние. В 9.24 добавлены схемы payload и тесты гонок VXLAN. В 9.25 подтверждены включение/отключение правил Firewall и защита повторов. В 9.26 подтверждены включение/отключение address-list с общим замком переключений. В 9.27 удаление правил/address-list перенесено в диалог с подтверждением API и защитой повторов. В 9.28 создание/редактирование правил и address-list требуют подтверждения API, сохраняют ввод/ошибку и блокируют повторы/закрытие. В 9.29 перемещение Firewall требует ok=true, откатывает порядок при ошибке и использует общий замок. В 9.30 восстановление истории подключено к общему замку, ручное обновление и открытие истории заблокированы во время записи. В 9.31 добавлены схемы ответа Firewall/серверов, сохранение последних данных при ошибке и поколение чтения с отменой применения при начале записи. В 9.32 backend сообщает частичные сбои по устройству/семейству/таблице, UI сохраняет недоступные срезы и блокирует изменения неполного среза. В 9.33 состояние изолировано по backend/режиму; поздние операции старого экрана не запускают чтение и не показывают уведомления в новом контексте. В 9.34 показано время получения срезов Firewall: успешные обновляются, недоступные сохраняют прежнее время или остаются неизвестными. В 9.35 сохранение Filters ожидает ok=true, сохраняет ввод при ошибке и блокирует повторную отправку/закрытие; live-список меняется после подтверждения. В 9.36 копирование Filters ждёт подтверждения, сохраняет цель/правила/режим при ошибке и блокирует повторы/закрытие. В 9.37 удаление Filters перенесено в диалог с сохранением ошибки, подтверждением API и защитой повторов. В 9.38 перемещение Filters подтверждается API; поиск использует полный порядок для приоритета и границ, действия таблицы блокируются на время операции. В 9.39 обновление/восстановление Filters используют общий замок до чтения правил/истории; ошибка чтения сохраняет подтверждение, чужой ruleset и stale отклоняются. В 9.40 добавлены схемы правил/ответов Filters, ошибка первоначальной загрузки с повтором без подмены моками и сохранение последних данных. В 9.41 запись выбранного устройства требует успешного чтения live=true, старые ответы отклоняются поколением запросов при переключении/применении. В 9.42 состояние Filters изолировано по backend/режиму, старые операции не уведомляют новый контекст. В 9.43 копирование Filters читает актуальный целевой набор под общим замком до PUT, ошибки чтения блокируют отправку. В 9.44 схемы/ошибки каталогов Filters сохраняют последние шлюзы, блокируют недостоверный route/маппинг; выборный GRE GET сообщает 503 при отказе. В 9.45 показано время получения правил/каталогов Filters и отдельное подтверждение записи, сбои сохраняют прежнее время. Далее — профильная клавиатурная/адаптивная приёмка Filters; ограничения счётчика, свежести и записи VXLAN остаются открытыми; загрузка данных IPsec и общая приёмка остаются открытыми.
2. Сохранять контекст устройства, введённые значения при ошибке и подтверждать результат операций по API; локальные моки проверяют клиентские сценарии, реальные сетевые операции требуют тестового окружения.
3. В этапе 12 выполнить полный аудит доступности (скринридер, контраст), производительности и сквозную регрессию. Ограничения этапа 8 — удалённые серверы месячного каталога, отсутствие экспорта и автоматического переподключения SSE — остаются явно зафиксированными, без заявления о реализации.

Проверенные экраны Filters — блок 9.46

Референс плана	ПК	Телефон
Data Grid Filtering 2: устройство → свежесть → таблица	Экран	Экран
Sheet 8: Community → действие → подтверждение API	Форма	Форма

Снимки HTTP-фикстур просмотрены; в блоке 9.47 прошли общая регрессия Filters (33 E2E) и production build frontend (34 страницы). Этап 9 остаётся в работе; следующие блоки — ограничения IPsec/VXLAN и общего GRE-каталога по журналу.

В блоках 9.48–9.52 исправлены чтение, readiness, свежесть и контекст IPsec; прошли профильные операции, ПК/телефон и frontend build. Этап 9 открыт; далее VXLAN/GRE.

IPsec — проверенные экраны	ПК	Телефон
Устройство → свежесть → клиенты	Экран	Экран
Клиент → форма → подтверждение API	Форма	Форма
Устройство → peer/сертификаты → действия	Серверы	Сервер

Порядок продолжения и журналирования

Перед работой читать этот план, начало журнала, git status и последние коммиты; сохранять чужие изменения. Затем проверить квоту и выбрать завершённый по смыслу блок текущего этапа.

После блока записать в ux-ui-progress.md:

• результат и затронутые компоненты;
• выполненные проверки и известные ошибки;
• оставшийся объём и точный следующий шаг;
• решения по API и совместимости;
• границы локальной проверки и текущую квоту.

Профильные проверки выполнять после каждого блока. Полная регрессия — после миграции и при итоговой приёмке; между этапами расширять её при изменении общей основы. Не объявлять этап завершённым только по успешной сборке или тестам на моках.

Для новой задачи:

Продолжи UX/UI-план из docs/ux-ui-plan.md по журналу docs/ux-ui-progress.md. Сначала проверь состояние файлов и остаток лимита. Выполни следующий незавершённый блок, проверь результат, обнови журнал и сделай локальный коммит без push.

GRE/VXLAN — локальная визуальная приёмка 2026-09-30

Экран / референс	ПК	Телефон	Схема
GRE · List 9 / Stats 12	Снимок	Снимок	Устройство → сводка среза → туннели
GRE · Sheet 8	Форма	Форма	Контекст → поддерживаемые поля → подтверждение API
VXLAN · Data Grid Filtering 2	Снимок	Снимок	Устройство → подтверждённый срез → просмотр
VXLAN · Sheet 8	Экспорт	Экспорт	Снимок → актуальность → код → копирование/файл

HTTP-фикстуры; layout/клавиатура проверены. Production frontend build и 183 E2E прошли в 9.63. RouterOS/JWT остаются отдельной приёмкой; актуальная точка продолжения — в журнале.

Этап 9 завершён 2026-09-30 в границах локальной приёмки (209 E2E, frontend/backend build). Внешние ограничения — журнал 9.64. Следующий этап — маршрутизация/диагностика (10); схема и референсы сохраняются, сетевые правила применения не меняются.

Этап 10 начат 2026-09-30. Карта API, референсы, схема и совместимость: ux-ui-stage-10.md. Точная точка продолжения — в журнале.

BGP — локальная визуальная приёмка 2026-09-30

Экран / референс	ПК	Телефон	Схема
BGP · List 9 / Data Grid Filtering 2	Снимок	Снимок	Устройство → свежесть → сводка → фильтры/сессии
BGP · Data Grid детали	Детали	Детали	URL сессии → подтверждённые поля / неизвестные значения
BGP · Stats 12 / Frame	Аналитика	Аналитика	Точный срез → достоверные суммы → сравнение

27 E2E/сборки прошли; реальные RouterOS/JWT/БД не проверены. Далее — OSPF, точное продолжение в журнале.

OSPF — локальная визуальная приёмка 2026-09-30

Экран / референс	ПК	Телефон	Схема
Интерфейсы · List 9 / Stats 12	Снимок	Снимок	Устройство → свежесть → интерфейсы → подтверждённая операция
Соседи · Data Grid Filtering 2	Снимок	Снимок	Поиск → один срез графа/таблицы → фактическое состояние
Детали · Frame	Снимок	Снимок	URL узла → Router ID → соседи/интерфейсы → возврат фокуса
BFD · Data Grid / Stats 12	Снимок	Снимок	Срез → состояния → наблюдаемые таймеры/счётчики

HTTP-фикстуры; локальная приёмка: 43 основных + 8 source E2E, 9 unit, production frontend. Реальный RouterOS/JWT/БД не проверен. Далее рекурсивные маршруты; точное продолжение в журнале.

Рекурсивные маршруты — локальная визуальная приёмка 2026-09-30

Экран / референс	ПК	Телефон	Схема
Data Grid Filtering 2 / List 9	Детали	390 px, 320 px	Устройство → свежесть → группа/таблица → endpoints
Sheet 8	Форма	390 px, 320 px	Полный снимок → параметры → подтверждение API → возврат фокуса

48 основных + 8 source E2E, backend recursive regression и production frontend прошли. HTTP-фикстуры; RouterOS/DB/JWT остаются внешней приёмкой. Далее оптимизатор по журналу.

Оптимизатор — локальная визуальная приёмка 2026-10-01

Экран / референс	ПК	Телефон	Схема
Сводка · Stats 12 / Frame	Снимок	390 px, 320 px	Источник → объяснение модели → сводка → OSPF
Настройки · Settings 16	Снимок	390 px, 320 px	Пороги → вес → локальный пересчёт
Community · Data Grid Filtering 2	Снимок	390 px, 320 px	Устройство → базовый расчёт → модельная рекомендация → закрепление

47 основных + 8 source E2E, backend optimizer/live-maps, production frontend/backend прошли. Исходные значения отдельно от модели; Community apply недоступен, демо только симуляция. HTTP/DI фикстуры; реальный RouterOS/JWT/БД остаётся внешней приёмкой. Далее карта/терминал; ограничения и точное продолжение — в журнале.

Карта сети — промежуточные экраны 2026-10-01

Экран / референс	ПК	Телефон	Схема
Оболочка · Frame / API	Обзор	390 px, 320 px	Источник → свежесть → слои/фильтры → карта
Детали · Frame / List 9	Детали	390 px, 320 px	Устройство → фактические поля → действия → возврат

Оболочка и клавиатурные действия проверены (35 + 12 E2E). Камера и читаемость малой топологии доработаны в 10.53 (16 E2E + 2 unit). Pointer/touch и пустые состояния приняты в 10.54: 39 основных + 12 source E2E, 10 unit и production frontend build. Реальные RouterOS/JWT/БД остаются внешней приёмкой; далее терминал.

Терминал: локальная приёмка 10.57

REST запрос → ожидание → подтверждённый output / ошибка с сохранением команды. Выбор устройства и поле команды остаются доступными на ПК и телефоне. Референс — существующий ReUI Frame и List 9; детали проверок в журнале.

Экран	ПК	Телефон
Готовность	PNG	390 px, 320 px
Вывод	PNG	390 px, 320 px

Диагностика: экраны 10.69

Референс — существующий ReUI Frame/FramePanel и List 9. Устройство → параметры → подтверждённый ответ API/ошибка → копирование или удаление. Расписание относится к 11Б.

Экран	ПК	Телефон
Готовность	PNG	390 px, 320 px
Вывод	PNG	390 px, 320 px

Актуальное продолжение 2026-10-01

Этап 10 принят локально (10.71): 235 основных + 52 source E2E, 42 unit, frontend/backend build. Реальный RouterOS/Portal/PostgreSQL остаётся внешней приёмкой. Далее 11А — пользователи, контейнеры, сертификаты, резервирование; затем 11Б и 12. История прежних контрольных точек выше не заменяет актуальный журнал.