harbor-net/docs/goals/windows-client-three-panel-ui/PLAN.md

# План реализации трехпанельного интерфейса Windows Client

**Intent:** Перестроить текущий монолитный экран Windows-клиента в три переключаемые панели: read-only сводка, настройки ProxiFyre и настройки VPN/прокси.
**Current Behavior:** Сейчас `apps/windows-client/src/app/App.tsx` смешивает статус ProxiFyre, выбор маршрута, Local sing-box, список приложений, применение конфига и журнал событий на одном экране. Пользователь сразу видит все управляющие элементы, поэтому главная страница не отделяет состояние системы от действий.
**Expected Outcome:** Пользователь открывает приложение и сначала видит чистую сводку без редактирования. Управление ProxiFyre, список приложений и диагностика компонента находятся во второй панели. Выбор локального или внешнего прокси, подписка, серверы, ping и генерация VPN/proxy-конфига находятся в третьей панели.
**Target-Perspective Output:** Пользователь может за 5-10 секунд понять, работает ли система, запущен ли ProxiFyre, какой маршрут применен, локальный он или внешний, и какой файл конфига активен. Затем пользователь переключается во вкладку ProxiFyre для сервисных действий и списка приложений либо во вкладку VPN/Прокси для выбора маршрута и проверки соединения.
**Truth Owner:** Rust/Tauri команды и JSON-файлы под `C:\ProgramData\VpnProxy` остаются источником правды. React хранит только состояние текущей вкладки, черновики полей, loading/error/success состояния и производные view model для отображения.
**Contract Boundary:** UI вызывает существующие typed Tauri commands из `apps/windows-client/src/api/tauriCommands.ts`. Rust владеет профилями, targets, компонентами, local-singbox config/cache, generated config и применением ProxiFyre. Новые UI-панели не должны писать напрямую в derived/generated артефакты.
**Cutover:** Текущий единый экран в `App.tsx` заменяется shell-layout с тремя вкладками. Существующие функции загрузки, установки, запуска, выбора сервера, ping, apply и notifications переиспользуются, но раскладываются по панелям.
**Displaced Path:** Убирается доминирующий путь "все настройки на одной странице". Сводка не дублирует формы и кнопки apply; она только отображает состояние и ведет пользователя к нужной панели.
**Value Density:** Самый ценный срез: верхняя навигация по трем панелям плюс read-only сводка, которая корректно собирает текущее состояние из уже загружаемых данных. После этого переносим существующие настройки без изменения backend-контракта.
**Evidence Gate:** Приемка требует не только `npm run build`, но и доказательство глазами пользователя: скриншоты/состояния всех трех панелей, read-only поведение сводки, dirty/apply состояние на вкладках настроек, responsive-проверка.
**Acceptance Evidence:** `npm run build` проходит; при необходимости Rust tests проходят для нового ping/target DTO; в `EVIDENCE.md` записаны скриншоты или browser/Tauri state для трех панелей, а также проверка, что сводка не содержит изменяющих controls.
**Evidence Lane:** Доказательства исполнения будут фиксироваться в `docs/goals/windows-client-three-panel-ui/EVIDENCE.md`.
**Kill Criteria:** Нет input/button apply на сводке; нет второго источника состояния маршрута; нет скрытой установки компонентов при открытии вкладок; нет изменения root `src/web` или root `src/server`; нет расхождения терминов ProxiFyre / Local sing-box / внешний прокси.
**Architecture Slice:** Изменения сосредоточены в `apps/windows-client/src/app/App.tsx`, `apps/windows-client/src/styles/app.css`, при необходимости `apps/windows-client/src/api/tauriCommands.ts`, `apps/windows-client/src/domain/types.ts`, `apps/windows-client/src-tauri/src/commands.rs` и связанных tests для проверки внешнего target ping.
**Plan Review Gate:** Требуется PRE review перед исполнением.

## Краткий дизайн-brief

Продукт: Windows desktop utility для маршрутизации выбранных приложений через ProxiFyre и внешний или локальный proxy path.

Визуальный источник: текущий темный utilitarian-стиль `apps/windows-client/src/styles/app.css`: компактные панели, 4px radius, статусные точки, lucide icons, сдержанные borders, без landing/hero.

