feat: expanded agent details with ports, devcontainer boxes, and parent-apps toggle

When a multi-agent workspace is expanded, every agent now renders inline
with its own status dot, latency, copy hostname, and apps grid — no more
chevron-to-reveal per agent. Sub-agents (devcontainers) live inside their
own dashed "Container" box with the cube glyph leading the row, mirroring
the dashboard. Parent apps are hidden when any child has apps, with a
square.grid.2x2 toggle to reveal them on demand.

Adds a listening-ports menu (dot.radiowaves.right + count) per agent,
hidden when the agent reports zero ports per backend contract. Each port
opens http://<agent>:<port>. Single-agent rows stay flat and pick up the
workspace name as their label; copy/tooltip retain the full FQDN. Tray
width bumped to 320 so longer workspace names don't truncate.

Devcontainer sub-agents aren't in the workspace endpoint's resources, so
the SDK gains workspaceAgent(_:) and workspaceAgentListeningPorts(_:) for
per-agent fallbacks. Parent_id resolution moved entirely into expand-time
loadApps — the prior eager pass had a sticky dedupe that wouldn't refire
after menuState.clear().

Author: matifali

Coder-Desktop/Coder-Desktop/Coder_DesktopApp.swift

@@ -100,7 +100,7 @@ class AppDelegate: NSObject, NSApplicationDelegate {
                     await self.state.handleTokenExpiry()
                 }
             }, content: {
-                VPNMenu<CoderVPNService, MutagenDaemon>().frame(width: 256)
+                VPNMenu<CoderVPNService, MutagenDaemon>().frame(width: 320)
                     .environmentObject(self.vpn)
                     .environmentObject(self.state)
                     .environmentObject(self.fileSyncDaemon)

Coder-Desktop/Coder-Desktop/Views/VPN/AgentDetailRow.swift

@@ -0,0 +1,128 @@
+import CoderSDK
+import SwiftUI
+
+/// Renders a single agent inside an expanded WorkspaceGroupView: status dot,
+/// agent name + latency, optional ports menu / parent-apps toggle / copy
+/// button, and the agent's apps inline below.
+///
+/// `leadingIcon` is rendered ahead of the status dot — used to mark sub-agent
+/// rows with a cube glyph so they're identifiable without a dedicated
+/// container header. `appsToggle`, when set, exposes the show/hide control
+/// for parent apps (mirrors the dashboard's "Show parent apps" affordance).
+struct AgentDetailRow: View {
+    @EnvironmentObject var state: AppState
+    @Environment(\.openURL) private var openURL
+
+    let agent: Agent
+    let apps: [WorkspaceApp]
+    var ports: [WorkspaceAgentListeningPort] = []
+    var appsToggle: AppsToggle?
+    var leadingIcon: String?
+    var leadingIconHelp: String?
+
+    @State private var nameIsSelected: Bool = false
+
+    struct AppsToggle {
+        let isShown: Bool
+        let action: () -> Void
+    }
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 0) {
+            HStack(spacing: 3) {
+                HStack(spacing: Theme.Size.trayPadding) {
+                    if let leadingIcon {
+                        Image(systemName: leadingIcon)
+                            .font(.system(size: 11))
+                            .foregroundStyle(.secondary)
+                            .help(leadingIconHelp ?? "")
+                    }
+                    StatusDot(color: agent.status.color)
+                        .help(agent.statusString)
+                    Text(agent.name).lineLimit(1).truncationMode(.tail)
+                    if let latency = agent.lastPing?.latency {
+                        Text(formatLatency(latency))
+                            .font(.caption)
+                            .foregroundStyle(.secondary)
+                    }
+                    Spacer()
+                }
+                .padding(.horizontal, Theme.Size.trayPadding)
+                .frame(minHeight: 22)
+                .frame(maxWidth: .infinity, alignment: .leading)
+                .foregroundStyle(nameIsSelected ? .white : .primary)
+                .background(nameIsSelected ? Color.accentColor.opacity(0.8) : .clear)
+                .clipShape(.rect(cornerRadius: Theme.Size.rectCornerRadius))
+                .onHover { hovering in nameIsSelected = hovering }
+                .padding(.trailing, 3)
+                if !ports.isEmpty {
+                    portsMenu
+                }
+                if let appsToggle {
+                    Button(action: appsToggle.action) {
+                        Image(systemName: appsToggle.isShown ? "square.grid.2x2.fill" : "square.grid.2x2")
+                            .font(.system(size: 11))
+                            .padding(3)
+                            .contentShape(Rectangle())
+                    }
+                    .buttonStyle(.plain)
+                    .help(appsToggle.isShown ? "Hide parent apps" : "Show parent apps")
+                }
+                MenuItemIconButton(systemName: "doc.on.doc", action: copyToClipboard)
+                    .font(.system(size: 9))
+                    .symbolVariant(.fill)
+                    .padding(.trailing, Theme.Size.trayMargin)
+                    .help("Copy hostname")
+            }
+            if !apps.isEmpty {
+                MenuItemCollapsibleView(apps: apps)
+            }
+        }
+    }
+
+    private var portsMenu: some View {
+        Menu {
+            ForEach(ports) { port in
+                Button(label(for: port)) {
+                    if let url = URL(string: "http://\(agent.primaryHost):\(port.port)") {
+                        openURL(url)
+                    }
+                }
+            }
+        } label: {
+            HStack(spacing: 1) {
+                Image(systemName: "dot.radiowaves.right")
+                    .font(.system(size: 9))
+                    .imageScale(.small)
+                Text("\(ports.count)")
+                    .font(.system(size: 10))
+            }
+            .foregroundStyle(.secondary)
+            .padding(3)
+        }
+        .menuStyle(.borderlessButton)
+        .menuIndicator(.hidden)
+        .fixedSize()
+        .help("Listening ports")
+    }
+
+    private func copyToClipboard() {
+        NSPasteboard.general.clearContents()
+        NSPasteboard.general.setString(agent.primaryHost, forType: .string)
+    }
+
+    /// Compact "18ms" formatting for inline display. The dot's tooltip still
+    /// carries the full status string with P2P/DERP detail.
+    private func formatLatency(_ seconds: TimeInterval) -> String {
+        let ms = Int((seconds * 1000).rounded())
+        return "\(ms)ms"
+    }
+
+    private func label(for port: WorkspaceAgentListeningPort) -> String {
+        let processName = port.process_name.isEmpty ? nil : port.process_name
+        if let processName {
+            return "\(port.port) - \(processName)"
+        }
+        return "\(port.port)"
+    }
+}

