# Windows Client Interface System

Дата: 2026-07-08

## Направление

Это максимально простая Windows-утилита управления службами и их состояниями. Она не должна ощущаться как VPN-dashboard, SaaS-панель или маркетинговый клиент. Главные глаголы интерфейса:

- проверить состояние;
- установить компонент;
- удалить компонент;
- запустить службу;
- остановить службу;
- обновить/перепроверить состояние;
- добавить приложение/путь;
- применить конфигурацию только когда prerequisites готовы.

Интерфейс должен быть плотным, спокойным, системным и предсказуемым. Пользователь открывает его не для анализа статистики, а чтобы быстро понять "что сейчас установлено, что запущено, что сломано и какую одну кнопку нажать дальше".

## Домен

Ключевые понятия: Windows service, installed/running/stopped/missing, install/uninstall, helper/elevation, ProxiFyre, Local sing-box, selected apps, endpoint, generated config, logs, diagnostics, readiness blockers.

Цветовой мир: темная Windows-оболочка, service console, terminal black, muted slate panels, driver/service green, warning amber, blocked red, focus/navigation blue.

Сигнатура продукта: `Service Control Row` - компактная строка компонента, где слева состояние службы, в центре человекочитаемый статус и путь/деталь, справа ровно одно главное действие плюс меню дополнительных действий. Эта строка должна быть повторяемым паттерном для ProxiFyre, Local sing-box и будущих компонентов.

## Визуальная модель

- Основной layout: fixed header, fixed tabs, scrollable work area, adaptive log/status area.
- Основная композиция: не больше одного главного действия на компонент или экран.
- Summary должен отвечать "готово / не готово / что сделать дальше", а не показывать длинный dashboard.
- Route chain полезен, но он вторичен к service-control модели. Он должен объяснять эффект состояний служб, а не превращать приложение в карту сети.

## Depth And Surfaces

Стратегия глубины: borders-only + subtle surface shifts. Без тяжелых shadows.

- `canvas`: `#101216` - фон приложения.
- `surface`: `#131720` - обычные панели.
- `surface-raised`: `#151923` - service rows и важные панели.
- `surface-control`: `#242a35` - neutral buttons.
- `surface-inset`: `#0d1016` - inputs и read-only inset fields.
- `border`: `#2b3342`.
- `border-strong`: `#343b49`.
- `focus`: `#3b82f6`.

Радиусы: 4px для buttons, inputs, rows, panels; 999px только для pills/dots. Карточки и панели не должны становиться мягкими/крупно-скругленными.

Spacing base: 4px. Основные значения: 6, 8, 10, 12, 14, 18. Для плотной утилиты 20+ использовать редко, только между большими группами.

## Typography

Шрифт: Inter/system stack как сейчас.

Плотная шкала:

- caption: 12px / 500-700 / muted;
- body: 14px / 400-500 / secondary;
- control: 14px / 700 / primary;
- section title: 16px / 700;
- screen title: 18px / 650-750;
- status title: 22px / 700 only for primary readiness state.

Иерархия должна строиться весом и цветом больше, чем размером. Letter spacing держать `0`.

## Компонентная база

### Button

Все кнопки должны идти через общий компонент и общие variants:

- `primary`: главное безопасное действие текущего блока. Зеленый использовать только когда действие реально применимо и готово к выполнению.
- `neutral`: refresh, open, cancel, secondary action.
- `add`: добавление процесса, EXE, папки, target. Иконка + tooltip; текстовая кнопка только когда без текста смысл неясен.
- `danger`: stop/uninstall/delete. Не смешивать с neutral.
- `icon`: квадрат 40-44px, только иконка, обязательны `aria-label`, `title` или tooltip.

Button states обязательны: default, hover, active, focus-visible, disabled, loading.

Loading state не должен выглядеть как зависание: показывать spinner/progress label, менять текст на действие в процессе ("Проверяю", "Устанавливаю", "Останавливаю"), блокировать повторный запуск.

### Service Control Row

Повторяемый компонент для служб:

- left: status dot/icon (`checking`, `missing`, `installed`, `running`, `stopped`, `error`);
- center: title + short status + optional path/details;
- right: primary action (`Установить`, `Запустить`, `Остановить`, `Обновить`) + overflow menu;
- expanded area: setup checklist, diagnostics, paths, generated config.

В строке не должно быть двух конкурирующих primary actions.

### Tabs

Tabs должны быть единым компонентом:

- role tablist/tab/tabpanel;
- arrow-key navigation;
- active indicator 3px blue;
- height 46px desktop, не меньше 40px narrow;
- transition 180-240ms только `opacity` + `transform`;
- no layout shift при переключении.

### Status And Logs

Status surface должен показывать человеческий текст первым, raw details вторым уровнем.

- Preview/native command errors: friendly summary in dock, raw error in details.
- `aria-live` объявляет только короткий статус.
- Narrow width: dock collapses into compact toast/details control.

### Forms And Inputs

Inputs are inset:

- background `surface-inset`;
- border `border-strong`;
- focus ring 1px `focus`;
- validation appears directly below or beside the field;
- invalid state disables dependent action and explains exact accepted format.

### Motion

Motion должна показывать, что интерфейс живой, но не тормозить повторяющиеся операции.

- Button press: 100-140ms, `transform: scale(0.98)`.
- Tab switch: 180-240ms, `opacity` + `translateX` 12-24px.
- Popover/menu: 150-180ms, `opacity` + `scale(0.97 -> 1)`.
- Service checking/installing: subtle spinner or border trace, but not decorative glow everywhere.
- Respect `prefers-reduced-motion`.

Не использовать `transition: all`.

## Implementation Priorities

1. Создать shared UI layer: `Button`, `IconButton`, `Tabs`, `ServiceControlRow`, `StatusPill`, `LogDock`, `Field`, `ActionMenu`.
2. Перевести текущие кнопки на variants, чтобы "обновить", "добавить", "установить", "удалить", "применить" выглядели и вели себя стабильно.
3. Ввести readiness blockers для apply actions.
4. Свести все анимации к общим duration/easing tokens.
5. Проверить keyboard flow и responsive snapshots после каждого крупного UI изменения.