Интерактивность: полная. Вкладки, меню, установка/запуск/остановка, добавление приложений, выбор маршрута, подписка, выбор сервера, ping, генерация и apply должны работать через реальные текущие команды.

## Архитектурный срез

Файлы для создания:
- `docs/goals/windows-client-three-panel-ui/PLAN.md`
- `docs/goals/windows-client-three-panel-ui/GOAL.md`
- `docs/goals/windows-client-three-panel-ui/EVIDENCE.md`

Файлы для изменения:
- `apps/windows-client/src/app/App.tsx`
- `apps/windows-client/src/styles/app.css`
- `apps/windows-client/src/api/tauriCommands.ts`, только если понадобится новый внешний proxy ping command.
- `apps/windows-client/src/domain/types.ts`, только если понадобится новый DTO для внешнего proxy ping.
- `apps/windows-client/src-tauri/src/commands.rs`, только если понадобится новый внешний proxy ping command.
- `apps/windows-client/src-tauri/src/main.rs`, только для регистрации нового command.
- `apps/windows-client/src-tauri/tests/*`, только для нового command или сохранения существующих контрактов.
- `docs/goals/windows-client-three-panel-ui/EVIDENCE.md`, при исполнении.

Файлы, которых не касаться:
- `src/web/*`
- `src/server/*`
- Docker/compose/entrypoint файлы.
- Installer scripts, если UI-разрез не требует изменения install boundary.
- Старые goal packages, кроме ссылок в evidence при необходимости.

Источник правды:
- `C:\ProgramData\VpnProxy\config\profiles.json`
- `C:\ProgramData\VpnProxy\config\targets.json`
- `C:\ProgramData\VpnProxy\config\components.json`
- `C:\ProgramData\VpnProxy\config\local-singbox.json`
- `C:\ProgramData\VpnProxy\state\singbox-subscription-cache.json`
- `C:\ProgramData\VpnProxy\state\activity.json`

Производные артефакты:
- `C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json`
- `C:\ProgramData\VpnProxy\generated\sing-box-config.json`

Путь чтения:
- React вызывает `get_saved_state`, `get_components`, `get_proxifyre_setup_status`, `get_singbox_status`, `get_singbox_setup_status`.
- Summary panel строит производную view model из уже загруженных `profiles`, `targets`, `components`, `setupStatus`, `singBoxStatus`, `generatedConfigPath`, `serverPings` и `hasUnappliedChanges`.
- ProxiFyre panel читает `proxyfier`, `setupStatus`, `items`, `loadedProfiles`, `generatedConfigPath`.
- VPN/Proxy panel читает `routeMode`, `proxyInput`, `singBoxStatus`, `singBoxSetupStatus`, `serverPings`, selected server и target.

Путь записи:
- ProxiFyre panel пишет только через существующие handlers: install/start/stop/uninstall ProxiFyre, add/remove app items, `updateConfig`.
- VPN/Proxy panel пишет только через route/subscription/server/config handlers: `changeRouteMode`, `changeProxyInput`, `saveSingBoxSubscription`, `fetchSingBoxSubscription`, `forgetSingBoxSubscription`, `selectSingBoxServer`, `ping*`, `generateSingBoxConfig`, service actions, `updateConfig`.
- Summary panel не пишет ничего, кроме глобального non-mutating refresh, если refresh остается в header.

Граница контракта:
- `App.tsx` отвечает за orchestration и view composition.
- Typed Tauri command wrappers отвечают за API shape.
- Rust commands отвечают за validation, persistence, service/check actions и generated config.
- CSS отвечает за layout, tab transitions, loading skeletons, menu/popover transitions и responsive behavior.

Точки интеграции:
- `routeMode === 'external'` показывает внешний/глобальный proxy target.
- `routeMode === 'local-singbox'` показывает Local sing-box path.
- `hasUnappliedChanges` остается общим индикатором для вкладок настроек.
- `log-dock` остается глобальным и не привязывается к одной вкладке.

Миграция и переключение:
- Сначала добавить `activePanel` и shell-вкладки без изменения бизнес-логики.
- Затем перенести JSX блоки в три render-функции или локальные компоненты в том же файле.
- После стабилизации можно вынести панели в отдельные файлы, но только если это уменьшит размер `App.tsx` без изменения контрактов.