Coder-Desktop/Coder-Desktop/Views/VPN/Agents.swift

@@ -6,7 +6,6 @@ struct Agents<VPN: VPNService>: View {
     @State private var viewAll = false
     @State private var expandedItem: UUID?
     @State private var hasToggledExpansion: Bool = false
-    @State private var enrichedWorkspaces: Set<UUID> = []
 
     let inspection = Inspection<Self>()
 
@@ -24,30 +23,17 @@ struct Agents<VPN: VPNService>: View {
                                 group: group,
                                 baseAccessURL: state.baseAccessURL!,
                                 expandedItem: $expandedItem,
-                                userInteracted: $hasToggledExpansion
+                                userInteracted: $hasToggledExpansion,
+                                setAgentParentID: { agentID, parentID in
+                                    vpn.setAgentParentID(agentID: agentID, parentID: parentID)
+                                }
                             )
                             .padding(.horizontal, Theme.Size.trayMargin)
                         }
-                    }.onChange(of: visibleGroups) {
-                        // If no workspaces are online, expand the first one to come online.
-                        if visibleGroups.allSatisfy({ $0.status == .off }) {
-                            hasToggledExpansion = false
-                            return
-                        }
-                        if hasToggledExpansion {
-                            return
-                        }
-                        withAnimation(.snappy(duration: Theme.Animation.collapsibleDuration)) {
-                            expandedItem = visibleGroups.first?.defaultExpandID
-                        }
-                        hasToggledExpansion = true
                     }
                 }
                 .scrollBounceBehavior(.basedOnSize)
                 .frame(maxHeight: 400)
