harbor-net/.interface-design/system.md

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 изменения.