Гейт приемочных доказательств:
- Доказательство должно показать каждую панель отдельно.
- Должно быть видно, что summary read-only.
- Должно быть видно, что actions доступны на вкладках настроек.
- Должно быть видно, что mobile layout не ломает tab bar, app list, server list и bottom log dock.

## Детальное описание интерфейса

### Общая оболочка

Верхняя часть экрана остается компактной, но становится навигационной:
- слева: `VPN Proxy` и заголовок `Прокси для приложений`;
- справа: кнопка `Обновить`, которая запускает текущий `refresh`;
- под заголовком: segmented tabs из трех пунктов: `Сводка`, `ProxiFyre`, `VPN / Прокси`.

Поведение вкладок:
- активная вкладка имеет более яркий border/background и status underline;
- при клике меняется только `activePanel`, данные не перезагружаются автоматически;
- переход между панелями: fade + легкий slide по Y на 6-8px, длительность 140-180ms;
- при `prefers-reduced-motion: reduce` transition отключается;
- keyboard support: tabs работают как buttons с `aria-pressed` или `role="tablist"`/`role="tab"`/`role="tabpanel`.

Глобальные состояния:
- `isLoading` показывает skeleton в содержимом активной панели;
- `isDetectingComponents` показывает проверку компонентов без блокировки переключения вкладок;
- `log-dock` остается закрепленным снизу и продолжает показывать success/error/info;
- dirty/apply bar появляется только на вкладках `ProxiFyre` и `VPN / Прокси`, не на read-only сводке.

### Панель 1: `Сводка`

Назначение: главная read-only страница, которая отвечает на вопрос "что сейчас происходит с системой".

Содержимое:
- `Статус системы`: одно агрегированное состояние `Работает`, `Требует внимания`, `Не настроено`, `Проверяю`.
- `ProxiFyre`: установлен/не установлен, запущен/остановлен, путь или первая проблема.
- `Подключение`: корректность текущего маршрута: ProxiFyre running, выбран target, для Local sing-box выбран сервер и служба запущена, для внешнего proxy валиден host/port и есть последний результат ping/check, если он уже запускался.
- `Маршрут`: `Локальный прокси` или `Внешний прокси`; рядом человекочитаемый endpoint: `127.0.0.1:1080`, LAN адрес Local sing-box или внешний `host:port`.
- `Активный сервер`: selected Local sing-box server tag, если применим; иначе `не используется`.
- `Приложения в профиле`: количество настроенных process/folder/exe items.
- `Примененный конфиг`: путь `generatedConfigPath` для ProxiFyre и, если есть, `singBoxStatus.generatedConfigPath`.
- `Состояние изменений`: `Все применено` или `Есть непримененные изменения`, но без кнопки apply.
- `Последнее событие`: последний элемент `logEntries` или activity, если он уже доступен на клиенте.

Визуально:
- это не форма, а read-only dashboard;
- вместо input используются value rows: label слева, value справа, status dot рядом;
- важные значения не спрятаны в tooltip;
- длинные пути переносятся через `overflow-wrap: anywhere`;
- при широкой ширине блоки идут сеткой 2-3 колонки, на узком экране складываются в один столбец.

Действия при нажатии:
- клик по строке `ProxiFyre` переключает на вкладку `ProxiFyre`;
- клик по строке `Маршрут` или `Активный сервер` переключает на вкладку `VPN / Прокси`;
- клик по `Приложения в профиле` переключает на вкладку `ProxiFyre` и фокусирует список приложений;
- никаких input, add/remove, install/start/stop, apply или clear на этой панели нет.

Анимации:
- при refresh status rows показывают мягкий shimmer/skeleton;
- status dot для `Проверяю` использует текущий spinner pattern;
- при смене агрегированного статуса value row подсвечивается на 400-600ms через background flash;
- предупреждение `Есть непримененные изменения` может слегка проявляться fade-in, но без кнопки.

### Панель 2: `ProxiFyre`

Назначение: диагностика и настройка того, что относится именно к ProxiFyre и маршрутизируемым приложениям.

