Widget layout audit: compact sizes and size-aware layouts

Sources/EdgeControl/Services/ProcessMonitorService.swift

@@ -100,8 +100,8 @@ public final class ProcessMonitorService: ObservableObject {
         }
 
         // Sort, take top 5, resolve icons
-        let top5 = Array(results.sorted { $0.cpuPercent > $1.cpuPercent }.prefix(5))
-        resolveIcons(for: top5)
+        let top = Array(results.sorted { $0.cpuPercent > $1.cpuPercent }.prefix(16))
+        resolveIcons(for: top)
     }
 
     /// Resolve app icons on MainActor.

Sources/EdgeControl/UI/Components/RadialGaugeView.swift

@@ -36,63 +36,60 @@ struct RadialGaugeView: View {
             // Dampened ratio (0.5x) — gauge already has large proportional sizes, full ratio overshoots.
             let valueRatio = 1.0 + (ts.fontSizeValue / 28.0 - 1.0) * 0.5
             let captionRatio = 1.0 + (ts.fontSizeCaption / 11.0 - 1.0) * 0.5
-            let titleRatio = 1.0 + (ts.fontSizeTitle / 18.0 - 1.0) * 0.5
             let valueFontSize = (isCompact ? minDim * 0.28 : minDim * 0.20) * scale * valueRatio
             let unitFontSize = (isCompact ? minDim * 0.10 : minDim * 0.07) * scale * captionRatio
-            let labelFontSize = (isCompact ? minDim * 0.10 : minDim * 0.08) * scale * titleRatio
+            let labelFontSize = (isCompact ? minDim * 0.09 : minDim * 0.065) * scale * captionRatio
             let lwScaled = isCompact ? lineWidth * 0.7 : lineWidth
             let design = ts.fontFamily.design
 
-            VStack(spacing: isCompact ? 2 : 6) {
-                ZStack {
-                    Circle()
-                        .fill(Theme.glowGradient(gaugeColor))
-                        .scaleEffect(1.3)
-                        .opacity(0.4)
+            // Label lives inside the ring so the arc fills min(width, height) with no caption row below.
+            ZStack {
+                Circle()
+                    .fill(Theme.glowGradient(gaugeColor))
+                    .scaleEffect(1.3)
+                    .opacity(0.4)
 
-                    ArcShape(startAngle: startAngle, endAngle: endAngle)
-                        .stroke(Color.white.opacity(0.08), style: StrokeStyle(lineWidth: lwScaled, lineCap: .round))
+                ArcShape(startAngle: startAngle, endAngle: endAngle)
+                    .stroke(Color.white.opacity(0.08), style: StrokeStyle(lineWidth: lwScaled, lineCap: .round))
 
-                    ArcShape(startAngle: startAngle, endAngle: startAngle + (endAngle - startAngle) * progress)
-                        .stroke(
-                            AngularGradient(
-                                stops: [
-                                    .init(color: accentColor, location: 0.0),
-                                    .init(color: gaugeColor, location: 1.0)
-                                ],
-                                center: .center,
-                                startAngle: .degrees(startAngle),
-                                endAngle: .degrees(startAngle + (endAngle - startAngle) * progress)
-                            ),
-                            style: StrokeStyle(lineWidth: lwScaled, lineCap: .round)
-                        )
+                ArcShape(startAngle: startAngle, endAngle: startAngle + (endAngle - startAngle) * progress)
+                    .stroke(
+                        AngularGradient(
+                            stops: [
+                                .init(color: accentColor, location: 0.0),
+                                .init(color: gaugeColor, location: 1.0)
+                            ],
+                            center: .center,
+                            startAngle: .degrees(startAngle),
+                            endAngle: .degrees(startAngle + (endAngle - startAngle) * progress)
+                        ),
+                        style: StrokeStyle(lineWidth: lwScaled, lineCap: .round)
+                    )
 
-                    VStack(spacing: 2) {
-                        Text(displayValue)
-                            .font(.system(size: valueFontSize, weight: .bold, design: design))
-                            .foregroundStyle(Theme.text1(ts))
-                            .contentTransition(.numericText())
-                            .minimumScaleFactor(0.5)
-                        if !unit.isEmpty && !isCompact {
-                            Text(unit)
-                                .font(.system(size: unitFontSize, weight: .semibold, design: design))
-                                .foregroundStyle(Theme.text2(ts))
-                                .textCase(.uppercase)
-                                .minimumScaleFactor(0.4)
-                                .lineLimit(1)
-                        }
+                VStack(spacing: 2) {
+                    Text(displayValue)
+                        .font(.system(size: valueFontSize, weight: .bold, design: design))
+                        .foregroundStyle(Theme.text1(ts))
+                        .contentTransition(.numericText())
+                        .minimumScaleFactor(0.5)
+                    if !unit.isEmpty {
+                        Text(unit)
+                            .font(.system(size: unitFontSize, weight: .semibold, design: design))
+                            .foregroundStyle(Theme.text2(ts))
+                            .textCase(.uppercase)
+                            .minimumScaleFactor(0.4)
+                            .lineLimit(1)
+                    }
+                    if showLabel {
+                        Text(label)
+                            .font(.system(size: labelFontSize, weight: .bold, design: design))
+                            .foregroundStyle(Theme.text3(ts))
+                            .textCase(.uppercase)
+                            .lineLimit(1)
                     }
-                }
-                .aspectRatio(1, contentMode: .fit)
-
-                if showLabel {
-                    Text(label)
-                        .font(.system(size: labelFontSize, weight: .bold, design: design))
-                        .foregroundStyle(Theme.text2(ts))
-                        .textCase(.uppercase)
-                        .lineLimit(1)
                 }
             }
+            .aspectRatio(1, contentMode: .fit)
             .frame(maxWidth: .infinity, maxHeight: .infinity)
         }
     }

Sources/EdgeControl/UI/Components/WidgetHeader.swift

@@ -19,3 +19,70 @@ struct WidgetHeader: View {
         }
     }
 }
