Add VPN proxy connection handling

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

@@ -102,7 +102,8 @@ button:disabled {
 .process-add-line button,
 .app-row button,
 .open-config-button,
-.service-button {
+.service-button,
+.service-menu-button {
   min-height: 36px;
   border: 1px solid #343b49;
   border-radius: 4px;
@@ -117,7 +118,8 @@ button:disabled {
 .process-add-line button:hover,
 .app-row button:hover,
 .open-config-button:hover,
-.service-button:hover {
+.service-button:hover,
+.service-menu-button:hover {
   background: #2d3543;
 }
 
@@ -128,7 +130,7 @@ button:disabled {
   grid-template-columns: auto minmax(0, 1fr) auto;
   justify-content: stretch;
   min-height: 56px;
-  overflow: hidden;
+  overflow: visible;
   border: 1px solid #2b3342;
   border-radius: 4px;
   background: #151923;
@@ -249,7 +251,83 @@ button:disabled {
   animation: spin 0.75s linear infinite;
 }
 
+.setup-toggle {
+  display: inline-flex;
+  gap: 7px;
+  align-items: center;
+  width: fit-content;
+  min-height: 0;
+  border: 0;
+  background: transparent;
+  color: #93c5fd;
+  padding: 4px 0 0;
+  text-align: left;
+  cursor: pointer;
+}
+
+.setup-toggle:hover {
+  color: #bfdbfe;
+}
+
+.setup-toggle span {
+  display: inline-block;
+  border: 1px solid #343b49;
+  border-radius: 4px;
+  background: #1b202b;
+  color: #cbd5e1;
+  padding: 1px 6px;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.setup-details {
+  display: grid;
+  grid-column: 2 / -1;
+  gap: 6px;
+  border-top: 1px solid #2b3342;
+  margin-top: 2px;
+  padding-top: 10px;
+}
+
+.setup-item {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 9px;
+  align-items: start;
+  min-height: 34px;
+  border: 1px solid #263040;
+  border-radius: 4px;
+  background: #111720;
+  padding: 8px 9px;
+}
+
+.setup-state-dot {
+  width: 9px;
+  height: 9px;
+  border-radius: 999px;
+  background: #f59e0b;
+  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
+  margin-top: 5px;
+}
+
+.setup-item.installed .setup-state-dot {
+  background: #22c55e;
+  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
+}
+
+.setup-item strong,
+.setup-item span {
+  display: block;
+  overflow-wrap: anywhere;
+}
+
+.setup-item span {
+  color: #9aa8bd;
+  font-size: 13px;
+}
+
 .service-actions {
+  position: relative;
   display: flex;
   gap: 6px;
   align-items: center;
@@ -264,6 +342,62 @@ button:disabled {
   color: #fecaca;
 }
 
+.service-button.install {
+  border-color: #166534;
+  background: #14532d;
+  color: #dcfce7;
+  font-weight: 700;
+}
+
+.service-button.install:hover {
+  background: #166534;
+}
+
+.service-menu {
+  position: relative;
+  display: flex;
+}
+
+.service-menu-button {
+  display: grid;
+  place-items: center;
+  width: 42px;
+  padding: 0;
+}
+
+.service-menu-button svg {
+  display: block;
+}
+
+.service-menu-popover {
+  position: absolute;
+  top: calc(100% + 6px);
+  right: 0;
+  z-index: 6;
+  min-width: 172px;
+  border: 1px solid #343b49;
+  border-radius: 4px;
+  background: #171c26;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.38);
+  padding: 5px;
+}
+
+.service-menu-popover button {
+  width: 100%;
+  min-height: 34px;
+  border: 0;
+  border-radius: 3px;
+  background: transparent;
+  color: #fecaca;
+  text-align: left;
+  padding: 7px 9px;
+  cursor: pointer;
+}
+
+.service-menu-popover button:hover {
+  background: rgba(127, 29, 29, 0.42);
+}
+
 .simple-field {
   display: grid;
   gap: 7px;
@@ -750,6 +884,10 @@ button:disabled {
     grid-column: 1 / -1;
   }
 
+  .setup-details {
+    grid-column: 1 / -1;
+  }
+
   .service-button {
     flex: 1;
   }