Содержимое:
- главный статус ProxiFyre: найден/не найден, запущен/остановлен, path/problem;
- setup/modules list из `setupStatus.items`: binary/service/install folder/config capability и все, что возвращает backend;
- service controls: install, start, stop, uninstall через меню `MoreHorizontal`;
- `Список приложений`: настроенные process/folder/exe items, сгруппированные или помеченные типом;
- счетчик приложений и отдельные пустые состояния для "ничего не настроено";
- generated ProxiFyre config path;
- dirty/apply state для изменений списка приложений.

Визуально:
- верхний status block сохраняет текущий `finder-card` pattern, status-light и animated border glow;
- modules list разворачивается внутри панели через `Состав ProxiFyre` / `Что будет установлено`;
- список приложений становится основной частью панели, а не хвостом общей страницы;
- app rows имеют icon по типу: process, exe, folder;
- add-toolbar остается с icon buttons: process, exe, folder, с tooltip/title.

Действия при нажатии:
- `Установить`: вызывает текущий `installProxiFyrePackage`, показывает loading на кнопке и animated border;
- `Запустить`/`Остановить`: вызывает `setProxiFyreServiceRunning`, блокирует повторный клик на время action;
- `Еще` открывает popover с `Удалить ProxiFyre`; uninstall сохраняет текущий confirm boundary;
- `Состав ProxiFyre`: раскрывает/скрывает setup details;
- `Добавить процесс`: открывает inline input, Enter добавляет, Escape закрывает;
- `Добавить EXE`: открывает file picker через Tauri dialog;
- `Добавить папку`: открывает directory picker;
- `Удалить` у app row удаляет item и выставляет `hasUnappliedChanges`;
- `Применить в ProxiFyre`: валидирует items и текущий route, затем вызывает `updateConfig`;
- `Открыть конфиг`: открывает generated config location, если эта кнопка остается в ProxiFyre panel.

Анимации:
- поиск/установка/запуск используют существующий moving border glow;
- раскрытие modules list: height/opacity transition 160-220ms;
- добавление app row: fade/slide-in;
- удаление app row: быстрый opacity collapse, если реализация не усложнит state;
- dirty bar появляется slide-up/fade-in над command row;
- меню `Еще`: fade + scale 0.98 -> 1.

### Панель 3: `VPN / Прокси`

Назначение: выбор маршрута и настройка самого proxy/VPN path.

Содержимое:
- segmented control `Внешний прокси` / `Локальный прокси`;
- для `Внешний прокси`: input адреса `socks5://host:port` или `host:port`, validation hint, кнопка проверки доступности;
- для `Локальный прокси`: Local sing-box status, install/start/stop/uninstall, setup details, локальный и LAN endpoint, selected server, generated sing-box config path;
- subscription input: paste URL/link, load/update, clear;
- server list из `singBoxStatus.cache.servers`;
- ping controls: `Ping все`, per-server ping action, отображение latency/error рядом с server row;
- generate sing-box config action;
- route preview: `Выбранные приложения -> ProxiFyre -> внешний proxy` или `Выбранные приложения -> ProxiFyre -> Local sing-box -> selected server`;
- dirty/apply state для route/proxy/subscription/server changes.

Визуально:
- mode switch остается заметным вверху панели;
- внешний proxy block не должен выглядеть менее важным, потому что это полноценный route path;
- Local sing-box block визуально похож на ProxiFyre status block, но расположен только в VPN/Proxy panel;
- server list может оставаться grid, но row должен показывать selected dot, server name и ping badge;
- для плохого ping row получает amber/red border, для хорошего ping зеленый badge;
- route preview оформляется как read-only line/flow, без декоративной схемы.

