MikrotikManager/docs/ux-ui-progress.md

UX/UI: журнал реализации

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

• План: ReUI PRO, Frame, base-nova; KpiStatGrid, ServerTileRail и CodeExportSheet остаются источниками общих композиционных решений.
• Работа последовательно, без субагентов. После каждого завершённого этапа — локальный коммит на русском, без push.
• В начале этапа и после значимых проверок читать пятичасовой лимит. При остатке 25% и ниже не начинать следующий блок; закончить проверки и журнал.
• Этапы 2–4 выполнять в отдельной ветке codex/reui-v9-migration; не выпускать её до завершения миграции всех потребителей.
• Локально доступны моки. Проверки операций должны идти по обычному API-пути с подменой HTTP-ответов в тестах: встроенный mock-режим обходит запросы и не доказывает корректность live-ветки.
• Реальное применение RouterOS, сетевой опрос и экспорт сертификатов требуют отдельной приёмки в тестовом окружении. Не считать их проверенными по мокам.
• Перед продолжением читать git status и новые коммиты; сохранять изменения других задач.

Состояние этапов

Этап	Результат	Статус
0	Исходная база, карта миграции, проверки и обзор экранов	Завершён 2026-09-13
1	Достоверность сохранения, удаления, включения и опроса серверов	Завершён 2026-09-13
2	Общая оболочка Data Grid/TanStack v9, Filters и эталон серверов	Следующий, отдельное окно
3	Основные таблицы и справочники	Не начат
4	Остальные таблицы, удаление старых API, общая регрессия	Не начат
5	Состояния данных, свежесть, частичные сбои, гонки polling	Не начат
6	Навигация и дашборд	Не начат
7	Серверы и мониторинг: детали, формы, URL-контекст, права	Не начат
8	Трафик и статистика	Не начат
9	VPN, Firewall и Filters	Не начат
10	Маршрутизация, диагностика, карта и терминал	Не начат
11А	Пользователи, контейнеры, сертификаты и резервные копии	Не начат
11Б	Оповещения, сбор данных, интеграции, релизы и настройки	Не начат
12	Итоговая доступность, адаптивность, производительность и регрессия	Не начат

Этап 0 — исходная база

Исходный HEAD: f8e7437210. На старте уже изменены 25 файлов навыков ReUI, AGENTS.md и создан .codex/config.toml. Они относятся к предыдущей настройке и не входят в коммит этого этапа. .codegraph/daemon.pid — служебный файл, не коммитить.

Изменение: в lib/format-service-path-label.test.ts убрано расширение .ts из локального импорта. Это устраняет TS5097 без ослабления tsconfig и без изменения UI или backend.

Проверки

Проверка	Результат
tsc --noEmit --incremental false	Успешно после исправления импорта
tsx lib/format-service-path-label.test.ts	Успешно
tsx backend/src/services/ipsec-config.test.ts	Успешно
tsx backend/src/services/ros-file-contents.test.ts	Успешно
npm run build	Успешно: контракты, Next.js, TypeScript, 34 статические страницы
eslint .	Не проходит: 494 ошибки, 11015 предупреждений; включает артефакты .ci/docker
Тот же lint-отчёт без файлов .ci/docker	81 ошибка, 134 предупреждения; это фильтрация отчёта, не отдельный запуск

Lint hotspots: components/reui/sortable.tsx (8 ошибок), app/(main)/probes/page.tsx (8), components/reui/filters.tsx (6), app/(main)/network-map/page.tsx (5), app/(main)/firewall/page.tsx (4), components/reui/date-selector.tsx (3). Не исправлять их массово в этапе 1. Изоляцию generated-каталогов в ESLint вынести в отдельный небольшой блок перед миграцией; правила проверок не отключать.

В песочнице сборка не могла записать существующие dist-файлы (EPERM), а tsx падал в uv_os_get_passwd. Повторные запуски вне песочницы прошли; это ограничения окружения, не ошибки приложения.

Исходные экраны

Просмотрены /servers и /dashboard через локальную production-сборку на 127.0.0.1:3000, без backend, в mock-режиме. Скриншоты показаны в истории задачи; отдельные PNG в репозиторий не добавлены.

• Серверы: 9 записей, 7 онлайн; Frame/KPI, вкладки типов, фильтры и поиск работают как исходная композиция. На viewport 1280×720 KPI занимают две строки; часть правых колонок таблицы за пределами видимой области. Проверку прокрутки и мобильной компоновки выполнить на этапе 7.
• Дашборд: KPI с подписями «Флот», «Оверлей», «BGP Rx», «Здоровье»; ниже крупные быстрые переходы, затем график задержки и события. Очередь проблем не доминирует на первом экране — целевая перестройка этапа 6.
• Это исходный визуальный обзор, не сквозная проверка операций. Проверки консоли, клавиатуры, других размеров и тем остаются в профильных этапах.

