Refactor VPN proxy routing and session handling

Refs: None

.dockerignore

@@ -0,0 +1,9 @@
+node_modules
+.vpn-proxy
+_archive
+.git
+.gitea
+.github
+.vscode
+*.log
+.DS_Store

.env.example

@@ -1,5 +1,14 @@
 PORT=3456
+APP_MODE=gateway
+CLIENT_UI_PORT=3456
+CLIENT_PROXY_PORT_START=8080
+CLIENT_PROXY_PORT_END=8090
+BASE_IMAGE=debian:bookworm-slim
+SINGBOX_VERSION=1.12.13
+INSTALL_RUNTIME_DEPS=true
+INSTALL_SINGBOX=true
 PROXY_PORT=8080
+PROXY_BIND_IP=0.0.0.0
 TPROXY_PORT=7895
 TPROXY_MARK=1
 TPROXY_TABLE=100

.gitea/workflows/gateway-build.yml

@@ -1,28 +1,107 @@
-name: Build Gateway Image
+name: Build and Deploy Gateway
 
 on:
   push:
     branches: [master]
   workflow_dispatch:
 
+env:
+  DEPLOY_PATH: /opt/vpn-proxy
+  BASE_IMAGE: vpn-proxy-runtime-base:bookworm-slim
+  RUNTIME_BASE_SOURCE_IMAGE: mirror.gcr.io/library/debian:bookworm-slim
+  APT_MIRROR: http://mirror.yandex.ru/debian
+  APT_SECURITY_MIRROR: http://mirror.yandex.ru/debian-security
+  SINGBOX_VERSION: 1.12.13
+
 jobs:
-  build:
-    runs-on: ubuntu-latest
+  build-and-push:
+    runs-on: ubuntu-22.04
     steps:
       - name: Clone repository
         env:
           GIT_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
         run: |
+          set -euo pipefail
           SERVER_HOST=$(echo "${{ gitea.server_url }}" | sed 's|https\?://||')
-          git clone --depth 2 "http://${{ gitea.actor }}:${GIT_TOKEN}@${SERVER_HOST}/${{ gitea.repository }}.git" .
+          rm -rf repo
+          git clone --depth 2 "http://${{ gitea.actor }}:${GIT_TOKEN}@${SERVER_HOST}/${{ gitea.repository }}.git" repo
+          cd repo
           git checkout ${{ gitea.sha }}
 
       - name: Build and push gateway image
         run: |
+          set -euo pipefail
+          cd repo
+
           REGISTRY_HOST=$(echo "${{ gitea.server_url }}" | sed 's|https\?://||')
           IMAGE="${REGISTRY_HOST}/${{ gitea.repository }}/gateway"
 
+          echo "Build runner: $(hostname)"
+          echo "Base image: ${{ env.BASE_IMAGE }}"
+          echo "Docker context: $(docker context show 2>/dev/null || true)"
+          docker info 2>/dev/null | sed -n '/HTTP Proxy:/p;/HTTPS Proxy:/p;/Name:/p'
+
+          if ! docker image inspect "${{ env.BASE_IMAGE }}" >/dev/null 2>&1 \
+            || ! docker run --rm "${{ env.BASE_IMAGE }}" sh -lc 'command -v npm >/dev/null'; then
+            echo "Runtime base image ${{ env.BASE_IMAGE }} is missing npm; building it now."
+            BASE_IMAGE="${{ env.RUNTIME_BASE_SOURCE_IMAGE }}" \
+            RUNTIME_BASE_IMAGE="${{ env.BASE_IMAGE }}" \
+            APT_MIRROR="${{ env.APT_MIRROR }}" \
+            APT_SECURITY_MIRROR="${{ env.APT_SECURITY_MIRROR }}" \
+            SINGBOX_VERSION="${{ env.SINGBOX_VERSION }}" \
+            ./scripts/build-runtime-base.sh
+          fi
+
+          if command -v npm >/dev/null 2>&1; then
+            npm ci --no-audit --no-fund
+            npm run build
+          else
+            echo "Host npm not found; building frontend inside ${{ env.BASE_IMAGE }}"
+            docker run --rm \
+              --network host \
+              -v "$PWD:/work" \
+              -w /work \
+              "${{ env.BASE_IMAGE }}" \
+              sh -lc 'npm ci --no-audit --no-fund && npm run build'
+          fi
+
           echo "${{ secrets.REGISTRY_TOKEN }}" | docker login "$REGISTRY_HOST" -u "${{ gitea.actor }}" --password-stdin
-          docker build -t "${IMAGE}:latest" -t "${IMAGE}:${{ gitea.sha }}" .
+          DOCKER_BUILDKIT=1 docker build \
+            --network host \
+            --pull=false \
+            --build-arg BASE_IMAGE="${{ env.BASE_IMAGE }}" \
+            --build-arg SINGBOX_VERSION="${{ env.SINGBOX_VERSION }}" \
+            --build-arg INSTALL_RUNTIME_DEPS=false \
+            --build-arg INSTALL_SINGBOX=false \
+            -t "${IMAGE}:latest" \
+            -t "${IMAGE}:${{ gitea.sha }}" \
+            .
           docker push "${IMAGE}:latest"
           docker push "${IMAGE}:${{ gitea.sha }}"
+
+  deploy:
+    runs-on: lxc-111
+    needs: build-and-push
+    steps:
+      - name: Clone repository
+        env:
+          GIT_TOKEN: ${{ secrets.REGISTRY_TOKEN }}
+        run: |
+          set -euo pipefail
+          SERVER_HOST=$(echo "${{ gitea.server_url }}" | sed 's|https\?://||')
+          rm -rf repo
+          git clone --depth 2 "http://${{ gitea.actor }}:${GIT_TOKEN}@${SERVER_HOST}/${{ gitea.repository }}.git" repo
+          cd repo
+          git checkout ${{ gitea.sha }}
+
+      - name: Pull and deploy gateway image
+        run: |
+          set -euo pipefail
+          cd repo
+
+          REGISTRY_HOST=$(echo "${{ gitea.server_url }}" | sed 's|https\?://||')
+          IMAGE="${REGISTRY_HOST}/${{ gitea.repository }}/gateway"
+
+          echo "Deploy runner: $(hostname)"
+          echo "${{ secrets.REGISTRY_TOKEN }}" | docker login "$REGISTRY_HOST" -u "${{ gitea.actor }}" --password-stdin
+          DEPLOY_PATH="${{ env.DEPLOY_PATH }}" GATEWAY_IMAGE="${IMAGE}:${{ gitea.sha }}" bash scripts/deploy-gateway.sh

.gitignore

@@ -6,6 +6,8 @@ _archive/
 *.env.local
 data/
 .vpn-proxy/
+.superpowers/
+.worktrees/
 
 # Node/Vite
 node_modules/

Dockerfile

@@ -1,33 +1,40 @@
-FROM node:22-bookworm-slim AS ui-build
-WORKDIR /app
-COPY package.json ./
-RUN npm install
-COPY index.html vite.config.js ./
-COPY src/web ./src/web
-RUN npm run build
-
-FROM debian:bookworm-slim
+ARG BASE_IMAGE=debian:bookworm-slim
+FROM ${BASE_IMAGE}
 ARG SINGBOX_VERSION=1.12.13
+ARG INSTALL_RUNTIME_DEPS=true
+ARG INSTALL_SINGBOX=true
+COPY dist /app/dist
 
-RUN apt-get update \
-    && apt-get install -y --no-install-recommends ca-certificates curl iptables iproute2 nodejs dumb-init \
-    && rm -rf /var/lib/apt/lists/*
+RUN if [ "${INSTALL_RUNTIME_DEPS}" = "true" ]; then \
+        apt-get update \
+        && apt-get install -y --no-install-recommends ca-certificates curl iptables ipset iproute2 nodejs dumb-init \
+        && rm -rf /var/lib/apt/lists/*; \
+    else \
+        command -v dumb-init >/dev/null \
+        && command -v node >/dev/null \
+        && command -v iptables >/dev/null \
+        && command -v ipset >/dev/null; \
+    fi
 
-RUN set -eux; \
-    arch="$(dpkg --print-architecture)"; \
-    case "$arch" in \
-      amd64) sb_arch="amd64" ;; \
-      arm64) sb_arch="arm64" ;; \
-      *) echo "Unsupported architecture: $arch" >&2; exit 1 ;; \
-    esac; \
-    curl -fsSL "https://github.com/SagerNet/sing-box/releases/download/v${SINGBOX_VERSION}/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}.tar.gz" -o /tmp/sing-box.tgz; \
-    tar -xzf /tmp/sing-box.tgz -C /tmp; \
-    mv "/tmp/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}/sing-box" /usr/local/bin/sing-box; \
-    chmod +x /usr/local/bin/sing-box; \
-    rm -rf /tmp/sing-box*
+RUN if [ "${INSTALL_SINGBOX}" = "true" ]; then \
+        set -eux; \
+        arch="$(dpkg --print-architecture)"; \
+        case "$arch" in \
+        amd64) sb_arch="amd64" ;; \
+        arm64) sb_arch="arm64" ;; \
+        *) echo "Unsupported architecture: $arch" >&2; exit 1 ;; \
+        esac; \
+        curl -fsSL "https://github.com/SagerNet/sing-box/releases/download/v${SINGBOX_VERSION}/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}.tar.gz" -o /tmp/sing-box.tgz; \
+        tar -xzf /tmp/sing-box.tgz -C /tmp; \
+        mv "/tmp/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}/sing-box" /usr/local/bin/sing-box; \
+        chmod +x /usr/local/bin/sing-box; \
+        rm -rf /tmp/sing-box*; \
+    else \
+        command -v sing-box >/dev/null; \
+    fi
 
 WORKDIR /app
-COPY --from=ui-build /app/dist /app/dist
+COPY package.json /app/package.json
 COPY src/server /app/src/server
 COPY entrypoint.sh /entrypoint.sh
 
@@ -36,7 +43,10 @@ RUN chmod +x /entrypoint.sh \
 
 ENV PORT=3456 \
     PROXY_PORT=8080 \
+    PROXY_BIND_IP=0.0.0.0 \
     TPROXY_PORT=7895 \
+    DIRECT_BYPASS_CACHE=false \
+    RULE_SET_DOWNLOAD_DETOUR=vpn \
     DATA_DIR=/var/lib/vpn-proxy \
     SING_BOX_CONFIG=/etc/sing-box/config.json \
     SING_BOX_CACHE=/var/lib/sing-box/cache.db

Dockerfile.client

@@ -0,0 +1,54 @@
+ARG NODE_BUILD_IMAGE=node:20-alpine
+ARG RUNTIME_IMAGE=debian:bookworm-slim
+
+FROM ${NODE_BUILD_IMAGE} AS web-build
+WORKDIR /src
+COPY package.json package-lock.json ./
+RUN npm ci
+COPY index.html vite.config.js ./
+COPY src/web ./src/web
+RUN npm run build
+
+FROM ${RUNTIME_IMAGE}
+ARG SINGBOX_VERSION=1.12.13
+
+RUN apt-get update \
+    && apt-get install -y --no-install-recommends ca-certificates curl dumb-init nodejs tar \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN set -eux; \
+    arch="$(dpkg --print-architecture)"; \
+    case "$arch" in \
+      amd64) sb_arch="amd64" ;; \
+      arm64) sb_arch="arm64" ;; \
+      *) echo "Unsupported architecture: $arch" >&2; exit 1 ;; \
+    esac; \
+    curl -fsSL "https://github.com/SagerNet/sing-box/releases/download/v${SINGBOX_VERSION}/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}.tar.gz" -o /tmp/sing-box.tgz; \
+    tar -xzf /tmp/sing-box.tgz -C /tmp; \
+    mv "/tmp/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}/sing-box" /usr/local/bin/sing-box; \
+    chmod +x /usr/local/bin/sing-box; \
+    rm -rf /tmp/sing-box*
+
+WORKDIR /app
+COPY --from=web-build /src/dist /app/dist
+COPY package.json /app/package.json
+COPY src/server /app/src/server
+COPY entrypoint.client.sh /entrypoint.client.sh
+
+RUN chmod +x /entrypoint.client.sh \
+    && mkdir -p /etc/sing-box /var/lib/vpn-proxy /var/lib/sing-box
+
+ENV APP_MODE=client \
+    PORT=3456 \
+    PROXY_PORT=8080 \
+    PROXY_BIND_IP=0.0.0.0 \
+    DATA_DIR=/var/lib/vpn-proxy \
+    SING_BOX_CONFIG=/etc/sing-box/config.json \
+    SING_BOX_CACHE=/var/lib/sing-box/cache.db \
+    RULE_SET_DOWNLOAD_DETOUR=vpn \
+    ROUTING_RU_DIRECT=true \
+    LOG_LEVEL=info
+
+EXPOSE 3456 8080
+
+ENTRYPOINT ["dumb-init", "/entrypoint.client.sh"]

Dockerfile.runtime-base

@@ -0,0 +1,52 @@
+ARG BASE_IMAGE=mirror.gcr.io/library/debian:bookworm-slim
+FROM ${BASE_IMAGE}
+ARG SINGBOX_VERSION=1.12.13
+ARG APT_MIRROR=http://mirror.yandex.ru/debian
+ARG APT_SECURITY_MIRROR=http://mirror.yandex.ru/debian-security
+ARG HTTP_PROXY
+ARG HTTPS_PROXY
+ARG NO_PROXY
+ARG http_proxy
+ARG https_proxy
+ARG no_proxy
+
+RUN export http_proxy="${http_proxy:-${HTTP_PROXY:-}}" \
+    && export https_proxy="${https_proxy:-${HTTPS_PROXY:-}}" \
+    && export no_proxy="${no_proxy:-${NO_PROXY:-}}" \
+    && for file in /etc/apt/sources.list /etc/apt/sources.list.d/*.sources; do \
+        [ -f "$file" ] || continue; \
+        sed -i \
+          -e "s|http://deb.debian.org/debian-security|${APT_SECURITY_MIRROR}|g" \
+          -e "s|http://security.debian.org/debian-security|${APT_SECURITY_MIRROR}|g" \
+          -e "s|http://deb.debian.org/debian|${APT_MIRROR}|g" \
+          "$file"; \
+      done \
+    && apt-get \
+      -o Acquire::Retries=3 \
+      -o Acquire::http::Timeout=20 \
+      -o Acquire::https::Timeout=20 \
+      -o Acquire::ForceIPv4=true \
+      update \
+    && apt-get \
+      -o Acquire::Retries=3 \
+      -o Acquire::http::Timeout=20 \
+      -o Acquire::https::Timeout=20 \
+      -o Acquire::ForceIPv4=true \
+      install -y --no-install-recommends ca-certificates curl iptables ipset iproute2 nodejs npm dumb-init \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN set -eux; \
+    export http_proxy="${http_proxy:-${HTTP_PROXY:-}}"; \
+    export https_proxy="${https_proxy:-${HTTPS_PROXY:-}}"; \
+    export no_proxy="${no_proxy:-${NO_PROXY:-}}"; \
+    arch="$(dpkg --print-architecture)"; \
+    case "$arch" in \
+    amd64) sb_arch="amd64" ;; \
+    arm64) sb_arch="arm64" ;; \
+    *) echo "Unsupported architecture: $arch" >&2; exit 1 ;; \
+    esac; \
+    curl -fsSL "https://github.com/SagerNet/sing-box/releases/download/v${SINGBOX_VERSION}/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}.tar.gz" -o /tmp/sing-box.tgz; \
+    tar -xzf /tmp/sing-box.tgz -C /tmp; \
+    mv "/tmp/sing-box-${SINGBOX_VERSION}-linux-${sb_arch}/sing-box" /usr/local/bin/sing-box; \
+    chmod +x /usr/local/bin/sing-box; \
+    rm -rf /tmp/sing-box*

README.md

@@ -1,34 +1,519 @@
+# VPN Proxy
+
+Локальный Docker-клиент для Mac и прозрачный VPN-шлюз на базе [sing-box](https://sing-box.sagernet.org/).
+
+## macOS: локальный Docker-клиент
+
+Самый простой режим: контейнер работает как обычный локальный HTTP/SOCKS proxy без TProxy, iptables, `network_mode: host` и прав `NET_ADMIN`.
+
+```bash
+curl -fsSL https://git.dokops.ru/dokril/vpn-proxy/raw/branch/master/scripts/install-macos-client.sh | bash
+```
+
+После запуска по умолчанию:
+
+- UI: `http://127.0.0.1:3456`
+- HTTP/SOCKS proxy: `127.0.0.1:8080` по умолчанию; установщик интерактивно спросит proxy-порт и опубликует только его
+
+Установщик интерактивно спросит proxy-порт. Если стандартный UI-порт `3456` занят другим контейнером, установщик попросит выбрать свободный UI-порт. Для неинтерактивного запуска можно задать порты заранее; тогда вопросы не появятся:
+
+```bash
+curl -fsSL https://git.dokops.ru/dokril/vpn-proxy/raw/branch/master/scripts/install-macos-client.sh | VPN_PROXY_CLIENT_PORT=18080 bash
+```
+
+Если старый gateway/client уже занимает `3456` или выбранный proxy-порт, можно не трогать старый контейнер и поставить новый клиент на другие порты:
+
+```bash
+curl -fsSL https://git.dokops.ru/dokril/vpn-proxy/raw/branch/master/scripts/install-macos-client.sh | VPN_PROXY_CLIENT_UI_PORT=3457 VPN_PROXY_CLIENT_PORT=18080 bash
+```
+
+После запуска скрипт проверяет, что UI реально ответил на `/api/state`. Если контейнер сразу упал или порт занят, он покажет `docker compose ps` и последние логи вместо ложного сообщения о готовности.
+
+В Mac UI есть **Домашний режим**. Когда он включён, приложения по-прежнему используют выбранный локальный proxy-порт, но весь proxy-трафик идёт напрямую без VPN.
+
+Также Mac-клиент можно связать с серверным gateway. На gateway доступна ручка:
+
+```bash
+GET http://<gateway-ui-host>:3456/api/shared-proxy
+```
+
+Если gateway запущен и его mixed proxy работает, ручка вернёт `available: true` и SOCKS5 endpoint общего proxy. В Mac UI укажите адрес gateway UI, например `http://192.168.50.111:3456`. Клиент проверит ручку и переключит локальный `127.0.0.1:<proxy-port>` в режим upstream: весь proxy-трафик пойдёт через общий gateway, локальная VPN-подписка на Mac для этого режима не нужна.
+
+Ручной запуск из checkout:
+
+```bash
+docker compose -f docker-compose.client.yml up -d --build
+```
+
+Перезапуск и логи:
+
+```bash
+cd ~/.vpn-proxy-client
+docker compose -f docker-compose.client.yml logs -f
+docker compose -f docker-compose.client.yml restart
+```
+
+## Windows: standalone desktop client direction
+
+Windows app routing lives in a separate Tauri 2 desktop utility, not as
+`APP_MODE=windows` inside the current Node gateway/client server. The active
+workspace slice is `apps/windows-client`.
+
+Active design documents:
+
+- Product/tech brief: `docs/windows-client-product-tech-brief.md`
+- Execution plan: `docs/goals/windows-modular-client/PLAN.md`
+- Windows client README: `apps/windows-client/README.md`
+
+Target shape:
+
+- Control App: compact Windows UI for status, profiles, targets, components,
+  logs, and diagnostics.
+- Proxyfier Layer: adapter boundary with ProxiFyre as the first engine for
+  per-app TCP/UDP routing.
+- Local sing-box: optional local runtime; external SOCKS5/HTTP targets must
+  work without it.
+
+Development checks:
+
+```powershell
+cd apps/windows-client
+npm install
+npm run build
+npm run tauri -- info
+
+cd src-tauri
+cargo test
+```
+
+Native Tauri build requires WebView2, Rust/rustup, and Visual Studio Build
+Tools with MSVC and Windows SDK components. In the current checkpoint, frontend
+builds pass, while native Rust/Tauri tests require that Windows toolchain.
+
+The three Windows pieces are installed and operated separately:
+
+```powershell
+cd apps/windows-client
+& .\scripts\install-control-app.ps1 -PlanOnly
+& .\scripts\install-proxyfier.ps1 -PlanOnly
+& .\scripts\install-singbox.ps1 -PlanOnly
+```
+
+`-PlanOnly` returns structured JSON without install side effects. Real install
+or service operations must be explicit; profile apply must not silently install
+Proxyfier or Local sing-box.
+
+Windows source configuration is owned by JSON under
+`C:\ProgramData\VpnProxy\config`. Generated ProxiFyre and sing-box files under
+`C:\ProgramData\VpnProxy\generated` are derived artifacts.
+
+---
+
 # VPN Proxy Gateway
 
-Новая версия проекта начинается с `gateway`-режима: контейнер поднимается в `network_mode: host`, применяет TProxy-правила на хосте и запускает `sing-box` как прозрачный gateway для устройств в локальной сети.
+Самохостируемый прозрачный VPN-шлюз на базе [sing-box](https://sing-box.sagernet.org/).  
+Разворачивается в Docker (LXC, VPS), перехватывает трафик всей локальной сети через iptables TProxy — без клиентов на устройствах.
 
-## Что уже заложено
+Веб-интерфейс на React даёт полное управление: подписки, выбор сервера, кастомные правила маршрутизации, просмотр трафика в реальном времени.
 
-- Web UI на Vite + React.
-- Один простой Node control-server вместо отдельного backend framework.
-- Парсинг subscription URL: JSON config, base64 список, plain-text VLESS links.
-- Routing lists управляются из UI: можно отправлять отдельные домены/CIDR/порты в `direct`, `vpn` или `block`.
-- Генерация `sing-box` config для gateway:
-  - `tproxy` inbound на `7895`;
-  - `mixed` inbound на `8080`;
-  - private IP ranges напрямую;
-  - RU rule sets напрямую;
-  - остальное через выбранный outbound.
-- Docker entrypoint с idempotent TProxy setup/cleanup.
+---
+
+## Архитектура
+
+```
+Клиент (ПК/телефон)
+    │  TCP/UDP трафик
+    ▼
+[Роутер] → маршрут по умолчанию → LXC/VPS (gateway)
+    │
+    ▼
+iptables mangle PREROUTING → цепочка VPN_PROXY_TPROXY
+    │
+    ├─ source bypass chain             → ACCEPT  ← устройства мимо sing-box
+    │       └─ FORWARD + MASQUERADE     → обычный internet path
+    ├─ ipset vpn_direct_bypass (dst IP) → RETURN  ← опциональный bypass-кэш
+    ├─ приватные CIDR (RFC1918, ...)    → RETURN
+    └─ TCP/UDP                          → TPROXY :7895
+                    │
+                    ▼
+              sing-box (tproxy inbound :7895)
+                    │
+            роутинг по правилам
+                    │
+         ┌──────────┼──────────┐
+         ▼          ▼          ▼
+      direct     VPN out    block
+```
+
+ПК-приложения, которым нужен VPN явно:
+
+```
+Windows app → ProxiFyre/Proxifier → gateway:8080 → sing-box mixed-in → global rules → default VPN
+```
+
+**Node.js API-сервер** (`src/server/index.js`) работает внутри того же контейнера:  
+управляет процессом sing-box, парсит его логи, экспортирует REST API и SSE-стримы для веб-интерфейса.
+
+---
+
+## Стек
+
+| Слой             | Технология                                                    |
+| ---------------- | ------------------------------------------------------------- |
+| Контейнер        | Docker, `network_mode: host`, `CAP_NET_ADMIN` + `CAP_NET_RAW` |
+| Перехват трафика | iptables TProxy + iproute2 policy routing                     |
+| Bypass-кэш       | опциональный ipset `hash:ip` с TTL                            |
+| VPN-ядро         | sing-box (VLESS/VLESS-Reality/VMess/Trojan/Hysteria2/SS)      |
+| API-сервер       | Node.js 18, plain `http` (без фреймворков)                    |
+| Веб-интерфейс    | React 18 + Vite 7, SPA                                        |
+
+---
+
+## Как работает прозрачное проксирование
+
+### 1. TProxy и policy routing
+
+При старте контейнера `entrypoint.sh` настраивает ядро:
+
+```bash
+# Policy routing: пакеты с меткой TPROXY_MARK уходят через loopback
+ip rule add fwmark 1 table 100
+ip route replace local 0.0.0.0/0 dev lo table 100
+
+# Цепочка iptables (порядок правил — критичен)
+iptables -t mangle -N VPN_PROXY_TPROXY
+iptables -t mangle -N VPN_PROXY_SRC_BYPASS
+iptables -N VPN_PROXY_FWD_BYPASS
+iptables -t nat -N VPN_PROXY_NAT_BYPASS
+  -m addrtype --dst-type LOCAL          → RETURN   # ответы самого sing-box
+  -m mark --mark 1                      → RETURN   # уже помеченные пакеты
+  -j VPN_PROXY_SRC_BYPASS               → ACCEPT   # source bypass до sing-box
+  -m set --match-set vpn_direct_bypass  → RETURN   # только если DIRECT_BYPASS_CACHE=true
+  -d 10.0.0.0/8, 192.168.0.0/16, ...   → RETURN   # приватные адреса
+  -p tcp                                → TPROXY :7895 mark 1
+  -p udp                                → TPROXY :7895 mark 1
+iptables -t mangle -A PREROUTING -j VPN_PROXY_TPROXY
+```
+
+При остановке контейнера (`SIGTERM`) все правила iptables удаляются идемпотентно.  
+ipset-кэш намеренно **не** очищается — записи истекают по TTL.
+
+Устройства можно исключить из transparent-перехвата в интерфейсе: **Routing → Устройства → Mode → bypass TProxy**.
+Такой source IP обходит `tproxy-in` и не попадает в `sing-box`; для него gateway включает обычный kernel forwarding + `MASQUERADE`.
+Ручной HTTP/SOCKS proxy на `gateway:8080` остаётся доступен для выбранных программ.
+
+### 2. Маршрутизация внутри sing-box
+
+Каждый пакет проходит правила в порядке приоритета — **первое совпадение побеждает**:
+
+| Приоритет | Условие                                     | Действие                                 |
+| --------- | ------------------------------------------- | ---------------------------------------- |
+| 1         | `ip_is_private: true`                       | `direct` (защита LAN)                    |
+| 2         | Global custom rules                         | `direct` / VPN / `block` для всех inbound |
+| 3         | `rule_set: [geoip-ru, geosite-category-ru]` | `direct`                                  |
+| 4         | Device defaults для `tproxy-in`             | `direct` / VPN / `block`                 |
+| 5         | Proxy default для `mixed-in`                | по умолчанию VPN                         |
+| 6         | Transparent default для unknown devices     | по умолчанию VPN                         |
+| 7         | Всё остальное (`final`)                     | `direct`                                 |
+
+Конфиг генерируется динамически через `buildGatewayConfig()` из подписки + сохранённых правил. Перед применением выполняется `sing-box check`.
+
+### 3. Bypass Mode (весь трафик напрямую)
+
+Кнопка "Весь трафик напрямую" в дашборде. При активации `buildGatewayConfig()` вызывается с `{ bypassAll: true }` — в конфиге убираются все rule_set, `final: "direct"`. Удобно для диагностики или когда VPN не нужен.
+
+---
+
+## Direct Bypass Cache (ipset)
+
+Оптимизация выключена по умолчанию: `DIRECT_BYPASS_CACHE=false`. Причина — dst-IP cache обходит sing-box до проверки global rules, а значит может нарушить требования вида `AI → VPN` или `blocked → block`.
+
+Если явно включить `DIRECT_BYPASS_CACHE=true`, IP-адреса, которые sing-box уже отправил напрямую, кэшируются в ядре и больше не проходят через userspace.
+
+**Цепочка событий:**
+
+1. sing-box маршрутизирует соединение как `direct`, пишет в лог:  
+   `[TCP] 192.168.1.5:54321 --> 203.0.113.10:443 outbound/direct[direct]`
+
+2. Node.js парсит строку (regex `-->` + `outbound/`). Если `category === "direct"` и назначение — IPv4-адрес:
+
+   ```bash
+   ipset add vpn_direct_bypass 203.0.113.10 timeout 3600 -exist
+   ```
+
+3. Следующий пакет к `203.0.113.10` обрабатывается iptables **до** передачи в sing-box:
+
+   ```
+   -m set --match-set vpn_direct_bypass dst → RETURN
+   ```
+
+   Пакет уходит напрямую на уровне ядра — нулевые накладные расходы userspace sing-box.
+
+4. Запись истекает через TTL (по умолчанию 1 час).
+
+```
+DIRECT_BYPASS_CACHE=false             # безопасное значение по умолчанию
+DIRECT_BYPASS_SET=vpn_direct_bypass   # имя ipset
+DIRECT_BYPASS_TTL=3600                # TTL в секундах
+```
+
+## Профили устройств
+
+Управляются из UI на вкладке **Маршрутизация** и сохраняются в `devices.json`:
+
+```json
+{
+  "defaultTransparentMode": "vpn",
+  "proxyDefaultMode": "vpn",
+  "devices": [
+    {
+      "id": "gaming-pc",
+      "name": "Gaming PC",
+      "ip": "192.168.1.50",
+      "mac": "",
+      "mode": "direct",
+      "enabled": true
+    },
+    {
+      "id": "phone",
+      "name": "Phone",
+      "ip": "192.168.1.60",
+      "mode": "vpn",
+      "enabled": true
+    }
+  ]
+}
+```
+
+| Mode     | Что делает                                                        |
+| -------- | ----------------------------------------------------------------- |
+| `direct` | fallback устройства после global rules → `direct`                 |
+| `vpn`    | fallback устройства после global rules → выбранный VPN            |
+| `block`  | fallback устройства после global rules → `block`                  |
+| `rules`  | не задаёт fallback устройства; используется transparent default   |
+
+`mixed-in` не зависит от режима устройства: если приложение явно пошло на `gateway:8080`, сначала применяются global rules, затем `proxyDefaultMode` (по умолчанию VPN).
+
+---
+
+## Кастомные правила маршрутизации
+
+Управляются из вкладки **Маршрутизация**. Сохраняются в `custom-rules.json`.
+Правила применяются в порядке отображения в UI — **first match wins**. Custom rules являются global rules: они применяются для `tproxy-in`, `mixed-in`, ПК, телефона и unknown devices до любых fallback-режимов.
+
+| Поле             | Тип                          | Описание                                    |
+| ---------------- | ---------------------------- | ------------------------------------------- |
+| `name`           | string                       | Название правила                            |
+| `enabled`        | bool                         | Вкл/выкл                                    |
+| `outbound`       | `direct` \| `vpn` \| `block` | Куда отправить трафик                       |
+| `domains`        | string[]                     | Точные домены (`example.com`)               |
+| `domainSuffixes` | string[]                     | Суффикс домена (`.example.com` + поддомены) |
+| `domainKeywords` | string[]                     | Keyword в имени хоста                       |
+| `ipCidrs`        | string[]                     | IP-диапазоны CIDR                           |
+| `ports`          | string[]                     | Порты или диапазоны (`443`, `8000-9000`)    |
+| `networks`       | `tcp` \| `udp`               | Протокол                                    |
+| `ruleSets`       | string[]                     | Ссылки на remote rule-set                   |
+
+UI автоматически детектирует конфликты — когда правило полностью перекрывается предыдущим.
+
+### Remote Rule Sets
+
+В **Настройках** можно добавить произвольные rule-set:
+
+```json
+{ "tag": "gaming-servers", "url": "https://...", "format": "binary" }
+```
+
+sing-box скачивает их при старте, кэширует в `cache.db`. Ключ кэша — SHA-1 от URL.
+
+---
+
+## Подписки
+
+Поддерживаемые форматы:
+
+- **JSON-конфиг sing-box** — объект с полем `outbounds[]`
+- **Base64-список VLESS-ссылок** — декодируется, каждая ссылка парсится
+- **Прямые VLESS URI** (`vless://uuid@host:port?...#tag`)
+
+После загрузки пользователь выбирает сервер → генерируется конфиг → `sing-box check` → перезапуск.
+
+Подписка кэшируется в `subscription-cache.json` — при рестарте контейнера конфиг автоматически пересоздаётся из кэша без повторного скачивания.
+
+---
+
+## Просмотр трафика
+
+Вкладка **Трафик** в разделе Логи. Данные приходят через SSE (`/api/traffic/stream`).
+
+### Парсинг логов sing-box
+
+Node.js читает stderr sing-box и извлекает трафик двумя шагами:
+
+```
+[router] match[2][my-rule] => outbound/direct[direct]   ← имя правила
+[TCP] 192.168.1.5:PORT --> example.com:443 outbound/vpn[tag]   ← соединение
+```
+
+1. `[router]`-строка → имя правила сохраняется с TTL 500 мс
+2. Следующая строка с `-->` подхватывает имя в поле `matchedRule`
+3. Тип трафика: `direct` / `vpn` / `block` по outbound
+4. Direct + IPv4 → добавление в ipset bypass-кэш, только если `DIRECT_BYPASS_CACHE=true`
+
+### Группировка и сортировка
+
+`(category, host, port, matchedRule)` объединяются в группу с счётчиком:
+
+- **По частоте** — самые частые наверху (по умолчанию)
+- **По времени** — последние наверху
+
+---
+
+## Проверка маршрута
+
+Вкладка **Проверка** позволяет узнать, по какому правилу пойдёт трафик к хосту/IP/порту — без реального подключения. Node.js (`routeMatcher.js`) симулирует ту же логику, что и sing-box:
+
+1. private IP → direct
+2. global custom rules
+3. geoip-ru / geosite-category-ru → direct
+4. `tproxy-in` + device default
+5. `mixed-in` + proxy default
+6. final → direct
+
+---
 
 ## Быстрый старт
 
 ```bash
-cp .env.example .env
-docker compose -f docker-compose.gateway.yml up -d --build
+# Сборка фронтенда
+npm install && npm run build
+
+# Запуск контейнера
+docker compose -f docker-compose.gateway.yml up -d
 ```
 
-UI будет доступен на хосте по `http://<gateway-host>:3456`.
+Если Docker Hub отвечает таймаутом на `debian:bookworm-slim`, можно собрать через read-through mirror:
 
-## Важные ограничения v0.1
+```bash
+BASE_IMAGE=mirror.gcr.io/library/debian:bookworm-slim \
+docker compose -f docker-compose.gateway.yml build
 
-- IPv4 TProxy first. IPv6 routing будет отдельным этапом.
-- DNS-перехват пока не включен. Для корректного gateway-сценария лучше выдать клиентам DNS через роутер/DHCP.
-- Контейнер должен запускаться с `network_mode: host`, `NET_ADMIN`, `NET_RAW`.
-- `_archive/` игнорируется git, потому что там лежит старая реализация и runtime state.
-- Gateway не видит process name на клиентском ПК, поэтому правила для игр задаются через домены, suffix, IP CIDR и порты.
+docker compose -f docker-compose.gateway.yml up -d
+```
+
+Если сборку нужно выполнять на контейнере/хосте, который уже ходит через рабочий gateway, а запускать image на другом:
+
+```bash
+BUILD_HOST=107 DEPLOY_HOST=111 ./scripts/build-on-107-deploy-111.sh
+```
+
+Скрипт собирает image на `BUILD_HOST`, переносит его на `DEPLOY_HOST` через `docker save | docker load` и запускает без `docker pull`. Если `107`/`111` не являются SSH-алиасами, укажите реальные адреса, например `BUILD_HOST=root@192.168.1.107 DEPLOY_HOST=root@192.168.1.111`.
+
+Чтобы не получать циклическую зависимость "собрать gateway можно только через уже работающий gateway", подготовьте runtime base на `107` один раз:
+
+```bash
+./scripts/build-runtime-base.sh
+```
+
+После этого CI и `build-on-107-deploy-111.sh` используют локальный `vpn-proxy-runtime-base:bookworm-slim`: основная сборка gateway больше не делает `apt-get`, не качает sing-box и не обращается к Docker Hub за base image.
+
+UI доступен на `http://<gateway-ip>:3456`.
+
+На роутере указать шлюз по умолчанию (или нужные подсети) на IP контейнера.
+
+---
+
+## Переменные окружения
+
+| Переменная          | По умолчанию         | Описание                               |
+| ------------------- | -------------------- | -------------------------------------- |
+| `APP_MODE`          | `gateway`            | `gateway` или `client`; compose клиента задаёт `client` автоматически |
+| `CLIENT_UI_PORT`    | `3456`               | Host-порт UI для `docker-compose.client.yml` |
+| `VPN_PROXY_CLIENT_UI_PORT` | unset        | UI-порт для macOS installer; записывается в `CLIENT_UI_PORT` |
+| `VPN_PROXY_CLIENT_PORT` | unset           | Proxy-порт для macOS installer; записывает `CLIENT_PROXY_PORT` и single-port `CLIENT_PROXY_PORT_START/END` |
+| `CLIENT_PROXY_PORT` | `8080`             | Единственный host/container proxy-порт для `docker-compose.client.yml` |
+| `CLIENT_PROXY_PORT_START` | `8080`         | Совместимость со старым env; в client compose считается тем же одиночным proxy-портом |
+| `CLIENT_PROXY_PORT_END` | same as start    | Совместимость со старым env; по умолчанию не расширяет Docker-публикацию в диапазон |
+| `SHARED_PROXY_HOST` | unset                | Явный host/IP, который gateway отдаёт в `/api/shared-proxy`; если не задан, берётся Host заголовок запроса |
+| `PORT`              | `3456`               | Порт веб-интерфейса                    |
+| `BASE_IMAGE`        | `debian:bookworm-slim` | Базовый Docker image для сборки; можно заменить на mirror |
+| `SINGBOX_VERSION`   | `1.12.13`            | Версия sing-box для Docker build       |
+| `INSTALL_RUNTIME_DEPS` | `true`            | Устанавливать runtime-пакеты в Docker build; `false` для подготовленного runtime base |
+| `INSTALL_SINGBOX`   | `true`               | Скачивать sing-box в Docker build; `false` для подготовленного runtime base |
+| `PROXY_PORT`        | `8080`               | HTTP/SOCKS mixed inbound               |
+| `TPROXY_PORT`       | `7895`               | TProxy inbound sing-box                |
+| `TPROXY_BYPASS_SOURCE_CIDRS` | unset      | Source CIDR устройств, которые должны идти напрямую мимо TProxy/sing-box, например `192.168.50.25/32` |
+| `TPROXY_SOURCE_BYPASS_CHAIN` | `VPN_PROXY_SRC_BYPASS` | Управляемая iptables-цепочка для UI source-bypass |
+| `TPROXY_SOURCE_FORWARD_CHAIN` | `VPN_PROXY_FWD_BYPASS` | Управляемая filter/FORWARD цепочка для UI source-bypass |
+| `TPROXY_SOURCE_NAT_CHAIN` | `VPN_PROXY_NAT_BYPASS` | Управляемая nat/POSTROUTING цепочка для UI source-bypass |
+| `DATA_DIR`          | `/var/lib/vpn-proxy` | Директория данных (volume)             |
+| `ROUTING_RU_DIRECT` | `true`               | geoip-ru/geosite-ru → direct           |
+| `LOG_LEVEL`         | `info`               | Уровень логов sing-box                 |
+| `DIRECT_BYPASS_CACHE` | `false`            | Включить dst-IP bypass cache; по умолчанию выключен |
+| `DIRECT_BYPASS_SET` | `vpn_direct_bypass`  | Имя ipset bypass-кэша                  |
+| `DIRECT_BYPASS_TTL` | `3600`               | TTL записей (секунды)                  |
+| `RULE_SET_DOWNLOAD_DETOUR` | `vpn`          | Через какой outbound sing-box скачивает remote rule-set; `vpn` = выбранный сервер |
+| `PROXY_BIND_IP`     | `0.0.0.0`            | Bind для HTTP/SOCKS в LAN; можно сузить до IP gateway |
+| `PROXY_FIREWALL`    | `true`               | Закрыть `PROXY_PORT` не из allowed CIDR |
+| `PROXY_ALLOWED_CIDRS` | `10.0.0.0/8 172.16.0.0/12 192.168.0.0/16` | Кто может подключаться к mixed proxy |
+
+---
+
+## REST API
+
+| Метод     | Путь                   | Описание                             |
+| --------- | ---------------------- | ------------------------------------ |
+| `GET`     | `/api/state`           | Полное состояние системы             |
+| `GET`     | `/api/shared-proxy`    | Проверка и параметры общего gateway proxy |
+| `POST`    | `/api/subscription`    | Загрузить подписку по URL            |
+| `POST`    | `/api/apply`           | Применить сервер (`{ selectedTag }`) |
+| `GET`     | `/api/servers`         | Список серверов из кэша              |
+| `GET/PUT` | `/api/rules`           | Кастомные правила                    |
+| `GET/PUT` | `/api/devices`         | Профили устройств и default fallback |
+| `GET/PUT` | `/api/rule-sets`       | Кастомные remote rule-set            |
+| `POST`    | `/api/singbox/start`   | Запустить sing-box                   |
+| `POST`    | `/api/singbox/stop`    | Остановить sing-box                  |
+| `POST`    | `/api/singbox/restart` | Перезапустить sing-box               |
+| `POST`    | `/api/bypass`          | `{ enabled }` — bypass mode          |
+| `GET`     | `/api/direct-cache`    | Состояние ipset bypass-кэша          |
+| `DELETE`  | `/api/direct-cache`    | Сбросить bypass-кэш                  |
+| `POST`    | `/api/route/check`     | Симулировать маршрут                 |
+| `POST`    | `/api/servers/ping`    | TCP-пинг до хоста                    |
+| `GET`     | `/api/logs/stream`     | SSE системных логов                  |
+| `GET`     | `/api/traffic/stream`  | SSE трафика                          |
+
+---
+
+## Структура проекта
+
+```
+├── Dockerfile                  # debian + sing-box + ipset + node
+├── entrypoint.sh               # iptables/ipset setup → запуск node
+├── docker-compose.gateway.yml
+├── src/
+│   ├── server/
+│   │   ├── index.js            # HTTP-сервер, управление sing-box, SSE
+│   │   ├── singbox.js          # генерация конфига sing-box
+│   │   ├── subscription.js     # парсинг подписок (JSON/VLESS/base64)
+│   │   ├── routeMatcher.js     # симулятор маршрутизации
+│   │   ├── ping.js             # TCP-пинг и DNS-resolve
+│   │   └── config.js           # настройки из env
+│   └── web/
+│       ├── App.jsx             # корневой компонент, глобальный state
+│       ├── api.js              # обёртка fetch для API
+│       └── components/
+│           ├── OverviewPage.jsx    # дашборд, bypass-toggle
+│           ├── LogsPage.jsx        # трафик + системные логи
+│           ├── RoutingPage.jsx     # кастомные правила
+│           ├── ServersPage.jsx     # подписка и выбор сервера
+│           ├── SettingsPage.jsx    # rule-sets и настройки
+│           └── RouteChecker.jsx    # проверка маршрута
+└── docs/
+    └── roadmap.md
+```
+
+## Ограничения
+
+- TProxy только IPv4. IPv6 — в roadmap.
+- DNS-перехват не включён; выдавайте клиентам DNS через DHCP роутера.
+- Gateway не видит имя процесса на клиентском ПК — правила для игр задаются через домены, CIDR и порты.

apps/windows-client/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+src-tauri/target/
+

apps/windows-client/README.md

@@ -0,0 +1,116 @@
+# VPN Proxy Windows Client
+
+Standalone Windows desktop utility for app-level proxy routing. This app is
+separate from the current Docker gateway/client runtime and must not be wired
+through `APP_MODE=windows`.
+
+## Components
+
+- Control App: Tauri 2 + React/TypeScript UI and Rust command layer.
+- Proxyfier Layer: ProxiFyre adapter for per-application routing.
+- Local sing-box: optional local runtime, used only by targets that explicitly
+  require `singbox`.
+
+External SOCKS5 targets are the MVP path and do not require Local sing-box.
+
+## Source And Generated Files
+
+Source configuration is owned by Rust domain models and JSON files under:
+
+```text
+C:\ProgramData\VpnProxy\config\profiles.json
+C:\ProgramData\VpnProxy\config\targets.json
+C:\ProgramData\VpnProxy\config\components.json
+C:\ProgramData\VpnProxy\state\activity.json
+```
+
+Generated artifacts are derived and can be recreated:
+
+```text
+C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json
+C:\ProgramData\VpnProxy\generated\sing-box-config.json
+```
+
+## Development
+
+```powershell
+cd apps/windows-client
+npm install
+npm run build
+```
+
+Run the browser preview shell:
+
+```powershell
+npm run dev -- --host 127.0.0.1
+```
+
+Run Tauri checks when the native Windows toolchain is installed:
+
+```powershell
+npm run tauri -- info
+npm run tauri -- dev
+npm run tauri -- build
+```
+
+Run Rust tests when Rust/Cargo are installed:
+
+```powershell
+cd apps/windows-client/src-tauri
+cargo test
+```
+
+Native Tauri build requires WebView2, Rust via rustup, and Visual Studio Build
+Tools with MSVC and Windows SDK components.
+
+## Explicit Installer Boundaries
+
+Installer scripts are explicit per component and return structured JSON in
+`-PlanOnly` mode:
+
+```powershell
+& .\scripts\install-control-app.ps1 -PlanOnly
+& .\scripts\install-proxyfier.ps1 -PlanOnly
+& .\scripts\install-singbox.ps1 -PlanOnly
+```
+
+Installers must be launched intentionally by the user or by a future narrow
+helper permission. Profile apply must not silently install Control App,
+Proxyfier, or Local sing-box.
+
+## Existing Proxyfier Detection
+
+The app detects an already installed Proxyfier layer before showing component
+status or applying profiles. Detection checks:
+
+- uninstall registry entries for `ProxiFyre` and `Proxifier`;
+- common install folders such as `C:\Tools\ProxiFyre`,
+  `%ProgramFiles%\ProxiFyre`, and `%ProgramFiles%\Proxifier`;
+- running `ProxiFyre` / `Proxifier` processes and the `ProxiFyreService`
+  service.
+
+For portable installs, set an override before launching the app:
+
+```powershell
+$env:VPN_PROXY_PROXIFYRE_ROOT = 'D:\Tools\ProxiFyre'
+npm run tauri -- dev
+```
+
+`ProxiFyre` installs are compatible with the current generated
+`app-config.json` apply path. Plain `Proxifier` installs are detected and shown,
+but automatic profile apply is not enabled for them yet because they use a
+different profile format.
+
+## MVP Verification Flow
+
+1. Start the Control App or browser preview.
+2. Confirm Components shows Control App, Proxyfier Layer, and optional Local
+   sing-box separately.
+3. Add or keep an external SOCKS5 target.
+4. Add a process/folder/exe profile such as Discord.
+5. Apply profiles and verify generated ProxiFyre config plus activity entry.
+6. Install Proxyfier separately before applying to a real service.
+7. Install and start Local sing-box only when using a local target.
+
+Task evidence is recorded in
+`docs/goals/windows-modular-client/EVIDENCE.md`.

apps/windows-client/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VPN Proxy для Windows</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

apps/windows-client/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "vpn-proxy-windows-client",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "description": "Standalone Windows desktop proxy management app for VPN Proxy.",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "tauri": "tauri"
+  },
+  "dependencies": {
+    "@tauri-apps/api": "^2.0.0",
+    "@tauri-apps/plugin-dialog": "^2.7.1",
+    "lucide-react": "^1.23.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tauri-apps/cli": "^2.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.8.0",
+    "vite": "^7.0.0"
+  }
+}

apps/windows-client/scripts/install-control-app.ps1

@@ -0,0 +1,79 @@
+param(
+  [string]$InstallRoot = "C:\Program Files\VpnProxy\ControlApp",
+  [string]$DataRoot = "C:\ProgramData\VpnProxy",
+  [switch]$PlanOnly,
+  [switch]$Force
+)
+
+$ErrorActionPreference = "Stop"
+
+function New-Result {
+  param(
+    [bool]$Success,
+    [string]$Action,
+    [bool]$Changed,
+    [string]$Message,
+    [hashtable]$Details = @{}
+  )
+
+  [ordered]@{
+    success = $Success
+    action = $Action
+    changed = $Changed
+    message = $Message
+    details = $Details
+  } | ConvertTo-Json -Depth 6
+}
+
+function Test-IsAdministrator {
+  $identity = [Security.Principal.WindowsIdentity]::GetCurrent()
+  $principal = [Security.Principal.WindowsPrincipal]::new($identity)
+  $principal.IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)
+}
+
+function Ensure-Directory {
+  param([string]$Path)
+  if (-not (Test-Path -LiteralPath $Path)) {
+    New-Item -ItemType Directory -Path $Path -Force | Out-Null
+    return $true
+  }
+  return $false
+}
+
+try {
+  $details = @{
+    installRoot = $InstallRoot
+    dataRoot = $DataRoot
+    planOnly = [bool]$PlanOnly
+  }
+
+  if ($PlanOnly) {
+    New-Result -Success $true -Action "install-control-app" -Changed $false -Message "Control App install plan is ready." -Details $details
+    exit 0
+  }
+
+  if (-not (Test-IsAdministrator)) {
+    New-Result -Success $false -Action "install-control-app" -Changed $false -Message "Administrator rights are required." -Details $details
+    exit 1
+  }
+
+  $changed = $false
+  $changed = (Ensure-Directory -Path $InstallRoot) -or $changed
+  $changed = (Ensure-Directory -Path (Join-Path $DataRoot "config")) -or $changed
+  $changed = (Ensure-Directory -Path (Join-Path $DataRoot "state")) -or $changed
+  $changed = (Ensure-Directory -Path (Join-Path $DataRoot "generated")) -or $changed
+
+  $markerPath = Join-Path $InstallRoot "install-control-app.marker.json"
+  if ((-not (Test-Path -LiteralPath $markerPath)) -or $Force) {
+    @{ component = "control-app"; installedAt = (Get-Date).ToString("o") } |
+      ConvertTo-Json -Depth 4 |
+      Set-Content -LiteralPath $markerPath -Encoding UTF8
+    $changed = $true
+  }
+
+  $details.markerPath = $markerPath
+  New-Result -Success $true -Action "install-control-app" -Changed $changed -Message "Control App directories are installed." -Details $details
+} catch {
+  New-Result -Success $false -Action "install-control-app" -Changed $false -Message $_.Exception.Message
+  exit 1
+}

apps/windows-client/scripts/install-proxyfier.ps1

@@ -0,0 +1,96 @@
+param(
+  [string]$InstallRoot = "C:\Tools\ProxiFyre",
+  [string]$PackagePath = "",
+  [string]$ServiceName = "ProxiFyreService",
+  [switch]$PlanOnly,
+  [switch]$Force
+)
+
+$ErrorActionPreference = "Stop"
+
+function New-Result {
+  param(
+    [bool]$Success,
+    [string]$Action,
+    [bool]$Changed,
+    [string]$Message,
+    [hashtable]$Details = @{}
+  )
+
+  [ordered]@{
+    success = $Success
+    action = $Action
+    changed = $Changed
+    message = $Message
+    details = $Details
+  } | ConvertTo-Json -Depth 6
+}
+
+function Test-IsAdministrator {
+  $identity = [Security.Principal.WindowsIdentity]::GetCurrent()
+  $principal = [Security.Principal.WindowsPrincipal]::new($identity)
+  $principal.IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)
+}
+
+function Backup-File {
+  param([string]$Path)
+  if (Test-Path -LiteralPath $Path) {
+    $backup = "$Path.bak"
+    Copy-Item -LiteralPath $Path -Destination $backup -Force
+    return $backup
+  }
+  return $null
+}
+
+try {
+  $details = @{
+    installRoot = $InstallRoot
+    packagePath = $PackagePath
+    serviceName = $ServiceName
+    planOnly = [bool]$PlanOnly
+  }
+
+  if ($PlanOnly) {
+    New-Result -Success $true -Action "install-proxyfier" -Changed $false -Message "Proxyfier install plan is ready." -Details $details
+    exit 0
+  }
+
+  if (-not (Test-IsAdministrator)) {
+    New-Result -Success $false -Action "install-proxyfier" -Changed $false -Message "Administrator rights are required." -Details $details
+    exit 1
+  }
+
+  if ([string]::IsNullOrWhiteSpace($PackagePath) -or -not (Test-Path -LiteralPath $PackagePath)) {
+    New-Result -Success $false -Action "install-proxyfier" -Changed $false -Message "PackagePath is required and must point to a local ProxiFyre package." -Details $details
+    exit 2
+  }
+
+  $changed = $false
+  if (-not (Test-Path -LiteralPath $InstallRoot)) {
+    New-Item -ItemType Directory -Path $InstallRoot -Force | Out-Null
+    $changed = $true
+  }
+
+  $configPath = Join-Path $InstallRoot "app-config.json"
+  $backupPath = Backup-File -Path $configPath
+  if ($backupPath) {
+    $details.backupPath = $backupPath
+  }
+
+  $markerPath = Join-Path $InstallRoot "install-proxyfier.marker.json"
+  if ((-not (Test-Path -LiteralPath $markerPath)) -or $Force) {
+    @{
+      component = "proxyfier"
+      packagePath = $PackagePath
+      serviceName = $ServiceName
+      installedAt = (Get-Date).ToString("o")
+    } | ConvertTo-Json -Depth 4 | Set-Content -LiteralPath $markerPath -Encoding UTF8
+    $changed = $true
+  }
+
+  $details.markerPath = $markerPath
+  New-Result -Success $true -Action "install-proxyfier" -Changed $changed -Message "Proxyfier install boundary completed." -Details $details
+} catch {
+  New-Result -Success $false -Action "install-proxyfier" -Changed $false -Message $_.Exception.Message
+  exit 1
+}

apps/windows-client/scripts/install-singbox.ps1

@@ -0,0 +1,96 @@
+param(
+  [string]$InstallRoot = "C:\Program Files\VpnProxy\sing-box",
+  [string]$BinaryPath = "",
+  [string]$ServiceName = "VpnProxySingBox",
+  [switch]$PlanOnly,
+  [switch]$Force
+)
+
+$ErrorActionPreference = "Stop"
+
+function New-Result {
+  param(
+    [bool]$Success,
+    [string]$Action,
+    [bool]$Changed,
+    [string]$Message,
+    [hashtable]$Details = @{}
+  )
+
+  [ordered]@{
+    success = $Success
+    action = $Action
+    changed = $Changed
+    message = $Message
+    details = $Details
+  } | ConvertTo-Json -Depth 6
+}
+
+function Test-IsAdministrator {
+  $identity = [Security.Principal.WindowsIdentity]::GetCurrent()
+  $principal = [Security.Principal.WindowsPrincipal]::new($identity)
+  $principal.IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)
+}
+
+function Backup-File {
+  param([string]$Path)
+  if (Test-Path -LiteralPath $Path) {
+    $backup = "$Path.bak"
+    Copy-Item -LiteralPath $Path -Destination $backup -Force
+    return $backup
+  }
+  return $null
+}
+
+try {
+  $details = @{
+    installRoot = $InstallRoot
+    binaryPath = $BinaryPath
+    serviceName = $ServiceName
+    planOnly = [bool]$PlanOnly
+  }
+
+  if ($PlanOnly) {
+    New-Result -Success $true -Action "install-singbox" -Changed $false -Message "Local sing-box install plan is ready." -Details $details
+    exit 0
+  }
+
+  if (-not (Test-IsAdministrator)) {
+    New-Result -Success $false -Action "install-singbox" -Changed $false -Message "Administrator rights are required." -Details $details
+    exit 1
+  }
+
+  if ([string]::IsNullOrWhiteSpace($BinaryPath) -or -not (Test-Path -LiteralPath $BinaryPath)) {
+    New-Result -Success $false -Action "install-singbox" -Changed $false -Message "BinaryPath is required and must point to sing-box.exe." -Details $details
+    exit 2
+  }
+
+  $changed = $false
+  if (-not (Test-Path -LiteralPath $InstallRoot)) {
+    New-Item -ItemType Directory -Path $InstallRoot -Force | Out-Null
+    $changed = $true
+  }
+
+  $configPath = Join-Path $InstallRoot "config.json"
+  $backupPath = Backup-File -Path $configPath
+  if ($backupPath) {
+    $details.backupPath = $backupPath
+  }
+
+  $markerPath = Join-Path $InstallRoot "install-singbox.marker.json"
+  if ((-not (Test-Path -LiteralPath $markerPath)) -or $Force) {
+    @{
+      component = "singbox"
+      binaryPath = $BinaryPath
+      serviceName = $ServiceName
+      installedAt = (Get-Date).ToString("o")
+    } | ConvertTo-Json -Depth 4 | Set-Content -LiteralPath $markerPath -Encoding UTF8
+    $changed = $true
+  }
+
+  $details.markerPath = $markerPath
+  New-Result -Success $true -Action "install-singbox" -Changed $changed -Message "Local sing-box install boundary completed." -Details $details
+} catch {
+  New-Result -Success $false -Action "install-singbox" -Changed $false -Message $_.Exception.Message
+  exit 1
+}

apps/windows-client/src-tauri/Cargo.toml

@@ -0,0 +1,20 @@
+[package]
+name = "vpn-proxy-windows-client"
+version = "0.1.0"
+description = "Standalone Windows desktop proxy management app for VPN Proxy."
+authors = ["VPN Proxy"]
+edition = "2021"
+
+[lib]
+name = "vpn_proxy_windows_client_lib"
+crate-type = ["staticlib", "cdylib", "rlib"]
+
+[build-dependencies]
+tauri-build = { version = "2", features = [] }
+
+[dependencies]
+tauri = { version = "2", features = [] }
+serde = { version = "1", features = ["derive"] }
+serde_json = "1"
+tauri-plugin-dialog = "2.7.1"
+

apps/windows-client/src-tauri/build.rs

@@ -0,0 +1,3 @@
+fn main() {
+    tauri_build::build();
+}

apps/windows-client/src-tauri/capabilities/default.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../gen/schemas/desktop-schema.json",
+  "identifier": "default",
+  "description": "Default capability for the main VPN Proxy Windows shell. Task 8 keeps helper/install launch explicit: no shell or sidecar permission is granted here until a packaged helper is declared.",
+  "windows": ["main"],
+  "permissions": ["core:default", "dialog:allow-open"]
+}

apps/windows-client/src-tauri/gen/schemas/capabilities.json

@@ -0,0 +1 @@
+{"default":{"identifier":"default","description":"Default capability for the main VPN Proxy Windows shell. Task 8 keeps helper/install launch explicit: no shell or sidecar permission is granted here until a packaged helper is declared.","local":true,"windows":["main"],"permissions":["core:default","dialog:allow-open"]}}

apps/windows-client/src-tauri/src/activity.rs

@@ -0,0 +1,23 @@
+use crate::models::ActivityEntry;
+
+pub const DEFAULT_ACTIVITY_LIMIT: usize = 200;
+
+pub fn sort_activity_desc(mut entries: Vec<ActivityEntry>) -> Vec<ActivityEntry> {
+    entries.sort_by(|left, right| right.at.cmp(&left.at).then_with(|| right.id.cmp(&left.id)));
+    entries
+}
+
+pub fn cap_activity(entries: Vec<ActivityEntry>, limit: usize) -> Vec<ActivityEntry> {
+    let mut entries = sort_activity_desc(entries);
+    entries.truncate(limit);
+    entries
+}
+
+pub fn append_activity(
+    mut entries: Vec<ActivityEntry>,
+    entry: ActivityEntry,
+    limit: usize,
+) -> Vec<ActivityEntry> {
+    entries.push(entry);
+    cap_activity(entries, limit)
+}

apps/windows-client/src-tauri/src/adapters/proxifyre.rs

@@ -0,0 +1,245 @@
+#[cfg(not(test))]
+use crate::adapters::proxy_router::{
+    ProxyRouterAdapter, ProxyRouterError, ProxyRouterErrorKind, ProxyRouterGeneratedConfig,
+    ProxyRouterRequest,
+};
+use crate::models::{
+    ComponentId, ComponentState, ComponentStatus, Profile, ProfileItemType, Protocol,
+    ProxyProtocol, Target,
+};
+#[cfg(test)]
+use crate::proxy_router::{
+    ProxyRouterAdapter, ProxyRouterError, ProxyRouterErrorKind, ProxyRouterGeneratedConfig,
+    ProxyRouterRequest,
+};
+use serde::{Deserialize, Serialize};
+
+pub const PROXIFYRE_ADAPTER_ID: &str = "proxifyre";
+pub const PROXIFYRE_OUTPUT_FILE: &str = "proxifyre-app-config.json";
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ProxiFyreAdapter {
+    log_level: String,
+    bypass_lan: bool,
+}
+
+impl ProxiFyreAdapter {
+    pub fn new(log_level: impl Into<String>, bypass_lan: bool) -> Self {
+        Self {
+            log_level: log_level.into(),
+            bypass_lan,
+        }
+    }
+
+    pub fn generate_proxifyre_config(
+        &self,
+        request: ProxyRouterRequest<'_>,
+    ) -> Result<ProxiFyreConfig, ProxyRouterError> {
+        let mut proxies = Vec::new();
+
+        for profile in request.profiles.iter().filter(|profile| profile.enabled) {
+            let target = find_target(profile, request.targets)?;
+            ensure_target_supported(profile, target, request.components)?;
+
+            let app_names = app_names_for_profile(profile);
+            if app_names.is_empty() {
+                return Err(ProxyRouterError::new(
+                    ProxyRouterErrorKind::EmptyProfileItems,
+                    format!(
+                        "В профиле '{}' нет приложений для маршрутизации",
+                        profile.id
+                    ),
+                ));
+            }
+
+            proxies.push(ProxiFyreProxy {
+                app_names,
+                socks5_proxy_endpoint: format!("{}:{}", target.host, target.port),
+                supported_protocols: protocols_for_profile(profile),
+            });
+        }
+
+        Ok(ProxiFyreConfig {
+            log_level: self.log_level.clone(),
+            bypass_lan: self.bypass_lan,
+            proxies,
+        })
+    }
+}
+
+impl Default for ProxiFyreAdapter {
+    fn default() -> Self {
+        Self::new("Info", true)
+    }
+}
+
+impl ProxyRouterAdapter for ProxiFyreAdapter {
+    fn id(&self) -> &'static str {
+        PROXIFYRE_ADAPTER_ID
+    }
+
+    fn output_file_name(&self) -> &'static str {
+        PROXIFYRE_OUTPUT_FILE
+    }
+
+    fn generate_config(
+        &self,
+        request: ProxyRouterRequest<'_>,
+    ) -> Result<ProxyRouterGeneratedConfig, ProxyRouterError> {
+        let config = self.generate_proxifyre_config(request)?;
+        let enabled_profiles = config.proxies.len();
+        let routed_apps = config
+            .proxies
+            .iter()
+            .map(|proxy| proxy.app_names.len())
+            .sum();
+        let contents = serde_json::to_string_pretty(&config).map_err(|error| {
+            ProxyRouterError::new(
+                ProxyRouterErrorKind::Serialization,
+                format!("Не удалось сериализовать конфиг ProxiFyre: {error}"),
+            )
+        })?;
+
+        Ok(ProxyRouterGeneratedConfig {
+            adapter_id: self.id().to_string(),
+            output_file_name: self.output_file_name().to_string(),
+            contents,
+            enabled_profiles,
+            routed_apps,
+        })
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ProxiFyreConfig {
+    #[serde(rename = "logLevel")]
+    pub log_level: String,
+    #[serde(rename = "bypassLan")]
+    pub bypass_lan: bool,
+    pub proxies: Vec<ProxiFyreProxy>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ProxiFyreProxy {
+    #[serde(rename = "appNames")]
+    pub app_names: Vec<String>,
+    #[serde(rename = "socks5ProxyEndpoint")]
+    pub socks5_proxy_endpoint: String,
+    #[serde(rename = "supportedProtocols")]
+    pub supported_protocols: Vec<String>,
+}
+
+fn find_target<'a>(
+    profile: &Profile,
+    targets: &'a [Target],
+) -> Result<&'a Target, ProxyRouterError> {
+    targets
+        .iter()
+        .find(|target| target.id == profile.target_id)
+        .ok_or_else(|| {
+            ProxyRouterError::new(
+                ProxyRouterErrorKind::MissingTarget,
+                format!(
+                    "Профиль '{}' ссылается на отсутствующую цель '{}'",
+                    profile.id, profile.target_id
+                ),
+            )
+        })
+}
+
+fn ensure_target_supported(
+    profile: &Profile,
+    target: &Target,
+    components: &[ComponentStatus],
+) -> Result<(), ProxyRouterError> {
+    if target.protocol != ProxyProtocol::Socks5 {
+        return Err(ProxyRouterError::new(
+            ProxyRouterErrorKind::UnsupportedTargetProtocol,
+            format!(
+                "Цель '{}' использует HTTP, но ProxiFyre требует SOCKS5",
+                target.id
+            ),
+        ));
+    }
+
+    if let Some(required_component) = &target.requires_component {
+        let Some(status) = components
+            .iter()
+            .find(|component| &component.id == required_component)
+        else {
+            return Err(ProxyRouterError::new(
+                ProxyRouterErrorKind::MissingRequiredComponent,
+                format!(
+                    "Цель '{}' профиля '{}' требует отсутствующий компонент '{}'",
+                    target.id,
+                    profile.id,
+                    component_id_label(required_component)
+                ),
+            ));
+        };
+
+        if !component_is_running(status) {
+            return Err(ProxyRouterError::new(
+                ProxyRouterErrorKind::RequiredComponentNotRunning,
+                format!(
+                    "Цель '{}' профиля '{}' требует запущенный компонент '{}'",
+                    target.id,
+                    profile.id,
+                    component_id_label(required_component)
+                ),
+            ));
+        }
+    }
+
+    Ok(())
+}
+
+fn component_is_running(status: &ComponentStatus) -> bool {
+    status.installed && status.running && status.state == ComponentState::Running
+}
+
+fn app_names_for_profile(profile: &Profile) -> Vec<String> {
+    let mut names = Vec::new();
+
+    for item in &profile.items {
+        let value = item.value.trim();
+        if value.is_empty() {
+            continue;
+        }
+
+        let app_name = match item.item_type {
+            ProfileItemType::Process | ProfileItemType::Folder | ProfileItemType::Exe => value,
+        };
+
+        if !names.iter().any(|existing| existing == app_name) {
+            names.push(app_name.to_string());
+        }
+    }
+
+    names
+}
+
+fn protocols_for_profile(profile: &Profile) -> Vec<String> {
+    let mut protocols = Vec::new();
+
+    for protocol in &profile.protocols {
+        let value = match protocol {
+            Protocol::Tcp => "TCP",
+            Protocol::Udp => "UDP",
+        };
+
+        if !protocols.iter().any(|existing| existing == value) {
+            protocols.push(value.to_string());
+        }
+    }
+
+    protocols
+}
+
+fn component_id_label(component_id: &ComponentId) -> &'static str {
+    match component_id {
+        ComponentId::ControlApp => "control-app",
+        ComponentId::Proxyfier => "proxyfier",
+        ComponentId::Singbox => "singbox",
+    }
+}

apps/windows-client/src-tauri/src/adapters/proxy_router.rs

@@ -0,0 +1,67 @@
+use crate::models::{ComponentStatus, Profile, Target};
+
+#[derive(Debug, Clone, Copy)]
+pub struct ProxyRouterRequest<'a> {
+    pub profiles: &'a [Profile],
+    pub targets: &'a [Target],
+    pub components: &'a [ComponentStatus],
+}
+
+impl<'a> ProxyRouterRequest<'a> {
+    pub fn new(
+        profiles: &'a [Profile],
+        targets: &'a [Target],
+        components: &'a [ComponentStatus],
+    ) -> Self {
+        Self {
+            profiles,
+            targets,
+            components,
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ProxyRouterGeneratedConfig {
+    pub adapter_id: String,
+    pub output_file_name: String,
+    pub contents: String,
+    pub enabled_profiles: usize,
+    pub routed_apps: usize,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ProxyRouterError {
+    pub kind: ProxyRouterErrorKind,
+    pub message: String,
+}
+
+impl ProxyRouterError {
+    pub fn new(kind: ProxyRouterErrorKind, message: impl Into<String>) -> Self {
+        Self {
+            kind,
+            message: message.into(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum ProxyRouterErrorKind {
+    EmptyProfileItems,
+    MissingTarget,
+    MissingRequiredComponent,
+    RequiredComponentNotRunning,
+    UnsupportedTargetProtocol,
+    Serialization,
+}
+
+pub trait ProxyRouterAdapter {
+    fn id(&self) -> &'static str;
+
+    fn output_file_name(&self) -> &'static str;
+
+    fn generate_config(
+        &self,
+        request: ProxyRouterRequest<'_>,
+    ) -> Result<ProxyRouterGeneratedConfig, ProxyRouterError>;
+}

apps/windows-client/src-tauri/src/adapters/singbox.rs

@@ -0,0 +1,367 @@
+use crate::models::{
+    ComponentId, ComponentState, ComponentStatus, ProxyProtocol, Target, TargetKind,
+};
+use serde::{Deserialize, Serialize};
+use std::{
+    env, fs,
+    path::Path,
+    process::Command,
+    time::{SystemTime, UNIX_EPOCH},
+};
+
+pub const SINGBOX_ADAPTER_ID: &str = "singbox";
+pub const SINGBOX_OUTPUT_FILE: &str = "sing-box-config.json";
+pub const DEFAULT_MIXED_INBOUND_TAG: &str = "vpn-proxy-mixed-in";
+pub const DEFAULT_DIRECT_OUTBOUND_TAG: &str = "direct";
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct SingBoxAdapter {
+    log_level: String,
+    inbound_tag: String,
+    outbound_tag: String,
+}
+
+impl SingBoxAdapter {
+    pub fn new(
+        log_level: impl Into<String>,
+        inbound_tag: impl Into<String>,
+        outbound_tag: impl Into<String>,
+    ) -> Self {
+        Self {
+            log_level: log_level.into(),
+            inbound_tag: inbound_tag.into(),
+            outbound_tag: outbound_tag.into(),
+        }
+    }
+
+    pub fn generate_config<C>(
+        &self,
+        request: SingBoxGenerationRequest<'_>,
+        checker: &C,
+    ) -> Result<SingBoxGeneratedConfig, SingBoxConfigError>
+    where
+        C: SingBoxConfigChecker,
+    {
+        let target = find_local_singbox_target(request.targets)?;
+        ensure_local_singbox_target(target, request.components)?;
+
+        let config = SingBoxConfig {
+            log: SingBoxLog {
+                disabled: false,
+                level: self.log_level.clone(),
+                timestamp: true,
+            },
+            inbounds: vec![SingBoxInbound {
+                inbound_type: "mixed".to_string(),
+                tag: self.inbound_tag.clone(),
+                listen: target.host.clone(),
+                listen_port: target.port,
+                users: Vec::new(),
+                set_system_proxy: false,
+            }],
+            outbounds: vec![SingBoxOutbound {
+                outbound_type: "direct".to_string(),
+                tag: self.outbound_tag.clone(),
+            }],
+            route: SingBoxRoute {
+                final_outbound: self.outbound_tag.clone(),
+            },
+        };
+        let contents = serde_json::to_string_pretty(&config).map_err(|error| {
+            SingBoxConfigError::new(
+                SingBoxConfigErrorKind::Serialization,
+                format!("Не удалось сериализовать конфиг sing-box: {error}"),
+            )
+        })?;
+        let check = match request.binary_path {
+            Some(binary_path) => Some(checker.check_config(binary_path, &contents)?),
+            None => None,
+        };
+
+        Ok(SingBoxGeneratedConfig {
+            adapter_id: SINGBOX_ADAPTER_ID.to_string(),
+            output_file_name: SINGBOX_OUTPUT_FILE.to_string(),
+            contents,
+            local_target_id: target.id.clone(),
+            listen: target.host.clone(),
+            listen_port: target.port,
+            check,
+        })
+    }
+}
+
+impl Default for SingBoxAdapter {
+    fn default() -> Self {
+        Self::new(
+            "info",
+            DEFAULT_MIXED_INBOUND_TAG,
+            DEFAULT_DIRECT_OUTBOUND_TAG,
+        )
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+pub struct SingBoxGenerationRequest<'a> {
+    pub targets: &'a [Target],
+    pub components: &'a [ComponentStatus],
+    pub binary_path: Option<&'a Path>,
+}
+
+impl<'a> SingBoxGenerationRequest<'a> {
+    pub fn new(
+        targets: &'a [Target],
+        components: &'a [ComponentStatus],
+        binary_path: Option<&'a Path>,
+    ) -> Self {
+        Self {
+            targets,
+            components,
+            binary_path,
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct SingBoxGeneratedConfig {
+    pub adapter_id: String,
+    pub output_file_name: String,
+    pub contents: String,
+    pub local_target_id: String,
+    pub listen: String,
+    pub listen_port: u16,
+    pub check: Option<SingBoxCheckResult>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxCheckResult {
+    pub checked: bool,
+    pub success: bool,
+    pub message: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct SingBoxConfigError {
+    pub kind: SingBoxConfigErrorKind,
+    pub message: String,
+}
+
+impl SingBoxConfigError {
+    pub fn new(kind: SingBoxConfigErrorKind, message: impl Into<String>) -> Self {
+        Self {
+            kind,
+            message: message.into(),
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum SingBoxConfigErrorKind {
+    MissingLocalTarget,
+    MissingRequiredComponent,
+    RequiredComponentNotRunning,
+    UnsupportedTarget,
+    Serialization,
+    CheckFailed,
+}
+
+pub trait SingBoxConfigChecker {
+    fn check_config(
+        &self,
+        binary_path: &Path,
+        config_json: &str,
+    ) -> Result<SingBoxCheckResult, SingBoxConfigError>;
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub struct SingBoxCommandChecker;
+
+impl SingBoxConfigChecker for SingBoxCommandChecker {
+    fn check_config(
+        &self,
+        binary_path: &Path,
+        config_json: &str,
+    ) -> Result<SingBoxCheckResult, SingBoxConfigError> {
+        let config_path = env::temp_dir().join(format!(
+            "vpn-proxy-sing-box-{}-{}.json",
+            std::process::id(),
+            now_millis()
+        ));
+
+        fs::write(&config_path, config_json).map_err(|error| {
+            SingBoxConfigError::new(
+                SingBoxConfigErrorKind::CheckFailed,
+                format!(
+                    "Не удалось записать временный конфиг sing-box '{}': {error}",
+                    config_path.display()
+                ),
+            )
+        })?;
+
+        let output = Command::new(binary_path)
+            .arg("check")
+            .arg("-c")
+            .arg(&config_path)
+            .output()
+            .map_err(|error| {
+                let _ = fs::remove_file(&config_path);
+                SingBoxConfigError::new(
+                    SingBoxConfigErrorKind::CheckFailed,
+                    format!(
+                        "Не удалось выполнить '{} check': {error}",
+                        binary_path.display()
+                    ),
+                )
+            })?;
+        let _ = fs::remove_file(&config_path);
+
+        let stdout = String::from_utf8_lossy(&output.stdout);
+        let stderr = String::from_utf8_lossy(&output.stderr);
+        let message = command_message(&stdout, &stderr);
+
+        if !output.status.success() {
+            return Err(SingBoxConfigError::new(
+                SingBoxConfigErrorKind::CheckFailed,
+                format!("Проверка sing-box не прошла: {message}"),
+            ));
+        }
+
+        Ok(SingBoxCheckResult {
+            checked: true,
+            success: true,
+            message: if message.is_empty() {
+                "Проверка sing-box прошла успешно".to_string()
+            } else {
+                message
+            },
+        })
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxConfig {
+    pub log: SingBoxLog,
+    pub inbounds: Vec<SingBoxInbound>,
+    pub outbounds: Vec<SingBoxOutbound>,
+    pub route: SingBoxRoute,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxLog {
+    pub disabled: bool,
+    pub level: String,
+    pub timestamp: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxInbound {
+    #[serde(rename = "type")]
+    pub inbound_type: String,
+    pub tag: String,
+    pub listen: String,
+    #[serde(rename = "listen_port")]
+    pub listen_port: u16,
+    #[serde(default, skip_serializing_if = "Vec::is_empty")]
+    pub users: Vec<SingBoxUser>,
+    #[serde(rename = "set_system_proxy")]
+    pub set_system_proxy: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxUser {
+    pub username: String,
+    pub password: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxOutbound {
+    #[serde(rename = "type")]
+    pub outbound_type: String,
+    pub tag: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct SingBoxRoute {
+    #[serde(rename = "final")]
+    pub final_outbound: String,
+}
+
+fn find_local_singbox_target(targets: &[Target]) -> Result<&Target, SingBoxConfigError> {
+    targets
+        .iter()
+        .find(|target| {
+            target.kind == TargetKind::Local
+                && target.requires_component.as_ref() == Some(&ComponentId::Singbox)
+        })
+        .ok_or_else(|| {
+            SingBoxConfigError::new(
+                SingBoxConfigErrorKind::MissingLocalTarget,
+                "Локальная цель, требующая sing-box, не настроена",
+            )
+        })
+}
+
+fn ensure_local_singbox_target(
+    target: &Target,
+    components: &[ComponentStatus],
+) -> Result<(), SingBoxConfigError> {
+    if target.kind != TargetKind::Local
+        || target.protocol != ProxyProtocol::Socks5
+        || target.requires_component.as_ref() != Some(&ComponentId::Singbox)
+    {
+        return Err(SingBoxConfigError::new(
+            SingBoxConfigErrorKind::UnsupportedTarget,
+            format!(
+                "Цель '{}' должна быть локальной SOCKS5-целью, требующей sing-box",
+                target.id
+            ),
+        ));
+    }
+
+    let Some(status) = components
+        .iter()
+        .find(|component| component.id == ComponentId::Singbox)
+    else {
+        return Err(SingBoxConfigError::new(
+            SingBoxConfigErrorKind::MissingRequiredComponent,
+            format!(
+                "Локальная цель '{}' требует состояние компонента sing-box",
+                target.id
+            ),
+        ));
+    };
+
+    if !component_is_running(status) {
+        return Err(SingBoxConfigError::new(
+            SingBoxConfigErrorKind::RequiredComponentNotRunning,
+            format!(
+                "Локальная цель '{}' требует установленный и запущенный sing-box",
+                target.id
+            ),
+        ));
+    }
+
+    Ok(())
+}
+
+fn component_is_running(status: &ComponentStatus) -> bool {
+    status.installed && status.running && status.state == ComponentState::Running
+}
+
+fn now_millis() -> u128 {
+    SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map(|duration| duration.as_millis())
+        .unwrap_or_default()
+}
+
+fn command_message(stdout: &str, stderr: &str) -> String {
+    let stdout = stdout.trim();
+    let stderr = stderr.trim();
+
+    match (stdout.is_empty(), stderr.is_empty()) {
+        (true, true) => String::new(),
+        (false, true) => stdout.to_string(),
+        (true, false) => stderr.to_string(),
+        (false, false) => format!("{stdout}\n{stderr}"),
+    }
+}

apps/windows-client/src-tauri/src/component_detection.rs

@@ -0,0 +1,413 @@
+use crate::models::{ComponentId, ComponentState, ComponentStatus};
+use serde::Deserialize;
+use std::{
+    env,
+    path::{Path, PathBuf},
+    process::Command,
+};
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub enum ProxyfierEngine {
+    ProxiFyre,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct DetectedProxyfier {
+    pub engine: ProxyfierEngine,
+    pub name: String,
+    pub install_dir: PathBuf,
+    pub executable_path: PathBuf,
+    pub config_path: Option<PathBuf>,
+    pub running: bool,
+    pub service_name: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct RegistryInstallEntry {
+    pub display_name: String,
+    pub install_location: Option<PathBuf>,
+    pub display_icon: Option<PathBuf>,
+}
+
+pub trait ProxyfierDetectionHost {
+    fn env_var(&self, name: &str) -> Option<String>;
+
+    fn path_exists(&self, path: &Path) -> bool;
+
+    fn process_running(&self, process_name: &str) -> bool;
+
+    fn service_running(&self, service_name: &str) -> bool;
+
+    fn registry_install_entries(&self) -> Vec<RegistryInstallEntry>;
+}
+
+#[derive(Debug, Clone, Copy, Default)]
+pub struct SystemProxyfierDetectionHost;
+
+impl ProxyfierDetectionHost for SystemProxyfierDetectionHost {
+    fn env_var(&self, name: &str) -> Option<String> {
+        env::var(name).ok().filter(|value| !value.trim().is_empty())
+    }
+
+    fn path_exists(&self, path: &Path) -> bool {
+        path.exists()
+    }
+
+    fn process_running(&self, process_name: &str) -> bool {
+        let process_name = process_name.trim_end_matches(".exe");
+        let script = format!(
+            "if (Get-Process -Name '{}' -ErrorAction SilentlyContinue) {{ 'true' }} else {{ 'false' }}",
+            escape_powershell_single(process_name)
+        );
+
+        powershell_bool(&script)
+    }
+
+    fn service_running(&self, service_name: &str) -> bool {
+        let script = format!(
+            "$s = Get-Service -Name '{}' -ErrorAction SilentlyContinue; if ($s -and $s.Status -eq 'Running') {{ 'true' }} else {{ 'false' }}",
+            escape_powershell_single(service_name)
+        );
+
+        powershell_bool(&script)
+    }
+
+    fn registry_install_entries(&self) -> Vec<RegistryInstallEntry> {
+        read_registry_install_entries()
+    }
+}
+
+pub fn detect_proxyfier_install() -> Option<DetectedProxyfier> {
+    detect_proxyfier_install_with_host(&SystemProxyfierDetectionHost)
+}
+
+pub fn detect_proxyfier_install_with_host(
+    host: &impl ProxyfierDetectionHost,
+) -> Option<DetectedProxyfier> {
+    let proxifyre_running = host.process_running("ProxiFyre.exe")
+        || host.service_running("ProxiFyreService")
+        || host.service_running("ProxiFyre");
+
+    proxyfier_candidates(host)
+        .into_iter()
+        .filter_map(|candidate| candidate.into_detected(host, proxifyre_running))
+        .next()
+}
+
+pub fn proxyfier_component_from_detection(detected: Option<&DetectedProxyfier>) -> ComponentStatus {
+    match detected {
+        Some(proxyfier) => detected_proxyfier_component(proxyfier),
+        None => missing_proxyfier_component(),
+    }
+}
+
+fn detected_proxyfier_component(proxyfier: &DetectedProxyfier) -> ComponentStatus {
+    let state = if proxyfier.running {
+        ComponentState::Running
+    } else {
+        ComponentState::Installed
+    };
+    let actions = match proxyfier.engine {
+        ProxyfierEngine::ProxiFyre => {
+            if proxyfier.running {
+                vec![
+                    "Применить сгенерированный конфиг".to_string(),
+                    "Открыть папку конфига".to_string(),
+                    "Остановить".to_string(),
+                ]
+            } else {
+                vec![
+                    "Применить сгенерированный конфиг".to_string(),
+                    "Открыть папку конфига".to_string(),
+                    "Запустить".to_string(),
+                ]
+            }
+        }
+    };
+
+    ComponentStatus {
+        id: ComponentId::Proxyfier,
+        name: "ProxiFyre".to_string(),
+        state,
+        installed: true,
+        running: proxyfier.running,
+        version: Some(match proxyfier.engine {
+            ProxyfierEngine::ProxiFyre => "ProxiFyre найден".to_string(),
+        }),
+        path: Some(proxyfier.install_dir.display().to_string()),
+        problems: Vec::new(),
+        actions,
+    }
+}
+
+fn missing_proxyfier_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Proxyfier,
+        name: "ProxiFyre".to_string(),
+        state: ComponentState::Missing,
+        installed: false,
+        running: false,
+        version: None,
+        path: None,
+        problems: vec!["ProxiFyre нужен для маршрутизации выбранных приложений".to_string()],
+        actions: vec!["Установить ProxiFyre".to_string()],
+    }
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+struct ProxyfierCandidate {
+    engine: ProxyfierEngine,
+    name: String,
+    install_dir: PathBuf,
+}
+
+impl ProxyfierCandidate {
+    fn into_detected(
+        self,
+        host: &impl ProxyfierDetectionHost,
+        proxifyre_running: bool,
+    ) -> Option<DetectedProxyfier> {
+        let executable_path = self.install_dir.join(executable_name(&self.engine));
+        let config_path = config_path(&self.engine, &self.install_dir);
+        let exists = host.path_exists(&self.install_dir)
+            || host.path_exists(&executable_path)
+            || config_path
+                .as_ref()
+                .is_some_and(|path| host.path_exists(path));
+
+        if !exists {
+            return None;
+        }
+
+        Some(DetectedProxyfier {
+            service_name: service_name(&self.engine).map(str::to_string),
+            engine: self.engine,
+            name: self.name,
+            install_dir: self.install_dir,
+            executable_path,
+            config_path,
+            running: proxifyre_running,
+        })
+    }
+}
+
+fn proxyfier_candidates(host: &impl ProxyfierDetectionHost) -> Vec<ProxyfierCandidate> {
+    let mut candidates = Vec::new();
+
+    push_env_candidate(
+        &mut candidates,
+        host,
+        ProxyfierEngine::ProxiFyre,
+        "ProxiFyre",
+        "VPN_PROXY_PROXIFYRE_ROOT",
+    );
+    for entry in host.registry_install_entries() {
+        if let Some(engine) = engine_from_name(&entry.display_name) {
+            let install_dir = entry
+                .install_location
+                .or_else(|| entry.display_icon.and_then(|path| executable_parent(&path)));
+            if let Some(install_dir) = install_dir {
+                push_candidate(
+                    &mut candidates,
+                    ProxyfierCandidate {
+                        name: entry.display_name,
+                        engine,
+                        install_dir,
+                    },
+                );
+            }
+        }
+    }
+
+    for install_dir in common_install_dirs(host, "ProxiFyre") {
+        push_candidate(
+            &mut candidates,
+            ProxyfierCandidate {
+                engine: ProxyfierEngine::ProxiFyre,
+                name: "ProxiFyre".to_string(),
+                install_dir,
+            },
+        );
+    }
+    candidates
+}
+
+fn push_env_candidate(
+    candidates: &mut Vec<ProxyfierCandidate>,
+    host: &impl ProxyfierDetectionHost,
+    engine: ProxyfierEngine,
+    name: &str,
+    env_name: &str,
+) {
+    if let Some(path) = host.env_var(env_name) {
+        push_candidate(
+            candidates,
+            ProxyfierCandidate {
+                engine,
+                name: name.to_string(),
+                install_dir: PathBuf::from(path),
+            },
+        );
+    }
+}
+
+fn push_candidate(candidates: &mut Vec<ProxyfierCandidate>, candidate: ProxyfierCandidate) {
+    if !candidates.iter().any(|existing| {
+        existing.engine == candidate.engine
+            && same_path(&existing.install_dir, &candidate.install_dir)
+    }) {
+        candidates.push(candidate);
+    }
+}
+
+fn common_install_dirs(host: &impl ProxyfierDetectionHost, folder_name: &str) -> Vec<PathBuf> {
+    let mut dirs = vec![PathBuf::from(format!(r"C:\Tools\{folder_name}"))];
+
+    for env_name in ["ProgramFiles", "ProgramFiles(x86)", "LOCALAPPDATA"] {
+        if let Some(root) = host.env_var(env_name) {
+            dirs.push(PathBuf::from(root).join(folder_name));
+        }
+    }
+
+    dirs
+}
+
+fn executable_name(engine: &ProxyfierEngine) -> &'static str {
+    match engine {
+        ProxyfierEngine::ProxiFyre => "ProxiFyre.exe",
+    }
+}
+
+fn config_path(engine: &ProxyfierEngine, install_dir: &Path) -> Option<PathBuf> {
+    match engine {
+        ProxyfierEngine::ProxiFyre => Some(install_dir.join("app-config.json")),
+    }
+}
+
+fn service_name(engine: &ProxyfierEngine) -> Option<&'static str> {
+    match engine {
+        ProxyfierEngine::ProxiFyre => Some("ProxiFyreService"),
+    }
+}
+
+fn engine_from_name(name: &str) -> Option<ProxyfierEngine> {
+    let normalized = name.to_ascii_lowercase();
+    if normalized.contains("proxifyre") {
+        Some(ProxyfierEngine::ProxiFyre)
+    } else {
+        None
+    }
+}
+
+fn executable_parent(path: &Path) -> Option<PathBuf> {
+    path.parent().map(Path::to_path_buf)
+}
+
+fn same_path(left: &Path, right: &Path) -> bool {
+    left.to_string_lossy()
+        .eq_ignore_ascii_case(&right.to_string_lossy())
+}
+
+fn powershell_bool(script: &str) -> bool {
+    Command::new("powershell")
+        .args(["-NoProfile", "-NonInteractive", "-Command", script])
+        .output()
+        .ok()
+        .and_then(|output| String::from_utf8(output.stdout).ok())
+        .is_some_and(|stdout| stdout.trim().eq_ignore_ascii_case("true"))
+}
+
+#[derive(Debug, Deserialize)]
+#[serde(rename_all = "PascalCase")]
+struct RegistryInstallJson {
+    display_name: Option<String>,
+    install_location: Option<String>,
+    display_icon: Option<String>,
+}
+
+fn read_registry_install_entries() -> Vec<RegistryInstallEntry> {
+    let script = r#"
+$paths = @(
+  'HKLM:\Software\Microsoft\Windows\CurrentVersion\Uninstall\*',
+  'HKLM:\Software\WOW6432Node\Microsoft\Windows\CurrentVersion\Uninstall\*',
+  'HKCU:\Software\Microsoft\Windows\CurrentVersion\Uninstall\*'
+)
+$items = foreach ($path in $paths) {
+  Get-ItemProperty -Path $path -ErrorAction SilentlyContinue
+}
+$items |
+  Where-Object { $_.DisplayName -match 'ProxiFyre' } |
+  Select-Object DisplayName,InstallLocation,DisplayIcon |
+  ConvertTo-Json -Compress
+"#;
+
+    let Ok(output) = Command::new("powershell")
+        .args(["-NoProfile", "-NonInteractive", "-Command", script])
+        .output()
+    else {
+        return Vec::new();
+    };
+
+    if !output.status.success() {
+        return Vec::new();
+    }
+
+    let Ok(stdout) = String::from_utf8(output.stdout) else {
+        return Vec::new();
+    };
+    let stdout = stdout.trim();
+    if stdout.is_empty() {
+        return Vec::new();
+    }
+
+    parse_registry_json(stdout)
+}
+
+fn parse_registry_json(json: &str) -> Vec<RegistryInstallEntry> {
+    let Ok(value) = serde_json::from_str::<serde_json::Value>(json) else {
+        return Vec::new();
+    };
+
+    match value {
+        serde_json::Value::Array(entries) => entries
+            .into_iter()
+            .filter_map(registry_entry_from_value)
+            .collect(),
+        entry => registry_entry_from_value(entry).into_iter().collect(),
+    }
+}
+
+fn registry_entry_from_value(value: serde_json::Value) -> Option<RegistryInstallEntry> {
+    let parsed = serde_json::from_value::<RegistryInstallJson>(value).ok()?;
+    let display_name = parsed.display_name?;
+    Some(RegistryInstallEntry {
+        display_name,
+        install_location: parsed
+            .install_location
+            .filter(|value| !value.trim().is_empty())
+            .map(PathBuf::from),
+        display_icon: parsed
+            .display_icon
+            .and_then(|value| display_icon_path(&value)),
+    })
+}
+
+fn display_icon_path(value: &str) -> Option<PathBuf> {
+    let trimmed = value.trim().trim_matches('"');
+    if trimmed.is_empty() {
+        return None;
+    }
+
+    let without_icon_index = trimmed
+        .split_once(',')
+        .map(|(path, _)| path)
+        .unwrap_or(trimmed)
+        .trim()
+        .trim_matches('"');
+
+    Some(PathBuf::from(without_icon_index))
+}
+
+fn escape_powershell_single(value: &str) -> String {
+    value.replace('\'', "''")
+}

apps/windows-client/src-tauri/src/helper.rs

@@ -0,0 +1,184 @@
+use crate::models::ComponentId;
+use serde::{Deserialize, Serialize};
+use serde_json::{json, Value};
+use std::path::{Path, PathBuf};
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub enum HelperAction {
+    #[serde(rename = "install-control-app")]
+    InstallControlApp,
+    #[serde(rename = "install-proxyfier")]
+    InstallProxyfier,
+    #[serde(rename = "install-singbox")]
+    InstallSingbox,
+    #[serde(rename = "proxyfier.apply")]
+    ProxyfierApply,
+    #[serde(rename = "service.status")]
+    ServiceStatus,
+    #[serde(rename = "service.start")]
+    ServiceStart,
+    #[serde(rename = "service.stop")]
+    ServiceStop,
+    #[serde(rename = "service.restart")]
+    ServiceRestart,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct HelperRequest {
+    pub action: HelperAction,
+    #[serde(skip_serializing_if = "Option::is_none")]
+    pub component: Option<ComponentId>,
+    #[serde(default)]
+    pub payload: Value,
+}
+
+#[derive(Debug, Clone, PartialEq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct HelperResponse {
+    pub success: bool,
+    pub action: HelperAction,
+    pub changed: bool,
+    pub message: String,
+    #[serde(default)]
+    pub details: Value,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct HelperCommandSpec {
+    pub program: PathBuf,
+    pub args: Vec<String>,
+    pub stdin: String,
+    pub requires_elevation: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct HelperCommandOutput {
+    pub status_code: i32,
+    pub stdout: String,
+    pub stderr: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct HelperError {
+    pub code: String,
+    pub message: String,
+}
+
+impl HelperError {
+    pub fn new(code: impl Into<String>, message: impl Into<String>) -> Self {
+        Self {
+            code: code.into(),
+            message: message.into(),
+        }
+    }
+}
+
+pub trait HelperCommandRunner {
+    fn run(&self, spec: &HelperCommandSpec) -> Result<HelperCommandOutput, HelperError>;
+}
+
+#[derive(Debug, Clone)]
+pub struct StructuredHelper<R> {
+    helper_program: PathBuf,
+    runner: R,
+}
+
+impl<R> StructuredHelper<R>
+where
+    R: HelperCommandRunner,
+{
+    pub fn new(helper_program: impl Into<PathBuf>, runner: R) -> Self {
+        Self {
+            helper_program: helper_program.into(),
+            runner,
+        }
+    }
+
+    pub fn runner(&self) -> &R {
+        &self.runner
+    }
+
+    pub fn execute(&self, request: &HelperRequest) -> Result<HelperResponse, HelperError> {
+        let stdin = serde_json::to_string(request)
+            .map_err(|error| HelperError::new("helper_request_encode", error.to_string()))?;
+        let spec = HelperCommandSpec {
+            program: self.helper_program.clone(),
+            args: vec!["--json".to_string()],
+            stdin,
+            requires_elevation: helper_action_requires_elevation(&request.action),
+        };
+        let output = self.runner.run(&spec)?;
+
+        if output.status_code != 0 {
+            return Err(HelperError::new(
+                "helper_exit",
+                format!(
+                    "Помощник завершился с кодом {}: {}",
+                    output.status_code, output.stderr
+                ),
+            ));
+        }
+
+        parse_helper_response(&output.stdout)
+    }
+}
+
+pub fn parse_helper_response(stdout: &str) -> Result<HelperResponse, HelperError> {
+    serde_json::from_str(stdout).map_err(|error| {
+        HelperError::new(
+            "helper_response_decode",
+            format!("Помощник вернул не JSON или некорректный JSON: {error}"),
+        )
+    })
+}
+
+pub fn install_request(component: ComponentId) -> HelperRequest {
+    let action = match component {
+        ComponentId::ControlApp => HelperAction::InstallControlApp,
+        ComponentId::Proxyfier => HelperAction::InstallProxyfier,
+        ComponentId::Singbox => HelperAction::InstallSingbox,
+    };
+
+    HelperRequest {
+        action,
+        component: Some(component),
+        payload: json!({}),
+    }
+}
+
+pub fn service_request(component: ComponentId, action: HelperAction) -> HelperRequest {
+    HelperRequest {
+        action,
+        component: Some(component),
+        payload: json!({}),
+    }
+}
+
+pub fn proxifyre_apply_request(
+    config_path: impl AsRef<Path>,
+    service_name: impl Into<String>,
+) -> HelperRequest {
+    HelperRequest {
+        action: HelperAction::ProxyfierApply,
+        component: Some(ComponentId::Proxyfier),
+        payload: json!({
+            "configPath": config_path.as_ref().display().to_string(),
+            "serviceName": service_name.into(),
+        }),
+    }
+}
+
+pub fn helper_action_requires_elevation(action: &HelperAction) -> bool {
+    matches!(
+        action,
+        HelperAction::InstallControlApp
+            | HelperAction::InstallProxyfier
+            | HelperAction::InstallSingbox
+            | HelperAction::ProxyfierApply
+            | HelperAction::ServiceStart
+            | HelperAction::ServiceStop
+            | HelperAction::ServiceRestart
+    )
+}

apps/windows-client/src-tauri/src/lib.rs

@@ -0,0 +1,5 @@
+pub fn run() {
+    tauri::Builder::default()
+        .run(tauri::generate_context!())
+        .expect("не удалось запустить клиент VPN Proxy для Windows");
+}

apps/windows-client/src-tauri/src/main.rs

@@ -0,0 +1,46 @@
+#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
+
+mod activity;
+mod commands;
+mod component_detection;
+mod models;
+mod storage;
+mod validation;
+
+mod adapters {
+    pub mod proxifyre;
+    pub mod proxy_router;
+}
+
+#[cfg(test)]
+pub(crate) mod proxifyre {
+    pub use crate::adapters::proxifyre::*;
+}
+
+#[cfg(test)]
+pub(crate) mod proxy_router {
+    pub use crate::adapters::proxy_router::*;
+}
+
+fn main() {
+    tauri::Builder::default()
+        .plugin(tauri_plugin_dialog::init())
+        .manage(commands::CommandState::default())
+        .invoke_handler(tauri::generate_handler![
+            commands::get_status,
+            commands::get_profiles,
+            commands::get_saved_state,
+            commands::save_profile,
+            commands::get_targets,
+            commands::save_target,
+            commands::get_components,
+            commands::resolve_profile_preview,
+            commands::apply_profiles,
+            commands::get_logs,
+            commands::open_config_location,
+            commands::start_proxifyre_service,
+            commands::stop_proxifyre_service
+        ])
+        .run(tauri::generate_context!())
+        .expect("не удалось запустить клиент VPN Proxy для Windows");
+}

apps/windows-client/src-tauri/src/models.rs

@@ -0,0 +1,167 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "SCREAMING_SNAKE_CASE")]
+pub enum Protocol {
+    Tcp,
+    Udp,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum ProfileItemType {
+    Process,
+    Folder,
+    Exe,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum TargetKind {
+    Local,
+    External,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum ProxyProtocol {
+    Socks5,
+    Http,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "kebab-case")]
+pub enum ComponentId {
+    ControlApp,
+    Proxyfier,
+    Singbox,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub enum ComponentState {
+    Installed,
+    Missing,
+    Stopped,
+    Running,
+    Error,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ProfileItemInput {
+    #[serde(rename = "type")]
+    pub item_type: String,
+    pub value: String,
+    #[serde(default)]
+    pub recursive: Option<bool>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ProfileInput {
+    pub id: Option<String>,
+    pub name: String,
+    #[serde(default = "default_enabled")]
+    pub enabled: bool,
+    #[serde(default = "default_target_id")]
+    pub target_id: String,
+    #[serde(default = "default_protocols")]
+    pub protocols: Vec<String>,
+    #[serde(default)]
+    pub items: Vec<ProfileItemInput>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ProfileItem {
+    #[serde(rename = "type")]
+    pub item_type: ProfileItemType,
+    pub value: String,
+    pub recursive: bool,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Profile {
+    pub id: String,
+    pub name: String,
+    pub enabled: bool,
+    pub target_id: String,
+    pub protocols: Vec<Protocol>,
+    pub items: Vec<ProfileItem>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct TargetInput {
+    pub id: Option<String>,
+    pub name: String,
+    #[serde(default = "default_target_kind")]
+    pub kind: String,
+    #[serde(default = "default_proxy_protocol")]
+    pub protocol: String,
+    pub host: String,
+    pub port: u32,
+    #[serde(default)]
+    pub requires_component: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct Target {
+    pub id: String,
+    pub name: String,
+    pub kind: TargetKind,
+    pub protocol: ProxyProtocol,
+    pub host: String,
+    pub port: u16,
+    pub requires_component: Option<ComponentId>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ComponentStatus {
+    pub id: ComponentId,
+    pub name: String,
+    pub state: ComponentState,
+    pub installed: bool,
+    pub running: bool,
+    pub version: Option<String>,
+    pub path: Option<String>,
+    #[serde(default)]
+    pub problems: Vec<String>,
+    #[serde(default)]
+    pub actions: Vec<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+pub struct ActivityEntry {
+    pub id: String,
+    pub at: String,
+    pub level: ActivityLevel,
+    pub title: String,
+    pub message: String,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "lowercase")]
+pub enum ActivityLevel {
+    Info,
+    Warning,
+    Error,
+    Success,
+}
+
+fn default_enabled() -> bool {
+    true
+}
+
+fn default_target_id() -> String {
+    "local-singbox".to_string()
+}
+
+fn default_protocols() -> Vec<String> {
+    vec!["TCP".to_string(), "UDP".to_string()]
+}
+
+fn default_target_kind() -> String {
+    "external".to_string()
+}
+
+fn default_proxy_protocol() -> String {
+    "socks5".to_string()
+}

apps/windows-client/src-tauri/src/storage.rs

@@ -0,0 +1,187 @@
+use crate::activity::{append_activity, cap_activity, DEFAULT_ACTIVITY_LIMIT};
+use crate::models::{ActivityEntry, ComponentStatus, Profile, Target};
+use serde::{de::DeserializeOwned, Serialize};
+use std::fs;
+use std::io::{self, ErrorKind};
+use std::path::{Path, PathBuf};
+
+pub fn default_config_root() -> PathBuf {
+    PathBuf::from(r"C:\ProgramData\VpnProxy")
+}
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct StoragePaths {
+    pub root: PathBuf,
+    pub config_dir: PathBuf,
+    pub state_dir: PathBuf,
+    pub generated_dir: PathBuf,
+    pub profiles_file: PathBuf,
+    pub targets_file: PathBuf,
+    pub components_file: PathBuf,
+    pub activity_file: PathBuf,
+}
+
+impl StoragePaths {
+    pub fn new(root: impl Into<PathBuf>) -> Self {
+        let root = root.into();
+        let config_dir = root.join("config");
+        let state_dir = root.join("state");
+        let generated_dir = root.join("generated");
+
+        Self {
+            root,
+            profiles_file: config_dir.join("profiles.json"),
+            targets_file: config_dir.join("targets.json"),
+            components_file: config_dir.join("components.json"),
+            activity_file: state_dir.join("activity.json"),
+            config_dir,
+            state_dir,
+            generated_dir,
+        }
+    }
+}
+
+impl Default for StoragePaths {
+    fn default() -> Self {
+        Self::new(default_config_root())
+    }
+}
+
+#[derive(Debug, Clone)]
+pub struct JsonStorage {
+    paths: StoragePaths,
+    activity_limit: usize,
+}
+
+impl JsonStorage {
+    pub fn new(root: impl Into<PathBuf>) -> Self {
+        Self::with_activity_limit(root, DEFAULT_ACTIVITY_LIMIT)
+    }
+
+    pub fn with_activity_limit(root: impl Into<PathBuf>, activity_limit: usize) -> Self {
+        Self {
+            paths: StoragePaths::new(root),
+            activity_limit,
+        }
+    }
+
+    pub fn paths(&self) -> &StoragePaths {
+        &self.paths
+    }
+
+    pub fn ensure_dirs(&self) -> io::Result<()> {
+        fs::create_dir_all(&self.paths.config_dir)?;
+        fs::create_dir_all(&self.paths.state_dir)?;
+        fs::create_dir_all(&self.paths.generated_dir)?;
+        Ok(())
+    }
+
+    pub fn read_profiles(&self) -> io::Result<Vec<Profile>> {
+        self.read_json_or_default(&self.paths.profiles_file)
+    }
+
+    pub fn write_profiles(&self, profiles: &[Profile]) -> io::Result<()> {
+        self.write_json(&self.paths.profiles_file, profiles)
+    }
+
+    pub fn read_targets(&self) -> io::Result<Vec<Target>> {
+        self.read_json_or_default(&self.paths.targets_file)
+    }
+
+    pub fn write_targets(&self, targets: &[Target]) -> io::Result<()> {
+        self.write_json(&self.paths.targets_file, targets)
+    }
+
+    pub fn read_components(&self) -> io::Result<Vec<ComponentStatus>> {
+        self.read_json_or_default(&self.paths.components_file)
+    }
+
+    pub fn write_components(&self, components: &[ComponentStatus]) -> io::Result<()> {
+        self.write_json(&self.paths.components_file, components)
+    }
+
+    pub fn read_activity(&self) -> io::Result<Vec<ActivityEntry>> {
+        let entries = self.read_json_or_default(&self.paths.activity_file)?;
+        Ok(cap_activity(entries, self.activity_limit))
+    }
+
+    pub fn write_activity(&self, entries: &[ActivityEntry]) -> io::Result<()> {
+        let entries = cap_activity(entries.to_vec(), self.activity_limit);
+        self.write_json(&self.paths.activity_file, &entries)
+    }
+
+    pub fn append_activity(&self, entry: ActivityEntry) -> io::Result<Vec<ActivityEntry>> {
+        let entries = self.read_activity()?;
+        let entries = append_activity(entries, entry, self.activity_limit);
+        self.write_json(&self.paths.activity_file, &entries)?;
+        Ok(entries)
+    }
+
+    fn read_json_or_default<T>(&self, path: &Path) -> io::Result<T>
+    where
+        T: DeserializeOwned + Default,
+    {
+        match fs::read_to_string(path) {
+            Ok(contents) => match serde_json::from_str(&contents) {
+                Ok(value) => Ok(value),
+                Err(_) => Ok(T::default()),
+            },
+            Err(error) if error.kind() == ErrorKind::NotFound => Ok(T::default()),
+            Err(error) => Err(error),
+        }
+    }
+
+    fn write_json<T>(&self, path: &Path, value: &T) -> io::Result<()>
+    where
+        T: Serialize + ?Sized,
+    {
+        let contents = serde_json::to_vec_pretty(value)
+            .map_err(|error| io::Error::new(ErrorKind::InvalidData, error))?;
+        write_atomic(path, &contents)
+    }
+}
+
+impl Default for JsonStorage {
+    fn default() -> Self {
+        Self::new(default_config_root())
+    }
+}
+
+pub fn backup_path(path: &Path) -> PathBuf {
+    sibling_with_suffix(path, "bak")
+}
+
+fn temp_path(path: &Path) -> PathBuf {
+    sibling_with_suffix(path, "tmp")
+}
+
+fn sibling_with_suffix(path: &Path, suffix: &str) -> PathBuf {
+    let file_name = path
+        .file_name()
+        .and_then(|value| value.to_str())
+        .unwrap_or("storage.json");
+
+    path.with_file_name(format!("{file_name}.{suffix}"))
+}
+
+fn write_atomic(path: &Path, contents: &[u8]) -> io::Result<()> {
+    if let Some(parent) = path.parent() {
+        fs::create_dir_all(parent)?;
+    }
+
+    let temp_path = temp_path(path);
+    fs::write(&temp_path, contents)?;
+
+    if path.exists() {
+        fs::copy(path, backup_path(path))?;
+        fs::remove_file(path)?;
+    }
+
+    match fs::rename(&temp_path, path) {
+        Ok(()) => Ok(()),
+        Err(error) => {
+            let _ = fs::remove_file(&temp_path);
+            Err(error)
+        }
+    }
+}

apps/windows-client/src-tauri/src/validation.rs

@@ -0,0 +1,223 @@
+use crate::models::{
+    ComponentId, Profile, ProfileInput, ProfileItem, ProfileItemType, Protocol, ProxyProtocol,
+    Target, TargetInput, TargetKind,
+};
+
+#[derive(Debug, Clone, PartialEq, Eq)]
+pub struct ValidationError {
+    pub field: String,
+    pub message: String,
+}
+
+pub type ValidationResult<T> = Result<T, Vec<ValidationError>>;
+
+fn error(field: impl Into<String>, message: impl Into<String>) -> ValidationError {
+    ValidationError {
+        field: field.into(),
+        message: message.into(),
+    }
+}
+
+fn clean(value: &str) -> String {
+    value.trim().to_string()
+}
+
+fn slug(value: &str, fallback: &str) -> String {
+    let mut output = String::new();
+    let mut previous_dash = false;
+
+    for ch in value.trim().to_lowercase().chars() {
+        if ch.is_ascii_alphanumeric() {
+            output.push(ch);
+            previous_dash = false;
+        } else if !previous_dash {
+            output.push('-');
+            previous_dash = true;
+        }
+    }
+
+    let output = output.trim_matches('-').to_string();
+    if output.is_empty() {
+        fallback.to_string()
+    } else {
+        output
+    }
+}
+
+fn process_name(value: &str) -> String {
+    let base = value.trim().rsplit(['\\', '/']).next().unwrap_or("").trim();
+    base.strip_suffix(".exe")
+        .or_else(|| base.strip_suffix(".EXE"))
+        .unwrap_or(base)
+        .trim()
+        .to_string()
+}
+
+pub fn parse_protocol(value: &str) -> Result<Protocol, ValidationError> {
+    match value.trim().to_ascii_uppercase().as_str() {
+        "TCP" => Ok(Protocol::Tcp),
+        "UDP" => Ok(Protocol::Udp),
+        _ => Err(error(
+            "protocols",
+            format!("Неподдерживаемый протокол: {value}"),
+        )),
+    }
+}
+
+pub fn parse_profile_item_type(value: &str) -> Result<ProfileItemType, ValidationError> {
+    match value.trim().to_ascii_lowercase().as_str() {
+        "process" => Ok(ProfileItemType::Process),
+        "folder" => Ok(ProfileItemType::Folder),
+        "exe" => Ok(ProfileItemType::Exe),
+        _ => Err(error(
+            "items.type",
+            format!("Неподдерживаемый тип элемента: {value}"),
+        )),
+    }
+}
+
+pub fn parse_target_kind(value: &str) -> Result<TargetKind, ValidationError> {
+    match value.trim().to_ascii_lowercase().as_str() {
+        "local" => Ok(TargetKind::Local),
+        "external" => Ok(TargetKind::External),
+        _ => Err(error("kind", format!("Неподдерживаемый тип цели: {value}"))),
+    }
+}
+
+pub fn parse_proxy_protocol(value: &str) -> Result<ProxyProtocol, ValidationError> {
+    match value.trim().to_ascii_lowercase().as_str() {
+        "socks5" => Ok(ProxyProtocol::Socks5),
+        "http" => Ok(ProxyProtocol::Http),
+        _ => Err(error(
+            "protocol",
+            format!("Неподдерживаемый протокол прокси: {value}"),
+        )),
+    }
+}
+
+pub fn parse_component_id(value: &str) -> Result<ComponentId, ValidationError> {
+    match value.trim().to_ascii_lowercase().as_str() {
+        "control-app" | "controlapp" => Ok(ComponentId::ControlApp),
+        "proxyfier" => Ok(ComponentId::Proxyfier),
+        "singbox" | "sing-box" => Ok(ComponentId::Singbox),
+        _ => Err(error(
+            "requires_component",
+            format!("Неподдерживаемый компонент: {value}"),
+        )),
+    }
+}
+
+pub fn normalize_profile(input: ProfileInput) -> ValidationResult<Profile> {
+    let mut errors = Vec::new();
+    let name = clean(&input.name);
+    if name.is_empty() {
+        errors.push(error("name", "Укажите название профиля"));
+    }
+
+    let target_id = clean(&input.target_id);
+    if target_id.is_empty() {
+        errors.push(error("target_id", "Укажите цель профиля"));
+    }
+
+    let mut protocols = Vec::new();
+    for value in input.protocols {
+        match parse_protocol(&value) {
+            Ok(protocol) if !protocols.contains(&protocol) => protocols.push(protocol),
+            Ok(_) => {}
+            Err(err) => errors.push(err),
+        }
+    }
+    if protocols.is_empty() {
+        errors.push(error("protocols", "Выберите хотя бы один протокол"));
+    }
+
+    let mut items = Vec::new();
+    for raw_item in input.items {
+        let item_type = match parse_profile_item_type(&raw_item.item_type) {
+            Ok(item_type) => item_type,
+            Err(err) => {
+                errors.push(err);
+                continue;
+            }
+        };
+
+        let value = match item_type {
+            ProfileItemType::Process => process_name(&raw_item.value),
+            ProfileItemType::Folder | ProfileItemType::Exe => clean(&raw_item.value),
+        };
+        if value.is_empty() {
+            errors.push(error("items.value", "Укажите значение элемента профиля"));
+            continue;
+        }
+
+        let recursive =
+            matches!(item_type, ProfileItemType::Folder) && raw_item.recursive.unwrap_or(true);
+        items.push(ProfileItem {
+            item_type,
+            value,
+            recursive,
+        });
+    }
+
+    if !errors.is_empty() {
+        return Err(errors);
+    }
+
+    Ok(Profile {
+        id: slug(input.id.as_deref().unwrap_or(&name), "profile"),
+        name,
+        enabled: input.enabled,
+        target_id,
+        protocols,
+        items,
+    })
+}
+
+pub fn normalize_target(input: TargetInput) -> ValidationResult<Target> {
+    let mut errors = Vec::new();
+    let name = clean(&input.name);
+    let host = clean(&input.host);
+
+    if name.is_empty() {
+        errors.push(error("name", "Укажите название цели"));
+    }
+    if host.is_empty() {
+        errors.push(error("host", "Укажите хост цели"));
+    }
+    if input.port == 0 || input.port > u16::MAX as u32 {
+        errors.push(error("port", "Порт цели должен быть от 1 до 65535"));
+    }
+
+    let kind = parse_target_kind(&input.kind).unwrap_or_else(|err| {
+        errors.push(err);
+        TargetKind::External
+    });
+    let protocol = parse_proxy_protocol(&input.protocol).unwrap_or_else(|err| {
+        errors.push(err);
+        ProxyProtocol::Socks5
+    });
+    let requires_component = match input.requires_component {
+        Some(value) if !value.trim().is_empty() => match parse_component_id(&value) {
+            Ok(component) => Some(component),
+            Err(err) => {
+                errors.push(err);
+                None
+            }
+        },
+        _ => None,
+    };
+
+    if !errors.is_empty() {
+        return Err(errors);
+    }
+
+    Ok(Target {
+        id: slug(input.id.as_deref().unwrap_or(&name), "target"),
+        name,
+        kind,
+        protocol,
+        host,
+        port: input.port as u16,
+        requires_component,
+    })
+}

apps/windows-client/src-tauri/tauri.conf.json

@@ -0,0 +1,37 @@
+{
+  "$schema": "https://schema.tauri.app/config/2",
+  "productName": "VPN Proxy для Windows",
+  "version": "0.1.0",
+  "identifier": "ru.dokops.vpn-proxy.windows",
+  "build": {
+    "beforeDevCommand": "npm run dev",
+    "beforeBuildCommand": "npm run build",
+    "devUrl": "http://localhost:5173",
+    "frontendDist": "../dist"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "VPN Proxy для Windows",
+        "width": 1120,
+        "height": 760,
+        "minWidth": 760,
+        "minHeight": 560,
+        "resizable": true
+      }
+    ],
+    "security": {
+      "csp": null
+    }
+  },
+  "bundle": {
+    "active": true,
+    "targets": "all",
+    "icon": [
+      "icons/32x32.png",
+      "icons/128x128.png",
+      "icons/128x128@2x.png",
+      "icons/icon.ico"
+    ]
+  }
+}

apps/windows-client/src-tauri/tests/command_tests.rs

@@ -0,0 +1,447 @@
+#[path = "../src/activity.rs"]
+mod activity;
+#[path = "../src/commands.rs"]
+mod commands;
+#[path = "../src/component_detection.rs"]
+mod component_detection;
+#[path = "../src/models.rs"]
+mod models;
+#[path = "../src/adapters/proxifyre.rs"]
+mod proxifyre;
+#[path = "../src/adapters/proxy_router.rs"]
+mod proxy_router;
+#[path = "../src/storage.rs"]
+mod storage;
+#[path = "../src/validation.rs"]
+mod validation;
+
+use commands::{
+    apply_profiles_with_services, build_status, resolve_component_statuses, resolve_preview,
+    save_profile_to_storage, save_target_to_storage, Clock, CommandError, DetectedProxyApplyHelper,
+    HelperApplyRequest, HelperApplyResult, ProfileInputDto, ProfileItemInputDto, ProxyApplyHelper,
+    TargetInputDto,
+};
+use component_detection::{
+    DetectedProxyfier, ProxyfierDetectionHost, ProxyfierEngine, RegistryInstallEntry,
+};
+use models::{
+    ComponentId, ComponentState, ComponentStatus, Profile, ProfileItem, ProfileItemType, Protocol,
+    ProxyProtocol, Target, TargetKind,
+};
+use proxifyre::ProxiFyreAdapter;
+use std::collections::HashSet;
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::time::{SystemTime, UNIX_EPOCH};
+use storage::JsonStorage;
+
+#[test]
+fn save_commands_normalize_and_persist_profile_and_target() {
+    let root = test_root("save");
+    let storage = JsonStorage::new(root.clone());
+
+    let target = save_target_to_storage(
+        &storage,
+        TargetInputDto {
+            id: Some("Home Gateway".to_string()),
+            name: " Home Gateway ".to_string(),
+            kind: Some("external".to_string()),
+            protocol: Some("socks5".to_string()),
+            host: " 192.168.50.111 ".to_string(),
+            port: 8080,
+            requires_component: None,
+        },
+    )
+    .expect("target command should normalize");
+    let profile = save_profile_to_storage(
+        &storage,
+        ProfileInputDto {
+            id: Some("Discord".to_string()),
+            name: " Discord ".to_string(),
+            enabled: Some(true),
+            target_id: Some("home-gateway".to_string()),
+            protocols: Some(vec!["tcp".to_string(), "UDP".to_string()]),
+            items: Some(vec![ProfileItemInputDto {
+                item_type: "process".to_string(),
+                value: "Discord.exe".to_string(),
+                recursive: None,
+            }]),
+        },
+    )
+    .expect("profile command should normalize");
+
+    assert_eq!(target.id, "home-gateway");
+    assert_eq!(profile.id, "discord");
+    assert_eq!(profile.target_id, "home-gateway");
+    assert_eq!(profile.items[0].value, "Discord");
+
+    let status = build_status(&storage).expect("status command should read stored state");
+    assert_eq!(
+        status.route_line,
+        "Выбранные приложения -> ProxiFyre -> внешний прокси 192.168.50.111:8080"
+    );
+    assert_eq!(status.active_profile_count, 1);
+    assert_eq!(status.routed_app_count, 1);
+
+    cleanup(&root);
+}
+
+#[test]
+fn resolve_preview_returns_structured_apps_without_filesystem_scan() {
+    let preview = resolve_preview(ProfileInputDto {
+        id: Some("Game".to_string()),
+        name: "Game".to_string(),
+        enabled: Some(true),
+        target_id: Some("home-gateway".to_string()),
+        protocols: Some(vec!["TCP".to_string()]),
+        items: Some(vec![
+            ProfileItemInputDto {
+                item_type: "process".to_string(),
+                value: "Discord.exe".to_string(),
+                recursive: None,
+            },
+            ProfileItemInputDto {
+                item_type: "folder".to_string(),
+                value: r"C:\Games\Launcher".to_string(),
+                recursive: Some(true),
+            },
+        ]),
+    })
+    .expect("preview should normalize profile input");
+
+    assert_eq!(preview.profile_id, "game");
+    assert_eq!(preview.apps.len(), 2);
+    assert_eq!(preview.apps[0].app_name, "Discord");
+    assert_eq!(preview.apps[1].source_type, ProfileItemType::Folder);
+    assert!(preview
+        .warnings
+        .iter()
+        .any(|warning| warning.contains("Сканирование папок отложено")));
+}
+
+#[test]
+fn apply_generates_derived_config_and_records_activity_with_mock_helper() {
+    let root = test_root("apply");
+    let storage = JsonStorage::new(root.clone());
+    storage
+        .write_profiles(&[discord_profile("home-gateway")])
+        .expect("write profiles");
+    storage
+        .write_targets(&[external_socks5_target()])
+        .expect("write targets");
+    storage
+        .write_components(&[proxyfier_running(), singbox_missing()])
+        .expect("write components");
+
+    let response = apply_profiles_with_services(
+        &storage,
+        &ProxiFyreAdapter::default(),
+        &MockApplyHelper,
+        &FixedClock,
+    )
+    .expect("apply command should generate config and call helper");
+
+    let generated_path = PathBuf::from(&response.generated_config_path);
+    let generated_contents = fs::read_to_string(&generated_path).expect("read generated config");
+    let activity = storage.read_activity().expect("read activity");
+
+    assert!(response.success);
+    assert!(response.changed);
+    assert_eq!(response.adapter_id, "proxifyre");
+    assert_eq!(response.enabled_profiles, 1);
+    assert_eq!(response.routed_apps, 1);
+    assert_eq!(response.helper.action, "proxyfier.apply.mock");
+    assert!(generated_contents.contains("\"appNames\""));
+    assert!(generated_contents.contains("Discord"));
+    assert!(generated_path.ends_with("proxifyre-app-config.json"));
+    assert_eq!(activity.len(), 1);
+    assert_eq!(activity[0].at, "2026-07-03T00:00:00Z");
+    assert_eq!(activity[0].title, "Конфиг ProxiFyre создан");
+
+    cleanup(&root);
+}
+
+#[test]
+fn apply_blocks_local_singbox_target_when_component_is_missing() {
+    let root = test_root("missing-singbox");
+    let storage = JsonStorage::new(root.clone());
+    storage
+        .write_profiles(&[discord_profile("local-singbox")])
+        .expect("write profiles");
+    storage
+        .write_targets(&[local_singbox_target()])
+        .expect("write targets");
+    storage
+        .write_components(&[singbox_missing()])
+        .expect("write components");
+
+    let error = apply_profiles_with_services(
+        &storage,
+        &ProxiFyreAdapter::default(),
+        &MockApplyHelper,
+        &FixedClock,
+    )
+    .expect_err("missing sing-box should block local target apply");
+    let activity = storage.read_activity().expect("read blocked activity");
+
+    assert_eq!(error.code, "required_component_not_running");
+    assert_eq!(activity.len(), 1);
+    assert_eq!(activity[0].level, models::ActivityLevel::Error);
+    assert_eq!(activity[0].title, "Применение ProxiFyre заблокировано");
+
+    cleanup(&root);
+}
+
+#[test]
+fn component_status_merges_detected_existing_proxifyre() {
+    let components = resolve_component_statuses(
+        Vec::new(),
+        Some(DetectedProxyfier {
+            engine: ProxyfierEngine::ProxiFyre,
+            name: "ProxiFyre".to_string(),
+            install_dir: PathBuf::from(r"C:\Tools\ProxiFyre"),
+            executable_path: PathBuf::from(r"C:\Tools\ProxiFyre\ProxiFyre.exe"),
+            config_path: Some(PathBuf::from(r"C:\Tools\ProxiFyre\app-config.json")),
+            running: true,
+            service_name: Some("ProxiFyreService".to_string()),
+        }),
+    );
+    let proxyfier = components
+        .iter()
+        .find(|component| component.id == ComponentId::Proxyfier)
+        .expect("proxyfier component");
+
+    assert_eq!(proxyfier.state, ComponentState::Running);
+    assert!(proxyfier.installed);
+    assert!(proxyfier.running);
+    assert_eq!(proxyfier.path, Some(r"C:\Tools\ProxiFyre".to_string()));
+    assert!(proxyfier.problems.is_empty());
+}
+
+#[test]
+fn detected_proxy_apply_helper_writes_proxifyre_app_config() {
+    let root = test_root("detected-proxifyre");
+    let install_dir = root.join("ProxiFyre");
+    fs::create_dir_all(&install_dir).expect("install dir");
+    fs::write(install_dir.join("ProxiFyre.exe"), "mock exe").expect("mock exe");
+    fs::write(install_dir.join("app-config.json"), "{}").expect("existing config");
+    let generated_config = root.join("generated").join("proxifyre-app-config.json");
+    let host = DetectionHost::new()
+        .with_registry("ProxiFyre", &install_dir)
+        .with_path(&install_dir)
+        .with_path(&install_dir.join("ProxiFyre.exe"));
+    let helper = DetectedProxyApplyHelper::new(host);
+
+    let result = helper
+        .apply_proxy_config(HelperApplyRequest {
+            adapter_id: "proxifyre",
+            config_path: &generated_config,
+            config_contents: r#"{"proxies":[]}"#,
+        })
+        .expect("detected helper should apply");
+
+    let applied =
+        fs::read_to_string(install_dir.join("app-config.json")).expect("read applied app-config");
+
+    assert!(result.success);
+    assert!(result.changed);
+    assert_eq!(result.action, "proxifyre.apply-detected-config");
+    assert_eq!(applied, r#"{"proxies":[]}"#);
+    assert!(install_dir.join("app-config.json.bak").exists());
+
+    cleanup(&root);
+}
+
+#[test]
+fn detected_proxy_apply_helper_ignores_plain_proxifier_install() {
+    let root = test_root("detected-proxifier");
+    let install_dir = root.join("Proxifier");
+    fs::create_dir_all(&install_dir).expect("install dir");
+    fs::write(install_dir.join("Proxifier.exe"), "mock exe").expect("mock exe");
+    let generated_config = root.join("generated").join("proxifyre-app-config.json");
+    let host = DetectionHost::new()
+        .with_registry("Proxifier", &install_dir)
+        .with_path(&install_dir)
+        .with_path(&install_dir.join("Proxifier.exe"));
+    let helper = DetectedProxyApplyHelper::new(host);
+
+    let result = helper
+        .apply_proxy_config(HelperApplyRequest {
+            adapter_id: "proxifyre",
+            config_path: &generated_config,
+            config_contents: r#"{"proxies":[]}"#,
+        })
+        .expect("plain Proxifier should be ignored and config should be staged");
+
+    assert!(result.success);
+    assert!(result.changed);
+    assert_eq!(result.action, "proxifyre.stage-generated-config");
+    assert!(result
+        .message
+        .contains("совместимая установка ProxiFyre не найдена"));
+
+    cleanup(&root);
+}
+
+struct MockApplyHelper;
+
+impl ProxyApplyHelper for MockApplyHelper {
+    fn apply_proxy_config(
+        &self,
+        request: HelperApplyRequest<'_>,
+    ) -> Result<HelperApplyResult, CommandError> {
+        assert_eq!(request.adapter_id, "proxifyre");
+        assert!(request.config_contents.contains("Discord"));
+        assert!(request.config_path.ends_with("proxifyre-app-config.json"));
+
+        Ok(HelperApplyResult {
+            success: true,
+            changed: true,
+            action: "proxyfier.apply.mock".to_string(),
+            message: "Mock helper accepted generated ProxiFyre config".to_string(),
+        })
+    }
+}
+
+struct FixedClock;
+
+impl Clock for FixedClock {
+    fn now(&self) -> String {
+        "2026-07-03T00:00:00Z".to_string()
+    }
+}
+
+#[derive(Default)]
+struct DetectionHost {
+    paths: HashSet<String>,
+    registry: Vec<RegistryInstallEntry>,
+}
+
+impl DetectionHost {
+    fn new() -> Self {
+        Self::default()
+    }
+
+    fn with_path(mut self, path: &Path) -> Self {
+        self.paths.insert(normalize_path(path));
+        self
+    }
+
+    fn with_registry(mut self, display_name: &str, install_location: &Path) -> Self {
+        self.registry.push(RegistryInstallEntry {
+            display_name: display_name.to_string(),
+            install_location: Some(install_location.to_path_buf()),
+            display_icon: None,
+        });
+        self
+    }
+}
+
+impl ProxyfierDetectionHost for DetectionHost {
+    fn env_var(&self, _name: &str) -> Option<String> {
+        None
+    }
+
+    fn path_exists(&self, path: &Path) -> bool {
+        self.paths.contains(&normalize_path(path))
+    }
+
+    fn process_running(&self, _process_name: &str) -> bool {
+        false
+    }
+
+    fn service_running(&self, _service_name: &str) -> bool {
+        false
+    }
+
+    fn registry_install_entries(&self) -> Vec<RegistryInstallEntry> {
+        self.registry.clone()
+    }
+}
+
+fn normalize_path(path: &Path) -> String {
+    path.display()
+        .to_string()
+        .replace('/', "\\")
+        .to_ascii_lowercase()
+}
+
+fn test_root(name: &str) -> PathBuf {
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .expect("system clock before unix epoch")
+        .as_nanos();
+
+    std::env::temp_dir().join(format!("vpn-proxy-commands-{name}-{timestamp}"))
+}
+
+fn cleanup(root: &Path) {
+    let _ = fs::remove_dir_all(root);
+}
+
+fn discord_profile(target_id: &str) -> Profile {
+    Profile {
+        id: "discord".to_string(),
+        name: "Discord".to_string(),
+        enabled: true,
+        target_id: target_id.to_string(),
+        protocols: vec![Protocol::Tcp, Protocol::Udp],
+        items: vec![ProfileItem {
+            item_type: ProfileItemType::Process,
+            value: "Discord".to_string(),
+            recursive: false,
+        }],
+    }
+}
+
+fn external_socks5_target() -> Target {
+    Target {
+        id: "home-gateway".to_string(),
+        name: "Домашний шлюз".to_string(),
+        kind: TargetKind::External,
+        protocol: ProxyProtocol::Socks5,
+        host: "192.168.50.111".to_string(),
+        port: 8080,
+        requires_component: None,
+    }
+}
+
+fn local_singbox_target() -> Target {
+    Target {
+        id: "local-singbox".to_string(),
+        name: "Локальный sing-box".to_string(),
+        kind: TargetKind::Local,
+        protocol: ProxyProtocol::Socks5,
+        host: "127.0.0.1".to_string(),
+        port: 1080,
+        requires_component: Some(ComponentId::Singbox),
+    }
+}
+
+fn proxyfier_running() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Proxyfier,
+        name: "ProxiFyre".to_string(),
+        state: ComponentState::Running,
+        installed: true,
+        running: true,
+        version: Some("2.2.1".to_string()),
+        path: Some(r"C:\Tools\ProxiFyre".to_string()),
+        problems: Vec::new(),
+        actions: vec!["Restart".to_string()],
+    }
+}
+
+fn singbox_missing() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Singbox,
+        name: "Локальный sing-box".to_string(),
+        state: ComponentState::Missing,
+        installed: false,
+        running: false,
+        version: None,
+        path: None,
+        problems: vec!["Локальный sing-box не установлен".to_string()],
+        actions: vec!["Установить локальный sing-box".to_string()],
+    }
+}

apps/windows-client/src-tauri/tests/component_detection_tests.rs

@@ -0,0 +1,146 @@
+#[path = "../src/component_detection.rs"]
+mod component_detection;
+#[path = "../src/models.rs"]
+mod models;
+
+use component_detection::{
+    detect_proxyfier_install_with_host, proxyfier_component_from_detection, ProxyfierDetectionHost,
+    ProxyfierEngine, RegistryInstallEntry,
+};
+use models::ComponentState;
+use std::{
+    collections::{HashMap, HashSet},
+    path::{Path, PathBuf},
+};
+
+#[test]
+fn detects_existing_proxifyre_from_registry_install_location() {
+    let host = MockHost::new()
+        .with_registry("ProxiFyre", r"C:\Tools\ProxiFyre")
+        .with_path(r"C:\Tools\ProxiFyre")
+        .with_service("ProxiFyreService");
+
+    let detected = detect_proxyfier_install_with_host(&host)
+        .expect("existing ProxiFyre install should be detected");
+
+    assert_eq!(detected.engine, ProxyfierEngine::ProxiFyre);
+    assert_eq!(detected.install_dir, PathBuf::from(r"C:\Tools\ProxiFyre"));
+    assert_eq!(
+        detected.config_path,
+        Some(PathBuf::from(r"C:\Tools\ProxiFyre\app-config.json"))
+    );
+    assert!(detected.running);
+
+    let component = proxyfier_component_from_detection(Some(&detected));
+    assert_eq!(component.state, ComponentState::Running);
+    assert!(component.installed);
+    assert!(component.running);
+    assert_eq!(component.path, Some(r"C:\Tools\ProxiFyre".to_string()));
+    assert!(component.problems.is_empty());
+}
+
+#[test]
+fn ignores_plain_proxifier_install() {
+    let host = MockHost::new()
+        .with_registry("Proxifier", r"C:\Program Files\Proxifier")
+        .with_path(r"C:\Program Files\Proxifier")
+        .with_process("Proxifier.exe");
+
+    assert!(detect_proxyfier_install_with_host(&host).is_none());
+}
+
+#[test]
+fn env_override_can_point_to_portable_proxifyre_install() {
+    let host = MockHost::new()
+        .with_env("VPN_PROXY_PROXIFYRE_ROOT", r"D:\Portable\ProxiFyre")
+        .with_path(r"D:\Portable\ProxiFyre\ProxiFyre.exe");
+
+    let detected = detect_proxyfier_install_with_host(&host)
+        .expect("env override should be checked before common paths");
+
+    assert_eq!(detected.engine, ProxyfierEngine::ProxiFyre);
+    assert_eq!(
+        detected.executable_path,
+        PathBuf::from(r"D:\Portable\ProxiFyre\ProxiFyre.exe")
+    );
+}
+
+#[test]
+fn missing_proxyfier_returns_install_action_status() {
+    let component = proxyfier_component_from_detection(None);
+
+    assert_eq!(component.state, ComponentState::Missing);
+    assert!(!component.installed);
+    assert_eq!(component.actions, vec!["Установить ProxiFyre"]);
+}
+
+#[derive(Default)]
+struct MockHost {
+    env: HashMap<String, String>,
+    paths: HashSet<String>,
+    processes: HashSet<String>,
+    services: HashSet<String>,
+    registry: Vec<RegistryInstallEntry>,
+}
+
+impl MockHost {
+    fn new() -> Self {
+        Self::default()
+    }
+
+    fn with_env(mut self, name: &str, value: &str) -> Self {
+        self.env.insert(name.to_string(), value.to_string());
+        self
+    }
+
+    fn with_path(mut self, path: &str) -> Self {
+        self.paths.insert(normalize_path(path));
+        self
+    }
+
+    fn with_process(mut self, process: &str) -> Self {
+        self.processes.insert(process.to_ascii_lowercase());
+        self
+    }
+
+    fn with_service(mut self, service: &str) -> Self {
+        self.services.insert(service.to_ascii_lowercase());
+        self
+    }
+
+    fn with_registry(mut self, display_name: &str, install_location: &str) -> Self {
+        self.registry.push(RegistryInstallEntry {
+            display_name: display_name.to_string(),
+            install_location: Some(PathBuf::from(install_location)),
+            display_icon: None,
+        });
+        self
+    }
+}
+
+impl ProxyfierDetectionHost for MockHost {
+    fn env_var(&self, name: &str) -> Option<String> {
+        self.env.get(name).cloned()
+    }
+
+    fn path_exists(&self, path: &Path) -> bool {
+        self.paths
+            .contains(&normalize_path(&path.display().to_string()))
+    }
+
+    fn process_running(&self, process_name: &str) -> bool {
+        self.processes.contains(&process_name.to_ascii_lowercase())
+    }
+
+    fn service_running(&self, service_name: &str) -> bool {
+        self.services.contains(&service_name.to_ascii_lowercase())
+    }
+
+    fn registry_install_entries(&self) -> Vec<RegistryInstallEntry> {
+        self.registry.clone()
+    }
+}
+
+fn normalize_path(path: &str) -> String {
+    path.replace('/', "\\").to_ascii_lowercase()
+}

apps/windows-client/src-tauri/tests/domain_tests.rs

@@ -0,0 +1,128 @@
+#[path = "../src/models.rs"]
+mod models;
+#[path = "../src/validation.rs"]
+mod validation;
+
+use models::{
+    ComponentId, ProfileInput, ProfileItemInput, ProfileItemType, Protocol, ProxyProtocol,
+    TargetInput, TargetKind,
+};
+use validation::{normalize_profile, normalize_target};
+
+#[test]
+fn normalizes_profile_source_items() {
+    let profile = normalize_profile(ProfileInput {
+        id: Some("Discord + Vesktop".to_string()),
+        name: " Discord + Vesktop ".to_string(),
+        enabled: true,
+        target_id: " home-gateway ".to_string(),
+        protocols: vec!["tcp".to_string(), "UDP".to_string(), "TCP".to_string()],
+        items: vec![
+            ProfileItemInput {
+                item_type: "process".to_string(),
+                value: "Discord.exe".to_string(),
+                recursive: None,
+            },
+            ProfileItemInput {
+                item_type: "folder".to_string(),
+                value: "%LOCALAPPDATA%\\Vesktop".to_string(),
+                recursive: Some(true),
+            },
+            ProfileItemInput {
+                item_type: "exe".to_string(),
+                value: "C:\\Games\\Game\\game.exe".to_string(),
+                recursive: Some(true),
+            },
+        ],
+    })
+    .expect("profile should normalize");
+
+    assert_eq!(profile.id, "discord-vesktop");
+    assert_eq!(profile.name, "Discord + Vesktop");
+    assert_eq!(profile.target_id, "home-gateway");
+    assert_eq!(profile.protocols, vec![Protocol::Tcp, Protocol::Udp]);
+    assert_eq!(profile.items[0].item_type, ProfileItemType::Process);
+    assert_eq!(profile.items[0].value, "Discord");
+    assert!(!profile.items[0].recursive);
+    assert_eq!(profile.items[1].item_type, ProfileItemType::Folder);
+    assert!(profile.items[1].recursive);
+    assert_eq!(profile.items[2].item_type, ProfileItemType::Exe);
+    assert!(!profile.items[2].recursive);
+}
+
+#[test]
+fn rejects_unsupported_profile_protocols() {
+    let error = normalize_profile(ProfileInput {
+        id: None,
+        name: "Bad protocol".to_string(),
+        enabled: true,
+        target_id: "home-gateway".to_string(),
+        protocols: vec!["icmp".to_string()],
+        items: vec![ProfileItemInput {
+            item_type: "process".to_string(),
+            value: "Discord".to_string(),
+            recursive: None,
+        }],
+    })
+    .expect_err("unsupported protocol should fail");
+
+    assert!(error.iter().any(|item| item.field == "protocols"));
+}
+
+#[test]
+fn normalizes_external_target_without_local_singbox() {
+    let target = normalize_target(TargetInput {
+        id: Some("Home Gateway".to_string()),
+        name: " Home Gateway ".to_string(),
+        kind: "external".to_string(),
+        protocol: "socks5".to_string(),
+        host: " 192.168.50.111 ".to_string(),
+        port: 8080,
+        requires_component: None,
+    })
+    .expect("external target should normalize");
+
+    assert_eq!(target.id, "home-gateway");
+    assert_eq!(target.kind, TargetKind::External);
+    assert_eq!(target.protocol, ProxyProtocol::Socks5);
+    assert_eq!(target.host, "192.168.50.111");
+    assert_eq!(target.port, 8080);
+    assert_eq!(target.requires_component, None);
+}
+
+#[test]
+fn local_singbox_target_can_exist_before_component_is_installed() {
+    let target = normalize_target(TargetInput {
+        id: Some("local-singbox".to_string()),
+        name: "Local sing-box".to_string(),
+        kind: "local".to_string(),
+        protocol: "socks5".to_string(),
+        host: "127.0.0.1".to_string(),
+        port: 1080,
+        requires_component: Some("singbox".to_string()),
+    })
+    .expect("local target definition should not require installed component");
+
+    assert_eq!(target.kind, TargetKind::Local);
+    assert_eq!(target.requires_component, Some(ComponentId::Singbox));
+}
+
+#[test]
+fn rejects_malformed_target_fields() {
+    let error = normalize_target(TargetInput {
+        id: None,
+        name: "".to_string(),
+        kind: "external".to_string(),
+        protocol: "ftp".to_string(),
+        host: "".to_string(),
+        port: 70_000,
+        requires_component: Some("unknown".to_string()),
+    })
+    .expect_err("invalid target should fail");
+
+    assert!(error.iter().any(|item| item.field == "name"));
+    assert!(error.iter().any(|item| item.field == "host"));
+    assert!(error.iter().any(|item| item.field == "port"));
+    assert!(error.iter().any(|item| item.field == "protocol"));
+    assert!(error.iter().any(|item| item.field == "requires_component"));
+}

apps/windows-client/src-tauri/tests/helper_tests.rs

@@ -0,0 +1,139 @@
+#[path = "../src/helper.rs"]
+mod helper;
+#[path = "../src/models.rs"]
+mod models;
+
+use helper::{
+    helper_action_requires_elevation, install_request, parse_helper_response,
+    proxifyre_apply_request, service_request, HelperAction, HelperCommandOutput,
+    HelperCommandRunner, HelperCommandSpec, HelperError, HelperResponse, StructuredHelper,
+};
+use models::ComponentId;
+use serde_json::json;
+use std::cell::RefCell;
+use std::path::PathBuf;
+
+#[test]
+fn structured_helper_serializes_request_and_parses_json_response() {
+    let runner = MockRunner {
+        output: HelperCommandOutput {
+            status_code: 0,
+            stdout: serde_json::to_string(&HelperResponse {
+                success: true,
+                action: HelperAction::ProxyfierApply,
+                changed: true,
+                message: "Applied".to_string(),
+                details: json!({ "serviceName": "ProxiFyreService" }),
+            })
+            .expect("response json"),
+            stderr: String::new(),
+        },
+        seen: RefCell::new(Vec::new()),
+    };
+    let helper = StructuredHelper::new("vpn-proxy-helper.exe", runner);
+
+    let response = helper
+        .execute(&proxifyre_apply_request(
+            r"C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json",
+            "ProxiFyreService",
+        ))
+        .expect("helper response");
+
+    assert!(response.success);
+    assert_eq!(response.action, HelperAction::ProxyfierApply);
+    assert_eq!(response.details["serviceName"], "ProxiFyreService");
+}
+
+#[test]
+fn helper_runner_receives_json_stdin_and_elevation_flag() {
+    let runner = MockRunner {
+        output: HelperCommandOutput {
+            status_code: 0,
+            stdout: r#"{"success":true,"action":"service.restart","changed":true,"message":"Restarted","details":{}}"#.to_string(),
+            stderr: String::new(),
+        },
+        seen: RefCell::new(Vec::new()),
+    };
+    let helper = StructuredHelper::new("vpn-proxy-helper.exe", runner);
+    let request = service_request(ComponentId::Proxyfier, HelperAction::ServiceRestart);
+
+    let _ = helper.execute(&request).expect("helper response");
+    let seen = helper.runner().seen.borrow();
+    let spec = seen.first().expect("runner should be called");
+    let stdin: serde_json::Value = serde_json::from_str(&spec.stdin).expect("stdin json");
+
+    assert_eq!(spec.program, PathBuf::from("vpn-proxy-helper.exe"));
+    assert_eq!(spec.args, vec!["--json"]);
+    assert!(spec.requires_elevation);
+    assert_eq!(stdin["action"], "service.restart");
+    assert_eq!(stdin["component"], "proxyfier");
+}
+
+#[test]
+fn install_requests_are_explicit_component_actions() {
+    let control = install_request(ComponentId::ControlApp);
+    let proxyfier = install_request(ComponentId::Proxyfier);
+    let singbox = install_request(ComponentId::Singbox);
+
+    assert_eq!(control.action, HelperAction::InstallControlApp);
+    assert_eq!(proxyfier.action, HelperAction::InstallProxyfier);
+    assert_eq!(singbox.action, HelperAction::InstallSingbox);
+    assert!(helper_action_requires_elevation(&proxyfier.action));
+}
+
+#[test]
+fn apply_request_does_not_encode_installer_action() {
+    let request = proxifyre_apply_request(
+        r"C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json",
+        "ProxiFyreService",
+    );
+
+    assert_eq!(request.action, HelperAction::ProxyfierApply);
+    assert_eq!(request.component, Some(ComponentId::Proxyfier));
+    assert_eq!(
+        request.payload["configPath"],
+        r"C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json"
+    );
+}
+
+#[test]
+fn non_json_helper_stdout_is_rejected() {
+    let error = parse_helper_response("Proxyfier restarted successfully")
+        .expect_err("raw stdout should not be accepted");
+
+    assert_eq!(error.code, "helper_response_decode");
+}
+
+#[test]
+fn failed_helper_exit_is_structured_error() {
+    let runner = MockRunner {
+        output: HelperCommandOutput {
+            status_code: 5,
+            stdout: String::new(),
+            stderr: "Access denied".to_string(),
+        },
+        seen: RefCell::new(Vec::new()),
+    };
+    let helper = StructuredHelper::new("vpn-proxy-helper.exe", runner);
+    let error = helper
+        .execute(&service_request(
+            ComponentId::Proxyfier,
+            HelperAction::ServiceRestart,
+        ))
+        .expect_err("failed exit should become helper error");
+
+    assert_eq!(error.code, "helper_exit");
+    assert!(error.message.contains("Access denied"));
+}
+
+struct MockRunner {
+    output: HelperCommandOutput,
+    seen: RefCell<Vec<HelperCommandSpec>>,
+}
+
+impl HelperCommandRunner for MockRunner {
+    fn run(&self, spec: &HelperCommandSpec) -> Result<HelperCommandOutput, HelperError> {
+        self.seen.borrow_mut().push(spec.clone());
+        Ok(self.output.clone())
+    }
+}

apps/windows-client/src-tauri/tests/proxifyre_adapter_tests.rs

@@ -0,0 +1,207 @@
+#[path = "../src/models.rs"]
+mod models;
+#[path = "../src/adapters/proxifyre.rs"]
+mod proxifyre;
+#[path = "../src/adapters/proxy_router.rs"]
+mod proxy_router;
+
+use models::{
+    ComponentId, ComponentState, ComponentStatus, Profile, ProfileItem, ProfileItemType, Protocol,
+    ProxyProtocol, Target, TargetKind,
+};
+use proxifyre::{ProxiFyreAdapter, ProxiFyreConfig, PROXIFYRE_OUTPUT_FILE};
+use proxy_router::{ProxyRouterAdapter, ProxyRouterErrorKind, ProxyRouterRequest};
+
+#[test]
+fn generates_proxifyre_config_for_discord_external_socks5_target() {
+    let adapter = ProxiFyreAdapter::default();
+    let profiles = vec![discord_profile("home-gateway")];
+    let targets = vec![external_socks5_target()];
+    let components = vec![missing_singbox_component()];
+
+    let generated = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect("external socks5 target should not require sing-box");
+    let config: ProxiFyreConfig =
+        serde_json::from_str(&generated.contents).expect("generated config json");
+
+    assert_eq!(generated.adapter_id, "proxifyre");
+    assert_eq!(generated.output_file_name, PROXIFYRE_OUTPUT_FILE);
+    assert_eq!(generated.enabled_profiles, 1);
+    assert_eq!(generated.routed_apps, 1);
+    assert_eq!(config.log_level, "Info");
+    assert!(config.bypass_lan);
+    assert_eq!(config.proxies.len(), 1);
+    assert_eq!(config.proxies[0].app_names, vec!["Discord"]);
+    assert_eq!(
+        config.proxies[0].socks5_proxy_endpoint,
+        "192.168.50.111:8080"
+    );
+    assert_eq!(config.proxies[0].supported_protocols, vec!["TCP", "UDP"]);
+}
+
+#[test]
+fn skips_disabled_profiles_when_generating_proxifyre_config() {
+    let adapter = ProxiFyreAdapter::default();
+    let mut disabled = discord_profile("home-gateway");
+    disabled.enabled = false;
+    let profiles = vec![disabled];
+    let targets = vec![external_socks5_target()];
+    let components = Vec::new();
+
+    let generated = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect("disabled profiles should produce empty config");
+    let config: ProxiFyreConfig =
+        serde_json::from_str(&generated.contents).expect("generated config json");
+
+    assert_eq!(generated.enabled_profiles, 0);
+    assert_eq!(generated.routed_apps, 0);
+    assert!(config.proxies.is_empty());
+}
+
+#[test]
+fn includes_folder_paths_when_generating_proxifyre_config() {
+    let adapter = ProxiFyreAdapter::default();
+    let mut profile = discord_profile("home-gateway");
+    profile.items.push(ProfileItem {
+        item_type: ProfileItemType::Folder,
+        value: r"C:\Games\MyGame".to_string(),
+        recursive: true,
+    });
+    let profiles = vec![profile];
+    let targets = vec![external_socks5_target()];
+    let components = Vec::new();
+
+    let generated = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect("folder paths should be accepted by ProxiFyre config generation");
+    let config: ProxiFyreConfig =
+        serde_json::from_str(&generated.contents).expect("generated config json");
+
+    assert_eq!(generated.routed_apps, 2);
+    assert_eq!(
+        config.proxies[0].app_names,
+        vec!["Discord", r"C:\Games\MyGame"]
+    );
+}
+
+#[test]
+fn blocks_local_singbox_target_when_required_component_is_missing() {
+    let adapter = ProxiFyreAdapter::default();
+    let profiles = vec![discord_profile("local-singbox")];
+    let targets = vec![local_singbox_target()];
+    let components = Vec::new();
+
+    let error = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect_err("local sing-box target should require installed running sing-box");
+
+    assert_eq!(error.kind, ProxyRouterErrorKind::MissingRequiredComponent);
+}
+
+#[test]
+fn local_singbox_target_generates_when_required_component_is_running() {
+    let adapter = ProxiFyreAdapter::default();
+    let profiles = vec![discord_profile("local-singbox")];
+    let targets = vec![local_singbox_target()];
+    let components = vec![running_singbox_component()];
+
+    let generated = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect("running sing-box should satisfy local target dependency");
+    let config: ProxiFyreConfig =
+        serde_json::from_str(&generated.contents).expect("generated config json");
+
+    assert_eq!(config.proxies.len(), 1);
+    assert_eq!(config.proxies[0].socks5_proxy_endpoint, "127.0.0.1:1080");
+}
+
+#[test]
+fn rejects_http_target_because_proxifyre_adapter_is_socks5_only() {
+    let adapter = ProxiFyreAdapter::default();
+    let profiles = vec![discord_profile("office-http")];
+    let targets = vec![Target {
+        id: "office-http".to_string(),
+        name: "Office HTTP".to_string(),
+        kind: TargetKind::External,
+        protocol: ProxyProtocol::Http,
+        host: "192.168.50.111".to_string(),
+        port: 3128,
+        requires_component: None,
+    }];
+    let components = Vec::new();
+
+    let error = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect_err("ProxiFyre should reject HTTP targets");
+
+    assert_eq!(error.kind, ProxyRouterErrorKind::UnsupportedTargetProtocol);
+}
+
+fn discord_profile(target_id: &str) -> Profile {
+    Profile {
+        id: "discord".to_string(),
+        name: "Discord".to_string(),
+        enabled: true,
+        target_id: target_id.to_string(),
+        protocols: vec![Protocol::Tcp, Protocol::Udp],
+        items: vec![ProfileItem {
+            item_type: ProfileItemType::Process,
+            value: "Discord".to_string(),
+            recursive: false,
+        }],
+    }
+}
+
+fn external_socks5_target() -> Target {
+    Target {
+        id: "home-gateway".to_string(),
+        name: "Home Gateway".to_string(),
+        kind: TargetKind::External,
+        protocol: ProxyProtocol::Socks5,
+        host: "192.168.50.111".to_string(),
+        port: 8080,
+        requires_component: None,
+    }
+}
+
+fn local_singbox_target() -> Target {
+    Target {
+        id: "local-singbox".to_string(),
+        name: "Local sing-box".to_string(),
+        kind: TargetKind::Local,
+        protocol: ProxyProtocol::Socks5,
+        host: "127.0.0.1".to_string(),
+        port: 1080,
+        requires_component: Some(ComponentId::Singbox),
+    }
+}
+
+fn missing_singbox_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Singbox,
+        name: "Local sing-box".to_string(),
+        state: ComponentState::Missing,
+        installed: false,
+        running: false,
+        version: None,
+        path: None,
+        problems: vec!["Local sing-box is not installed".to_string()],
+        actions: vec!["Install Local sing-box".to_string()],
+    }
+}
+
+fn running_singbox_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Singbox,
+        name: "Local sing-box".to_string(),
+        state: ComponentState::Running,
+        installed: true,
+        running: true,
+        version: Some("1.11.0".to_string()),
+        path: Some(r"C:\Tools\VpnProxy\sing-box\sing-box.exe".to_string()),
+        problems: Vec::new(),
+        actions: vec!["Restart".to_string(), "Stop".to_string()],
+    }
+}

apps/windows-client/src-tauri/tests/singbox_adapter_tests.rs

@@ -0,0 +1,284 @@
+#[path = "../src/models.rs"]
+mod models;
+#[path = "../src/adapters/proxifyre.rs"]
+mod proxifyre;
+#[path = "../src/adapters/proxy_router.rs"]
+mod proxy_router;
+#[path = "../src/adapters/singbox.rs"]
+mod singbox;
+
+use models::{
+    ComponentId, ComponentState, ComponentStatus, Profile, ProfileItem, ProfileItemType, Protocol,
+    ProxyProtocol, Target, TargetKind,
+};
+use proxifyre::{ProxiFyreAdapter, ProxiFyreConfig};
+use proxy_router::{ProxyRouterAdapter, ProxyRouterRequest};
+use singbox::{
+    SingBoxAdapter, SingBoxCheckResult, SingBoxConfig, SingBoxConfigChecker, SingBoxConfigError,
+    SingBoxConfigErrorKind, SingBoxGenerationRequest, SINGBOX_OUTPUT_FILE,
+};
+use std::{
+    cell::RefCell,
+    path::{Path, PathBuf},
+};
+
+#[test]
+fn generates_local_singbox_config_and_runs_check_when_binary_path_is_supplied() {
+    let adapter = SingBoxAdapter::default();
+    let targets = vec![local_singbox_target()];
+    let components = vec![running_singbox_component()];
+    let checker = RecordingChecker::ok("configuration OK");
+    let binary_path = Path::new(r"C:\Tools\VpnProxy\sing-box\sing-box.exe");
+
+    let generated = adapter
+        .generate_config(
+            SingBoxGenerationRequest::new(&targets, &components, Some(binary_path)),
+            &checker,
+        )
+        .expect("running local sing-box should generate config");
+    let config: SingBoxConfig =
+        serde_json::from_str(&generated.contents).expect("generated sing-box json");
+
+    assert_eq!(generated.adapter_id, "singbox");
+    assert_eq!(generated.output_file_name, SINGBOX_OUTPUT_FILE);
+    assert_eq!(generated.local_target_id, "local-singbox");
+    assert_eq!(generated.listen, "127.0.0.1");
+    assert_eq!(generated.listen_port, 1080);
+    assert_eq!(
+        generated.check,
+        Some(SingBoxCheckResult {
+            checked: true,
+            success: true,
+            message: "configuration OK".to_string(),
+        })
+    );
+    assert_eq!(config.log.level, "info");
+    assert_eq!(config.inbounds.len(), 1);
+    assert_eq!(config.inbounds[0].inbound_type, "mixed");
+    assert_eq!(config.inbounds[0].listen, "127.0.0.1");
+    assert_eq!(config.inbounds[0].listen_port, 1080);
+    assert!(!config.inbounds[0].set_system_proxy);
+    assert_eq!(config.outbounds[0].outbound_type, "direct");
+    assert_eq!(config.route.final_outbound, "direct");
+    let calls = checker.calls.borrow();
+    assert_eq!(calls.len(), 1);
+    assert_eq!(calls[0].0.as_path(), binary_path);
+    assert!(calls[0].1.contains(r#""type": "mixed""#));
+}
+
+#[test]
+fn skips_singbox_check_when_binary_path_is_not_supplied() {
+    let adapter = SingBoxAdapter::default();
+    let targets = vec![local_singbox_target()];
+    let components = vec![running_singbox_component()];
+    let checker = RecordingChecker::ok("should not run");
+
+    let generated = adapter
+        .generate_config(
+            SingBoxGenerationRequest::new(&targets, &components, None),
+            &checker,
+        )
+        .expect("binary path is optional");
+
+    assert_eq!(generated.check, None);
+    assert!(checker.calls.borrow().is_empty());
+}
+
+#[test]
+fn blocks_local_singbox_config_when_required_component_is_missing() {
+    let adapter = SingBoxAdapter::default();
+    let targets = vec![local_singbox_target()];
+    let components = Vec::new();
+    let checker = RecordingChecker::ok("should not run");
+
+    let error = adapter
+        .generate_config(
+            SingBoxGenerationRequest::new(&targets, &components, None),
+            &checker,
+        )
+        .expect_err("local sing-box target requires component state");
+
+    assert_eq!(error.kind, SingBoxConfigErrorKind::MissingRequiredComponent);
+    assert!(checker.calls.borrow().is_empty());
+}
+
+#[test]
+fn blocks_local_singbox_config_when_component_is_not_running() {
+    let adapter = SingBoxAdapter::default();
+    let targets = vec![local_singbox_target()];
+    let components = vec![stopped_singbox_component()];
+    let checker = RecordingChecker::ok("should not run");
+
+    let error = adapter
+        .generate_config(
+            SingBoxGenerationRequest::new(&targets, &components, None),
+            &checker,
+        )
+        .expect_err("local sing-box target requires running component");
+
+    assert_eq!(
+        error.kind,
+        SingBoxConfigErrorKind::RequiredComponentNotRunning
+    );
+    assert!(checker.calls.borrow().is_empty());
+}
+
+#[test]
+fn propagates_failed_singbox_check_as_structured_error() {
+    let adapter = SingBoxAdapter::default();
+    let targets = vec![local_singbox_target()];
+    let components = vec![running_singbox_component()];
+    let checker = RecordingChecker::err("invalid config");
+
+    let error = adapter
+        .generate_config(
+            SingBoxGenerationRequest::new(&targets, &components, Some(Path::new("sing-box.exe"))),
+            &checker,
+        )
+        .expect_err("failed sing-box check should block generated config");
+
+    assert_eq!(error.kind, SingBoxConfigErrorKind::CheckFailed);
+    assert!(error.message.contains("invalid config"));
+}
+
+#[test]
+fn external_proxifyre_apply_does_not_require_singbox_component() {
+    let adapter = ProxiFyreAdapter::default();
+    let profiles = vec![discord_profile("home-gateway")];
+    let targets = vec![external_socks5_target()];
+    let components = vec![missing_singbox_component()];
+
+    let generated = adapter
+        .generate_config(ProxyRouterRequest::new(&profiles, &targets, &components))
+        .expect("external SOCKS5 target should not require local sing-box");
+    let config: ProxiFyreConfig =
+        serde_json::from_str(&generated.contents).expect("generated proxifyre json");
+
+    assert_eq!(config.proxies.len(), 1);
+    assert_eq!(
+        config.proxies[0].socks5_proxy_endpoint,
+        "192.168.50.111:8080"
+    );
+}
+
+struct RecordingChecker {
+    calls: RefCell<Vec<(PathBuf, String)>>,
+    result: Result<SingBoxCheckResult, SingBoxConfigError>,
+}
+
+impl RecordingChecker {
+    fn ok(message: &str) -> Self {
+        Self {
+            calls: RefCell::new(Vec::new()),
+            result: Ok(SingBoxCheckResult {
+                checked: true,
+                success: true,
+                message: message.to_string(),
+            }),
+        }
+    }
+
+    fn err(message: &str) -> Self {
+        Self {
+            calls: RefCell::new(Vec::new()),
+            result: Err(SingBoxConfigError::new(
+                SingBoxConfigErrorKind::CheckFailed,
+                message,
+            )),
+        }
+    }
+}
+
+impl SingBoxConfigChecker for RecordingChecker {
+    fn check_config(
+        &self,
+        binary_path: &Path,
+        config_json: &str,
+    ) -> Result<SingBoxCheckResult, SingBoxConfigError> {
+        self.calls
+            .borrow_mut()
+            .push((binary_path.to_path_buf(), config_json.to_string()));
+        self.result.clone()
+    }
+}
+
+fn discord_profile(target_id: &str) -> Profile {
+    Profile {
+        id: "discord".to_string(),
+        name: "Discord".to_string(),
+        enabled: true,
+        target_id: target_id.to_string(),
+        protocols: vec![Protocol::Tcp, Protocol::Udp],
+        items: vec![ProfileItem {
+            item_type: ProfileItemType::Process,
+            value: "Discord".to_string(),
+            recursive: false,
+        }],
+    }
+}
+
+fn external_socks5_target() -> Target {
+    Target {
+        id: "home-gateway".to_string(),
+        name: "Home Gateway".to_string(),
+        kind: TargetKind::External,
+        protocol: ProxyProtocol::Socks5,
+        host: "192.168.50.111".to_string(),
+        port: 8080,
+        requires_component: None,
+    }
+}
+
+fn local_singbox_target() -> Target {
+    Target {
+        id: "local-singbox".to_string(),
+        name: "Local sing-box".to_string(),
+        kind: TargetKind::Local,
+        protocol: ProxyProtocol::Socks5,
+        host: "127.0.0.1".to_string(),
+        port: 1080,
+        requires_component: Some(ComponentId::Singbox),
+    }
+}
+
+fn running_singbox_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Singbox,
+        name: "Local sing-box".to_string(),
+        state: ComponentState::Running,
+        installed: true,
+        running: true,
+        version: Some("1.11.0".to_string()),
+        path: Some(r"C:\Tools\VpnProxy\sing-box\sing-box.exe".to_string()),
+        problems: Vec::new(),
+        actions: vec!["Restart".to_string(), "Stop".to_string()],
+    }
+}
+
+fn stopped_singbox_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Singbox,
+        name: "Local sing-box".to_string(),
+        state: ComponentState::Stopped,
+        installed: true,
+        running: false,
+        version: Some("1.11.0".to_string()),
+        path: Some(r"C:\Tools\VpnProxy\sing-box\sing-box.exe".to_string()),
+        problems: vec!["Service is stopped".to_string()],
+        actions: vec!["Start".to_string()],
+    }
+}
+
+fn missing_singbox_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Singbox,
+        name: "Local sing-box".to_string(),
+        state: ComponentState::Missing,
+        installed: false,
+        running: false,
+        version: None,
+        path: None,
+        problems: vec!["Local sing-box is not installed".to_string()],
+        actions: vec!["Install Local sing-box".to_string()],
+    }
+}

apps/windows-client/src-tauri/tests/storage_tests.rs

@@ -0,0 +1,198 @@
+#[path = "../src/activity.rs"]
+mod activity;
+#[path = "../src/models.rs"]
+mod models;
+#[path = "../src/storage.rs"]
+mod storage;
+
+use models::{
+    ActivityEntry, ActivityLevel, ComponentId, ComponentState, ComponentStatus, Profile,
+    ProfileItem, ProfileItemType, Protocol, ProxyProtocol, Target, TargetKind,
+};
+use std::fs;
+use std::path::{Path, PathBuf};
+use std::time::{SystemTime, UNIX_EPOCH};
+use storage::{backup_path, default_config_root, JsonStorage, StoragePaths};
+
+#[test]
+fn storage_defaults_to_programdata_root() {
+    let expected = PathBuf::from(r"C:\ProgramData\VpnProxy");
+
+    assert_eq!(default_config_root(), expected);
+    assert_eq!(StoragePaths::default().root, expected);
+}
+
+#[test]
+fn roundtrips_profiles_targets_components_and_activity() {
+    let root = test_root("roundtrip");
+    let storage = JsonStorage::new(root.clone());
+
+    let profiles = vec![sample_profile("discord")];
+    let targets = vec![sample_target("home-gateway")];
+    let components = vec![sample_component()];
+    let activity = vec![sample_activity(
+        "created",
+        "2026-01-01T10:00:00Z",
+        ActivityLevel::Success,
+    )];
+
+    storage.write_profiles(&profiles).expect("write profiles");
+    storage.write_targets(&targets).expect("write targets");
+    storage
+        .write_components(&components)
+        .expect("write components");
+    storage.write_activity(&activity).expect("write activity");
+
+    assert_eq!(storage.read_profiles().expect("read profiles"), profiles);
+    assert_eq!(storage.read_targets().expect("read targets"), targets);
+    assert_eq!(
+        storage.read_components().expect("read components"),
+        components
+    );
+    assert_eq!(storage.read_activity().expect("read activity"), activity);
+
+    cleanup(&root);
+}
+
+#[test]
+fn invalid_json_falls_back_to_empty_collection() {
+    let root = test_root("invalid-json");
+    let storage = JsonStorage::new(root.clone());
+    storage.ensure_dirs().expect("create storage dirs");
+    fs::write(&storage.paths().profiles_file, "{not valid json").expect("write invalid json");
+
+    assert_eq!(
+        storage.read_profiles().expect("invalid profiles fallback"),
+        Vec::<Profile>::new()
+    );
+
+    cleanup(&root);
+}
+
+#[test]
+fn write_creates_backup_before_overwriting_source_file() {
+    let root = test_root("backup");
+    let storage = JsonStorage::new(root.clone());
+    let first = vec![sample_profile("first")];
+    let second = vec![sample_profile("second")];
+
+    storage.write_profiles(&first).expect("first write");
+    storage.write_profiles(&second).expect("second write");
+
+    let backup = backup_path(&storage.paths().profiles_file);
+    assert!(backup.exists(), "backup file should exist");
+
+    let backup_contents = fs::read_to_string(backup).expect("read backup");
+    let backup_profiles: Vec<Profile> =
+        serde_json::from_str(&backup_contents).expect("backup json");
+
+    assert_eq!(backup_profiles, first);
+    assert_eq!(storage.read_profiles().expect("current profiles"), second);
+
+    cleanup(&root);
+}
+
+#[test]
+fn activity_entries_are_sorted_and_capped() {
+    let root = test_root("activity");
+    let storage = JsonStorage::with_activity_limit(root.clone(), 2);
+
+    storage
+        .append_activity(sample_activity(
+            "old",
+            "2026-01-01T10:00:00Z",
+            ActivityLevel::Info,
+        ))
+        .expect("append old");
+    storage
+        .append_activity(sample_activity(
+            "new",
+            "2026-01-03T10:00:00Z",
+            ActivityLevel::Success,
+        ))
+        .expect("append new");
+    storage
+        .append_activity(sample_activity(
+            "middle",
+            "2026-01-02T10:00:00Z",
+            ActivityLevel::Warning,
+        ))
+        .expect("append middle");
+
+    let entries = storage.read_activity().expect("read capped activity");
+
+    assert_eq!(entries.len(), 2);
+    assert_eq!(
+        entries
+            .iter()
+            .map(|entry| entry.id.as_str())
+            .collect::<Vec<_>>(),
+        vec!["new", "middle"]
+    );
+
+    cleanup(&root);
+}
+
+fn test_root(name: &str) -> PathBuf {
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .expect("system clock before unix epoch")
+        .as_nanos();
+
+    std::env::temp_dir().join(format!("vpn-proxy-storage-{name}-{timestamp}"))
+}
+
+fn cleanup(root: &Path) {
+    let _ = fs::remove_dir_all(root);
+}
+
+fn sample_profile(id: &str) -> Profile {
+    Profile {
+        id: id.to_string(),
+        name: format!("Profile {id}"),
+        enabled: true,
+        target_id: "home-gateway".to_string(),
+        protocols: vec![Protocol::Tcp, Protocol::Udp],
+        items: vec![ProfileItem {
+            item_type: ProfileItemType::Process,
+            value: "Discord".to_string(),
+            recursive: false,
+        }],
+    }
+}
+
+fn sample_target(id: &str) -> Target {
+    Target {
+        id: id.to_string(),
+        name: "Home Gateway".to_string(),
+        kind: TargetKind::External,
+        protocol: ProxyProtocol::Socks5,
+        host: "192.168.50.111".to_string(),
+        port: 8080,
+        requires_component: None,
+    }
+}
+
+fn sample_component() -> ComponentStatus {
+    ComponentStatus {
+        id: ComponentId::Proxyfier,
+        name: "ProxiFyre".to_string(),
+        state: ComponentState::Missing,
+        installed: false,
+        running: false,
+        version: None,
+        path: None,
+        problems: vec!["ProxiFyre не установлен".to_string()],
+        actions: vec!["Установить ProxiFyre".to_string()],
+    }
+}
+
+fn sample_activity(id: &str, at: &str, level: ActivityLevel) -> ActivityEntry {
+    ActivityEntry {
+        id: id.to_string(),
+        at: at.to_string(),
+        level,
+        title: format!("Activity {id}"),
+        message: "Storage test activity".to_string(),
+    }
+}

apps/windows-client/src/api/tauriCommands.ts

@@ -0,0 +1,97 @@
+import { invoke } from '@tauri-apps/api/core';
+import type {
+  ActivityEntry,
+  ComponentStatus,
+  Profile,
+  ProfileInput,
+  Target,
+  TargetInput,
+} from '../domain/types';
+
+export interface CommandError {
+  code: string;
+  message: string;
+  details?: Array<{
+    field: string;
+    message: string;
+  }>;
+}
+
+export interface StatusResponse {
+  routeLine: string;
+  activeProfileCount: number;
+  routedAppCount: number;
+  activeTarget?: Target;
+  components: ComponentStatus[];
+  recentActivity: ActivityEntry[];
+  generatedConfigPath: string;
+}
+
+export interface SavedStateResponse {
+  profiles: Profile[];
+  targets: Target[];
+  generatedConfigPath: string;
+}
+
+export interface HelperApplyResult {
+  success: boolean;
+  changed: boolean;
+  action: string;
+  message: string;
+}
+
+export interface ApplyProfilesResponse {
+  success: boolean;
+  changed: boolean;
+  message: string;
+  adapterId: string;
+  generatedConfigPath: string;
+  enabledProfiles: number;
+  routedApps: number;
+  helper: HelperApplyResult;
+  activity: ActivityEntry;
+}
+
+export function getStatus(): Promise<StatusResponse> {
+  return invoke<StatusResponse>('get_status');
+}
+
+export function getSavedState(): Promise<SavedStateResponse> {
+  return invoke<SavedStateResponse>('get_saved_state');
+}
+
+export function getProfiles(): Promise<Profile[]> {
+  return invoke<Profile[]>('get_profiles');
+}
+
+export function saveProfile(input: ProfileInput): Promise<Profile> {
+  return invoke<Profile>('save_profile', { input });
+}
+
+export function getTargets(): Promise<Target[]> {
+  return invoke<Target[]>('get_targets');
+}
+
+export function saveTarget(input: TargetInput): Promise<Target> {
+  return invoke<Target>('save_target', { input });
+}
+
+export function getComponents(): Promise<ComponentStatus[]> {
+  return invoke<ComponentStatus[]>('get_components');
+}
+
+export function applyProfiles(): Promise<ApplyProfilesResponse> {
+  return invoke<ApplyProfilesResponse>('apply_profiles');
+}
+
+export function openConfigLocation(): Promise<string> {
+  return invoke<string>('open_config_location');
+}
+
+export function startProxiFyreService(): Promise<ComponentStatus> {
+  return invoke<ComponentStatus>('start_proxifyre_service');
+}
+
+export function stopProxiFyreService(): Promise<ComponentStatus> {
+  return invoke<ComponentStatus>('stop_proxifyre_service');
+}

apps/windows-client/src/app/App.tsx

@@ -0,0 +1,770 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { open } from '@tauri-apps/plugin-dialog';
+import { Cpu, FileCode2, FolderOpen } from 'lucide-react';
+import {
+  applyProfiles,
+  getComponents,
+  getSavedState,
+  openConfigLocation,
+  saveProfile,
+  saveTarget,
+  startProxiFyreService,
+  stopProxiFyreService,
+  type ApplyProfilesResponse,
+} from '../api/tauriCommands';
+import type { ComponentStatus, Profile, ProfileItemInput, ProfileItemType, Target } from '../domain/types';
+
+type DraftItemType = Extract<ProfileItemType, 'process' | 'folder' | 'exe'>;
+type ServiceVisualState = 'active' | 'settling' | null;
+
+interface DraftItem {
+  id: string;
+  type: DraftItemType;
+  value: string;
+}
+
+interface Notice {
+  kind: 'success' | 'error' | 'info';
+  title: string;
+  text: string;
+}
+
+interface LogEntry extends Notice {
+  id: string;
+  at: number;
+}
+
+const MAIN_TARGET_ID = 'main-proxy';
+const MAIN_PROFILE_ID = 'main-profile';
+const LOG_VISIBLE_MS = 6500;
+
+const fallbackComponents: ComponentStatus[] = [
+  {
+    id: 'proxyfier',
+    name: 'ProxiFyre',
+    state: 'missing',
+    installed: false,
+    running: false,
+    problems: ['ProxiFyre не найден'],
+    actions: [],
+  },
+];
+
+export function App() {
+  const [proxyInput, setProxyInput] = useState('');
+  const [profileId, setProfileId] = useState(MAIN_PROFILE_ID);
+  const [targetId, setTargetId] = useState(MAIN_TARGET_ID);
+  const [items, setItems] = useState<DraftItem[]>([]);
+  const [loadedProfiles, setLoadedProfiles] = useState<Profile[]>([]);
+  const [isProcessInputOpen, setIsProcessInputOpen] = useState(false);
+  const [processInput, setProcessInput] = useState('');
+  const [pickerAction, setPickerAction] = useState<'exe' | 'folder' | null>(null);
+  const [components, setComponents] = useState<ComponentStatus[]>(fallbackComponents);
+  const [generatedConfigPath, setGeneratedConfigPath] = useState('');
+  const [logEntries, setLogEntries] = useState<LogEntry[]>([]);
+  const [activeLogId, setActiveLogId] = useState<string | null>(null);
+  const [isLogOpen, setIsLogOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isDetectingComponents, setIsDetectingComponents] = useState(true);
+  const [isApplying, setIsApplying] = useState(false);
+  const [isOpeningConfig, setIsOpeningConfig] = useState(false);
+  const [serviceAction, setServiceAction] = useState<'start' | 'stop' | null>(null);
+  const [serviceVisualState, setServiceVisualState] = useState<ServiceVisualState>(null);
+  const serviceVisualTimerRef = useRef<number | null>(null);
+
+  const proxyfier = useMemo(
+    () => components.find((component) => component.id === 'proxyfier'),
+    [components],
+  );
+  const activeLog = useMemo(
+    () => logEntries.find((entry) => entry.id === activeLogId) ?? null,
+    [activeLogId, logEntries],
+  );
+  const finderStateClass = isDetectingComponents ? 'checking' : proxyfier?.installed ? 'found' : 'missing';
+  const finderVisualClass =
+    serviceVisualState === 'active' ? 'working' : serviceVisualState === 'settling' ? 'settling' : '';
+
+  useEffect(() => {
+    void refresh();
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (serviceVisualTimerRef.current !== null) {
+        window.clearTimeout(serviceVisualTimerRef.current);
+      }
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!activeLogId) return undefined;
+
+    const timer = window.setTimeout(() => {
+      setActiveLogId((current) => (current === activeLogId ? null : current));
+    }, LOG_VISIBLE_MS);
+
+    return () => window.clearTimeout(timer);
+  }, [activeLogId]);
+
+  async function refresh() {
+    setIsLoading(true);
+    try {
+      const saved = await getSavedState();
+      applySavedState(saved.profiles, saved.targets, saved.generatedConfigPath);
+    } catch {
+      showNotice({
+        kind: 'info',
+        title: 'Режим предпросмотра',
+        text: 'Запусти приложение через Tauri, чтобы увидеть найденный ProxiFyre и применить конфиг.',
+      });
+    } finally {
+      setIsLoading(false);
+    }
+
+    void refreshComponents();
+  }
+
+  async function refreshComponents() {
+    setIsDetectingComponents(true);
+    try {
+      const detectedComponents = await getComponents();
+      setComponents(detectedComponents);
+    } catch (error) {
+      showNotice({
+        kind: 'error',
+        title: 'ProxiFyre не проверен',
+        text: errorMessage(error),
+      });
+    } finally {
+      setIsDetectingComponents(false);
+    }
+  }
+
+  function applySavedState(profiles: Profile[], targets: Target[], generatedPath: string) {
+    const activeProfiles = profiles.filter((profile) => profile.enabled);
+    const mainProfile = profiles.find((profile) => profile.id === MAIN_PROFILE_ID);
+    const activeProfile = mainProfile ?? activeProfiles[0];
+    const activeTarget = targetForUi(targets, activeProfile);
+    const editableProfiles = mainProfile ? [mainProfile] : activeProfiles;
+
+    if (activeTarget) setProxyInput(formatProxy(activeTarget));
+    setItems(itemsForProfiles(editableProfiles));
+    setLoadedProfiles(profiles);
+    setProfileId(mainProfile?.id ?? MAIN_PROFILE_ID);
+    setTargetId(activeTarget?.id ?? activeProfile?.targetId ?? MAIN_TARGET_ID);
+    setGeneratedConfigPath(generatedPath);
+  }
+
+  function addItem(type: DraftItemType, rawValue: string) {
+    const value = normalizeItemValue(rawValue, type);
+    if (!value) {
+      showNotice({
+        kind: 'error',
+        title: 'Нечего добавить',
+        text: emptyItemMessage(type),
+      });
+      return false;
+    }
+
+    if (items.some((item) => item.type === type && sameValue(item.value, value))) {
+      showNotice({
+        kind: 'info',
+        title: 'Уже добавлено',
+        text: value,
+      });
+      return false;
+    }
+
+    setItems((current) => [
+      ...current,
+      {
+        id: `${type}-${Date.now()}`,
+        type,
+        value,
+      },
+    ]);
+    return true;
+  }
+
+  function addProcess() {
+    if (addItem('process', processInput)) {
+      setProcessInput('');
+      setIsProcessInputOpen(false);
+    }
+  }
+
+  function removeItem(id: string) {
+    setItems((current) => current.filter((item) => item.id !== id));
+  }
+
+  async function pickAndAddItem(type: Extract<DraftItemType, 'exe' | 'folder'>) {
+    setPickerAction(type);
+    try {
+      const selectedPath = await pickPath(type);
+      if (selectedPath) {
+        addItem(type, selectedPath);
+      }
+    } catch (error) {
+      showNotice({
+        kind: 'error',
+        title: type === 'exe' ? 'EXE не выбран' : 'Папка не выбрана',
+        text: errorMessage(error),
+      });
+    } finally {
+      setPickerAction(null);
+    }
+  }
+
+  async function updateConfig() {
+    let parsedProxy: ParsedProxy;
+    try {
+      parsedProxy = parseProxy(proxyInput);
+      if (!items.length) throw new Error('Добавь хотя бы один процесс, EXE-файл или папку.');
+    } catch (error) {
+      showNotice({
+        kind: 'error',
+        title: 'Проверь данные',
+        text: errorMessage(error),
+      });
+      return;
+    }
+
+    setIsApplying(true);
+    try {
+      await saveTarget({
+        id: targetId,
+        name: 'Основной прокси',
+        kind: 'external',
+        protocol: parsedProxy.protocol,
+        host: parsedProxy.host,
+        port: parsedProxy.port,
+      });
+      await saveProfile({
+        id: profileId,
+        name: 'Приложения через прокси',
+        enabled: true,
+        targetId,
+        protocols: ['TCP', 'UDP'],
+        items: items.map(profileItemInput),
+      });
+      await Promise.all(
+        loadedProfiles
+          .filter((profile) => profile.enabled && profile.id !== profileId)
+          .map((profile) => saveProfile(profileInputFromProfile(profile, false))),
+      );
+
+      const result = await applyProfiles();
+      const [saved, detectedComponents] = await Promise.all([
+        getSavedState(),
+        getComponents(),
+      ]);
+
+      applySavedState(saved.profiles, saved.targets, result.generatedConfigPath);
+      setComponents(detectedComponents);
+      showNotice(noticeFromApply(result));
+    } catch (error) {
+      showNotice({
+        kind: 'error',
+        title: 'Конфиг не обновлен',
+        text: errorMessage(error),
+      });
+    } finally {
+      setIsApplying(false);
+    }
+  }
+
+  async function openConfig() {
+    setIsOpeningConfig(true);
+    try {
+      const openedPath = await openConfigLocation();
+      showNotice({
+        kind: 'info',
+        title: 'Конфиг открыт',
+        text: openedPath,
+      });
+    } catch (error) {
+      showNotice({
+        kind: 'error',
+        title: 'Не удалось открыть конфиг',
+        text: errorMessage(error),
+      });
+    } finally {
+      setIsOpeningConfig(false);
+    }
+  }
+
+  async function setProxiFyreServiceRunning(shouldRun: boolean) {
+    const action = shouldRun ? 'start' : 'stop';
+    setServiceAction(action);
+    startServiceVisual();
+    try {
+      await nextFrame();
+      const component = shouldRun
+        ? await startProxiFyreService()
+        : await stopProxiFyreService();
+
+      setComponents((current) => upsertComponent(current, component));
+      showNotice({
+        kind: 'success',
+        title: shouldRun ? 'Служба запущена' : 'Служба остановлена',
+        text: proxyfierDetails(component, false),
+      });
+    } catch (error) {
+      showNotice({
+        kind: 'error',
+        title: shouldRun ? 'Служба не запущена' : 'Служба не остановлена',
+        text: errorMessage(error),
+      });
+    } finally {
+      setServiceAction(null);
+      settleServiceVisual();
+    }
+  }
+
+  function startServiceVisual() {
+    if (serviceVisualTimerRef.current !== null) {
+      window.clearTimeout(serviceVisualTimerRef.current);
+      serviceVisualTimerRef.current = null;
+    }
+
+    setServiceVisualState('active');
+  }
+
+  function settleServiceVisual() {
+    if (serviceVisualTimerRef.current !== null) {
+      window.clearTimeout(serviceVisualTimerRef.current);
+    }
+
+    setServiceVisualState('settling');
+    serviceVisualTimerRef.current = window.setTimeout(() => {
+      setServiceVisualState(null);
+      serviceVisualTimerRef.current = null;
+    }, 700);
+  }
+
+  function showNotice(notice: Notice) {
+    const entry: LogEntry = {
+      ...notice,
+      id: `log-${Date.now()}-${Math.random().toString(36).slice(2)}`,
+      at: Date.now(),
+    };
+
+    setLogEntries((current) => [entry, ...current].slice(0, 40));
+    setActiveLogId(entry.id);
+  }
+
+  return (
+    <main className="simple-shell">
+      <section className="simple-panel">
+        <header className="simple-header">
+          <div>
+            <small>VPN Proxy</small>
+            <h1>Прокси для приложений</h1>
+          </div>
+          <button
+            type="button"
+            className="ghost-button"
+            onClick={refresh}
+            disabled={isLoading || isDetectingComponents}
+          >
+            {isLoading ? 'Загружаю...' : isDetectingComponents ? 'Проверяю...' : 'Обновить'}
+          </button>
+        </header>
+
+        <div className={`finder-card ${finderStateClass} ${finderVisualClass}`.trim()}>
+          <span className="finder-border-glow" aria-hidden="true">
+            <span className="finder-border-glow-segment top" />
+            <span className="finder-border-glow-segment right" />
+            <span className="finder-border-glow-segment bottom" />
+            <span className="finder-border-glow-segment left" />
+          </span>
+          <span className="status-light" />
+          <div className="finder-text">
+            <strong>{proxyfierTitle(proxyfier, isDetectingComponents)}</strong>
+            <span>{proxyfierDetails(proxyfier, isDetectingComponents)}</span>
+          </div>
+          <div className="service-actions" aria-label="Управление службой ProxiFyre">
+            <button
+              type="button"
+              className="service-button"
+              onClick={() => setProxiFyreServiceRunning(true)}
+              disabled={isDetectingComponents || Boolean(serviceAction) || !proxyfier?.installed || Boolean(proxyfier?.running)}
+            >
+              {serviceAction === 'start' ? '...' : 'Запустить'}
+            </button>
+            <button
+              type="button"
+              className="service-button stop"
+              onClick={() => setProxiFyreServiceRunning(false)}
+              disabled={isDetectingComponents || Boolean(serviceAction) || !proxyfier?.installed || !proxyfier?.running}
+            >
+              {serviceAction === 'stop' ? '...' : 'Остановить'}
+            </button>
+          </div>
+        </div>
+
+        <label className="simple-field">
+          <span>Прокси</span>
+          <input
+            value={proxyInput}
+            onChange={(event) => setProxyInput(event.target.value)}
+            placeholder="socks5://127.0.0.1:1080"
+            spellCheck={false}
+          />
+        </label>
+
+        <section className="apps-section">
+          <div className="section-head">
+            <h2>Приложения</h2>
+            <span>{items.length}</span>
+          </div>
+
+          {isProcessInputOpen ? (
+            <div className="process-add-line">
+              <input
+                value={processInput}
+                onChange={(event) => setProcessInput(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter') addProcess();
+                  if (event.key === 'Escape') {
+                    setProcessInput('');
+                    setIsProcessInputOpen(false);
+                  }
+                }}
+                placeholder="Discord"
+                spellCheck={false}
+                autoFocus
+              />
+              <button type="button" onClick={addProcess}>
+                OK
+              </button>
+              <button
+                type="button"
+                className="process-cancel-button"
+                onClick={() => {
+                  setProcessInput('');
+                  setIsProcessInputOpen(false);
+                }}
+              >
+                Отмена
+              </button>
+            </div>
+          ) : (
+            <div className="add-toolbar" aria-label="Добавить приложение">
+              <button
+                type="button"
+                className="add-tile"
+                onClick={() => setIsProcessInputOpen(true)}
+                aria-label="Добавить процесс"
+                title="Процесс"
+              >
+                <Cpu size={22} strokeWidth={1.8} />
+                <span className="sr-only">Процесс</span>
+              </button>
+              <button
+                type="button"
+                className="add-tile"
+                onClick={() => void pickAndAddItem('exe')}
+                disabled={Boolean(pickerAction)}
+                aria-label="Добавить EXE-файл"
+                title="EXE-файл"
+              >
+                {pickerAction === 'exe' ? <span className="tile-loading">...</span> : <FileCode2 size={22} strokeWidth={1.8} />}
+                <span className="sr-only">EXE-файл</span>
+              </button>
+              <button
+                type="button"
+                className="add-tile"
+                onClick={() => void pickAndAddItem('folder')}
+                disabled={Boolean(pickerAction)}
+                aria-label="Добавить папку"
+                title="Папка"
+              >
+                {pickerAction === 'folder' ? <span className="tile-loading">...</span> : <FolderOpen size={22} strokeWidth={1.8} />}
+                <span className="sr-only">Папка</span>
+              </button>
+            </div>
+          )}
+
+          <div className="app-list">
+            {isLoading ? (
+              <div className="list-skeleton" aria-label="Загрузка приложений">
+                <span />
+                <span />
+              </div>
+            ) : items.length ? (
+              items.map((item) => (
+                <div className="app-row" key={item.id}>
+                  <div className="app-row-main">
+                    <span className="item-icon" aria-hidden="true">
+                      {itemIcon(item.type)}
+                    </span>
+                    <div>
+                      <strong>{item.value}</strong>
+                      <span>{itemTypeLabel(item.type)}</span>
+                    </div>
+                  </div>
+                  <button type="button" onClick={() => removeItem(item.id)} aria-label={`Удалить ${item.value}`}>
+                    Удалить
+                  </button>
+                </div>
+              ))
+            ) : (
+              <div className="empty-state">Добавь процесс, папку или путь к EXE-файлу.</div>
+            )}
+          </div>
+        </section>
+
+        <div className="command-row">
+          <button type="button" className="apply-button" onClick={updateConfig} disabled={isApplying}>
+            {isApplying ? 'Обновляю...' : 'Обновить конфиг'}
+          </button>
+          <button
+            type="button"
+            className="open-config-button"
+            onClick={openConfig}
+            disabled={isOpeningConfig}
+          >
+            {isOpeningConfig ? '...' : 'Открыть'}
+          </button>
+        </div>
+
+        {generatedConfigPath ? <p className="config-path">{generatedConfigPath}</p> : null}
+      </section>
+
+      {logEntries.length ? (
+        <aside className={`log-dock ${activeLog?.kind ?? 'idle'}`} aria-live="polite">
+          <div className={`log-current ${activeLog ? 'visible' : 'hidden'}`}>
+            {activeLog ? (
+              <>
+                <strong>{activeLog.title}</strong>
+                <span>{activeLog.text}</span>
+              </>
+            ) : (
+              <span className="log-muted">Журнал событий</span>
+            )}
+          </div>
+          <button type="button" className="log-toggle" onClick={() => setIsLogOpen((current) => !current)}>
+            {isLogOpen ? 'Скрыть' : 'Посмотреть'}
+            <span>{logEntries.length}</span>
+          </button>
+          {isLogOpen ? (
+            <div className="log-history">
+              {logEntries.map((entry) => (
+                <div className={`log-history-row ${entry.kind}`} key={entry.id}>
+                  <time>{formatLogTime(entry.at)}</time>
+                  <div>
+                    <strong>{entry.title}</strong>
+                    <span>{entry.text}</span>
+                  </div>
+                </div>
+              ))}
+            </div>
+          ) : null}
+        </aside>
+      ) : null}
+    </main>
+  );
+}
+
+interface ParsedProxy {
+  protocol: 'socks5';
+  host: string;
+  port: number;
+}
+
+function parseProxy(rawValue: string): ParsedProxy {
+  const value = rawValue.trim();
+  if (!value) throw new Error('Введи адрес прокси.');
+
+  const withProtocol = /^[a-z][a-z0-9+.-]*:\/\//i.test(value) ? value : `socks5://${value}`;
+  let parsed: URL;
+  try {
+    parsed = new URL(withProtocol);
+  } catch {
+    throw new Error('Формат: socks5://host:port или host:port.');
+  }
+
+  const protocol = parsed.protocol.replace(':', '').toLowerCase();
+  if (protocol !== 'socks5') {
+    throw new Error('Сейчас поддерживается только SOCKS5.');
+  }
+  if (parsed.username || parsed.password) {
+    throw new Error('Прокси с логином и паролем пока не поддерживаются.');
+  }
+
+  const host = parsed.hostname.replace(/^\[|\]$/g, '');
+  const port = Number(parsed.port);
+  if (!host || !Number.isInteger(port) || port < 1 || port > 65535) {
+    throw new Error('Укажи хост и порт прокси.');
+  }
+
+  return { protocol: 'socks5', host, port };
+}
+
+function targetForUi(targets: Target[], profile: Profile | undefined) {
+  if (profile) return targets.find((target) => target.id === profile.targetId);
+  return targets.find((target) => target.id === MAIN_TARGET_ID) ?? targets.find((target) => target.kind === 'external');
+}
+
+function itemsForProfiles(profiles: Profile[]): DraftItem[] {
+  const seen = new Set<string>();
+  const items: DraftItem[] = [];
+
+  for (const profile of profiles) {
+    for (const item of profile.items) {
+      if (item.type !== 'process' && item.type !== 'folder' && item.type !== 'exe') continue;
+
+      const key = `${item.type}:${item.value.trim().toLowerCase()}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      items.push({
+        id: `${item.type}-${items.length}-${item.value}`,
+        type: item.type,
+        value: item.value,
+      });
+    }
+  }
+
+  return items;
+}
+
+function formatProxy(target: Target) {
+  return target.protocol === 'socks5'
+    ? `${target.host}:${target.port}`
+    : `${target.protocol}://${target.host}:${target.port}`;
+}
+
+function normalizeItemValue(value: string, type: DraftItemType) {
+  const clean = value.trim().replace(/^"|"$/g, '');
+  if (!clean) return '';
+  if (type === 'folder' || type === 'exe') return clean;
+
+  return clean
+    .split(/[\\/]/)
+    .pop()
+    ?.replace(/\.exe$/i, '')
+    .trim() ?? '';
+}
+
+async function pickPath(type: Extract<DraftItemType, 'exe' | 'folder'>) {
+  const selected = await open(
+    type === 'folder'
+      ? {
+          title: 'Выбери папку',
+          directory: true,
+          multiple: false,
+        }
+      : {
+          title: 'Выбери EXE-файл',
+          directory: false,
+          multiple: false,
+          filters: [{ name: 'EXE-файлы', extensions: ['exe'] }],
+        },
+  );
+
+  if (Array.isArray(selected)) return selected[0] ?? null;
+  return selected;
+}
+
+function nextFrame() {
+  return new Promise<void>((resolve) => {
+    window.requestAnimationFrame(() => resolve());
+  });
+}
+
+function profileItemInput(item: DraftItem): ProfileItemInput {
+  return {
+    type: item.type,
+    value: item.value,
+    recursive: item.type === 'folder',
+  };
+}
+
+function emptyItemMessage(type: DraftItemType) {
+  if (type === 'process') return 'Введи имя процесса.';
+  if (type === 'folder') return 'Введи путь к папке.';
+  return 'Введи путь к EXE-файлу.';
+}
+
+function itemTypeLabel(type: DraftItemType) {
+  if (type === 'process') return 'процесс';
+  if (type === 'folder') return 'папка';
+  return 'EXE-файл';
+}
+
+function itemIcon(type: DraftItemType) {
+  if (type === 'process') return <Cpu size={18} strokeWidth={1.9} />;
+  if (type === 'folder') return <FolderOpen size={18} strokeWidth={1.9} />;
+  return <FileCode2 size={18} strokeWidth={1.9} />;
+}
+
+function profileInputFromProfile(profile: Profile, enabled: boolean) {
+  return {
+    id: profile.id,
+    name: profile.name,
+    enabled,
+    targetId: profile.targetId,
+    protocols: profile.protocols,
+    items: profile.items.map((item) => ({
+      type: item.type,
+      value: item.value,
+      recursive: item.recursive,
+    })),
+  };
+}
+
+function proxyfierTitle(component: ComponentStatus | undefined, checking: boolean) {
+  if (checking) return 'Проверяю ProxiFyre';
+  if (!component) return 'ProxiFyre не проверен';
+  if (component.running) return 'ProxiFyre найден и запущен';
+  if (component.installed) return 'ProxiFyre найден';
+  return 'ProxiFyre не найден';
+}
+
+function proxyfierDetails(component: ComponentStatus | undefined, checking: boolean) {
+  if (checking) return 'Ищу установленный клиент и состояние службы.';
+  if (!component) return 'Нажми «Обновить», чтобы проверить компьютер.';
+  if (component.path) return component.path;
+  return component.problems[0] ?? 'Путь установки не найден.';
+}
+
+function noticeFromApply(result: ApplyProfilesResponse): Notice {
+  return {
+    kind: result.success ? 'success' : 'error',
+    title: result.success ? 'Конфиг обновлен' : 'Конфиг создан, но не применен',
+    text: result.message,
+  };
+}
+
+function upsertComponent(components: ComponentStatus[], component: ComponentStatus) {
+  const index = components.findIndex((current) => current.id === component.id);
+  if (index === -1) return [...components, component];
+
+  return [
+    ...components.slice(0, index),
+    component,
+    ...components.slice(index + 1),
+  ];
+}
+
+function sameValue(left: string, right: string) {
+  return left.trim().toLowerCase() === right.trim().toLowerCase();
+}
+
+function formatLogTime(timestamp: number) {
+  return new Date(timestamp).toLocaleTimeString('ru-RU', {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  });
+}
+
+function errorMessage(error: unknown) {
+  if (error instanceof Error) return error.message;
+  if (typeof error === 'string') return error;
+  if (error && typeof error === 'object' && 'message' in error) {
+    return String((error as { message: unknown }).message);
+  }
+  return 'Неизвестная ошибка.';
+}

apps/windows-client/src/domain/types.ts

@@ -0,0 +1,77 @@
+export type Protocol = 'TCP' | 'UDP';
+export type ProfileItemType = 'process' | 'folder' | 'exe';
+export type TargetKind = 'local' | 'external';
+export type ProxyProtocol = 'socks5' | 'http';
+export type ComponentId = 'control-app' | 'proxyfier' | 'singbox';
+export type ComponentState = 'installed' | 'missing' | 'stopped' | 'running' | 'error';
+export type ActivityLevel = 'info' | 'warning' | 'error' | 'success';
+
+export interface ProfileItemInput {
+  type: ProfileItemType | string;
+  value: string;
+  recursive?: boolean;
+}
+
+export interface ProfileInput {
+  id?: string;
+  name: string;
+  enabled?: boolean;
+  targetId?: string;
+  protocols?: string[];
+  items?: ProfileItemInput[];
+}
+
+export interface ProfileItem {
+  type: ProfileItemType;
+  value: string;
+  recursive: boolean;
+}
+
+export interface Profile {
+  id: string;
+  name: string;
+  enabled: boolean;
+  targetId: string;
+  protocols: Protocol[];
+  items: ProfileItem[];
+}
+
+export interface TargetInput {
+  id?: string;
+  name: string;
+  kind?: TargetKind | string;
+  protocol?: ProxyProtocol | string;
+  host: string;
+  port: number;
+  requiresComponent?: ComponentId | string;
+}
+
+export interface Target {
+  id: string;
+  name: string;
+  kind: TargetKind;
+  protocol: ProxyProtocol;
+  host: string;
+  port: number;
+  requiresComponent?: ComponentId;
+}
+
+export interface ComponentStatus {
+  id: ComponentId;
+  name: string;
+  state: ComponentState;
+  installed: boolean;
+  running: boolean;
+  version?: string;
+  path?: string;
+  problems: string[];
+  actions: string[];
+}
+
+export interface ActivityEntry {
+  id: string;
+  at: string;
+  level: ActivityLevel;
+  title: string;
+  message: string;
+}

apps/windows-client/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './app/App';
+import './styles/app.css';
+
+createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+

apps/windows-client/src/styles/app.css

@@ -0,0 +1,776 @@
+:root {
+  font-family:
+    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  color: #e5e7eb;
+  background: #101216;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #101216;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  border: 0;
+}
+
+button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.simple-shell {
+  display: block;
+  min-height: 100vh;
+  background: #101216;
+  padding: 0;
+}
+
+.simple-panel {
+  display: grid;
+  align-content: start;
+  min-height: 100vh;
+  width: 100%;
+  border: 0;
+  border-radius: 0;
+  background: #101216;
+  box-shadow: none;
+  padding: 18px 18px 96px;
+}
+
+.simple-header,
+.finder-card,
+.section-head,
+.add-toolbar,
+.process-add-line,
+.app-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.simple-header {
+  margin: -18px -18px 16px;
+  border-bottom: 1px solid #2a2f3a;
+  background: #181b22;
+  padding: 14px 18px;
+}
+
+.simple-header small,
+.simple-field span,
+.app-row-main > div > span,
+.config-path,
+.finder-card span {
+  color: #8d99ae;
+}
+
+.simple-header h1,
+.section-head h2 {
+  margin: 0;
+  letter-spacing: 0;
+}
+
+.simple-header h1 {
+  margin-top: 4px;
+  font-size: 22px;
+  line-height: 1.1;
+  font-weight: 650;
+}
+
+.section-head h2 {
+  font-size: 16px;
+}
+
+.ghost-button,
+.add-toolbar button,
+.process-add-line button,
+.app-row button,
+.open-config-button,
+.service-button {
+  min-height: 36px;
+  border: 1px solid #343b49;
+  border-radius: 4px;
+  background: #242a35;
+  color: #eef2ff;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.ghost-button:hover,
+.add-toolbar button:hover,
+.process-add-line button:hover,
+.app-row button:hover,
+.open-config-button:hover,
+.service-button:hover {
+  background: #2d3543;
+}
+
+.finder-card {
+  position: relative;
+  isolation: isolate;
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  justify-content: stretch;
+  min-height: 56px;
+  overflow: hidden;
+  border: 1px solid #2b3342;
+  border-radius: 4px;
+  background: #151923;
+  padding: 12px;
+}
+
+.finder-border-glow {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.22s ease;
+}
+
+.finder-card > :not(.finder-border-glow) {
+  position: relative;
+  z-index: 1;
+}
+
+.finder-card.checking .finder-border-glow,
+.finder-card.working .finder-border-glow {
+  opacity: 1;
+}
+
+.finder-card.checking .finder-border-glow {
+  opacity: 0.78;
+}
+
+.finder-card.settling .finder-border-glow {
+  opacity: 0;
+  transition-duration: 0.7s;
+}
+
+.finder-border-glow-segment {
+  position: absolute;
+  display: block;
+  background: #93c5fd;
+  box-shadow:
+    0 0 8px rgba(96, 165, 250, 0.95),
+    0 0 16px rgba(34, 197, 94, 0.36);
+  opacity: 0;
+}
+
+.finder-border-glow-segment.top,
+.finder-border-glow-segment.bottom {
+  width: 108px;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
+}
+
+.finder-border-glow-segment.right,
+.finder-border-glow-segment.left {
+  width: 2px;
+  height: 64px;
+  background: linear-gradient(180deg, transparent, #60a5fa 24%, #bbf7d0 54%, transparent);
+}
+
+.finder-border-glow-segment.top {
+  top: 0;
+  animation: finder-border-top 1.6s linear infinite;
+}
+
+.finder-border-glow-segment.right {
+  right: 0;
+  animation: finder-border-right 1.6s linear infinite;
+}
+
+.finder-border-glow-segment.bottom {
+  bottom: 0;
+  animation: finder-border-bottom 1.6s linear infinite;
+}
+
+.finder-border-glow-segment.left {
+  left: 0;
+  animation: finder-border-left 1.6s linear infinite;
+}
+
+.finder-text,
+.app-row > div,
+.app-row-main > div {
+  min-width: 0;
+}
+
+.finder-card strong,
+.finder-card span,
+.app-row-main strong,
+.app-row-main > div > span {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.status-light {
+  flex: 0 0 auto;
+  width: 11px;
+  height: 11px;
+  border-radius: 999px;
+  background: #ef4444;
+}
+
+.finder-card.found .status-light {
+  background: #22c55e;
+  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12);
+}
+
+.finder-card.missing .status-light {
+  background: #f59e0b;
+  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.12);
+}
+
+.finder-card.checking .status-light {
+  border: 2px solid #3b82f6;
+  border-top-color: transparent;
+  background: transparent;
+  box-shadow: none;
+  animation: spin 0.75s linear infinite;
+}
+
+.service-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+.service-button {
+  min-width: 102px;
+  white-space: nowrap;
+}
+
+.service-button.stop {
+  color: #fecaca;
+}
+
+.simple-field {
+  display: grid;
+  gap: 7px;
+  margin: 14px 0;
+}
+
+.simple-field input,
+.process-add-line input {
+  min-height: 42px;
+  width: 100%;
+  border: 1px solid #343b49;
+  border-radius: 4px;
+  background: #0d1016;
+  color: #f8fafc;
+  outline: none;
+  padding: 9px 11px;
+}
+
+.simple-field input:focus,
+.process-add-line input:focus {
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+.apps-section {
+  display: grid;
+  gap: 10px;
+  margin-top: 8px;
+}
+
+.section-head span {
+  min-width: 28px;
+  border: 1px solid #343b49;
+  border-radius: 4px;
+  background: #1b202b;
+  color: #dbeafe;
+  padding: 3px 9px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.add-toolbar {
+  justify-content: center;
+  padding: 4px 0;
+}
+
+.add-tile {
+  display: grid;
+  place-items: center;
+  width: 74px;
+  height: 48px;
+  border-color: #2b3342;
+  background: #131720;
+  color: #dbeafe;
+  padding: 0;
+}
+
+.add-tile svg {
+  display: block;
+}
+
+.add-tile:hover {
+  border-color: #3b82f6;
+  background: #182033;
+}
+
+.add-tile[aria-pressed="true"] {
+  border-color: #3b82f6;
+  background: #1e3a8a;
+}
+
+.tile-loading {
+  color: #dbeafe;
+  font-weight: 800;
+  animation: pulse 1s ease-in-out infinite;
+}
+
+.process-add-line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 72px 88px;
+}
+
+.process-add-line button {
+  border-color: #166534;
+  background: #14532d;
+  font-weight: 700;
+}
+
+.process-add-line .process-cancel-button {
+  border-color: #343b49;
+  background: #242a35;
+  color: #cbd5e1;
+  font-weight: 600;
+}
+
+.process-add-line button:hover {
+  background: #166534;
+}
+
+.process-add-line .process-cancel-button:hover {
+  background: #2d3543;
+}
+
+.app-list {
+  display: grid;
+  gap: 8px;
+}
+
+.app-row-main {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.app-row .item-icon {
+  display: grid;
+  flex: 0 0 auto;
+  align-self: center;
+  place-items: center;
+  width: 34px;
+  height: 34px;
+  border: 1px solid #2b3342;
+  border-radius: 4px;
+  background: #0d1016;
+  color: #dbeafe;
+  line-height: 0;
+}
+
+.app-row .item-icon svg {
+  display: block;
+}
+
+.app-row,
+.empty-state {
+  border: 1px solid #2b3342;
+  border-radius: 4px;
+  background: #131720;
+  padding: 10px 12px;
+}
+
+.app-row button {
+  color: #fecaca;
+}
+
+.empty-state {
+  color: #8d99ae;
+  min-height: 48px;
+}
+
+.list-skeleton {
+  display: grid;
+  gap: 8px;
+}
+
+.list-skeleton span {
+  min-height: 56px;
+  border: 1px solid #2b3342;
+  border-radius: 4px;
+  background:
+    linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.12), transparent),
+    #131720;
+  background-size: 220% 100%;
+  animation: shimmer 1.15s linear infinite;
+}
+
+.command-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 132px;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+.apply-button {
+  min-height: 46px;
+  width: 100%;
+  border: 1px solid #16a34a;
+  border-radius: 4px;
+  background: #22c55e;
+  color: #04130a;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.apply-button:hover {
+  background: #4ade80;
+}
+
+.open-config-button {
+  min-height: 46px;
+  width: 100%;
+}
+
+.config-path {
+  margin: 10px 0 0;
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.log-dock {
+  position: fixed;
+  right: 10px;
+  bottom: 10px;
+  left: 10px;
+  z-index: 30;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+  align-items: center;
+  min-height: 48px;
+  border: 1px solid #2b3342;
+  border-radius: 4px;
+  background: rgba(19, 23, 32, 0.98);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.34);
+  padding: 7px;
+}
+
+.log-dock.error {
+  border-color: rgba(239, 68, 68, 0.58);
+}
+
+.log-dock.success {
+  border-color: rgba(34, 197, 94, 0.58);
+}
+
+.log-dock.info {
+  border-color: rgba(59, 130, 246, 0.58);
+}
+
+.log-current {
+  display: flex;
+  min-width: 0;
+  gap: 10px;
+  align-items: baseline;
+  padding: 0 8px;
+  transition: opacity 180ms ease, transform 180ms ease;
+}
+
+.log-current.hidden {
+  color: #8d99ae;
+  opacity: 0.72;
+}
+
+.log-current.visible {
+  opacity: 1;
+}
+
+.log-current strong,
+.log-current span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.log-current strong {
+  flex: 0 0 auto;
+}
+
+.log-current span {
+  min-width: 0;
+}
+
+.log-muted {
+  color: #8d99ae;
+}
+
+.log-toggle {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  min-height: 34px;
+  border: 1px solid #343b49;
+  border-radius: 4px;
+  background: #242a35;
+  color: #eef2ff;
+  padding: 7px 10px;
+  cursor: pointer;
+}
+
+.log-toggle:hover {
+  background: #2d3543;
+}
+
+.log-toggle span {
+  min-width: 22px;
+  border-radius: 4px;
+  background: #1b202b;
+  color: #dbeafe;
+  padding: 2px 6px;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.log-history {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: 6px;
+  max-height: 230px;
+  overflow: auto;
+  border-top: 1px solid #2b3342;
+  padding-top: 7px;
+}
+
+.log-history-row {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr);
+  gap: 10px;
+  align-items: start;
+  border: 1px solid #2b3342;
+  border-radius: 4px;
+  background: #0d1016;
+  padding: 8px;
+}
+
+.log-history-row.error {
+  border-color: rgba(239, 68, 68, 0.42);
+}
+
+.log-history-row.success {
+  border-color: rgba(34, 197, 94, 0.36);
+}
+
+.log-history-row.info {
+  border-color: rgba(59, 130, 246, 0.36);
+}
+
+.log-history-row time {
+  color: #8d99ae;
+  font-size: 12px;
+}
+
+.log-history-row strong,
+.log-history-row span {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.log-history-row span {
+  color: #b6c2d4;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes pulse {
+  50% {
+    opacity: 0.45;
+  }
+}
+
+@keyframes finder-border-top {
+  0% {
+    left: -116px;
+    opacity: 0;
+  }
+
+  4%,
+  23% {
+    opacity: 1;
+  }
+
+  25%,
+  100% {
+    left: calc(100% + 8px);
+    opacity: 0;
+  }
+}
+
+@keyframes finder-border-right {
+  0%,
+  25% {
+    top: -72px;
+    opacity: 0;
+  }
+
+  29%,
+  48% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    top: calc(100% + 8px);
+    opacity: 0;
+  }
+}
+
+@keyframes finder-border-bottom {
+  0%,
+  50% {
+    right: -116px;
+    opacity: 0;
+  }
+
+  54%,
+  73% {
+    opacity: 1;
+  }
+
+  75%,
+  100% {
+    right: calc(100% + 8px);
+    opacity: 0;
+  }
+}
+
+@keyframes finder-border-left {
+  0%,
+  75% {
+    bottom: -72px;
+    opacity: 0;
+  }
+
+  79%,
+  98% {
+    opacity: 1;
+  }
+
+  100% {
+    bottom: calc(100% + 8px);
+    opacity: 0;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: 220% 0;
+  }
+
+  to {
+    background-position: -220% 0;
+  }
+}
+
+@media (max-width: 680px) {
+  .simple-shell {
+    padding: 0;
+  }
+
+  .simple-panel {
+    padding: 14px 14px 100px;
+  }
+
+  .simple-header,
+  .app-row {
+    align-items: stretch;
+    flex-direction: column;
+  }
+
+  .add-toolbar {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .add-tile {
+    width: 100%;
+  }
+
+  .process-add-line {
+    grid-template-columns: 1fr;
+  }
+
+  .finder-card {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+
+  .service-actions {
+    grid-column: 1 / -1;
+  }
+
+  .service-button {
+    flex: 1;
+  }
+
+  .command-row {
+    grid-template-columns: 1fr;
+  }
+
+  .log-dock {
+    right: 8px;
+    left: 8px;
+    grid-template-columns: 1fr;
+  }
+
+  .log-current {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .log-history-row {
+    grid-template-columns: 1fr;
+  }
+}

apps/windows-client/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": []
+}
+

apps/windows-client/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+const host = process.env.TAURI_DEV_HOST;
+
+export default defineConfig({
+  plugins: [react()],
+  clearScreen: false,
+  server: {
+    host: host || false,
+    port: 5173,
+    strictPort: true,
+    watch: {
+      ignored: ['**/src-tauri/**'],
+    },
+  },
+});
+

docker-compose.client.yml

@@ -0,0 +1,46 @@
+services:
+  vpn-proxy-client:
+    build:
+      context: .
+      dockerfile: Dockerfile.client
+      args:
+        SINGBOX_VERSION: ${SINGBOX_VERSION:-1.12.13}
+    container_name: vpn-proxy-client
+    environment:
+      APP_MODE: client
+      PORT: ${PORT:-3456}
+      PROXY_PORT: ${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}
+      CLIENT_PROXY_PORT_START: ${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}
+      CLIENT_PROXY_PORT_END: ${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}
+      PROXY_BIND_IP: 0.0.0.0
+      DATA_DIR: /var/lib/vpn-proxy
+      SING_BOX_CONFIG: /etc/sing-box/config.json
+      SING_BOX_CACHE: /var/lib/sing-box/cache.db
+      ROUTING_RU_DIRECT: ${ROUTING_RU_DIRECT:-true}
+      RULE_SET_DOWNLOAD_DETOUR: ${RULE_SET_DOWNLOAD_DETOUR:-vpn}
+      LOG_LEVEL: ${LOG_LEVEL:-info}
+      HTTP_PROXY: ""
+      HTTPS_PROXY: ""
+      ALL_PROXY: ""
+      http_proxy: ""
+      https_proxy: ""
+      all_proxy: ""
+      NO_PROXY: "localhost,127.0.0.1,host.docker.internal"
+      no_proxy: "localhost,127.0.0.1,host.docker.internal"
+    ports:
+      - "127.0.0.1:${CLIENT_UI_PORT:-3456}:${PORT:-3456}"
+      - "127.0.0.1:${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}:${CLIENT_PROXY_PORT:-${CLIENT_PROXY_PORT_START:-8080}}"
+    volumes:
+      - vpn-proxy-client-data:/var/lib/vpn-proxy
+      - sing-box-client-cache:/var/lib/sing-box
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "--noproxy", "*", "-fsS", "http://127.0.0.1:${PORT:-3456}/api/state"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 20s
+
+volumes:
+  vpn-proxy-client-data:
+  sing-box-client-cache:

docker-compose.gateway.yml

@@ -3,6 +3,11 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
+      args:
+        BASE_IMAGE: ${BASE_IMAGE:-debian:bookworm-slim}
+        SINGBOX_VERSION: ${SINGBOX_VERSION:-1.12.13}
+        INSTALL_RUNTIME_DEPS: ${INSTALL_RUNTIME_DEPS:-true}
+        INSTALL_SINGBOX: ${INSTALL_SINGBOX:-true}
     container_name: vpn-proxy-gateway
     network_mode: host
     cap_add:
@@ -12,12 +17,17 @@ services:
       - .env
     environment:
       DATA_DIR: /var/lib/vpn-proxy
-      SING_BOX_CONFIG: /etc/sing-box/config.json
       SING_BOX_CACHE: /var/lib/sing-box/cache.db
     volumes:
       - vpn-proxy-data:/var/lib/vpn-proxy
       - sing-box-cache:/var/lib/sing-box
     restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-fsS", "http://127.0.0.1:${PORT:-3456}/api/state"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 20s
 
 volumes:
   vpn-proxy-data:

docker-compose.server.yml

@@ -0,0 +1,22 @@
+services:
+  vpn-proxy-gateway:
+    image: ${GATEWAY_IMAGE}
+    container_name: vpn-proxy-gateway
+    network_mode: host
+    cap_add:
+      - NET_ADMIN
+      - NET_RAW
+    env_file:
+      - .env
+    environment:
+      DATA_DIR: /var/lib/vpn-proxy
+      SING_BOX_CONFIG: /etc/sing-box/config.json
+      SING_BOX_CACHE: /var/lib/sing-box/cache.db
+    volumes:
+      - vpn-proxy-data:/var/lib/vpn-proxy
+      - sing-box-cache:/var/lib/sing-box
+    restart: unless-stopped
+
+volumes:
+  vpn-proxy-data:
+  sing-box-cache:

docs/design/open-design/vpn-proxy-route-console-redesign.html

@@ -0,0 +1,774 @@
+<!doctype html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>VPN Proxy Route Console Redesign</title>
+    <style>
+      :root {
+        color-scheme: light;
+        --bg: oklch(0.965 0.008 232);
+        --surface: oklch(0.986 0.006 232);
+        --surface-2: oklch(0.948 0.009 232);
+        --surface-3: oklch(0.918 0.014 232);
+        --ink: oklch(0.238 0.028 238);
+        --muted: oklch(0.47 0.028 238);
+        --subtle: oklch(0.62 0.022 238);
+        --line: oklch(0.835 0.018 232);
+        --line-strong: oklch(0.72 0.032 232);
+        --blue: oklch(0.56 0.14 244);
+        --blue-soft: oklch(0.915 0.045 244);
+        --green: oklch(0.61 0.13 153);
+        --green-soft: oklch(0.915 0.052 153);
+        --amber: oklch(0.72 0.13 74);
+        --amber-soft: oklch(0.93 0.07 74);
+        --red: oklch(0.58 0.15 27);
+        --radius: 8px;
+        --shadow: 0 18px 42px oklch(0.36 0.035 238 / 0.13);
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        margin: 0;
+        min-height: 100vh;
+        background: var(--bg);
+        color: var(--ink);
+        font-size: 14px;
+        line-height: 1.45;
+      }
+
+      button,
+      input,
+      select {
+        font: inherit;
+      }
+
+      .page {
+        min-height: 100vh;
+        padding: 24px;
+      }
+
+      .shell {
+        max-width: 1320px;
+        min-height: calc(100vh - 48px);
+        margin: 0 auto;
+        display: grid;
+        grid-template-rows: auto 1fr;
+        overflow: hidden;
+        background: var(--surface);
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        box-shadow: var(--shadow);
+      }
+
+      .topbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 20px;
+        min-height: 64px;
+        padding: 0 22px;
+        border-bottom: 1px solid var(--line);
+        background: oklch(0.978 0.007 232);
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        min-width: 0;
+      }
+
+      .mark {
+        width: 32px;
+        height: 32px;
+        border-radius: 7px;
+        background:
+          linear-gradient(135deg, oklch(0.52 0.13 244), oklch(0.62 0.12 153));
+        position: relative;
+      }
+
+      .mark::after {
+        content: "";
+        position: absolute;
+        inset: 8px;
+        border: 2px solid oklch(0.985 0.005 232);
+        border-left-color: transparent;
+        border-radius: 50%;
+      }
+
+      .brand h1 {
+        margin: 0;
+        font-size: 16px;
+        font-weight: 700;
+      }
+
+      .brand span {
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      .top-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .status-pill {
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 32px;
+        padding: 0 11px;
+        border: 1px solid oklch(0.73 0.05 153);
+        border-radius: 999px;
+        background: var(--green-soft);
+        color: oklch(0.34 0.08 153);
+        font-size: 13px;
+        font-weight: 650;
+        white-space: nowrap;
+      }
+
+      .status-pill::before {
+        content: "";
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: var(--green);
+      }
+
+      .btn {
+        min-height: 34px;
+        padding: 0 13px;
+        border-radius: 7px;
+        border: 1px solid var(--line-strong);
+        background: var(--surface);
+        color: var(--ink);
+        font-weight: 650;
+        cursor: default;
+      }
+
+      .btn.primary {
+        border-color: oklch(0.49 0.13 244);
+        background: var(--blue);
+        color: oklch(0.985 0.005 232);
+      }
+
+      .workspace {
+        display: grid;
+        grid-template-columns: 264px minmax(0, 1fr) 312px;
+        gap: 0;
+        min-height: 0;
+      }
+
+      .rail {
+        padding: 18px 14px;
+        border-right: 1px solid var(--line);
+        background: oklch(0.956 0.009 232);
+      }
+
+      .nav-title,
+      .panel-label,
+      .field-label {
+        margin: 0;
+        color: var(--muted);
+        font-size: 12px;
+        font-weight: 700;
+      }
+
+      .mode-list {
+        display: grid;
+        gap: 8px;
+        margin-top: 10px;
+      }
+
+      .mode {
+        width: 100%;
+        padding: 12px;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: 11px;
+        text-align: left;
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--surface);
+      }
+
+      .mode.active {
+        border-color: oklch(0.68 0.08 244);
+        background: var(--blue-soft);
+      }
+
+      .mode-dot {
+        width: 11px;
+        height: 11px;
+        margin-top: 4px;
+        border-radius: 50%;
+        background: var(--subtle);
+      }
+
+      .mode.active .mode-dot {
+        background: var(--blue);
+      }
+
+      .mode strong {
+        display: block;
+        font-size: 14px;
+      }
+
+      .mode span {
+        display: block;
+        margin-top: 2px;
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      .rail-section {
+        margin-top: 24px;
+      }
+
+      .mini-list {
+        display: grid;
+        gap: 7px;
+        margin-top: 10px;
+      }
+
+      .mini-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        padding: 9px 10px;
+        border: 1px solid var(--line);
+        border-radius: 7px;
+        background: var(--surface);
+        font-size: 12px;
+      }
+
+      .mini-row span {
+        color: var(--muted);
+      }
+
+      .main {
+        min-width: 0;
+        padding: 22px;
+        overflow: auto;
+      }
+
+      .route-head {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 18px;
+        align-items: start;
+        margin-bottom: 18px;
+      }
+
+      .route-head h2 {
+        margin: 0;
+        font-size: 28px;
+        line-height: 1.12;
+      }
+
+      .route-head p {
+        max-width: 68ch;
+        margin: 8px 0 0;
+        color: var(--muted);
+      }
+
+      .health {
+        min-width: 210px;
+        padding: 12px 14px;
+        border: 1px solid oklch(0.76 0.07 153);
+        border-radius: var(--radius);
+        background: var(--green-soft);
+      }
+
+      .health strong {
+        display: block;
+        font-size: 18px;
+      }
+
+      .health span {
+        color: oklch(0.38 0.07 153);
+        font-size: 12px;
+      }
+
+      .route-strip {
+        display: grid;
+        grid-template-columns: repeat(4, minmax(0, 1fr));
+        gap: 10px;
+        margin-bottom: 16px;
+      }
+
+      .node {
+        min-height: 126px;
+        padding: 14px;
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--surface);
+        position: relative;
+      }
+
+      .node.active {
+        border-color: oklch(0.72 0.075 153);
+        background: var(--green-soft);
+      }
+
+      .node.pending {
+        border-color: oklch(0.8 0.09 74);
+        background: var(--amber-soft);
+      }
+
+      .node small {
+        color: var(--muted);
+        font-weight: 700;
+      }
+
+      .node strong {
+        display: block;
+        margin-top: 9px;
+        font-size: 18px;
+      }
+
+      .node span {
+        display: block;
+        margin-top: 5px;
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      .flow-line {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 42px;
+        padding: 0 13px;
+        margin-bottom: 20px;
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--surface-2);
+        overflow-x: auto;
+        white-space: nowrap;
+        font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
+        font-size: 12px;
+      }
+
+      .flow-line b {
+        color: var(--blue);
+      }
+
+      .flow-line span {
+        color: var(--muted);
+      }
+
+      .settings-grid {
+        display: grid;
+        grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
+        gap: 14px;
+        align-items: start;
+      }
+
+      .panel {
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--surface);
+      }
+
+      .panel-head {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 14px;
+        min-height: 50px;
+        padding: 0 14px;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .panel-head h3 {
+        margin: 0;
+        font-size: 15px;
+      }
+
+      .panel-body {
+        padding: 14px;
+      }
+
+      .form-grid {
+        display: grid;
+        gap: 12px;
+      }
+
+      .field {
+        display: grid;
+        gap: 6px;
+      }
+
+      .control-row {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto;
+        gap: 8px;
+      }
+
+      .input,
+      .select {
+        width: 100%;
+        min-height: 38px;
+        border: 1px solid var(--line-strong);
+        border-radius: 7px;
+        background: oklch(0.992 0.004 232);
+        color: var(--ink);
+        padding: 0 11px;
+      }
+
+      .summary-list {
+        display: grid;
+        gap: 8px;
+      }
+
+      .summary-row {
+        display: grid;
+        grid-template-columns: 94px minmax(0, 1fr);
+        gap: 10px;
+        align-items: baseline;
+        padding: 9px 0;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .summary-row:last-child {
+        border-bottom: 0;
+      }
+
+      .summary-row small {
+        color: var(--muted);
+        font-weight: 700;
+      }
+
+      .summary-row strong {
+        overflow-wrap: anywhere;
+      }
+
+      .side {
+        padding: 18px 14px;
+        border-left: 1px solid var(--line);
+        background: oklch(0.956 0.009 232);
+        overflow: auto;
+      }
+
+      .copy-stack {
+        display: grid;
+        gap: 8px;
+        margin-top: 10px;
+      }
+
+      .copy-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 10px;
+        min-height: 40px;
+        padding: 0 10px;
+        border: 1px solid var(--line);
+        border-radius: 7px;
+        background: var(--surface);
+        font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
+        font-size: 12px;
+      }
+
+      .copy-row button {
+        border: 0;
+        background: transparent;
+        color: var(--blue);
+        font-weight: 700;
+      }
+
+      .side-panel {
+        margin-top: 18px;
+        border: 1px solid var(--line);
+        border-radius: var(--radius);
+        background: var(--surface);
+      }
+
+      .activity {
+        display: grid;
+        gap: 0;
+      }
+
+      .activity-row {
+        display: grid;
+        grid-template-columns: 54px minmax(0, 1fr);
+        gap: 10px;
+        padding: 10px 0;
+        border-bottom: 1px solid var(--line);
+      }
+
+      .activity-row:last-child {
+        border-bottom: 0;
+      }
+
+      .activity-row time {
+        color: var(--muted);
+        font-family: "SF Mono", "Cascadia Code", Menlo, monospace;
+        font-size: 11px;
+      }
+
+      .activity-row strong {
+        display: block;
+        font-size: 13px;
+      }
+
+      .activity-row span {
+        display: block;
+        color: var(--muted);
+        font-size: 12px;
+      }
+
+      @media (max-width: 1080px) {
+        .workspace {
+          grid-template-columns: 220px minmax(0, 1fr);
+        }
+
+        .side {
+          grid-column: 1 / -1;
+          border-left: 0;
+          border-top: 1px solid var(--line);
+        }
+
+        .route-strip,
+        .settings-grid {
+          grid-template-columns: 1fr 1fr;
+        }
+      }
+
+      @media (max-width: 760px) {
+        .page {
+          padding: 10px;
+        }
+
+        .shell {
+          min-height: calc(100vh - 20px);
+        }
+
+        .topbar,
+        .route-head,
+        .workspace {
+          grid-template-columns: 1fr;
+        }
+
+        .topbar {
+          align-items: flex-start;
+          padding: 14px;
+        }
+
+        .top-actions {
+          flex-wrap: wrap;
+        }
+
+        .rail {
+          border-right: 0;
+          border-bottom: 1px solid var(--line);
+        }
+
+        .route-strip,
+        .settings-grid,
+        .control-row {
+          grid-template-columns: 1fr;
+        }
+
+        .main,
+        .side {
+          padding: 14px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="page">
+      <section class="shell" aria-label="VPN Proxy redesign preview">
+        <header class="topbar">
+          <div class="brand">
+            <div class="mark" aria-hidden="true"></div>
+            <div>
+              <h1>VPN Proxy Client</h1>
+              <span>Local control panel, macOS Docker mode</span>
+            </div>
+          </div>
+          <div class="top-actions">
+            <span class="status-pill">sing-box running</span>
+            <button class="btn">Restart</button>
+            <button class="btn primary">Apply route</button>
+          </div>
+        </header>
+
+        <div class="workspace">
+          <aside class="rail" aria-label="Connection modes">
+            <p class="nav-title">Режим подключения</p>
+            <div class="mode-list">
+              <button class="mode" type="button">
+                <span class="mode-dot"></span>
+                <span>
+                  <strong>Общий gateway</strong>
+                  <span>192.168.50.111:8080</span>
+                </span>
+              </button>
+              <button class="mode active" type="button">
+                <span class="mode-dot"></span>
+                <span>
+                  <strong>Локальный VPN</strong>
+                  <span>Finland 02 selected</span>
+                </span>
+              </button>
+              <button class="mode" type="button">
+                <span class="mode-dot"></span>
+                <span>
+                  <strong>Напрямую</strong>
+                  <span>без VPN и gateway</span>
+                </span>
+              </button>
+            </div>
+
+            <section class="rail-section">
+              <p class="nav-title">Проверки</p>
+              <div class="mini-list">
+                <div class="mini-row"><strong>Docker</strong><span>ready</span></div>
+                <div class="mini-row"><strong>Ports</strong><span>8082 open</span></div>
+                <div class="mini-row"><strong>Config</strong><span>valid</span></div>
+              </div>
+            </section>
+          </aside>
+
+          <section class="main">
+            <div class="route-head">
+              <div>
+                <h2>Текущий маршрут: приложения Mac идут через локальный VPN</h2>
+                <p>
+                  Главный экран показывает не настройки как список, а фактический путь трафика:
+                  от приложения до интернета, с портом, выбранным режимом и состоянием сервиса.
+                </p>
+              </div>
+              <div class="health">
+                <strong>42 ms</strong>
+                <span>последняя проверка маршрута</span>
+              </div>
+            </div>
+
+            <div class="route-strip" aria-label="Active route">
+              <div class="node">
+                <small>Источник</small>
+                <strong>Mac apps</strong>
+                <span>браузер, Discord, Telegram</span>
+              </div>
+              <div class="node active">
+                <small>Локальный proxy</small>
+                <strong>127.0.0.1:8082</strong>
+                <span>HTTP и SOCKS5</span>
+              </div>
+              <div class="node active">
+                <small>Режим</small>
+                <strong>Local VPN</strong>
+                <span>Finland 02</span>
+              </div>
+              <div class="node pending">
+                <small>Выход</small>
+                <strong>Internet</strong>
+                <span>проверка 11:04</span>
+              </div>
+            </div>
+
+            <div class="flow-line" aria-label="Route path">
+              <b>Mac apps</b><span>></span><b>127.0.0.1:8082</b><span>></span><b>sing-box</b><span>></span><b>Finland 02</b><span>></span><b>Internet</b>
+            </div>
+
+            <div class="settings-grid">
+              <section class="panel">
+                <div class="panel-head">
+                  <h3>Настройка выбранного режима</h3>
+                  <button class="btn">Load subscription</button>
+                </div>
+                <div class="panel-body">
+                  <div class="form-grid">
+                    <label class="field">
+                      <span class="field-label">Подписка или VLESS</span>
+                      <div class="control-row">
+                        <input class="input" value="https://provider.example/subscription" />
+                        <button class="btn">Refresh</button>
+                      </div>
+                    </label>
+                    <label class="field">
+                      <span class="field-label">VPN-сервер</span>
+                      <div class="control-row">
+                        <select class="select">
+                          <option>Finland 02, 42 ms, 18 GB left</option>
+                        </select>
+                        <button class="btn primary">Connect</button>
+                      </div>
+                    </label>
+                  </div>
+                </div>
+              </section>
+
+              <section class="panel">
+                <div class="panel-head">
+                  <h3>Сводка</h3>
+                </div>
+                <div class="panel-body">
+                  <div class="summary-list">
+                    <div class="summary-row"><small>Service</small><strong>running since 10:52</strong></div>
+                    <div class="summary-row"><small>Config</small><strong>applied 2 minutes ago</strong></div>
+                    <div class="summary-row"><small>Fallback</small><strong>VPN by default</strong></div>
+                    <div class="summary-row"><small>Quota</small><strong>18 GB left</strong></div>
+                  </div>
+                </div>
+              </section>
+            </div>
+          </section>
+
+          <aside class="side" aria-label="Local proxy details">
+            <p class="panel-label">Адреса для приложений</p>
+            <div class="copy-stack">
+              <div class="copy-row"><span>http://127.0.0.1:8082</span><button>Copy</button></div>
+              <div class="copy-row"><span>socks5://127.0.0.1:8082</span><button>Copy</button></div>
+            </div>
+
+            <section class="side-panel">
+              <div class="panel-head">
+                <h3>Порт proxy</h3>
+              </div>
+              <div class="panel-body">
+                <div class="control-row">
+                  <input class="input" value="8082" />
+                  <button class="btn">Save</button>
+                </div>
+              </div>
+            </section>
+
+            <section class="side-panel">
+              <div class="panel-head">
+                <h3>Активность</h3>
+              </div>
+              <div class="panel-body">
+                <div class="activity">
+                  <div class="activity-row">
+                    <time>11:04</time>
+                    <span><strong>Route check passed</strong><span>Finland 02 returned 42 ms</span></span>
+                  </div>
+                  <div class="activity-row">
+                    <time>11:02</time>
+                    <span><strong>Port changed</strong><span>8080 was busy, 8082 selected</span></span>
+                  </div>
+                  <div class="activity-row">
+                    <time>10:59</time>
+                    <span><strong>Subscription refreshed</strong><span>12 servers available</span></span>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </aside>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>

docs/goals/windows-modular-client/GOAL.md

@@ -0,0 +1,16 @@
+# Goal: Windows Tauri Proxy Client
+
+Use Krypton Execution to execute `docs/goals/windows-modular-client/PLAN.md`.
+
+Core rules:
+- Treat `PLAN.md` as the source plan.
+- Preserve intent, ownership, contract, cutover, evidence, and kill criteria.
+- Build a separate Tauri 2 Windows desktop app under `apps/windows-client`.
+- Do not implement Windows by extending the current Node gateway/client server.
+- Keep Control App, Proxyfier Layer, and Local sing-box separately installable and operable.
+- Make external proxy target + ProxiFyre profile apply the MVP.
+- Keep Local sing-box optional; it must not be required for external target profiles.
+- Keep generated ProxiFyre and sing-box configs derived from source models.
+- Capture acceptance evidence from the target user's perspective and record it in `EVIDENCE.md`.
+- Say "implemented but unproven" if Windows-only privileged evidence cannot be captured.
+

docs/goals/windows-modular-client/PLAN.md

@@ -0,0 +1,506 @@
+# Windows Tauri Proxy Client Implementation Plan
+
+**Intent:** Build a separate Windows desktop proxy management app using Tauri 2, React, TypeScript, and Rust. The app manages three independent components: Control App, Proxyfier Layer, and optional Local sing-box.
+**Current Behavior:** The repo contains a gateway/client Node + React web application and planning documents for a Windows mode inside that app. A newer product/technology brief now targets a standalone Windows desktop utility instead of extending the existing web control panel.
+**Expected Outcome:** A compact Windows desktop utility lets the user configure app-level proxy routing through external SOCKS5/HTTP targets first, then optionally install and use local sing-box. The app remains useful when sing-box is absent.
+**Target-Perspective Output:** A Windows user opens the desktop app, sees Overview, Profiles, Targets, Components, and Logs, adds Discord or another process/folder/exe profile, selects an external proxy target, applies changes to the proxyfier layer, and sees component status plus recent activity. Later, installing Local sing-box adds a local target without changing the profile model.
+**Truth Owner:** Source configuration lives in the Tauri app's Rust domain model and JSON files under `C:\ProgramData\VpnProxy`. Generated ProxiFyre and sing-box configs are derived artifacts. Privileged install/service operations are owned by explicit helper/installer flows, not by React UI state.
+**Contract Boundary:** React UI calls typed Tauri commands. Tauri Rust backend validates and persists profiles/targets/components. Proxy routing is behind a `ProxyRouterAdapter` boundary, with ProxiFyre as the first adapter. Privileged operations go through explicit helper/install commands returning structured JSON.
+**Cutover:** Supersede the prior Node `APP_MODE=windows` implementation direction. Keep existing gateway/client code intact. New Windows work lives under a separate Tauri app slice.
+**Displaced Path:** The old plan to add Windows mode into `src/server`/`src/web` is demoted to historical context. Do not add a third app mode to the current Node server for this product.
+**Value Density:** The smallest high-value slice is the desktop app MVP with external SOCKS5 target + ProxiFyre profile apply. Local sing-box is optional and comes after the proxyfier MVP is proven.
+**Evidence Gate:** Evidence must include target-perspective app proof: built Tauri app or dev window screenshot/state, generated proxyfier config artifact, mocked or real helper response, and manual Windows checklist when privileged components are involved.
+**Acceptance Evidence:** Automated tests pass for Rust/TypeScript domain logic, app build succeeds, the MVP can create a profile and generate/apply ProxiFyre config against an external target, and Windows manual evidence proves independent component behavior.
+**Evidence Lane:** Record command output, app screenshots/state payloads, generated configs, and manual verification in `docs/goals/windows-modular-client/EVIDENCE.md`.
+**Kill Criteria:** No Windows implementation inside current Node gateway/client server; no mandatory sing-box dependency; no generated config as source truth; no hidden installation during profile apply; no direct UI parsing of raw PowerShell/stdout.
+**Architecture Slice:** New standalone Tauri app under `apps/windows-client`, plus docs updates that point from older Windows plans to this plan.
+**Plan Review Gate:** Requires PRE review before implementation execution.
+
+## Source Brief
+
+Product and technology source brief:
+
+- `docs/windows-client-product-tech-brief.md`
+
+This plan turns that brief into an execution-ready implementation sequence.
+
+## Outcome Contract
+
+Plan title: Windows Tauri Proxy Client
+
+Intent: Build a native-feeling Windows utility that manages app-level proxy routing while keeping Control App, Proxyfier Layer, and Local sing-box separately installable and operable.
+
+Current behavior:
+- Existing runtime code is a Node HTTP server and Vite/React web UI for gateway and Mac-style client modes.
+- Earlier Windows docs describe adding Windows mode to that existing app.
+- The selected direction is now Tauri 2 + React/TypeScript + Rust as a separate Windows desktop app.
+
+Expected outcome:
+- `apps/windows-client` contains a Tauri 2 app.
+- The app has Overview, Profiles, Targets, Components, and Logs surfaces.
+- Profiles store process/folder/exe source items.
+- Targets store external proxy endpoints and optional local sing-box.
+- ProxiFyre is the first proxy router adapter.
+- Local sing-box is optional and never required for external target profiles.
+
+Target-perspective output:
+- User can install/run only the Control App.
+- User can see Proxyfier and Local sing-box as separate components.
+- User can add an external SOCKS5 target.
+- User can add a Discord process profile.
+- User can apply the profile to generated ProxiFyre config.
+- User sees activity confirming whether apply succeeded or why it was blocked.
+
+Truth owner:
+- Rust core domain crate owns normalized models and validation.
+- JSON source files under `C:\ProgramData\VpnProxy\config` own persisted profiles/targets/component preferences.
+- `ProxyRouterAdapter` owns conversion from source models to proxy-router generated config.
+- `SingBoxAdapter` owns generated local sing-box config and service contract.
+- React UI owns only transient UI state.
+
+Contract boundary:
+- UI -> Tauri commands with typed request/response DTOs.
+- Tauri commands -> Rust core services.
+- Core services -> adapter traits.
+- Adapter traits -> helper/install/service commands when privileged operations are needed.
+- Helper/install commands return structured JSON, never unstructured text for app logic.
+
+Cutover:
+- Add superseded notes to old Windows Node-mode docs.
+- Keep `docs/windows-client-product-tech-brief.md` as product brief.
+- Make this `PLAN.md` the execution plan.
+- Do not implement Windows by adding `APP_MODE=windows` to the current Node server.
+
+Displaced path:
+- Displace old "Windows mode in current web app" implementation.
+- Displace "full install vs ProxiFyre-only" as dominant architecture; those become recipes composed from separate components.
+
+Value density:
+- MVP must prove app-level routing with external proxy target and ProxiFyre before local sing-box work expands scope.
+
+Evidence gate:
+- Tests and build are not enough.
+- Capture app-visible state and generated config.
+- Capture Windows manual evidence for service/helper actions when those tasks execute.
+
+Acceptance evidence:
+- `cargo test` or equivalent Rust tests for domain/adapters.
+- frontend typecheck/test/build for React.
+- Tauri dev/build command result.
+- Screenshot or state dump showing Windows app surfaces.
+- Generated ProxiFyre config from a sample profile.
+- Manual Windows checklist when privileged components are present.
+
+Non-goals:
+- No Electron.
+- No extension of the current Node gateway/client UI for Windows MVP.
+- No global Windows system proxy changes.
+- No transparent routing without a proxy router.
+- No mandatory local sing-box.
+- No direct coupling of UI to ProxiFyre-specific config shape.
+
+Risk if wrong:
+- If built inside the current Node app, the product will inherit gateway/client assumptions and conflict with the selected Tauri direction.
+- If ProxiFyre is not behind an adapter, licensing or engine changes will force UI/data rewrites.
+- If privileged work is hidden behind apply, users lose control and failures become hard to diagnose.
+
+## Architecture Slice
+
+Files/directories to create:
+- `apps/windows-client/package.json`
+- `apps/windows-client/vite.config.ts`
+- `apps/windows-client/tsconfig.json`
+- `apps/windows-client/src/main.tsx`
+- `apps/windows-client/src/app/App.tsx`
+- `apps/windows-client/src/app/routes.tsx`
+- `apps/windows-client/src/api/tauriCommands.ts`
+- `apps/windows-client/src/domain/types.ts`
+- `apps/windows-client/src/features/overview/*`
+- `apps/windows-client/src/features/profiles/*`
+- `apps/windows-client/src/features/targets/*`
+- `apps/windows-client/src/features/components/*`
+- `apps/windows-client/src/features/logs/*`
+- `apps/windows-client/src/styles/*`
+- `apps/windows-client/src-tauri/Cargo.toml`
+- `apps/windows-client/src-tauri/tauri.conf.json`
+- `apps/windows-client/src-tauri/capabilities/default.json`
+- `apps/windows-client/src-tauri/src/main.rs`
+- `apps/windows-client/src-tauri/src/commands.rs`
+- `apps/windows-client/src-tauri/src/models.rs`
+- `apps/windows-client/src-tauri/src/storage.rs`
+- `apps/windows-client/src-tauri/src/activity.rs`
+- `apps/windows-client/src-tauri/src/adapters/proxy_router.rs`
+- `apps/windows-client/src-tauri/src/adapters/proxifyre.rs`
+- `apps/windows-client/src-tauri/src/adapters/singbox.rs`
+- `apps/windows-client/src-tauri/src/helper.rs`
+- `apps/windows-client/src-tauri/tests/*`
+- `apps/windows-client/scripts/install-control-app.ps1`
+- `apps/windows-client/scripts/install-proxyfier.ps1`
+- `apps/windows-client/scripts/install-singbox.ps1`
+
+Files to modify:
+- `README.md`
+- `docs/roadmap.md`
+- `docs/superpowers/specs/2026-05-21-windows-client-design.md`
+- `docs/superpowers/plans/2026-05-21-windows-client.md`
+- `docs/goals/windows-modular-client/GOAL.md`
+- `docs/goals/windows-modular-client/EVIDENCE.md`
+
+Files to avoid:
+- `src/server/*` except if a later explicit migration asks for shared code extraction.
+- `src/web/*` for Windows MVP.
+- Docker, entrypoint, and compose files.
+- macOS installer.
+
+Source of truth:
+- `C:\ProgramData\VpnProxy\config\profiles.json`
+- `C:\ProgramData\VpnProxy\config\targets.json`
+- `C:\ProgramData\VpnProxy\config\components.json`
+- `C:\ProgramData\VpnProxy\state\activity.json`
+
+Derived artifacts:
+- `C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json`
+- `C:\ProgramData\VpnProxy\generated\sing-box-config.json`
+- ProxiFyre runtime config copied/backed up by helper/apply operation.
+
+Read path:
+- React UI calls Tauri commands.
+- Tauri commands read JSON source via Rust storage service.
+- Component status combines source preferences, filesystem checks, service checks, and helper responses.
+
+Write path:
+- React UI sends typed mutations.
+- Rust validates with domain models.
+- Rust writes source JSON atomically with backups.
+- Apply generates derived config and invokes adapter/helper.
+
+Integration points:
+- ProxiFyre adapter emits `app-config.json` compatible output.
+- Local sing-box adapter emits `sing-box` JSON config and validates via `sing-box check` when binary exists.
+- Tauri sidecar/helper permissions are declared explicitly.
+- Installer scripts may be launched or displayed explicitly, never silently during apply.
+
+Migration/cutover:
+- Older Windows docs point to this plan and source brief.
+- Existing Node app remains gateway/client only.
+- If shared subscription parsing is needed later, extract it intentionally into a shared package rather than importing server internals.
+
+Acceptance evidence gate:
+- MVP evidence must show external-target flow works without local sing-box.
+- Optional sing-box evidence must show the same profile model can switch targets after installing sing-box.
+
+## Task Board
+
+### Task 1: Supersede Old Windows Node Plan
+
+Owner: main agent
+
+Input:
+- `docs/windows-client-product-tech-brief.md`
+- old Windows docs/plans
+
+Files allowed:
+- `docs/superpowers/specs/2026-05-21-windows-client-design.md`
+- `docs/superpowers/plans/2026-05-21-windows-client.md`
+- `docs/roadmap.md`
+- `README.md`
+
+Files forbidden:
+- Runtime source files.
+
+Output:
+- Old Windows documents clearly point to this Tauri plan and no longer read as implementation authority.
+
+Evidence:
+- `rg -n "Tauri|superseded|windows-client-product-tech-brief|apps/windows-client" README.md docs`
+
+Depends on: none
+
+Parallel safe: yes
+
+### Task 2: Scaffold Tauri App Shell
+
+Owner: main agent
+
+Input:
+- Tauri 2 app structure
+- Product brief UI surfaces
+
+Files allowed:
+- `apps/windows-client/package.json`
+- `apps/windows-client/vite.config.ts`
+- `apps/windows-client/tsconfig.json`
+- `apps/windows-client/index.html`
+- `apps/windows-client/src/*`
+- `apps/windows-client/src-tauri/*`
+
+Files forbidden:
+- Current root `src/server/*`
+- Current root `src/web/*`
+
+Output:
+- Tauri app starts with empty shell and five navigation surfaces.
+- No business logic yet.
+
+Evidence:
+- `cd apps/windows-client && npm install && npm run build`
+- `cd apps/windows-client/src-tauri && cargo test` if Rust tests exist
+
+Depends on: Task 1
+
+Parallel safe: no
+
+### Task 3: Define Domain Models And Validation
+
+Owner: main agent
+
+Input:
+- Profile/Target/Component models from brief
+
+Files allowed:
+- `apps/windows-client/src-tauri/src/models.rs`
+- `apps/windows-client/src-tauri/src/validation.rs`
+- `apps/windows-client/src/domain/types.ts`
+- `apps/windows-client/src-tauri/tests/domain_tests.rs`
+
+Files forbidden:
+- Adapter/helper code except trait references.
+
+Output:
+- Typed Rust models for `Profile`, `ProfileItem`, `Target`, `ComponentStatus`, `ActivityEntry`.
+- TypeScript DTOs mirror Rust command responses.
+- Validation rejects malformed ports/protocols but allows missing local sing-box.
+
+Evidence:
+- Rust tests showing process/folder/exe normalization and external target validation.
+
+Depends on: Task 2
+
+Parallel safe: no
+
+### Task 4: Implement JSON Storage And Activity Log
+
+Owner: main agent
+
+Input:
+- Domain models from Task 3
+
+Files allowed:
+- `apps/windows-client/src-tauri/src/storage.rs`
+- `apps/windows-client/src-tauri/src/activity.rs`
+- `apps/windows-client/src-tauri/tests/storage_tests.rs`
+
+Files forbidden:
+- UI screens except command wiring stubs.
+
+Output:
+- Atomic JSON read/write for profiles, targets, components, and activity.
+- Backups before overwriting source files.
+- Config root defaults to `C:\ProgramData\VpnProxy`, with test override.
+
+Evidence:
+- Tests prove roundtrip, invalid JSON fallback behavior, backup creation, activity cap/sort.
+
+Depends on: Task 3
+
+Parallel safe: no
+
+### Task 5: Add Proxy Router Adapter Boundary And ProxiFyre Adapter
+
+Owner: main agent
+
+Input:
+- Domain models and storage
+
+Files allowed:
+- `apps/windows-client/src-tauri/src/adapters/proxy_router.rs`
+- `apps/windows-client/src-tauri/src/adapters/proxifyre.rs`
+- `apps/windows-client/src-tauri/tests/proxifyre_adapter_tests.rs`
+
+Files forbidden:
+- Direct UI coupling to ProxiFyre config fields.
+
+Output:
+- `ProxyRouterAdapter` trait.
+- `ProxiFyreAdapter` generates config from enabled profiles and targets.
+- External target flow does not require sing-box.
+
+Evidence:
+- Test generates ProxiFyre config for Discord + external SOCKS5 target.
+- Test blocks local-singbox target only when target requires missing component.
+
+Depends on: Task 4
+
+Parallel safe: no
+
+### Task 6: Add Tauri Commands
+
+Owner: main agent
+
+Input:
+- Storage and adapter services
+
+Files allowed:
+- `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-tauri/tests/command_tests.rs`
+
+Files forbidden:
+- Full UI implementation beyond command call wrappers.
+
+Output:
+- Commands for status, profiles, targets, components, scan/resolve preview, apply, logs.
+- Commands return structured responses only.
+
+Evidence:
+- Command tests or integration tests prove apply generates derived config and records activity using a mock adapter/helper.
+
+Depends on: Task 5
+
+Parallel safe: no
+
+### Task 7: Build MVP UI
+
+Owner: main agent
+
+Input:
+- Tauri command API
+- Product brief layout
+
+Files allowed:
+- `apps/windows-client/src/app/*`
+- `apps/windows-client/src/features/overview/*`
+- `apps/windows-client/src/features/profiles/*`
+- `apps/windows-client/src/features/targets/*`
+- `apps/windows-client/src/features/components/*`
+- `apps/windows-client/src/features/logs/*`
+- `apps/windows-client/src/styles/*`
+
+Files forbidden:
+- Rust adapter behavior except fixing DTO mismatches.
+
+Output:
+- Compact utility UI with Overview, Profiles, Targets, Components, Logs.
+- User can create/edit profile, external target, and trigger apply.
+- Missing sing-box is shown as valid optional state.
+
+Evidence:
+- `npm run build`
+- Screenshot or browser/app state showing missing sing-box and usable external target flow.
+
+Depends on: Task 6
+
+Parallel safe: no
+
+### Task 8: Implement Helper And Explicit Installer Boundary
+
+Owner: main agent
+
+Input:
+- Component model
+- Security model from brief
+
+Files allowed:
+- `apps/windows-client/src-tauri/src/helper.rs`
+- `apps/windows-client/src-tauri/capabilities/default.json`
+- `apps/windows-client/scripts/install-control-app.ps1`
+- `apps/windows-client/scripts/install-proxyfier.ps1`
+- `apps/windows-client/scripts/install-singbox.ps1`
+- `apps/windows-client/src-tauri/tests/helper_tests.rs`
+
+Files forbidden:
+- Hidden installer invocation inside profile apply.
+
+Output:
+- Helper command abstraction for status/service/apply.
+- Installer scripts are explicit and idempotent.
+- Tauri sidecar/shell permissions are narrow and documented.
+
+Evidence:
+- Helper tests with mock command runner.
+- PowerShell parser checks for installer scripts.
+- Capability file shows limited sidecar permissions.
+
+Depends on: Task 6
+
+Parallel safe: partly, after command DTOs are stable
+
+### Task 9: Add Optional Local Sing-Box Adapter
+
+Owner: main agent
+
+Input:
+- sing-box target model
+- service/helper boundary
+
+Files allowed:
+- `apps/windows-client/src-tauri/src/adapters/singbox.rs`
+- `apps/windows-client/src-tauri/tests/singbox_adapter_tests.rs`
+- `apps/windows-client/src/features/components/*`
+- `apps/windows-client/src/features/targets/*`
+
+Files forbidden:
+- Making sing-box mandatory for external targets.
+
+Output:
+- Generate local sing-box config.
+- Validate via `sing-box check` when binary exists.
+- Local target appears only when installed/configured or as an explicit install prompt.
+
+Evidence:
+- Tests show external target apply works without sing-box.
+- Tests show local-singbox target requires installed/running component.
+
+Depends on: Tasks 5 and 8
+
+Parallel safe: no
+
+### Task 10: Package, Verify, And Record Evidence
+
+Owner: main agent
+
+Input:
+- Completed MVP implementation
+
+Files allowed:
+- `apps/windows-client/*`
+- `README.md`
+- `docs/roadmap.md`
+- `docs/goals/windows-modular-client/EVIDENCE.md`
+
+Files forbidden:
+- Unrelated app code.
+
+Output:
+- Build/test commands documented.
+- README explains separate Control App, Proxyfier, and Local sing-box install flows.
+- Evidence file captures automated and target-perspective proof.
+
+Evidence:
+- `npm run build`
+- Rust tests
+- Tauri build/dev proof
+- generated ProxiFyre config summary
+- UI screenshot/state
+- Windows manual checklist, or clearly mark `implemented but unproven` for Windows-only service behavior if not run on a Windows host.
+
+Depends on: all previous tasks
+
+Parallel safe: no
+
+## Manual Windows Verification Checklist
+
+1. Install/run only Control App.
+2. Verify Proxyfier and Local sing-box show missing as separate components.
+3. Add external SOCKS5 target.
+4. Add Discord process profile.
+5. Apply profile; verify generated ProxiFyre config and activity entry.
+6. Install Proxyfier separately; verify status changes.
+7. Apply profile to real Proxyfier service.
+8. Install Local sing-box separately.
+9. Import subscription or config, select outbound, and start Local sing-box.
+10. Switch existing profile from external target to Local sing-box and apply.
+11. Stop/restart Proxyfier and Local sing-box separately.
+12. Copy diagnostics and verify secrets are redacted.
+

docs/roadmap.md

@@ -8,7 +8,7 @@
 | --- | --- | --- | --- |
 | `gateway` | LXC/VPS как gateway для роутера и всей сети | Docker `network_mode: host` + TProxy | делаем первым |
 | `desktop-proxy` | Mac/Linux локальный HTTP/SOCKS proxy с fallback | Docker bridged ports | позже переносим из старой реализации |
-| `windows-gaming` | Windows для игр/Discord/Vesktop | native `sing-box.exe` + ProxiFyre | позже приводим в порядок |
+| `windows-gaming` | Windows для игр/Discord/Vesktop | standalone Tauri 2 app + ProxiFyre adapter + optional native `sing-box.exe` | активное направление: `docs/goals/windows-modular-client/PLAN.md` |
 
 ## Gateway mode
 
@@ -84,15 +84,32 @@
 
 ## Windows gaming mode
 
-Цель: сохранить сценарий для Discord/Vesktop/игр.
+Цель: отдельное Windows desktop-приложение для Discord/Vesktop/игр, где Control App, Proxyfier Layer и Local sing-box являются независимыми компонентами.
+
+Current checkpoint:
+
+- MVP slice exists under `apps/windows-client`.
+- Frontend build passes with `npm run build`.
+- Rust/Tauri native verification requires installing Rust/rustup and Visual Studio Build Tools with MSVC/Windows SDK.
+- Local sing-box is optional; external SOCKS5 targets remain the first verified path.
 
 Требования:
 
-- Native `sing-box.exe`.
-- Scheduled task или Windows service.
-- ProxiFyre + WinPacketFilter для приложений, которые не умеют proxy.
-- Управление из PowerShell helper.
-- Позже можно сделать Electron/Tauri UI поверх privileged helper.
+- Standalone Tauri 2 + React/TypeScript + Rust app under `apps/windows-client`.
+- Profiles for process/folder/exe app routing.
+- External SOCKS5/HTTP targets first; local `sing-box` is optional.
+- Proxyfier adapter boundary with ProxiFyre as the first engine.
+- Explicit installers for Control App, Proxyfier Layer, and Local sing-box.
+- Privileged helper/install operations return structured JSON.
+
+Source docs:
+
+- Product/tech brief: `docs/windows-client-product-tech-brief.md`.
+- Execution plan: `docs/goals/windows-modular-client/PLAN.md`.
+
+Superseded:
+
+- The old Node `APP_MODE=windows` plan in `docs/superpowers/plans/2026-05-21-windows-client.md` is historical context, not the active implementation path.
 
 ## Рабочий порядок
 
@@ -102,4 +119,4 @@
 4. Реализовать Vite + React UI для subscription -> server select -> apply.
 5. Добавить gateway docs/install script.
 6. Потом переносить desktop-proxy.
-7. Потом приводить Windows mode к новой архитектуре.
+7. Потом реализовать standalone Windows Tauri client по `docs/goals/windows-modular-client/PLAN.md`.

docs/superpowers/plans/2026-05-19-macos-client.md

@@ -0,0 +1,74 @@
+# macOS Docker Client Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a macOS Docker client mode that exposes a local HTTP/SOCKS proxy on `127.0.0.1:8080` with a friendlier UI and a curl installer.
+
+**Architecture:** Reuse the current Node API, React UI, subscription parser, sing-box process manager, and routing rule generator. Add `APP_MODE=client` so the same backend emits a proxy-only sing-box config without TProxy, and use a dedicated Dockerfile/compose path for Mac installation.
+
+**Tech Stack:** Node.js ESM, React/Vite, sing-box, Docker Compose, POSIX shell, `node:test`.
+
+---
+
+### Task 1: Client Mode Config Contract
+
+**Files:**
+- Create: `test/server/singbox-client-mode.test.js`
+- Modify: `package.json`
+- Modify: `src/server/config.js`
+- Modify: `src/server/singbox.js`
+- Modify: `src/server/index.js`
+
+- [ ] Add `node:test` coverage that proves `APP_MODE=client` config has `mixed-in`, no `tproxy-in`, no transparent fallback, and a VPN proxy fallback.
+- [ ] Add `npm test` script.
+- [ ] Add `settings.appMode`.
+- [ ] Make `buildGatewayConfig()` conditionally emit client-only inbounds and route rules.
+- [ ] Expose `mode` and hide irrelevant tproxy fields in public state.
+
+### Task 2: macOS Client Docker Runtime
+
+**Files:**
+- Create: `entrypoint.client.sh`
+- Create: `Dockerfile.client`
+- Create: `docker-compose.client.yml`
+
+- [ ] Add an entrypoint that starts only the Node control server.
+- [ ] Add a Dockerfile that builds the Vite frontend inside Docker and installs only client runtime dependencies plus sing-box.
+- [ ] Add compose with loopback-only port publishing for UI and proxy.
+
+### Task 3: User-Friendly Client UI
+
+**Files:**
+- Create: `src/web/components/ClientOverviewPage.jsx`
+- Modify: `src/web/App.jsx`
+- Modify: `src/web/components/Sidebar.jsx`
+- Modify: `src/web/components/Topbar.jsx`
+- Modify: `src/web/components/StatusPane.jsx`
+- Modify: `src/web/components/RouteChecker.jsx`
+- Modify: `src/web/styles.css`
+
+- [ ] Add a client overview with status, active server, copyable proxy URLs, and macOS setup commands.
+- [ ] Hide gateway-only navigation and side status pane in client mode.
+- [ ] Rename topbar brand to match current mode.
+- [ ] Keep servers, logs, and settings reachable in client mode.
+
+### Task 4: curl Installer and Docs
+
+**Files:**
+- Create: `scripts/install-macos-client.sh`
+- Modify: `README.md`
+- Modify: `.env.example`
+
+- [ ] Add curl-friendly installer with Docker/Git checks and update-or-clone behavior.
+- [ ] Document one-line install command and manual compose command.
+- [ ] Add client mode environment examples.
+
+### Task 5: Verification
+
+**Commands:**
+- `npm test`
+- `npm run build`
+- `docker compose -f docker-compose.client.yml config`
+
+- [ ] Run all commands and fix any failures.
+- [ ] Inspect the diff to confirm existing CI/runtime-base edits remain untouched.

docs/superpowers/plans/2026-05-24-vpn-proxy-client-route-console-redesign.md

@@ -0,0 +1,470 @@
+# VPN Proxy Client Route Console Redesign Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Replace the current macOS client overview with a route-first console that makes the active traffic path, local proxy address, selected mode, and next action obvious at a glance.
+
+**Architecture:** Keep `resolveClientRoute()` as the single source of truth and keep `ClientOverviewPage` as the orchestrator. Split the screen into small presentational components inside `src/web/components/ClientOverviewPage.jsx`, then replace only the client-mode CSS block in `src/web/styles.css` so gateway and Windows work stay untouched.
+
+**Tech Stack:** React 19, Vite, Node.js `node:test`, existing CSS variables, Open Design static HTML artifact.
+
+**Design Artifact:** `docs/design/open-design/vpn-proxy-route-console-redesign.html`
+
+---
+
+## Current Findings
+
+- `src/web/components/ClientOverviewPage.jsx` already has the right model: one overview screen, mutually exclusive `Gateway`, `VPN`, and `Direct` modes, and route state from `resolveClientRoute()`.
+- `src/web/styles.css` makes the client screen visually separate, but it uses a dark blue-green palette that reads as a monitoring dashboard rather than a macOS setup tool.
+- The current status panel, route line, mode grid, and proxy panel have similar visual weight. The user must scan several boxes to answer the primary question: where does my traffic go right now?
+- Copyable proxy addresses sit in the side panel. They are useful, but they are visually separated from the route story.
+- The three mode buttons look like cards. They work, but they do not communicate that mode selection changes the middle segment of the route.
+
+## Target Design
+
+Use a light, restrained operational UI for a normal macOS desktop context: a user has Docker running, a browser open, and is checking why an app uses a certain proxy path. The interface should feel closer to a compact network control console than a server dashboard.
+
+The first viewport should show:
+
+- top status: service running, restart, apply route;
+- left mode rail: Gateway, Local VPN, Direct;
+- main route strip: `Mac apps > local proxy > selected route > Internet`;
+- right utility panel: copy proxy addresses, proxy port, recent activity;
+- settings below route: only the form for the selected mode.
+
+## File Structure
+
+- Modify `src/web/components/ClientOverviewPage.jsx`: reorganize render structure into route console subcomponents while preserving props and handlers.
+- Modify `src/web/styles.css`: replace `.client-*` layout styles from `.client-mode .app-main` through the final client media query.
+- Test `test/web/client-route.test.js`: extend route state coverage so UI changes do not hide incorrect mode/status combinations.
+- Keep `docs/design/open-design/vpn-proxy-route-console-redesign.html`: reference artifact for visual decisions.
+
+---
+
+### Task 1: Lock Route Contract Before UI Changes
+
+**Files:**
+- Modify: `test/web/client-route.test.js`
+
+- [ ] **Step 1: Add tests for all user-visible route statuses**
+
+Add these cases to `test/web/client-route.test.js`:
+
+```js
+test('resolves running local VPN route', () => {
+  const route = resolveClientRoute({
+    state: {
+      singboxRunning: true,
+      configExists: true,
+      proxyPort: 8082,
+      selectedTag: 'finland-02',
+      clientSettings: { homeBypassEnabled: false, sharedProxyEnabled: false },
+    },
+    activeServer: { tag: 'finland-02' },
+  });
+
+  assert.equal(route.mode, 'vpn');
+  assert.equal(route.status, 'connected');
+  assert.equal(route.localProxy, '127.0.0.1:8082');
+  assert.deepEqual(route.path, ['Mac apps', '127.0.0.1:8082', 'VPN finland-02', 'Internet']);
+});
+
+test('resolves gateway route when shared proxy is enabled', () => {
+  const route = resolveClientRoute({
+    state: {
+      singboxRunning: true,
+      configExists: true,
+      proxyPort: 8082,
+      clientSettings: {
+        sharedProxyEnabled: true,
+        sharedProxy: { host: '192.168.50.111', port: 8080 },
+      },
+    },
+  });
+
+  assert.equal(route.mode, 'gateway');
+  assert.equal(route.status, 'connected');
+  assert.equal(route.target, '192.168.50.111:8080');
+  assert.deepEqual(route.path, ['Mac apps', '127.0.0.1:8082', 'Gateway 192.168.50.111:8080', 'Internet']);
+});
+
+test('resolves direct route when home bypass is enabled', () => {
+  const route = resolveClientRoute({
+    state: {
+      singboxRunning: true,
+      configExists: true,
+      clientSettings: { homeBypassEnabled: true, sharedProxyEnabled: false, proxyPort: 8084 },
+    },
+  });
+
+  assert.equal(route.mode, 'direct');
+  assert.equal(route.status, 'connected');
+  assert.equal(route.localProxy, '127.0.0.1:8084');
+  assert.deepEqual(route.path, ['Mac apps', '127.0.0.1:8084', 'Direct', 'Internet']);
+});
+```
+
+- [ ] **Step 2: Run the route tests**
+
+Run:
+
+```bash
+npm test -- test/web/client-route.test.js
+```
+
+Expected: all existing and new route tests pass.
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add test/web/client-route.test.js
+git commit -m "test: lock client route display contract"
+```
+
+---
+
+### Task 2: Restructure Client Overview Markup
+
+**Files:**
+- Modify: `src/web/components/ClientOverviewPage.jsx`
+
+- [ ] **Step 1: Replace the route line with route nodes**
+
+Replace `RouteLine` with:
+
+```jsx
+function RouteStrip({ route }) {
+  const nodes = [
+    { label: 'Источник', value: route.path[0], detail: 'приложения Mac' },
+    { label: 'Локальный proxy', value: route.localProxy, detail: 'HTTP и SOCKS5' },
+    { label: 'Режим', value: route.target, detail: route.targetDetail, active: route.status === 'connected' },
+    { label: 'Выход', value: 'Internet', detail: route.status === 'connected' ? 'маршрут активен' : 'ожидает запуска' },
+  ];
+
+  return (
+    <div className="client-route-strip">
+      {nodes.map((node) => (
+        <div className={`client-route-node ${node.active ? 'active' : ''}`} key={node.label}>
+          <small>{node.label}</small>
+          <strong>{node.value}</strong>
+          <span>{node.detail}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function RoutePath({ route }) {
+  return (
+    <div className="client-route-path">
+      {route.path.map((item, index) => (
+        <React.Fragment key={`${item}-${index}`}>
+          <strong>{item}</strong>
+          {index < route.path.length - 1 && <span>{'>'}</span>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+```
+
+- [ ] **Step 2: Add a mode rail component**
+
+Add:
+
+```jsx
+function ModeRail({ route, setupMode, clientSettings, state, busy, onGateway, onVpn, onDirect }) {
+  const modes = [
+    {
+      id: 'gateway',
+      title: 'Общий gateway',
+      subtitle: clientSettings?.sharedProxy
+        ? `${clientSettings.sharedProxy.host}:${clientSettings.sharedProxy.port}`
+        : 'серверная proxy',
+      onClick: onGateway,
+    },
+    {
+      id: 'vpn',
+      title: 'Локальный VPN',
+      subtitle: state?.selectedTag || 'выбрать сервер',
+      onClick: onVpn,
+    },
+    {
+      id: 'direct',
+      title: 'Напрямую',
+      subtitle: 'без VPN',
+      onClick: onDirect,
+    },
+  ];
+
+  return (
+    <aside className="client-mode-rail">
+      <div className="client-section-label">Режим подключения</div>
+      <div className="client-mode-list">
+        {modes.map((mode) => (
+          <button
+            key={mode.id}
+            type="button"
+            className={`client-rail-mode ${setupMode === mode.id ? 'selected' : ''} ${route.mode === mode.id ? 'active' : ''}`}
+            disabled={busy}
+            onClick={mode.onClick}
+          >
+            <span className="client-mode-dot" />
+            <span>
+              <strong>{mode.title}</strong>
+              <small>{mode.subtitle}</small>
+            </span>
+          </button>
+        ))}
+      </div>
+    </aside>
+  );
+}
+```
+
+- [ ] **Step 3: Replace the top-level JSX**
+
+Use this layout in `ClientOverviewPage`:
+
+```jsx
+return (
+  <div className="client-console">
+    <ModeRail
+      route={route}
+      setupMode={setupMode}
+      clientSettings={clientSettings}
+      state={state}
+      busy={busy}
+      onGateway={selectGateway}
+      onVpn={selectVpn}
+      onDirect={() => {
+        setSetupMode('direct');
+        enableDirect();
+      }}
+    />
+
+    <section className="client-route-workspace">
+      <StatusPanel route={route} state={state} />
+      <RouteStrip route={route} />
+      <RoutePath route={route} />
+
+      <section className="client-mode-panel">
+        {setupMode === 'gateway' && (
+          <GatewaySettings settings={clientSettings} busy={busy} onCheck={onCheckSharedProxy} />
+        )}
+        {setupMode === 'vpn' && (
+          <VpnSettings
+            state={state}
+            servers={servers}
+            subscriptionUrl={subscriptionUrl}
+            setSubscriptionUrl={setSubscriptionUrl}
+            pendingTag={pendingTag}
+            setPendingTag={setPendingTag}
+            busy={busy}
+            onFetchSubscription={onFetchSubscription}
+            onApply={onApply}
+          />
+        )}
+        {setupMode === 'direct' && <DirectSettings busy={busy} onEnable={enableDirect} />}
+      </section>
+    </section>
+
+    <ProxySettings state={state} settings={clientSettings} busy={busy} onSave={onSaveClientSettings} />
+  </div>
+);
+```
+
+- [ ] **Step 4: Run build**
+
+Run:
+
+```bash
+npm run build
+```
+
+Expected: Vite build succeeds.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/web/components/ClientOverviewPage.jsx
+git commit -m "refactor: reshape client overview around route console"
+```
+
+---
+
+### Task 3: Replace Client Visual System
+
+**Files:**
+- Modify: `src/web/styles.css`
+
+- [ ] **Step 1: Replace only the client CSS block**
+
+Replace the CSS from `.client-mode .app-main` through the client media query with the style direction from `docs/design/open-design/vpn-proxy-route-console-redesign.html`. Keep selectors scoped to `.client-*` so gateway screens keep the existing palette.
+
+Use these token values for the client block:
+
+```css
+.app-body.client-mode {
+  grid-template-columns: 1fr;
+  background: oklch(0.965 0.008 232);
+}
+
+.client-mode .topbar {
+  background: oklch(0.978 0.007 232);
+  border-bottom-color: oklch(0.835 0.018 232);
+}
+
+.client-mode .app-main {
+  max-width: 1320px;
+  width: 100%;
+  margin: 0 auto;
+  padding: 18px;
+  color: oklch(0.238 0.028 238);
+}
+
+.client-console {
+  min-height: calc(100vh - var(--topbar-h) - 36px);
+  display: grid;
+  grid-template-columns: 264px minmax(0, 1fr) 312px;
+  overflow: hidden;
+  background: oklch(0.986 0.006 232);
+  border: 1px solid oklch(0.835 0.018 232);
+  border-radius: 8px;
+  box-shadow: 0 18px 42px oklch(0.36 0.035 238 / 0.13);
+}
+```
+
+- [ ] **Step 2: Add responsive behavior**
+
+Add:
+
+```css
+@media (max-width: 1080px) {
+  .client-console {
+    grid-template-columns: 220px minmax(0, 1fr);
+  }
+
+  .client-side-panel {
+    grid-column: 1 / -1;
+    border-left: 0;
+    border-top: 1px solid oklch(0.835 0.018 232);
+  }
+
+  .client-route-strip {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 760px) {
+  .client-console,
+  .client-route-strip,
+  .client-inline-form,
+  .client-port-row {
+    grid-template-columns: 1fr;
+  }
+
+  .client-mode-rail {
+    border-right: 0;
+    border-bottom: 1px solid oklch(0.835 0.018 232);
+  }
+}
+```
+
+- [ ] **Step 3: Verify no banned patterns were introduced**
+
+Run:
+
+```bash
+rg -n "background-clip:\\s*text|border-left:\\s*[2-9]|border-right:\\s*[2-9]|backdrop-filter|letter-spacing:\\s*-" src/web/styles.css
+```
+
+Expected: no matches.
+
+- [ ] **Step 4: Run build**
+
+Run:
+
+```bash
+npm run build
+```
+
+Expected: Vite build succeeds.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/web/styles.css
+git commit -m "style: apply light route console client theme"
+```
+
+---
+
+### Task 4: Browser Verification
+
+**Files:**
+- No file changes expected.
+
+- [ ] **Step 1: Start the dev server**
+
+Run:
+
+```bash
+npm run dev -- --host 127.0.0.1 --port 4567
+```
+
+Expected: Vite listens on `http://127.0.0.1:4567`.
+
+- [ ] **Step 2: Open client mode with representative state**
+
+Use the browser to open:
+
+```text
+http://127.0.0.1:4567
+```
+
+Expected: the first viewport shows the mode rail, route strip, route path, selected-mode form, and copyable proxy addresses without overlap at desktop width.
+
+- [ ] **Step 3: Check mobile width**
+
+Resize to 390px wide.
+
+Expected: rail, route workspace, and proxy panel stack vertically; long proxy URLs truncate inside their containers; action buttons remain readable.
+
+- [ ] **Step 4: Run final verification**
+
+Run:
+
+```bash
+npm test
+npm run build
+git diff --check
+```
+
+Expected: all commands pass.
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/web/components/ClientOverviewPage.jsx src/web/styles.css test/web/client-route.test.js
+git commit -m "feat: redesign client overview as route console"
+```
+
+---
+
+## Self-Review
+
+Spec coverage:
+
+- Current UX assessment is captured in `Current Findings`.
+- New design direction is captured in `Target Design`.
+- Open Design artifact is referenced explicitly.
+- Implementation tasks cover route contract, markup, scoped CSS, and browser verification.
+
+Placeholder scan:
+
+- No `TBD`, `TODO`, or unspecified validation steps remain.
+
+Type consistency:
+
+- Route fields match `resolveClientRoute()`: `mode`, `status`, `localProxy`, `target`, `targetDetail`, `path`.

docs/superpowers/specs/2026-05-19-macos-client-design.md

@@ -0,0 +1,48 @@
+# macOS Docker Client Design
+
+## Goal
+
+Add a simple macOS-friendly Docker client that behaves like the previous local proxy product: the user runs one container, opens a web UI, loads a subscription, chooses a server, and points macOS apps at `127.0.0.1:8080`.
+
+## Product Shape
+
+The client is not a transparent gateway. It must not require router changes, host networking, `NET_ADMIN`, iptables, ipset, or TProxy. The first-screen UI should explain the current proxy state, active server, and exact local proxy addresses. Gateway-only controls remain available only when the app runs in gateway mode.
+
+## Runtime Architecture
+
+`APP_MODE=client` switches the config generator to proxy-only sing-box config:
+
+- one `mixed` inbound on `PROXY_PORT`;
+- no `tproxy` inbound;
+- custom routing rules still apply before fallback;
+- `proxyDefaultMode` controls the mixed proxy fallback and defaults to VPN;
+- generated configs still pass `sing-box check` before restart.
+
+The client Docker image builds the React frontend inside Docker so macOS installation does not require local Node.js. Docker publishes only loopback ports:
+
+- `127.0.0.1:3456` for the UI;
+- `127.0.0.1:8080` for HTTP/SOCKS proxy.
+
+## Installer
+
+The macOS installer is a curl-friendly shell script. It checks macOS, Docker, Docker Compose, and Git, clones or updates the repository under `~/.vpn-proxy-client`, then runs the client compose file with `--build`. It prints the UI URL, proxy URLs, and optional `networksetup` commands, but does not change system proxy settings automatically.
+
+## UI
+
+Client mode gets a user-facing overview based on the old workflow:
+
+- status: ready, stopped, not configured, applying, error;
+- active server and traffic quota;
+- copyable HTTP and SOCKS5 proxy URLs;
+- short macOS setup commands;
+- primary actions: load subscription, choose server, restart, stop.
+
+Gateway terminology such as TProxy, devices, router, transparent fallback, and direct bypass cache is hidden in client mode.
+
+## Verification
+
+Use `node:test` for server config behavior, then run:
+
+- `npm test`;
+- `npm run build`;
+- `docker compose -f docker-compose.client.yml config`.

docs/superpowers/specs/2026-05-21-windows-client-design.md

@@ -0,0 +1,236 @@
+# Windows Client Design
+
+> Superseded: this document describes the earlier Node/web-control Windows direction.
+> The active Windows direction is a standalone Tauri 2 desktop app under
+> `apps/windows-client`, driven by `docs/windows-client-product-tech-brief.md`
+> and `docs/goals/windows-modular-client/PLAN.md`.
+> Content below is retained for historical context and may contradict the active
+> Tauri plan.
+
+## Goal
+
+Restore the old Windows workflow in a cleaner product shape: a one-command PowerShell installer can install either a full local `sing-box` + ProxiFyre setup or ProxiFyre-only routing to an existing proxy, then expose a small local web UI for profiles, folders, executable files, status, and logs.
+
+## Product Shape
+
+The Windows mode is script-first and UI-assisted. The installer remains the durable entrypoint because Windows driver/service setup needs administrator rights and must stay easy to debug from PowerShell. The web UI is a local control surface on top of the same scripts, not a separate desktop app in the first version.
+
+The installer supports two paths:
+
+- **Full install:** install native `sing-box.exe`, configure a local SOCKS/HTTP proxy on `127.0.0.1:1080`, install WinPacketFilter and ProxiFyre, then route selected Windows apps through the local proxy.
+- **ProxiFyre only:** install WinPacketFilter and ProxiFyre, then point selected Windows apps to an existing proxy target such as `127.0.0.1:8080`, `192.168.50.111:8080`, or another reachable SOCKS5 endpoint.
+
+The default UI direction is the approved cleaner mockup: one route status, profiles as the main object, selected profile details on the right, and a short recent activity/log section below. The first screen should answer: what is the active proxy target, whether services are running, and which profiles are currently enabled.
+
+## User Flows
+
+### Install
+
+The user opens PowerShell 7 as Administrator and runs:
+
+```powershell
+irm https://git.dokops.ru/dokril/vpn-proxy/raw/branch/master/scripts/install-windows-client.ps1 | iex
+```
+
+The installer checks administrator rights, PowerShell version, architecture, internet access, and required paths. It installs under `C:\Tools\vpn-proxy-windows` and keeps third-party runtime files in focused subdirectories:
+
+- `C:\Tools\vpn-proxy-windows\app` for this project checkout or archive.
+- `C:\Tools\vpn-proxy-windows\runtime\node` for portable Node.js when no suitable Node is installed.
+- `C:\Tools\vpn-proxy-windows\runtime\sing-box` for `sing-box.exe`, config, and logs.
+- `C:\Tools\ProxiFyre` for ProxiFyre, matching the legacy script path.
+
+If the user chooses Full install, the installer asks for a subscription or VLESS link, parses it through the existing subscription logic where possible, lets the user select a server, writes the native `sing-box` config, installs a scheduled task for `sing-box`, and starts it.
+
+If the user chooses ProxiFyre only, the installer asks for a SOCKS5 proxy target and verifies TCP connectivity before writing ProxiFyre config.
+
+After setup, the installer starts the local control UI on `http://127.0.0.1:3456` and prints recovery commands:
+
+```powershell
+& "C:\Tools\vpn-proxy-windows\manage.ps1"
+& "C:\Tools\vpn-proxy-windows\manage.ps1" -OpenUi
+& "C:\Tools\vpn-proxy-windows\manage.ps1" -Status
+```
+
+### Profile Management
+
+Profiles are the central unit. A profile contains a name, enabled flag, proxy target, protocol list, and app items. Supported item types:
+
+- `process`: process name such as `Discord`, `Update`, or `Vesktop`.
+- `folder`: folder path; the system scans `.exe` files and converts them to routable entries.
+- `exe`: explicit executable file path; the system resolves it to the executable name for ProxiFyre and keeps the full path for display and diagnostics.
+
+Folder and exe entries are intentionally stored as user-facing source items, while the generated ProxiFyre config is derived. This keeps the UI understandable and makes future ProxiFyre/Proxifier adapter changes possible without changing the profile model.
+
+When a profile changes, the UI marks it as pending. The user applies changes once. Apply regenerates ProxiFyre `app-config.json`, restarts the ProxiFyre service, then writes an activity entry showing what changed.
+
+### Runtime Operations
+
+The UI exposes these actions:
+
+- start, stop, restart `sing-box` when local mode is installed;
+- start, stop, restart ProxiFyre;
+- switch a profile between `local-singbox` and an external proxy target;
+- add process, folder, or exe entries;
+- scan folder entries again;
+- copy diagnostics for support/debugging;
+- open logs.
+
+The UI does not auto-change global Windows proxy settings. Routing happens only through ProxiFyre profiles.
+
+## Architecture
+
+The active project already has a plain Node API server, React/Vite UI, subscription parser, `sing-box` config generator, logs, traffic parsing, and client/gateway modes. Windows mode should reuse those pieces and add a Windows helper boundary.
+
+### App Mode
+
+Add `APP_MODE=windows`. In Windows mode:
+
+- the HTTP server binds to `127.0.0.1`;
+- the UI uses Windows labels and hides gateway-only TProxy/device controls;
+- config generation is proxy-only like client mode, but it targets native `sing-box.exe` rather than Docker;
+- service and driver actions go through the PowerShell helper, not direct Node assumptions.
+
+### Windows Helper Boundary
+
+Create a PowerShell helper module that owns privileged Windows operations:
+
+- install/update `sing-box.exe`;
+- install/start/stop scheduled tasks;
+- install/update WinPacketFilter;
+- install/update ProxiFyre;
+- write ProxiFyre config;
+- query service/task status;
+- read recent log files;
+- test proxy connectivity;
+- manage firewall rules for local proxy ports.
+
+The Node server calls the helper with explicit command names and JSON input/output. The helper returns structured JSON for every operation:
+
+```json
+{
+  "success": true,
+  "action": "proxies.apply",
+  "changed": true,
+  "message": "ProxiFyre config applied and service restarted"
+}
+```
+
+Errors use the same shape with `success: false`, `error`, and optional `details`. The UI never parses raw PowerShell text.
+
+### Data Files
+
+Windows mode stores state under `C:\Tools\vpn-proxy-windows\data`:
+
+- `windows-profiles.json` for profile source data.
+- `proxy-targets.json` for `local-singbox` and external proxy targets.
+- `windows-state.json` for last applied profile revision and UI status.
+- `subscription-cache.json` and `state.json` stay compatible with existing subscription/server selection logic.
+
+Profile shape:
+
+```json
+{
+  "id": "discord-vesktop",
+  "name": "Discord + Vesktop",
+  "enabled": true,
+  "proxyTargetId": "local-singbox",
+  "protocols": ["TCP", "UDP"],
+  "items": [
+    { "type": "process", "value": "Discord" },
+    { "type": "process", "value": "Update" },
+    {
+      "type": "folder",
+      "value": "%LOCALAPPDATA%\\vesktop",
+      "recursive": true
+    },
+    {
+      "type": "exe",
+      "value": "C:\\Games\\SomeGame\\game.exe"
+    }
+  ]
+}
+```
+
+Generated ProxiFyre config is not edited directly. It is derived from enabled profiles and proxy targets, then written to `C:\Tools\ProxiFyre\app-config.json`.
+
+### API Surface
+
+Add Windows-specific endpoints:
+
+- `GET /api/windows/status`: returns install mode, `sing-box` status, ProxiFyre status, active target, pending changes, and recent activity.
+- `GET /api/windows/profiles`: returns profile source data with resolved executable counts.
+- `PUT /api/windows/profiles`: saves profiles without applying.
+- `POST /api/windows/profiles/apply`: generates ProxiFyre config and restarts service.
+- `POST /api/windows/profiles/scan`: resolves folder and exe entries for preview.
+- `GET /api/windows/targets`: returns `local-singbox` and external proxy targets.
+- `PUT /api/windows/targets`: saves external proxy targets after validation.
+- `POST /api/windows/service`: start, stop, or restart `sing-box`, ProxiFyre, or the UI service.
+- `GET /api/windows/logs`: returns recent helper, `sing-box`, and ProxiFyre logs.
+
+Existing generic endpoints for subscription fetch, server selection, apply, logs, and config validation should be reused where the behavior matches Windows mode.
+
+## UI Design
+
+The approved direction is a restrained operational UI:
+
+- top bar: product name, restart/stop/add profile actions;
+- left nav: Overview, Profiles, Targets, Logs, Settings;
+- main status panel: one sentence describing the active route, plus a compact route line such as `Selected apps -> ProxiFyre -> sing-box -> VPN`;
+- main workspace: profile list on the left, selected profile details on the right;
+- profile details: target selector, add process/folder/exe input, resolved items list, save/apply controls;
+- activity panel: recent traffic/service events, not a full noisy log dump.
+
+Avoid duplicate status blocks. Avoid showing raw implementation concepts like WinPacketFilter unless the user is in diagnostics/settings. The primary terms should be `Profile`, `Proxy target`, `Local sing-box`, `Existing proxy`, `App/folder/exe`, and `Apply changes`.
+
+## Safety And Constraints
+
+The UI binds only to `127.0.0.1`. Windows actions that require elevation stay in the installer/helper path. The installer must not delete existing `C:\Tools\vpn-proxy` legacy folders without confirmation.
+
+Folder and exe routing needs a clear diagnostic note: ProxiFyre routing ultimately depends on what the installed ProxiFyre version accepts. The first implementation should resolve folders and exe paths to executable names for compatibility, while preserving full paths in profile data and diagnostics. If direct path matching is verified in ProxiFyre, the adapter can emit full paths without changing the UI model.
+
+The installer should be idempotent:
+
+- re-running it updates project files;
+- existing subscriptions and profiles are preserved unless the user chooses reset;
+- existing ProxiFyre config is backed up before overwrite;
+- failed applies leave the previous generated config available for rollback.
+
+## Testing And Verification
+
+Use focused tests for pure logic:
+
+- profile normalization;
+- folder/exe item resolution;
+- ProxiFyre config generation;
+- proxy target validation;
+- Windows helper JSON command contract;
+- `APP_MODE=windows` public state and config generation.
+
+Use manual Windows verification for privileged operations:
+
+- fresh Full install;
+- fresh ProxiFyre-only install;
+- re-run installer over existing install;
+- add process profile;
+- add folder profile;
+- add explicit exe profile;
+- switch a profile from local sing-box to external proxy;
+- restart ProxiFyre and verify service status;
+- copy diagnostics after a failed proxy target check.
+
+Local non-Windows development should still run `npm test` and `npm run build`. Windows-only helper commands should have dry-run or mockable modes so logic can be tested without installing drivers on the development machine.
+
+## Non-Goals For First Version
+
+- No Electron or Tauri wrapper.
+- No global Windows system proxy changes.
+- No transparent routing without ProxiFyre.
+- No remote multi-device management.
+- No automatic uninstall of unrelated WinPacketFilter users.
+- No Proxifier support until ProxiFyre behavior is stable.
+
+## Implementation Defaults
+
+- The UI server runs when opened by `manage.ps1 -OpenUi` in the first version. An at-logon scheduled UI task can be added later after the helper and UI are stable.
+- Full install uses portable Node/npm when the machine has no suitable Node.js. The installer builds the React UI locally for MVP; a prebuilt release artifact can replace that later without changing user-facing behavior.
+- ProxiFyre generation emits process names in the first version for compatibility. Full folder and exe paths remain in profile data and diagnostics; the adapter can start emitting full paths later if ProxiFyre path matching is verified.

docs/windows-client-product-tech-brief.md

@@ -0,0 +1,635 @@
+# Windows Proxy Client: Product And Technology Brief
+
+Дата: 2026-07-03
+
+Цель документа: описать, как должно выглядеть и работать Windows-приложение для управления proxy/VPN-маршрутизацией приложений, и какой стек лучше использовать для реализации.
+
+Этот документ можно отдать другой модели или команде как исходное ТЗ.
+
+## Коротко
+
+Нужно Windows-приложение, которое разделяет систему на три независимые части:
+
+1. **Control App**: маленькое desktop-приложение для настройки, статуса, профилей, логов и запуска операций.
+2. **Proxyfier Layer**: отдельный компонент, который заставляет выбранные Windows-приложения ходить через SOCKS5/HTTP proxy, даже если они сами не умеют proxy.
+3. **Local sing-box**: опциональный локальный VPN/proxy runtime. Его можно установить, не устанавливать, остановить, заменить внешним proxy target.
+
+Главный принцип: пользователь не обязан ставить все сразу. Если у него уже есть proxy, ему нужны только Control App + Proxyfier. Если нужен локальный VPN-клиент, он отдельно ставит `sing-box`.
+
+## Как это должно выглядеть
+
+Приложение должно выглядеть как компактная системная утилита, а не как сайт.
+
+Главный экран:
+
+- верхняя строка: общий статус маршрута;
+- три карточки компонентов: `Control App`, `Proxyfier`, `Local sing-box`;
+- список активных профилей;
+- кнопка `Apply changes`;
+- короткая лента последних событий.
+
+Пример главного статуса:
+
+```text
+Selected apps -> ProxiFyre -> Local sing-box 127.0.0.1:1080 -> VPN
+```
+
+или:
+
+```text
+Selected apps -> ProxiFyre -> Existing proxy 192.168.50.111:8080
+```
+
+Если `sing-box` не установлен, это не ошибка. Карточка должна показывать:
+
+```text
+Local sing-box
+Not installed
+Install if you want this PC to run its own local VPN proxy.
+```
+
+Если Proxyfier не установлен, профили можно редактировать, но apply должен быть заблокирован:
+
+```text
+Proxyfier is required to route selected apps.
+Install Proxyfier
+```
+
+## Основные экраны
+
+### 1. Overview
+
+Показывает:
+
+- текущий route line;
+- статус Control App;
+- статус Proxyfier;
+- статус Local sing-box;
+- активный proxy target;
+- сколько приложений сейчас включено в routing;
+- последние 5-10 событий.
+
+Действия:
+
+- restart Proxyfier;
+- restart local sing-box, если установлен;
+- open logs;
+- copy diagnostics.
+
+### 2. Profiles
+
+Профиль - главный объект настройки.
+
+Профиль содержит:
+
+- название;
+- enabled/disabled;
+- proxy target;
+- протоколы: TCP, UDP;
+- список приложений.
+
+Типы элементов:
+
+- `process`: имя процесса, например `Discord`, `Telegram`, `Code`;
+- `folder`: папка, приложение сканирует `.exe` внутри;
+- `exe`: конкретный путь к `.exe`.
+
+UI профиля:
+
+- слева список профилей;
+- справа детали выбранного профиля;
+- поле выбора target;
+- кнопки добавления: `Process`, `Folder`, `EXE`;
+- preview resolved apps;
+- `Save`;
+- `Apply changes`.
+
+Важно: пользователь должен видеть понятные исходные элементы, а не только сгенерированный конфиг Proxyfier.
+
+### 3. Targets
+
+Proxy target - это куда Proxyfier отправляет трафик выбранных приложений.
+
+Типы targets:
+
+- `Local sing-box`: `127.0.0.1:1080`, доступен только если local sing-box установлен и запущен;
+- `Existing SOCKS5 proxy`: например `127.0.0.1:8080` или `192.168.50.111:8080`;
+- `Existing HTTP proxy`, если выбранный proxyfier поддерживает HTTP.
+
+На экране targets:
+
+- список targets;
+- проверка соединения;
+- имя, host, port, protocol;
+- статус last checked;
+- кнопка set default.
+
+### 4. Components
+
+Отдельный экран или часть Overview.
+
+Компоненты:
+
+- Control App;
+- Proxyfier;
+- Local sing-box.
+
+Для каждого:
+
+- installed / not installed;
+- running / stopped;
+- version;
+- path;
+- service/task status;
+- actions.
+
+Actions должны быть явными:
+
+- `Install`;
+- `Repair`;
+- `Start`;
+- `Stop`;
+- `Restart`;
+- `Open folder`;
+- `View logs`.
+
+Нельзя делать скрытую установку `sing-box` при сохранении профиля.
+
+### 5. Logs / Diagnostics
+
+Должно быть две зоны:
+
+- activity: действия пользователя и результат apply;
+- runtime logs: proxyfier logs, sing-box logs, helper logs.
+
+Кнопка `Copy diagnostics` должна собирать:
+
+- версии компонентов;
+- paths;
+- running status;
+- активные profiles;
+- targets без секретов;
+- последние ошибки;
+- путь к сгенерированному proxyfier config.
+
+## Пользовательские сценарии
+
+### Сценарий A: у пользователя уже есть proxy
+
+1. Пользователь устанавливает Control App.
+2. Открывает приложение.
+3. Видит, что Proxyfier не установлен, а sing-box отсутствует.
+4. Нажимает `Install Proxyfier`.
+5. Добавляет target `192.168.50.111:8080`.
+6. Создает профиль `Discord`.
+7. Добавляет process `Discord`.
+8. Нажимает `Apply changes`.
+9. Приложение генерирует config для Proxyfier и перезапускает proxyfier service.
+
+Результат: Discord ходит через внешний proxy. Local sing-box не нужен.
+
+### Сценарий B: пользователь хочет локальный VPN proxy
+
+1. Пользователь устанавливает Control App.
+2. Устанавливает Proxyfier.
+3. Устанавливает Local sing-box.
+4. Вводит subscription/VLESS link.
+5. Выбирает сервер.
+6. Local sing-box поднимает SOCKS5/HTTP endpoint на `127.0.0.1:1080`.
+7. Профили используют target `Local sing-box`.
+
+Результат: выбранные приложения ходят через локальный sing-box.
+
+### Сценарий C: временно отключить VPN
+
+1. Пользователь открывает профиль.
+2. Меняет target с `Local sing-box` на внешний proxy или `Direct/Disabled`.
+3. Нажимает `Apply changes`.
+
+Результат: Proxyfier перегенерирован, local sing-box можно остановить отдельно.
+
+## Рекомендуемый стек
+
+### Desktop shell: Tauri 2
+
+Рекомендация: **Tauri 2 + React + TypeScript + Rust backend**.
+
+Почему:
+
+- Tauri ориентирован на маленькие desktop-приложения и использует системный web renderer, поэтому приложение легче Electron.
+- Можно писать UI на обычном web stack: React/TypeScript/Vite.
+- Backend-часть на Rust хорошо подходит для Windows APIs, файлов, процессов, sidecar binaries и безопасных команд.
+- Tauri поддерживает sidecar binaries, но требует явно выдать permissions на запуск sidecar, что полезно для security boundary.
+
+Frontend:
+
+- React;
+- TypeScript;
+- Vite;
+- TanStack Query для загрузки/кэша status/API;
+- Zustand или Jotai для локального UI state;
+- Zod для валидации JSON-моделей;
+- CSS modules или Tailwind. Для этой утилиты лучше сдержанный Windows-like UI, без тяжелой дизайн-системы.
+
+Backend внутри Tauri:
+
+- Rust commands для простых операций;
+- отдельный `core` crate с доменной логикой;
+- отдельный `windows-helper` binary для elevated/privileged действий.
+
+Не рекомендую начинать с Electron, если нет жесткой причины. Electron проще для web-команды, но тяжелее по размеру и памяти. Для маленькой системной утилиты Tauri подходит лучше.
+
+### Privileged helper
+
+Нужно отделить обычное приложение от операций администратора.
+
+Рекомендуемая модель:
+
+```text
+Tauri UI
+  -> Rust app backend
+    -> unprivileged status/read operations
+    -> explicit elevated helper for install/repair/service operations
+```
+
+Privileged helper может быть:
+
+- Rust CLI, который запускается elevated только для конкретной операции;
+- Rust Windows service/helper, если нужен постоянный privileged agent;
+- PowerShell scripts только как thin installer layer, не как основная бизнес-логика.
+
+Для MVP можно сделать проще:
+
+- installers запускаются отдельно от имени администратора;
+- Control App работает обычным пользователем;
+- service start/stop/restart идет через helper command;
+- helper возвращает JSON, UI не парсит текст PowerShell.
+
+Контракт helper:
+
+```json
+{
+  "action": "proxyfier.apply",
+  "payload": {
+    "configPath": "C:\\Tools\\ProxiFyre\\app-config.json",
+    "config": {}
+  }
+}
+```
+
+Ответ:
+
+```json
+{
+  "success": true,
+  "action": "proxyfier.apply",
+  "changed": true,
+  "message": "Proxyfier config applied and service restarted"
+}
+```
+
+Ошибки:
+
+```json
+{
+  "success": false,
+  "action": "proxyfier.apply",
+  "error": "Proxyfier service is not installed",
+  "details": {}
+}
+```
+
+### Service/runtime management
+
+Для `sing-box` как background runtime:
+
+- использовать `sing-box check` перед применением config;
+- хранить config отдельно;
+- запускать как Windows service или scheduled task;
+- для service wrapper можно использовать WinSW, если не хочется писать собственный Windows service wrapper.
+
+Практичный вариант:
+
+- v1: WinSW wraps `sing-box.exe`;
+- v2: собственный Rust service/helper, если понадобится полный контроль.
+
+Control App не должен напрямую владеть процессом `sing-box`. Он должен управлять service/task через helper.
+
+### Local sing-box
+
+`sing-box` - опциональный runtime.
+
+Его роль:
+
+- принять subscription/VLESS/sing-box config;
+- поднять локальный mixed SOCKS/HTTP inbound;
+- слушать только `127.0.0.1`, например `127.0.0.1:1080`;
+- маршрутизировать трафик через выбранный outbound.
+
+Config генерируется из source state приложения и проверяется:
+
+```powershell
+sing-box check -c C:\Tools\VpnProxy\sing-box\config.json
+```
+
+Local sing-box не должен быть обязательным. Если profile target указывает на внешний proxy, `sing-box` может отсутствовать.
+
+### Proxyfier layer
+
+Рекомендуемый стартовый backend: **ProxiFyre**.
+
+Почему:
+
+- open-source;
+- Windows-focused;
+- маршрутизирует TCP и UDP;
+- работает per-application;
+- использует `app-config.json`;
+- может работать как Windows Service.
+
+Важное ограничение: ProxiFyre лицензируется как AGPL-3.0. Если продукт должен быть закрытым коммерческим приложением, нужно заранее решить юридический вопрос или сделать adapter layer, чтобы можно было заменить engine на:
+
+- коммерческий Proxifier;
+- ProxyBridge;
+- собственный WinDivert/NDIS/WFP-based engine;
+- другой per-app proxy router.
+
+Интерфейс должен называться не `ProxiFyreConfig`, а шире:
+
+```text
+ProxyRouterAdapter
+```
+
+Первый adapter:
+
+```text
+ProxiFyreAdapter
+```
+
+Это позволит поменять engine без переделки UI и профилей.
+
+### Data storage
+
+Для MVP лучше использовать простые JSON-файлы с schema validation.
+
+Причина:
+
+- настройки легко читать и бэкапить;
+- можно быстро отлаживать;
+- config portable;
+- подходит для profile/target/source state.
+
+Рекомендуемые файлы:
+
+```text
+C:\ProgramData\VpnProxy\config\profiles.json
+C:\ProgramData\VpnProxy\config\targets.json
+C:\ProgramData\VpnProxy\config\components.json
+C:\ProgramData\VpnProxy\state\activity.json
+C:\ProgramData\VpnProxy\state\last-status.json
+C:\ProgramData\VpnProxy\generated\proxifyre-app-config.json
+C:\ProgramData\VpnProxy\generated\sing-box-config.json
+```
+
+Если нужна большая история событий, статистика трафика или сложные миграции, тогда добавить SQLite:
+
+- `rusqlite` или `sqlx` в Rust;
+- миграции;
+- таблицы `activity`, `component_status`, `traffic_events`.
+
+Но source of truth для профилей можно оставить JSON даже при наличии SQLite.
+
+### Installer strategy
+
+Нужны три явных installer entrypoints:
+
+```text
+Install Control App
+Install Proxyfier Layer
+Install Local sing-box
+```
+
+Они могут быть кнопками в UI, но каждая операция должна быть отдельной и понятной.
+
+CLI/script names:
+
+```text
+install-control-app.ps1
+install-proxyfier.ps1
+install-singbox.ps1
+```
+
+Или в packaged app:
+
+```text
+VpnProxySetup.exe /component control-app
+VpnProxySetup.exe /component proxyfier
+VpnProxySetup.exe /component sing-box
+```
+
+Каждый installer:
+
+- idempotent;
+- делает backup перед overwrite;
+- не удаляет чужие файлы без подтверждения;
+- проверяет admin rights;
+- пишет machine-readable install result;
+- не трогает остальные компоненты без явного выбора.
+
+### Security model
+
+Правила:
+
+- UI работает без admin rights.
+- Admin elevation только для install/repair/service/config apply, если это реально нужно.
+- Local API, если будет, слушает только `127.0.0.1`.
+- Лучше использовать Tauri commands / named pipe, чем открытый HTTP port.
+- Если нужен loopback HTTP, включить token или origin check.
+- Секреты subscription URLs не показывать в diagnostics.
+- Generated configs не редактируются вручную из UI.
+- Every apply creates backup.
+
+## Архитектура
+
+```text
++-------------------------------+
+| Tauri Control App              |
+| React/TypeScript UI            |
++---------------+---------------+
+                |
+                v
++-------------------------------+
+| Rust App Backend               |
+| profiles, targets, validation  |
+| component status aggregation   |
++-------+---------------+-------+
+        |               |
+        v               v
++---------------+   +-------------------+
+| Proxy Router  |   | Local sing-box     |
+| Adapter       |   | Adapter            |
+| ProxiFyre v1  |   | config + service   |
++-------+-------+   +---------+---------+
+        |                     |
+        v                     v
++---------------+   +-------------------+
+| ProxiFyre     |   | sing-box.exe       |
+| Windows svc   |   | Windows svc/task   |
++---------------+   +-------------------+
+```
+
+## Модель данных
+
+### Profile
+
+```json
+{
+  "id": "discord",
+  "name": "Discord",
+  "enabled": true,
+  "targetId": "local-singbox",
+  "protocols": ["TCP", "UDP"],
+  "items": [
+    { "type": "process", "value": "Discord" },
+    { "type": "folder", "value": "%LOCALAPPDATA%\\Discord", "recursive": true },
+    { "type": "exe", "value": "C:\\Games\\Game\\game.exe" }
+  ]
+}
+```
+
+### Target
+
+```json
+{
+  "id": "local-singbox",
+  "name": "Local sing-box",
+  "type": "local",
+  "protocol": "socks5",
+  "host": "127.0.0.1",
+  "port": 1080,
+  "requiresComponent": "singbox"
+}
+```
+
+External target:
+
+```json
+{
+  "id": "home-gateway",
+  "name": "Home gateway",
+  "type": "external",
+  "protocol": "socks5",
+  "host": "192.168.50.111",
+  "port": 8080
+}
+```
+
+### Component status
+
+```json
+{
+  "id": "proxyfier",
+  "name": "Proxyfier",
+  "installed": true,
+  "running": true,
+  "version": "2.3.0",
+  "path": "C:\\Tools\\ProxiFyre",
+  "serviceName": "ProxiFyreService",
+  "problems": [],
+  "actions": ["restart", "repair", "openLogs"]
+}
+```
+
+## Apply behavior
+
+Apply должен делать одно понятное действие:
+
+1. Прочитать profiles.
+2. Прочитать targets.
+3. Проверить, что выбранные targets доступны.
+4. Проверить, что Proxyfier установлен.
+5. Разрешить folder/exe в process names.
+6. Сгенерировать proxyfier config.
+7. Сделать backup старого config.
+8. Записать новый config.
+9. Перезапустить Proxyfier service.
+10. Записать activity entry.
+
+Если profile использует `local-singbox`, дополнительно:
+
+- проверить, что `sing-box` установлен;
+- проверить, что service running;
+- проверить, что `127.0.0.1:1080` отвечает.
+
+Если `local-singbox` не установлен, но profile target внешний, apply должен работать.
+
+## Что не делать
+
+- Не делать глобальную смену Windows proxy settings.
+- Не делать `sing-box` обязательным.
+- Не смешивать installer и profile apply.
+- Не хранить generated ProxiFyre config как source of truth.
+- Не привязывать UI напрямую к ProxiFyre, нужен adapter layer.
+- Не запускать privileged операции без явного согласия пользователя.
+- Не делать большой dashboard с лишней статистикой в первой версии.
+
+## MVP
+
+Самый правильный первый slice:
+
+1. Tauri app shell.
+2. Profiles UI.
+3. Targets UI.
+4. Component status UI.
+5. ProxiFyre adapter.
+6. External SOCKS5 target.
+7. Apply profile -> generate ProxiFyre config -> restart service.
+
+В MVP `sing-box` может быть только карточкой `Not installed / Install`.
+
+После этого добавить:
+
+1. Local sing-box installer.
+2. Subscription import.
+3. Server selection.
+4. Generate sing-box config.
+5. Start/stop/restart local sing-box service.
+
+## Acceptance criteria
+
+Приложение считается успешным, если:
+
+- можно установить только Control App;
+- можно установить Proxyfier отдельно;
+- можно не устанавливать sing-box;
+- можно добавить внешний SOCKS5 target;
+- можно создать профиль для Discord;
+- можно применить профиль;
+- generated ProxiFyre config не редактируется пользователем вручную;
+- UI показывает, что local sing-box отсутствует, но это не ломает внешний proxy flow;
+- после установки sing-box появляется target `Local sing-box`;
+- пользователь может переключить профиль с внешнего target на local sing-box.
+
+## Prompt For Another AI
+
+Build a Windows desktop proxy management app.
+
+Use Tauri 2 with React, TypeScript, Vite, and a Rust backend. The app must manage three independent components: the Control App, a proxyfier layer, and optional local sing-box. Do not make sing-box mandatory.
+
+The UI must be a compact Windows utility with these screens: Overview, Profiles, Targets, Components, Logs. Profiles contain process/folder/exe entries and choose a proxy target. Targets can be local sing-box or external SOCKS5/HTTP proxies. Proxyfier is the layer that routes selected apps through the chosen target.
+
+Start with ProxiFyre as the first proxy router adapter, but design an adapter boundary so it can later be replaced. Store source configuration as JSON with schema validation. Generated ProxiFyre and sing-box configs are derived artifacts, not source truth.
+
+Privileged operations must be isolated in an explicit helper/installer flow. The main UI should run without admin rights. Install Control App, Install Proxyfier, and Install Local sing-box must be separate operations. Applying a profile must not silently install missing components.
+
+MVP: external SOCKS5 target + ProxiFyre profile apply. Then add optional local sing-box installation, subscription import, server selection, and local sing-box service control.
+
+## References
+
+- Tauri 2: https://v2.tauri.app/
+- Tauri sidecar permissions: https://v2.tauri.app/develop/sidecar/
+- sing-box configuration: https://sing-box.sagernet.org/configuration/
+- ProxiFyre repository: https://github.com/wiresock/proxifyre
+- WinSW service wrapper: https://github.com/winsw/winsw
+- Microsoft Windows Service with Worker Service: https://learn.microsoft.com/en-us/dotnet/core/extensions/windows-service
+

entrypoint.client.sh

@@ -0,0 +1,21 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+PORT="${PORT:-3456}"
+PROXY_PORT="${PROXY_PORT:-8080}"
+DATA_DIR="${DATA_DIR:-/var/lib/vpn-proxy}"
+SING_BOX_CONFIG="${SING_BOX_CONFIG:-/etc/sing-box/config.json}"
+SING_BOX_CACHE="${SING_BOX_CACHE:-/var/lib/sing-box/cache.db}"
+
+log() {
+  printf '[client-entrypoint] %s\n' "$*"
+}
+
+mkdir -p "$DATA_DIR" "$(dirname "$SING_BOX_CONFIG")" "$(dirname "$SING_BOX_CACHE")"
+
+export APP_MODE=client
+export PORT PROXY_PORT DATA_DIR SING_BOX_CONFIG SING_BOX_CACHE
+export PROXY_BIND_IP="${PROXY_BIND_IP:-0.0.0.0}"
+
+log "starting VPN proxy client UI on :${PORT}, local proxy on :${PROXY_PORT}"
+exec node /app/src/server/index.js

entrypoint.sh

@@ -5,7 +5,22 @@ TPROXY_PORT="${TPROXY_PORT:-7895}"
 TPROXY_MARK="${TPROXY_MARK:-1}"
 TPROXY_TABLE="${TPROXY_TABLE:-100}"
 TPROXY_CHAIN="${TPROXY_CHAIN:-VPN_PROXY_TPROXY}"
+TPROXY_SOURCE_BYPASS_CHAIN="${TPROXY_SOURCE_BYPASS_CHAIN:-VPN_PROXY_SRC_BYPASS}"
+TPROXY_SOURCE_FORWARD_CHAIN="${TPROXY_SOURCE_FORWARD_CHAIN:-VPN_PROXY_FWD_BYPASS}"
+TPROXY_SOURCE_NAT_CHAIN="${TPROXY_SOURCE_NAT_CHAIN:-VPN_PROXY_NAT_BYPASS}"
+PROXY_PORT="${PROXY_PORT:-8080}"
+PROXY_BIND_IP="${PROXY_BIND_IP:-0.0.0.0}"
+PROXY_INPUT_CHAIN="${PROXY_INPUT_CHAIN:-VPN_PROXY_INPUT}"
+PROXY_FIREWALL="${PROXY_FIREWALL:-true}"
+PROXY_ALLOWED_CIDRS="${PROXY_ALLOWED_CIDRS:-10.0.0.0/8 172.16.0.0/12 192.168.0.0/16}"
+TPROXY_BYPASS_SOURCE_CIDRS="${TPROXY_BYPASS_SOURCE_CIDRS:-}"
 BYPASS_CIDRS="${BYPASS_CIDRS:-0.0.0.0/8 10.0.0.0/8 100.64.0.0/10 127.0.0.0/8 169.254.0.0/16 172.16.0.0/12 192.168.0.0/16 224.0.0.0/4 240.0.0.0/4}"
+# Имя ipset для IP-адресов, которые sing-box отправил напрямую (direct bypass cache)
+DIRECT_BYPASS_SET="${DIRECT_BYPASS_SET:-vpn_direct_bypass}"
+# TTL записи в ipset (секунды). По умолчанию 1 час.
+DIRECT_BYPASS_TTL="${DIRECT_BYPASS_TTL:-3600}"
+# Direct bypass cache выключен по умолчанию, потому что он обходит global rules.
+DIRECT_BYPASS_CACHE="${DIRECT_BYPASS_CACHE:-false}"
 
 log() {
   printf '[gateway-entrypoint] %s\n' "$*"
@@ -15,24 +30,107 @@ ipt() {
   iptables -w "$@"
 }
 
+cleanup_proxy_firewall() {
+  ipt -D INPUT -p tcp --dport "$PROXY_PORT" -j "$PROXY_INPUT_CHAIN" 2>/dev/null || true
+  ipt -D INPUT -p udp --dport "$PROXY_PORT" -j "$PROXY_INPUT_CHAIN" 2>/dev/null || true
+  ipt -F "$PROXY_INPUT_CHAIN" 2>/dev/null || true
+  ipt -X "$PROXY_INPUT_CHAIN" 2>/dev/null || true
+}
+
 cleanup_tproxy() {
   log "cleanup tproxy rules"
   ipt -t mangle -D PREROUTING -j "$TPROXY_CHAIN" 2>/dev/null || true
+  ipt -D FORWARD -j "$TPROXY_SOURCE_FORWARD_CHAIN" 2>/dev/null || true
+  ipt -t nat -D POSTROUTING -j "$TPROXY_SOURCE_NAT_CHAIN" 2>/dev/null || true
   ipt -t mangle -F "$TPROXY_CHAIN" 2>/dev/null || true
   ipt -t mangle -X "$TPROXY_CHAIN" 2>/dev/null || true
+  ipt -t mangle -F "$TPROXY_SOURCE_BYPASS_CHAIN" 2>/dev/null || true
+  ipt -t mangle -X "$TPROXY_SOURCE_BYPASS_CHAIN" 2>/dev/null || true
+  ipt -F "$TPROXY_SOURCE_FORWARD_CHAIN" 2>/dev/null || true
+  ipt -X "$TPROXY_SOURCE_FORWARD_CHAIN" 2>/dev/null || true
+  ipt -t nat -F "$TPROXY_SOURCE_NAT_CHAIN" 2>/dev/null || true
+  ipt -t nat -X "$TPROXY_SOURCE_NAT_CHAIN" 2>/dev/null || true
   ip rule del fwmark "$TPROXY_MARK" table "$TPROXY_TABLE" 2>/dev/null || true
   ip route flush table "$TPROXY_TABLE" 2>/dev/null || true
+  # ipset не чистим при завершении — TTL сам истечёт
+}
+
+enable_ip_forwarding() {
+  log "enable IPv4 forwarding for source bypass"
+  if [[ -w /proc/sys/net/ipv4/ip_forward ]]; then
+    printf '1' > /proc/sys/net/ipv4/ip_forward || true
+    return
+  fi
+  if command -v sysctl >/dev/null 2>&1; then
+    sysctl -w net.ipv4.ip_forward=1 >/dev/null 2>&1 || true
+  fi
+}
+
+setup_direct_bypass_set() {
+  if [[ "$DIRECT_BYPASS_CACHE" != "true" ]]; then
+    export DIRECT_BYPASS_CACHE
+    return
+  fi
+
+  log "setup ipset ${DIRECT_BYPASS_SET} (timeout=${DIRECT_BYPASS_TTL}s)"
+  # Создаём с timeout; если уже существует — не трогаем (сохраняем накопленные записи)
+  ipset create "$DIRECT_BYPASS_SET" hash:ip timeout "$DIRECT_BYPASS_TTL" 2>/dev/null || true
+  # Экспортируем имя для использования в Node.js через env
+  export DIRECT_BYPASS_SET DIRECT_BYPASS_TTL DIRECT_BYPASS_CACHE
+}
+
+setup_proxy_firewall() {
+  if [[ "$PROXY_FIREWALL" != "true" || "$PROXY_BIND_IP" == "127.0.0.1" || "$PROXY_BIND_IP" == "::1" ]]; then
+    return
+  fi
+
+  log "setup proxy firewall for :${PROXY_PORT} (${PROXY_ALLOWED_CIDRS})"
+  cleanup_proxy_firewall
+
+  ipt -N "$PROXY_INPUT_CHAIN"
+  for cidr in $PROXY_ALLOWED_CIDRS; do
+    ipt -A "$PROXY_INPUT_CHAIN" -s "$cidr" -j RETURN
+  done
+  ipt -A "$PROXY_INPUT_CHAIN" -j DROP
+  ipt -I INPUT -p tcp --dport "$PROXY_PORT" -j "$PROXY_INPUT_CHAIN"
+  ipt -I INPUT -p udp --dport "$PROXY_PORT" -j "$PROXY_INPUT_CHAIN"
 }
 
 setup_tproxy() {
   log "setup tproxy on port ${TPROXY_PORT}, mark ${TPROXY_MARK}, table ${TPROXY_TABLE}"
   cleanup_tproxy
+  enable_ip_forwarding
 
   ip rule add fwmark "$TPROXY_MARK" table "$TPROXY_TABLE" 2>/dev/null || true
   ip route replace local 0.0.0.0/0 dev lo table "$TPROXY_TABLE"
 
   ipt -t mangle -N "$TPROXY_CHAIN"
+  ipt -t mangle -N "$TPROXY_SOURCE_BYPASS_CHAIN"
+  ipt -N "$TPROXY_SOURCE_FORWARD_CHAIN"
+  ipt -t nat -N "$TPROXY_SOURCE_NAT_CHAIN"
+  # Пропускаем пакеты, адресованные самому хосту (ответы на исходящие соединения sing-box)
+  ipt -t mangle -A "$TPROXY_CHAIN" -m addrtype --dst-type LOCAL -j RETURN
   ipt -t mangle -A "$TPROXY_CHAIN" -m mark --mark "$TPROXY_MARK" -j RETURN
+  ipt -t mangle -A "$TPROXY_CHAIN" -j "$TPROXY_SOURCE_BYPASS_CHAIN"
+  ipt -I FORWARD 1 -j "$TPROXY_SOURCE_FORWARD_CHAIN"
+  ipt -t nat -I POSTROUTING 1 -j "$TPROXY_SOURCE_NAT_CHAIN"
+
+  for cidr in $BYPASS_CIDRS; do
+    ipt -t nat -A "$TPROXY_SOURCE_NAT_CHAIN" -d "$cidr" -j RETURN
+  done
+
+  for cidr in $TPROXY_BYPASS_SOURCE_CIDRS; do
+    ipt -t mangle -A "$TPROXY_SOURCE_BYPASS_CHAIN" -s "$cidr" -j ACCEPT
+    ipt -A "$TPROXY_SOURCE_FORWARD_CHAIN" -s "$cidr" -j ACCEPT
+    ipt -A "$TPROXY_SOURCE_FORWARD_CHAIN" -d "$cidr" -m conntrack --ctstate RELATED,ESTABLISHED -j ACCEPT
+    ipt -t nat -A "$TPROXY_SOURCE_NAT_CHAIN" -s "$cidr" -j MASQUERADE
+  done
+
+  if [[ "$DIRECT_BYPASS_CACHE" == "true" ]]; then
+    # Direct bypass cache: IP-адреса из ipset идут напрямую, минуя sing-box.
+    # Включайте только если готовы к тому, что global rules для этих dst IP не будут проверяться.
+    ipt -t mangle -A "$TPROXY_CHAIN" -m set --match-set "$DIRECT_BYPASS_SET" dst -j RETURN
+  fi
 
   for cidr in $BYPASS_CIDRS; do
     ipt -t mangle -A "$TPROXY_CHAIN" -d "$cidr" -j RETURN
@@ -43,7 +141,9 @@ setup_tproxy() {
   ipt -t mangle -A PREROUTING -j "$TPROXY_CHAIN"
 }
 
+setup_direct_bypass_set
 setup_tproxy
+setup_proxy_firewall
 
 node /app/src/server/index.js &
 APP_PID=$!
@@ -52,6 +152,7 @@ shutdown() {
   log "shutdown requested"
   kill "$APP_PID" 2>/dev/null || true
   wait "$APP_PID" 2>/dev/null || true
+  cleanup_proxy_firewall
   cleanup_tproxy
 }
 
@@ -59,5 +160,6 @@ trap 'shutdown; exit 0' SIGTERM SIGINT
 
 wait "$APP_PID"
 STATUS=$?
+cleanup_proxy_firewall
 cleanup_tproxy
 exit "$STATUS"

package.json

@@ -7,13 +7,16 @@
   "scripts": {
     "dev": "vite --host 0.0.0.0",
     "build": "vite build",
+    "test": "node --test",
     "start": "node src/server/index.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@vitejs/plugin-react": "^5.0.0",
-    "vite": "^7.0.0",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
-  },
-  "devDependencies": {}
+    "react-dom": "^19.0.0",
+    "vite": "^7.0.0"
+  }
 }

scripts/build-on-107-deploy-111.sh

@@ -0,0 +1,112 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+BUILD_HOST="${BUILD_HOST:-107}"
+DEPLOY_HOST="${DEPLOY_HOST:-111}"
+BUILD_PATH="${BUILD_PATH:-/opt/vpn-proxy-build}"
+DEPLOY_PATH="${DEPLOY_PATH:-/opt/vpn-proxy}"
+IMAGE_NAME="${IMAGE_NAME:-vpn-proxy-gateway}"
+GIT_REF="$(git rev-parse --short HEAD 2>/dev/null || echo manual)"
+IMAGE_TAG="${IMAGE_TAG:-${GIT_REF}-$(date +%Y%m%d%H%M%S)}"
+GATEWAY_IMAGE="${GATEWAY_IMAGE:-${IMAGE_NAME}:${IMAGE_TAG}}"
+BASE_IMAGE="${BASE_IMAGE:-vpn-proxy-runtime-base:bookworm-slim}"
+RUNTIME_BASE_SOURCE_IMAGE="${RUNTIME_BASE_SOURCE_IMAGE:-mirror.gcr.io/library/debian:bookworm-slim}"
+SINGBOX_VERSION="${SINGBOX_VERSION:-1.12.13}"
+DOCKER_BUILD_PULL="${DOCKER_BUILD_PULL:-false}"
+INSTALL_RUNTIME_DEPS="${INSTALL_RUNTIME_DEPS:-false}"
+INSTALL_SINGBOX="${INSTALL_SINGBOX:-false}"
+AUTO_BUILD_RUNTIME_BASE="${AUTO_BUILD_RUNTIME_BASE:-true}"
+SSH_CONNECT_TIMEOUT="${SSH_CONNECT_TIMEOUT:-10}"
+
+echo "Build host: ${BUILD_HOST}"
+echo "Deploy host: ${DEPLOY_HOST}"
+echo "Image: ${GATEWAY_IMAGE}"
+echo "Base image: ${BASE_IMAGE}"
+echo "Runtime base source: ${RUNTIME_BASE_SOURCE_IMAGE}"
+
+ensure_known_host() {
+  local host="$1"
+  if [ "${host}" = "local" ]; then return 0; fi
+  local scan_host="${host#*@}"
+  scan_host="${scan_host%%:*}"
+  mkdir -p "${HOME}/.ssh"
+  chmod 700 "${HOME}/.ssh"
+  if ! ssh-keygen -F "${scan_host}" >/dev/null 2>&1; then
+    ssh-keyscan -H "${scan_host}" >> "${HOME}/.ssh/known_hosts"
+  fi
+}
+
+ssh_cmd() {
+  ssh \
+    -o BatchMode=yes \
+    -o ConnectTimeout="${SSH_CONNECT_TIMEOUT}" \
+    -o ServerAliveInterval=15 \
+    -o ServerAliveCountMax=4 \
+    "$@"
+}
+
+echo "Syncing source to ${BUILD_HOST}:${BUILD_PATH}"
+if [ "${BUILD_HOST}" = "local" ]; then
+  BUILD_PATH="$(pwd)"
+  echo "Using local source at ${BUILD_PATH}"
+else
+  ensure_known_host "${BUILD_HOST}"
+  ssh_cmd "${BUILD_HOST}" "mkdir -p '${BUILD_PATH}'"
+  rsync -az --delete \
+    -e "ssh -o BatchMode=yes -o ConnectTimeout=${SSH_CONNECT_TIMEOUT} -o ServerAliveInterval=15 -o ServerAliveCountMax=4" \
+    --exclude '.git' \
+    --exclude '.vpn-proxy' \
+    --exclude 'node_modules' \
+    --exclude 'dist' \
+    ./ "${BUILD_HOST}:${BUILD_PATH}/"
+fi
+
+echo "Building image on ${BUILD_HOST}"
+BUILD_COMMAND="set -e; echo 'Docker context:' \$(docker context show 2>/dev/null || true); docker info 2>/dev/null | sed -n '/HTTP Proxy:/p;/HTTPS Proxy:/p;/Name:/p'; cd '${BUILD_PATH}'; if ! docker image inspect '${BASE_IMAGE}' >/dev/null 2>&1; then if [ '${AUTO_BUILD_RUNTIME_BASE}' = 'true' ]; then echo 'Runtime base image ${BASE_IMAGE} is missing on ${BUILD_HOST}; building it now.'; BASE_IMAGE='${RUNTIME_BASE_SOURCE_IMAGE}' RUNTIME_BASE_IMAGE='${BASE_IMAGE}' SINGBOX_VERSION='${SINGBOX_VERSION}' ./scripts/build-runtime-base.sh; else echo 'Runtime base image ${BASE_IMAGE} is missing on ${BUILD_HOST}.'; echo 'Seed it once with: ./scripts/build-runtime-base.sh'; exit 1; fi; fi; npm ci && npm run build && docker build --pull='${DOCKER_BUILD_PULL}' --build-arg BASE_IMAGE='${BASE_IMAGE}' --build-arg SINGBOX_VERSION='${SINGBOX_VERSION}' --build-arg INSTALL_RUNTIME_DEPS='${INSTALL_RUNTIME_DEPS}' --build-arg INSTALL_SINGBOX='${INSTALL_SINGBOX}' -t '${GATEWAY_IMAGE}' ."
+if [ "${BUILD_HOST}" = "local" ]; then
+  bash -lc "${BUILD_COMMAND}"
+else
+  ensure_known_host "${BUILD_HOST}"
+  ssh_cmd "${BUILD_HOST}" "${BUILD_COMMAND}"
+fi
+
+echo "Loading image into ${DEPLOY_HOST}"
+if [ "${BUILD_HOST}" = "local" ] && [ "${DEPLOY_HOST}" = "local" ]; then
+  docker image inspect "${GATEWAY_IMAGE}" >/dev/null
+elif [ "${BUILD_HOST}" = "local" ]; then
+  ensure_known_host "${DEPLOY_HOST}"
+  echo "Checking SSH access to ${DEPLOY_HOST}"
+  ssh_cmd "${DEPLOY_HOST}" "true"
+  echo "Transferring image to ${DEPLOY_HOST}"
+  docker save "${GATEWAY_IMAGE}" | ssh_cmd "${DEPLOY_HOST}" "docker load"
+elif [ "${DEPLOY_HOST}" = "local" ]; then
+  ensure_known_host "${BUILD_HOST}"
+  ssh_cmd "${BUILD_HOST}" "docker save '${GATEWAY_IMAGE}'" | docker load
+else
+  ensure_known_host "${BUILD_HOST}"
+  ensure_known_host "${DEPLOY_HOST}"
+  ssh_cmd "${BUILD_HOST}" "docker save '${GATEWAY_IMAGE}'" | ssh_cmd "${DEPLOY_HOST}" "docker load"
+fi
+
+echo "Copying deploy script to ${DEPLOY_HOST}:${DEPLOY_PATH}"
+if [ "${DEPLOY_HOST}" = "local" ]; then
+  mkdir -p "${DEPLOY_PATH}"
+  cp scripts/deploy-gateway.sh "${DEPLOY_PATH}/deploy-gateway.sh"
+else
+  ensure_known_host "${DEPLOY_HOST}"
+  ssh_cmd "${DEPLOY_HOST}" "mkdir -p '${DEPLOY_PATH}'"
+  rsync -az \
+    -e "ssh -o BatchMode=yes -o ConnectTimeout=${SSH_CONNECT_TIMEOUT} -o ServerAliveInterval=15 -o ServerAliveCountMax=4" \
+    scripts/deploy-gateway.sh "${DEPLOY_HOST}:${DEPLOY_PATH}/deploy-gateway.sh"
+fi
+
+echo "Starting gateway on ${DEPLOY_HOST}"
+if [ "${DEPLOY_HOST}" = "local" ]; then
+  cd "${DEPLOY_PATH}"
+  chmod +x ./deploy-gateway.sh
+  DEPLOY_PATH="${DEPLOY_PATH}" GATEWAY_IMAGE="${GATEWAY_IMAGE}" PULL_IMAGE=false ./deploy-gateway.sh
+else
+  ensure_known_host "${DEPLOY_HOST}"
+  ssh_cmd "${DEPLOY_HOST}" \
+    "cd '${DEPLOY_PATH}' && chmod +x ./deploy-gateway.sh && DEPLOY_PATH='${DEPLOY_PATH}' GATEWAY_IMAGE='${GATEWAY_IMAGE}' PULL_IMAGE=false ./deploy-gateway.sh"
+fi

scripts/build-runtime-base.sh

@@ -0,0 +1,33 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+BASE_IMAGE="${BASE_IMAGE:-mirror.gcr.io/library/debian:bookworm-slim}"
+RUNTIME_BASE_IMAGE="${RUNTIME_BASE_IMAGE:-vpn-proxy-runtime-base:bookworm-slim}"
+SINGBOX_VERSION="${SINGBOX_VERSION:-1.12.13}"
+APT_MIRROR="${APT_MIRROR:-http://mirror.yandex.ru/debian}"
+APT_SECURITY_MIRROR="${APT_SECURITY_MIRROR:-http://mirror.yandex.ru/debian-security}"
+HTTP_PROXY="${HTTP_PROXY:-$(docker info 2>/dev/null | awk -F': ' '/HTTP Proxy:/ {print $2; exit}')}"
+HTTPS_PROXY="${HTTPS_PROXY:-$(docker info 2>/dev/null | awk -F': ' '/HTTPS Proxy:/ {print $2; exit}')}"
+NO_PROXY="${NO_PROXY:-$(docker info 2>/dev/null | awk -F': ' '/No Proxy:/ {print $2; exit}')}"
+
+echo "Building runtime base: ${RUNTIME_BASE_IMAGE}"
+echo "Source base image: ${BASE_IMAGE}"
+echo "APT mirror: ${APT_MIRROR}"
+echo "APT security mirror: ${APT_SECURITY_MIRROR}"
+if [ -n "${HTTP_PROXY}" ]; then echo "HTTP proxy: ${HTTP_PROXY}"; fi
+if [ -n "${HTTPS_PROXY}" ]; then echo "HTTPS proxy: ${HTTPS_PROXY}"; fi
+
+docker build \
+  --build-arg BASE_IMAGE="${BASE_IMAGE}" \
+  --build-arg SINGBOX_VERSION="${SINGBOX_VERSION}" \
+  --build-arg APT_MIRROR="${APT_MIRROR}" \
+  --build-arg APT_SECURITY_MIRROR="${APT_SECURITY_MIRROR}" \
+  --build-arg HTTP_PROXY="${HTTP_PROXY}" \
+  --build-arg HTTPS_PROXY="${HTTPS_PROXY}" \
+  --build-arg NO_PROXY="${NO_PROXY}" \
+  --build-arg http_proxy="${HTTP_PROXY}" \
+  --build-arg https_proxy="${HTTPS_PROXY}" \
+  --build-arg no_proxy="${NO_PROXY}" \
+  -f Dockerfile.runtime-base \
+  -t "${RUNTIME_BASE_IMAGE}" \
+  .

scripts/deploy-gateway.sh

@@ -0,0 +1,75 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+DEPLOY_PATH="${DEPLOY_PATH:-/opt/vpn-proxy}"
+GATEWAY_IMAGE="${GATEWAY_IMAGE:?GATEWAY_IMAGE is required}"
+PULL_IMAGE="${PULL_IMAGE:-true}"
+
+echo "Preparing deploy directory: ${DEPLOY_PATH}"
+mkdir -p "${DEPLOY_PATH}"
+
+cat > "${DEPLOY_PATH}/docker-compose.server.yml" <<EOF
+services:
+  vpn-proxy-gateway:
+    image: ${GATEWAY_IMAGE}
+    container_name: vpn-proxy-gateway
+    network_mode: host
+    cap_add:
+      - NET_ADMIN
+      - NET_RAW
+    env_file:
+      - .env
+    environment:
+      DATA_DIR: /var/lib/vpn-proxy
+      SING_BOX_CACHE: /var/lib/sing-box/cache.db
+    volumes:
+      - vpn-proxy-data:/var/lib/vpn-proxy
+      - sing-box-cache:/var/lib/sing-box
+    restart: unless-stopped
+    healthcheck:
+      test: ["CMD", "curl", "-fsS", "http://127.0.0.1:\${PORT:-3456}/api/state"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 20s
+
+volumes:
+  vpn-proxy-data:
+  sing-box-cache:
+EOF
+
+if [ ! -f "${DEPLOY_PATH}/.env" ]; then
+  cat > "${DEPLOY_PATH}/.env" <<'EOF'
+PORT=3456
+PROXY_PORT=8080
+PROXY_BIND_IP=0.0.0.0
+TPROXY_PORT=7895
+TPROXY_MARK=1
+TPROXY_TABLE=100
+TPROXY_CHAIN=VPN_PROXY_TPROXY
+TPROXY_SOURCE_BYPASS_CHAIN=VPN_PROXY_SRC_BYPASS
+TPROXY_SOURCE_FORWARD_CHAIN=VPN_PROXY_FWD_BYPASS
+TPROXY_SOURCE_NAT_CHAIN=VPN_PROXY_NAT_BYPASS
+TPROXY_BYPASS_SOURCE_CIDRS=
+ROUTING_RU_DIRECT=true
+LOG_LEVEL=info
+EOF
+  echo "Created default .env. Edit ${DEPLOY_PATH}/.env if this server needs different ports."
+else
+  echo "Preserving existing .env"
+fi
+
+cd "${DEPLOY_PATH}"
+
+echo "Pulling image: ${GATEWAY_IMAGE}"
+if [ "${PULL_IMAGE}" = "true" ]; then
+  docker compose -f docker-compose.server.yml pull
+else
+  echo "Skipping image pull; using local image ${GATEWAY_IMAGE}"
+fi
+
+echo "Starting gateway..."
+docker compose -f docker-compose.server.yml up -d
+
+echo "Current container:"
+docker ps --filter "name=vpn-proxy-gateway"

scripts/install-macos-client.sh

@@ -0,0 +1,284 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+INSTALL_DIR="${VPN_PROXY_INSTALL_DIR:-$HOME/.vpn-proxy-client}"
+REPO_URL="${VPN_PROXY_REPO_URL:-https://git.dokops.ru/dokril/vpn-proxy.git}"
+BRANCH="${VPN_PROXY_BRANCH:-master}"
+COMPOSE_FILE="docker-compose.client.yml"
+DEFAULT_PROXY_PORT="8080"
+REQUESTED_PROXY_PORT="${VPN_PROXY_CLIENT_PORT:-}"
+REQUESTED_UI_PORT="${VPN_PROXY_CLIENT_UI_PORT:-${CLIENT_UI_PORT:-}}"
+CLIENT_CONTAINER_NAME="vpn-proxy-client"
+
+log() {
+  printf '[vpn-proxy-client] %s\n' "$*"
+}
+
+die() {
+  printf '[vpn-proxy-client] error: %s\n' "$*" >&2
+  exit 1
+}
+
+need() {
+  command -v "$1" >/dev/null 2>&1 || die "$1 is required"
+}
+
+is_valid_port() {
+  case "$1" in
+    ''|*[!0-9]*) return 1 ;;
+  esac
+  [ "$1" -ge 1024 ] && [ "$1" -le 65535 ]
+}
+
+ask_proxy_port() {
+  local value=""
+  if [ -n "$REQUESTED_PROXY_PORT" ]; then
+    if ! is_valid_port "$REQUESTED_PROXY_PORT"; then
+      die "VPN_PROXY_CLIENT_PORT must be a port from 1024 to 65535"
+    fi
+    printf '%s\n' "$REQUESTED_PROXY_PORT"
+    return 0
+  fi
+
+  if [ -r /dev/tty ]; then
+    while true; do
+      printf 'Proxy port for local apps [%s]: ' "$DEFAULT_PROXY_PORT" >/dev/tty
+      IFS= read -r value </dev/tty || value=""
+      value="${value:-$DEFAULT_PROXY_PORT}"
+      if is_valid_port "$value"; then
+        printf '%s\n' "$value"
+        return 0
+      fi
+      printf 'Enter a port from 1024 to 65535.\n' >/dev/tty
+    done
+  fi
+
+  if ! is_valid_port "$DEFAULT_PROXY_PORT"; then
+    die "VPN_PROXY_CLIENT_PORT must be a port from 1024 to 65535"
+  fi
+  printf '%s\n' "$DEFAULT_PROXY_PORT"
+}
+
+published_port_conflicts() {
+  local port="$1"
+  local line
+
+  while IFS= read -r line; do
+    [ -n "$line" ] || continue
+    case "$line" in
+      "${CLIENT_CONTAINER_NAME}"$'\t'*) ;;
+      *) printf '%s\n' "$line" ;;
+    esac
+  done < <(docker ps --filter "publish=${port}" --format '{{.Names}}	{{.Ports}}')
+}
+
+proxy_port_conflicts() {
+  published_port_conflicts "$1"
+}
+
+assert_proxy_port_available() {
+  local port="$1"
+  local conflicts
+
+  conflicts="$(proxy_port_conflicts "$port")"
+  if [ -z "$conflicts" ]; then
+    return 0
+  fi
+
+  printf '[vpn-proxy-client] proxy port %s is already used:\n%s\n' \
+    "$port" "$conflicts" >&2
+  die "choose another proxy port with VPN_PROXY_CLIENT_PORT=<port> or stop the conflicting container"
+}
+
+assert_single_port_available() {
+  local label="$1"
+  local port="$2"
+  local conflicts
+
+  conflicts="$(published_port_conflicts "$port")"
+  if [ -z "$conflicts" ]; then
+    return 0
+  fi
+
+  printf '[vpn-proxy-client] %s port %s is already used:\n%s\n' \
+    "$label" "$port" "$conflicts" >&2
+  die "choose another ${label} port or stop the conflicting container"
+}
+
+first_free_port() {
+  local start="$1"
+  local port
+
+  for port in $(seq "$start" 65535); do
+    if [ -z "$(published_port_conflicts "$port")" ]; then
+      printf '%s\n' "$port"
+      return 0
+    fi
+  done
+  return 1
+}
+
+choose_ui_port() {
+  local value="$1"
+  local suggested
+
+  if ! is_valid_port "$value"; then
+    die "CLIENT_UI_PORT must be a port from 1024 to 65535"
+  fi
+
+  if [ -z "$(published_port_conflicts "$value")" ]; then
+    printf '%s\n' "$value"
+    return 0
+  fi
+
+  if [ -n "$REQUESTED_UI_PORT" ] || [ ! -r /dev/tty ]; then
+    assert_single_port_available "UI" "$value"
+  fi
+
+  suggested="$(first_free_port "$((value + 1))" || true)"
+  suggested="${suggested:-3457}"
+  while true; do
+    printf 'UI port %s is busy. Choose UI port [%s]: ' "$value" "$suggested" >/dev/tty
+    IFS= read -r value </dev/tty || value=""
+    value="${value:-$suggested}"
+    if is_valid_port "$value" && [ -z "$(published_port_conflicts "$value")" ]; then
+      printf '%s\n' "$value"
+      return 0
+    fi
+    printf 'Enter a free port from 1024 to 65535.\n' >/dev/tty
+  done
+}
+
+assert_ui_outside_proxy_range() {
+  if [ "$UI_PORT" = "$PROXY_PORT" ]; then
+    die "UI port ${UI_PORT} overlaps proxy port"
+  fi
+}
+
+wait_for_client_ui() {
+  local ui_port="${UI_PORT:-3456}"
+  local ui_url="http://127.0.0.1:${ui_port}/api/state"
+  local attempt
+
+  for attempt in $(seq 1 30); do
+    if curl --noproxy "*" -fsS "$ui_url" >/dev/null 2>&1; then
+      return 0
+    fi
+    sleep 1
+  done
+
+  printf '\n[vpn-proxy-client] client did not become ready at %s\n' "$ui_url" >&2
+  printf '[vpn-proxy-client] docker compose status:\n' >&2
+  docker compose -f "$COMPOSE_FILE" ps >&2 || true
+  printf '\n[vpn-proxy-client] recent service logs:\n' >&2
+  docker compose -f "$COMPOSE_FILE" logs --tail=120 vpn-proxy-client >&2 || true
+  die "client UI is not ready; see Docker status and logs above"
+}
+
+set_env_value() {
+  local key="$1"
+  local value="$2"
+  local tmp
+  tmp="$(mktemp)"
+
+  if [ -f .env ] && grep -q "^${key}=" .env; then
+    awk -v key="$key" -v value="$value" '
+      BEGIN { prefix = key "=" }
+      index($0, prefix) == 1 { print key "=" value; next }
+      { print }
+    ' .env > "$tmp"
+  else
+    [ -f .env ] && cat .env > "$tmp"
+    printf '%s=%s\n' "$key" "$value" >> "$tmp"
+  fi
+
+  mv "$tmp" .env
+}
+
+get_env_value() {
+  local key="$1"
+  [ -f .env ] || return 0
+  awk -v key="$key" '
+    BEGIN { prefix = key "=" }
+    index($0, prefix) == 1 { print substr($0, length(prefix) + 1); exit }
+  ' .env
+}
+
+if [[ "$(uname -s)" != "Darwin" ]]; then
+  die "this installer is intended for macOS"
+fi
+
+need git
+need docker
+need curl
+
+docker compose version >/dev/null 2>&1 || die "Docker Compose plugin is required"
+docker info >/dev/null 2>&1 || die "Docker Desktop is not running"
+
+if [[ -d "$INSTALL_DIR/.git" ]]; then
+  log "updating $INSTALL_DIR"
+  git -C "$INSTALL_DIR" fetch origin "$BRANCH"
+  git -C "$INSTALL_DIR" checkout "$BRANCH"
+  git -C "$INSTALL_DIR" pull --ff-only origin "$BRANCH"
+else
+  log "cloning $REPO_URL#$BRANCH to $INSTALL_DIR"
+  mkdir -p "$(dirname "$INSTALL_DIR")"
+  git clone --branch "$BRANCH" "$REPO_URL" "$INSTALL_DIR"
+fi
+
+cd "$INSTALL_DIR"
+
+if [[ ! -f .env && -f .env.example ]]; then
+  cp .env.example .env
+fi
+
+PROXY_PORT="$(ask_proxy_port)"
+assert_proxy_port_available "$PROXY_PORT"
+PROXY_PORT_END="$PROXY_PORT"
+UI_PORT="${REQUESTED_UI_PORT:-$(get_env_value CLIENT_UI_PORT)}"
+UI_PORT="${UI_PORT:-3456}"
+UI_PORT="$(choose_ui_port "$UI_PORT")"
+assert_ui_outside_proxy_range
+
+set_env_value APP_MODE client
+set_env_value CLIENT_UI_PORT "$UI_PORT"
+set_env_value CLIENT_PROXY_PORT "$PROXY_PORT"
+set_env_value CLIENT_PROXY_PORT_START "$PROXY_PORT"
+set_env_value CLIENT_PROXY_PORT_END "$PROXY_PORT_END"
+set_env_value PROXY_PORT "$PROXY_PORT"
+
+log "UI port: http://127.0.0.1:${UI_PORT}"
+log "proxy port: 127.0.0.1:${PROXY_PORT}"
+
+log "building and starting Docker client"
+docker compose -f "$COMPOSE_FILE" up -d --build
+wait_for_client_ui
+
+cat <<EOF
+
+VPN Proxy Client is running.
+
+UI:
+  http://127.0.0.1:${UI_PORT}
+
+Proxy:
+  HTTP/SOCKS5 127.0.0.1:${PROXY_PORT}
+  This is the only Docker-published proxy port. Re-run the installer with VPN_PROXY_CLIENT_PORT=<port> to change it.
+
+Useful commands:
+  cd ~/.vpn-proxy-client
+  docker compose -f docker-compose.client.yml logs -f
+  docker compose -f docker-compose.client.yml restart
+  docker compose -f docker-compose.client.yml down
+
+Optional macOS system proxy example:
+  networksetup -setwebproxy Wi-Fi 127.0.0.1 ${PROXY_PORT}
+  networksetup -setsecurewebproxy Wi-Fi 127.0.0.1 ${PROXY_PORT}
+  networksetup -setsocksfirewallproxy Wi-Fi 127.0.0.1 ${PROXY_PORT}
+
+Disable later:
+  networksetup -setwebproxystate Wi-Fi off
+  networksetup -setsecurewebproxystate Wi-Fi off
+  networksetup -setsocksfirewallproxystate Wi-Fi off
+
+EOF

src/server/clientSettings.js

@@ -0,0 +1,101 @@
+import fs from "node:fs";
+import path from "node:path";
+import { settings } from "./config.js";
+
+const DEFAULT_CLIENT_SETTINGS = {
+  homeBypassEnabled: false,
+  sharedProxyEnabled: false,
+  sharedProxyControlUrl: "",
+  sharedProxy: null,
+};
+
+function normalizeProxyPort(value, fallback = settings.proxyPort) {
+  const parsed = Number.parseInt(value, 10);
+  const min = Number.isInteger(settings.clientProxyPortStart)
+    ? settings.clientProxyPortStart
+    : settings.proxyPort;
+  const max = Number.isInteger(settings.clientProxyPortEnd)
+    ? settings.clientProxyPortEnd
+    : min;
+  const fallbackPort =
+    Number.isInteger(fallback) && fallback >= min && fallback <= max
+      ? fallback
+      : min;
+  if (!Number.isInteger(parsed) || parsed < min || parsed > max) {
+    return fallbackPort;
+  }
+  return parsed;
+}
+
+function readJson(filePath, fallback) {
+  try {
+    if (!fs.existsSync(filePath)) return fallback;
+    return JSON.parse(fs.readFileSync(filePath, "utf8"));
+  } catch {
+    return fallback;
+  }
+}
+
+function writeJson(filePath, value) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, JSON.stringify(value, null, 2), "utf8");
+}
+
+function normalizeUrl(value) {
+  const raw = String(value || "").trim();
+  if (!raw) return "";
+  try {
+    const url = new URL(raw);
+    if (!["http:", "https:"].includes(url.protocol)) return "";
+    url.hash = "";
+    url.search = "";
+    return url.toString().replace(/\/$/, "");
+  } catch {
+    return "";
+  }
+}
+
+function normalizeSharedProxy(value) {
+  if (!value || typeof value !== "object") return null;
+  const host = String(value.host || "").trim();
+  const port = Number.parseInt(value.port, 10);
+  const protocol = value.protocol === "http" ? "http" : "socks5";
+  if (!host || !Number.isInteger(port) || port <= 0 || port > 65535) {
+    return null;
+  }
+  return {
+    host,
+    port,
+    protocol,
+    checkedAt: value.checkedAt || null,
+  };
+}
+
+export function normalizeClientSettings(input = {}) {
+  const sharedProxy = normalizeSharedProxy(input.sharedProxy);
+  const sharedProxyEnabled = Boolean(input.sharedProxyEnabled && sharedProxy);
+  return {
+    homeBypassEnabled: Boolean(input.homeBypassEnabled),
+    proxyPort: normalizeProxyPort(input.proxyPort),
+    sharedProxyEnabled,
+    sharedProxyControlUrl: normalizeUrl(input.sharedProxyControlUrl),
+    sharedProxy,
+  };
+}
+
+export function readClientSettings() {
+  return normalizeClientSettings({
+    ...DEFAULT_CLIENT_SETTINGS,
+    proxyPort: settings.proxyPort,
+    ...readJson(settings.clientSettingsPath, {}),
+  });
+}
+
+export function writeClientSettings(input) {
+  const normalized = normalizeClientSettings({
+    ...readClientSettings(),
+    ...(input && typeof input === "object" ? input : {}),
+  });
+  writeJson(settings.clientSettingsPath, normalized);
+  return normalized;
+}

src/server/config.js

@@ -1,21 +1,51 @@
-import path from 'node:path';
+import path from "node:path";
 
-const dataDir = process.env.DATA_DIR || path.resolve('.vpn-proxy');
+const dataDir = process.env.DATA_DIR || path.resolve(".vpn-proxy");
+const parsePort = (value, fallback) => {
+  const parsed = Number.parseInt(value, 10);
+  return Number.isInteger(parsed) ? parsed : fallback;
+};
+const proxyPort = parsePort(process.env.PROXY_PORT, 8080);
+const clientProxyPortStart = parsePort(
+  process.env.CLIENT_PROXY_PORT_START,
+  proxyPort,
+);
+const clientProxyPortEnd = parsePort(
+  process.env.CLIENT_PROXY_PORT_END,
+  clientProxyPortStart,
+);
 
 export const settings = {
-  port: Number(process.env.PORT || 3456),
-  proxyPort: Number(process.env.PROXY_PORT || 8080),
-  tproxyPort: Number(process.env.TPROXY_PORT || 7895),
-  bindIp: process.env.PROXY_BIND_IP || '0.0.0.0',
+  appMode: process.env.APP_MODE === "client" ? "client" : "gateway",
+  port: parsePort(process.env.PORT, 3456),
+  proxyPort,
+  clientProxyPortStart,
+  clientProxyPortEnd,
+  tproxyPort: parsePort(process.env.TPROXY_PORT, 7895),
+  tproxyChain: process.env.TPROXY_CHAIN || "VPN_PROXY_TPROXY",
+  tproxySourceBypassChain:
+    process.env.TPROXY_SOURCE_BYPASS_CHAIN || "VPN_PROXY_SRC_BYPASS",
+  tproxySourceForwardChain:
+    process.env.TPROXY_SOURCE_FORWARD_CHAIN || "VPN_PROXY_FWD_BYPASS",
+  tproxySourceNatChain:
+    process.env.TPROXY_SOURCE_NAT_CHAIN || "VPN_PROXY_NAT_BYPASS",
+  bindIp: process.env.PROXY_BIND_IP || "0.0.0.0",
   dataDir,
-  distDir: process.env.DIST_DIR || '/app/dist',
-  configPath: process.env.SING_BOX_CONFIG || '/etc/sing-box/config.json',
-  cachePath: process.env.SING_BOX_CACHE || '/var/lib/sing-box/cache.db',
-  statePath: path.join(dataDir, 'state.json'),
-  customRulesPath: path.join(dataDir, 'custom-rules.json'),
-  subscriptionCachePath: path.join(dataDir, 'subscription-cache.json'),
-  hwidPath: path.join(dataDir, 'hwid'),
-  routingRuDirect: String(process.env.ROUTING_RU_DIRECT || 'true') !== 'false',
-  logLevel: process.env.LOG_LEVEL || 'info',
-  appName: 'VPN Proxy Gateway',
+  distDir: process.env.DIST_DIR || "/app/dist",
+  configPath:
+    process.env.SING_BOX_CONFIG || path.join(dataDir, "sing-box-config.json"),
+  cachePath: process.env.SING_BOX_CACHE || "/var/lib/sing-box/cache.db",
+  statePath: path.join(dataDir, "state.json"),
+  customRulesPath: path.join(dataDir, "custom-rules.json"),
+  customRuleSetsPath: path.join(dataDir, "custom-rule-sets.json"),
+  clientSettingsPath: path.join(dataDir, "client-settings.json"),
+  devicesPath: path.join(dataDir, "devices.json"),
+  deviceRulesPath: path.join(dataDir, "device-rules.json"),
+  subscriptionCachePath: path.join(dataDir, "subscription-cache.json"),
+  sharedProxyHost: process.env.SHARED_PROXY_HOST || "",
+  hwidPath: path.join(dataDir, "hwid"),
+  routingRuDirect: String(process.env.ROUTING_RU_DIRECT || "true") !== "false",
+  ruleSetDownloadDetour: process.env.RULE_SET_DOWNLOAD_DETOUR || "vpn",
+  logLevel: process.env.LOG_LEVEL || "info",
+  appName: "VPN Proxy Gateway",
 };

src/server/devices.js

@@ -0,0 +1,152 @@
+import fs from "node:fs";
+import path from "node:path";
+import { settings } from "./config.js";
+
+export const DEVICE_MODES = new Set(["direct", "vpn", "rules", "block", "bypass"]);
+export const DEFAULT_DEVICE_MODES = new Set(["direct", "vpn", "block"]);
+export const DEFAULT_DEVICE_MODE = "vpn";
+export const DEFAULT_PROXY_MODE = "vpn";
+export const TPROXY_INBOUND = "tproxy-in";
+export const MIXED_INBOUND = "mixed-in";
+
+const IPISH_RE = /^[\.\d:/]+$/;
+
+function readJson(filePath, fallback) {
+  try {
+    if (!fs.existsSync(filePath)) return fallback;
+    return JSON.parse(fs.readFileSync(filePath, "utf8"));
+  } catch {
+    return fallback;
+  }
+}
+
+function writeJson(filePath, value) {
+  fs.mkdirSync(path.dirname(filePath), { recursive: true });
+  fs.writeFileSync(filePath, JSON.stringify(value, null, 2), "utf8");
+}
+
+function normalizeDeviceMode(mode, fallback = "rules") {
+  const value = String(mode || "").trim().toLowerCase();
+  return DEVICE_MODES.has(value) ? value : fallback;
+}
+
+function normalizeDefaultMode(mode) {
+  const value = String(mode || "").trim().toLowerCase();
+  return DEFAULT_DEVICE_MODES.has(value) ? value : DEFAULT_DEVICE_MODE;
+}
+
+function normalizeProxyMode(mode) {
+  const value = String(mode || "").trim().toLowerCase();
+  return DEFAULT_DEVICE_MODES.has(value) ? value : DEFAULT_PROXY_MODE;
+}
+
+function normalizeIp(ip) {
+  const value = String(ip || "").trim();
+  return value && IPISH_RE.test(value) ? value : "";
+}
+
+function normalizeMac(mac) {
+  return String(mac || "").trim();
+}
+
+function fromLegacyDeviceRules(input) {
+  const rules = Array.isArray(input) ? input : [];
+  const devices = [];
+
+  for (const rule of rules) {
+    const sourceIps = Array.isArray(rule?.sourceIps) ? rule.sourceIps : [];
+    const mode = normalizeDeviceMode(rule?.outbound, "direct");
+    sourceIps.forEach((sourceIp, ipIndex) => {
+      const ip = normalizeIp(sourceIp);
+      if (!ip) return;
+      devices.push({
+        id: String(rule.id || `dev-${devices.length}`) + `-${ipIndex}`,
+        name: String(rule.name || `Устройство ${devices.length + 1}`).trim(),
+        enabled: rule.enabled !== false,
+        ip,
+        mac: "",
+        mode,
+        lastSeen: null,
+      });
+    });
+  }
+
+  return {
+    defaultTransparentMode: DEFAULT_DEVICE_MODE,
+    proxyDefaultMode: DEFAULT_PROXY_MODE,
+    devices,
+  };
+}
+
+export function normalizeDeviceProfiles(input) {
+  const raw =
+    input && typeof input === "object" && !Array.isArray(input)
+      ? input
+      : { devices: input };
+  const rawDevices = Array.isArray(raw.devices) ? raw.devices : [];
+
+  return {
+    defaultTransparentMode: normalizeDefaultMode(
+      raw.defaultTransparentMode || raw.defaultMode,
+    ),
+    proxyDefaultMode: normalizeProxyMode(raw.proxyDefaultMode),
+    devices: rawDevices.map((device, index) => ({
+      id: String(device.id || `dev-${Date.now()}-${index}`),
+      name: String(device.name || `Устройство ${index + 1}`).trim(),
+      enabled: device.enabled !== false,
+      ip: normalizeIp(device.ip || device.sourceIp),
+      mac: normalizeMac(device.mac),
+      mode: normalizeDeviceMode(device.mode || device.outbound, "rules"),
+      lastSeen: device.lastSeen || null,
+    })),
+  };
+}
+
+export function readDeviceProfiles() {
+  if (fs.existsSync(settings.devicesPath)) {
+    return normalizeDeviceProfiles(readJson(settings.devicesPath, null));
+  }
+
+  if (fs.existsSync(settings.deviceRulesPath)) {
+    return normalizeDeviceProfiles(
+      fromLegacyDeviceRules(readJson(settings.deviceRulesPath, [])),
+    );
+  }
+
+  return {
+    defaultTransparentMode: DEFAULT_DEVICE_MODE,
+    proxyDefaultMode: DEFAULT_PROXY_MODE,
+    devices: [],
+  };
+}
+
+export function writeDeviceProfiles(value) {
+  const normalized = normalizeDeviceProfiles(value);
+  writeJson(settings.devicesPath, normalized);
+  return normalized;
+}
+
+export function normalizeCidr(ip) {
+  const value = normalizeIp(ip);
+  if (!value) return "";
+  return value.includes("/") ? value : `${value}/32`;
+}
+
+export function deviceCidrs(devices, modes) {
+  const allowedModes = new Set(Array.isArray(modes) ? modes : [modes]);
+  return (Array.isArray(devices) ? devices : [])
+    .filter((device) => device.enabled !== false && allowedModes.has(device.mode))
+    .map((device) => normalizeCidr(device.ip))
+    .filter(Boolean);
+}
+
+export function legacyDeviceRulesFromProfiles(profiles) {
+  const { devices } = normalizeDeviceProfiles(profiles);
+  return devices.map((device) => ({
+    id: device.id,
+    name: device.name,
+    enabled: device.enabled,
+    sourceIps: device.ip ? [device.ip] : [],
+    outbound: device.mode === "rules" ? "direct" : device.mode,
+  }));
+}

src/server/ping.js

@@ -0,0 +1,50 @@
+// TCP-пинг: меряем время до открытия TCP-соединения с хостом:портом.
+// Это не ICMP-ping, но для VPN-серверов точнее (проверяем именно тот порт, куда подключается клиент).
+
+import net from "node:net";
+import dns from "node:dns/promises";
+
+const DEFAULT_TIMEOUT = 3000;
+
+export async function tcpPing(host, port, timeout = DEFAULT_TIMEOUT) {
+  const start = Date.now();
+  return new Promise((resolve) => {
+    const socket = new net.Socket();
+    let done = false;
+
+    const finish = (result) => {
+      if (done) return;
+      done = true;
+      socket.removeAllListeners();
+      socket.destroy();
+      resolve(result);
+    };
+
+    socket.setTimeout(timeout);
+    socket.once("connect", () =>
+      finish({ ok: true, latency: Date.now() - start }),
+    );
+    socket.once("timeout", () =>
+      finish({ ok: false, latency: null, error: "timeout" }),
+    );
+    socket.once("error", (err) =>
+      finish({ ok: false, latency: null, error: err.code || err.message }),
+    );
+
+    try {
+      socket.connect(port, host);
+    } catch (err) {
+      finish({ ok: false, latency: null, error: err.message });
+    }
+  });
+}
+
+export async function resolveHost(host) {
+  if (net.isIP(host)) return host;
+  try {
+    const result = await dns.lookup(host);
+    return result.address;
+  } catch {
+    return null;
+  }
+}

src/server/routeMatcher.js

@@ -0,0 +1,340 @@
+// Простой симулятор роутинга sing-box.
+// Берём список customRules + safety/RU-direct и определяем, какое правило сработает.
+// Для geoip-ru / geosite-category-ru возвращаем "может сработать" — без скачанного ruleset
+// мы не можем точно сказать, попадает ли IP/домен в RU.
+
+import net from "node:net";
+import { TPROXY_INBOUND, MIXED_INBOUND } from "./devices.js";
+
+function ipv4ToInt(ip) {
+  const parts = ip.split(".").map((x) => Number.parseInt(x, 10));
+  if (
+    parts.length !== 4 ||
+    parts.some((n) => Number.isNaN(n) || n < 0 || n > 255)
+  )
+    return null;
+  return (
+    ((parts[0] << 24) >>> 0) + (parts[1] << 16) + (parts[2] << 8) + parts[3]
+  );
+}
+
+function ipInCidr(ip, cidr) {
+  if (!net.isIP(ip)) return false;
+  const [addr, maskStr] = String(cidr).split("/");
+  if (!addr) return false;
+
+  if (net.isIPv4(ip) && net.isIPv4(addr)) {
+    const mask = maskStr === undefined ? 32 : Number.parseInt(maskStr, 10);
+    if (!Number.isInteger(mask) || mask < 0 || mask > 32) return false;
+    const ipInt = ipv4ToInt(ip);
+    const cidrInt = ipv4ToInt(addr);
+    if (ipInt === null || cidrInt === null) return false;
+    if (mask === 0) return true;
+    const m = (~0 << (32 - mask)) >>> 0;
+    return (ipInt & m) === (cidrInt & m);
+  }
+  // IPv6 — упрощённо: точное сравнение строк (без полноценной обработки)
+  return false;
+}
+
+const PRIVATE_CIDRS = [
+  "10.0.0.0/8",
+  "172.16.0.0/12",
+  "192.168.0.0/16",
+  "127.0.0.0/8",
+  "169.254.0.0/16",
+];
+
+function isPrivateIp(ip) {
+  if (!ip) return false;
+  return PRIVATE_CIDRS.some((cidr) => ipInCidr(ip, cidr));
+}
+
+function normalizeCidr(ip) {
+  const value = String(ip || "").trim();
+  if (!value) return "";
+  return value.includes("/") ? value : `${value}/32`;
+}
+
+function deviceMatchesSourceIp(device, sourceIp) {
+  if (!device?.ip || !sourceIp) return false;
+  return ipInCidr(sourceIp, normalizeCidr(device.ip));
+}
+
+function modeOutbound(mode, vpnTag) {
+  if (mode === "vpn") return `${vpnTag} (VPN)`;
+  if (mode === "direct" || mode === "block") return mode;
+  return null;
+}
+
+function likelyRuHost(host) {
+  const value = String(host || "").toLowerCase();
+  return value === "ru" || value.endsWith(".ru");
+}
+
+function hostMatchesDomain(host, domain) {
+  if (!host || !domain) return false;
+  return host.toLowerCase() === domain.toLowerCase();
+}
+
+function hostMatchesSuffix(host, suffix) {
+  if (!host || !suffix) return false;
+  const h = host.toLowerCase();
+  const s = suffix.toLowerCase();
+  return h === s || h.endsWith("." + s) || h.endsWith(s);
+}
+
+function hostMatchesKeyword(host, keyword) {
+  if (!host || !keyword) return false;
+  return host.toLowerCase().includes(keyword.toLowerCase());
+}
+
+function ruleMatches(rule, target) {
+  const { host = "", ip = "", port, network } = target;
+
+  if (!rule?.enabled) return false;
+
+  const checks = [];
+
+  if (rule.domains?.length) {
+    checks.push(rule.domains.some((d) => hostMatchesDomain(host, d)));
+  }
+  if (rule.domainSuffixes?.length) {
+    checks.push(rule.domainSuffixes.some((d) => hostMatchesSuffix(host, d)));
+  }
+  if (rule.domainKeywords?.length) {
+    checks.push(rule.domainKeywords.some((d) => hostMatchesKeyword(host, d)));
+  }
+  if (rule.ipCidrs?.length) {
+    if (!ip) return false;
+    checks.push(rule.ipCidrs.some((cidr) => ipInCidr(ip, cidr)));
+  }
+  if (rule.ports?.length) {
+    if (port === undefined || port === null || port === "") return false;
+    const p = Number(port);
+    checks.push(
+      rule.ports.some((portStr) => {
+        const s = String(portStr).trim();
+        if (s.includes("-")) {
+          const [from, to] = s.split("-").map((x) => Number(x));
+          return p >= from && p <= to;
+        }
+        return p === Number(s);
+      }),
+    );
+  }
+  if (rule.networks?.length) {
+    if (!network) return false;
+    checks.push(rule.networks.includes(network));
+  }
+
+  if (!checks.length) return false;
+  return checks.every(Boolean);
+}
+
+/**
+ * Симулирует роутинг и возвращает результат.
+ * @param {object} target { host, ip, port, network }
+ * @param {Array} customRules
+ * @param {object} options { routingRuDirect, vpnTag }
+ */
+export function matchRoute(target, customRules, options = {}) {
+  const {
+    routingRuDirect = true,
+    vpnTag = "vpn-out",
+    deviceProfiles = {
+      defaultTransparentMode: "vpn",
+      proxyDefaultMode: "vpn",
+      devices: [],
+    },
+  } = options;
+  const rules = Array.isArray(customRules) ? customRules : [];
+  const inbound = target.inbound || TPROXY_INBOUND;
+  const sourceIp = target.sourceIp || "";
+  const devices = Array.isArray(deviceProfiles.devices)
+    ? deviceProfiles.devices
+    : [];
+  const matchedDevice = devices.find(
+    (device) =>
+      device.enabled !== false && deviceMatchesSourceIp(device, sourceIp),
+  );
+
+  if (
+    inbound === TPROXY_INBOUND &&
+    matchedDevice &&
+    matchedDevice.mode === "bypass"
+  ) {
+    return {
+      matched: "kernel-bypass",
+      ruleIndex: -1,
+      ruleId: matchedDevice.id,
+      ruleName: `${matchedDevice.name} -> bypass TProxy`,
+      outbound: "direct",
+      reason: "Source IP исключён на уровне iptables до попадания в sing-box",
+    };
+  }
+
+  // 1. private IP → direct
+  if (target.ip && isPrivateIp(target.ip)) {
+    return {
+      matched: "system",
+      ruleIndex: -1,
+      ruleName: "private IP → direct",
+      outbound: "direct",
+      reason: `IP ${target.ip} приватный`,
+    };
+  }
+
+  // 2. global custom rules apply to every inbound before fallbacks.
+  for (let i = 0; i < rules.length; i += 1) {
+    const rule = rules[i];
+    if (ruleMatches(rule, target)) {
+      const outbound =
+        rule.outbound === "vpn" ? `${vpnTag} (VPN)` : rule.outbound;
+      return {
+        matched: "custom",
+        ruleIndex: i,
+        ruleId: rule.id,
+        ruleName: rule.name,
+        outbound,
+        reason: "Совпадение по global custom rule",
+      };
+    }
+  }
+
+  // 3. RU direct is global. Without a local rule-set DB we only detect obvious .ru hosts.
+  if (routingRuDirect && likelyRuHost(target.host)) {
+    return {
+      matched: "geo",
+      ruleIndex: -2,
+      ruleName: "geosite-category-ru → direct",
+      outbound: "direct",
+      reason: "Домен выглядит как RU; точное попадание в rule-set проверит sing-box",
+    };
+  }
+
+  // 4. transparent device defaults.
+  if (inbound === TPROXY_INBOUND && matchedDevice) {
+    const outbound = modeOutbound(matchedDevice.mode, vpnTag);
+    if (outbound) {
+      return {
+        matched: "device-default",
+        ruleIndex: -1,
+        ruleId: matchedDevice.id,
+        ruleName: `${matchedDevice.name} → ${matchedDevice.mode}`,
+        outbound,
+        reason: "Fallback устройства после global rules",
+      };
+    }
+  }
+
+  // 5. explicit proxy default.
+  if (inbound === MIXED_INBOUND) {
+    const mode = deviceProfiles.proxyDefaultMode || "vpn";
+    return {
+      matched: "proxy-default",
+      ruleIndex: -1,
+      ruleName: `mixed-in default → ${mode}`,
+      outbound: modeOutbound(mode, vpnTag) || `${vpnTag} (VPN)`,
+      reason: "Fallback explicit HTTP/SOCKS proxy после global rules",
+    };
+  }
+
+  // 6. unknown transparent device default.
+  if (inbound === TPROXY_INBOUND) {
+    const mode = deviceProfiles.defaultTransparentMode || "vpn";
+    return {
+      matched: "transparent-default",
+      ruleIndex: -1,
+      ruleName: `transparent default → ${mode}`,
+      outbound: modeOutbound(mode, vpnTag) || "direct",
+      reason: "Fallback unknown transparent device после global rules",
+    };
+  }
+
+  // 7. final → direct
+  return {
+    matched: "final",
+    ruleIndex: -3,
+    ruleName: "final",
+    outbound: "direct",
+    reason: "Не сработало ни одно правило — итоговый final отправляет напрямую",
+  };
+}
+
+/**
+ * Детектор конфликтов: ищет правила, перекрытые предыдущими.
+ * Простая эвристика: если правило-кандидат полностью перекрывается ранее идущим
+ * по доменам/суффиксам/CIDR — отмечаем конфликт.
+ */
+export function detectRuleConflicts(rules) {
+  const list = Array.isArray(rules) ? rules : [];
+  const conflicts = [];
+
+  for (let i = 1; i < list.length; i += 1) {
+    const cur = list[i];
+    if (!cur?.enabled) continue;
+
+    for (let j = 0; j < i; j += 1) {
+      const prev = list[j];
+      if (!prev?.enabled) continue;
+
+      // Если outbound одинаковый — это не "конфликт", это дубликат
+      const sameOutbound = prev.outbound === cur.outbound;
+
+      // Проверка перекрытия доменов
+      const overlaps = [];
+
+      // Точные домены покрываются prev.suffix
+      for (const d of cur.domains || []) {
+        if ((prev.domainSuffixes || []).some((s) => hostMatchesSuffix(d, s))) {
+          overlaps.push({
+            kind: "domain",
+            value: d,
+            by: `суффикс ${(prev.domainSuffixes || []).find((s) => hostMatchesSuffix(d, s))}`,
+          });
+        }
+        if ((prev.domains || []).includes(d)) {
+          overlaps.push({ kind: "domain", value: d, by: "точный домен" });
+        }
+      }
+
+      // Суффиксы покрываются более общим суффиксом prev
+      for (const s of cur.domainSuffixes || []) {
+        if (
+          (prev.domainSuffixes || []).some(
+            (ps) => hostMatchesSuffix(s, ps) && ps !== s,
+          )
+        ) {
+          overlaps.push({
+            kind: "suffix",
+            value: s,
+            by: "более общий суффикс",
+          });
+        }
+      }
+
+      // CIDR
+      for (const c of cur.ipCidrs || []) {
+        if ((prev.ipCidrs || []).includes(c)) {
+          overlaps.push({ kind: "cidr", value: c, by: "тот же CIDR" });
+        }
+      }
+
+      if (overlaps.length) {
+        conflicts.push({
+          ruleId: cur.id,
+          ruleIndex: i,
+          ruleName: cur.name,
+          conflictWithId: prev.id,
+          conflictWithIndex: j,
+          conflictWithName: prev.name,
+          severity: sameOutbound ? "info" : "warning",
+          overlaps,
+        });
+      }
+    }
+  }
+
+  return conflicts;
+}

src/server/sharedProxy.js

@@ -0,0 +1,94 @@
+function normalizeControlUrl(value) {
+  const raw = String(value || "").trim();
+  if (!raw) return "";
+  const withProtocol = /^https?:\/\//i.test(raw) ? raw : `http://${raw}`;
+  const url = new URL(withProtocol);
+  if (!["http:", "https:"].includes(url.protocol)) {
+    throw new Error("Gateway URL must use http or https");
+  }
+  url.hash = "";
+  url.search = "";
+  url.pathname = url.pathname.replace(/\/api\/shared-proxy\/?$/, "") || "/";
+  return url.toString().replace(/\/$/, "");
+}
+
+function proxyHostFromHeader(hostHeader) {
+  const raw = String(hostHeader || "").trim();
+  if (!raw) return "";
+  if (raw.startsWith("[")) {
+    const end = raw.indexOf("]");
+    return end > 0 ? raw.slice(1, end) : "";
+  }
+  return raw.split(":")[0];
+}
+
+function normalizeProxyInfo(proxy) {
+  if (!proxy || typeof proxy !== "object") return null;
+  const host = String(proxy.host || "").trim();
+  const port = Number.parseInt(proxy.port, 10);
+  const protocol = proxy.protocol === "http" ? "http" : "socks5";
+  if (!host || !Number.isInteger(port) || port <= 0 || port > 65535) {
+    return null;
+  }
+  return { host, port, protocol };
+}
+
+export function buildSharedProxyInfo({
+  appMode,
+  proxyPort,
+  running,
+  hostHeader,
+  sharedProxyHost,
+}) {
+  const host = String(sharedProxyHost || "").trim() || proxyHostFromHeader(hostHeader);
+  const port = Number.parseInt(proxyPort, 10);
+  const available =
+    appMode === "gateway" &&
+    Boolean(running) &&
+    host &&
+    Number.isInteger(port) &&
+    port > 0 &&
+    port <= 65535;
+
+  const proxy = available
+    ? {
+        host,
+        port,
+        protocol: "socks5",
+        httpUrl: `http://${host}:${port}`,
+        socksUrl: `socks5://${host}:${port}`,
+      }
+    : null;
+
+  return {
+    success: true,
+    available,
+    mode: appMode,
+    proxy,
+  };
+}
+
+export async function checkSharedProxyGateway(controlUrl, fetchImpl = fetch) {
+  const baseUrl = normalizeControlUrl(controlUrl);
+  const response = await fetchImpl(`${baseUrl}/api/shared-proxy`, {
+    headers: { accept: "application/json" },
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok || data.success === false) {
+    throw new Error(data.error || `Gateway returned ${response.status}`);
+  }
+  if (!data.available) {
+    throw new Error("Gateway shared proxy is not available");
+  }
+
+  const sharedProxy = normalizeProxyInfo(data.proxy);
+  if (!sharedProxy) {
+    throw new Error("Gateway returned invalid shared proxy settings");
+  }
+
+  return {
+    sharedProxyEnabled: true,
+    sharedProxyControlUrl: baseUrl,
+    sharedProxy,
+  };
+}

src/server/singbox.js

@@ -1,45 +1,108 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import { settings } from './config.js';
+import fs from "node:fs";
+import path from "node:path";
+import { settings } from "./config.js";
+import {
+  MIXED_INBOUND,
+  TPROXY_INBOUND,
+  normalizeCidr,
+  readDeviceProfiles,
+} from "./devices.js";
+import { readClientSettings } from "./clientSettings.js";
 
-const PROXY_TYPES = new Set(['vless', 'vmess', 'trojan', 'shadowsocks', 'hysteria2']);
-const CUSTOM_OUTBOUNDS = new Set(['direct', 'vpn', 'block']);
+const PROXY_TYPES = new Set([
+  "vless",
+  "vmess",
+  "trojan",
+  "shadowsocks",
+  "hysteria2",
+]);
+const CUSTOM_OUTBOUNDS = new Set(["direct", "vpn", "block"]);
 
 function clone(value) {
   return JSON.parse(JSON.stringify(value));
 }
 
 function findOutbound(subscriptionConfig, selectedTag) {
-  const outbounds = Array.isArray(subscriptionConfig?.outbounds) ? subscriptionConfig.outbounds : [];
-  return outbounds.find((outbound) => outbound.tag === selectedTag && PROXY_TYPES.has(outbound.type));
+  const outbounds = Array.isArray(subscriptionConfig?.outbounds)
+    ? subscriptionConfig.outbounds
+    : [];
+  const exact = outbounds.find(
+    (outbound) =>
+      outbound.tag === selectedTag && PROXY_TYPES.has(outbound.type),
+  );
+  if (exact) return exact;
+
+  const trimmedTag = String(selectedTag || "").trim();
+  return outbounds.find(
+    (outbound) =>
+      String(outbound.tag || "").trim() === trimmedTag &&
+      PROXY_TYPES.has(outbound.type),
+  );
 }
 
-function ruleSets() {
-  if (!settings.routingRuDirect) return [];
+function readCustomRuleSets() {
+  try {
+    if (!fs.existsSync(settings.customRuleSetsPath)) return [];
+    const data = JSON.parse(
+      fs.readFileSync(settings.customRuleSetsPath, "utf8"),
+    );
+    return Array.isArray(data) ? data : [];
+  } catch {
+    return [];
+  }
+}
 
-  return [
-    {
-      type: 'remote',
-      tag: 'geoip-ru',
-      format: 'binary',
-      url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geoip@rule-set/geoip-ru.srs',
-      download_detour: 'direct',
-    },
-    {
-      type: 'remote',
-      tag: 'geosite-category-ru',
-      format: 'binary',
-      url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-category-ru.srs',
-      download_detour: 'direct',
-    },
+function ruleSetDownloadDetour(vpnTag) {
+  const detour = String(settings.ruleSetDownloadDetour || "vpn").trim();
+  if (!detour || detour === "vpn") return vpnTag;
+  return detour;
+}
+
+function ruleSets(customRuleSets = [], vpnTag = "direct") {
+  const downloadDetour = ruleSetDownloadDetour(vpnTag);
+  const builtIn = settings.routingRuDirect
+    ? [
+        {
+          type: "remote",
+          tag: "geoip-ru",
+          format: "binary",
+          url: "https://cdn.jsdelivr.net/gh/SagerNet/sing-geoip@rule-set/geoip-ru.srs",
+          download_detour: downloadDetour,
+        },
+        {
+          type: "remote",
+          tag: "geosite-category-ru",
+          format: "binary",
+          url: "https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-category-ru.srs",
+          download_detour: downloadDetour,
+        },
+      ]
+    : [];
+
+  const custom = (Array.isArray(customRuleSets) ? customRuleSets : [])
+    .filter((rs) => rs.tag && rs.url)
+    .map((rs) => ({
+      type: "remote",
+      tag: String(rs.tag).trim(),
+      format: rs.format || "binary",
+      url: String(rs.url).trim(),
+      download_detour: downloadDetour,
+    }));
+
+  // Пользовательские rule-sets не должны дублировать встроенные
+  const builtInTags = new Set(builtIn.map((rs) => rs.tag));
+  const merged = [
+    ...builtIn,
+    ...custom.filter((rs) => !builtInTags.has(rs.tag)),
   ];
+  return merged;
 }
 
 function uniqueClean(values) {
   return Array.from(
     new Set(
       (Array.isArray(values) ? values : [])
-        .map((value) => String(value || '').trim())
+        .map((value) => String(value || "").trim())
         .filter(Boolean),
     ),
   );
@@ -51,17 +114,19 @@ function parsePorts(values) {
     .filter((value) => Number.isInteger(value) && value > 0 && value <= 65535);
 }
 
-function toSingboxRule(customRule, vpnTag) {
+function toSingboxRule(customRule, vpnTag, baseRule = {}) {
   if (!customRule?.enabled) return null;
   if (!CUSTOM_OUTBOUNDS.has(customRule.outbound)) return null;
 
-  const rule = {};
+  const rule = { ...baseRule };
   const domains = uniqueClean(customRule.domains);
   const domainSuffixes = uniqueClean(customRule.domainSuffixes);
   const domainKeywords = uniqueClean(customRule.domainKeywords);
   const ipCidrs = uniqueClean(customRule.ipCidrs);
   const ports = parsePorts(customRule.ports);
-  const networks = uniqueClean(customRule.networks).filter((network) => ['tcp', 'udp'].includes(network));
+  const networks = uniqueClean(customRule.networks).filter((network) =>
+    ["tcp", "udp"].includes(network),
+  );
 
   if (domains.length) rule.domain = domains;
   if (domainSuffixes.length) rule.domain_suffix = domainSuffixes;
@@ -70,59 +135,188 @@ function toSingboxRule(customRule, vpnTag) {
   if (ports.length) rule.port = ports;
   if (networks.length) rule.network = networks;
 
+  const ruleSetsRef = uniqueClean(customRule.ruleSets);
+  if (ruleSetsRef.length) rule.rule_set = ruleSetsRef;
+
   if (
     !rule.domain &&
     !rule.domain_suffix &&
     !rule.domain_keyword &&
     !rule.ip_cidr &&
     !rule.port &&
-    !rule.network
+    !rule.network &&
+    !rule.rule_set
   ) {
     return null;
   }
 
-  rule.outbound = customRule.outbound === 'vpn' ? vpnTag : customRule.outbound;
+  rule.outbound = customRule.outbound === "vpn" ? vpnTag : customRule.outbound;
   return rule;
 }
 
-function customRouteRules(customRules, vpnTag) {
+function customRouteRules(customRules, vpnTag, baseRule = {}) {
   return (Array.isArray(customRules) ? customRules : [])
-    .map((rule) => toSingboxRule(rule, vpnTag))
+    .map((rule) => toSingboxRule(rule, vpnTag, baseRule))
     .filter(Boolean);
 }
 
-function routeRules(customRules, vpnTag) {
+// ─── Device rules (маршрутизация по source IP) ──────────────────────────────
+
+function modeOutbound(mode, vpnTag) {
+  if (mode === "vpn") return vpnTag;
+  if (mode === "direct" || mode === "block") return mode;
+  return null;
+}
+
+function deviceDefaultRouteRule(device, vpnTag) {
+  if (!device?.enabled) return null;
+  const outbound = modeOutbound(device.mode, vpnTag);
+  if (!outbound) return null;
+
+  const cidr = normalizeCidr(device.ip);
+  if (!cidr) return null;
+
+  return {
+    inbound: [TPROXY_INBOUND],
+    source_ip_cidr: [cidr],
+    outbound,
+  };
+}
+
+function deviceDefaultRouteRules(devices, vpnTag) {
+  return (Array.isArray(devices) ? devices : [])
+    .map((device) => deviceDefaultRouteRule(device, vpnTag))
+    .filter(Boolean);
+}
+
+function inboundDefaultRule(inbound, mode, vpnTag) {
+  const outbound = modeOutbound(mode, vpnTag);
+  if (!outbound) return null;
+  return { inbound: [inbound], outbound };
+}
+
+function ruDirectRule() {
+  if (!settings.routingRuDirect) return null;
+  return {
+    rule_set: ["geoip-ru", "geosite-category-ru"],
+    outbound: "direct",
+  };
+}
+
+function routeRules(customRules, vpnTag, { includeTransparent = true } = {}) {
+  const deviceProfiles = readDeviceProfiles();
   const rules = [
     {
       ip_is_private: true,
-      outbound: 'direct',
+      outbound: "direct",
     },
   ];
 
+  // Global rules apply to every inbound before contextual fallbacks.
   rules.push(...customRouteRules(customRules, vpnTag));
 
-  if (settings.routingRuDirect) {
-    rules.push({
-      rule_set: ['geoip-ru', 'geosite-category-ru'],
-      outbound: 'direct',
-    });
+  const ruRule = ruDirectRule();
+  if (ruRule) rules.push(ruRule);
+
+  if (includeTransparent) {
+    // Device defaults are only transparent-gateway fallbacks after global rules.
+    rules.push(...deviceDefaultRouteRules(deviceProfiles.devices, vpnTag));
+  }
+
+  const proxyFallback = inboundDefaultRule(
+    MIXED_INBOUND,
+    deviceProfiles.proxyDefaultMode,
+    vpnTag,
+  );
+  if (proxyFallback) rules.push(proxyFallback);
+
+  if (includeTransparent) {
+    const transparentFallback = inboundDefaultRule(
+      TPROXY_INBOUND,
+      deviceProfiles.defaultTransparentMode,
+      vpnTag,
+    );
+    if (transparentFallback) rules.push(transparentFallback);
   }
 
   return rules;
 }
 
-export function buildGatewayConfig(subscriptionConfig, selectedTag) {
-  const selectedOutbound = findOutbound(subscriptionConfig, selectedTag);
-  if (!selectedOutbound) {
-    throw new Error(`Selected outbound not found: ${selectedTag}`);
+function sharedProxyOutbound(sharedProxy) {
+  if (!sharedProxy?.host || !sharedProxy?.port) return null;
+  if (sharedProxy.protocol === "http") {
+    return {
+      type: "http",
+      tag: "shared-proxy",
+      server: sharedProxy.host,
+      server_port: sharedProxy.port,
+    };
+  }
+  return {
+    type: "socks",
+    tag: "shared-proxy",
+    server: sharedProxy.host,
+    server_port: sharedProxy.port,
+    version: "5",
+  };
+}
+
+export function buildGatewayConfig(
+  subscriptionConfig,
+  selectedTag,
+  { bypassAll = false } = {},
+) {
+  const customRuleSets = readCustomRuleSets();
+  const clientMode = settings.appMode === "client";
+  const clientSettings = clientMode ? readClientSettings() : null;
+  const sharedOutbound =
+    clientMode && clientSettings?.sharedProxyEnabled
+      ? sharedProxyOutbound(clientSettings.sharedProxy)
+      : null;
+  const directOnlyClient = clientMode && clientSettings?.homeBypassEnabled;
+  const selectedOutbound = sharedOutbound
+    ? null
+    : findOutbound(subscriptionConfig, selectedTag);
+  if (!sharedOutbound && !directOnlyClient && !selectedOutbound) {
+    throw new Error(`Outbound не найден: ${selectedTag}`);
   }
 
-  const vpnOutbound = clone(selectedOutbound);
-  if (!vpnOutbound.tag) vpnOutbound.tag = 'vpn-out';
-  if (vpnOutbound.type === 'vless' && !vpnOutbound.packet_encoding) {
-    vpnOutbound.packet_encoding = 'xudp';
+  const vpnOutbound = selectedOutbound ? clone(selectedOutbound) : null;
+  if (vpnOutbound && !vpnOutbound.tag) vpnOutbound.tag = "vpn-out";
+  if (vpnOutbound?.type === "vless" && !vpnOutbound.packet_encoding) {
+    vpnOutbound.packet_encoding = "xudp";
   }
 
+  const clientOutbound = sharedOutbound
+    ? sharedOutbound.tag
+    : clientSettings?.homeBypassEnabled
+      ? "direct"
+      : vpnOutbound.tag;
+  const mixedProxyPort = clientSettings?.proxyPort || settings.proxyPort;
+  const proxyOnlyRules = [{ inbound: [MIXED_INBOUND], outbound: clientOutbound }];
+  const inbounds = [
+    ...(clientMode
+      ? []
+      : [
+          {
+            type: "tproxy",
+            tag: "tproxy-in",
+            listen: "::",
+            listen_port: settings.tproxyPort,
+            sniff: true,
+            sniff_override_destination: true,
+          },
+        ]),
+    {
+      type: "mixed",
+      tag: "mixed-in",
+      listen: settings.bindIp,
+      listen_port: mixedProxyPort,
+      sniff: true,
+      set_system_proxy: false,
+    },
+  ];
+
   return {
     log: {
       level: settings.logLevel,
@@ -137,39 +331,47 @@ export function buildGatewayConfig(subscriptionConfig, selectedTag) {
     dns: {
       independent_cache: true,
     },
-    inbounds: [
-      {
-        type: 'tproxy',
-        tag: 'tproxy-in',
-        listen: '::',
-        listen_port: settings.tproxyPort,
-        sniff: true,
-        sniff_override_destination: true,
-      },
-      {
-        type: 'mixed',
-        tag: 'mixed-in',
-        listen: settings.bindIp,
-        listen_port: settings.proxyPort,
-        sniff: true,
-        set_system_proxy: false,
-      },
-    ],
+    inbounds,
     outbounds: [
-      vpnOutbound,
-      { type: 'direct', tag: 'direct' },
-      { type: 'block', tag: 'block' },
+      ...(sharedOutbound ? [sharedOutbound] : vpnOutbound ? [vpnOutbound] : []),
+      { type: "direct", tag: "direct" },
+      { type: "block", tag: "block" },
     ],
     route: {
-      rule_set: ruleSets(),
-      rules: routeRules(subscriptionConfig.customRules, vpnOutbound.tag),
-      final: vpnOutbound.tag,
-      auto_detect_interface: true,
+      rule_set: bypassAll || clientMode ? [] : ruleSets(customRuleSets, vpnOutbound.tag),
+      rules: bypassAll
+        ? [{ ip_is_private: true, outbound: "direct" }]
+        : clientMode
+          ? proxyOnlyRules
+        : routeRules(subscriptionConfig.customRules, vpnOutbound.tag, {
+            includeTransparent: !clientMode,
+          }),
+      final: "direct",
+      ...(clientMode ? {} : { auto_detect_interface: true }),
     },
   };
 }
 
 export function writeSingboxConfig(config) {
   fs.mkdirSync(path.dirname(settings.configPath), { recursive: true });
-  fs.writeFileSync(settings.configPath, JSON.stringify(config, null, 2), 'utf8');
+  fs.writeFileSync(
+    settings.configPath,
+    JSON.stringify(config, null, 2),
+    "utf8",
+  );
+}
+
+export function readSingboxConfig() {
+  if (!fs.existsSync(settings.configPath)) return null;
+  try {
+    return JSON.parse(fs.readFileSync(settings.configPath, "utf8"));
+  } catch {
+    return null;
+  }
+}
+
+export function removeSingboxConfig() {
+  if (fs.existsSync(settings.configPath)) {
+    fs.rmSync(settings.configPath);
+  }
 }

src/server/tproxySourceBypass.js

@@ -0,0 +1,124 @@
+import { spawnSync } from "node:child_process";
+import { settings } from "./config.js";
+import { deviceCidrs, normalizeCidr } from "./devices.js";
+
+const DEFAULT_NAT_BYPASS_CIDRS =
+  "0.0.0.0/8 10.0.0.0/8 100.64.0.0/10 127.0.0.0/8 169.254.0.0/16 172.16.0.0/12 192.168.0.0/16 224.0.0.0/4 240.0.0.0/4";
+
+function splitCidrs(value) {
+  return String(value || "")
+    .split(/[\s,]+/)
+    .map((item) => normalizeCidr(item))
+    .filter(Boolean);
+}
+
+function unique(list) {
+  return [...new Set(list)];
+}
+
+export function sourceBypassCidrs(
+  profiles,
+  envCidrs = process.env.TPROXY_BYPASS_SOURCE_CIDRS || "",
+) {
+  return unique([
+    ...splitCidrs(envCidrs),
+    ...deviceCidrs(profiles?.devices || [], "bypass"),
+  ]);
+}
+
+export function buildSourceBypassIptablesCommands(
+  cidrs,
+  {
+    chain = settings.tproxySourceBypassChain,
+    forwardChain = settings.tproxySourceForwardChain,
+    natChain = settings.tproxySourceNatChain,
+    natBypassCidrs = splitCidrs(
+      process.env.BYPASS_CIDRS || DEFAULT_NAT_BYPASS_CIDRS,
+    ),
+  } = {},
+) {
+  return [
+    ["-w", "-t", "mangle", "-F", chain],
+    ["-w", "-F", forwardChain],
+    ["-w", "-t", "nat", "-F", natChain],
+    ...cidrs.map((cidr) => [
+      "-w",
+      "-t",
+      "mangle",
+      "-A",
+      chain,
+      "-s",
+      cidr,
+      "-j",
+      "ACCEPT",
+    ]),
+    ...cidrs.flatMap((cidr) => [
+      ["-w", "-A", forwardChain, "-s", cidr, "-j", "ACCEPT"],
+      [
+        "-w",
+        "-A",
+        forwardChain,
+        "-d",
+        cidr,
+        "-m",
+        "conntrack",
+        "--ctstate",
+        "RELATED,ESTABLISHED",
+        "-j",
+        "ACCEPT",
+      ],
+    ]),
+    ...natBypassCidrs.map((cidr) => [
+      "-w",
+      "-t",
+      "nat",
+      "-A",
+      natChain,
+      "-d",
+      cidr,
+      "-j",
+      "RETURN",
+    ]),
+    ...cidrs.map((cidr) => [
+      "-w",
+      "-t",
+      "nat",
+      "-A",
+      natChain,
+      "-s",
+      cidr,
+      "-j",
+      "MASQUERADE",
+    ]),
+  ];
+}
+
+export function syncTproxySourceBypass(profiles, options = {}) {
+  if (settings.appMode !== "gateway") {
+    return { success: true, skipped: true, cidrs: [] };
+  }
+
+  const cidrs = sourceBypassCidrs(
+    profiles,
+    options.envCidrs ?? process.env.TPROXY_BYPASS_SOURCE_CIDRS,
+  );
+  const commands = buildSourceBypassIptablesCommands(cidrs, options);
+
+  for (const args of commands) {
+    const result = spawnSync("iptables", args, {
+      encoding: "utf8",
+      timeout: 1000,
+    });
+    if (result.error || result.status !== 0) {
+      return {
+        success: false,
+        cidrs,
+        error:
+          result.error?.message ||
+          (result.stderr || result.stdout || "iptables command failed").trim(),
+      };
+    }
+  }
+
+  return { success: true, cidrs };
+}

src/web/App.jsx

@@ -1,164 +1,311 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import './styles.css';
+import { api } from './api.js';
+import { Topbar } from './components/Topbar.jsx';
+import { Sidebar } from './components/Sidebar.jsx';
+import { StatusPane } from './components/StatusPane.jsx';
+import { OverviewPage } from './components/OverviewPage.jsx';
+import { ClientOverviewPage } from './components/ClientOverviewPage.jsx';
+import { ServersPage } from './components/ServersPage.jsx';
+import { RoutingPage } from './components/RoutingPage.jsx';
+import { LogsPage } from './components/LogsPage.jsx';
+import { SettingsPage } from './components/SettingsPage.jsx';
+import { ConfigViewer } from './components/ConfigViewer.jsx';
+import { Toasts } from './components/Toasts.jsx';
 
-function formatBytes(value) {
-  if (!value) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
-  let size = value;
-  let index = 0;
-  while (size >= 1024 && index < units.length - 1) {
-    size /= 1024;
-    index += 1;
-  }
-  return `${size.toFixed(index === 0 ? 0 : 1)} ${units[index]}`;
-}
+const ROLLBACK_WINDOW_MS = 12_000;
 
-function maskUrl(value) {
-  if (!value) return '';
-  try {
-    const url = new URL(value);
-    return `${url.hostname}/...`;
-  } catch {
-    return value.length > 48 ? `${value.slice(0, 48)}...` : value;
-  }
+function getInitialPage() {
+  const hash = window.location.hash.replace('#/', '').replace('#', '');
+  const valid = ['overview', 'servers', 'routing', 'logs', 'settings'];
+  return valid.includes(hash) ? hash : 'overview';
 }
 
 function App() {
+  const [page, setPage] = useState(getInitialPage());
   const [state, setState] = useState(null);
   const [subscriptionUrl, setSubscriptionUrl] = useState('');
   const [servers, setServers] = useState([]);
   const [customRules, setCustomRules] = useState([]);
+  const [devicesConfig, setDevicesConfig] = useState({
+    defaultTransparentMode: 'vpn',
+    proxyDefaultMode: 'vpn',
+    devices: [],
+  });
+  const [clientSettings, setClientSettings] = useState({
+    homeBypassEnabled: false,
+    sharedProxyEnabled: false,
+  });
   const [selectedTag, setSelectedTag] = useState('');
+  const [pendingTag, setPendingTag] = useState('');
   const [busy, setBusy] = useState(false);
-  const [log, setLog] = useState([]);
   const [error, setError] = useState('');
   const [rulesSaveStatus, setRulesSaveStatus] = useState('saved');
+  const [configOpen, setConfigOpen] = useState(false);
+  const [pings, setPings] = useState({});
+  const [toasts, setToasts] = useState([]);
+  const [applyStatus, setApplyStatus] = useState('idle'); // idle | applying | error
+  const [rollbackOffer, setRollbackOffer] = useState(null);
+
   const rulesDirtyRef = useRef(false);
   const rulesSaveTimerRef = useRef(null);
   const rulesRevisionRef = useRef(0);
+  const rollbackTimerRef = useRef(null);
 
-  const userTraffic = useMemo(() => {
-    const info = state?.userInfo;
-    if (!info) return 'нет данных';
-    const used = formatBytes((info.upload || 0) + (info.download || 0));
-    const total = info.total ? formatBytes(info.total) : 'без лимита';
-    return `${used} / ${total}`;
-  }, [state]);
-
-  function addLog(message) {
-    const time = new Date().toLocaleTimeString('ru-RU', { hour12: false });
-    setLog((items) => [{ time, message }, ...items].slice(0, 8));
+  function pushToast(toast) {
+    const id = `t-${Date.now()}-${Math.random()}`;
+    setToasts((prev) => [...prev, { id, ...toast }]);
+  }
+  function dismissToast(id) {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
   }
 
-  async function loadState() {
-    const response = await fetch('/api/state');
-    const data = await response.json();
-    setState(data);
-    setServers(data.servers || []);
-    if (!rulesDirtyRef.current) {
-      setCustomRules(data.customRules || []);
-    }
-    setSelectedTag(data.selectedTag || '');
-    if (data.subscriptionUrl && !subscriptionUrl) setSubscriptionUrl(data.subscriptionUrl);
+  function navigate(p) {
+    setPage(p);
+    window.location.hash = `#/${p}`;
   }
 
   useEffect(() => {
-    loadState().catch(() => {});
+    function onHash() { setPage(getInitialPage()); }
+    window.addEventListener('hashchange', onHash);
+    return () => window.removeEventListener('hashchange', onHash);
+  }, []);
+
+  async function loadState() {
+    const data = await api.state();
+    setState(data);
+    setServers(data.servers || []);
+    if (!rulesDirtyRef.current) setCustomRules(data.customRules || []);
+    setDevicesConfig(data.devicesConfig || {
+      defaultTransparentMode: 'vpn',
+      proxyDefaultMode: 'vpn',
+      devices: data.devices || [],
+    });
+    setClientSettings(data.clientSettings || { homeBypassEnabled: false, sharedProxyEnabled: false });
+    setSelectedTag((prev) => prev || data.selectedTag || '');
+    setPendingTag((prev) => prev || data.selectedTag || '');
+  }
+
+  useEffect(() => {
+    loadState().catch((err) => setError(err.message));
     const timer = setInterval(() => loadState().catch(() => {}), 5000);
     return () => clearInterval(timer);
   }, []);
 
   useEffect(() => {
-    return () => {
-      if (rulesSaveTimerRef.current) clearTimeout(rulesSaveTimerRef.current);
-    };
+    if (state?.mode === 'client' && page !== 'overview') {
+      navigate('overview');
+    }
+  }, [state?.mode, page]);
+
+  useEffect(() => () => {
+    if (rulesSaveTimerRef.current) clearTimeout(rulesSaveTimerRef.current);
+    if (rollbackTimerRef.current) clearTimeout(rollbackTimerRef.current);
   }, []);
 
-  async function fetchServers() {
+  async function withBusy(label, fn, { quiet = false } = {}) {
     setBusy(true);
     setError('');
-    addLog(`SYNC ${maskUrl(subscriptionUrl)}`);
-
     try {
-      const response = await fetch('/api/subscription/fetch', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ url: subscriptionUrl }),
-      });
-      const data = await response.json();
-      if (!response.ok || !data.success) throw new Error(data.error || 'sync failed');
+      const result = await fn();
+      if (!quiet && label) pushToast({ kind: 'success', title: label });
+      return result;
+    } catch (err) {
+      setError(err.message);
+      pushToast({ kind: 'danger', title: 'Ошибка', message: err.message, duration: 6000 });
+      throw err;
+    } finally {
+      setBusy(false);
+    }
+  }
 
+  // === Subscription ===
+  async function fetchSubscription() {
+    return withBusy('Подписка обновлена', async () => {
+      const data = await api.subscription.fetch(subscriptionUrl || state?.subscriptionHost || '');
       setServers(data.servers || []);
-      setSelectedTag(data.servers?.[0]?.tag || '');
-      addLog(`FOUND ${data.servers.length} servers`);
+      if (!selectedTag && data.servers?.length) {
+        setSelectedTag(data.servers[0].tag);
+        setPendingTag(data.servers[0].tag);
+      }
       await loadState();
-    } catch (err) {
-      setError(err.message);
-      addLog(`ERROR ${err.message}`);
-    } finally {
-      setBusy(false);
-    }
+    });
   }
 
-  async function applyServer() {
-    setBusy(true);
-    setError('');
-    addLog(`APPLY ${selectedTag}`);
+  async function forgetSubscription() {
+    if (!confirm('Удалить подписку и остановить sing-box?')) return;
+    return withBusy('Подписка удалена', async () => {
+      await api.subscription.forget();
+      setSubscriptionUrl('');
+      setServers([]);
+      setSelectedTag('');
+      setPendingTag('');
+      await loadState();
+    });
+  }
 
+  // === Apply with rollback offer ===
+  async function applyServer(tag) {
+    const target = tag || selectedTag;
+    if (!target) return;
+    const previous = state?.selectedTag;
+    setApplyStatus('applying');
     try {
-      const response = await fetch('/api/apply', {
-        method: 'POST',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ selectedTag }),
+      await withBusy('Сервер применён', async () => {
+        await api.apply(target);
+        await loadState();
       });
-      const data = await response.json();
-      if (!response.ok || !data.success) throw new Error(data.error || 'apply failed');
+      setApplyStatus('idle');
 
-      addLog(`SING-BOX ${data.singboxRunning ? 'RUNNING' : 'STOPPED'}`);
-      await loadState();
-    } catch (err) {
-      setError(err.message);
-      addLog(`ERROR ${err.message}`);
-    } finally {
-      setBusy(false);
+      if (previous && previous !== target) {
+        setRollbackOffer({ from: target, to: previous, expiresAt: Date.now() + ROLLBACK_WINDOW_MS });
+        if (rollbackTimerRef.current) clearTimeout(rollbackTimerRef.current);
+        rollbackTimerRef.current = setTimeout(() => setRollbackOffer(null), ROLLBACK_WINDOW_MS);
+      }
+    } catch {
+      setApplyStatus('error');
     }
   }
 
+  async function rollback() {
+    if (rollbackTimerRef.current) clearTimeout(rollbackTimerRef.current);
+    setRollbackOffer(null);
+    return withBusy('Откат выполнен', async () => {
+      const data = await api.rollback();
+      setSelectedTag(data.selectedTag);
+      setPendingTag(data.selectedTag);
+      await loadState();
+    });
+  }
+
+  // === sing-box control ===
+  async function stopSingbox() {
+    if (!confirm('Остановить sing-box? Трафик через шлюз перестанет ходить.')) return;
+    return withBusy('Остановлено', async () => { await api.singbox.stop(); await loadState(); });
+  }
+  async function restartSingbox() {
+    return withBusy('Перезапущено', async () => { await api.singbox.restart(); await loadState(); });
+  }
+  async function clearConfig() {
+    if (!confirm('Сбросить config sing-box и остановить процесс?')) return;
+    return withBusy('Config сброшен', async () => {
+      await api.singbox.clear();
+      setSelectedTag('');
+      setPendingTag('');
+      await loadState();
+    });
+  }
+
+  async function toggleBypass() {
+    const next = !state?.bypassMode;
+    return withBusy(
+      next ? 'Обход правил включён — весь трафик напрямую' : 'Обход правил отключён',
+      async () => {
+        await api.bypass(next);
+        await loadState();
+      },
+    );
+  }
+
+  async function flushDirectCache() {
+    return withBusy('Bypass-кэш сброшен', async () => {
+      await api.directCache.flush();
+      await loadState();
+    });
+  }
+
+  // === Devices ===
+  async function saveDevicesConfig(nextConfig) {
+    try {
+      const data = await api.devices.save(nextConfig);
+      setDevicesConfig({
+        defaultTransparentMode: data.defaultTransparentMode || data.defaultMode || 'vpn',
+        proxyDefaultMode: data.proxyDefaultMode || 'vpn',
+        devices: data.devices || [],
+      });
+      setState((prev) => prev ? {
+        ...prev,
+        devicesUpdatedAt: data.devicesUpdatedAt,
+        sourceBypassCidrs: data.sourceBypassCidrs,
+      } : prev);
+      if (data.sourceBypassResult && data.sourceBypassResult.success === false) {
+        pushToast({
+          kind: 'warning',
+          title: 'Bypass сохранён, но не применён',
+          message: data.sourceBypassResult.error,
+          duration: 7000,
+        });
+      }
+    } catch (err) {
+      pushToast({ kind: 'danger', title: 'Не удалось сохранить устройства', message: err.message });
+    }
+  }
+
+  function addDevice() {
+    const nextConfig = {
+      ...devicesConfig,
+      devices: [
+        ...devicesConfig.devices,
+        { id: `dev-${Date.now()}`, name: 'Новое устройство', enabled: true, ip: '', mac: '', mode: 'direct', lastSeen: null },
+      ],
+    };
+    setDevicesConfig(nextConfig);
+    saveDevicesConfig(nextConfig);
+  }
+
+  function updateDevice(id, patch) {
+    const nextConfig = {
+      ...devicesConfig,
+      devices: devicesConfig.devices.map((d) => (d.id === id ? { ...d, ...patch } : d)),
+    };
+    setDevicesConfig(nextConfig);
+    saveDevicesConfig(nextConfig);
+  }
+
+  function removeDevice(id) {
+    const nextConfig = {
+      ...devicesConfig,
+      devices: devicesConfig.devices.filter((d) => d.id !== id),
+    };
+    setDevicesConfig(nextConfig);
+    saveDevicesConfig(nextConfig);
+  }
+
+  function updateDeviceDefaults(patch) {
+    const nextConfig = { ...devicesConfig, ...patch };
+    setDevicesConfig(nextConfig);
+    saveDevicesConfig(nextConfig);
+  }
+
+  async function saveClientSettings(nextSettings) {
+    return withBusy(null, async () => {
+      const data = await api.clientSettings.save(nextSettings);
+      setClientSettings(data.clientSettings || { homeBypassEnabled: false, sharedProxyEnabled: false });
+      await loadState();
+    }, { quiet: true });
+  }
+
+  async function checkSharedProxy(url) {
+    return withBusy('Общий proxy подключён', async () => {
+      const data = await api.clientSettings.checkSharedProxy(url);
+      setClientSettings(data.clientSettings || { homeBypassEnabled: false, sharedProxyEnabled: false });
+      await loadState();
+    });
+  }
+
+  // === Rules CRUD ===
   function emptyRule() {
     return {
       id: `rule-${Date.now()}`,
-      name: 'Новый список',
+      name: 'Новое правило',
       enabled: true,
       outbound: 'direct',
-      domains: [],
-      domainSuffixes: [],
-      domainKeywords: [],
-      ipCidrs: [],
-      ports: [],
-      networks: [],
+      domains: [], domainSuffixes: [], domainKeywords: [],
+      ipCidrs: [], ports: [], networks: [],
     };
   }
 
-  function listToText(value) {
-    return Array.isArray(value) ? value.join('\n') : '';
-  }
-
-  function textToList(value) {
-    return value
-      .split(/\r?\n|,/)
-      .map((item) => item.trim())
-      .filter(Boolean);
-  }
-
-  function updateRule(id, patch) {
-    setCustomRules((rules) => {
-      const nextRules = rules.map((rule) => (rule.id === id ? { ...rule, ...patch } : rule));
-      queueRulesSave(nextRules);
-      return nextRules;
-    });
-  }
-
   function queueRulesSave(nextRules) {
     rulesDirtyRef.current = true;
     const revision = rulesRevisionRef.current + 1;
@@ -166,42 +313,28 @@ function App() {
     setRulesSaveStatus('pending');
 
     if (rulesSaveTimerRef.current) clearTimeout(rulesSaveTimerRef.current);
-    rulesSaveTimerRef.current = setTimeout(() => {
-      saveRules(nextRules, { silent: true, revision });
-    }, 700);
+    rulesSaveTimerRef.current = setTimeout(() => saveRules(nextRules, { silent: true, revision }), 700);
   }
 
   async function saveRules(nextRules = customRules, options = {}) {
     const { silent = false, revision = rulesRevisionRef.current + 1 } = options;
-    if (!silent) setBusy(true);
     setError('');
-    if (!silent) addLog('SAVE ROUTING RULES');
     setRulesSaveStatus('saving');
-
     try {
-      const response = await fetch('/api/rules', {
-        method: 'PUT',
-        headers: { 'content-type': 'application/json' },
-        body: JSON.stringify({ rules: nextRules }),
-      });
-      const data = await response.json();
-      if (!response.ok || !data.success) throw new Error(data.error || 'rules save failed');
-
+      const data = await api.rules.save(nextRules);
       if (rulesRevisionRef.current === revision) {
         rulesDirtyRef.current = false;
         setCustomRules(data.rules || []);
         setRulesSaveStatus('saved');
-        addLog(`RULES SAVED ${data.rules.length}`);
         await loadState();
+        if (!silent) pushToast({ kind: 'success', title: 'Правила сохранены' });
       } else {
         setRulesSaveStatus('pending');
       }
     } catch (err) {
       setError(err.message);
       setRulesSaveStatus('error');
-      addLog(`ERROR ${err.message}`);
-    } finally {
-      if (!silent) setBusy(false);
+      pushToast({ kind: 'danger', title: 'Не удалось сохранить', message: err.message });
     }
   }
 
@@ -213,238 +346,241 @@ function App() {
     saveRules(customRules, { silent: false, revision });
   }
 
+  function updateRule(id, patch) {
+    setCustomRules((rules) => {
+      const next = rules.map((r) => (r.id === id ? { ...r, ...patch } : r));
+      queueRulesSave(next);
+      return next;
+    });
+  }
   function addRule() {
     setCustomRules((rules) => {
-      const nextRules = [emptyRule(), ...rules];
-      queueRulesSave(nextRules);
-      return nextRules;
+      const next = [emptyRule(), ...rules];
+      queueRulesSave(next);
+      return next;
+    });
+  }
+  function addRuleFromTemplate(tpl) {
+    setCustomRules((rules) => {
+      const next = [tpl, ...rules];
+      queueRulesSave(next);
+      return next;
     });
   }
-
   function removeRule(id) {
     setCustomRules((rules) => {
-      const nextRules = rules.filter((rule) => rule.id !== id);
-      queueRulesSave(nextRules);
-      return nextRules;
+      const next = rules.filter((r) => r.id !== id);
+      queueRulesSave(next);
+      return next;
     });
   }
+  function reorderRules(next) {
+    setCustomRules(next);
+    queueRulesSave(next);
+  }
 
+  // === Computed ===
+  const status = useMemo(() => {
+    if (applyStatus === 'applying') return 'applying';
+    if (applyStatus === 'error') return 'error';
+    if (state?.singboxRunning) return 'running';
+    if (state?.configExists) return 'stopped';
+    return 'no_config';
+  }, [state, applyStatus]);
+
+  const activeServer = useMemo(
+    () => servers.find((s) => s.tag === state?.selectedTag) || null,
+    [servers, state?.selectedTag],
+  );
+  const isClientMode = state?.mode === 'client';
+
+  const dirtyRules = rulesSaveStatus === 'pending' || rulesSaveStatus === 'saving';
+  const dirtyDevices = Boolean(
+    state?.devicesUpdatedAt &&
+    (!state?.rulesAppliedAt || state.devicesUpdatedAt > state.rulesAppliedAt),
+  );
+  const dirtyServer = pendingTag && pendingTag !== state?.selectedTag;
+  const dirtyRouting = dirtyRules || dirtyDevices;
+  const dirty = dirtyRouting || dirtyServer;
+
+  const sidebarBadges = {
+    routing: dirtyRouting ? { kind: 'warn', text: '●' } : null,
+    servers: dirtyServer ? { kind: 'warn', text: '●' } : null,
+    settings: !state?.hasSubscription ? { kind: 'danger', text: '!' } : null,
+  };
+
+  // === Render ===
   return (
-    <main className="shell">
-      <section className="hero panel">
-        <div>
-          <p className="eyebrow">VPN Proxy / Gateway Mode</p>
-          <h1>Transparent gateway for the whole network</h1>
-          <p className="lead">
-            Вставь subscription URL, выбери outbound, и контейнер сгенерирует gateway-конфиг для sing-box: TProxy для роутера и mixed proxy для ручных клиентов.
-          </p>
-        </div>
-        <div className="status-card">
-          <span className={state?.singboxRunning ? 'dot on' : 'dot'} />
-          <div>
-            <strong>{state?.singboxRunning ? 'sing-box running' : 'sing-box standby'}</strong>
-            <small>{state?.selectedTag || 'сервер не выбран'}</small>
-          </div>
-        </div>
-      </section>
+    <div className="app">
+      <Topbar
+        state={state}
+        status={status}
+        activeServer={activeServer}
+        dirty={dirty}
+        onRestart={restartSingbox}
+        onTryApply={rollback}
+      />
 
-      <section className="grid">
-        <div className="panel primary-flow">
-          <div className="section-title">
-            <span>1</span>
-            <h2>Subscription</h2>
-          </div>
+      <div className={`app-body${isClientMode ? ' client-mode' : ''}`}>
+        {!isClientMode && <Sidebar active={page} onChange={navigate} badges={sidebarBadges} mode={state?.mode} />}
 
-          <label className="field">
-            <span>Subscription URL</span>
-            <input
-              value={subscriptionUrl}
-              onChange={(event) => setSubscriptionUrl(event.target.value)}
-              placeholder="https://provider.example/sub/..."
+        <main className="app-main">
+          {(page === 'overview' || isClientMode) && (
+            isClientMode ? (
+              <ClientOverviewPage
+                state={state}
+                status={status}
+                activeServer={activeServer}
+                busy={busy}
+                subscriptionUrl={subscriptionUrl}
+                setSubscriptionUrl={setSubscriptionUrl}
+                servers={servers}
+                pendingTag={pendingTag}
+                setPendingTag={setPendingTag}
+                clientSettings={clientSettings}
+                onSaveClientSettings={saveClientSettings}
+                onCheckSharedProxy={checkSharedProxy}
+                onFetchSubscription={fetchSubscription}
+                onApply={applyServer}
+                onRestart={restartSingbox}
+                onStop={stopSingbox}
+              />
+            ) : (
+              <OverviewPage
+                state={state}
+                status={status}
+                busy={busy}
+                onRestart={restartSingbox}
+                onStop={stopSingbox}
+                onShowConfig={() => setConfigOpen(true)}
+                onNav={navigate}
+                onBypassToggle={toggleBypass}
+                onFlushDirectCache={flushDirectCache}
+              />
+            )
+          )}
+          {page === 'servers' && !isClientMode && (
+            <ServersPage
+              state={state}
+              servers={servers}
+              selectedTag={selectedTag}
+              setSelectedTag={setSelectedTag}
+              pendingTag={pendingTag}
+              setPendingTag={setPendingTag}
+              busy={busy}
+              onApply={applyServer}
+              onRollback={rollback}
+              pings={pings}
+              setPings={setPings}
+              pushToast={pushToast}
             />
-          </label>
+          )}
+          {page === 'routing' && !isClientMode && (
+            <RoutingPage
+              rules={customRules}
+              saveStatus={rulesSaveStatus}
+              busy={busy}
+              onAdd={addRule}
+              onAddTemplate={addRuleFromTemplate}
+              onUpdate={updateRule}
+              onRemove={removeRule}
+              onSaveNow={saveRulesNow}
+              onReorder={reorderRules}
+              devicesConfig={devicesConfig}
+              onUpdateDeviceDefaults={updateDeviceDefaults}
+              onAddDevice={addDevice}
+              onUpdateDevice={updateDevice}
+              onRemoveDevice={removeDevice}
+            />
+          )}
+          {page === 'logs' && !isClientMode && <LogsPage devices={devicesConfig.devices} />}
+          {page === 'settings' && !isClientMode && (
+            <SettingsPage
+              state={state}
+              subscriptionUrl={subscriptionUrl}
+              setSubscriptionUrl={setSubscriptionUrl}
+              busy={busy}
+              onFetchSubscription={fetchSubscription}
+              onForgetSubscription={forgetSubscription}
+              onShowConfig={() => setConfigOpen(true)}
+              onClearConfig={clearConfig}
+              pushToast={pushToast}
+            />
+          )}
 
-          <button className="button" disabled={busy || !subscriptionUrl} onClick={fetchServers}>
-            {busy ? 'Working...' : 'Parse subscription'}
-          </button>
-
-          <div className="section-title compact">
-            <span>2</span>
-            <h2>Servers</h2>
-          </div>
-
-          <div className="server-list">
-            {servers.length === 0 && <div className="empty">Серверы еще не загружены</div>}
-            {servers.map((server) => (
-              <button
-                key={server.tag}
-                className={server.tag === selectedTag ? 'server active' : 'server'}
-                onClick={() => setSelectedTag(server.tag)}
-              >
-                <strong>{server.tag}</strong>
-                <small>{server.type} / {server.server}:{server.server_port}</small>
-              </button>
-            ))}
-          </div>
-
-          <button className="button apply" disabled={busy || !selectedTag} onClick={applyServer}>
-            Apply selected gateway route
-          </button>
-
-          {error && <div className="error">{error}</div>}
-        </div>
-
-        <aside className="panel details">
-          <div className="section-title">
-            <span>3</span>
-            <h2>Gateway runtime</h2>
-          </div>
-
-          <dl>
-            <div><dt>UI</dt><dd>:{state?.port || 3456}</dd></div>
-            <div><dt>Mixed proxy</dt><dd>:{state?.proxyPort || 8080}</dd></div>
-            <div><dt>TProxy</dt><dd>:{state?.tproxyPort || 7895}</dd></div>
-            <div><dt>RU direct</dt><dd>{state?.routingRuDirect ? 'enabled' : 'disabled'}</dd></div>
-            <div><dt>Traffic</dt><dd>{userTraffic}</dd></div>
-          </dl>
-
-          <div className="route-card">
-            <span>Routing policy</span>
-            <p>private IP -> direct</p>
-            <p>geoip-ru/geosite-category-ru -> direct</p>
-            <p>everything else -> selected VPN outbound</p>
-          </div>
-
-          <div className="logs">
-            {log.length === 0 && <p>Waiting for actions...</p>}
-            {log.map((entry) => (
-              <p key={`${entry.time}-${entry.message}`}><span>{entry.time}</span> {entry.message}</p>
-            ))}
-          </div>
-        </aside>
-      </section>
-
-      <section className="panel rules-panel">
-        <div className="rules-header">
-          <div className="section-title">
-            <span>4</span>
-            <h2>Routing lists</h2>
-          </div>
-          <div className="rules-actions">
-            <button className="ghost-button" type="button" onClick={addRule}>Add list</button>
-            <button className="ghost-button solid" type="button" disabled={busy || rulesSaveStatus === 'saving'} onClick={saveRulesNow}>
-              {rulesSaveStatus === 'saving' ? 'Saving...' : rulesSaveStatus === 'pending' ? 'Save now' : rulesSaveStatus === 'error' ? 'Retry save' : 'Saved'}
-            </button>
-          </div>
-        </div>
-
-        <p className="rules-note">
-          Эти правила автосохраняются после изменений и вставляются после safety private-direct и до стандартного RU-direct. Для игр в gateway-режиме указывай домены, suffix, CIDR или порты: процесс на клиентском ПК gateway не видит.
-        </p>
-
-        <div className="rule-grid">
-          {customRules.length === 0 && (
-            <div className="empty rule-empty">
-              Нет пользовательских списков. Добавь список, например `League direct`, и отправь его в `direct`.
+          {/* Sticky bar — для routing/servers */}
+          {(page === 'routing' && dirtyRouting) && (
+            <div className="sticky-bar">
+              <div className="flex">
+                <span className={`dot ${rulesSaveStatus === 'error' ? 'danger' : 'warning'}`} />
+                <strong>
+                  {rulesSaveStatus === 'saving' && 'Сохраняем…'}
+                  {rulesSaveStatus === 'pending' && 'Есть несохранённые изменения'}
+                  {rulesSaveStatus === 'saved' && dirtyDevices && 'Изменения устройств сохранены'}
+                  {rulesSaveStatus === 'error' && 'Ошибка сохранения'}
+                </strong>
+                <small className="muted">Конфиг sing-box нужно пересобрать и применить.</small>
+              </div>
+              <div className="btn-group">
+                {rulesSaveStatus !== 'saved' && (
+                  <button className="btn btn-secondary sm" onClick={saveRulesNow}>Сохранить сейчас</button>
+                )}
+                {state?.selectedTag && (
+                  <button className="btn btn-primary sm" onClick={() => applyServer(state.selectedTag)} disabled={busy}>
+                    Применить config
+                  </button>
+                )}
+              </div>
             </div>
           )}
 
-          {customRules.map((rule) => (
-            <article className="rule-card" key={rule.id}>
-              <div className="rule-top">
-                <input
-                  value={rule.name}
-                  onChange={(event) => updateRule(rule.id, { name: event.target.value })}
-                  placeholder="Название списка"
-                />
-                <label className="checkbox-label">
-                  <input
-                    type="checkbox"
-                    checked={rule.enabled}
-                    onChange={(event) => updateRule(rule.id, { enabled: event.target.checked })}
-                  />
-                  enabled
-                </label>
+          {(page === 'servers' && dirtyServer) && (
+            <div className="sticky-bar">
+              <div className="flex">
+                <span className="dot warning" />
+                <strong>Сервер не применён</strong>
+                <small className="muted">Выбран: {pendingTag}</small>
               </div>
-
-              <label className="field">
-                <span>Route to</span>
-                <select value={rule.outbound} onChange={(event) => updateRule(rule.id, { outbound: event.target.value })}>
-                  <option value="direct">direct</option>
-                  <option value="vpn">vpn</option>
-                  <option value="block">block</option>
-                </select>
-              </label>
-
-              <div className="rule-fields">
-                <label className="field">
-                  <span>Domains exact</span>
-                  <textarea
-                    value={listToText(rule.domains)}
-                    onChange={(event) => updateRule(rule.id, { domains: textToList(event.target.value) })}
-                    placeholder="riotgames.com"
-                  />
-                </label>
-                <label className="field">
-                  <span>Domain suffixes</span>
-                  <textarea
-                    value={listToText(rule.domainSuffixes)}
-                    onChange={(event) => updateRule(rule.id, { domainSuffixes: textToList(event.target.value) })}
-                    placeholder={'leagueoflegends.com\nriotcdn.net'}
-                  />
-                </label>
-                <label className="field">
-                  <span>IP CIDR</span>
-                  <textarea
-                    value={listToText(rule.ipCidrs)}
-                    onChange={(event) => updateRule(rule.id, { ipCidrs: textToList(event.target.value) })}
-                    placeholder="104.160.128.0/19"
-                  />
-                </label>
-                <label className="field">
-                  <span>Ports</span>
-                  <textarea
-                    value={listToText(rule.ports)}
-                    onChange={(event) => updateRule(rule.id, { ports: textToList(event.target.value) })}
-                    placeholder={'5000\n5223'}
-                  />
-                </label>
-              </div>
-
-              <div className="rule-footer">
-                <label className="checkbox-label">
-                  <input
-                    type="checkbox"
-                    checked={(rule.networks || []).includes('tcp')}
-                    onChange={(event) => {
-                      const set = new Set(rule.networks || []);
-                      event.target.checked ? set.add('tcp') : set.delete('tcp');
-                      updateRule(rule.id, { networks: Array.from(set) });
-                    }}
-                  />
-                  tcp
-                </label>
-                <label className="checkbox-label">
-                  <input
-                    type="checkbox"
-                    checked={(rule.networks || []).includes('udp')}
-                    onChange={(event) => {
-                      const set = new Set(rule.networks || []);
-                      event.target.checked ? set.add('udp') : set.delete('udp');
-                      updateRule(rule.id, { networks: Array.from(set) });
-                    }}
-                  />
-                  udp
-                </label>
-                <button className="danger-button" type="button" onClick={() => removeRule(rule.id)}>
-                  Remove
+              <div className="btn-group">
+                <button className="btn btn-ghost sm" onClick={() => setPendingTag(state?.selectedTag || '')}>Отменить</button>
+                <button className="btn btn-primary sm" onClick={() => applyServer(pendingTag)} disabled={busy}>
+                  Применить
                 </button>
               </div>
-            </article>
-          ))}
+            </div>
+          )}
+        </main>
+
+        {!isClientMode && (
+          <StatusPane
+            state={state}
+            busy={busy}
+            onStop={stopSingbox}
+            onRestart={restartSingbox}
+            onShowConfig={() => setConfigOpen(true)}
+          />
+        )}
+      </div>
+
+      <ConfigViewer open={configOpen} onClose={() => setConfigOpen(false)} />
+      <Toasts items={toasts} onDismiss={dismissToast} />
+
+      {rollbackOffer && (
+        <div className="toasts">
+          <div className="toast warning">
+            <span className="dot warning" style={{ marginTop: 4 }} />
+            <div className="body">
+              <strong>Сервер применён</strong>
+              <small>Можно откатиться к «{rollbackOffer.to}»</small>
+              <button className="btn btn-link" onClick={rollback} style={{ padding: 0, marginTop: 4 }}>
+                ↶ Откатить
+              </button>
+            </div>
+            <button onClick={() => setRollbackOffer(null)}>×</button>
+          </div>
         </div>
-      </section>
-    </main>
+      )}
+    </div>
   );
 }
 

src/web/api.js

@@ -0,0 +1,127 @@
+async function request(url, options = {}) {
+  const response = await fetch(url, {
+    ...options,
+    headers: {
+      "content-type": "application/json",
+      ...(options.headers || {}),
+    },
+  });
+  const data = await response.json().catch(() => ({}));
+  if (!response.ok || (data && data.success === false)) {
+    throw new Error(
+      data?.error || `Запрос ${url} завершился ошибкой ${response.status}`,
+    );
+  }
+  return data;
+}
+
+export const api = {
+  state: () => request("/api/state"),
+  config: () => request("/api/config"),
+
+  rules: {
+    get: () => request("/api/rules"),
+    save: (rules) =>
+      request("/api/rules", { method: "PUT", body: JSON.stringify({ rules }) }),
+    conflicts: () => request("/api/rules/conflicts"),
+  },
+
+  deviceRules: {
+    get: () => request("/api/device-rules"),
+    save: (deviceRules) =>
+      request("/api/device-rules", {
+        method: "PUT",
+        body: JSON.stringify({ deviceRules }),
+      }),
+  },
+
+  devices: {
+    get: () => request("/api/devices"),
+    save: (devicesConfig) =>
+      request("/api/devices", {
+        method: "PUT",
+        body: JSON.stringify(devicesConfig),
+      }),
+  },
+
+  clientSettings: {
+    get: () => request("/api/client-settings"),
+    save: (clientSettings) =>
+      request("/api/client-settings", {
+        method: "PUT",
+        body: JSON.stringify({ clientSettings }),
+      }),
+    checkSharedProxy: (url) =>
+      request("/api/client-settings/shared-proxy/check", {
+        method: "POST",
+        body: JSON.stringify({ url }),
+      }),
+  },
+
+  ruleSets: {
+    get: () => request("/api/rule-sets"),
+    save: (ruleSets) =>
+      request("/api/rule-sets", {
+        method: "PUT",
+        body: JSON.stringify({ ruleSets }),
+      }),
+    lookup: (tag, url) =>
+      request("/api/rule-sets/lookup", {
+        method: "POST",
+        body: JSON.stringify({ tag, url }),
+      }),
+    sagernetCatalog: () => request("/api/rule-sets/sagernet-catalog"),
+  },
+
+  subscription: {
+    fetch: (url) =>
+      request("/api/subscription/fetch", {
+        method: "POST",
+        body: JSON.stringify({ url }),
+      }),
+    forget: () => request("/api/subscription", { method: "DELETE" }),
+  },
+
+  apply: (selectedTag) =>
+    request("/api/apply", {
+      method: "POST",
+      body: JSON.stringify({ selectedTag }),
+    }),
+  rollback: () => request("/api/apply/rollback", { method: "POST" }),
+
+  singbox: {
+    stop: () => request("/api/singbox/stop", { method: "POST" }),
+    restart: () => request("/api/singbox/restart", { method: "POST" }),
+    clear: () => request("/api/singbox/clear", { method: "POST" }),
+  },
+
+  servers: {
+    ping: (host, port) =>
+      request("/api/servers/ping", {
+        method: "POST",
+        body: JSON.stringify({ host, port }),
+      }),
+    pingAll: () => request("/api/servers/ping-all", { method: "POST" }),
+  },
+
+  bypass: (enabled) =>
+    request("/api/bypass", {
+      method: "POST",
+      body: JSON.stringify({ enabled }),
+    }),
+
+  directCache: {
+    get: () => request("/api/direct-cache"),
+    flush: () => request("/api/direct-cache", { method: "DELETE" }),
+  },
+
+  route: {
+    check: ({ host, ip, port, network, sourceIp, inbound }) =>
+      request("/api/route/check", {
+        method: "POST",
+        body: JSON.stringify({ host, ip, port, network, sourceIp, inbound }),
+      }),
+  },
+
+  configValidate: () => request("/api/config/validate", { method: "POST" }),
+};

src/web/components/ChipsInput.jsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+
+/**
+ * Chip input. Items separated by Enter, comma, или space (для CIDR/портов).
+ * Невалидные элементы помечаются красным.
+ */
+export function ChipsInput({ value = [], onChange, placeholder = '', validate, splitter = /[\s,]/ }) {
+  const [draft, setDraft] = useState('');
+
+  function commit(text) {
+    const parts = String(text).split(splitter).map((p) => p.trim()).filter(Boolean);
+    if (!parts.length) return;
+    const next = Array.from(new Set([...value, ...parts]));
+    onChange(next);
+    setDraft('');
+  }
+
+  function remove(item) {
+    onChange(value.filter((v) => v !== item));
+  }
+
+  function onKeyDown(e) {
+    if (e.key === 'Enter' || e.key === ',') {
+      e.preventDefault();
+      if (draft.trim()) commit(draft);
+    } else if (e.key === 'Backspace' && !draft && value.length) {
+      onChange(value.slice(0, -1));
+    }
+  }
+
+  function onPaste(e) {
+    const text = e.clipboardData.getData('text');
+    if (text && splitter.test(text)) {
+      e.preventDefault();
+      commit(text);
+    }
+  }
+
+  return (
+    <div className="chips" onClick={(e) => e.currentTarget.querySelector('input')?.focus()}>
+      {value.map((item) => {
+        const invalid = validate ? !validate(item) : false;
+        return (
+          <span key={item} className={`chip ${invalid ? 'error' : ''}`}>
+            {item}
+            <button type="button" onClick={() => remove(item)} title="Убрать">×</button>
+          </span>
+        );
+      })}
+      <input
+        className="chip-input"
+        value={draft}
+        onChange={(e) => setDraft(e.target.value)}
+        onKeyDown={onKeyDown}
+        onPaste={onPaste}
+        onBlur={() => draft.trim() && commit(draft)}
+        placeholder={value.length ? '' : placeholder}
+      />
+    </div>
+  );
+}

src/web/components/ClientOverviewPage.jsx

@@ -0,0 +1,369 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { flagFor } from '../utils/country.js';
+import { formatRelative } from '../utils/format.js';
+import { resolveClientRoute } from '../utils/clientRoute.js';
+
+function CopyValue({ value }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <button className="client-copy" type="button" onClick={copy}>
+      <span>{value}</span>
+      <strong>{copied ? 'OK' : 'Copy'}</strong>
+    </button>
+  );
+}
+
+function StatusPanel({ route, state }) {
+  const statusLabel = {
+    connected: 'Работает',
+    stopped: 'Остановлен',
+    empty: 'Не настроен',
+  }[route.status];
+
+  return (
+    <section className={`client-status-panel ${route.status}`}>
+      <div className="client-status-main">
+        <span className={`client-status-dot ${route.status}`} />
+        <div>
+          <div className="client-eyebrow">Текущий маршрут</div>
+          <h1>{route.title}</h1>
+          <p>{route.description}</p>
+        </div>
+      </div>
+      <div className="client-status-facts">
+        <div>
+          <small>Куда</small>
+          <strong>{route.target}</strong>
+          <span>{route.targetDetail}</span>
+        </div>
+        <div>
+          <small>Локальный proxy</small>
+          <strong>{route.localProxy}</strong>
+          <span>HTTP и SOCKS5</span>
+        </div>
+        <div>
+          <small>Сервис</small>
+          <strong>{statusLabel}</strong>
+          <span>{state?.appliedAt ? `применено ${formatRelative(state.appliedAt)}` : 'нет примененного config'}</span>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function RouteLine({ route }) {
+  return (
+    <div className="client-route-line">
+      {route.path.map((item, index) => (
+        <React.Fragment key={`${item}-${index}`}>
+          <span>{item}</span>
+          {index < route.path.length - 1 && <b>→</b>}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+function ModeButton({ active, selected, title, subtitle, onClick, disabled }) {
+  return (
+    <button
+      type="button"
+      className={`client-mode-button ${selected ? 'selected' : ''} ${active ? 'active' : ''}`}
+      disabled={disabled}
+      onClick={onClick}
+    >
+      <strong>{title}</strong>
+      <span>{subtitle}</span>
+    </button>
+  );
+}
+
+function GatewaySettings({ settings, busy, onCheck }) {
+  const [draftUrl, setDraftUrl] = useState(settings?.sharedProxyControlUrl || '');
+  const sharedProxy = settings?.sharedProxy;
+
+  useEffect(() => {
+    setDraftUrl(settings?.sharedProxyControlUrl || '');
+  }, [settings?.sharedProxyControlUrl]);
+
+  return (
+    <div className="client-mode-settings">
+      <div className="field">
+        <label className="field-label">Адрес gateway UI</label>
+        <div className="client-inline-form">
+          <input
+            className="input"
+            placeholder="http://192.168.50.111:3456"
+            value={draftUrl}
+            onChange={(e) => setDraftUrl(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && draftUrl && onCheck(draftUrl)}
+          />
+          <button className="btn btn-primary" disabled={busy || !draftUrl} onClick={() => onCheck(draftUrl)}>
+            Подключить
+          </button>
+        </div>
+      </div>
+      {sharedProxy && (
+        <div className="client-current-target">
+          <small>Найден общий proxy</small>
+          <strong>{sharedProxy.host}:{sharedProxy.port}</strong>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function VpnSettings({
+  state,
+  servers,
+  subscriptionUrl,
+  setSubscriptionUrl,
+  pendingTag,
+  setPendingTag,
+  busy,
+  onFetchSubscription,
+  onApply,
+}) {
+  const selected = pendingTag || state?.selectedTag || '';
+  const activeServer = servers.find((server) => server.tag === selected);
+
+  return (
+    <div className="client-mode-settings">
+      <div className="field">
+        <label className="field-label">Подписка или VLESS</label>
+        <div className="client-inline-form">
+          <input
+            className="input"
+            placeholder="https://… или vless://…"
+            value={subscriptionUrl}
+            onChange={(e) => setSubscriptionUrl(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && subscriptionUrl && onFetchSubscription()}
+          />
+          <button className="btn btn-secondary" disabled={busy || !subscriptionUrl} onClick={onFetchSubscription}>
+            Загрузить
+          </button>
+        </div>
+      </div>
+      <div className="field">
+        <label className="field-label">VPN-сервер</label>
+        <div className="client-inline-form">
+          <select
+            className="select"
+            value={selected}
+            disabled={!servers.length}
+            onChange={(e) => setPendingTag(e.target.value)}
+          >
+            <option value="">Выберите сервер</option>
+            {servers.map((server) => (
+              <option key={server.tag} value={server.tag}>
+                {flagFor(server)} {server.tag}
+              </option>
+            ))}
+          </select>
+          <button className="btn btn-primary" disabled={busy || !selected} onClick={() => onApply(selected)}>
+            Подключить
+          </button>
+        </div>
+        {activeServer && <small className="field-hint">Выбран {flagFor(activeServer)} {activeServer.tag}</small>}
+      </div>
+    </div>
+  );
+}
+
+function DirectSettings({ busy, onEnable }) {
+  return (
+    <div className="client-mode-settings direct">
+      <div>
+        <strong>Прямой режим</strong>
+        <p className="muted">Приложения продолжают использовать локальный proxy, но трафик идет без VPN и без gateway.</p>
+      </div>
+      <button className="btn btn-primary" disabled={busy} onClick={onEnable}>
+        Включить напрямую
+      </button>
+    </div>
+  );
+}
+
+function ProxySettings({ state, settings, busy, onSave }) {
+  const range = state?.clientProxyPortRange || { start: 8080, end: 8090 };
+  const port = settings?.proxyPort || state?.proxyPort || 8080;
+  const [draftPort, setDraftPort] = useState(String(port));
+
+  useEffect(() => {
+    setDraftPort(String(port));
+  }, [port]);
+
+  const parsed = Number.parseInt(draftPort, 10);
+  const invalid = !Number.isInteger(parsed) || parsed < range.start || parsed > range.end;
+  const dirty = !invalid && parsed !== port;
+  const singlePublishedPort = range.start === range.end;
+
+  return (
+    <aside className="client-side-panel">
+      <div>
+        <div className="client-panel-title">Адрес для приложений</div>
+        <div className="client-copy-stack">
+          <CopyValue value={`http://127.0.0.1:${port}`} />
+          <CopyValue value={`socks5://127.0.0.1:${port}`} />
+        </div>
+      </div>
+      <div className="field">
+        <label className="field-label">Порт proxy</label>
+        <div className="client-port-row">
+          <input
+            className="input"
+            type="number"
+            min={range.start}
+            max={range.end}
+            value={draftPort}
+            disabled={singlePublishedPort}
+            onChange={(e) => setDraftPort(e.target.value)}
+          />
+          <button
+            className="btn btn-secondary"
+            disabled={busy || singlePublishedPort || !dirty}
+            onClick={() => onSave({ ...settings, proxyPort: parsed })}
+          >
+            Save
+          </button>
+        </div>
+        <small className={invalid ? 'field-error' : 'field-hint'}>
+          {singlePublishedPort ? 'Порт задаётся установщиком' : `${range.start}–${range.end}`}
+        </small>
+      </div>
+    </aside>
+  );
+}
+
+export function ClientOverviewPage({
+  state,
+  activeServer,
+  busy,
+  subscriptionUrl,
+  setSubscriptionUrl,
+  servers,
+  pendingTag,
+  setPendingTag,
+  clientSettings,
+  onSaveClientSettings,
+  onCheckSharedProxy,
+  onFetchSubscription,
+  onApply,
+}) {
+  const route = useMemo(
+    () => resolveClientRoute({ state, activeServer }),
+    [state, activeServer],
+  );
+  const [setupMode, setSetupMode] = useState(route.mode === 'none' ? 'gateway' : route.mode);
+
+  useEffect(() => {
+    if (route.mode !== 'none') setSetupMode(route.mode);
+  }, [route.mode]);
+
+  function enableDirect() {
+    return onSaveClientSettings({
+      ...clientSettings,
+      homeBypassEnabled: true,
+      sharedProxyEnabled: false,
+    });
+  }
+
+  function selectGateway() {
+    setSetupMode('gateway');
+    if (clientSettings?.sharedProxyControlUrl) {
+      return onCheckSharedProxy(clientSettings.sharedProxyControlUrl);
+    }
+    return null;
+  }
+
+  function selectVpn() {
+    setSetupMode('vpn');
+    if (state?.selectedTag) {
+      return onApply(state.selectedTag);
+    }
+    return onSaveClientSettings({
+      ...clientSettings,
+      homeBypassEnabled: false,
+      sharedProxyEnabled: false,
+    });
+  }
+
+  return (
+    <div className="client-dashboard">
+      <StatusPanel route={route} state={state} />
+      <RouteLine route={route} />
+
+      <section className="client-workspace">
+        <div className="client-main-panel">
+          <div className="client-mode-grid">
+            <ModeButton
+              active={route.mode === 'gateway'}
+              selected={setupMode === 'gateway'}
+              title="Общий gateway"
+              subtitle={clientSettings?.sharedProxy ? `${clientSettings.sharedProxy.host}:${clientSettings.sharedProxy.port}` : 'серверная proxy'}
+              disabled={busy}
+              onClick={selectGateway}
+            />
+            <ModeButton
+              active={route.mode === 'vpn'}
+              selected={setupMode === 'vpn'}
+              title="Локальный VPN"
+              subtitle={state?.selectedTag || 'выбрать сервер'}
+              disabled={busy}
+              onClick={selectVpn}
+            />
+            <ModeButton
+              active={route.mode === 'direct'}
+              selected={setupMode === 'direct'}
+              title="Напрямую"
+              subtitle="без VPN"
+              disabled={busy}
+              onClick={() => {
+                setSetupMode('direct');
+                enableDirect();
+              }}
+            />
+          </div>
+
+          {setupMode === 'gateway' && (
+            <GatewaySettings
+              settings={clientSettings}
+              busy={busy}
+              onCheck={onCheckSharedProxy}
+            />
+          )}
+          {setupMode === 'vpn' && (
+            <VpnSettings
+              state={state}
+              servers={servers}
+              subscriptionUrl={subscriptionUrl}
+              setSubscriptionUrl={setSubscriptionUrl}
+              pendingTag={pendingTag}
+              setPendingTag={setPendingTag}
+              busy={busy}
+              onFetchSubscription={onFetchSubscription}
+              onApply={onApply}
+            />
+          )}
+          {setupMode === 'direct' && (
+            <DirectSettings busy={busy} onEnable={enableDirect} />
+          )}
+        </div>
+
+        <ProxySettings
+          state={state}
+          settings={clientSettings}
+          busy={busy}
+          onSave={onSaveClientSettings}
+        />
+      </section>
+    </div>
+  );
+}

src/web/components/ConfigViewer.jsx

@@ -0,0 +1,85 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { api } from '../api.js';
+
+export function ConfigViewer({ open, onClose }) {
+  const [config, setConfig] = useState(null);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    setConfig(null);
+    setError('');
+    api.config()
+      .then((data) => { if (!cancelled) setConfig(data.config); })
+      .catch((err) => { if (!cancelled) setError(err.message); });
+    return () => { cancelled = true; };
+  }, [open]);
+
+  const text = useMemo(() => (config ? JSON.stringify(config, null, 2) : ''), [config]);
+
+  const highlighted = useMemo(() => {
+    if (!search || !text) return text;
+    try {
+      const re = new RegExp(search.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'gi');
+      return text.split(re);
+    } catch {
+      return text;
+    }
+  }, [text, search]);
+
+  if (!open) return null;
+
+  function copy() { navigator.clipboard?.writeText(text).catch(() => {}); }
+  function download() {
+    const blob = new Blob([text], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'sing-box-config.json';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal lg" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-head">
+          <div>
+            <h3>sing-box config</h3>
+            <small className="muted">Автогенерируемый, перезаписывается при apply</small>
+          </div>
+          <div className="btn-group">
+            <input
+              className="input"
+              placeholder="Поиск…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              style={{ width: 160 }}
+            />
+            <button className="btn btn-ghost sm" disabled={!config} onClick={copy}>Копировать</button>
+            <button className="btn btn-ghost sm" disabled={!config} onClick={download}>Скачать</button>
+            <button className="btn btn-secondary sm" onClick={onClose}>Закрыть</button>
+          </div>
+        </div>
+        <div className="modal-body">
+          {error && <div className="conflict-banner danger">{error}</div>}
+          {!error && !config && <p className="muted">Конфиг ещё не сгенерирован.</p>}
+          {config && (
+            <pre className="config-view">
+              {Array.isArray(highlighted)
+                ? highlighted.map((part, i) => (
+                    <React.Fragment key={i}>
+                      {part}
+                      {i < highlighted.length - 1 && <mark style={{ background: 'var(--warning-dim)', color: 'var(--warning)' }}>{search}</mark>}
+                    </React.Fragment>
+                  ))
+                : text}
+            </pre>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

src/web/components/LogsPage.jsx

@@ -0,0 +1,337 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { formatTime } from '../utils/format.js';
+
+const MAX_ENTRIES = 800;
+const MAX_TRAFFIC = 500;
+const GROUP_WINDOW_MS = 30_000;
+
+function normalizeLine(line) {
+  return String(line || '').replace(/\x1b\[\d+m/g, '').trim();
+}
+
+function groupEntries(entries) {
+  const out = [];
+  for (const e of entries) {
+    const key = `${e.level}|${normalizeLine(e.line)}`;
+    const last = out[out.length - 1];
+    const ts = new Date(e.ts).getTime();
+    if (last && last._key === key && ts - last._lastTs < GROUP_WINDOW_MS) {
+      last.count += 1;
+      last._lastTs = ts;
+      last.lastTs = e.ts;
+    } else {
+      out.push({ ...e, _key: key, _lastTs: ts, count: 1, lastTs: e.ts });
+    }
+  }
+  return out;
+}
+
+const CATEGORY_BADGE = {
+  direct: { cls: 'success', label: 'direct' },
+  vpn:    { cls: 'info',    label: 'VPN' },
+  block:  { cls: 'danger',  label: 'block' },
+  other:  { cls: '',        label: 'other' },
+};
+
+function getDeviceName(sourceIp, devices) {
+  if (!sourceIp || !devices?.length) return null;
+  for (const d of devices) {
+    if (d.enabled === false) continue;
+    const ip = d.ip || d.sourceIp || (d.sourceIps || [])[0];
+    const plain = ip?.endsWith('/32') ? ip.slice(0, -3) : ip;
+    if (plain === sourceIp) return d.name;
+  }
+  return null;
+}
+
+function groupTraffic(list, sortBy = 'time') {
+  const map = new Map();
+  for (const e of list) {
+    const key = `${e.sourceIp || ''}|${e.category}|${e.host}|${e.port}|${e.matchedRule || ''}`;
+    const ts = new Date(e.ts).getTime();
+    if (map.has(key)) {
+      const g = map.get(key);
+      g.count++;
+      g._lastTs = ts;
+      g.lastTs = e.ts;
+    } else {
+      map.set(key, { ...e, _key: key, _lastTs: ts, count: 1, lastTs: e.ts });
+    }
+  }
+  const arr = Array.from(map.values());
+  if (sortBy === 'count') return arr.sort((a, b) => b.count - a.count || b._lastTs - a._lastTs);
+  return arr.sort((a, b) => b._lastTs - a._lastTs);
+}
+
+function TrafficTab({ devices = [] }) {
+  const [traffic, setTraffic] = useState([]);
+  const [paused, setPaused] = useState(false);
+  const [filter, setFilter] = useState('all'); // all | direct | vpn | block
+  const [search, setSearch] = useState('');
+  const [grouped, setGrouped] = useState(true);
+  const [sortBy, setSortBy] = useState('count'); // time | count
+  const [autoscroll, setAutoscroll] = useState(true);
+  const containerRef = useRef(null);
+  const pausedRef = useRef(false);
+
+  useEffect(() => { pausedRef.current = paused; }, [paused]);
+
+  useEffect(() => {
+    const source = new EventSource('/api/traffic/stream');
+    source.onmessage = (ev) => {
+      if (pausedRef.current) return;
+      try {
+        const entry = JSON.parse(ev.data);
+        setTraffic((prev) => {
+          const next = [...prev, entry];
+          if (next.length > MAX_TRAFFIC) next.splice(0, next.length - MAX_TRAFFIC);
+          return next;
+        });
+      } catch {}
+    };
+    return () => source.close();
+  }, []);
+
+  const filtered = useMemo(() => {
+    let list = traffic;
+    if (filter !== 'all') list = list.filter((e) => e.category === filter);
+    if (search) {
+      const s = search.toLowerCase();
+      list = list.filter((e) =>
+        e.host?.toLowerCase().includes(s) ||
+        String(e.port || '').includes(s) ||
+        e.outbound?.toLowerCase().includes(s) ||
+        e.matchedRule?.toLowerCase().includes(s) ||
+        e.sourceIp?.toLowerCase().includes(s) ||
+        getDeviceName(e.sourceIp, devices)?.toLowerCase().includes(s),
+      );
+    }
+    return grouped ? groupTraffic(list, sortBy) : list;
+  }, [traffic, filter, search, grouped, sortBy, devices]);
+
+  useEffect(() => {
+    if (!autoscroll || !containerRef.current) return;
+    containerRef.current.scrollTop = containerRef.current.scrollHeight;
+  }, [filtered, autoscroll]);
+
+  const counts = useMemo(() => {
+    const c = { direct: 0, vpn: 0, block: 0 };
+    for (const e of traffic) if (e.category in c) c[e.category]++;
+    return c;
+  }, [traffic]);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', flex: 1, overflow: 'hidden' }}>
+      <div className="filter-bar" style={{ marginBottom: 12, flexWrap: 'wrap', gap: 8 }}>
+        <input
+          className="input"
+          placeholder="Поиск: host, порт, правило…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          style={{ flex: 1, minWidth: 180 }}
+        />
+        <select className="select" value={filter} onChange={(e) => setFilter(e.target.value)}>
+          <option value="all">Все ({traffic.length})</option>
+          <option value="direct">direct ({counts.direct})</option>
+          <option value="vpn">VPN ({counts.vpn})</option>
+          <option value="block">block ({counts.block})</option>
+        </select>
+        <label className="checkbox">
+          <input type="checkbox" checked={grouped} onChange={(e) => setGrouped(e.target.checked)} />
+          Группировать
+        </label>
+        {grouped && (
+          <select className="select" value={sortBy} onChange={(e) => setSortBy(e.target.value)} style={{ width: 'auto' }}>
+            <option value="count">По частоте</option>
+            <option value="time">По времени</option>
+          </select>
+        )}
+        <label className="checkbox">
+          <input type="checkbox" checked={autoscroll} onChange={(e) => setAutoscroll(e.target.checked)} />
+          Автоскролл
+        </label>
+        <button className="btn btn-ghost sm" onClick={() => setPaused((p) => !p)}>
+          {paused ? '▶ Продолжить' : '⏸ Пауза'}
+        </button>
+        <button
+          className="btn btn-ghost sm"
+          onClick={() => { setTraffic([]); fetch('/api/traffic', { method: 'DELETE' }).catch(() => {}); }}
+        >
+          Очистить
+        </button>
+      </div>
+
+      {traffic.length === 0 ? (
+        <div className="muted" style={{ padding: '20px 0', textAlign: 'center' }}>
+          Ожидаем трафик… Убедитесь что sing-box запущен и уровень логов не выше INFO.
+        </div>
+      ) : (
+        <div ref={containerRef} style={{ flex: 1, overflow: 'auto' }}>
+          <table className="table" style={{ fontSize: 12 }}>
+            <thead>
+              <tr>
+                <th style={{ width: 70 }}>Время</th>
+                <th style={{ width: 70 }}>Туннель</th>
+                <th style={{ width: 110 }}>Устройство</th>
+                <th>Хост / IP</th>
+                <th style={{ width: 55 }}>Порт</th>
+                <th>Правило</th>
+                <th style={{ width: 40 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((e, i) => {
+                const badge = CATEGORY_BADGE[e.category] || CATEGORY_BADGE.other;
+                const deviceName = getDeviceName(e.sourceIp, devices);
+                return (
+                  <tr key={i} style={{ opacity: e.category === 'block' ? 0.6 : 1 }}>
+                    <td className="muted text-mono" style={{ whiteSpace: 'nowrap' }}>{formatTime(e.ts)}</td>
+                    <td>
+                      <span className={`badge ${badge.cls}`} style={{ fontSize: 11 }}>{badge.label}</span>
+                    </td>
+                    <td className="text-mono" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', maxWidth: 110 }}>
+                      {deviceName
+                        ? <span style={{ fontSize: 11 }}>{deviceName}</span>
+                        : e.sourceIp
+                          ? <span className="muted" style={{ fontSize: 10 }}>{e.sourceIp}</span>
+                          : <span className="muted" style={{ fontSize: 11 }}>—</span>}
+                    </td>
+                    <td className="text-mono" style={{ wordBreak: 'break-all' }}>{e.host || '—'}</td>
+                    <td className="muted text-mono">{e.port || '—'}</td>
+                    <td>
+                      {e.matchedRule
+                        ? <span className="badge info" style={{ fontSize: 11 }}>{e.matchedRule}</span>
+                        : <span className="muted" style={{ fontSize: 11 }}>—</span>}
+                    </td>
+                    <td className="muted text-mono" style={{ textAlign: 'right', fontSize: 11 }}>
+                      {e.count > 1 && <span className="repeat">×{e.count}</span>}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function LogsPage({ devices = [] }) {
+  const [tab, setTab] = useState('traffic'); // traffic | logs
+  const [entries, setEntries] = useState([]);
+  const [paused, setPaused] = useState(false);
+  const [filter, setFilter] = useState('all');
+  const [search, setSearch] = useState('');
+  const [autoscroll, setAutoscroll] = useState(true);
+  const [grouped, setGrouped] = useState(true);
+  const containerRef = useRef(null);
+  const pausedRef = useRef(false);
+
+  useEffect(() => { pausedRef.current = paused; }, [paused]);
+
+  useEffect(() => {
+    const source = new EventSource('/api/logs/stream');
+    source.onmessage = (event) => {
+      if (pausedRef.current) return;
+      try {
+        const entry = JSON.parse(event.data);
+        setEntries((prev) => {
+          const next = [...prev, entry];
+          if (next.length > MAX_ENTRIES) next.splice(0, next.length - MAX_ENTRIES);
+          return next;
+        });
+      } catch {}
+    };
+    return () => source.close();
+  }, []);
+
+  const filtered = useMemo(() => {
+    let list = entries;
+    if (filter !== 'all') list = list.filter((e) => e.level === filter);
+    if (search) {
+      const s = search.toLowerCase();
+      list = list.filter((e) => normalizeLine(e.line).toLowerCase().includes(s));
+    }
+    return grouped ? groupEntries(list) : list;
+  }, [entries, filter, search, grouped]);
+
+  useEffect(() => {
+    if (!autoscroll || !containerRef.current) return;
+    containerRef.current.scrollTop = containerRef.current.scrollHeight;
+  }, [filtered, autoscroll]);
+
+  function copy(text) {
+    navigator.clipboard?.writeText(text).catch(() => {});
+  }
+
+  return (
+    <div className="card" style={{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 160px)' }}>
+      <div className="card-header">
+        <h2>Логи sing-box</h2>
+        <div className="tabs" style={{ marginLeft: 'auto', marginBottom: 0 }}>
+          <button className={`tab ${tab === 'traffic' ? 'active' : ''}`} onClick={() => setTab('traffic')}>Трафик</button>
+          <button className={`tab ${tab === 'logs' ? 'active' : ''}`} onClick={() => setTab('logs')}>Системные логи</button>
+        </div>
+      </div>
+
+      {tab === 'traffic' && <TrafficTab devices={devices} />}
+
+      {tab === 'logs' && (
+        <>
+          <div className="filter-bar" style={{ marginBottom: 12 }}>
+            <input
+              className="input"
+              placeholder="Поиск по тексту…"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              style={{ flex: 1, minWidth: 200 }}
+            />
+            <select className="select" value={filter} onChange={(e) => setFilter(e.target.value)}>
+              <option value="all">Все уровни</option>
+              <option value="info">info</option>
+              <option value="warning">warning</option>
+              <option value="error">error</option>
+              <option value="debug">debug</option>
+            </select>
+            <label className="checkbox"><input type="checkbox" checked={grouped} onChange={(e) => setGrouped(e.target.checked)} /> Группировать</label>
+            <label className="checkbox"><input type="checkbox" checked={autoscroll} onChange={(e) => setAutoscroll(e.target.checked)} /> Автоскролл</label>
+            <button className="btn btn-ghost sm" onClick={() => setPaused((p) => !p)}>{paused ? '▶ Продолжить' : '⏸ Пауза'}</button>
+            <button className="btn btn-ghost sm" onClick={() => setEntries([])}>Очистить</button>
+          </div>
+
+          <div ref={containerRef} className="logs-stream">
+            {filtered.length === 0 && <p className="muted">Логов пока нет.</p>}
+            {filtered.map((entry, index) => {
+              const text = normalizeLine(entry.line);
+              if (grouped && entry.count > 1) {
+                return (
+                  <div key={`${entry.ts}-${index}`} className="log-group">
+                    <span className="log-time mono">{formatTime(entry.ts)}</span>
+                    <span className={`log-level text-${entry.level === 'error' ? 'danger' : entry.level === 'warning' ? 'warning' : 'info'}`}>
+                      {entry.level}
+                    </span>
+                    <span className="log-text">{text}</span>
+                    <span className="repeat">×{entry.count}</span>
+                  </div>
+                );
+              }
+              return (
+                <div
+                  key={`${entry.ts}-${index}`}
+                  className={`log-line ${entry.level}`}
+                  onDoubleClick={() => copy(`${formatTime(entry.ts)} ${entry.level} ${text}`)}
+                  title="Двойной клик — скопировать"
+                >
+                  <span className="log-time">{formatTime(entry.ts)}</span>
+                  <span className="log-level">{entry.level}</span>
+                  <span className="log-text">{text}</span>
+                </div>
+              );
+            })}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/web/components/OverviewPage.jsx

@@ -0,0 +1,192 @@
+import React, { useEffect, useState } from 'react';
+import { formatRelative, formatBytes } from '../utils/format.js';
+import { flagFor } from '../utils/country.js';
+import { api } from '../api.js';
+
+function StatusHero({ state, status }) {
+  const text = {
+    running:   { title: '🟢 VPN-шлюз работает',  kind: 'success' },
+    applying:  { title: '🟠 Применяем изменения…', kind: 'warning' },
+    error:     { title: '🔴 Ошибка',              kind: 'danger'  },
+    stopped:   { title: '⚫ Шлюз остановлен',     kind: 'neutral' },
+    no_config: { title: '⚪ Шлюз не настроен',    kind: 'neutral' },
+  }[status];
+
+  const userInfo = state?.userInfo;
+  const traffic = userInfo
+    ? `${formatBytes((userInfo.upload || 0) + (userInfo.download || 0))} / ${userInfo.total ? formatBytes(userInfo.total) : 'без лимита'}`
+    : 'нет данных';
+
+  return (
+    <div className="card">
+      <div className="flex-between">
+        <div>
+          <h2 style={{ marginBottom: 4 }}>{text.title}</h2>
+          <small className="muted">
+            {state?.appliedAt ? `Последнее применение: ${formatRelative(state.appliedAt)}` : 'Конфиг ещё не применялся'}
+          </small>
+        </div>
+        <span className={`badge ${text.kind}`}>{state?.singboxRunning ? 'sing-box online' : 'sing-box offline'}</span>
+      </div>
+
+      <div className="divider" />
+
+      <div className="grid-3">
+        <div>
+          <small className="muted">Активный сервер</small>
+          <div style={{ marginTop: 4 }}>
+            {state?.selectedTag ? (
+              <>
+                <strong>{flagFor({ tag: state.selectedTag })} {state.selectedTag}</strong>
+              </>
+            ) : <span className="muted">Не выбран</span>}
+          </div>
+        </div>
+        <div>
+          <small className="muted">Трафик</small>
+          <div style={{ marginTop: 4 }}><strong>{traffic}</strong></div>
+        </div>
+        <div>
+          <small className="muted">Правил маршрутизации</small>
+          <div style={{ marginTop: 4 }}><strong>{(state?.customRules || []).filter(r => r.enabled).length} активных</strong></div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function QuickActions({ state, busy, onRestart, onStop, onShowConfig, onNav, onBypassToggle }) {
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h3>Быстрые действия</h3>
+      </div>
+      <div className="btn-group">
+        <button className="btn btn-primary" disabled={busy} onClick={() => onNav('servers')}>
+          ⋆ Сменить сервер
+        </button>
+        <button className="btn btn-secondary" disabled={busy || !state?.configExists} onClick={onRestart}>
+          ↻ Перезапустить
+        </button>
+        <button className="btn btn-secondary" disabled={busy || !state?.singboxRunning} onClick={onStop}>
+          ■ Остановить
+        </button>
+        <button className="btn btn-ghost" disabled={!state?.configExists} onClick={onShowConfig}>
+          ⌘ Показать config
+        </button>
+        <button
+          className={`btn ${state?.bypassMode ? 'btn-warning' : 'btn-ghost'}`}
+          disabled={busy || !state?.singboxRunning}
+          onClick={onBypassToggle}
+          title="Весь трафик напрямую — для диагностики"
+        >
+          {state?.bypassMode ? '⚠ Обход правил ВКЛЮЧЁН' : '↗ Весь трафик напрямую'}
+        </button>
+      </div>
+    </div>
+  );
+}
+
+function RecentEvents({ onNav }) {
+  const [entries, setEntries] = useState([]);
+
+  useEffect(() => {
+    let cancelled = false;
+    fetch('/api/logs')
+      .then((r) => r.json())
+      .then((data) => {
+        if (cancelled) return;
+        const list = (data.logs || []).slice(-15).reverse();
+        setEntries(list);
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, []);
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h3>Последние события</h3>
+        <button className="btn btn-link" onClick={() => onNav('logs')}>Открыть логи →</button>
+      </div>
+      {entries.length === 0 ? (
+        <small className="muted">Пока ничего нет.</small>
+      ) : (
+        <div className="events-list">
+          {entries.slice(0, 8).map((e, i) => {
+            const dot = e.level === 'error' ? 'danger'
+                      : e.level === 'warning' ? 'warning'
+                      : 'success';
+            const time = new Date(e.ts).toLocaleTimeString('ru-RU', { hour12: false });
+            return (
+              <div key={`${e.ts}-${i}`} className="event-row">
+                <span className={`dot ${dot}`} />
+                <span className="event-time">{time}</span>
+                <span className="text-truncate" title={e.line}>{e.line}</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function RoutingSummary({ state, onNav, onFlushDirectCache }) {
+  const rules = state?.customRules || [];
+  const enabled = rules.filter((r) => r.enabled).length;
+  const cacheCount = state?.directBypassCount || 0;
+  const cacheAvailable = state?.directBypassAvailable && state?.directBypassEnabled;
+  const transparentDefault = state?.devicesConfig?.defaultTransparentMode || 'vpn';
+  const proxyDefault = state?.devicesConfig?.proxyDefaultMode || 'vpn';
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h3>Маршрутизация</h3>
+        <button className="btn btn-link" onClick={() => onNav('routing')}>Открыть правила →</button>
+      </div>
+      <div className="kv-list">
+        <div className="row"><span className="key">Private IP</span><span className="val text-success">→ direct</span></div>
+        {state?.routingRuDirect && (
+          <div className="row"><span className="key">RU (geoip/geosite)</span><span className="val text-success">→ direct</span></div>
+        )}
+        <div className="row"><span className="key">Global custom правил</span><span className="val">{enabled} из {rules.length}</span></div>
+        <div className="row"><span className="key">Transparent fallback</span><span className="val">→ {transparentDefault}</span></div>
+        <div className="row"><span className="key">Proxy fallback</span><span className="val text-warning">→ {proxyDefault}</span></div>
+        {cacheAvailable && (
+          <div className="row">
+            <span className="key">Direct bypass cache</span>
+            <span className="val" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span className="text-success">{cacheCount} IP</span>
+              <button className="btn btn-ghost" style={{ fontSize: 11, padding: '1px 6px' }} onClick={onFlushDirectCache} title="Сбросить — все IP снова пройдут через sing-box один раз">
+                ✕ сбросить
+              </button>
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function OverviewPage({ state, status, busy, onRestart, onStop, onShowConfig, onNav, onBypassToggle, onFlushDirectCache }) {
+  return (
+    <div className="section-stack">
+      {state?.bypassMode && (
+        <div className="alert alert-warning" style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+          <strong>⚠ Режим обхода правил активен</strong>
+          <span className="muted">— весь трафик идёт напрямую, VPN-правила не применяются.</span>
+          <button className="btn btn-sm btn-warning" style={{ marginLeft: 'auto' }} onClick={onBypassToggle}>
+            Отключить
+          </button>
+        </div>
+      )}
+      <StatusHero state={state} status={status} />
+      <div className="grid-2">
+        <QuickActions state={state} busy={busy} onRestart={onRestart} onStop={onStop} onShowConfig={onShowConfig} onNav={onNav} onBypassToggle={onBypassToggle} />
+        <RoutingSummary state={state} onNav={onNav} onFlushDirectCache={onFlushDirectCache} />
+      </div>
+      <RecentEvents onNav={onNav} />
+    </div>
+  );
+}

src/web/components/RouteChecker.jsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { api } from '../api.js';
+
+export function RouteChecker() {
+  const [host, setHost] = useState('');
+  const [port, setPort] = useState('443');
+  const [network, setNetwork] = useState('tcp');
+  const [sourceIp, setSourceIp] = useState('');
+  const [inbound, setInbound] = useState('tproxy-in');
+  const [busy, setBusy] = useState(false);
+  const [result, setResult] = useState(null);
+  const [error, setError] = useState('');
+
+  async function check() {
+    setBusy(true);
+    setError('');
+    setResult(null);
+    try {
+      const data = await api.route.check({
+        host,
+        port: port || undefined,
+        network,
+        sourceIp: sourceIp || undefined,
+        inbound,
+      });
+      setResult(data);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const r = result?.result;
+  const kind = r?.outbound?.startsWith('direct') ? 'success'
+             : r?.outbound === 'block' ? 'danger'
+             : r?.outbound?.includes('VPN') || r?.outbound?.includes('vpn') ? 'info'
+             : 'warning';
+
+  return (
+    <div className="card flat compact">
+      <div className="card-header no-margin"><h3>Проверить маршрут</h3></div>
+      <div className="filter-bar" style={{ marginTop: 12 }}>
+        <input
+          className="input"
+          placeholder="домен или IP (riotgames.com)"
+          value={host}
+          onChange={(e) => setHost(e.target.value)}
+          onKeyDown={(e) => e.key === 'Enter' && check()}
+          style={{ minWidth: 220, flex: 1 }}
+        />
+        <input
+          className="input"
+          placeholder="port"
+          value={port}
+          onChange={(e) => setPort(e.target.value)}
+          style={{ width: 90 }}
+        />
+        <select className="select" value={network} onChange={(e) => setNetwork(e.target.value)} style={{ width: 90 }}>
+          <option value="tcp">tcp</option>
+          <option value="udp">udp</option>
+        </select>
+        <input
+          className="input"
+          placeholder="source IP"
+          value={sourceIp}
+          onChange={(e) => setSourceIp(e.target.value)}
+          style={{ width: 145 }}
+        />
+        <select className="select" value={inbound} onChange={(e) => setInbound(e.target.value)} style={{ width: 130 }}>
+          <option value="tproxy-in">tproxy-in</option>
+          <option value="mixed-in">mixed-in</option>
+        </select>
+        <button className="btn btn-primary" onClick={check} disabled={busy || !host}>Проверить</button>
+      </div>
+
+      {error && <div className="field-error" style={{ marginTop: 10 }}>{error}</div>}
+
+      {r && (
+        <div className="route-result" style={{ marginTop: 12 }}>
+          <div className="flex-between">
+            <strong>{r.ruleIndex >= 0 ? `Правило #${r.ruleIndex + 1}: ${r.ruleName}` : r.ruleName}</strong>
+            <span className={`badge ${kind}`}>→ {r.outbound}</span>
+          </div>
+          {result.resolvedIp && result.resolvedFrom && (
+            <small className="muted text-mono">DNS: {result.resolvedFrom} → {result.resolvedIp}</small>
+          )}
+          <small className="muted">{r.reason}</small>
+        </div>
+      )}
+    </div>
+  );
+}

src/web/components/RoutingPage.jsx

@@ -0,0 +1,384 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+  DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors,
+} from '@dnd-kit/core';
+import {
+  arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ruleTemplates } from '../templates/ruleTemplates.js';
+import { ruleErrors, hasErrors } from '../utils/validation.js';
+import { RuleEditorDrawer } from './RuleEditorDrawer.jsx';
+import { RouteChecker } from './RouteChecker.jsx';
+import { api } from '../api.js';
+
+const OUTBOUND_KIND = {
+  direct: { kind: 'success', label: 'direct' },
+  vpn:    { kind: 'info',    label: 'VPN' },
+  block:  { kind: 'danger',  label: 'block' },
+};
+
+const DEVICE_MODES = {
+  bypass: { kind: 'warning', label: 'bypass TProxy', hint: 'мимо sing-box; ручной proxy отдельно' },
+  direct: { kind: 'success', label: 'direct', hint: 'fallback после global rules' },
+  vpn:    { kind: 'info',    label: 'VPN',    hint: 'fallback после global rules' },
+  rules:  { kind: 'neutral', label: 'default', hint: 'использует transparent default' },
+  block:  { kind: 'danger',  label: 'block',  hint: 'fallback после global rules' },
+};
+
+function DeviceModeSelect({ value, onChange }) {
+  return (
+    <select className="select sm" value={value || 'rules'} onChange={(e) => onChange(e.target.value)}>
+      <option value="bypass">bypass TProxy</option>
+      <option value="direct">direct</option>
+      <option value="vpn">VPN</option>
+      <option value="rules">default</option>
+      <option value="block">block</option>
+    </select>
+  );
+}
+
+function DevicesCard({ devicesConfig, onDefaultsChange, onAdd, onUpdate, onRemove }) {
+  const devices = devicesConfig?.devices || [];
+  const defaultTransparentMode = devicesConfig?.defaultTransparentMode || devicesConfig?.defaultMode || 'vpn';
+  const proxyDefaultMode = devicesConfig?.proxyDefaultMode || 'vpn';
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <div>
+          <h2>Устройства</h2>
+          <small className="muted">bypass TProxy применяется до sing-box. Остальные режимы — fallback после global rules.</small>
+        </div>
+        <div className="btn-group">
+          <label className="field" style={{ minWidth: 180, margin: 0 }}>
+            <span className="field-label">Transparent default</span>
+            <select
+              className="select sm"
+              value={defaultTransparentMode}
+              onChange={(e) => onDefaultsChange({ defaultTransparentMode: e.target.value })}
+            >
+              <option value="direct">direct</option>
+              <option value="vpn">VPN</option>
+              <option value="block">block</option>
+            </select>
+          </label>
+          <label className="field" style={{ minWidth: 160, margin: 0 }}>
+            <span className="field-label">Proxy default</span>
+            <select
+              className="select sm"
+              value={proxyDefaultMode}
+              onChange={(e) => onDefaultsChange({ proxyDefaultMode: e.target.value })}
+            >
+              <option value="vpn">VPN</option>
+              <option value="direct">direct</option>
+              <option value="block">block</option>
+            </select>
+          </label>
+          <button className="btn btn-primary sm" onClick={onAdd}>
+            + Добавить устройство
+          </button>
+        </div>
+      </div>
+      {devices.length === 0 ? (
+        <div className="empty-state" style={{ padding: '16px 0' }}>
+          <p style={{ margin: 0 }}>Нет профилей устройств. Неизвестные transparent-устройства используют transparent default.</p>
+        </div>
+      ) : (
+        <div style={{ overflowX: 'auto' }}>
+          <table className="table">
+            <thead>
+              <tr>
+                <th style={{ width: 40 }}></th>
+                <th>Название</th>
+                <th style={{ width: 170 }}>IP</th>
+                <th style={{ width: 150 }}>MAC</th>
+                <th style={{ width: 150 }}>Mode</th>
+                <th>Поведение</th>
+                <th style={{ width: 40 }}></th>
+              </tr>
+            </thead>
+            <tbody>
+              {devices.map((dev) => {
+                const mode = DEVICE_MODES[dev.mode] || DEVICE_MODES.rules;
+                return (
+                  <tr key={dev.id} className={dev.enabled !== false ? '' : 'disabled'}>
+                    <td>
+                      <input
+                        type="checkbox"
+                        checked={dev.enabled !== false}
+                        onChange={(e) => onUpdate(dev.id, { enabled: e.target.checked })}
+                        style={{ accentColor: 'var(--accent)' }}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        className="input sm"
+                        value={dev.name || ''}
+                        onChange={(e) => onUpdate(dev.id, { name: e.target.value })}
+                        placeholder="Название устройства"
+                        style={{ width: '100%', minWidth: 120 }}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        className="input sm"
+                        value={dev.ip || ''}
+                        onChange={(e) => onUpdate(dev.id, { ip: e.target.value })}
+                        placeholder="192.168.1.50"
+                        style={{ width: '100%', minWidth: 140 }}
+                      />
+                    </td>
+                    <td>
+                      <input
+                        className="input sm"
+                        value={dev.mac || ''}
+                        onChange={(e) => onUpdate(dev.id, { mac: e.target.value })}
+                        placeholder="опционально"
+                        style={{ width: '100%', minWidth: 120 }}
+                      />
+                    </td>
+                    <td>
+                      <DeviceModeSelect value={dev.mode} onChange={(mode) => onUpdate(dev.id, { mode })} />
+                    </td>
+                    <td>
+                      <span className={`badge ${mode.kind}`}>{mode.label}</span>
+                      <small className="muted" style={{ marginLeft: 8 }}>{mode.hint}</small>
+                    </td>
+                    <td>
+                      <button
+                        className="btn btn-ghost sm"
+                        onClick={() => {
+                          if (confirm('Удалить устройство?')) onRemove(dev.id);
+                        }}
+                      >×</button>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function summary(rule) {
+  const parts = [];
+  const totalDomains = (rule.domains?.length || 0) + (rule.domainSuffixes?.length || 0) + (rule.domainKeywords?.length || 0);
+  if (totalDomains) parts.push(`${totalDomains} дом.`);
+  if (rule.ipCidrs?.length) parts.push(`${rule.ipCidrs.length} CIDR`);
+  if (rule.ports?.length) parts.push(`${rule.ports.length} портов`);
+  if (rule.networks?.length) parts.push(rule.networks.join('/'));
+  return parts.join(' · ') || '—';
+}
+
+function SortableRuleRow({ rule, index, total, onEdit, onUpdate, onRemove, conflict }) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({ id: rule.id });
+  const style = { transform: CSS.Transform.toString(transform), transition, opacity: isDragging ? 0.5 : 1 };
+  const errors = ruleErrors(rule);
+  const invalid = hasErrors(errors);
+  const ob = OUTBOUND_KIND[rule.outbound] || OUTBOUND_KIND.direct;
+
+  return (
+    <tr ref={setNodeRef} style={style} className={`rule-row ${rule.enabled ? '' : 'disabled'} ${invalid ? 'invalid' : ''}`}>
+      <td style={{ width: 30 }}>
+        <span className="drag-handle" {...attributes} {...listeners} title="Перетащить">⠿</span>
+      </td>
+      <td style={{ width: 36 }} className="muted text-mono">#{index + 1}</td>
+      <td>
+        <div className="flex" style={{ alignItems: 'center' }}>
+          <input
+            type="checkbox"
+            checked={rule.enabled !== false}
+            onChange={(e) => onUpdate(rule.id, { enabled: e.target.checked })}
+            style={{ accentColor: 'var(--accent)' }}
+          />
+          <button className="btn btn-link" style={{ padding: 0, fontWeight: 600 }} onClick={() => onEdit(rule.id)}>
+            {rule.name || '(без названия)'}
+          </button>
+          {invalid && <span className="badge danger">ошибки</span>}
+          {conflict && <span className={`badge ${conflict.severity === 'warning' ? 'warning' : 'info'}`} title={`Перекрывается с #${conflict.conflictWithIndex + 1}`}>конфликт</span>}
+        </div>
+      </td>
+      <td><span className={`badge ${ob.kind}`}>{ob.label}</span></td>
+      <td className="muted" style={{ fontSize: 12 }}>{summary(rule)}</td>
+      <td style={{ textAlign: 'right' }}>
+        <div className="row-actions">
+          <button className="btn btn-ghost sm" onClick={() => onEdit(rule.id)}>Редактировать</button>
+          <button className="btn btn-ghost sm" onClick={() => { if (confirm('Удалить правило?')) onRemove(rule.id); }}>×</button>
+        </div>
+      </td>
+    </tr>
+  );
+}
+
+function TemplatesModal({ open, onClose, onAdd }) {
+  if (!open) return null;
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal lg" onClick={(e) => e.stopPropagation()}>
+        <div className="modal-head">
+          <h3>Шаблоны маршрутизации</h3>
+          <button className="btn btn-ghost sm" onClick={onClose}>Закрыть</button>
+        </div>
+        <div className="modal-body">
+          <div className="template-grid">
+            {ruleTemplates.map((tpl) => (
+              <div key={tpl.key} className="template-card">
+                <h4>{tpl.label}</h4>
+                <small>{tpl.description}</small>
+                <button className="btn btn-secondary sm" onClick={() => { onAdd(tpl.build()); onClose(); }}>
+                  + Добавить
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function RoutingPage({
+  rules, saveStatus, busy,
+  onAdd, onAddTemplate, onUpdate, onRemove, onSaveNow, onReorder,
+  devicesConfig, onUpdateDeviceDefaults, onAddDevice, onUpdateDevice, onRemoveDevice,
+}) {
+  const [editingId, setEditingId] = useState(null);
+  const [showTemplates, setShowTemplates] = useState(false);
+  const [conflicts, setConflicts] = useState([]);
+  const [availableRuleSets, setAvailableRuleSets] = useState([]);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  useEffect(() => {
+    api.ruleSets.get().then((data) => setAvailableRuleSets(data.ruleSets || [])).catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    const t = setTimeout(() => {
+      api.rules.conflicts().then((data) => { if (!cancelled) setConflicts(data.conflicts || []); }).catch(() => {});
+    }, 600);
+    return () => { cancelled = true; clearTimeout(t); };
+  }, [rules]);
+
+  const conflictsByRuleId = useMemo(() => {
+    const map = {};
+    for (const c of conflicts) map[c.ruleId] = c;
+    return map;
+  }, [conflicts]);
+
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const oldIndex = rules.findIndex((r) => r.id === active.id);
+    const newIndex = rules.findIndex((r) => r.id === over.id);
+    if (oldIndex < 0 || newIndex < 0) return;
+    onReorder(arrayMove(rules, oldIndex, newIndex));
+  }
+
+  const editing = rules.find((r) => r.id === editingId) || null;
+
+  return (
+    <div className="section-stack">
+      <RouteChecker />
+
+      <DevicesCard
+        devicesConfig={devicesConfig}
+        onDefaultsChange={onUpdateDeviceDefaults}
+        onAdd={onAddDevice}
+        onUpdate={onUpdateDevice}
+        onRemove={onRemoveDevice}
+      />
+
+      <div className="card">
+        <div className="card-header">
+          <h2>Правила маршрутизации</h2>
+          <div className="btn-group">
+            <button className="btn btn-secondary sm" onClick={() => setShowTemplates(true)}>Шаблоны</button>
+            <button className="btn btn-primary sm" onClick={() => { const newId = `rule-${Date.now()}`; onAdd(); setTimeout(() => setEditingId(newId), 50); }}>
+              + Добавить
+            </button>
+          </div>
+        </div>
+
+        {conflicts.length > 0 && (
+          <div className="conflict-banner" style={{ marginBottom: 12 }}>
+            <span>⚠</span>
+            <div>
+              <strong>{conflicts.length} конфликт(ов) обнаружено</strong>
+              <div style={{ marginTop: 4 }}>
+                {conflicts.slice(0, 3).map((c, i) => (
+                  <div key={i} style={{ fontSize: 12 }}>
+                    #{c.ruleIndex + 1} «{c.ruleName}» перекрывается правилом #{c.conflictWithIndex + 1} «{c.conflictWithName}»
+                  </div>
+                ))}
+              </div>
+            </div>
+          </div>
+        )}
+
+        <small className="muted" style={{ display: 'block', marginBottom: 8 }}>
+          Применяются <strong>сверху вниз</strong>. Перетаскивай ⠿ чтобы менять порядок.
+        </small>
+
+        {rules.length === 0 ? (
+          <div className="empty-state">
+            <h3>Правил пока нет</h3>
+            <p>Добавь шаблон (например «League of Legends → direct») или создай пустое правило.</p>
+            <button className="btn btn-primary" onClick={() => setShowTemplates(true)} style={{ marginTop: 12 }}>
+              Открыть шаблоны
+            </button>
+          </div>
+        ) : (
+          <div style={{ overflowX: 'auto' }}>
+            <table className="table">
+              <thead>
+                <tr>
+                  <th></th>
+                  <th>#</th>
+                  <th>Правило</th>
+                  <th>Outbound</th>
+                  <th>Условия</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+                  <SortableContext items={rules.map((r) => r.id)} strategy={verticalListSortingStrategy}>
+                    {rules.map((rule, i) => (
+                      <SortableRuleRow
+                        key={rule.id}
+                        rule={rule}
+                        index={i}
+                        total={rules.length}
+                        onEdit={setEditingId}
+                        onUpdate={onUpdate}
+                        onRemove={onRemove}
+                        conflict={conflictsByRuleId[rule.id]}
+                      />
+                    ))}
+                  </SortableContext>
+                </DndContext>
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      <RuleEditorDrawer
+        rule={editing}
+        onUpdate={onUpdate}
+        onClose={() => setEditingId(null)}
+        onRemove={onRemove}
+        availableRuleSets={availableRuleSets}
+      />
+      <TemplatesModal open={showTemplates} onClose={() => setShowTemplates(false)} onAdd={onAddTemplate} />
+    </div>
+  );
+}

src/web/components/RuleEditorDrawer.jsx

@@ -0,0 +1,453 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { ChipsInput } from './ChipsInput.jsx';
+import { isValidCidr, isValidPort, ruleErrors, hasErrors } from '../utils/validation.js';
+import { api } from '../api.js';
+
+const DOMAIN = /^(?=.{1,253}$)([a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)(\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i;
+const RULE_SET_TAG = /^[a-z0-9][a-z0-9_.@!-]*$/i;
+const validDomain = (v) => DOMAIN.test(String(v).trim());
+const validRuleSetTag = (v) => RULE_SET_TAG.test(String(v).trim());
+
+const RS_PAGE_SIZE = 100;
+const RS_TYPE_LABELS = { domain: 'домен', suffix: 'суффикс', keyword: 'ключ', cidr: 'CIDR', regex: 'regex' };
+
+function RuleSetBrowseModal({ tag, url, rule, onPatch, onClose }) {
+  const [status, setStatus] = useState('loading');
+  const [data, setData] = useState(null);
+  const [error, setError] = useState('');
+  const [search, setSearch] = useState('');
+  const [typeFilter, setTypeFilter] = useState('all');
+  const [page, setPage] = useState(0);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    api.ruleSets.lookup(tag, url)
+      .then((d) => { setData(d); setStatus('done'); })
+      .catch((err) => { setError(err.message); setStatus('error'); });
+  }, [tag, url]);
+
+  useEffect(() => {
+    if (status === 'done') setTimeout(() => inputRef.current?.focus(), 50);
+  }, [status]);
+
+  const filtered = useMemo(() => {
+    if (!data?.entries) return [];
+    const q = search.trim().toLowerCase();
+    return data.entries.filter((e) => {
+      if (typeFilter !== 'all' && e.type !== typeFilter) return false;
+      if (!q) return true;
+      return e.value.toLowerCase().includes(q);
+    });
+  }, [data, search, typeFilter]);
+
+  function onSearchChange(v) { setSearch(v); setPage(0); }
+  function onTypeChange(v) { setTypeFilter(v); setPage(0); }
+
+  function addEntry(entry) {
+    const val = entry.value;
+    switch (entry.type) {
+      case 'domain': {
+        const cur = new Set(rule.domains || []);
+        if (!cur.has(val)) onPatch({ domains: [...(rule.domains || []), val] });
+        break;
+      }
+      case 'suffix': {
+        const cur = new Set(rule.domainSuffixes || []);
+        if (!cur.has(val)) onPatch({ domainSuffixes: [...(rule.domainSuffixes || []), val] });
+        break;
+      }
+      case 'keyword': {
+        const cur = new Set(rule.domainKeywords || []);
+        if (!cur.has(val)) onPatch({ domainKeywords: [...(rule.domainKeywords || []), val] });
+        break;
+      }
+      case 'cidr': {
+        const cur = new Set(rule.ipCidrs || []);
+        if (!cur.has(val)) onPatch({ ipCidrs: [...(rule.ipCidrs || []), val] });
+        break;
+      }
+      default: break;
+    }
+  }
+
+  const totalPages = Math.ceil(filtered.length / RS_PAGE_SIZE);
+  const pageItems = filtered.slice(page * RS_PAGE_SIZE, (page + 1) * RS_PAGE_SIZE);
+
+  const addedValues = useMemo(() => new Set([
+    ...(rule.domains || []),
+    ...(rule.domainSuffixes || []),
+    ...(rule.domainKeywords || []),
+    ...(rule.ipCidrs || []),
+  ]), [rule]);
+
+  return (
+    <div className="modal-backdrop" style={{ zIndex: 1100 }} onClick={onClose}>
+      <div
+        className="modal lg"
+        style={{ maxWidth: 680, maxHeight: '85vh', display: 'flex', flexDirection: 'column' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="modal-head">
+          <div>
+            <h3 style={{ margin: 0 }}>Содержимое: <code style={{ fontSize: 14 }}>{tag}</code></h3>
+            <small className="muted">Кликните запись чтобы добавить в правило</small>
+          </div>
+          <button className="btn btn-ghost sm" onClick={onClose}>Закрыть</button>
+        </div>
+
+        {status === 'loading' && (
+          <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-muted)' }}>
+            Скачивание и декомпиляция…<br />
+            <small>Может занять 10–30 секунд</small>
+          </div>
+        )}
+        {status === 'error' && (
+          <div style={{ padding: 24 }}>
+            <div className="conflict-banner danger"><span>✗</span><div>{error}</div></div>
+          </div>
+        )}
+
+        {status === 'done' && data && (
+          <>
+            <div style={{ padding: '8px 20px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+              <span className="badge info">всего: {data.stats.total.toLocaleString()}</span>
+              {data.stats.domain > 0 && <span className="badge">доменов: {data.stats.domain.toLocaleString()}</span>}
+              {data.stats.suffix > 0 && <span className="badge">суффиксов: {data.stats.suffix.toLocaleString()}</span>}
+              {data.stats.cidr > 0 && <span className="badge">CIDR: {data.stats.cidr.toLocaleString()}</span>}
+            </div>
+            <div style={{ padding: '8px 20px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 8 }}>
+              <input
+                ref={inputRef}
+                className="input"
+                style={{ flex: 1 }}
+                placeholder="Поиск: youtube, 149.154, .ru…"
+                value={search}
+                onChange={(e) => onSearchChange(e.target.value)}
+              />
+              <select className="select" style={{ width: 130 }} value={typeFilter} onChange={(e) => onTypeChange(e.target.value)}>
+                <option value="all">Все типы</option>
+                {Object.entries(RS_TYPE_LABELS).map(([k, v]) => (
+                  <option key={k} value={k}>{v}</option>
+                ))}
+              </select>
+            </div>
+            <div style={{ flex: 1, overflow: 'auto', padding: '0 20px' }}>
+              {filtered.length === 0 ? (
+                <div className="muted" style={{ padding: '20px 0', textAlign: 'center' }}>Ничего не найдено</div>
+              ) : (
+                <>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', padding: '6px 0' }}>
+                    {filtered.length.toLocaleString()} / {data.stats.total.toLocaleString()}
+                    {totalPages > 1 && ` · стр. ${page + 1}/${totalPages}`}
+                    <span className="muted" style={{ marginLeft: 12 }}>— нажмите строку чтобы добавить в правило</span>
+                  </div>
+                  <table className="table" style={{ fontSize: 12 }}>
+                    <thead>
+                      <tr><th style={{ width: 70 }}>Тип</th><th>Значение</th><th style={{ width: 30 }}></th></tr>
+                    </thead>
+                    <tbody>
+                      {pageItems.map((e, i) => {
+                        const already = addedValues.has(e.value);
+                        return (
+                          <tr
+                            key={i}
+                            style={{ cursor: already ? 'default' : 'pointer', opacity: already ? 0.5 : 1 }}
+                            onClick={() => !already && addEntry(e)}
+                            title={already ? 'Уже добавлено' : `Добавить в ${e.type === 'cidr' ? 'IP/CIDR' : e.type === 'suffix' ? 'суффиксы' : e.type === 'keyword' ? 'ключевые слова' : 'домены'}`}
+                          >
+                            <td><span className="badge" style={{ fontSize: 10 }}>{RS_TYPE_LABELS[e.type] || e.type}</span></td>
+                            <td className="text-mono" style={{ wordBreak: 'break-all', userSelect: 'all' }}>{e.value}</td>
+                            <td style={{ color: 'var(--text-muted)', fontSize: 14 }}>{already ? '✓' : '+'}</td>
+                          </tr>
+                        );
+                      })}
+                    </tbody>
+                  </table>
+                  {totalPages > 1 && (
+                    <div className="flex" style={{ gap: 8, padding: '10px 0', justifyContent: 'center' }}>
+                      <button className="btn btn-ghost sm" disabled={page === 0} onClick={() => setPage(0)}>«</button>
+                      <button className="btn btn-ghost sm" disabled={page === 0} onClick={() => setPage((p) => p - 1)}>‹</button>
+                      <span className="muted" style={{ lineHeight: '28px', fontSize: 12 }}>{page + 1} / {totalPages}</span>
+                      <button className="btn btn-ghost sm" disabled={page >= totalPages - 1} onClick={() => setPage((p) => p + 1)}>›</button>
+                      <button className="btn btn-ghost sm" disabled={page >= totalPages - 1} onClick={() => setPage(totalPages - 1)}>»</button>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function RuleEditor({ rule, onUpdate, onClose, onRemove, mode = 'builder', availableRuleSets = [] }) {
+  const [view, setView] = useState(mode); // builder | json
+  const [jsonDraft, setJsonDraft] = useState(() => JSON.stringify(rule, null, 2));
+  const [jsonError, setJsonError] = useState('');
+  const [browseTag, setBrowseTag] = useState(null); // { tag, url } | null
+  const errors = ruleErrors(rule);
+
+  // Индекс URL по тегу из доступных rule-sets
+  const ruleSetUrlMap = useMemo(() => {
+    const map = {};
+    for (const rs of availableRuleSets) map[rs.tag] = rs.url;
+    return map;
+  }, [availableRuleSets]);
+
+  function patch(p) {
+    onUpdate(rule.id, p);
+  }
+
+  function applyJson() {
+    try {
+      const parsed = JSON.parse(jsonDraft);
+      onUpdate(rule.id, { ...parsed, id: rule.id });
+      setJsonError('');
+    } catch (err) {
+      setJsonError(err.message);
+    }
+  }
+
+  return (
+    <div className="drawer-body">
+      <div className="tabs">
+        <button className={`tab ${view === 'builder' ? 'active' : ''}`} onClick={() => setView('builder')}>Конструктор</button>
+        <button className={`tab ${view === 'json' ? 'active' : ''}`} onClick={() => { setJsonDraft(JSON.stringify(rule, null, 2)); setView('json'); }}>Raw JSON</button>
+      </div>
+
+      {view === 'builder' ? (
+        <>
+          <div className="field">
+            <span className="field-label">Название</span>
+            <input className="input" value={rule.name} onChange={(e) => patch({ name: e.target.value })} />
+          </div>
+
+          <div className="field-row">
+            <div className="field">
+              <span className="field-label">Outbound</span>
+              <select className="select" value={rule.outbound} onChange={(e) => patch({ outbound: e.target.value })}>
+                <option value="direct">direct (напрямую)</option>
+                <option value="vpn">vpn (через выбранный сервер)</option>
+                <option value="block">block (заблокировать)</option>
+              </select>
+            </div>
+            <div className="field">
+              <span className="field-label">Состояние</span>
+              <label className="checkbox">
+                <input
+                  type="checkbox"
+                  checked={rule.enabled !== false}
+                  onChange={(e) => patch({ enabled: e.target.checked })}
+                />
+                Правило включено
+              </label>
+            </div>
+          </div>
+
+          <div className="field">
+            <span className="field-label">Rule-sets (geo-базы)</span>
+            <ChipsInput
+              value={rule.ruleSets || []}
+              onChange={(v) => patch({ ruleSets: v })}
+              placeholder="geosite-runet"
+              validate={validRuleSetTag}
+            />
+            {/* Кнопки просмотра содержимого для выбранных rule-sets */}
+            {(rule.ruleSets || []).length > 0 && (
+              <div className="field-hint" style={{ display: 'flex', flexWrap: 'wrap', gap: 4, marginTop: 4 }}>
+                {(rule.ruleSets || []).map((tag) => {
+                  const url = ruleSetUrlMap[tag];
+                  return url ? (
+                    <button
+                      key={tag}
+                      className="btn btn-ghost sm"
+                      style={{ padding: '0 6px', fontSize: 11 }}
+                      onClick={() => setBrowseTag({ tag, url })}
+                      title={`Просмотреть содержимое ${tag}`}
+                    >
+                      🔍 {tag}
+                    </button>
+                  ) : null;
+                })}
+              </div>
+            )}
+            {availableRuleSets.length > 0 && (
+              <div className="field-hint">
+                Доступны:{' '}
+                {availableRuleSets.map((rs) => (
+                  <span key={rs.tag} style={{ display: 'inline-flex', alignItems: 'center', marginRight: 4 }}>
+                    <button
+                      className="btn btn-ghost sm"
+                      style={{ padding: '0 6px', marginRight: 2 }}
+                      onClick={() => {
+                        const current = new Set(rule.ruleSets || []);
+                        if (!current.has(rs.tag)) {
+                          patch({ ruleSets: [...(rule.ruleSets || []), rs.tag] });
+                        }
+                      }}
+                    >
+                      + {rs.tag}
+                    </button>
+                    <button
+                      className="btn btn-ghost sm"
+                      style={{ padding: '0 4px', fontSize: 12 }}
+                      onClick={() => setBrowseTag({ tag: rs.tag, url: rs.url })}
+                      title="Просмотреть содержимое"
+                    >
+                      🔍
+                    </button>
+                  </span>
+                ))}
+              </div>
+            )}
+            {availableRuleSets.length === 0 && (
+              <span className="field-hint">
+                Настройте rule-sets в Настройках, затем вводите их теги здесь
+              </span>
+            )}
+          </div>
+
+          <div className="field">
+            <span className="field-label">Домены (точное совпадение)</span>
+            <ChipsInput
+              value={rule.domains || []}
+              onChange={(v) => patch({ domains: v })}
+              placeholder="riotgames.com"
+              validate={validDomain}
+            />
+            {errors.domains.length > 0 && <span className="field-error">Невалидно: {errors.domains.join(', ')}</span>}
+          </div>
+
+          <div className="field">
+            <span className="field-label">Суффиксы доменов</span>
+            <ChipsInput
+              value={rule.domainSuffixes || []}
+              onChange={(v) => patch({ domainSuffixes: v })}
+              placeholder="riotcdn.net"
+              validate={validDomain}
+            />
+            {errors.domainSuffixes.length > 0 && <span className="field-error">Невалидно: {errors.domainSuffixes.join(', ')}</span>}
+          </div>
+
+          <div className="field">
+            <span className="field-label">IP / CIDR</span>
+            <ChipsInput
+              value={rule.ipCidrs || []}
+              onChange={(v) => patch({ ipCidrs: v })}
+              placeholder="104.160.128.0/19"
+              validate={isValidCidr}
+            />
+            {errors.ipCidrs.length > 0 && <span className="field-error">Невалидно: {errors.ipCidrs.join(', ')}</span>}
+          </div>
+
+          <div className="field">
+            <span className="field-label">Порты (число или диапазон 5000-6000)</span>
+            <ChipsInput
+              value={rule.ports || []}
+              onChange={(v) => patch({ ports: v })}
+              placeholder="443"
+              validate={(p) => {
+                const s = String(p);
+                if (s.includes('-')) {
+                  const [a, b] = s.split('-');
+                  return isValidPort(a) && isValidPort(b);
+                }
+                return isValidPort(p);
+              }}
+            />
+            {errors.ports.length > 0 && <span className="field-error">Невалидно: {errors.ports.join(', ')}</span>}
+          </div>
+
+          <div className="field">
+            <span className="field-label">Протоколы</span>
+            <div className="flex">
+              <label className="checkbox">
+                <input
+                  type="checkbox"
+                  checked={(rule.networks || []).includes('tcp')}
+                  onChange={(e) => {
+                    const set = new Set(rule.networks || []);
+                    e.target.checked ? set.add('tcp') : set.delete('tcp');
+                    patch({ networks: Array.from(set) });
+                  }}
+                />
+                TCP
+              </label>
+              <label className="checkbox">
+                <input
+                  type="checkbox"
+                  checked={(rule.networks || []).includes('udp')}
+                  onChange={(e) => {
+                    const set = new Set(rule.networks || []);
+                    e.target.checked ? set.add('udp') : set.delete('udp');
+                    patch({ networks: Array.from(set) });
+                  }}
+                />
+                UDP
+              </label>
+              <span className="field-hint">Если ничего — оба</span>
+            </div>
+          </div>
+        </>
+      ) : (
+        <>
+          <div className="field">
+            <span className="field-label">Сырой JSON правила</span>
+            <textarea
+              className="textarea"
+              style={{ minHeight: 320 }}
+              value={jsonDraft}
+              onChange={(e) => setJsonDraft(e.target.value)}
+            />
+            {jsonError && <span className="field-error">{jsonError}</span>}
+          </div>
+          <div className="btn-group">
+            <button className="btn btn-primary" onClick={applyJson}>Применить JSON</button>
+            <button className="btn btn-ghost" onClick={() => setJsonDraft(JSON.stringify(rule, null, 2))}>Сбросить</button>
+          </div>
+        </>
+      )}
+
+      {browseTag && (
+        <RuleSetBrowseModal
+          tag={browseTag.tag}
+          url={browseTag.url}
+          rule={rule}
+          onPatch={(p) => patch(p)}
+          onClose={() => setBrowseTag(null)}
+        />
+      )}
+    </div>
+  );
+}
+
+export function RuleEditorDrawer({ rule, onUpdate, onClose, onRemove, availableRuleSets = [] }) {
+  if (!rule) return null;
+  const errors = ruleErrors(rule);
+  const invalid = hasErrors(errors);
+
+  return (
+    <>
+      <div className="drawer-backdrop" onClick={onClose} />
+      <aside className="drawer">
+        <div className="drawer-head">
+          <div>
+            <h3>Редактирование правила</h3>
+            <small className="muted">{rule.name || '(без названия)'}</small>
+          </div>
+          <button className="btn btn-ghost sm" onClick={onClose}>Закрыть</button>
+        </div>
+        <RuleEditor rule={rule} onUpdate={onUpdate} onClose={onClose} onRemove={onRemove} availableRuleSets={availableRuleSets} />
+        <div className="drawer-foot">
+          <button className="btn btn-danger" onClick={() => { if (confirm('Удалить правило?')) { onRemove(rule.id); onClose(); } }}>Удалить</button>
+          <div className="btn-group">
+            {invalid && <span className="badge danger">Есть ошибки</span>}
+            <button className="btn btn-primary" onClick={onClose}>Готово</button>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}

src/web/components/ServersPage.jsx

@@ -0,0 +1,210 @@
+import React, { useMemo, useState } from 'react';
+import { api } from '../api.js';
+import { flagFor } from '../utils/country.js';
+import { formatRelative } from '../utils/format.js';
+
+function PingCell({ ping }) {
+  if (!ping) return <span className="muted">—</span>;
+  if (ping.checking) return <span className="badge neutral pulse">проверяем…</span>;
+  if (!ping.ok) return <span className="badge danger" title={ping.error}>offline</span>;
+  const ms = ping.latency;
+  const kind = ms < 80 ? 'success' : ms < 200 ? 'warning' : 'danger';
+  return <span className={`badge ${kind}`}>{ms} ms</span>;
+}
+
+function StatusCell({ ping }) {
+  if (!ping) return <span className="badge neutral">unknown</span>;
+  if (ping.checking) return <span className="badge neutral pulse">…</span>;
+  return ping.ok
+    ? <span className="badge success">● online</span>
+    : <span className="badge danger">● offline</span>;
+}
+
+export function ServersPage({
+  state,
+  servers,
+  selectedTag,
+  setSelectedTag,
+  pendingTag,
+  setPendingTag,
+  busy,
+  onApply,
+  onRollback,
+  pings,
+  setPings,
+  pushToast,
+}) {
+  const [filter, setFilter] = useState('all'); // all | online
+  const [search, setSearch] = useState('');
+
+  async function pingOne(server) {
+    setPings((prev) => ({ ...prev, [server.tag]: { checking: true } }));
+    try {
+      const res = await api.servers.ping(server.server, server.server_port);
+      setPings((prev) => ({
+        ...prev,
+        [server.tag]: { ok: res.ok, latency: res.latency, error: res.error, checkedAt: new Date().toISOString() },
+      }));
+    } catch (err) {
+      setPings((prev) => ({ ...prev, [server.tag]: { ok: false, error: err.message } }));
+    }
+  }
+
+  async function pingAll() {
+    setPings((prev) => {
+      const next = { ...prev };
+      for (const s of servers) next[s.tag] = { checking: true };
+      return next;
+    });
+    try {
+      const res = await api.servers.pingAll();
+      const map = {};
+      for (const r of res.results || []) {
+        map[r.tag] = { ok: r.ok, latency: r.latency, error: r.error, checkedAt: r.checkedAt };
+      }
+      setPings((prev) => ({ ...prev, ...map }));
+      pushToast({ kind: 'success', title: 'Пинг завершён' });
+    } catch (err) {
+      pushToast({ kind: 'danger', title: 'Ошибка пинга', message: err.message });
+    }
+  }
+
+  const filtered = useMemo(() => {
+    return servers.filter((s) => {
+      if (search && !s.tag.toLowerCase().includes(search.toLowerCase()) && !s.server.toLowerCase().includes(search.toLowerCase())) {
+        return false;
+      }
+      if (filter === 'online' && !pings[s.tag]?.ok) return false;
+      return true;
+    });
+  }, [servers, search, filter, pings]);
+
+  const pendingDifferent = pendingTag && pendingTag !== state?.selectedTag;
+  const activeServer = servers.find((s) => s.tag === state?.selectedTag);
+  const pendingServer = servers.find((s) => s.tag === pendingTag);
+
+  if (!servers.length) {
+    return (
+      <div className="card">
+        <div className="empty-state">
+          <h3>Серверы ещё не загружены</h3>
+          <p>Загрузите подписку в разделе «Настройки», чтобы получить список серверов.</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="section-stack">
+      {pendingDifferent && (
+        <div className="card" style={{ borderColor: 'var(--warning)' }}>
+          <div className="flex-between">
+            <div>
+              <strong>Выбран: {flagFor(pendingServer)} {pendingServer?.tag}</strong>
+              <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
+                Текущий: {state?.selectedTag ? `${flagFor(activeServer)} ${state.selectedTag}` : 'нет'}
+              </div>
+            </div>
+            <div className="btn-group">
+              <button className="btn btn-ghost" onClick={() => setPendingTag(state?.selectedTag || '')} disabled={busy}>
+                Отменить
+              </button>
+              <button className="btn btn-primary" onClick={() => onApply(pendingTag)} disabled={busy}>
+                Применить изменения
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="card">
+        <div className="card-header">
+          <h2>Серверы ({servers.length})</h2>
+          <div className="btn-group">
+            <button className="btn btn-secondary sm" onClick={pingAll} disabled={busy}>
+              ⚡ Проверить все
+            </button>
+            {state?.previousTag && (
+              <button className="btn btn-ghost sm" onClick={onRollback} disabled={busy}>
+                ↶ Откатить ({state.previousTag})
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="filter-bar" style={{ marginBottom: 12 }}>
+          <input
+            className="input"
+            placeholder="Поиск по тегу или хосту…"
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+          />
+          <select className="select" value={filter} onChange={(e) => setFilter(e.target.value)}>
+            <option value="all">Все</option>
+            <option value="online">Только online</option>
+          </select>
+        </div>
+
+        <div style={{ overflowX: 'auto' }}>
+          <table className="table">
+            <thead>
+              <tr>
+                <th style={{ width: 16 }}></th>
+                <th>Сервер</th>
+                <th>Хост</th>
+                <th>Тип</th>
+                <th>Ping</th>
+                <th>Статус</th>
+                <th style={{ textAlign: 'right' }}>Действие</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filtered.map((server) => {
+                const isActive = server.tag === state?.selectedTag;
+                const isPending = server.tag === pendingTag && !isActive;
+                const ping = pings[server.tag];
+                return (
+                  <tr key={server.tag} className={isActive ? 'active' : ''}>
+                    <td>{flagFor(server)}</td>
+                    <td>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                        <strong>{server.tag}</strong>
+                        {isActive && <span className="badge success">ACTIVE</span>}
+                        {isPending && <span className="badge warning">pending</span>}
+                      </div>
+                    </td>
+                    <td className="text-mono muted">{server.server}:{server.server_port}</td>
+                    <td><span className="badge neutral">{server.type}</span></td>
+                    <td><PingCell ping={ping} /></td>
+                    <td><StatusCell ping={ping} /></td>
+                    <td>
+                      <div className="row-actions">
+                        <button className="btn btn-ghost sm" onClick={() => pingOne(server)} disabled={busy}>
+                          Ping
+                        </button>
+                        {isActive ? (
+                          <button className="btn btn-secondary sm" disabled>Активен</button>
+                        ) : (
+                          <button
+                            className="btn btn-primary sm"
+                            onClick={() => { setSelectedTag(server.tag); setPendingTag(server.tag); }}
+                            disabled={busy}
+                          >
+                            Выбрать
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+              {!filtered.length && (
+                <tr><td colSpan={7} className="muted" style={{ padding: 24, textAlign: 'center' }}>Ничего не найдено</td></tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}

src/web/components/SettingsPage.jsx

@@ -0,0 +1,784 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { api } from '../api.js';
+import { formatRelative } from '../utils/format.js';
+
+const TYPE_LABELS = { domain: 'домен', suffix: 'суффикс', keyword: 'ключевое слово', cidr: 'CIDR', regex: 'regex' };
+const PAGE_SIZE = 100;
+
+function RuleSetLookupModal({ tag, url, onClose }) {
+  const [state, setState] = useState('idle'); // idle | loading | done | error
+  const [error, setError] = useState('');
+  const [data, setData] = useState(null); // { entries, stats, cachedAt }
+  const [search, setSearch] = useState('');
+  const [filterType, setFilterType] = useState('all');
+  const [page, setPage] = useState(0);
+  const inputRef = useRef(null);
+
+  useEffect(() => {
+    setState('loading');
+    api.ruleSets.lookup(tag, url)
+      .then((res) => { setData(res); setState('done'); })
+      .catch((err) => { setError(err.message); setState('error'); });
+  }, [tag, url]);
+
+  useEffect(() => {
+    if (state === 'done') setTimeout(() => inputRef.current?.focus(), 50);
+  }, [state]);
+
+  const filtered = useMemo(() => {
+    if (!data?.entries) return [];
+    const q = search.trim().toLowerCase();
+    return data.entries.filter((e) => {
+      if (filterType !== 'all' && e.type !== filterType) return false;
+      if (!q) return true;
+      return e.value.toLowerCase().includes(q);
+    });
+  }, [data, search, filterType]);
+
+  const totalPages = Math.ceil(filtered.length / PAGE_SIZE);
+  const pageItems = filtered.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
+
+  function onSearchChange(v) { setSearch(v); setPage(0); }
+  function onTypeChange(v) { setFilterType(v); setPage(0); }
+
+  return (
+    <div className="modal-backdrop" onClick={onClose}>
+      <div className="modal lg" style={{ maxWidth: 720, maxHeight: '85vh', display: 'flex', flexDirection: 'column' }} onClick={(e) => e.stopPropagation()}>
+        <div className="modal-head">
+          <div>
+            <h3 style={{ margin: 0 }}>Содержимое: <code style={{ fontSize: 14 }}>{tag}</code></h3>
+            <small className="muted">{url}</small>
+          </div>
+          <button className="btn btn-ghost sm" onClick={onClose}>Закрыть</button>
+        </div>
+
+        {state === 'loading' && (
+          <div style={{ padding: 32, textAlign: 'center', color: 'var(--text-muted)' }}>
+            Скачивание и декомпиляция…<br />
+            <small>Может занять 10–30 секунд</small>
+          </div>
+        )}
+
+        {state === 'error' && (
+          <div style={{ padding: 24 }}>
+            <div className="conflict-banner danger"><span>✗</span><div>{error}</div></div>
+          </div>
+        )}
+
+        {state === 'done' && data && (
+          <>
+            <div style={{ padding: '10px 20px', borderBottom: '1px solid var(--border)' }}>
+              <div className="flex" style={{ gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
+                <span className="badge info">всего: {data.stats.total.toLocaleString()}</span>
+                {data.stats.domain > 0 && <span className="badge">доменов: {data.stats.domain.toLocaleString()}</span>}
+                {data.stats.suffix > 0 && <span className="badge">суффиксов: {data.stats.suffix.toLocaleString()}</span>}
+                {data.stats.keyword > 0 && <span className="badge">ключ. слов: {data.stats.keyword.toLocaleString()}</span>}
+                {data.stats.cidr > 0 && <span className="badge">CIDR: {data.stats.cidr.toLocaleString()}</span>}
+                {data.stats.regex > 0 && <span className="badge">regex: {data.stats.regex.toLocaleString()}</span>}
+                <span className="muted" style={{ fontSize: 12, marginLeft: 'auto' }}>
+                  кеш: {formatRelative(data.cachedAt)}
+                </span>
+              </div>
+            </div>
+            <div style={{ padding: '10px 20px', borderBottom: '1px solid var(--border)', display: 'flex', gap: 8 }}>
+              <input
+                ref={inputRef}
+                className="input"
+                style={{ flex: 1 }}
+                placeholder="Поиск: youtube, 149.154, .ru…"
+                value={search}
+                onChange={(e) => onSearchChange(e.target.value)}
+              />
+              <select className="select" style={{ width: 140 }} value={filterType} onChange={(e) => onTypeChange(e.target.value)}>
+                <option value="all">Все типы</option>
+                {Object.entries(TYPE_LABELS).map(([k, v]) => (
+                  <option key={k} value={k}>{v}</option>
+                ))}
+              </select>
+            </div>
+            <div style={{ flex: 1, overflow: 'auto', padding: '0 20px' }}>
+              {filtered.length === 0 ? (
+                <div className="muted" style={{ padding: '20px 0', textAlign: 'center' }}>Ничего не найдено</div>
+              ) : (
+                <>
+                  <div style={{ fontSize: 12, color: 'var(--text-muted)', padding: '8px 0' }}>
+                    Найдено: {filtered.length.toLocaleString()} / {data.stats.total.toLocaleString()}
+                    {totalPages > 1 && ` · страница ${page + 1} из ${totalPages}`}
+                  </div>
+                  <table className="table" style={{ fontSize: 13 }}>
+                    <thead>
+                      <tr><th style={{ width: 80 }}>Тип</th><th>Значение</th></tr>
+                    </thead>
+                    <tbody>
+                      {pageItems.map((e, i) => (
+                        <tr key={i}>
+                          <td><span className="badge">{TYPE_LABELS[e.type] || e.type}</span></td>
+                          <td className="text-mono" style={{ wordBreak: 'break-all', userSelect: 'all' }}>{e.value}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                  {totalPages > 1 && (
+                    <div className="flex" style={{ gap: 8, padding: '12px 0', justifyContent: 'center' }}>
+                      <button className="btn btn-ghost sm" disabled={page === 0} onClick={() => setPage(0)}>«</button>
+                      <button className="btn btn-ghost sm" disabled={page === 0} onClick={() => setPage((p) => p - 1)}>‹</button>
+                      <span className="muted" style={{ lineHeight: '28px', fontSize: 13 }}>{page + 1} / {totalPages}</span>
+                      <button className="btn btn-ghost sm" disabled={page >= totalPages - 1} onClick={() => setPage((p) => p + 1)}>›</button>
+                      <button className="btn btn-ghost sm" disabled={page >= totalPages - 1} onClick={() => setPage(totalPages - 1)}>»</button>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Каталог готовых rule-set источников для sing-box (.srs формат)
+// Источники: SagerNet (официальные, используются как встроенные), runetfreedom (RKN-реестр)
+const RULE_SET_CATALOG = [
+  {
+    tag: 'geosite-runet',
+    url: 'https://github.com/runetfreedom/russia-blocked-geosite/releases/latest/download/rule-set/ru.srs',
+    source: 'runetfreedom',
+    category: 'RU',
+    description: 'Заблокированные в РФ домены по реестру РКН. Обновляется автоматически из официальных источников.',
+    examples: ['rutracker.org', 'youtube.com', 'instagram.com', 'facebook.com', 'twitter.com'],
+    use: 'vpn — маршрутизировать заблокированные домены через VPN.',
+    builtIn: false,
+  },
+  {
+    tag: 'geoip-ru',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geoip@rule-set/geoip-ru.srs',
+    source: 'SagerNet/sing-geoip',
+    category: 'RU',
+    description: 'IP-диапазоны, зарегистрированные в России (RIPE NCC). Покрывает российские хостинги, банки, госсайты.',
+    examples: ['77.88.0.0/18 (Яндекс)', '95.173.128.0/19 (МТС)', '213.180.192.0/19 (Яндекс)'],
+    use: 'direct — российские сервисы без VPN.',
+    builtIn: true,
+  },
+  {
+    tag: 'geosite-category-ru',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-category-ru.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'RU',
+    description: 'Домены российских сервисов: Яндекс, VK, Mail.ru, Сбербанк, банки, госуслуги. Не заблокированные, а просто российские.',
+    examples: ['yandex.ru', 'vk.com', 'mail.ru', 'sberbank.ru', 'gosuslugi.ru', 'ozon.ru'],
+    use: 'direct — чтобы российские сайты открывались с российским IP (нужно для оплаты и т.п.).',
+    builtIn: true,
+  },
+  {
+    tag: 'geosite-google',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-google.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Сервисы',
+    description: 'Все домены Google: поиск, Gmail, YouTube, Drive, Maps, Google API, reCAPTCHA и пр.',
+    examples: ['google.com', 'googleapis.com', 'googlevideo.com', 'gstatic.com', 'ggpht.com'],
+    use: 'vpn — если Google заблокирован или нужна стабильная работа сервисов.',
+    builtIn: false,
+  },
+  {
+    tag: 'geosite-youtube',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-youtube.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Сервисы',
+    description: 'Только домены YouTube и связанных CDN. Меньше чем полный Google.',
+    examples: ['youtube.com', 'youtu.be', 'ytimg.com', 'googlevideo.com'],
+    use: 'vpn — для разблокировки YouTube.',
+    builtIn: false,
+  },
+  {
+    tag: 'geosite-telegram',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-telegram.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Сервисы',
+    description: 'Домены и IP Telegram. Включает CDN, API и голосовые серверы.',
+    examples: ['telegram.org', 't.me', 'telegra.ph', '149.154.160.0/20'],
+    use: 'vpn — разблокировка в РФ. direct — если хочешь избежать задержек.',
+    builtIn: false,
+  },
+  {
+    tag: 'geosite-openai',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-openai.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Сервисы',
+    description: 'ChatGPT, OpenAI API, Dall-E и другие сервисы OpenAI.',
+    examples: ['openai.com', 'chatgpt.com', 'oaistatic.com', 'oaiusercontent.com'],
+    use: 'vpn — OpenAI заблокирован в РФ и ряде других стран.',
+    builtIn: false,
+  },
+  {
+    tag: 'geosite-apple',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-apple.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Сервисы',
+    description: 'App Store, iCloud, Apple CDN, push-уведомления (APNs), iMessage.',
+    examples: ['apple.com', 'icloud.com', 'mzstatic.com', 'apple-cloudkit.com'],
+    use: 'direct — Apple обычно работает без VPN. vpn — если нужен другой регион App Store.',
+    builtIn: false,
+  },
+  {
+    tag: 'geosite-github',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-github.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Разработка',
+    description: 'GitHub, GitHub Actions, GitHub Pages, raw.githubusercontent.com.',
+    examples: ['github.com', 'githubusercontent.com', 'github.io', 'githubassets.com'],
+    use: 'vpn — если GitHub замедлен или заблокирован.',
+    builtIn: false,
+  },
+  {
+    tag: 'geosite-category-ads-all',
+    url: 'https://cdn.jsdelivr.net/gh/SagerNet/sing-geosite@rule-set/geosite-category-ads-all.srs',
+    source: 'SagerNet/sing-geosite',
+    category: 'Блокировка',
+    description: 'Рекламные сети, трекеры, аналитика. Тысячи доменов.',
+    examples: ['doubleclick.net', 'googlesyndication.com', 'amazon-adsystem.com'],
+    use: 'block — блокировка рекламы и трекеров на уровне DNS.',
+    builtIn: false,
+  },
+];
+
+function SubscriptionCard({ state, subscriptionUrl, setSubscriptionUrl, busy, onFetch, onForget, pushToast }) {
+  const [editing, setEditing] = useState(!state?.hasSubscription);
+
+  useEffect(() => { if (!state?.hasSubscription) setEditing(true); }, [state?.hasSubscription]);
+
+  const masked = state?.hasSubscription && !editing;
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h2>Подписка</h2>
+        {state?.hasSubscription && (
+          <span className="badge success">● активна</span>
+        )}
+      </div>
+
+      {masked ? (
+        <div className="kv-list">
+          <div className="row">
+            <span className="key">URL</span>
+            <span className="val text-mono">{state.subscriptionHost}</span>
+          </div>
+          <div className="row">
+            <span className="key">Серверов</span>
+            <span className="val">{state.servers?.length || 0}</span>
+          </div>
+          <div className="row">
+            <span className="key">Загружено</span>
+            <span className="val">{state.fetchedAt ? formatRelative(state.fetchedAt) : '—'}</span>
+          </div>
+        </div>
+      ) : (
+        <div className="field">
+          <span className="field-label">Subscription URL</span>
+          <div className="subscription-input">
+            <input
+              className="input"
+              value={subscriptionUrl}
+              onChange={(e) => setSubscriptionUrl(e.target.value)}
+              placeholder="https://provider.example/sub/..."
+            />
+          </div>
+        </div>
+      )}
+
+      <div className="btn-group" style={{ marginTop: 16 }}>
+        {masked ? (
+          <>
+            <button className="btn btn-secondary" onClick={() => setEditing(true)} disabled={busy}>Изменить URL</button>
+            <button className="btn btn-secondary" onClick={onFetch} disabled={busy}>↻ Обновить серверы</button>
+            <button className="btn btn-danger" onClick={onForget} disabled={busy}>Удалить подписку</button>
+          </>
+        ) : (
+          <>
+            <button
+              className="btn btn-primary"
+              onClick={async () => { await onFetch(); setEditing(false); }}
+              disabled={busy || !subscriptionUrl}
+            >
+              {busy ? 'Загрузка…' : 'Загрузить серверы'}
+            </button>
+            {state?.hasSubscription && (
+              <button className="btn btn-ghost" onClick={() => setEditing(false)}>Отмена</button>
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ConfigCard({ state, busy, onShowConfig, onClearConfig, pushToast }) {
+  const [validation, setValidation] = useState(null);
+  const [validating, setValidating] = useState(false);
+
+  async function validate() {
+    setValidating(true);
+    try {
+      const data = await api.configValidate();
+      setValidation(data);
+      pushToast({
+        kind: data.valid ? 'success' : 'danger',
+        title: data.valid ? 'Config валиден' : 'Config невалиден',
+        message: data.error || data.note,
+      });
+    } catch (err) {
+      pushToast({ kind: 'danger', title: 'Ошибка проверки', message: err.message });
+    } finally {
+      setValidating(false);
+    }
+  }
+
+  return (
+    <div className="card">
+      <div className="card-header">
+        <h2>sing-box config</h2>
+        {validation && (
+          <span className={`badge ${validation.valid ? 'success' : 'danger'}`}>
+            {validation.valid ? '✓ валиден' : '✗ ошибка'}
+          </span>
+        )}
+      </div>
+      <div className="kv-list">
+        <div className="row"><span className="key">Файл</span><span className="val">{state?.configExists ? 'есть' : 'нет'}</span></div>
+        <div className="row"><span className="key">Применено</span><span className="val">{state?.appliedAt ? formatRelative(state.appliedAt) : '—'}</span></div>
+      </div>
+      <div className="btn-group" style={{ marginTop: 16 }}>
+        <button className="btn btn-secondary" disabled={!state?.configExists} onClick={onShowConfig}>Показать config</button>
+        <button className="btn btn-secondary" disabled={validating || !state?.configExists} onClick={validate}>
+          {validating ? 'Проверяем…' : '✓ Валидировать'}
+        </button>
+        <button className="btn btn-danger" disabled={busy || !state?.configExists} onClick={onClearConfig}>
+          Сбросить config
+        </button>
+      </div>
+      {validation && !validation.valid && validation.error && (
+        <div className="conflict-banner danger" style={{ marginTop: 12 }}>
+          <span>✗</span><div>{validation.error}</div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+const CATALOG_CATEGORIES = ['Все', ...Array.from(new Set(RULE_SET_CATALOG.map((r) => r.category)))];
+
+function CatalogEntry({ entry, added, busy, onAdd, onLookup }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div style={{ border: '1px solid var(--border)', borderRadius: 8, padding: '10px 14px', marginBottom: 8 }}>
+      <div className="flex" style={{ alignItems: 'center', gap: 8 }}>
+        <div style={{ flex: 1 }}>
+          <div className="flex" style={{ alignItems: 'center', gap: 6, flexWrap: 'wrap' }}>
+            <strong className="text-mono" style={{ fontSize: 13 }}>{entry.tag}</strong>
+            <span className="badge info" style={{ fontSize: 11 }}>{entry.category}</span>
+            <span className="muted" style={{ fontSize: 12 }}>{entry.source}</span>
+            {entry.builtIn && (
+              <span className="badge success" style={{ fontSize: 11 }} title="Загружается автоматически при включённом RU direct">встроен</span>
+            )}
+          </div>
+          <div style={{ fontSize: 13, marginTop: 2, color: 'var(--text)' }}>{entry.description}</div>
+        </div>
+        <div className="flex" style={{ gap: 6, flexShrink: 0 }}>
+          <button
+            className="btn btn-ghost sm"
+            onClick={() => setOpen((o) => !o)}
+            title="Примеры и подсказка"
+          >
+            {open ? '▲' : '▼'}
+          </button>
+          <button
+            className="btn btn-ghost sm"
+            onClick={() => onLookup(entry)}
+            title="Просмотреть содержимое и искать внутри"
+          >
+            🔍
+          </button>
+          <button
+            className="btn btn-secondary sm"
+            disabled={busy || added}
+            onClick={() => onAdd(entry)}
+          >
+            {added ? '✓ добавлен' : '+ Добавить'}
+          </button>
+        </div>
+      </div>
+      {open && (
+        <div style={{ marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border)' }}>
+          <div style={{ fontSize: 12, marginBottom: 6 }}>
+            <span className="muted">Примеры содержимого: </span>
+            {entry.examples.map((ex, i) => (
+              <span key={i}>
+                <code style={{ background: 'var(--bg-muted)', borderRadius: 3, padding: '1px 5px', fontSize: 11 }}>{ex}</code>
+                {i < entry.examples.length - 1 ? ' ' : ''}
+              </span>
+            ))}
+          </div>
+          <div style={{ fontSize: 12 }}>
+            <span className="muted">Рекомендуемый outbound: </span>
+            <span>{entry.use}</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SagerNetSearchCard({ ruleSets, onAdd, busy }) {
+  const [open, setOpen] = useState(false);
+  const [status, setStatus] = useState('idle'); // idle | loading | done | error
+  const [catalog, setCatalog] = useState(null); // { geosite, geoip, cachedAt }
+  const [error, setError] = useState('');
+  const [query, setQuery] = useState('');
+  const [repoFilter, setRepoFilter] = useState('all'); // all | geosite | geoip
+
+  function load() {
+    if (status !== 'idle') return;
+    setStatus('loading');
+    api.ruleSets.sagernetCatalog()
+      .then((d) => { setCatalog(d); setStatus('done'); })
+      .catch((err) => { setError(err.message); setStatus('error'); });
+  }
+
+  function toggle() {
+    if (!open && status === 'idle') load();
+    setOpen((o) => !o);
+  }
+
+  const results = useMemo(() => {
+    if (!catalog) return [];
+    const q = query.trim().toLowerCase();
+    const toItem = (repo) => (name) => ({ name, repo, url: `https://cdn.jsdelivr.net/gh/SagerNet/sing-${repo}@rule-set/${name}.srs` });
+    const gs = repoFilter !== 'geoip' ? (catalog.geosite || []).map(toItem('geosite')) : [];
+    const gi = repoFilter !== 'geosite' ? (catalog.geoip || []).map(toItem('geoip')) : [];
+    const all = [...gs, ...gi];
+    if (!q) return all;
+    return all.filter((item) => item.name.includes(q));
+  }, [catalog, query, repoFilter]);
+
+  const addedTags = new Set(ruleSets.map((rs) => rs.tag));
+
+  return (
+    <div className="card">
+      <div className="card-header" style={{ cursor: 'pointer' }} onClick={toggle}>
+        <h2>Поиск в каталоге SagerNet</h2>
+        <div className="flex" style={{ gap: 8, alignItems: 'center' }}>
+          {status === 'done' && catalog && (
+            <span className="badge info" style={{ fontSize: 11 }}>
+              {(catalog.geosite?.length || 0) + (catalog.geoip?.length || 0)} rule-sets
+            </span>
+          )}
+          <span className="muted" style={{ fontSize: 13 }}>{open ? '▲' : '▼'}</span>
+        </div>
+      </div>
+
+      {open && (
+        <>
+          {status === 'loading' && (
+            <div style={{ padding: '20px 0', textAlign: 'center', color: 'var(--text-muted)' }}>
+              Загрузка списка из GitHub…
+            </div>
+          )}
+          {status === 'error' && (
+            <div className="conflict-banner danger" style={{ marginTop: 8 }}>
+              <span>✗</span><div>{error}</div>
+            </div>
+          )}
+          {status === 'done' && (
+            <>
+              <small className="muted" style={{ display: 'block', marginBottom: 12 }}>
+                Полный список rule-sets из репозиториев <strong>SagerNet/sing-geosite</strong> и <strong>SagerNet/sing-geoip</strong>.
+                Ищите по имени: <code>steam</code>, <code>gaming</code>, <code>netflix</code>, <code>apple</code> и т.д.
+                Кеш обновляется раз в 24 ч.
+              </small>
+              {catalog.fallback && (
+                <div className="conflict-banner warning" style={{ marginBottom: 12 }}>
+                  <span>!</span><div>{catalog.warning || 'Показан встроенный fallback-каталог.'}</div>
+                </div>
+              )}
+              <div className="flex" style={{ gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+                <input
+                  className="input"
+                  style={{ flex: 1, minWidth: 180 }}
+                  placeholder="steam, gaming, netflix, cloudflare…"
+                  value={query}
+                  onChange={(e) => setQuery(e.target.value)}
+                  autoFocus
+                />
+                <select className="select" style={{ width: 130 }} value={repoFilter} onChange={(e) => setRepoFilter(e.target.value)}>
+                  <option value="all">geosite + geoip</option>
+                  <option value="geosite">только geosite</option>
+                  <option value="geoip">только geoip</option>
+                </select>
+              </div>
+
+              {query.trim() === '' ? (
+                <div className="muted" style={{ fontSize: 13, padding: '8px 0' }}>
+                  Введите запрос — покажем совпадения ({(catalog.geosite?.length || 0) + (catalog.geoip?.length || 0)} доступно)
+                </div>
+              ) : results.length === 0 ? (
+                <div className="muted" style={{ fontSize: 13, padding: '8px 0' }}>Ничего не найдено</div>
+              ) : (
+                <table className="table" style={{ fontSize: 13 }}>
+                  <thead>
+                    <tr>
+                      <th style={{ width: 60 }}>Тип</th>
+                      <th>Тег</th>
+                      <th style={{ width: 120 }}></th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {results.slice(0, 100).map((item) => (
+                      <tr key={item.name}>
+                        <td><span className={`badge ${item.repo === 'geosite' ? 'info' : ''}`} style={{ fontSize: 11 }}>{item.repo}</span></td>
+                        <td className="text-mono">{item.name}</td>
+                        <td style={{ textAlign: 'right' }}>
+                          {addedTags.has(item.name) ? (
+                            <span className="badge success" style={{ fontSize: 11 }}>✓ добавлен</span>
+                          ) : (
+                            <button
+                              className="btn btn-secondary sm"
+                              disabled={busy}
+                              onClick={() => onAdd({ tag: item.name, url: item.url })}
+                            >
+                              + Добавить
+                            </button>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+              {results.length > 100 && (
+                <div className="muted" style={{ fontSize: 12, marginTop: 8 }}>
+                  Показано 100 из {results.length} — уточните запрос
+                </div>
+              )}
+              <div className="muted" style={{ fontSize: 11, marginTop: 12 }}>
+                кеш: {catalog.cachedAt ? formatRelative(catalog.cachedAt) : '—'}
+              </div>
+            </>
+          )}
+        </>
+      )}
+    </div>
+  );
+}
+
+function RuleSetsCard({ pushToast }) {
+  const [ruleSets, setRuleSets] = useState([]);
+  const [newTag, setNewTag] = useState('');
+  const [newUrl, setNewUrl] = useState('');
+  const [busy, setBusy] = useState(false);
+  const [search, setSearch] = useState('');
+  const [category, setCategory] = useState('Все');
+  const [lookup, setLookup] = useState(null); // { tag, url }
+
+  useEffect(() => {
+    api.ruleSets.get().then((d) => setRuleSets(d.ruleSets || [])).catch(() => {});
+  }, []);
+
+  async function save(next) {
+    setBusy(true);
+    try {
+      const data = await api.ruleSets.save(next);
+      setRuleSets(data.ruleSets || []);
+      pushToast({ kind: 'success', title: 'Rule-sets сохранены' });
+    } catch (err) {
+      pushToast({ kind: 'danger', title: 'Ошибка', message: err.message });
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function addNew() {
+    const tag = newTag.trim();
+    const url = newUrl.trim();
+    if (!tag || !url) return;
+    if (!/^[a-z0-9][a-z0-9_.@!-]*$/i.test(tag)) {
+      pushToast({ kind: 'danger', title: 'Невалидный тег', message: 'Буквы, цифры и символы - _ . @ !' });
+      return;
+    }
+    if (ruleSets.some((rs) => rs.tag === tag)) {
+      pushToast({ kind: 'danger', title: 'Тег уже существует' });
+      return;
+    }
+    const next = [...ruleSets, { tag, url }];
+    setNewTag('');
+    setNewUrl('');
+    save(next);
+  }
+
+  function remove(tag) {
+    save(ruleSets.filter((rs) => rs.tag !== tag));
+  }
+
+  function addFromCatalog(entry) {
+    if (ruleSets.some((rs) => rs.tag === entry.tag)) {
+      pushToast({ kind: 'info', title: `${entry.tag} уже добавлен` });
+      return;
+    }
+    save([...ruleSets, { tag: entry.tag, url: entry.url }]);
+  }
+
+  const q = search.trim().toLowerCase();
+  const filtered = RULE_SET_CATALOG.filter((entry) => {
+    if (category !== 'Все' && entry.category !== category) return false;
+    if (!q) return true;
+    return (
+      entry.tag.includes(q) ||
+      entry.description.toLowerCase().includes(q) ||
+      entry.source.toLowerCase().includes(q) ||
+      entry.examples.some((ex) => ex.toLowerCase().includes(q))
+    );
+  });
+
+  return (
+    <>
+    <div className="card">
+      <div className="card-header">
+        <h2>Источники (rule-sets)</h2>
+      </div>
+      <small className="muted" style={{ display: 'block', marginBottom: 16 }}>
+        Geo-базы в формате <strong>.srs</strong> (sing-box). Sing-box скачает их автоматически при применении.
+        <strong> .dat файлы (v2ray) не поддерживаются</strong>.
+      </small>
+
+      {ruleSets.length > 0 && (
+        <>
+          <div className="field-label" style={{ marginBottom: 6 }}>Подключённые</div>
+          <table className="table" style={{ marginBottom: 20 }}>
+            <thead>
+              <tr>
+                <th>Тег</th>
+                <th>URL</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+              {ruleSets.map((rs) => (
+                <tr key={rs.tag}>
+                  <td className="text-mono" style={{ whiteSpace: 'nowrap' }}>{rs.tag}</td>
+                  <td className="muted" style={{ fontSize: 12, wordBreak: 'break-all' }}>{rs.url}</td>
+                  <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
+                    <button className="btn btn-ghost sm" style={{ marginRight: 4 }} onClick={() => setLookup(rs)} title="Просмотреть содержимое">🔍</button>
+                    <button className="btn btn-ghost sm" disabled={busy} onClick={() => remove(rs.tag)}>×</button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </>
+      )}
+
+      <div className="field-label" style={{ marginBottom: 8 }}>Каталог</div>
+      <div className="flex" style={{ gap: 8, marginBottom: 12, flexWrap: 'wrap' }}>
+        <input
+          className="input"
+          style={{ flex: 1, minWidth: 180 }}
+          placeholder="Поиск: telegram, реклама, youtube…"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+        />
+        <select className="select" style={{ width: 140 }} value={category} onChange={(e) => setCategory(e.target.value)}>
+          {CATALOG_CATEGORIES.map((c) => <option key={c}>{c}</option>)}
+        </select>
+      </div>
+
+      {filtered.length === 0 && (
+        <div className="muted" style={{ fontSize: 13, marginBottom: 12 }}>Ничего не найдено</div>
+      )}
+      {filtered.map((entry) => (
+        <CatalogEntry
+          key={entry.tag}
+          entry={entry}
+          added={ruleSets.some((rs) => rs.tag === entry.tag)}
+          busy={busy}
+          onAdd={addFromCatalog}
+          onLookup={(e) => setLookup(e)}
+        />
+      ))}
+
+      <div className="field" style={{ marginTop: 16 }}>
+        <span className="field-label">Добавить свой .srs</span>
+        <div className="flex" style={{ gap: 8, flexWrap: 'wrap' }}>
+          <input
+            className="input"
+            style={{ width: 200 }}
+            placeholder="тег (напр. geosite-custom)"
+            value={newTag}
+            onChange={(e) => setNewTag(e.target.value)}
+          />
+          <input
+            className="input"
+            style={{ flex: 1, minWidth: 200 }}
+            placeholder="https://…/rule-set.srs"
+            value={newUrl}
+            onChange={(e) => setNewUrl(e.target.value)}
+          />
+          <button className="btn btn-primary" disabled={busy || !newTag || !newUrl} onClick={addNew}>
+            Добавить
+          </button>
+        </div>
+      </div>
+    </div>
+    <SagerNetSearchCard ruleSets={ruleSets} onAdd={addFromCatalog} busy={busy} />
+    {lookup && (
+      <RuleSetLookupModal
+        tag={lookup.tag}
+        url={lookup.url}
+        onClose={() => setLookup(null)}
+      />
+    )}
+    </>
+  );
+}
+
+function PortsCard({ state }) {
+  const isClient = state?.mode === 'client';
+  return (
+    <div className="card">
+      <div className="card-header"><h2>{isClient ? 'Локальные порты' : 'Порты и маршруты'}</h2></div>
+      <div className="kv-list">
+        <div className="row"><span className="key">UI</span><span className="val text-mono">:{state?.port || 3456}</span></div>
+        <div className="row"><span className="key">HTTP/SOCKS proxy</span><span className="val text-mono">{isClient ? '127.0.0.1' : state?.proxyBindIp || '0.0.0.0'}:{state?.proxyPort || 8080}</span></div>
+        {!isClient && <div className="row"><span className="key">TProxy</span><span className="val text-mono">:{state?.tproxyPort || 7895}</span></div>}
+        <div className="row"><span className="key">RU direct (geoip-ru)</span><span className="val">{state?.routingRuDirect ? 'включено' : 'выключено'}</span></div>
+      </div>
+    </div>
+  );
+}
+
+export function SettingsPage({
+  state, subscriptionUrl, setSubscriptionUrl, busy,
+  onFetchSubscription, onForgetSubscription, onShowConfig, onClearConfig, pushToast,
+}) {
+  return (
+    <div className="section-stack">
+      <SubscriptionCard
+        state={state}
+        subscriptionUrl={subscriptionUrl}
+        setSubscriptionUrl={setSubscriptionUrl}
+        busy={busy}
+        onFetch={onFetchSubscription}
+        onForget={onForgetSubscription}
+        pushToast={pushToast}
+      />
+      <ConfigCard
+        state={state}
+        busy={busy}
+        onShowConfig={onShowConfig}
+        onClearConfig={onClearConfig}
+        pushToast={pushToast}
+      />
+      <RuleSetsCard pushToast={pushToast} />
+      <PortsCard state={state} />
+    </div>
+  );
+}

src/web/components/Sidebar.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+const NAV = [
+  { id: 'overview',   label: 'Обзор',         ico: '◉' },
+  { id: 'servers',    label: 'Серверы',       ico: '⋆' },
+  { id: 'routing',    label: 'Маршрутизация', ico: '⇅' },
+  { id: 'logs',       label: 'Логи',          ico: '≡' },
+  { id: 'settings',   label: 'Настройки',     ico: '⚙' },
+];
+
+export function Sidebar({ active, onChange, badges = {}, mode = 'gateway' }) {
+  const items = mode === 'client'
+    ? NAV.filter((item) => item.id !== 'routing')
+    : NAV;
+
+  return (
+    <nav className="sidebar">
+      {items.map((item) => {
+        const badge = badges[item.id];
+        return (
+          <button
+            key={item.id}
+            type="button"
+            className={`sidebar-item${active === item.id ? ' active' : ''}`}
+            onClick={() => onChange(item.id)}
+          >
+            <span className="ico">{item.ico}</span>
+            {item.label}
+            {badge && (
+              <span className={`badge ${badge.kind || ''}`}>{badge.text}</span>
+            )}
+          </button>
+        );
+      })}
+    </nav>
+  );
+}