Действия при нажатии:
- `Внешний прокси`: меняет `routeMode` на `external`, выставляет dirty state;
- ввод адреса proxy: обновляет `proxyInput`, выставляет dirty state, frontend validation показывает ошибки до apply;
- `Проверить`: парсит внешний proxy и вызывает новый или переиспользованный backend TCP connect check; результат сохраняется в UI state и отображается на этой панели и в summary;
- `Локальный прокси`: меняет `routeMode` на `local-singbox`, выставляет dirty state;
- `Установить Local sing-box`: вызывает текущий install handler;
- `Запустить`/`Остановить`: вызывает текущий service handler;
- `Состав Local sing-box`: раскрывает setup details;
- `Подробности`: показывает локальный endpoint, LAN, server, binary path, config path;
- `Загрузить`/`Обновить` подписку: вызывает текущий subscription flow;
- `Очистить`: вызывает forget flow, очищает server pings и selected server;
- click по server row: вызывает `selectSingBoxServer`, выставляет dirty state;
- `Ping все`: вызывает `pingAllSingBoxServers`;
- per-server ping: вызывает существующий `pingSingBoxServer(tag)`, если добавляем кнопку/иконку в row;
- `Конфиг`: вызывает `generateSingBoxConfig`;
- `Применить маршрут`: вызывает общий `updateConfig`.

Анимации:
- mode switch меняет активный segment без скачка высоты;
- при смене mode panel content cross-fade;
- ping badge показывает loading spinner только на проверяемых row;
- server row после ping обновляет latency с короткой подсветкой;
- subscription/server empty state появляется fade-in;
- generated config success подсвечивает config path на 400-600ms.

## Задачи исполнения

### Задача 1: Ввести shell вкладок и производные view models

Разрешенные файлы:
- `apps/windows-client/src/app/App.tsx`
- `apps/windows-client/src/styles/app.css`

Ожидаемый результат:
- `activePanel: 'summary' | 'proxifyre' | 'proxy'`.
- Общий header с tab control.
- Производные функции для summary: system status, route label, endpoint label, config labels, app count, issue list.
- Старые JSX-блоки временно остаются, но render path начинает разделяться.

Проверка:
- `cd apps/windows-client && npm run build`

Приемочные доказательства:
- Screenshot/state показывает три tab buttons и корректную активную вкладку.

Параллельное выполнение: нет, общий `App.tsx`.

### Задача 2: Реализовать read-only панель `Сводка`

Разрешенные файлы:
- `apps/windows-client/src/app/App.tsx`
- `apps/windows-client/src/styles/app.css`

Ожидаемый результат:
- Summary panel без input/apply/install/start/stop/delete.
- Статус системы, ProxiFyre, подключение, маршрут, активный server, apps count, config paths, dirty state.
- Навигационные клики по read-only строкам переводят на соответствующие вкладки.

Проверка:
- `cd apps/windows-client && npm run build`
- Manual DOM/visual check: на summary нет изменяющих controls.

Приемочные доказательства:
- Screenshot summary panel.
- Запись в evidence: какие элементы read-only и куда ведут navigation clicks.

Параллельное выполнение: нет.

### Задача 3: Перенести ProxiFyre и список приложений во вторую панель

Разрешенные файлы:
- `apps/windows-client/src/app/App.tsx`
- `apps/windows-client/src/styles/app.css`

Ожидаемый результат:
- ProxiFyre panel содержит status card, setup details, service actions, app add/remove, generated config path и apply/open config actions.
- Существующие handlers переиспользованы без изменения backend ownership.
- `hasUnappliedChanges` продолжает работать после add/remove.

Проверка:
- `cd apps/windows-client && npm run build`

Приемочные доказательства:
- Screenshot ProxiFyre panel с service status и apps list.
- Проверка add/remove вызывает dirty state.

Параллельное выполнение: нет.

### Задача 4: Перенести VPN/Proxy route settings в третью панель

Разрешенные файлы:
- `apps/windows-client/src/app/App.tsx`
- `apps/windows-client/src/styles/app.css`
- `apps/windows-client/src/api/tauriCommands.ts`, если нужен внешний target ping.
- `apps/windows-client/src/domain/types.ts`, если нужен внешний target ping DTO.

Ожидаемый результат:
- VPN/Proxy panel содержит route mode switch, external proxy editor, Local sing-box controls, subscription, server selection, ping, generate config, route preview и apply.
- Внешний proxy path не зависит от Local sing-box.
- Local sing-box UI не показывается на summary и не смешивается с ProxiFyre panel.

Проверка:
- `cd apps/windows-client && npm run build`

Приемочные доказательства:
- Screenshot external proxy mode.
- Screenshot local proxy mode с server list или empty state.

Параллельное выполнение: нет.