Сохраняемые исправления IPsec

Последние коммиты исправляют общий IKEv2-peer с отдельными сертификатами клиентов, декодирование .p12 из RouterOS /file/get, отсутствие неподдерживаемых proposal-ключей в .sswan и горизонтальное переполнение шторки сертификата. Эти сценарии включить в регрессию этапов 4, 9, 11А. Ограничение passphrase брать из @mmapp/contracts (IPSEC_MIN_PASSPHRASE), не дублировать. Тест ipsec-config проходит отдельно, но отсутствует в общей npm test-цепочке backend; подключить его при следующей правке тестовой инфраструктуры.

Задание этапа 1 (выполнено)

Начать с app/(main)/servers/page.tsx, components/data-grids/servers-data-grid.tsx, shared/api/servers.ts и моделей серверов. Не начинать миграцию ReUI в этом этапе.

1. Сохранение: блокировать повторную отправку; закрывать форму и менять список только после успеха API. На 400/403/500/сетевой ошибке сохранять значения и показывать сообщение рядом с формой.
2. Редактирование: загрузить полную модель до разрешения сохранения; защитить от ответа другого сервера и закрытой формы. Не выводить enabled из online/offline. Изменение подключения сбрасывает прежний результат проверки.
3. Удаление: подтверждение конкретного объекта; не удалять строку при ошибке API; блокировать повтор.
4. Включение: обновлять enabled через API, фактическую доступность не подменять локальным переключением.
5. Опрос: результат по устройству; массово не более четырёх запросов одновременно, повтор только неуспешных. Ошибку перечитывания списка отличать от результата самого опроса.
6. Добавить проверки по HTTP-пути frontend с контролируемыми ответами, а не только встроенный mock. Успех, 403, 500, таймаут, двойное нажатие и смена объекта во время запроса обязательны.
7. Типизация, lint изменённых файлов, профильные тесты и браузерная проверка; обновить журнал и сделать отдельный локальный коммит без push.

Остановка после этапа 0: на последней проверке осталось 15% пятичасовой квоты (было 35% на старте). Этап 1 не начат по согласованному правилу резерва. При продолжении сначала проверить свежие лимиты.

Этап 1 — достоверность операций

Исходный HEAD: 88326d9. Изменения предыдущей настройки ReUI и служебные файлы не входят в коммит этапа.

• В app/(main)/servers/page.tsx сохранение закрывает форму только после подтверждения API. Ошибки остаются рядом с формой, повторные отправки блокируются синхронным замком. Пока загружаются детали, сохранение недоступно; ошибку загрузки можно повторить. Поздний ответ другого объекта игнорируется.
• Удаление требует подтверждения имени и адреса, при ошибке строка и диалог остаются. Включение изменяет enabled через API и не подменяет измеренный online/offline. Изменение параметров подключения сбрасывает прежний результат проверки.
• lib/server-operations.ts содержит замок операций, понятные сообщения ошибок и очередь опроса максимум по четыре запроса. Результат показан по каждому серверу, повторяются только неудачные запросы. Ошибка последующего обновления списка отделена от результата опроса, прежние строки сохраняются.
• В shared/api/servers.ts ожидание ограничено 30 секундами, для опроса — 60. Таймаут явно означает неизвестный результат: клиентское прерывание не отменяет действие на backend. Контракты и маршруты API не изменены.
• В components/data-grids/servers-data-grid.tsx действия блокируются на время операции; выключенный сервер помечается отдельно от доступности.
• Добавлены Playwright, playwright.config.ts, tests/e2e/servers.spec.ts и команда npm run test:servers. Используется установленный Microsoft Edge, свободный порт 3100 и отдельный Next dev процесс. Запросы API и health перехвачены тестами; встроенный mock-режим не используется. Отчёты исключены из Git.

Проверки этапа 1

Проверка	Результат
npm run test:servers	14 браузерных тестов прошли: создание, сохранение 400/403/500 и повтор, двойное нажатие, удаление с повтором, enabled, загрузка деталей и смена объекта, массовый опрос и повтор, таймаут, отдельная ошибка обновления списка, запрет включения, сброс проверки подключения
TypeScript	Проверка без emit прошла; production build также проверяет типы
npm run build	Успешно: contracts, Next.js, TypeScript, 34 статические страницы
ESLint изменённых TS/TSX-файлов	0 ошибок, 1 известное предупреждение React Compiler о TanStack v8 useReactTable
ReUI get_audit_checklist	Получен; сохранены установленные компоненты, Frame, семантические токены и типизированный API. Требование TanStack v9 остаётся этапам 2–4; полная доступность и адаптивность — профильным этапам и приёмке

