feat: add coder connect startup progress indicator (#161)

ethanndickson · web-flow · commit 2adace38dbd2 · 2025-05-22T14:00:06.000+10:00
Closes #159. https://github.com/user-attachments/assets/26391aef-31a1-4d5a-8db0-910a9fbe97ea
diff --git a/Coder-Desktop/Coder-Desktop/Preview Content/PreviewVPN.swift b/Coder-Desktop/Coder-Desktop/Preview Content/PreviewVPN.swift
@@ -33,6 +33,8 @@ final class PreviewVPN: Coder_Desktop.VPNService {
         self.shouldFail = shouldFail
     }
 
+    @Published var progress: VPNProgress = .init(stage: .initial, downloadProgress: nil)
+
     var startTask: Task<Void, Never>?
     func start() async {
         if await startTask?.value != nil {
diff --git a/Coder-Desktop/Coder-Desktop/VPN/VPNProgress.swift b/Coder-Desktop/Coder-Desktop/VPN/VPNProgress.swift
@@ -0,0 +1,63 @@
+import SwiftUI
+import VPNLib
+
+struct VPNProgress {
+    let stage: ProgressStage
+    let downloadProgress: DownloadProgress?
+}
+
+struct VPNProgressView: View {
+    let state: VPNServiceState
+    let progress: VPNProgress
+
+    var body: some View {
+        VStack {
+            CircularProgressView(value: value)
+                // We estimate that the last half takes 8 seconds
+                // so it doesn't appear stuck
+                .autoComplete(threshold: 0.5, duration: 8)
+            Text(progressMessage)
+                .multilineTextAlignment(.center)
+        }
+        .padding()
+        .foregroundStyle(.secondary)
+    }
+
+    var progressMessage: String {
+        "\(progress.stage.description ?? defaultMessage)\(downloadProgressMessage)"
+    }
+
+    var downloadProgressMessage: String {
+        progress.downloadProgress.flatMap { "\n\($0.description)" } ?? ""
+    }
+
+    var defaultMessage: String {
+        state == .connecting ? "Starting Coder Connect..." : "Stopping Coder Connect..."
+    }
+
+    var value: Float? {
+        guard state == .connecting else {
+            return nil
+        }
+        switch progress.stage {
+        case .initial:
+            return 0
+        case .downloading:
+            guard let downloadProgress = progress.downloadProgress else {
+                // We can't make this illegal state unrepresentable because XPC
+                // doesn't support enums with associated values.
+                return 0.05
+            }
+            // 35MB if the server doesn't give us the expected size
+            let totalBytes = downloadProgress.totalBytesToWrite ?? 35_000_000
+            let downloadPercent = min(1.0, Float(downloadProgress.totalBytesWritten) / Float(totalBytes))
+            return 0.4 * downloadPercent
+        case .validating:
+            return 0.43
+        case .removingQuarantine:
+            return 0.46
+        case .startingTunnel:
+            return 0.50
+        }
+    }
+}
diff --git a/Coder-Desktop/Coder-Desktop/VPN/VPNService.swift b/Coder-Desktop/Coder-Desktop/VPN/VPNService.swift
@@ -7,6 +7,7 @@ import VPNLib
 protocol VPNService: ObservableObject {
     var state: VPNServiceState { get }
     var menuState: VPNMenuState { get }
+    var progress: VPNProgress { get }
     func start() async
     func stop() async
     func configureTunnelProviderProtocol(proto: NETunnelProviderProtocol?)
@@ -55,7 +56,14 @@ final class CoderVPNService: NSObject, VPNService {
     var logger = Logger(subsystem: Bundle.main.bundleIdentifier!, category: "vpn")
     lazy var xpc: VPNXPCInterface = .init(vpn: self)
 
-    @Published var tunnelState: VPNServiceState = .disabled
+    @Published var tunnelState: VPNServiceState = .disabled {
+        didSet {
+            if tunnelState == .connecting {
+                progress = .init(stage: .initial, downloadProgress: nil)
+            }
+        }
+    }
+
     @Published var sysExtnState: SystemExtensionState = .uninstalled
     @Published var neState: NetworkExtensionState = .unconfigured
     var state: VPNServiceState {
@@ -72,6 +80,8 @@ final class CoderVPNService: NSObject, VPNService {
         return tunnelState
     }
 
+    @Published var progress: VPNProgress = .init(stage: .initial, downloadProgress: nil)
+
     @Published var menuState: VPNMenuState = .init()
 
     // Whether the VPN should start as soon as possible
@@ -155,6 +165,10 @@ final class CoderVPNService: NSObject, VPNService {
         }
     }
 
+    func onProgress(stage: ProgressStage, downloadProgress: DownloadProgress?) {
+        progress = .init(stage: stage, downloadProgress: downloadProgress)
+    }
+
     func applyPeerUpdate(with update: Vpn_PeerUpdate) {
         // Delete agents
         update.deletedAgents.forEach { menuState.deleteAgent(withId: $0.id) }
diff --git a/Coder-Desktop/Coder-Desktop/Views/CircularProgressView.swift b/Coder-Desktop/Coder-Desktop/Views/CircularProgressView.swift
@@ -0,0 +1,80 @@
+import SwiftUI
+
+struct CircularProgressView: View {
+    let value: Float?
+
+    var strokeWidth: CGFloat = 4
+    var diameter: CGFloat = 22
+    var primaryColor: Color = .secondary
+    var backgroundColor: Color = .secondary.opacity(0.3)
+
+    @State private var rotation = 0.0
+    @State private var trimAmount: CGFloat = 0.15
+
+    var autoCompleteThreshold: Float?
+    var autoCompleteDuration: TimeInterval?
+
+    var body: some View {
+        ZStack {
+            // Background circle
+            Circle()
+                .stroke(backgroundColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
+                .frame(width: diameter, height: diameter)
+            Group {
+                if let value {
+                    // Determinate gauge
+                    Circle()
+                        .trim(from: 0, to: CGFloat(displayValue(for: value)))
+                        .stroke(primaryColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
+                        .frame(width: diameter, height: diameter)
+                        .rotationEffect(.degrees(-90))
+                        .animation(autoCompleteAnimation(for: value), value: value)
+                } else {
+                    // Indeterminate gauge
+                    Circle()
+                        .trim(from: 0, to: trimAmount)
+                        .stroke(primaryColor, style: StrokeStyle(lineWidth: strokeWidth, lineCap: .round))
+                        .frame(width: diameter, height: diameter)
+                        .rotationEffect(.degrees(rotation))
+                }
+            }
+        }
+        .frame(width: diameter + strokeWidth * 2, height: diameter + strokeWidth * 2)
+        .onAppear {
+            if value == nil {
+                withAnimation(.linear(duration: 0.8).repeatForever(autoreverses: false)) {
+                    rotation = 360
+                }
+            }
+        }
+    }
+
+    private func displayValue(for value: Float) -> Float {
+        if let threshold = autoCompleteThreshold,
+           value >= threshold, value < 1.0
+        {
+            return 1.0
+        }
+        return value
+    }
+
+    private func autoCompleteAnimation(for value: Float) -> Animation? {
+        guard let threshold = autoCompleteThreshold,
+              let duration = autoCompleteDuration,
+              value >= threshold, value < 1.0
+        else {
+            return .default
+        }
+
+        return .easeOut(duration: duration)
+    }
+}
+
+extension CircularProgressView {
+    func autoComplete(threshold: Float, duration: TimeInterval) -> CircularProgressView {
+        var view = self
+        view.autoCompleteThreshold = threshold
+        view.autoCompleteDuration = duration
+        return view
+    }
+}
diff --git a/Coder-Desktop/Coder-Desktop/Views/VPN/Agents.swift b/Coder-Desktop/Coder-Desktop/Views/VPN/Agents.swift
@@ -33,7 +33,9 @@ struct Agents<VPN: VPNService>: View {
                     if hasToggledExpansion {
                         return
                     }
-                    expandedItem = visibleItems.first?.id
+                    withAnimation(.snappy(duration: Theme.Animation.collapsibleDuration)) {
+                        expandedItem = visibleItems.first?.id
+                    }
                     hasToggledExpansion = true
                 }
                 if items.count == 0 {
diff --git a/Coder-Desktop/Coder-Desktop/Views/VPN/VPNState.swift b/Coder-Desktop/Coder-Desktop/Views/VPN/VPNState.swift
@@ -28,9 +28,7 @@ struct VPNState<VPN: VPNService>: View {
             case (.connecting, _), (.disconnecting, _):
                 HStack {
                     Spacer()
-                    ProgressView(
-                        vpn.state == .connecting ? "Starting Coder Connect..." : "Stopping Coder Connect..."
-                    ).padding()
+                    VPNProgressView(state: vpn.state, progress: vpn.progress)
                     Spacer()
                 }
             case let (.failed(vpnErr), _):
diff --git a/Coder-Desktop/Coder-Desktop/XPCInterface.swift b/Coder-Desktop/Coder-Desktop/XPCInterface.swift
@@ -71,6 +71,12 @@ import VPNLib
         }
     }
 
+    func onProgress(stage: ProgressStage, downloadProgress: DownloadProgress?) {
+        Task { @MainActor in
+            svc.onProgress(stage: stage, downloadProgress: downloadProgress)
+        }
+    }
+
     // The NE has verified the dylib and knows better than Gatekeeper
     func removeQuarantine(path: String, reply: @escaping (Bool) -> Void) {
         let reply = CallbackWrapper(reply)
diff --git a/Coder-Desktop/Coder-DesktopTests/Util.swift b/Coder-Desktop/Coder-DesktopTests/Util.swift
@@ -10,6 +10,7 @@ class MockVPNService: VPNService, ObservableObject {
     @Published var state: Coder_Desktop.VPNServiceState = .disabled
     @Published var baseAccessURL: URL = .init(string: "https://dev.coder.com")!
     @Published var menuState: VPNMenuState = .init()
+    @Published var progress: VPNProgress = .init(stage: .initial, downloadProgress: nil)
     var onStart: (() async -> Void)?
     var onStop: (() async -> Void)?
 
diff --git a/Coder-Desktop/Coder-DesktopTests/VPNStateTests.swift b/Coder-Desktop/Coder-DesktopTests/VPNStateTests.swift
@@ -38,8 +38,7 @@ struct VPNStateTests {
 
         try await ViewHosting.host(view) {
             try await sut.inspection.inspect { view in
-                let progressView = try view.find(ViewType.ProgressView.self)
-                #expect(try progressView.labelView().text().string() == "Starting Coder Connect...")
+                _ = try view.find(text: "Starting Coder Connect...")
             }
         }
     }
@@ -50,8 +49,7 @@ struct VPNStateTests {
 
         try await ViewHosting.host(view) {
             try await sut.inspection.inspect { view in
-                let progressView = try view.find(ViewType.ProgressView.self)
-                #expect(try progressView.labelView().text().string() == "Stopping Coder Connect...")
+                _ = try view.find(text: "Stopping Coder Connect...")
             }
         }
     }
diff --git a/Coder-Desktop/VPN/Manager.swift b/Coder-Desktop/VPN/Manager.swift
@@ -35,10 +35,18 @@ actor Manager {
             // Timeout after 5 minutes, or if there's no data for 60 seconds
             sessionConfig.timeoutIntervalForRequest = 60
             sessionConfig.timeoutIntervalForResource = 300
-            try await download(src: dylibPath, dest: dest, urlSession: URLSession(configuration: sessionConfig))
+            try await download(
+                src: dylibPath,
+                dest: dest,
+                urlSession: URLSession(configuration: sessionConfig)
+            ) { progress in
+                // TODO: Debounce, somehow
+                pushProgress(stage: .downloading, downloadProgress: progress)
+            }
         } catch {
             throw .download(error)
         }
+        pushProgress(stage: .validating)
         let client = Client(url: cfg.serverUrl)
         let buildInfo: BuildInfoResponse
         do {
@@ -158,6 +166,7 @@ actor Manager {
     }
 
     func startVPN() async throws(ManagerError) {
+        pushProgress(stage: .startingTunnel)
         logger.info("sending start rpc")
         guard let tunFd = ptp.tunnelFileDescriptor else {
             logger.error("no fd")
@@ -234,6 +243,15 @@ actor Manager {
     }
 }
 
+func pushProgress(stage: ProgressStage, downloadProgress: DownloadProgress? = nil) {
+    guard let conn = globalXPCListenerDelegate.conn else {
+        logger.warning("couldn't send progress message to app: no connection")
+        return
+    }
+    logger.debug("sending progress message to app")
+    conn.onProgress(stage: stage, downloadProgress: downloadProgress)
+}
+
 struct ManagerConfig {
     let apiToken: String
     let serverUrl: URL
@@ -312,6 +330,7 @@ private func removeQuarantine(_ dest: URL) async throws(ManagerError) {
     let file = NSURL(fileURLWithPath: dest.path)
     try? file.getResourceValue(&flag, forKey: kCFURLQuarantinePropertiesKey as URLResourceKey)
     if flag != nil {
+        pushProgress(stage: .removingQuarantine)
         // Try the privileged helper first (it may not even be registered)
         if await globalHelperXPCSpeaker.tryRemoveQuarantine(path: dest.path) {
             // Success!
diff --git a/Coder-Desktop/VPNLib/Download.swift b/Coder-Desktop/VPNLib/Download.swift
diff --git a/Coder-Desktop/VPNLib/Util.swift b/Coder-Desktop/VPNLib/Util.swift
diff --git a/Coder-Desktop/VPNLib/XPC.swift b/Coder-Desktop/VPNLib/XPC.swift

Original file line number	Diff line number	Diff line change
`@@ -33,6 +33,8 @@ final class PreviewVPN: Coder_Desktop.VPNService {`
`33`	`33`	`self.shouldFail = shouldFail`
`34`	`34`	`}`
`35`	`35`
	`36`	`+ @Published var progress: VPNProgress = .init(stage: .initial, downloadProgress: nil)`
	`37`	`+`
`36`	`38`	`var startTask: Task<Void, Never>?`
`37`	`39`	`func start() async {`
`38`	`40`	`if await startTask?.value != nil {`
Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,9 @@ struct Agents<VPN: VPNService>: View {`
`33`	`33`	`if hasToggledExpansion {`
`34`	`34`	`return`
`35`	`35`	`}`
`36`		`- expandedItem = visibleItems.first?.id`
	`36`	`+ withAnimation(.snappy(duration: Theme.Animation.collapsibleDuration)) {`
	`37`	`+ expandedItem = visibleItems.first?.id`
	`38`	`+ }`
`37`	`39`	`hasToggledExpansion = true`
`38`	`40`	`}`
`39`	`41`	`if items.count == 0 {`
Original file line number	Diff line number	Diff line change
`@@ -71,6 +71,12 @@ import VPNLib`
`71`	`71`	`}`
`72`	`72`	`}`
`73`	`73`
	`74`	`+ func onProgress(stage: ProgressStage, downloadProgress: DownloadProgress?) {`
	`75`	`+ Task { @MainActor in`
	`76`	`+ svc.onProgress(stage: stage, downloadProgress: downloadProgress)`
	`77`	`+ }`
	`78`	`+ }`
	`79`	`+`
`74`	`80`	`// The NE has verified the dylib and knows better than Gatekeeper`
`75`	`81`	`func removeQuarantine(path: String, reply: @escaping (Bool) -> Void) {`
`76`	`82`	`let reply = CallbackWrapper(reply)`
Original file line number	Diff line number	Diff line change
`@@ -38,8 +38,7 @@ struct VPNStateTests {`
`38`	`38`
`39`	`39`	`try await ViewHosting.host(view) {`
`40`	`40`	`try await sut.inspection.inspect { view in`
`41`		`- let progressView = try view.find(ViewType.ProgressView.self)`
`42`		`- #expect(try progressView.labelView().text().string() == "Starting Coder Connect...")`
	`41`	`+ _ = try view.find(text: "Starting Coder Connect...")`
`43`	`42`	`}`
`44`	`43`	`}`
`45`	`44`	`}`
`@@ -50,8 +49,7 @@ struct VPNStateTests {`
`50`	`49`
`51`	`50`	`try await ViewHosting.host(view) {`
`52`	`51`	`try await sut.inspection.inspect { view in`
`53`		`- let progressView = try view.find(ViewType.ProgressView.self)`
`54`		`- #expect(try progressView.labelView().text().string() == "Stopping Coder Connect...")`
	`52`	`+ _ = try view.find(text: "Stopping Coder Connect...")`
`55`	`53`	`}`
`56`	`54`	`}`
`57`	`55`	`}`