+
+// MARK: - Rate Pair
+
+/// Two labeled rates (down/up, read/write) rendered identically wherever a
+/// widget shows them, so equal box sizes produce equal layouts across
+/// Network, Disk I/O and friends.
+struct RatePairView: View {
+    struct Entry {
+        let icon: String
+        let label: String
+        let value: String
+        let color: Color
+    }
+
+    let first: Entry
+    let second: Entry
+    var compact: Bool = false
+    /// One-column cells stack the groups; anything wider sits side by side.
+    var vertical: Bool = false
+
+    @Environment(\.themeSettings) private var ts
+
+    var body: some View {
+        if vertical {
+            VStack(alignment: .leading, spacing: 8) {
+                group(first)
+                group(second)
+            }
+        } else {
+            HStack(spacing: 12) {
+                group(first)
+                group(second)
+            }
+        }
+    }
+
+    private func group(_ entry: Entry) -> some View {
+        VStack(alignment: .leading, spacing: compact ? 2 : 4) {
+            HStack(spacing: 4) {
+                Image(systemName: entry.icon)
+                    .font(.system(size: (compact ? 12 : 18) * ts.fontScale))
+                    .foregroundStyle(entry.color)
+                Text(entry.label)
+                    .font(Theme.label(ts))
+                    .foregroundStyle(Theme.text3(ts))
+            }
+            Text(Self.padded(entry.value))
+                .font(Theme.value(ts))
+                .foregroundStyle(Theme.text1(ts))
+                .monospacedDigit()
+                .minimumScaleFactor(0.5)
+                .lineLimit(1)
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+    }
+
+    /// Live values arrive at varying widths ("3.5 KB/s" vs "216.5 KB/s"), and
+    /// letting each width pick its own scale made the type pulse with the
+    /// data. Padding every value to the formatters' widest possible output
+    /// ("1023.9 KB/s", 11 figures) with figure spaces holds the measured
+    /// width — and therefore the rendered size — perfectly still.
+    private static func padded(_ value: String) -> String {
+        let target = 11
+        guard value.count < target else { return value }
+        return value + String(repeating: "\u{2007}", count: target - value.count)
+    }
+}

Sources/EdgeControl/UI/DashboardShell.swift

@@ -185,8 +185,12 @@ struct DashboardShell: View {
                 activeColor: accent,
                 registry: model.touchService.zoneRegistry
             ) {
-                withAnimation(.easeInOut(duration: 0.2)) {
-                    editMode.toggle()
+                // The zone registry runs actions on the main actor, but the
+                // closure itself is @Sendable, so hop explicitly for Swift 6.
+                Task { @MainActor in
+                    withAnimation(.easeInOut(duration: 0.2)) {
+                        editMode.toggle()
+                    }
                 }
             }
             .overlay {

Sources/EdgeControl/UI/GridPageView.swift

@@ -98,6 +98,9 @@ struct GridPageView: View {
                             .padding(CGFloat(layoutEngine.document.globalSettings.theme.widgetGap))
                         }
                         .frame(width: w, height: h)
+                        // Compact layouts at large font scales can overflow a
+                        // 1-row cell; never let a widget paint over neighbors.
+                        .clipped()
                         .opacity(isDragging ? 0.5 : isResizing ? 0.7 : 1)
                         .overlay {
                             if editMode {

Sources/EdgeControl/UI/Settings/CICDSettingsView.swift

@@ -16,6 +16,23 @@ struct CICDSettingsView: View {
     @State private var importError: String?
 
     private var service: CICDService { model.cicdService }
+
+    /// Repositories currently contributing runs to the widget, ready to hide.
+    /// run.id is "<accountID>/<owner>/<name>/<run number>".
+    private var shownRepositories: [CIRepositoryRef] {
+        let hidden = service.settings.hiddenRepositories
+        var seen = Set<CIRepositoryRef>()
+        var result: [CIRepositoryRef] = []
+        for run in service.runs {
+            let parts = run.id.split(separator: "/")
+            guard parts.count >= 4,
+                  let accountID = UUID(uuidString: String(parts[0])),
+                  let host = store.accounts.first(where: { $0.id == accountID })?.host else { continue }
+            let ref = CIRepositoryRef(host: host, fullName: parts.dropFirst().dropLast().joined(separator: "/"))
+            if !hidden.contains(ref), seen.insert(ref).inserted { result.append(ref) }
+        }
+        return result.sorted()
+    }
     private var store: CIAccountStore { model.accountStore }
 
     private var cliAvailable: Bool {
@@ -246,6 +263,22 @@ struct CICDSettingsView: View {
                 host: $hiddenHost,
                 text: $hiddenDraft
             )
+
+            // The typed entry above requires knowing the exact owner/name;
+            // this menu offers exactly what the widget is showing right now.
+            if !shownRepositories.isEmpty {
+                Menu {
+                    ForEach(shownRepositories, id: \.self) { ref in
+                        Button(ref.displayName) {
+                            service.settings.hiddenRepositories.insert(ref)
+                        }
+                    }
+                } label: {
+                    Label("Hide a repository currently shown…", systemImage: "eye.slash")
+                        .font(Theme.label(ts))
+                }
+                .frame(maxWidth: 320)
+            }
         }
     }
 

Sources/EdgeControl/UI/Settings/WidgetConfigEditor.swift

@@ -71,7 +71,7 @@ struct WidgetConfigEditor: View {
                 set: { config[entry.key] = .string($0) }
             )) {
                 ForEach(options, id: \.self) { option in
-                    Text(option.capitalized.replacingOccurrences(of: "Daybar", with: "Day Bar").replacingOccurrences(of: "Dotmatrix", with: "Dot Matrix"))
+                    Text(option.capitalized.replacingOccurrences(of: "Daybar", with: "Day Bar").replacingOccurrences(of: "Dotmatrix", with: "Dot Matrix").replacingOccurrences(of: "Cpu", with: "CPU"))
                         .tag(option)
                 }
             }

Sources/EdgeControl/Widgets/DevTools/CICDRunsWidget.swift

@@ -90,6 +90,41 @@ private struct CICDRunsWidgetView: View {
         )
     }
 
+    /// Latest run per (account, repository, workflow). The widget is a status
+    /// board, not an activity log: re-runs and repeat deployments (Pages runs
+    /// all share one title) collapse to the workflow's current state.
+    private func latestPerWorkflow(_ runs: [CIRun]) -> [CIRun] {
+        var latest: [String: CIRun] = [:]
+        for run in runs {
+            // run.id is "<accountID>/<repo full name>/<run number>"; dropping
+            // the run number yields a key that survives same-named repos in
+            // different orgs, which repositoryName (the short name) would not.
+            let repoKey = run.id[..<(run.id.lastIndex(of: "/") ?? run.id.endIndex)]
+            let key = "\(repoKey)|\(run.workflowName)"
+            if let existing = latest[key], existing.startedAt >= run.startedAt { continue }
+            latest[key] = run
+        }
+        return latest.values.sorted { $0.startedAt > $1.startedAt }
+    }
+
+    /// The header badge counts what the list shows: distinct workflows, not
+    /// raw runs, once collapsing is in effect.
+    private var headerCount: Int {
+        if case .runs(let runs, _) = state { return latestPerWorkflow(runs).count }
+        return service.runs.count
+    }
+
+    /// Compact age label ("2h"). Empty for runs whose start time is unknown
+    /// (the provider falls back to .distantPast).
+    private func relativeAge(_ date: Date) -> String {
+        guard date != .distantPast else { return "" }
+        let seconds = max(0, Date().timeIntervalSince(date))
+        if seconds < 60 { return "now" }
+        if seconds < 3600 { return "\(Int(seconds / 60))m" }
+        if seconds < 86400 { return "\(Int(seconds / 3600))h" }
+        return "\(Int(seconds / 86400))d"
+    }
+
     var body: some View {
         VStack(spacing: 6) {
             header
@@ -123,7 +158,7 @@ private struct CICDRunsWidgetView: View {
                         Task { @MainActor in SettingsWindowController.shared.show() }
                     }
             }
-            Text("\(service.runs.count)")
+            Text("\(headerCount)")
                 .font(Theme.body(ts))
                 .foregroundStyle(Theme.text3(ts))
         }
@@ -152,7 +187,7 @@ private struct CICDRunsWidgetView: View {
             // the list to 50.
             TouchScrollView {
                 VStack(spacing: 4) {
-                    ForEach(runs) { run in
+                    ForEach(latestPerWorkflow(runs)) { run in
                         runRow(run)
                     }
                 }
@@ -190,13 +225,23 @@ private struct CICDRunsWidgetView: View {
                             .font(Theme.label(ts))
                             .foregroundStyle(Theme.text3(ts).opacity(0.6))
                     }
+                    // One commit can fan out to several workflows, and some runs
+                    // share a constant title ("pages build and deployment"), so
+                    // without the workflow name such rows are indistinguishable.
+                    Text("· \(run.workflowName)")
+                        .font(Theme.label(ts))
+                        .foregroundStyle(Theme.text3(ts).opacity(0.6))
+                        .lineLimit(1)
                 }
                 Text(run.title)
                     .font(Theme.body(ts))
                     .foregroundStyle(Theme.text1(ts))
                     .lineLimit(1)
             }
             Spacer()
+            Text(relativeAge(run.startedAt))
+                .font(Theme.label(ts))
+                .foregroundStyle(Theme.text3(ts).opacity(0.7))
             Text(statusLabel(run))
                 .font(Theme.label(ts))
                 .foregroundStyle(statusColor(run))