Update UI for performance analysis view with grid layout

VoiceInk/Views/Metrics/PerformanceAnalysisView.swift

@@ -5,6 +5,10 @@ struct PerformanceAnalysisView: View {
     let transcriptions: [Transcription]
     private let analysis: AnalysisResult
 
+    private let columns: [GridItem] = [
+        GridItem(.adaptive(minimum: 250), spacing: 16)
+    ]
+
     init(transcriptions: [Transcription]) {
         self.transcriptions = transcriptions
         self.analysis = Self.analyze(transcriptions: transcriptions)
@@ -96,11 +100,13 @@ struct PerformanceAnalysisView: View {
                 .font(.system(.title2, design: .default, weight: .bold))
                 .foregroundColor(.primary)
 
+            LazyVGrid(columns: columns, spacing: 16) {
                 ForEach(analysis.transcriptionModels) { modelStat in
                     TranscriptionModelCard(modelStat: modelStat)
                 }
             }
         }
+    }
 
     private var enhancementPerformanceSection: some View {
         VStack(alignment: .leading, spacing: 16) {
@@ -108,11 +114,13 @@ struct PerformanceAnalysisView: View {
                 .font(.system(.title2, design: .default, weight: .bold))
                 .foregroundColor(.primary)
 
+            LazyVGrid(columns: columns, spacing: 16) {
                 ForEach(analysis.enhancementModels) { modelStat in
                     EnhancementModelCard(modelStat: modelStat)
                 }
             }
         }
+    }
     
     private func formatDuration(_ duration: TimeInterval) -> String {
         let formatter = DateComponentsFormatter()
@@ -242,16 +250,23 @@ struct SummaryCard: View {
     let color: Color
 
     var body: some View {
-        VStack(spacing: 4) {
+        VStack(spacing: 8) {
+            Image(systemName: icon)
+                .font(.system(size: 20, weight: .medium))
+                .foregroundColor(color)
+            
             Text(value)
-                .font(.system(.title3, design: .rounded, weight: .bold))
+                .font(.system(.title2, design: .rounded, weight: .bold))
                 .foregroundColor(.primary)
             
             Text(label)
                 .font(.caption)
                 .foregroundColor(.secondary)
         }
-        .frame(maxWidth: .infinity)
+        .padding(16)
+        .frame(maxWidth: .infinity, minHeight: 100)
+        .background(MetricCardBackground(color: color))
+        .cornerRadius(12)
     }
 }
 
@@ -291,8 +306,8 @@ struct SystemInfoCard: View {
         }
         .padding(12)
         .frame(maxWidth: .infinity, minHeight: 60, alignment: .leading)
-        .background(CardBackground(isSelected: false))
+        .background(MetricCardBackground(color: .secondary))
-        .cornerRadius(8)
+        .cornerRadius(12)
     }
 }
 
@@ -306,6 +321,8 @@ struct TranscriptionModelCard: View {
                 Text(modelStat.name)
                     .font(.headline)
                     .fontWeight(.semibold)
+                    .lineLimit(1)
+                    .minimumScaleFactor(0.7)
 
                 Spacer()
                 
@@ -316,32 +333,39 @@ struct TranscriptionModelCard: View {
             
             Divider()
 
-            VStack(spacing: 12) {
+            VStack(spacing: 16) {
-                // First row of metrics
+                // Main metric: Speed Factor
-                HStack(spacing: 24) {
+                VStack {
+                    Text(String(format: "%.1fx", modelStat.speedFactor))
+                        .font(.system(size: 24, weight: .bold, design: .rounded))
+                        .foregroundColor(.mint)
+                    Text("Faster than Real-time")
+                        .font(.caption)
+                        .foregroundColor(.secondary)
+                }
+                .frame(maxWidth: .infinity)
+                
+                Divider()
+
+                // Secondary metrics
+                HStack {
                     MetricDisplay(
-                        title: "Avg. Transcript Duration", 
+                        title: "Avg. Audio",
                         value: formatDuration(modelStat.avgAudioDuration),
                         color: .indigo
                     )
-                    
+                    Spacer()
                     MetricDisplay(
-                        title: "Avg. Transcription Time",
+                        title: "Avg. Process Time",
                         value: String(format: "%.2f s", modelStat.avgProcessingTime),
                         color: .teal
                     )
-                    
-                    MetricDisplay(
-                        title: "Speed Factor",
-                        value: String(format: "%.1fx faster", modelStat.speedFactor),
-                        color: .mint
-                    )
                 }
             }
         }
         .padding(16)
-        .background(CardBackground(isSelected: false))
+        .background(MetricCardBackground(color: .mint))
-        .cornerRadius(8)
+        .cornerRadius(12)
     }
     
     private func formatDuration(_ duration: TimeInterval) -> String {
@@ -362,6 +386,8 @@ struct EnhancementModelCard: View {
                 Text(modelStat.name)
                     .font(.headline)
                     .fontWeight(.semibold)
+                    .lineLimit(1)
+                    .minimumScaleFactor(0.7)
 
                 Spacer()
                 
@@ -372,19 +398,52 @@ struct EnhancementModelCard: View {
             
             Divider()
             
-            VStack(spacing: 12) {
+            VStack(alignment: .center) {
-                HStack(spacing: 24) {
+                Text(String(format: "%.2f s", modelStat.avgProcessingTime))
-                    MetricDisplay(
+                    .font(.system(size: 24, weight: .bold, design: .rounded))
-                        title: "Avg. Enhancement Time",
+                    .foregroundColor(.indigo)
-                        value: String(format: "%.2f s", modelStat.avgProcessingTime),
+                Text("Avg. Enhancement Time")
-                        color: .indigo
+                    .font(.caption)
-                    )
+                    .foregroundColor(.secondary)
-                }
             }
+            .frame(maxWidth: .infinity)
         }
         .padding(16)
-        .background(CardBackground(isSelected: false))
+        .background(MetricCardBackground(color: .indigo))
-        .cornerRadius(8)
+        .cornerRadius(12)
+    }
+}
+
+struct MetricCardBackground: View {
+    let color: Color
+    
+    var body: some View {
+        RoundedRectangle(cornerRadius: 12)
+            .fill(
+                LinearGradient(
+                    gradient: Gradient(stops: [
+                        .init(color: color.opacity(0.15), location: 0),
+                        .init(color: Color(NSColor.windowBackgroundColor).opacity(0.1), location: 0.6)
+                    ]),
+                    startPoint: .top,
+                    endPoint: .bottom
+                )
+            )
+            .overlay(
+                RoundedRectangle(cornerRadius: 12)
+                    .stroke(
+                        LinearGradient(
+                            gradient: Gradient(colors: [
+                                Color(NSColor.quaternaryLabelColor).opacity(0.3),
+                                Color(NSColor.quaternaryLabelColor).opacity(0.1)
+                            ]),
+                            startPoint: .top,
+                            endPoint: .bottom
+                        ),
+                        lineWidth: 1
+                    )
+            )
+            .shadow(color: Color.black.opacity(0.05), radius: 5, y: 3)
     }
 }