style(mac): hud glass voice overlay

apps/macos/Sources/Clawdis/VisualEffectView.swift

@@ -0,0 +1,38 @@
+import AppKit
+import SwiftUI
+
+struct VisualEffectView: NSViewRepresentable {
+    var material: NSVisualEffectView.Material
+    var blendingMode: NSVisualEffectView.BlendingMode
+    var state: NSVisualEffectView.State
+    var emphasized: Bool
+
+    init(
+        material: NSVisualEffectView.Material,
+        blendingMode: NSVisualEffectView.BlendingMode = .behindWindow,
+        state: NSVisualEffectView.State = .active,
+        emphasized: Bool = false)
+    {
+        self.material = material
+        self.blendingMode = blendingMode
+        self.state = state
+        self.emphasized = emphasized
+    }
+
+    func makeNSView(context _: Context) -> NSVisualEffectView {
+        let view = NSVisualEffectView()
+        view.material = self.material
+        view.blendingMode = self.blendingMode
+        view.state = self.state
+        view.isEmphasized = self.emphasized
+        return view
+    }
+
+    func updateNSView(_ nsView: NSVisualEffectView, context _: Context) {
+        nsView.material = self.material
+        nsView.blendingMode = self.blendingMode
+        nsView.state = self.state
+        nsView.isEmphasized = self.emphasized
+    }
+}
+

apps/macos/Sources/Clawdis/VoiceWakeOverlay.swift

@@ -510,12 +510,13 @@ private struct VoiceWakeOverlayView: View {
             .padding(.vertical, 8)
             .padding(.horizontal, 10)
             .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .topLeading)
-            .background(
+            .background {
-                RoundedRectangle(cornerRadius: 12, style: .continuous)
+                let shape = RoundedRectangle(cornerRadius: 12, style: .continuous)
-                    .strokeBorder(Color.white.opacity(0.12), lineWidth: 1)
+                VisualEffectView(material: .hudWindow, blendingMode: .behindWindow)
-                    .background(
+                    .clipShape(shape)
-                        RoundedRectangle(cornerRadius: 12, style: .continuous)
+                    .overlay(shape.strokeBorder(Color.white.opacity(0.16), lineWidth: 1))
-                            .fill(.regularMaterial)))
+            }
+            .shadow(color: Color.black.opacity(0.22), radius: 14, x: 0, y: -2)
             .onHover { self.isHovering = $0 }
 
             // Close button rendered above and outside the clipped bubble