Refine proxy routing and UI state handling

AGENTS.md

@@ -49,6 +49,7 @@ ProxyWarden - standalone Windows desktop client в корне репозитор
 - В UI держать стиль компактной Windows-утилиты, а не landing/dashboard. Использовать existing `Button`, `Tabs`, `ServiceControlRow`, `StatusPill`, `Field`, `ActionMenu`, `LogDock`.
 - Всплывающие подсказки при наведении делать быстрыми, кастомными и читаемыми: темная compact-плашка с мягкой рамкой/тенью, появление ~120ms, без нативного browser `title` как основного UI. Для иконок расширять общий `IconButton`/tooltip-паттерн, а не дублировать JSX/CSS локально.
 - Apply actions должны быть disabled с объяснением, когда нет приложений, ProxiFyre отсутствует, proxy input неверный или local route не готов.
+- Не оставлять dev-серверы (`npm run dev`, `npm run tauri -- dev`, preview-серверы) запущенными после проверки. Если сервер был поднят агентом, остановить его перед финальным ответом.
 
 ## Проверка
 

src-tauri/Cargo.toml

@@ -18,5 +18,5 @@ serde = { version = "1", features = ["derive"] }
 serde_json = "1"
 tauri-plugin-dialog = "2.7.1"
 base64 = "0.22"
-reqwest = { version = "0.12", default-features = false, features = ["blocking", "rustls-tls"] }
+reqwest = { version = "0.12", default-features = false, features = ["blocking", "rustls-tls", "socks"] }
 url = "2"

src-tauri/src/commands.rs

@@ -58,6 +58,44 @@ const NDISAPI_RELEASE_API_URL: &str =
     "https://api.github.com/repos/wiresock/ndisapi/releases/latest";
 const VC_REDIST_X64_URL: &str = "https://aka.ms/vc14/vc_redist.x64.exe";
 const VC_REDIST_X86_URL: &str = "https://aka.ms/vc14/vc_redist.x86.exe";
