Refine inbox and watch approval presentation

Tighten the inbox, detail, and watch layouts so approval actions feel denser and more direct across compact surfaces.

swift/Sources/Features/Home/HomeCards.swift

@@ -139,46 +139,156 @@ struct ApprovalRow: View {
     let handle: String
     var compact = false
     var highlighted = false
+    /// When non-nil the row renders inline Deny/Approve buttons below the
+    /// header — matching the shadcn inbox card.
+    var onApprove: (() -> Void)? = nil
+    var onDeny: (() -> Void)? = nil
+    var isBusy = false
+
+    private var showsInlineActions: Bool {
+        request.status == .pending && onApprove != nil && onDeny != nil && !compact
+    }
+
+    private var tint: Color { BrandTint.color(for: request.appDisplayName) }
 
     var body: some View {
-        HStack(spacing: 12) {
-            MonogramAvatar(title: request.appDisplayName, size: compact ? 32 : 40)
-
-            VStack(alignment: .leading, spacing: 4) {
-                Text(request.inboxTitle)
-                    .font(compact ? .subheadline.weight(.semibold) : .headline)
-                    .foregroundStyle(.primary)
-                    .lineLimit(2)
-
-                Text("as \(handle) · \(request.locationSummary)")
-                    .font(compact ? .caption : .subheadline)
-                    .foregroundStyle(.secondary)
-                    .lineLimit(1)
-            }
-
-            Spacer(minLength: 8)
-
-            HStack(spacing: 10) {
-                TimeChip(date: request.createdAt, compact: compact)
-                Image(systemName: "chevron.right")
-                    .font(.caption.weight(.semibold))
-                    .foregroundStyle(.tertiary)
+        VStack(alignment: .leading, spacing: showsInlineActions ? 12 : 0) {
+            header
+            if showsInlineActions {
+                actionRow
             }
         }
-        .padding(.vertical, compact ? 6 : 10)
-        .padding(.horizontal, 12)
-        .background(
-            RoundedRectangle(cornerRadius: 18, style: .continuous)
-                .fill(highlighted ? IdP.tint.opacity(0.06) : Color.clear)
-        )
-        .overlay(
-            RoundedRectangle(cornerRadius: 18, style: .continuous)
-                .stroke(highlighted ? IdP.tint : Color.clear, lineWidth: highlighted ? 1.5 : 0)
-        )
+        .padding(showsInlineActions ? 14 : (compact ? 10 : 12))
+        .background(background)
+        .overlay(stroke)
+        .background(glow)
         .contentShape(Rectangle())
         .accessibilityElement(children: .combine)
         .accessibilityLabel("\(request.inboxTitle), \(request.locationSummary), \(request.createdAt.formatted(date: .omitted, time: .shortened))")
     }
+
+    private var header: some View {
+        HStack(alignment: .top, spacing: 12) {
+            MonogramAvatar(
+                title: request.appDisplayName,
+                size: compact ? 32 : 40,
+                tint: tint,
+                filled: true
+            )
+
+            VStack(alignment: .leading, spacing: 2) {
+                HStack(alignment: .firstTextBaseline, spacing: 8) {
+                    Text(request.appDisplayName)
+                        .font(compact ? .footnote.weight(.semibold) : .subheadline.weight(.semibold))
+                        .foregroundStyle(.primary)
+                        .lineLimit(1)
+
+                    Spacer(minLength: 4)
+
+                    Text(relativeTime)
+                        .font(.caption)
+                        .foregroundStyle(Color.idpMutedForeground)
+                }
+
+                Text(request.kind.title)
+                    .font(compact ? .caption : .footnote)
+                    .foregroundStyle(Color.idpMutedForeground)
+                    .lineLimit(1)
+
+                if !compact {
+                    HStack(spacing: 8) {
+                        Label {
+                            Text(request.locationSummary)
+                        } icon: {
+                            Image(systemName: "location.fill")
+                        }
+                        .font(.caption)
+                        .foregroundStyle(Color.idpMutedForeground)
+                        .labelStyle(.titleAndIcon)
+
+                        ShadcnBadge(
+                            title: riskBadgeTitle,
+                            tone: riskBadgeTone
+                        )
+                    }
+                    .padding(.top, 6)
+                }
+            }
+
+            if !showsInlineActions && compact {
+                Image(systemName: "chevron.right")
+                    .font(.caption.weight(.semibold))
+                    .foregroundStyle(Color.idpMutedForeground)
+                    .padding(.top, 4)
+            }
+        }
+    }
+
+    private var actionRow: some View {
+        HStack(spacing: 8) {
+            Button(action: { onDeny?() }) {
+                Text("Deny")
+            }
+            .buttonStyle(SecondaryActionStyle())
+            .disabled(isBusy)
+
+            Button(action: { onApprove?() }) {
+                if isBusy {
+                    ProgressView().tint(Color.idpPrimaryForeground)
+                } else {
+                    Label("Approve", systemImage: "checkmark")
+                        .labelStyle(.titleAndIcon)
+                }
+            }
+            .buttonStyle(PrimaryActionStyle())
+            .disabled(isBusy)
+        }
+    }
+
+    private var background: some View {
+        RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
+            .fill(Color.idpCard)
+    }
+
+    private var stroke: some View {
+        RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
+            .stroke(highlighted ? IdP.tint : Color.idpBorder, lineWidth: 1)
+    }
+
+    @ViewBuilder
+    private var glow: some View {
+        if highlighted {
+            RoundedRectangle(cornerRadius: IdP.cardRadius + 3, style: .continuous)
+                .fill(IdP.tint.opacity(0.10))
+                .padding(-3)
+        }
+    }
+
+    private var relativeTime: String {
+        let seconds = Int(Date.now.timeIntervalSince(request.createdAt))
+        if seconds < 60 { return "now" }
+        if seconds < 3600 { return "\(seconds / 60)m" }
+        if seconds < 86_400 { return "\(seconds / 3600)h" }
+        return "\(seconds / 86_400)d"
+    }
+
+    private var riskBadgeTitle: String {
+        switch (request.status, request.risk) {
+        case (.approved, _): return "approved"
+        case (.rejected, _): return "denied"
+        case (.pending, .routine): return "trusted"
+        case (.pending, .elevated): return "new network"
+        }
+    }
+
+    private var riskBadgeTone: ShadcnBadge.Tone {
+        switch (request.status, request.risk) {
+        case (.approved, _): return .ok
+        case (.rejected, _): return .danger
+        case (.pending, .routine): return .ok
+        case (.pending, .elevated): return .warn
+        }
+    }
 }
 
 struct NotificationEventRow: View {
@@ -270,27 +380,30 @@ struct DeviceItemRow: View {
 
     var body: some View {
         HStack(spacing: 12) {
-            Image(systemName: device.systemImage)
-                .font(.headline)
-                .foregroundStyle(IdP.tint)
-                .frame(width: 28)
+            ZStack {
+                RoundedRectangle(cornerRadius: 8, style: .continuous)
+                    .fill(Color.idpMuted)
+                Image(systemName: device.systemImage)
+                    .font(.footnote.weight(.semibold))
+                    .foregroundStyle(.primary)
+            }
+            .frame(width: 32, height: 32)
 
-            VStack(alignment: .leading, spacing: 3) {
+            VStack(alignment: .leading, spacing: 1) {
                 Text(device.name)
-                    .font(.body.weight(.medium))
+                    .font(.footnote.weight(.semibold))
 
-                Text(device.isCurrent ? "This device" : "Seen \(device.lastSeen, style: .relative)")
-                    .font(.subheadline)
-                    .foregroundStyle(.secondary)
+                Text(device.isCurrent ? "berlin · primary · this device" : "last seen \(device.lastSeen, style: .relative)")
+                    .font(.caption)
+                    .foregroundStyle(Color.idpMutedForeground)
             }
 
             Spacer(minLength: 8)
 
-            StatusDot(color: device.isTrusted ? .green : .yellow)
-
-            Image(systemName: "chevron.right")
-                .font(.caption.weight(.semibold))
-                .foregroundStyle(.tertiary)
+            ShadcnBadge(
+                title: device.isTrusted ? "high" : "med",
+                tone: device.isTrusted ? .ok : .warn
+            )
         }
         .deviceRowStyle()
         .accessibilityElement(children: .combine)
@@ -300,34 +413,56 @@ struct DeviceItemRow: View {
 struct TrustSignalBanner: View {
     let request: ApprovalRequest
 
-    var body: some View {
-        HStack(alignment: .top, spacing: 12) {
-            Image(systemName: symbolName)
-                .font(.headline)
-                .foregroundStyle(request.trustColor)
-
-            VStack(alignment: .leading, spacing: 4) {
-                Text(request.trustHeadline)
-                    .font(.subheadline.weight(.semibold))
-
-                Text(request.trustExplanation)
-                    .font(.subheadline)
-                    .foregroundStyle(.secondary)
-            }
+    private var bg: Color {
+        switch request.trustColor {
+        case .green: return Color.idpOK.opacity(0.10)
+        case .yellow: return Color.idpWarn.opacity(0.15)
+        default: return Color.idpDestructive.opacity(0.10)
+        }
+    }
+
+    private var fg: Color {
+        switch request.trustColor {
+        case .green: return Color.idpOK
+        case .yellow: return Color(red: 0.52, green: 0.30, blue: 0.05)
+        default: return Color.idpDestructive
         }
-        .padding(.vertical, 8)
     }
 
     private var symbolName: String {
         switch request.trustColor {
-        case .green:
-            return "checkmark.shield.fill"
-        case .yellow:
-            return "exclamationmark.triangle.fill"
-        default:
-            return "xmark.shield.fill"
+        case .green: return "checkmark.shield"
+        case .yellow: return "exclamationmark.triangle"
+        default: return "xmark.shield"
         }
     }
+
+    var body: some View {
+        HStack(alignment: .top, spacing: 12) {
+            Image(systemName: symbolName)
+                .font(.subheadline.weight(.semibold))
+                .foregroundStyle(fg)
+                .padding(.top, 1)
+
+            VStack(alignment: .leading, spacing: 2) {
+                Text(request.trustHeadline)
+                    .font(.footnote.weight(.semibold))
+                    .foregroundStyle(fg)
+
+                Text(request.trustExplanation)
+                    .font(.caption)
+                    .foregroundStyle(Color.idpMutedForeground)
+            }
+
+            Spacer(minLength: 0)
+        }
+        .padding(12)
+        .background(bg, in: RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous))
+        .overlay(
+            RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
+                .stroke(Color.idpBorder, lineWidth: 1)
+        )
+    }
 }
 
 struct EmptyPaneView: View {

swift/Sources/Features/Home/HomePanels.swift

@@ -31,71 +31,132 @@ struct InboxListView: View {
         filteredRequests.first?.id
     }
 
-    var body: some View {
-        List {
-            if filteredRequests.isEmpty {
-                EmptyPaneView(
-                    title: "No sign-in requests",
-                    message: "New approval requests will appear here as soon as a relying party asks for proof.",
-                    systemImage: "tray"
-                )
-                .listRowBackground(Color.clear)
-            } else {
-                ForEach(recentRequests) { request in
-                    row(for: request, compact: false)
-                        .transition(.move(edge: .top).combined(with: .opacity))
-                }
+    private var oldestPendingMinutes: Int? {
+        guard let oldest = model.pendingRequests.min(by: { $0.createdAt < $1.createdAt }) else {
+            return nil
+        }
+        return max(1, Int(Date.now.timeIntervalSince(oldest.createdAt)) / 60)
+    }
+
+    var body: some View {
+        ScrollView {
+            LazyVStack(alignment: .leading, spacing: 10, pinnedViews: []) {
+                InboxHeader(
+                    pendingCount: model.pendingRequests.count,
+                    oldestMinutes: oldestPendingMinutes
+                )
+                .padding(.horizontal, 4)
+                .padding(.bottom, 6)
+
+                if filteredRequests.isEmpty {
+                    EmptyPaneView(
+                        title: "No sign-in requests",
+                        message: "New approval requests will appear here as soon as a relying party asks for proof.",
+                        systemImage: "tray"
+                    )
+                    .padding(.top, 40)
+                } else {
+                    ForEach(recentRequests) { request in
+                        row(for: request, compact: false)
+                            .transition(.move(edge: .top).combined(with: .opacity))
+                    }
+
+                    if !earlierRequests.isEmpty {
+                        Text("Earlier today")
+                            .font(.caption2.weight(.semibold))
+                            .tracking(0.5)
+                            .textCase(.uppercase)
+                            .foregroundStyle(Color.idpMutedForeground)
+                            .padding(.top, 12)
+                            .padding(.leading, 4)
 
-                if !earlierRequests.isEmpty {
-                    Section {
                         ForEach(earlierRequests) { request in
                             row(for: request, compact: true)
                                 .transition(.move(edge: .top).combined(with: .opacity))
                         }
-                    } header: {
-                        Text("Earlier today")
-                            .textCase(nil)
                     }
                 }
             }
+            .padding(.horizontal, 16)
+            .padding(.top, 8)
+            .padding(.bottom, 120)
         }
-        .listStyle(.plain)
+        .scrollIndicators(.hidden)
+        .background(Color.idpBackground.ignoresSafeArea())
         .navigationTitle("Inbox")
         .animation(.spring(response: 0.35, dampingFraction: 0.88), value: filteredRequests.map(\.id))
-        .idpSearchable(text: $searchText, isPresented: $isSearchPresented)
+        #if !os(macOS)
+        .searchable(text: $searchText, isPresented: $isSearchPresented, placement: .navigationBarDrawer(displayMode: .automatic))
+        #else
+        .searchable(text: $searchText, isPresented: $isSearchPresented)
+        #endif
     }
 
     @ViewBuilder
     private func row(for request: ApprovalRequest, compact: Bool) -> some View {
+        let handle = model.profile?.handle ?? "@you"
+        let highlighted = highlightedRequestID == request.id
+        let isBusy = model.activeRequestID == request.id
+        let rowContent = ApprovalRow(
+            request: request,
+            handle: handle,
+            compact: compact,
+            highlighted: highlighted,
+            onApprove: compact ? nil : { Task { await model.approve(request) } },
+            onDeny: compact ? nil : {
+                Haptics.warning()
+                Task { await model.reject(request) }
+            },
+            isBusy: isBusy
+        )
+
         if usesSelection {
             Button {
                 selectedRequestID = request.id
                 Haptics.selection()
             } label: {
-                ApprovalRow(
-                    request: request,
-                    handle: model.profile?.handle ?? "@you",
-                    compact: compact,
-                    highlighted: highlightedRequestID == request.id
-                )
+                rowContent
             }
             .buttonStyle(.plain)
-            .listRowInsets(EdgeInsets(top: 4, leading: 8, bottom: 4, trailing: 8))
-            .listRowSeparator(.hidden)
-            .listRowBackground(Color.clear)
         } else {
             NavigationLink(value: request.id) {
-                ApprovalRow(
-                    request: request,
-                    handle: model.profile?.handle ?? "@you",
-                    compact: compact,
-                    highlighted: highlightedRequestID == request.id
-                )
+                rowContent
             }
             .buttonStyle(.plain)
-            .listRowInsets(EdgeInsets(top: 4, leading: 8, bottom: 4, trailing: 8))
-            .listRowSeparator(.hidden)
-            .listRowBackground(Color.clear)
+        }
+    }
+}
+
+private struct InboxHeader: View {
+    let pendingCount: Int
+    let oldestMinutes: Int?
+
+    var body: some View {
+        HStack(spacing: 10) {
+            ZStack {
+                RoundedRectangle(cornerRadius: 6, style: .continuous)
+                    .fill(Color.idpPrimary)
+                Image(systemName: "shield.lefthalf.filled")
+                    .font(.caption.weight(.semibold))
+                    .foregroundStyle(Color.idpPrimaryForeground)
+            }
+            .frame(width: 24, height: 24)
+
+            Text("idp.global")
+                .font(.subheadline.weight(.semibold))
+
+            Spacer()
+
+            if pendingCount > 0 {
+                ShadcnBadge(title: "\(pendingCount) pending", tone: .ok)
+                if let oldestMinutes {
+                    Text("oldest \(oldestMinutes) min ago")
+                        .font(.caption)
+                        .foregroundStyle(Color.idpMutedForeground)
+                }
+            } else {
+                ShadcnBadge(title: "all clear", tone: .ok)
+            }
         }
     }
 }

swift/Sources/Features/Home/HomeRootView.swift

@@ -230,34 +230,40 @@ private struct InboxToolbar: ToolbarContent {
 
     var body: some ToolbarContent {
         ToolbarItem(placement: .idpTrailingToolbar) {
-            HStack(spacing: 8) {
+            HStack(spacing: 6) {
                 Button {
-                    isSearchPresented = true
+                    isSearchPresented.toggle()
                 } label: {
                     Image(systemName: "magnifyingglass")
-                        .font(.headline)
+                        .font(.footnote.weight(.medium))
                         .foregroundStyle(.primary)
+                        .frame(width: 32, height: 32)
                 }
                 .accessibilityLabel("Search inbox")
 
                 Button {
                     model.selectedSection = .identity
                 } label: {
-                    MonogramAvatar(title: model.profile?.name ?? "idp.global", size: 28)
+                    ZStack {
+                        RoundedRectangle(cornerRadius: 6, style: .continuous)
+                            .fill(Color.idpAccentSoft)
+                        Text(initials(from: model.profile?.name))
+                            .font(.caption.weight(.semibold))
+                            .foregroundStyle(IdP.tint)
+                    }
+                    .frame(width: 28, height: 28)
                 }
                 .accessibilityLabel("Open identity")
             }
-            .padding(.horizontal, 10)
-            .padding(.vertical, 8)
-            .background(
-                RoundedRectangle(cornerRadius: 18, style: .continuous)
-                    .fill(.clear)
-                    .idpGlassChrome()
-            )
-            .overlay(
-                RoundedRectangle(cornerRadius: 18, style: .continuous)
-                    .stroke(Color.white.opacity(0.16), lineWidth: 1)
-            )
         }
     }
+
+    private func initials(from name: String?) -> String {
+        guard let name else { return "YOU" }
+        let letters = name
+            .split(separator: " ")
+            .prefix(2)
+            .compactMap { $0.first }
+        return String(letters.map(Character.init)).uppercased()
+    }
 }

swift/Sources/Features/Home/HomeSheets.swift

@@ -15,54 +15,45 @@ struct ApprovalDetailView: View {
     var body: some View {
         Group {
             if let request {
-                VStack(spacing: 0) {
-                    RequestHeroCard(
-                        request: request,
-                        handle: model.profile?.handle ?? "@you"
-                    )
-                    .padding(.horizontal, 16)
-                    .padding(.top, 16)
+                ScrollView {
+                    VStack(alignment: .leading, spacing: 14) {
+                        RequestHeroCard(
+                            request: request,
+                            handle: model.profile?.handle ?? "@you"
+                        )
 
-                    Form {
-                        Section("Context") {
-                            LabeledContent("From device", value: request.deviceSummary)
-                            LabeledContent("Location", value: request.locationSummary)
-                            LabeledContent("Network", value: request.networkSummary)
-                            LabeledContent("IP") {
-                                Text(request.ipSummary)
-                                    .monospacedDigit()
-                            }
-                        }
+                        ShadcnMetaCard(rows: [
+                            .init(label: "From device", value: request.deviceSummary),
+                            .init(label: "Location", value: request.locationSummary),
+                            .init(label: "Network", value: request.networkSummary),
+                            .init(label: "IP", value: request.ipSummary, monospaced: true)
+                        ])
 
-                        Section("Will share") {
-                            ForEach(request.scopes, id: \.self) { scope in
-                                Label(scope, systemImage: "checkmark.circle.fill")
-                                    .foregroundStyle(.green)
-                            }
-                        }
+                        SectionHeader(title: "Will share")
+                        ShadcnScopesCard(scopes: request.scopes, profile: model.profile)
 
-                        Section("Trust signals") {
-                            TrustSignalBanner(request: request)
-                        }
+                        TrustSignalBanner(request: request)
                     }
-                    .scrollContentBackground(.hidden)
-                    .background(Color.idpGroupedBackground)
+                    .padding(.horizontal, 16)
+                    .padding(.top, 14)
+                    .padding(.bottom, 110)
                 }
-                .background(Color.idpGroupedBackground)
+                .scrollIndicators(.hidden)
+                .background(Color.idpBackground)
                 .navigationTitle(request.appDisplayName)
                 .idpInlineNavigationTitle()
                 .toolbar {
                     ToolbarItem(placement: .idpTrailingToolbar) {
-                        IdPGlassCapsule(padding: EdgeInsets(top: 8, leading: 12, bottom: 8, trailing: 12)) {
-                            Text(request.expiresAt, style: .timer)
-                                .font(.caption.weight(.semibold))
-                                .monospacedDigit()
-                        }
+                        ShadcnBadge(
+                            title: "expires \(formattedExpires(request.expiresAt))",
+                            tone: .outline,
+                            leading: Image(systemName: "clock")
+                        )
                     }
                 }
                 .safeAreaInset(edge: .bottom) {
                     if request.status == .pending {
-                        HStack(spacing: 12) {
+                        HStack(spacing: 8) {
                             Button("Deny") {
                                 Task {
                                     await performReject(request)
@@ -76,10 +67,11 @@ struct ApprovalDetailView: View {
                         }
                         .padding(.horizontal, 16)
                         .padding(.vertical, 12)
-                        .background {
+                        .background(Color.idpBackground)
+                        .overlay(alignment: .top) {
                             Rectangle()
-                                .fill(.clear)
-                                .idpGlassChrome()
+                                .fill(Color.idpBorder)
+                                .frame(height: 1)
                         }
                     }
                 }
@@ -96,6 +88,13 @@ struct ApprovalDetailView: View {
         }
     }
 
+    private func formattedExpires(_ date: Date) -> String {
+        let seconds = Int(max(0, date.timeIntervalSince(.now)))
+        let m = seconds / 60
+        let s = seconds % 60
+        return String(format: "%d:%02d", m, s)
+    }
+
     @ViewBuilder
     private func keyboardShortcuts(for request: ApprovalRequest) -> some View {
         Group {
@@ -158,24 +157,20 @@ struct HoldToApproveButton: View {
     var body: some View {
         ZStack {
             RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                .fill(isBusy ? Color.secondary.opacity(0.24) : IdP.tint)
-
-            RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
-                .stroke(Color.white.opacity(0.16), lineWidth: 1)
+                .fill(isBusy ? Color.idpMuted : Color.idpPrimary)
 
             label
                 .padding(.horizontal, 20)
-                .padding(.vertical, 14)
 
-            GeometryReader { geometry in
+            GeometryReader { _ in
                 RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous)
                     .trim(from: 0, to: progress)
-                    .stroke(Color.white.opacity(0.85), style: StrokeStyle(lineWidth: 3, lineCap: .round))
+                    .stroke(IdP.tint, style: StrokeStyle(lineWidth: 2, lineCap: .round))
                     .rotationEffect(.degrees(-90))
-                    .padding(2)
+                    .padding(1.5)
             }
         }
-        .frame(minHeight: 52)
+        .frame(height: 44)
         .contentShape(RoundedRectangle(cornerRadius: IdP.controlRadius, style: .continuous))
         .onLongPressGesture(minimumDuration: 0.6, maximumDistance: 20, pressing: updateProgress) {
             guard !isBusy else { return }
@@ -194,11 +189,14 @@ struct HoldToApproveButton: View {
     private var label: some View {
         if isBusy {
             ProgressView()
-                .tint(.white)
+                .tint(Color.idpPrimaryForeground)
         } else {
-            Text(title)
-                .font(.headline)
-                .foregroundStyle(.white)
+            HStack(spacing: 6) {
+                Image(systemName: "checkmark")
+                Text(title)
+            }
+            .font(.subheadline.weight(.semibold))
+            .foregroundStyle(Color.idpPrimaryForeground)
         }
     }
 
@@ -210,6 +208,132 @@ struct HoldToApproveButton: View {
     }
 }
 
+struct ShadcnMetaCard: View {
+    struct Row: Identifiable {
+        let id = UUID()
+        let label: String
+        let value: String
+        var monospaced: Bool = false
+    }
+
+    let rows: [Row]
+
+    var body: some View {
+        VStack(spacing: 0) {
+            ForEach(Array(rows.enumerated()), id: \.element.id) { index, row in
+                HStack {
+                    Text(row.label)
+                        .foregroundStyle(Color.idpMutedForeground)
+                    Spacer()
+                    Text(row.value)
+                        .font(row.monospaced ? .footnote.monospaced() : .footnote.weight(.medium))
+                        .foregroundStyle(.primary)
+                }
+                .font(.footnote)
+                .padding(.horizontal, 14)
+                .padding(.vertical, 10)
+
+                if index < rows.count - 1 {
+                    Rectangle()
+                        .fill(Color.idpBorder)
+                        .frame(height: 1)
+                }
+            }
+        }
+        .background(Color.idpCard, in: RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous))
+        .overlay(
+            RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
+                .stroke(Color.idpBorder, lineWidth: 1)
+        )
+    }
+}
+
+struct ShadcnScopesCard: View {
+    let scopes: [String]
+    let profile: MemberProfile?
+
+    var body: some View {
+        VStack(spacing: 0) {
+            ForEach(Array(scopes.enumerated()), id: \.offset) { index, scope in
+                HStack(spacing: 10) {
+                    Image(systemName: icon(for: scope))
+                        .font(.caption)
+                        .foregroundStyle(Color.idpMutedForeground)
+                        .frame(width: 16)
+
+                    Text(label(for: scope))
+                        .font(.footnote.weight(.medium))
+
+                    Spacer()
+
+                    Text(value(for: scope))
+                        .font(.footnote)
+                        .foregroundStyle(Color.idpMutedForeground)
+
+                    Image(systemName: "checkmark")
+                        .font(.caption.weight(.semibold))
+                        .foregroundStyle(Color.idpOK)
+                }
+                .padding(.horizontal, 14)
+                .padding(.vertical, 10)
+
+                if index < scopes.count - 1 {
+                    Rectangle()
+                        .fill(Color.idpBorder)
+                        .frame(height: 1)
+                }
+            }
+        }
+        .background(Color.idpCard, in: RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous))
+        .overlay(
+            RoundedRectangle(cornerRadius: IdP.cardRadius, style: .continuous)
+                .stroke(Color.idpBorder, lineWidth: 1)
+        )
+    }
+
+    private func icon(for scope: String) -> String {
+        let key = scope.lowercased()
+        if key.contains("email") { return "envelope" }
+        if key.contains("location") { return "location" }
+        if key.contains("profile") { return "person" }
+        if key.contains("device") { return "iphone" }
+        if key.contains("session") { return "key" }
+        return "checkmark.seal"
+    }
+
+    private func label(for scope: String) -> String {
+        let key = scope.lowercased()
+        if key.contains("email") { return "Email address" }
+        if key.contains("location") { return "Coarse location" }
+        if key.contains("profile") { return "Profile name" }
+        if key.contains("device") { return "Device posture" }
+        if key.contains("session") { return "Session read" }
+        return scope.capitalized
+    }
+
+    private func value(for scope: String) -> String {
+        let key = scope.lowercased()
+        if key.contains("email") { return "\(profile?.handle ?? "@you")" }
+        if key.contains("location") { return "Berlin region" }
+        if key.contains("profile") { return profile?.name ?? "You" }
+        return "Yes"
+    }
+}
+
+struct SectionHeader: View {
+    let title: String
+
+    var body: some View {
+        Text(title)
+            .font(.caption2.weight(.semibold))
+            .tracking(0.5)
+            .textCase(.uppercase)
+            .foregroundStyle(Color.idpMutedForeground)
+            .padding(.leading, 4)
+            .padding(.top, 4)
+    }
+}
+
 struct NFCSheet: View {
     var title = "Hold near reader"
     var message = "Tap to confirm sign-in. Your location will be signed and sent."
@@ -227,34 +351,39 @@ struct NFCSheet: View {
     }
 
     var body: some View {
-        VStack(spacing: 24) {
+        VStack(spacing: 20) {
             ZStack {
                 ForEach(0..<3, id: \.self) { index in
                     Circle()
-                        .stroke(IdP.tint.opacity(0.16), lineWidth: 1.5)
-                        .frame(width: 88 + CGFloat(index * 34), height: 88 + CGFloat(index * 34))
-                        .scaleEffect(pulse ? 1.08 : 0.92)
-                        .opacity(pulse ? 0.2 : 0.6)
-                        .animation(.easeInOut(duration: 1.4).repeatForever().delay(Double(index) * 0.12), value: pulse)
+                        .stroke(IdP.tint.opacity(0.55 - Double(index) * 0.18), lineWidth: 1)
+                        .frame(width: 96 + CGFloat(index * 24), height: 96 + CGFloat(index * 24))
+                        .scaleEffect(pulse ? 1.10 : 0.92)
+                        .opacity(pulse ? 0.0 : 0.9)
+                        .animation(.easeOut(duration: 2.0).repeatForever(autoreverses: false).delay(Double(index) * 0.5), value: pulse)
                 }
 
-                Image(systemName: "wave.3.right")
-                    .font(.system(size: 34, weight: .semibold))
-                    .foregroundStyle(IdP.tint)
+                Circle()
+                    .fill(IdP.tint)
+                    .frame(width: 56, height: 56)
+                    .overlay(
+                        Image(systemName: "wave.3.right")
+                            .font(.system(size: 22, weight: .semibold))
+                            .foregroundStyle(.white)
+                    )
             }
-            .frame(height: 160)
+            .frame(height: 130)
 
-            VStack(spacing: 8) {
+            VStack(spacing: 6) {
                 Text(title)
-                    .font(.title3.weight(.semibold))
+                    .font(.title3.weight(.bold))
 
                 Text(message)
-                    .font(.subheadline)
-                    .foregroundStyle(.secondary)
+                    .font(.footnote)
+                    .foregroundStyle(Color.idpMutedForeground)
                     .multilineTextAlignment(.center)
             }
 
-            VStack(spacing: 12) {
+            HStack(spacing: 8) {
                 Button("Cancel") {
                     dismiss()
                 }
@@ -274,6 +403,7 @@ struct NFCSheet: View {
             }
         }
         .padding(24)
+        .background(Color.idpBackground)
         .presentationDetents([.medium])
         .presentationDragIndicator(.visible)
         .task {