### Задача 5: Добавить или переиспользовать проверку доступности внешнего proxy target

Разрешенные файлы:
- `apps/windows-client/src-tauri/src/commands.rs`
- `apps/windows-client/src-tauri/src/main.rs`
- `apps/windows-client/src/api/tauriCommands.ts`
- `apps/windows-client/src/domain/types.ts`
- `apps/windows-client/src-tauri/tests/command_tests.rs` или отдельный focused test.

Ожидаемый результат:
- Если существующих данных недостаточно для "все ли окей с подключением" во внешнем proxy mode, добавить typed command наподобие `ping_proxy_target`.
- Command делает TCP connect check к host/port с timeout, возвращает `{ ok, latency, error }`.
- UI отображает результат в VPN/Proxy panel и summary.
- Это не заменяет apply и не пишет source config.

Проверка:
- `cd apps/windows-client/src-tauri && cargo test command`
- `cd apps/windows-client && npm run build`

Приемочные доказательства:
- Test или manual state показывает успешный/ошибочный result shape.

Параллельное выполнение: частично, если UI DTO names согласованы заранее; интеграция не parallel-safe.

### Задача 6: Привести CSS, анимации и responsive behavior

Разрешенные файлы:
- `apps/windows-client/src/styles/app.css`
- `apps/windows-client/src/app/App.tsx`, только className/ARIA adjustments.

Ожидаемый результат:
- Tab bar, panel transitions, setup expand/collapse, ping badges, dirty/apply bar и responsive grids.
- Нет перекрытия текста, длинные paths/servers переносятся.
- Mobile layout: tabs не ломаются, server list минимум 2 колонки или 1 колонка на очень узком экране, command row складывается.
- `prefers-reduced-motion` отключает декоративные transitions.

Проверка:
- `cd apps/windows-client && npm run build`
- Browser/Tauri visual check на desktop и узком viewport.

Приемочные доказательства:
- Screenshots desktop + narrow viewport.

Параллельное выполнение: нет, потому что зависит от финальной разметки.

### Задача 7: Финальная проверка и evidence

Разрешенные файлы:
- `docs/goals/windows-client-three-panel-ui/EVIDENCE.md`
- При необходимости `apps/windows-client/README.md`, если нужно зафиксировать новую навигацию.

Ожидаемый результат:
- Evidence содержит commands, результаты build/tests, screenshots/state checks и список остаточных рисков.
- Если Tauri service actions не проверялись на реальной Windows elevated среде, это явно помечено как `implemented but unproven` только для service lane.

Проверка:
- `git status --short`
- `cd apps/windows-client && npm run build`
- `cd apps/windows-client/src-tauri && cargo test`, если Rust command менялся.

Приемочные доказательства:
- Summary read-only verified.
- ProxiFyre actions verified.
- VPN/Proxy route switch and ping states verified.
- No root web/server changes.

Параллельное выполнение: нет.

## Prompt для PRE review

Использовать `C:\Users\PC\.agents\skills\krypton-planning\plan-reviewer-prompt.md` со следующими данными:

Файл плана:
- `docs/goals/windows-client-three-panel-ui/PLAN.md`

Исходный запрос:
- Разбить Windows client UI на три переключаемые панели: общая read-only сводка, настройки ProxiFyre, настройки VPN/proxy; подробно описать внешний вид, анимации и действия.

Контракт результата:
- Пользователь сначала видит статус системы и примененный route/config без изменения данных, затем переходит в нужную панель для ProxiFyre или VPN/proxy действий.

Архитектурный срез:
- Основной scope: `apps/windows-client/src/app/App.tsx` и `apps/windows-client/src/styles/app.css`; backend только для внешнего target ping, если текущих команд недостаточно.

Требование к приемочным доказательствам:
- Build/tests плюс screenshots/state proof трех панелей и read-only summary.

Известные non-goals:
- Не менять root `src/web`/`src/server`.
- Не переписывать Tauri backend без нужды.
- Не добавлять скрытую установку компонентов.
- Не делать summary редактируемой.

Опасные пути или слои:
- Дублирование source of truth в React.
- Изменение generated config напрямую.
- Смешивание Local sing-box controls обратно в ProxiFyre panel.
- Потеря external proxy path как полноценного режима.