+const PROXY_CHECK_TIMEOUT: Duration = Duration::from_secs(4);
+const PROXY_CHECK_CONNECT_TIMEOUT: Duration = Duration::from_secs(2);
+const PROXY_CHECK_USER_AGENT: &str = "proxywarden route-check";
+
+const DEFAULT_PROXY_PROBES: &[ProxyProbeEndpoint] = &[
+    ProxyProbeEndpoint {
+        id: "cloudflare-trace",
+        name: "Cloudflare Trace",
+        url: "https://www.cloudflare.com/cdn-cgi/trace",
+        ip_source: ProbeIpSource::CloudflareTrace,
+    },
+    ProxyProbeEndpoint {
+        id: "cloudflare-speed",
+        name: "Cloudflare Speed",
+        url: "https://speed.cloudflare.com/meta",
+        ip_source: ProbeIpSource::JsonField("clientIp"),
+    },
+    ProxyProbeEndpoint {
+        id: "ipify",
+        name: "ipify",
+        url: "https://api.ipify.org?format=json",
+        ip_source: ProbeIpSource::JsonField("ip"),
+    },
+];
+
+#[derive(Debug, Clone, Copy)]
+pub struct ProxyProbeEndpoint {
+    id: &'static str,
+    name: &'static str,
+    url: &'static str,
+    ip_source: ProbeIpSource,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum ProbeIpSource {
+    CloudflareTrace,
+    JsonField(&'static str),
+}
 
 #[derive(Debug, Clone)]
 pub struct CommandState {
@@ -239,6 +277,31 @@ pub struct PingServerResponse {
     pub error: Option<String>,
 }
 
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ProxyProbeResponse {
+    pub id: String,
+    pub name: String,
+    pub url: String,
+    pub ok: bool,
+    pub status: Option<u16>,
+    pub latency: Option<u128>,
+    pub ip: Option<String>,
+    pub error: Option<String>,
+}
+
+#[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
+#[serde(rename_all = "camelCase")]
+pub struct ProxyTargetCheckResponse {
+    pub tag: String,
+    pub server: String,
+    pub server_port: u16,
+    pub ok: bool,
+    pub latency: Option<u128>,
+    pub error: Option<String>,
+    pub probes: Vec<ProxyProbeResponse>,
+}
+
 #[derive(Debug, Clone, PartialEq, Eq, Serialize, Deserialize)]
 #[serde(rename_all = "camelCase")]
 pub struct GenerateSingBoxConfigResponse {
@@ -610,7 +673,7 @@ pub fn ping_all_singbox_servers(
 #[tauri::command]
 pub fn ping_proxy_target(
     input: PingProxyTargetInputDto,
-) -> Result<PingServerResponse, CommandError> {
+) -> Result<ProxyTargetCheckResponse, CommandError> {
     ping_proxy_target_endpoint(input)
 }
 
@@ -1328,7 +1391,14 @@ pub fn ping_all_singbox_servers_in_storage(
 
 pub fn ping_proxy_target_endpoint(
     input: PingProxyTargetInputDto,
-) -> Result<PingServerResponse, CommandError> {
+) -> Result<ProxyTargetCheckResponse, CommandError> {
+    ping_proxy_target_endpoint_with_probes(input, DEFAULT_PROXY_PROBES)
+}
+
+pub fn ping_proxy_target_endpoint_with_probes(
+    input: PingProxyTargetInputDto,
+    probes: &[ProxyProbeEndpoint],
+) -> Result<ProxyTargetCheckResponse, CommandError> {
     let host = input.host.trim();
     if host.is_empty() {
         return Err(CommandError::new(
@@ -1337,7 +1407,40 @@ pub fn ping_proxy_target_endpoint(
         ));
     }
 
-    Ok(ping_endpoint("external-proxy", host, input.port))
+    let tcp = ping_endpoint("route-proxy", host, input.port);
+    if !tcp.ok {
+        return Ok(ProxyTargetCheckResponse {
+            tag: "route-proxy".to_string(),
+            server: host.to_string(),
+            server_port: input.port,
+            ok: false,
+            latency: tcp.latency,
+            error: tcp.error,
+            probes: Vec::new(),
+        });
+    }
+
+    let probe_results = run_proxy_probes(host, input.port, probes);
+    let has_probe_success = probe_results.iter().any(|probe| probe.ok);
+    let ok = probe_results.is_empty() || has_probe_success;
+    let error = if ok {
+        None
+    } else {
+        Some(
+            "SOCKS5 порт доступен, но тестовые HTTP endpoints не ответили через прокси."
+                .to_string(),
+        )
+    };
+
+    Ok(ProxyTargetCheckResponse {
+        tag: "route-proxy".to_string(),
+        server: host.to_string(),
+        server_port: input.port,
+        ok,
+        latency: tcp.latency,
+        error,
+        probes: probe_results,
+    })
 }
 
 pub fn generate_singbox_config_with_services<C>(
@@ -1479,6 +1582,167 @@ fn ping_endpoint(tag: &str, server: &str, server_port: u16) -> PingServerRespons
     }
 }
 
+fn run_proxy_probes(
+    proxy_host: &str,
+    proxy_port: u16,
+    probes: &[ProxyProbeEndpoint],
+) -> Vec<ProxyProbeResponse> {
+    if probes.is_empty() {
+        return Vec::new();
+    }
+
+    let proxy_url = socks5h_proxy_url(proxy_host, proxy_port);
+    let client = match reqwest::Proxy::all(&proxy_url).and_then(|proxy| {
+        reqwest::blocking::Client::builder()
+            .timeout(PROXY_CHECK_TIMEOUT)
+            .connect_timeout(PROXY_CHECK_CONNECT_TIMEOUT)
+            .proxy(proxy)
+            .build()
+    }) {
+        Ok(client) => client,
+        Err(error) => {
+            return probes
+                .iter()
+                .map(|probe| {
+                    failed_probe(
+                        *probe,
+                        format!("Не удалось подготовить SOCKS5 проверку: {error}"),
+                    )
+                })
+                .collect();
+        }
+    };
+
+    let handles = probes
+        .iter()
+        .copied()
+        .map(|probe| {
+            let client = client.clone();
+            std::thread::spawn(move || run_proxy_probe(&client, probe))
+        })
+        .collect::<Vec<_>>();
+
+    handles
+        .into_iter()
+        .zip(probes.iter().copied())
+        .map(|(handle, probe)| {
+            handle
+                .join()
+                .unwrap_or_else(|_| failed_probe(probe, "Проверка была прервана.".to_string()))
+        })
+        .collect()
+}
+
+fn run_proxy_probe(
+    client: &reqwest::blocking::Client,
+    probe: ProxyProbeEndpoint,
+) -> ProxyProbeResponse {
+    let started = Instant::now();
+    let response = match client
+        .get(probe.url)
+        .header(reqwest::header::USER_AGENT, PROXY_CHECK_USER_AGENT)
+        .send()
+    {
+        Ok(response) => response,
+        Err(error) => return failed_probe(probe, format!("HTTP через SOCKS5 не прошел: {error}")),
+    };
+
+    let status = response.status();
+    let status_code = status.as_u16();
+    let body = match response.text() {
+        Ok(body) => body,
+        Err(error) => {
+            return failed_probe_with_status(
+                probe,
+                status_code,
+                format!("Ответ не прочитан: {error}"),
+            )
+        }
+    };
+    let latency = started.elapsed().as_millis();
+
+    if !status.is_success() {
+        return ProxyProbeResponse {
+            id: probe.id.to_string(),
+            name: probe.name.to_string(),
+            url: probe.url.to_string(),
+            ok: false,
+            status: Some(status_code),
+            latency: Some(latency),
+            ip: None,
+            error: Some(format!("HTTP {status_code}")),
+        };
+    }
+
+    let ip = extract_probe_ip(probe, &body);
+
+    ProxyProbeResponse {
+        id: probe.id.to_string(),
+        name: probe.name.to_string(),
+        url: probe.url.to_string(),
+        ok: true,
+        status: Some(status_code),
+        latency: Some(latency),
+        ip,
+        error: None,
+    }
+}
+
+fn failed_probe(probe: ProxyProbeEndpoint, error: String) -> ProxyProbeResponse {
+    failed_probe_with_status(probe, 0, error)
+}
+
+fn failed_probe_with_status(
+    probe: ProxyProbeEndpoint,
+    status: u16,
+    error: String,
+) -> ProxyProbeResponse {
+    ProxyProbeResponse {
+        id: probe.id.to_string(),
+        name: probe.name.to_string(),
+        url: probe.url.to_string(),
+        ok: false,
+        status: (status > 0).then_some(status),
+        latency: None,
+        ip: None,
+        error: Some(error),
+    }
+}
+
+fn socks5h_proxy_url(host: &str, port: u16) -> String {
+    let host = host.trim().trim_start_matches('[').trim_end_matches(']');
+    if host.contains(':') {
+        format!("socks5h://[{host}]:{port}")
+    } else {
+        format!("socks5h://{host}:{port}")
+    }
+}
+
+fn extract_probe_ip(probe: ProxyProbeEndpoint, body: &str) -> Option<String> {
+    match probe.ip_source {
+        ProbeIpSource::CloudflareTrace => body
+            .lines()
+            .find_map(|line| line.strip_prefix("ip=").and_then(normalize_ip)),
+        ProbeIpSource::JsonField(field) => serde_json::from_str::<serde_json::Value>(body)
+            .ok()
+            .and_then(|value| {
+                value
+                    .get(field)
+                    .and_then(|field| field.as_str())
+                    .and_then(normalize_ip)
+            }),
+    }
+}
+
+fn normalize_ip(value: &str) -> Option<String> {
+    let candidate = value.trim().trim_matches('"');
+    if candidate.parse::<IpAddr>().is_ok() {
+        Some(candidate.to_string())
+    } else {
+        None
+    }
+}
+
 fn local_lan_ipv4() -> Option<String> {
     let socket = UdpSocket::bind("0.0.0.0:0").ok()?;
     socket.connect("8.8.8.8:80").ok()?;

src-tauri/tests/command_tests.rs

@@ -222,17 +222,21 @@ fn ping_proxy_target_reports_open_tcp_endpoint() {
     let listener = TcpListener::bind("127.0.0.1:0").expect("bind local listener");
     let port = listener.local_addr().expect("read local addr").port();
 
-    let result = commands::ping_proxy_target_endpoint(commands::PingProxyTargetInputDto {
+    let result = commands::ping_proxy_target_endpoint_with_probes(
-        host: "127.0.0.1".to_string(),
+        commands::PingProxyTargetInputDto {
-        port,
+            host: "127.0.0.1".to_string(),
-    })
+            port,
+        },
+        &[],
+    )
     .expect("ping should return response");
 
-    assert_eq!(result.tag, "external-proxy");
+    assert_eq!(result.tag, "route-proxy");
     assert_eq!(result.server, "127.0.0.1");
     assert_eq!(result.server_port, port);
     assert!(result.ok);
     assert!(result.latency.is_some());
+    assert!(result.probes.is_empty());
 }
 
 #[test]

src-tauri/tests/singbox_service_tests.rs

@@ -55,7 +55,8 @@ noise
 #[test]
 fn safe_install_dir_allows_only_proxywarden_singbox_folder() {
     assert!(
-        ensure_safe_singbox_install_dir(Path::new(r"C:\Program Files\ProxyWarden\sing-box")).is_ok()
+        ensure_safe_singbox_install_dir(Path::new(r"C:\Program Files\ProxyWarden\sing-box"))
+            .is_ok()
     );
     assert!(ensure_safe_singbox_install_dir(Path::new(r"C:\Windows")).is_err());
     assert!(ensure_safe_singbox_install_dir(Path::new(r"C:\Program Files\sing-box")).is_err());
@@ -63,7 +64,12 @@ fn safe_install_dir_allows_only_proxywarden_singbox_folder() {
 
 #[test]
 fn service_control_script_targets_named_service_and_action() {
-    let script = service_control_script(SingBoxServiceAction::Start, "ProxyWardenSingBox", None, None);
+    let script = service_control_script(
+        SingBoxServiceAction::Start,
+        "ProxyWardenSingBox",
+        None,
+        None,
+    );
 
     assert!(script.contains("$serviceName = 'ProxyWardenSingBox'"));
     assert!(script.contains("$action = 'start'"));
@@ -84,9 +90,9 @@ fn service_control_script_syncs_generated_config_before_start() {
     assert!(script.contains(
         "$configSource = 'C:\\ProgramData\\ProxyWarden\\generated\\sing-box-config.json'"
     ));
-    assert!(script.contains(
+    assert!(
-        "$configTarget = 'C:\\Program Files\\ProxyWarden\\sing-box\\config.json'"
+        script.contains("$configTarget = 'C:\\Program Files\\ProxyWarden\\sing-box\\config.json'")
-    ));
+    );
     assert!(script.contains("Copy-Item -LiteralPath $configSource"));
     assert!(script.contains("'config_sync_failed'"));
 }
@@ -119,7 +125,9 @@ fn detected_singbox(binary_exists: bool, wrapper_exists: bool, running: bool) ->
     DetectedSingBox {
         install_dir: PathBuf::from(r"C:\Program Files\ProxyWarden\sing-box"),
         executable_path: PathBuf::from(r"C:\Program Files\ProxyWarden\sing-box\sing-box.exe"),
-        wrapper_path: PathBuf::from(r"C:\Program Files\ProxyWarden\sing-box\ProxyWardenSingBox.exe"),
+        wrapper_path: PathBuf::from(
+            r"C:\Program Files\ProxyWarden\sing-box\ProxyWardenSingBox.exe",
+        ),
         binary_exists,
         wrapper_exists,
         running,

src/api/tauriCommands.ts

@@ -75,6 +75,27 @@ export interface PingServerResponse {
   error?: string;
 }
 
+export interface ProxyProbeResponse {
+  id: string;
+  name: string;
+  url: string;
+  ok: boolean;
+  status?: number;
+  latency?: number;
+  ip?: string;
+  error?: string;
+}
+
+export interface ProxyTargetCheckResponse {
+  tag: string;
+  server: string;
+  serverPort: number;
+  ok: boolean;
+  latency?: number;
+  error?: string;
+  probes: ProxyProbeResponse[];
+}
+
 export interface GenerateSingBoxConfigResponse {
   success: boolean;
   message: string;
@@ -184,8 +205,8 @@ export function pingAllSingBoxServers(): Promise<PingServerResponse[]> {
   return invoke<PingServerResponse[]>('ping_all_singbox_servers');
 }
 
-export function pingProxyTarget(host: string, port: number): Promise<PingServerResponse> {
+export function pingProxyTarget(host: string, port: number): Promise<ProxyTargetCheckResponse> {
-  return invoke<PingServerResponse>('ping_proxy_target', {
+  return invoke<ProxyTargetCheckResponse>('ping_proxy_target', {
     input: { host, port },
   });
 }

src/styles/app.css

@@ -1,5 +1,7 @@
 :root {
   --app-footer-height: 54px;
+  --app-change-dock-height: 0px;
+  --change-row-count: 1;
   --app-header-row-height: 50px;
   --app-tab-height: 46px;
   --app-header-height: calc(var(--app-header-row-height) + var(--app-tab-height));
@@ -630,7 +632,7 @@ button:disabled {
   min-width: 0;
 }
 
-.ui-service-text > strong,
+.ui-service-title-line > strong,
 .ui-service-text > span {
   display: block;
   overflow-wrap: anywhere;
@@ -640,12 +642,22 @@ button:disabled {
   color: #8d99ae;
 }
 
+.ui-service-title-line {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.ui-service-title-line > strong {
+  min-width: 0;
+}
+
 .ui-service-inline-actions {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex: 0 0 auto;
   gap: 6px;
-  margin-top: 6px;
 }
 
 .ui-service-actions {
@@ -680,14 +692,18 @@ button:disabled {
   height: 100vh;
   overflow: hidden;
   background: #101216;
-  padding: var(--app-header-height) 0 var(--app-footer-height);
+  padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height));
+}
+
+.simple-shell.has-change-dock {
+  --app-change-dock-height: clamp(60px, calc(20px + (var(--change-row-count) * 26px)), 220px);
 }
 
 .simple-panel {
   display: grid;
   align-content: start;
   min-height: 0;
-  height: calc(100vh - var(--app-header-height) - var(--app-footer-height));
+  height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height));
   width: 100%;
   border: 0;
   border-radius: 0;
@@ -871,12 +887,11 @@ button:disabled {
 }
 
 .proxy-overview {
-  display: grid;
+  display: block;
-  gap: 10px;
   border: 1px solid #2b3342;
   border-radius: 4px;
   background: #111720;
-  padding: 10px;
+  padding: 8px 10px;
 }
 
 .proxy-overview.ok {
@@ -895,63 +910,34 @@ button:disabled {
   border-color: rgba(59, 130, 246, 0.42);
 }
 
-.proxy-overview-head {
-  display: flex;
-  align-items: end;
-  justify-content: space-between;
-  gap: 12px;
-  min-width: 0;
-}
-
-.proxy-overview-head span {
-  display: block;
-  color: #8d99ae;
-  font-size: 12px;
-}
-
-.proxy-overview-head h2 {
-  margin: 2px 0 0;
-  color: #eef2ff;
-  font-size: 17px;
-  letter-spacing: 0;
-}
-
-.proxy-overview-head > strong {
-  min-width: 0;
-  color: #bfdbfe;
-  font-size: 13px;
-  overflow-wrap: anywhere;
-  text-align: right;
-}
-
 .summary-panel {
   gap: 12px;
 }
 
-.summary-hero {
+.summary-status-control {
   display: grid;
-  grid-template-columns: auto minmax(0, 1fr);
+  grid-template-columns: auto minmax(0, 1fr) auto;
   gap: 12px;
-  align-items: start;
+  align-items: center;
   border: 1px solid #2b3342;
   border-radius: 4px;
   background: #151923;
-  padding: 14px;
+  padding: 13px 14px;
 }
 
-.summary-hero.ok {
+.summary-status-control.ok {
   border-color: rgba(34, 197, 94, 0.44);
 }
 
-.summary-hero.warning {
+.summary-status-control.warning {
   border-color: rgba(245, 158, 11, 0.48);
 }
 
-.summary-hero.error {
+.summary-status-control.error {
   border-color: rgba(239, 68, 68, 0.52);
 }
 
-.summary-hero.checking {
+.summary-status-control.checking {
   border-color: rgba(59, 130, 246, 0.54);
 }
 
@@ -985,14 +971,18 @@ button:disabled {
   animation: spin 0.75s linear infinite;
 }
 
-.summary-hero span,
+.summary-status-copy span,
 .summary-card-label {
   color: #8d99ae;
   font-size: 12px;
   font-weight: 700;
 }
 
-.summary-hero strong {
+.summary-status-copy {
+  min-width: 0;
+}
+
+.summary-status-copy strong {
   display: block;
   color: #f8fafc;
   font-size: 22px;
@@ -1000,14 +990,17 @@ button:disabled {
   margin-top: 2px;
 }
 
-.summary-hero p {
+.summary-status-copy p {
   color: #b6c2d4;
-  margin: 5px 0 0;
+  margin: 4px 0 0;
   overflow-wrap: anywhere;
 }
 
-.summary-readout,
+.summary-status-button {
-.summary-draft {
+  min-width: 148px;
+}
+
+.summary-readout {
   border: 1px solid #2b3342;
   border-radius: 4px;
   background: #131720;
@@ -1021,16 +1014,14 @@ button:disabled {
   gap: 12px;
 }
 
-.summary-readout-head span,
+.summary-readout-head span {
-.summary-draft span {
   display: block;
   color: #8d99ae;
   font-size: 12px;
   font-weight: 700;
 }
 
-.summary-readout-head strong,
+.summary-readout-head strong {
-.summary-draft strong {
   display: block;
   color: #f8fafc;
   font-size: 18px;
@@ -1038,24 +1029,6 @@ button:disabled {
   margin-top: 2px;
 }
 
-.summary-pill {
-  flex: 0 0 auto;
-  border: 1px solid #2b3342;
-  border-radius: 999px;
-  background: #1a202b;
-  padding: 5px 9px;
-}
-
-.summary-pill.ok {
-  border-color: rgba(34, 197, 94, 0.38);
-  color: #86efac;
-}
-
-.summary-pill.warning {
-  border-color: rgba(245, 158, 11, 0.46);
-  color: #fcd34d;
-}
-
 .summary-lines {
   display: grid;
   gap: 0;
@@ -1090,46 +1063,6 @@ button:disabled {
   overflow-wrap: anywhere;
 }
 
-.summary-draft {
-  display: grid;
-  gap: 8px;
-}
-
-.summary-draft.ok {
-  border-color: rgba(34, 197, 94, 0.34);
-}
-
-.summary-draft.warning {
-  border-color: rgba(245, 158, 11, 0.48);
-  background: rgba(120, 53, 15, 0.16);
-}
-
-.summary-draft p {
-  color: #b6c2d4;
-  margin: 5px 0 0;
-  overflow-wrap: anywhere;
-}
-
-.summary-actions {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-}
-
-.summary-actions button {
-  min-height: 34px;
-  border: 1px solid #343b49;
-  border-radius: 4px;
-  background: #242a35;
-  color: #eef2ff;
-  padding: 7px 10px;
-  cursor: pointer;
-}
-
-.summary-actions button:hover {
-  background: #2d3543;
-}
-
 .summary-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1526,41 +1459,19 @@ button.summary-card:hover {
 
 .connection-check {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(180px, 260px) 132px;
+  grid-template-columns: minmax(190px, 1fr) minmax(220px, auto) minmax(132px, auto) auto;
-  gap: 8px;
+  gap: 10px;
-  align-items: stretch;
+  align-items: center;
-}
-
-.connection-check-main,
-.connection-endpoint {
-  display: grid;
-  align-content: center;
-  gap: 3px;
   min-width: 0;
-  min-height: 46px;
-  border: 1px solid #263040;
-  border-radius: 4px;
-  background: #0d1016;
-  padding: 8px 10px;
 }
 
-.connection-endpoint {
+.connection-check-status {
-  cursor: pointer;
+  display: grid;
+  gap: 1px;
+  min-width: 0;
 }
 
-.connection-endpoint:hover {
+.connection-check-status strong,
-  border-color: #3b82f6;
-  background: #101827;
-}
-
-.connection-check-main > span,
-.connection-endpoint > span {
-  color: #8d99ae;
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.connection-check-main strong,
 .connection-endpoint strong {
   min-width: 0;
   color: #eef2ff;
@@ -1569,14 +1480,101 @@ button.summary-card:hover {
   white-space: nowrap;
 }
 
-.connection-check-main p {
+.connection-check-status > span {
+  color: #8d99ae;
+  font-size: 11px;
+  font-weight: 800;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.connection-check-status p {
   color: #9aa8bd;
   margin: 0;
-  overflow-wrap: anywhere;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.connection-probes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.connection-probe {
+  display: inline-grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 6px;
+  min-height: 24px;
+  max-width: 210px;
+  border: 1px solid #263040;
+  border-radius: 4px;
+  background: #0d1016;
+  padding: 3px 7px;
+  color: #b6c2d4;
+  font-size: 12px;
+}
+
+.connection-probe.ok {
+  border-color: rgba(34, 197, 94, 0.28);
+}
+
+.connection-probe.warning {
+  border-color: rgba(245, 158, 11, 0.34);
+}
+
+.connection-probe.error {
+  border-color: rgba(239, 68, 68, 0.34);
+}
+
+.connection-probe strong,
+.connection-probe span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.connection-probe strong {
+  color: #eef2ff;
+  font-weight: 800;
+}
+
+.connection-probe.ok strong {
+  color: #86efac;
+}
+
+.connection-probe.error strong {
+  color: #fca5a5;
+}
+
+.connection-endpoint {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  min-width: 132px;
+  max-width: 260px;
+  min-height: 34px;
+  border: 1px solid #263040;
+  border-radius: 4px;
+  background: #0d1016;
+  cursor: pointer;
+  padding: 0 10px;
+}
+
+.connection-endpoint:hover {
+  border-color: #3b82f6;
+  background: #101827;
 }
 
 .connection-check .ui-button {
-  width: 100%;
+  width: auto;
+  min-width: 104px;
+  white-space: nowrap;
 }
 
 .external-proxy-card {
@@ -1631,18 +1629,19 @@ button.summary-card:hover {
 
 .setup-summary {
   display: inline-grid;
-  grid-template-columns: auto auto;
+  place-items: center;
-  gap: 6px;
+  width: 22px;
-  align-items: center;
+  min-width: 22px;
-  width: fit-content;
+  height: 22px;
   border: 1px solid #263040;
-  border-radius: 4px;
+  border-radius: 999px;
   background: #111720;
   color: #bfdbfe;
   cursor: pointer;
-  padding: 4px 7px;
+  padding: 0;
-  font-size: 12px;
+  font-size: 13px;
-  font-weight: 700;
+  font-weight: 900;
+  line-height: 1;
 }
 
 .setup-summary:hover {
@@ -1650,9 +1649,9 @@ button.summary-card:hover {
   background: #162033;
 }
 
-.setup-summary strong {
+.setup-summary-glyph {
   color: #dbeafe;
-  font-size: 11px;
+  transform: translateY(-0.5px);
 }
 
 .route-switch {
@@ -1731,17 +1730,20 @@ button.summary-card:hover {
 
 .singbox-workspace-actions {
   justify-content: flex-end;
-  gap: 7px;
+  gap: 6px;
 }
 
-.singbox-workspace-actions .ui-button {
+.singbox-workspace-actions .ui-icon-button {
+  width: 36px;
+  min-width: 36px;
   min-height: 32px;
+  padding: 0;
   color: #dbeafe;
 }
 
 .server-list {
   display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
   gap: 7px;
 }
 
@@ -1758,6 +1760,13 @@ button.summary-card:hover {
   padding: 7px 9px;
 }
 
+.server-row .ui-icon-button {
+  width: 34px;
+  min-width: 34px;
+  min-height: 30px;
+  padding: 0;
+}
+
 .server-row.selected {
   border-color: #2563eb;
   background: #17213a;
@@ -1771,8 +1780,7 @@ button.summary-card:hover {
   border-color: rgba(239, 68, 68, 0.42);
 }
 
-.server-select-button,
+.server-select-button {
-.server-ping-button {
   border: 0;
   background: transparent;
   color: inherit;
@@ -1789,20 +1797,6 @@ button.summary-card:hover {
   text-align: left;
 }
 
-.server-ping-button {
-  display: grid;
-  place-items: center;
-  width: 30px;
-  height: 28px;
-  border: 1px solid #263040;
-  border-radius: 4px;
-  color: #bfdbfe;
-}
-
-.server-ping-button:hover {
-  background: #1d2735;
-}
-
 .server-select-dot {
   width: 10px;
   height: 10px;
@@ -1922,22 +1916,6 @@ button.summary-card:hover {
   animation: spin 0.75s linear infinite;
 }
 
-.apply-state {
-  display: grid;
-  gap: 3px;
-  margin-top: 14px;
-  border: 1px solid rgba(245, 158, 11, 0.48);
-  border-radius: 4px;
-  background: rgba(120, 53, 15, 0.2);
-  color: #fcd34d;
-  padding: 10px 12px;
-}
-
-.apply-state span {
-  color: #d6b875;
-  overflow-wrap: anywhere;
-}
-
 .apps-section {
   display: grid;
   gap: 9px;
@@ -1950,7 +1928,7 @@ button.summary-card:hover {
 
 .apps-header {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(340px, 520px);
+  grid-template-columns: minmax(0, 1fr);
   gap: 12px;
   align-items: center;
   min-height: 48px;
@@ -1962,30 +1940,112 @@ button.summary-card:hover {
   justify-content: flex-start;
 }
 
-.apps-config-actions {
+.changes-dock {
+  position: fixed;
+  right: 0;
+  bottom: var(--app-footer-height);
+  left: 0;
+  z-index: 38;
   display: grid;
-  gap: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
   align-items: center;
+  height: var(--app-change-dock-height);
+  overflow: hidden;
+  border-top: 1px solid #2b3342;
+  background: #141820;
+  box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.22);
+  padding: 8px 18px;
 }
 
-.apps-config-actions .apply-state {
+.changes-dock-main {
-  margin: 0;
+  display: grid;
+  align-items: center;
+  min-width: 0;
+  min-height: 0;
 }
 
-.apps-config-actions .command-row {
+.change-label {
-  grid-template-columns: minmax(0, 1fr) 118px;
-  margin-top: 0;
-}
-
-.apps-config-actions .apply-button,
-.apps-config-actions .open-config-button {
-  height: 48px;
-  min-height: 48px;
-}
-
-.apps-config-actions .config-path {
-  margin: 0;
   color: #8d99ae;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.changes-list {
+  display: grid;
+  align-content: start;
+  gap: 2px;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.change-row {
+  display: grid;
+  grid-template-columns: 104px minmax(0, 1fr);
+  gap: 9px;
+  align-items: center;
+  min-height: 21px;
+  padding: 1px 2px;
+}
+
+.change-values {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  color: #a9b4c5;
+}
+
+.change-values span:not(.change-arrow),
+.change-values strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.change-values strong {
+  color: #eef2ff;
+}
+
+.change-row.added .change-values strong {
+  color: #bbf7d0;
+}
+
+.change-row.removed .change-values strong {
+  color: #fecaca;
+}
+
+.change-arrow {
+  flex: 0 0 auto;
+  color: #64748b;
+  font-weight: 800;
+}
+
+.changes-actions {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-content: center;
+  justify-items: end;
+}
+
+.changes-actions .ui-button {
+  width: auto;
+  min-width: 178px;
+  max-width: 220px;
+  min-height: 36px;
+  padding-inline: 14px;
+  white-space: nowrap;
+}
+
+.changes-actions .ui-button-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .section-head span {
@@ -2277,38 +2337,10 @@ button.summary-card:hover {
   animation: shimmer 1.15s linear infinite;
 }
 
-.command-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 132px;
-  gap: 8px;
-  margin-top: 14px;
-}
-
-.command-row .ui-button,
 .subscription-line .ui-button {
   width: 100%;
 }
 
-.apps-config-actions .ui-button {
-  height: 48px;
-  min-height: 48px;
-}
-
-.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%;
@@ -2618,11 +2650,15 @@ button.summary-card:hover {
 
 @media (max-width: 680px) {
   .simple-shell {
-    padding: var(--app-header-height) 0 var(--app-footer-height);
+    padding: var(--app-header-height) 0 calc(var(--app-footer-height) + var(--app-change-dock-height));
+  }
+
+  .simple-shell.has-change-dock {
+    --app-change-dock-height: clamp(104px, calc(82px + (var(--change-row-count) * 25px)), 260px);
   }
 
   .simple-panel {
-    height: calc(100vh - var(--app-header-height) - var(--app-footer-height));
+    height: calc(100vh - var(--app-header-height) - var(--app-footer-height) - var(--app-change-dock-height));
     padding: 12px 12px 16px;
   }
 
@@ -2678,13 +2714,8 @@ button.summary-card:hover {
     flex-direction: column;
   }
 
-  .proxy-overview-head {
+  .proxy-overview,
-    align-items: stretch;
+  .panel-section-head > strong {
-    flex-direction: column;
-  }
-
-  .panel-section-head > strong,
-  .proxy-overview-head > strong {
     text-align: left;
   }
 
@@ -2697,18 +2728,22 @@ button.summary-card:hover {
     flex-direction: column;
   }
 
-  .summary-pill {
-    width: fit-content;
-  }
-
   .summary-lines div {
     grid-template-columns: 1fr;
     gap: 4px;
   }
 
-  .summary-actions {
+  .summary-status-control {
-    display: grid;
     grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .summary-status-dot {
+    display: none;
+  }
+
+  .summary-status-button {
+    width: 100%;
   }
 
   .setup-strip {
@@ -2725,16 +2760,35 @@ button.summary-card:hover {
     min-height: 34px;
   }
 
-  .apps-config-actions .command-row {
-    grid-template-columns: 1fr;
-  }
-
   .app-add-skeleton {
     grid-template-columns: 1fr;
   }
 
   .connection-check {
     grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .connection-probes {
+    justify-content: stretch;
+  }
+
+  .connection-probe {
+    max-width: none;
+  }
+
+  .connection-check-status p {
+    white-space: normal;
+  }
+
+  .connection-endpoint {
+    width: 100%;
+    max-width: none;
+    justify-content: center;
+  }
+
+  .connection-check .ui-button {
+    width: 100%;
   }
 
   .route-chain {
@@ -2814,19 +2868,41 @@ button.summary-card:hover {
   }
 
   .singbox-workspace-actions {
+    justify-content: flex-end;
     width: 100%;
   }
 
-  .singbox-workspace-actions .ui-button {
+  .singbox-workspace-actions .ui-icon-button {
-    flex: 1;
+    width: 36px;
+    min-width: 36px;
   }
 
   .server-list {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   }
 
-  .command-row {
+  .changes-dock {
     grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr) auto;
+    gap: 8px;
+    padding: 9px 10px;
+  }
+
+  .changes-dock-main {
+    grid-template-columns: 1fr;
+  }
+
+  .changes-list {
+    max-height: none;
+  }
+
+  .change-row {
+    grid-template-columns: 1fr;
+    gap: 3px;
+  }
+
+  .change-values {
+    min-width: 0;
   }
 
   .log-dock {

src/ui/ServiceControlRow.tsx

@@ -59,9 +59,11 @@ export function ServiceControlRow({
       </span>
       <span className="ui-service-dot" aria-hidden="true" />
       <div className="ui-service-text">
-        <strong>{title}</strong>
+        <div className="ui-service-title-line">
+          <strong>{title}</strong>
+          {inlineActions ? <div className="ui-service-inline-actions">{inlineActions}</div> : null}
+        </div>
         <span>{detail}</span>
-        {inlineActions ? <div className="ui-service-inline-actions">{inlineActions}</div> : null}
       </div>
       <div className="ui-service-actions">
         {primaryAction ? (