-                .task(id: Set(groups.map(\.id))) {
-                    await enrichParents(groups: groups)
-                }
                 if groups.isEmpty {
                     Text("No workspaces!")
                         .font(.body)
@@ -67,36 +53,4 @@ struct Agents<VPN: VPNService>: View {
             }
         }.onReceive(inspection.notice) { inspection.visit(self, $0) } // ViewInspector
     }
-
-    /// Backfill agent.parent_id from the HTTP API. The VPN proto doesn't carry
-    /// it, so without this children would never nest under their parent in the
-    /// tray. Best-effort: failures are silent and retried whenever the set of
-    /// workspace IDs changes.
-    private func enrichParents(groups: [WorkspaceGroup]) async {
-        guard let client = state.client else { return }
-        for group in groups where !enrichedWorkspaces.contains(group.id) {
-            do {
-                let workspace = try await client.workspace(group.id)
-                let agents = workspace.latest_build.resources.compactMap(\.agents).flatMap(\.self)
-                for agent in agents {
-                    vpn.setAgentParentID(agentID: agent.id, parentID: agent.parent_id)
-                }
-                enrichedWorkspaces.insert(group.id)
-            } catch {
-                continue
-            }
-        }
-    }
-}
-
-private extension WorkspaceGroup {
-    /// For the auto-expand-first behavior: single-agent groups expand the
-    /// agent's app section (existing UX); multi-agent groups expand the
-    /// workspace itself to reveal nested agents.
-    var defaultExpandID: UUID {
-        if agents.count == 1, let only = agents.first {
-            return only.id
-        }
-        return id
-    }
 }

Coder-Desktop/Coder-Desktop/Views/VPN/VPNMenuItem.swift

@@ -78,6 +78,10 @@ struct MenuItemView: View {
     // we show this instead of the full FQDN to keep the menu readable. The
     // copy-to-clipboard action and the hover tooltip still use the full FQDN.
     var displayLabel: String?
+    // Hide the trailing open-in-browser button on rows where it would be
+    // redundant (nested agent rows under a workspace header that already has
+    // the same link).
+    var showOpenInBrowser: Bool = true
 
     @State private var nameIsSelected: Bool = false
 
@@ -147,7 +151,7 @@ struct MenuItemView: View {
                         }
                         .help(plainItemName)
                 }.buttonStyle(.plain).padding(.trailing, 3)
-                MenuItemIcons(item: item, wsURL: wsURL)
+                MenuItemIcons(item: item, wsURL: wsURL, showOpenInBrowser: showOpenInBrowser)
             }
             if isExpanded {
                 Group {
@@ -230,6 +234,7 @@ struct MenuItemIcons: View {
 
     let item: VPNMenuItem
     let wsURL: URL
+    var showOpenInBrowser: Bool = true
 
     @State private var copyIsSelected: Bool = false
     @State private var webIsSelected: Bool = false
@@ -251,12 +256,15 @@ struct MenuItemIcons: View {
         MenuItemIconButton(systemName: "doc.on.doc", action: copyToClipboard)
             .font(.system(size: 9))
             .symbolVariant(.fill)
+            .padding(.trailing, showOpenInBrowser ? 0 : Theme.Size.trayMargin)
             .help("Copy hostname")
-        MenuItemIconButton(systemName: "globe", action: { openURL(wsURL) })
-            .contentShape(Rectangle())
-            .font(.system(size: 12))
-            .padding(.trailing, Theme.Size.trayMargin)
-            .help("Open in browser")
+        if showOpenInBrowser {
+            MenuItemIconButton(systemName: "globe", action: { openURL(wsURL) })
+                .contentShape(Rectangle())
+                .font(.system(size: 12))
+                .padding(.trailing, Theme.Size.trayMargin)
+                .help("Open in browser")
+        }
     }
 }