working

DynamicIsland/Localizable.xcstrings

@@ -6808,8 +6808,8 @@
     "Enable timer live activity" : {
 
     },
-    "Engines" : {
+    "Engine Utilization" : {
-      "comment" : "A label describing the GPU engine gauges.",
+      "comment" : "A label describing the utilization of the GPU's engine components.",
       "isCommentAutoGenerated" : true
     },
     "Enhance your experience with HUDs" : {
@@ -14350,10 +14350,6 @@
     },
     "Sensitivity" : {
 
-    },
-    "Sensors" : {
-      "comment" : "A label displayed above the group of CPU sensor gauges.",
-      "isCommentAutoGenerated" : true
     },
     "Session · ↓ %@ · ↑ %@" : {
       "comment" : "A row displaying the total downloaded and uploaded bytes for the network session.",

DynamicIsland/components/Stats/CPUStatsSharedViews.swift

@@ -88,71 +88,73 @@ struct CPUUsageDashboard: View {
         }
         .frame(maxWidth: .infinity, alignment: .leading)
 
-        let sensorsSection = CPUSensorGaugeGroup(
+        let primaryGauges = CPUSensorGaugeGroup(
+            breakdown: breakdown,
             temperature: temperature,
             frequency: frequency,
+            systemColor: systemColor,
+            userColor: userColor,
+            idleColor: idleColor,
             usageTint: userColor,
             temperatureTint: Color(red: 0.98, green: 0.53, blue: 0.18)
         )
-        .frame(maxWidth: .infinity, alignment: .leading)
+        .frame(maxWidth: .infinity, alignment: .center)
         
         return ViewThatFits(in: .horizontal) {
             VStack(alignment: .leading, spacing: 20) {
-                CPUSegmentDonut(
+                primaryGauges
-                    breakdown: breakdown,
-                    systemColor: systemColor,
-                    userColor: userColor,
-                    idleColor: idleColor
-                )
-                .frame(width: 132, height: 132)
-                .frame(maxWidth: .infinity, alignment: .leading)
-                
-                sensorsSection
                 usageSection
                 Divider().padding(.vertical, 4)
                 systemSection
             }
             HStack(alignment: .top, spacing: 28) {
-                VStack(alignment: .leading, spacing: 18) {
+                primaryGauges
-                    CPUSegmentDonut(
+                    .frame(maxWidth: .infinity, alignment: .center)
-                        breakdown: breakdown,
-                        systemColor: systemColor,
-                        userColor: userColor,
-                        idleColor: idleColor
-                    )
-                    .frame(width: 132, height: 132)
-
-                    sensorsSection
-                }
                 usageSection
+                    .frame(maxWidth: .infinity, alignment: .leading)
                 systemSection
+                    .frame(maxWidth: .infinity, alignment: .leading)
             }
         }
     }
 }
 
 private struct CPUSensorGaugeGroup: View {
+    let breakdown: CPULoadBreakdown
     let temperature: CPUTemperatureMetrics
     let frequency: CPUFrequencyMetrics?
+    let systemColor: Color
+    let userColor: Color
+    let idleColor: Color
     let usageTint: Color
     let temperatureTint: Color
 
     var body: some View {
-        VStack(alignment: .leading, spacing: 12) {
+        HStack(alignment: .center, spacing: 18) {
-            Text("Sensors")
+            CPUTemperatureGauge(temperature: temperature.celsius, tint: temperatureTint, size: 78, lineWidth: 8)
-                .font(.caption)
+                .frame(maxWidth: .infinity)
-                .foregroundColor(.secondary)
+            CPUSegmentDonut(
-            HStack(spacing: 18) {
+                breakdown: breakdown,
-                CPUTemperatureGauge(temperature: temperature.celsius, tint: temperatureTint)
+                systemColor: systemColor,
-                CPUFrequencyGauge(frequency: frequency, tint: usageTint)
+                userColor: userColor,
-            }
+                idleColor: idleColor,
+                diameter: 118,
+                lineWidth: 13
+            )
+            .frame(width: 118, height: 118)
+            .frame(maxWidth: .infinity)
+            CPUFrequencyGauge(frequency: frequency, tint: usageTint, size: 78, lineWidth: 8)
+                .frame(maxWidth: .infinity)
         }
+        .frame(maxWidth: .infinity, alignment: .center)
     }
 }
 
 private struct CPUTemperatureGauge: View {
     let temperature: Double?
     let tint: Color
+    var size: CGFloat = 84
+    var lineWidth: CGFloat = 9
     private let maxTemperature: Double = 110
 
     var body: some View {
@@ -162,8 +164,8 @@ private struct CPUTemperatureGauge: View {
             tint: tint,
             centerPrimaryText: centerPrimary,
             subtitle: nil,
-            size: 84,
+            size: size,
-            lineWidth: 9
+            lineWidth: lineWidth
         )
     }
 
@@ -181,6 +183,8 @@ private struct CPUTemperatureGauge: View {
 private struct CPUFrequencyGauge: View {
     let frequency: CPUFrequencyMetrics?
     let tint: Color
+    var size: CGFloat = 84
+    var lineWidth: CGFloat = 9
 
     var body: some View {
         CircularGaugeView(
@@ -190,8 +194,8 @@ private struct CPUFrequencyGauge: View {
             centerPrimaryText: centerPrimary,
             centerSecondaryText: frequency != nil ? "GHz" : nil,
             subtitle: subtitle,
-            size: 84,
+            size: size,
-            lineWidth: 9
+            lineWidth: lineWidth
         )
     }
 
@@ -225,17 +229,21 @@ private struct CPUSegmentDonut: View {
     let systemColor: Color
     let userColor: Color
     let idleColor: Color
+    var diameter: CGFloat = 132
+    var lineWidth: CGFloat = 14
     
     var body: some View {
         ZStack {
             Circle()
-                .stroke(idleColor.opacity(0.3), lineWidth: 14)
+                .stroke(idleColor.opacity(0.3), lineWidth: lineWidth)
+                .frame(width: diameter, height: diameter)
             CPUUsageRing(
                 breakdown: breakdown,
                 systemColor: systemColor,
                 userColor: userColor,
-                lineWidth: 14
+                lineWidth: lineWidth
             )
+            .frame(width: diameter, height: diameter)
             VStack(spacing: 4) {
                 Text(StatsFormatting.percentage(breakdown.activeUsage))
                     .font(.system(size: 30, weight: .bold, design: .rounded))

DynamicIsland/components/Stats/GPUStatsDetailView.swift

@@ -85,10 +85,13 @@ private struct GPUUsageDashboard: View {
     }
 
     private var leftColumn: some View {
-        VStack(alignment: .center, spacing: 16) {
+        GPUEngineGauges(
-            usageRing
+            usage: usage,
-            GPUEngineGauges(render: renderEngineUtilization, tiler: tilerUtilization, accentColor: accentColor)
+            render: renderEngineUtilization,
-        }
+            tiler: tilerUtilization,
+            accentColor: accentColor
+        )
+        .frame(maxWidth: .infinity, alignment: .leading)
     }
 
     private var breakdownAndMeta: some View {
@@ -105,25 +108,6 @@ private struct GPUUsageDashboard: View {
         }
     }
 
-    private var usageRing: some View {
-        ZStack {
-            Circle()
-                .stroke(accentColor.opacity(0.25), lineWidth: 12)
-                .frame(width: 108, height: 108)
-
-            RingArc(start: 0, end: CGFloat(min(max(usage / 100, 0), 1)), color: accentColor, lineWidth: 12)
-                .frame(width: 108, height: 108)
-
-            VStack(spacing: 4) {
-                Text(StatsFormatting.percentage(usage))
-                    .font(.system(size: 28, weight: .bold, design: .rounded))
-                Text("Active")
-                    .font(.footnote)
-                    .foregroundColor(.secondary)
-            }
-        }
-    }
-
     private var breakdownSection: some View {
         VStack(alignment: .leading, spacing: 12) {
             DetailRow(color: accentColor.opacity(0.9), label: "Render", value: StatsFormatting.percentage(breakdown.render))
@@ -164,20 +148,48 @@ private struct GPUUsageDashboard: View {
 }
 
 private struct GPUEngineGauges: View {
+    let usage: Double
     let render: Double?
     let tiler: Double?
     let accentColor: Color
+    private let ringDiameter: CGFloat = 112
+    private let ringLineWidth: CGFloat = 12
 
     var body: some View {
         VStack(alignment: .leading, spacing: 10) {
-            Text("Engines")
+            Text("Engine Utilization")
                 .font(.caption)
                 .foregroundColor(.secondary)
-            HStack(alignment: .center, spacing: 16) {
+            HStack(alignment: .center, spacing: 18) {
-                EngineGaugeView(title: "Render", value: render, tint: accentColor)
+                EngineGaugeView(title: "Render", value: render, tint: accentColor, size: 72)
-                EngineGaugeView(title: "Tiler", value: tiler, tint: accentColor.opacity(0.75))
+                GPUUsageRing(usage: usage, accentColor: accentColor, diameter: ringDiameter, lineWidth: ringLineWidth)
+                EngineGaugeView(title: "Tiler", value: tiler, tint: accentColor.opacity(0.75), size: 72)
+            }
+            .frame(maxWidth: .infinity, alignment: .center)
+        }
+    }
+}
+
+private struct GPUUsageRing: View {
+    let usage: Double
+    let accentColor: Color
+    var diameter: CGFloat = 108
+    var lineWidth: CGFloat = 12
+
+    var body: some View {
+        ZStack {
+            Circle()
+                .stroke(accentColor.opacity(0.25), lineWidth: lineWidth)
+            RingArc(start: 0, end: CGFloat(min(max(usage / 100, 0), 1)), color: accentColor, lineWidth: lineWidth)
+            VStack(spacing: 4) {
+                Text(StatsFormatting.percentage(usage))
+                    .font(.system(size: 26, weight: .bold, design: .rounded))
+                Text("Active")
+                    .font(.footnote)
+                    .foregroundColor(.secondary)
             }
         }
+        .frame(width: diameter, height: diameter)
     }
 }
 
@@ -185,7 +197,7 @@ private struct EngineGaugeView: View {
     let title: String
     let value: Double?
     let tint: Color
-    private let size: CGFloat = 68
+    var size: CGFloat = 68
 
     var body: some View {
         if let value {