Add live waveform, thinking dots, and UI polish for v2.1.0 (#3)

* Add live waveform, thinking dots, and UI polish for v2.1.0

* Add coral brand color system and recolor app icon

Introduce a warm, voice-centric color palette (coral #FF6B6B) to replace
the generic blue/system defaults. This gives AudioType a distinct brand
identity and makes recording/processing states visually distinguishable
at a glance.

- Add Theme.swift with centralized color constants (coral, amber, adaptive)
- Tint menu bar icon: coral-red when recording, amber when processing
- Recolor waveform bars from white to coral gradient
- Recolor thinking dots from white to amber
- Update onboarding and settings to use coral accents/checkmarks
- Replace app icon with coral gradient background version

* Fix swiftlint violations: force cast and opening brace spacing

Author: PatelUtkarsh

AudioType/App/MenuBarController.swift

@@ -1,6 +1,28 @@
 import AppKit
 import SwiftUI
 
+// MARK: – NSImage tinting helper
+
+extension NSImage {
+  /// Returns a copy of the image tinted with the given color (non-template).
+  func tinted(with color: NSColor) -> NSImage {
+    guard let tinted = self.copy() as? NSImage else { return self }
+    tinted.isTemplate = false
+    tinted.lockFocus()
+    color.set()
+    let rect = NSRect(origin: .zero, size: tinted.size)
+    rect.fill(using: .sourceAtop)
+    tinted.unlockFocus()
+    return tinted
+  }
+}
+
+/// Shared observable for live audio level — drives the recording waveform.
+class AudioLevelMonitor: ObservableObject {
+  static let shared = AudioLevelMonitor()
+  @Published var level: Float = 0.0
+}
+
 class MenuBarController: NSObject, NSWindowDelegate {
   private weak var statusItem: NSStatusItem?
   private var transcriptionManager: TranscriptionManager
@@ -18,6 +40,14 @@ class MenuBarController: NSObject, NSWindowDelegate {
       name: .transcriptionStateChanged,
       object: nil
     )
+
+    // Observe audio level changes
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(audioLevelDidChange),
+      name: .audioLevelChanged,
+      object: nil
+    )
   }
 
   func setupStatusItem(_ statusItem: NSStatusItem) {
@@ -64,36 +94,53 @@ class MenuBarController: NSObject, NSWindowDelegate {
     }
   }
 
+  @objc private func audioLevelDidChange(_ notification: Notification) {
+    guard let level = notification.userInfo?["level"] as? Float else { return }
+    DispatchQueue.main.async {
+      AudioLevelMonitor.shared.level = level
+    }
+  }
+
   private func updateUI(for state: TranscriptionState) {
     guard let button = statusItem?.button else { return }
 
     switch state {
     case .idle:
-      button.image = NSImage(
+      let img = NSImage(
         systemSymbolName: "waveform.circle.fill", accessibilityDescription: "Ready")
+      img?.isTemplate = true
+      button.image = img
+      AudioLevelMonitor.shared.level = 0
       hideRecordingIndicator()
       updateStatusMenuItem("Ready")
 
     case .recording:
-      button.image = NSImage(
-        systemSymbolName: "waveform.circle.fill", accessibilityDescription: "Recording")
+      // Tinted coral/red — non-template so the color shows through
+      if let base = NSImage(
+        systemSymbolName: "waveform.circle.fill", accessibilityDescription: "Recording") {
+        button.image = base.tinted(with: AudioTypeTheme.nsRecordingRed)
+      }
       showRecordingIndicator()
       updateStatusMenuItem("Recording...")
 
     case .processing:
-      button.image = NSImage(
-        systemSymbolName: "ellipsis.circle.fill", accessibilityDescription: "Processing")
+      // Tinted amber — "I'm thinking"
+      if let base = NSImage(
+        systemSymbolName: "ellipsis.circle.fill", accessibilityDescription: "Processing") {
+        button.image = base.tinted(with: AudioTypeTheme.nsAmber)
+      }
+      AudioLevelMonitor.shared.level = 0
       updateRecordingIndicator(text: "Processing...")
       updateStatusMenuItem("Processing...")
 
     case .error(let message):
-      button.image = NSImage(
+      let img = NSImage(
         systemSymbolName: "exclamationmark.triangle.fill", accessibilityDescription: "Error")
+      img?.isTemplate = false
+      button.image = img?.tinted(with: .systemRed)
       hideRecordingIndicator()
       updateStatusMenuItem("Error: \(message)")
     }
-
-    button.image?.isTemplate = true
   }
 
   private func updateStatusMenuItem(_ text: String) {
@@ -128,16 +175,19 @@ class MenuBarController: NSObject, NSWindowDelegate {
       recordingWindow = window
     }
 
-    // Always update content to "Recording..." when showing
-    let hostingView = NSHostingView(rootView: RecordingOverlay(text: "Recording..."))
+    let hostingView = NSHostingView(
+      rootView: RecordingOverlay(text: "Recording...")
+        .environmentObject(AudioLevelMonitor.shared))
     hostingView.frame = NSRect(x: 0, y: 0, width: 180, height: 50)
     recordingWindow?.contentView = hostingView
     recordingWindow?.orderFront(nil)
   }
 
   private func updateRecordingIndicator(text: String) {
     if let window = recordingWindow {
-      let hostingView = NSHostingView(rootView: RecordingOverlay(text: text))
+      let hostingView = NSHostingView(
+        rootView: RecordingOverlay(text: text)
+          .environmentObject(AudioLevelMonitor.shared))
       hostingView.frame = NSRect(x: 0, y: 0, width: 180, height: 50)
       window.contentView = hostingView
     }
@@ -185,4 +235,5 @@ class MenuBarController: NSObject, NSWindowDelegate {
 
 extension Notification.Name {
   static let transcriptionStateChanged = Notification.Name("transcriptionStateChanged")
+  static let audioLevelChanged = Notification.Name("audioLevelChanged")
 }

AudioType/App/TranscriptionManager.swift

@@ -25,6 +25,7 @@ class TranscriptionManager: ObservableObject {
 
   @Published private(set) var state: TranscriptionState = .idle
   @Published private(set) var isInitialized = false
+  @Published private(set) var audioLevel: Float = 0.0
 
   private var groqEngine: GroqEngine?
   private var audioRecorder: AudioRecorder?
@@ -40,6 +41,16 @@ class TranscriptionManager: ObservableObject {
 
     // Initialize components
     audioRecorder = AudioRecorder()
+    audioRecorder?.onLevelUpdate = { [weak self] level in
+      Task { @MainActor in
+        self?.audioLevel = level
+        NotificationCenter.default.post(
+          name: .audioLevelChanged,
+          object: nil,
+          userInfo: ["level": level]
+        )
+      }
+    }
     textInserter = TextInserter()
 
     // Initialize Groq engine (lightweight — no model download needed)
@@ -149,6 +160,13 @@ class TranscriptionManager: ObservableObject {
       let elapsed = CFAbsoluteTimeGetCurrent() - startTime
       logger.info("Transcription completed in \(elapsed, format: .fixed(precision: 2))s: \(text)")
 
+      // Ensure processing indicator is visible for at least 0.5s
+      let minDisplayTime = 0.5
+      let remaining = minDisplayTime - elapsed
+      if remaining > 0 {
+        try? await Task.sleep(for: .seconds(remaining))
+      }
+
       // Post-process and insert text with trailing space
       await MainActor.run {
         let trimmedText = text.trimmingCharacters(in: .whitespacesAndNewlines)

AudioType/Core/AudioRecorder.swift

@@ -7,6 +7,9 @@ class AudioRecorder {
   private let bufferLock = NSLock()
   private var isRecording = false
 
+  /// Current audio level (0.0–1.0), updated in real-time from the mic input.
+  var onLevelUpdate: ((Float) -> Void)?
+
   private let logger = Logger(subsystem: "com.audiotype", category: "AudioRecorder")
 
   // Whisper requires 16kHz mono audio
@@ -135,6 +138,12 @@ class AudioRecorder {
         UnsafeBufferPointer(start: channelData[0], count: Int(buffer.frameLength)))
     }
 
+    // Compute RMS level for live waveform
+    let rms = sqrt(samplesArray.reduce(0) { $0 + $1 * $1 } / Float(max(samplesArray.count, 1)))
+    // Normalize: typical speech RMS is 0.01–0.15, scale aggressively to 0–1
+    let level = min(rms * 25, 1.0)
+    onLevelUpdate?(level)
+
     // Append to buffer
     bufferLock.lock()
     audioBuffer.append(contentsOf: samplesArray)

AudioType/UI/OnboardingView.swift

@@ -19,7 +19,7 @@ struct OnboardingView: View {
       VStack(spacing: 8) {
         Image(systemName: "mic.fill")
           .font(.system(size: 48))
-          .foregroundColor(.accentColor)
+          .foregroundColor(AudioTypeTheme.coral)
 
         Text("Welcome to AudioType")
           .font(.title)
@@ -56,7 +56,7 @@ struct OnboardingView: View {
           HStack(spacing: 12) {
             Image(systemName: "key.fill")
               .font(.title2)
-              .foregroundColor(.accentColor)
+              .foregroundColor(AudioTypeTheme.coral)
               .frame(width: 32)
 
             VStack(alignment: .leading, spacing: 2) {
@@ -71,7 +71,7 @@ struct OnboardingView: View {
 
             if apiKeyConfigured {
               Image(systemName: "checkmark.circle.fill")
-                .foregroundColor(.green)
+                .foregroundColor(AudioTypeTheme.coral)
             }
           }
 
@@ -117,6 +117,7 @@ struct OnboardingView: View {
           .frame(maxWidth: .infinity)
       }
       .buttonStyle(.borderedProminent)
+      .tint(AudioTypeTheme.coral)
       .controlSize(.large)
       .disabled(!canContinue)
       .padding(.horizontal)
@@ -187,7 +188,7 @@ struct PermissionRow: View {
     HStack(spacing: 12) {
       Image(systemName: icon)
         .font(.title2)
-        .foregroundColor(.accentColor)
+        .foregroundColor(AudioTypeTheme.coral)
         .frame(width: 32)
 
       VStack(alignment: .leading, spacing: 2) {
@@ -202,7 +203,7 @@ struct PermissionRow: View {
 
       if isGranted {
         Image(systemName: "checkmark.circle.fill")
-          .foregroundColor(.green)
+          .foregroundColor(AudioTypeTheme.coral)
       } else {
         Button("Grant") {
           action()

AudioType/UI/RecordingOverlay.swift

@@ -2,37 +2,87 @@ import SwiftUI
 
 struct RecordingOverlay: View {
   let text: String
+  @EnvironmentObject var levelMonitor: AudioLevelMonitor
 
   private var isRecording: Bool {
     text == "Recording..."
   }
 
   var body: some View {
-    HStack(spacing: 10) {
+    HStack(spacing: 8) {
       if isRecording {
-        // Pulsing red dot for recording
-        Circle()
-          .fill(Color.red)
-          .frame(width: 10, height: 10)
+        LiveWaveformView(level: levelMonitor.level)
+          .frame(width: 44, height: 24)
       } else {
-        // Spinner for processing
-        ProgressView()
-          .scaleEffect(0.7)
-          .frame(width: 10, height: 10)
+        ThinkingDotsView()
+          .frame(width: 40, height: 20)
       }
-
-      Text(isRecording ? "Recording" : "Processing")
-        .font(.system(size: 13, weight: .medium))
-        .foregroundColor(.primary)
-        .fixedSize(horizontal: true, vertical: false)
     }
     .padding(.horizontal, 16)
     .padding(.vertical, 10)
-    .frame(minWidth: 140)
+    .frame(minWidth: 80)
     .background(
       RoundedRectangle(cornerRadius: 10)
         .fill(.ultraThinMaterial)
         .shadow(color: .black.opacity(0.2), radius: 8, x: 0, y: 4)
     )
   }
 }
+
+/// Waveform bars driven by live audio level from the microphone.
+struct LiveWaveformView: View {
+  var level: Float
+
+  private let barCount = 5
+  private let minHeight: CGFloat = 3
+  private let maxHeight: CGFloat = 22
+
+  var body: some View {
+    HStack(spacing: 3) {
+      ForEach(0..<barCount, id: \.self) { index in
+        RoundedRectangle(cornerRadius: 1.5)
+          .fill(
+            LinearGradient(
+              colors: [AudioTypeTheme.coral, AudioTypeTheme.coralLight],
+              startPoint: .bottom,
+              endPoint: .top
+            )
+          )
+          .frame(width: 3, height: barHeight(for: index))
+          .animation(.easeOut(duration: 0.08), value: level)
+      }
+    }
+  }
+
+  private func barHeight(for index: Int) -> CGFloat {
+    // Each bar gets a slightly different scale to look organic
+    let offsets: [Float] = [0.6, 1.0, 0.8, 0.9, 0.5]
+    let scaled = CGFloat(level * offsets[index % offsets.count])
+    return max(minHeight, minHeight + (maxHeight - minHeight) * scaled)
+  }
+}
+
+struct ThinkingDotsView: View {
+  @State private var animating = false
+
+  var body: some View {
+    HStack(spacing: 6) {
+      ForEach(0..<3, id: \.self) { index in
+        Circle()
+          .fill(AudioTypeTheme.thinkingColor)
+          .frame(width: 6, height: 6)
+          .scaleEffect(animating ? 1.0 : 0.4)
+          .opacity(animating ? 1.0 : 0.3)
+          .animation(
+            .easeInOut(duration: 0.5)
+              .repeatForever(autoreverses: true)
+              .delay(Double(index) * 0.2),
+            value: animating
+          )
+      }
+    }
+    .onAppear {
+      animating = true
+    }
+  }
+}

AudioType/UI/SettingsView.swift

@@ -31,7 +31,7 @@ struct SettingsView: View {
         if isApiKeySet {
           HStack(spacing: 4) {
             Image(systemName: "checkmark.circle.fill")
-              .foregroundColor(.green)
+              .foregroundColor(AudioTypeTheme.coral)
               .font(.caption)
             Text("API key configured")
               .foregroundColor(.secondary)
@@ -45,12 +45,14 @@ struct SettingsView: View {
             .font(.caption)
         }
 
-        Button("Get free API key") {
-          if let url = URL(string: "https://console.groq.com/keys") {
-            NSWorkspace.shared.open(url)
+        if !isApiKeySet {
+          Button("Get free API key") {
+            if let url = URL(string: "https://console.groq.com/keys") {
+              NSWorkspace.shared.open(url)
+            }
           }
+          .font(.caption)
         }
-        .font(.caption)
 
         Picker("Model", selection: $selectedModel) {
           ForEach(GroqModel.allCases, id: \.self) { model in
@@ -99,7 +101,7 @@ struct SettingsView: View {
         HStack {
           Text("Version")
           Spacer()
-          Text("2.0.0")
+          Text("2.1.0")
             .foregroundColor(.secondary)
         }
 
@@ -154,7 +156,7 @@ struct PermissionStatusView: View {
   var body: some View {
     HStack(spacing: 4) {
       Image(systemName: granted ? "checkmark.circle.fill" : "xmark.circle.fill")
-        .foregroundColor(granted ? .green : .red)
+        .foregroundColor(granted ? AudioTypeTheme.coral : .red)
       Text(granted ? "Granted" : "Not Granted")
         .foregroundColor(.secondary)
     }