Моки достаточны для этих клиентских сценариев. Реальный backend, права реальных пользователей и применение RouterOS не проверены. Общие исходные ошибки lint перечислены в этапе 0; они не устранены этим этапом. Полную регрессию повторять после миграции общей основы.

Следующий шаг — этап 2

В новом окне проверить лимиты, git status и последние коммиты. Создать ветку codex/reui-v9-migration, перепроверить актуальный совместимый API ReUI Data Grid/TanStack и Filters. Мигрировать общую оболочку и одну таблицу серверов, закрепить зависимости и описать образец переноса. Сохранить проверки операций из этапа 1. Ветку не выпускать до завершения этапа 4. После этапа — отдельный локальный коммит без push.

Карта миграции

Текущая связка: @tanstack/react-table ^8.21.3, @tanstack/react-virtual ^3.14.4, base-nova. Актуальный ReUI MCP ранее подтвердил useTable/dataGridFeatures для Data Grid и дерево FilterQuery вместо filters/onChange для Filters. Перед установкой перепроверить совместимые версии, сохранить семантику существующих фильтров (простые условия → AND) и закрепить lockfile.

Источники: контракт UI, таблицы PRO, API Data Grid, API Filters.

Прямые потребители TanStack (47)

• components/data-grids/asns-data-grid.tsx
• components/data-grids/backups-data-grid.tsx
• components/data-grids/bgp-sessions-data-grid.tsx
• components/data-grids/certificates-data-grid.tsx
• components/data-grids/communities-data-grid.tsx
• components/data-grids/compact-data-grid.tsx
• components/data-grids/data-collection-scheduler-data-grid.tsx
• components/data-grids/domains-data-grid.tsx
• components/data-grids/filters-data-grid.tsx
• components/data-grids/firewall-rules-data-grid.tsx
• components/data-grids/firewall-scenario-rules-data-grid.tsx
• components/data-grids/gre-pools-data-grid.tsx
• components/data-grids/gre-tunnels-data-grid.tsx
• components/data-grids/ip-ranges-data-grid.tsx
• components/data-grids/ospf-bfd-data-grid.tsx
• components/data-grids/ospf-neighbors-data-grid.tsx
• components/data-grids/ospf-routes-data-grid.tsx
• components/data-grids/probes-schedule-data-grid.tsx
• components/data-grids/probes-speed-probes-data-grid.tsx
• components/data-grids/recursive-routes-data-grid.tsx
• components/data-grids/route-optimizer-comm-recs-data-grid.tsx
• components/data-grids/route-optimizer-full-routes-data-grid.tsx
• components/data-grids/route-optimizer-ospf-preview-data-grid.tsx
• components/data-grids/route-optimizer-wan-matrix-data-grid.tsx
• components/data-grids/servers-data-grid.tsx
• components/data-grids/shared/data-grid-shell.tsx
• components/data-grids/shared/data-grid-sort-header.tsx
• components/data-grids/subusers-data-grid.tsx
• components/data-grids/traffic-flows-data-grid.tsx
• components/data-grids/uptime-resources-data-grid.tsx
• components/data-grids/uptime-speed-history-data-grid.tsx
• components/data-grids/users-data-grid.tsx
• components/data-grids/vxlan-data-grid.tsx
• components/data-grids/wireguard-data-grid.tsx
• components/data-grids/wireguard-peers-grid.tsx
• components/data-table.tsx
• components/ipsec/ipsec-users-grid.tsx
• components/reui/data-grid/data-grid-column-filter.tsx
• components/reui/data-grid/data-grid-column-header.tsx
• components/reui/data-grid/data-grid-column-visibility.tsx
• components/reui/data-grid/data-grid-table-dnd-rows.tsx
• components/reui/data-grid/data-grid-table-dnd.tsx
• components/reui/data-grid/data-grid-table-virtual.tsx
• components/reui/data-grid/data-grid-table.tsx
• components/reui/data-grid/data-grid.tsx
• components/traffic/flow-analytics-panel.tsx
• components/traffic/flow-traffic-map.tsx

Прямые потребители Filters (6)

• app/(main)/backups/page.tsx
• app/(main)/bgp/page.tsx
• app/(main)/servers/page.tsx
• app/(main)/statistics/page.tsx
• components/backups/backups-history.tsx
• components/data-page-toolbar.tsx