Ten patterns the Mac app lives on.

struct KPITile: View {
    let icon: IconDagrun
    let value: String
    let label: String

    var body: some View {
        VStack(alignment: .leading, spacing: 10) {
            ZStack {
                RoundedRectangle(cornerRadius: 8, style: .continuous)
                    .fill(.dagrunSignal.opacity(0.08))
                icon.view(size: 16, weight: .semibold)
                    .foregroundStyle(.dagrunSignal)
            }
            .frame(width: 32, height: 32)

            VStack(alignment: .leading, spacing: 6) {
                Text(value)
                    .font(.dagrunDisplay(28, weight: .bold))
                    .tracking(-0.6)
                Text(label)
                    .font(.dagrunBody(12))
                    .foregroundStyle(.dagrunTextMuted)
            }
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(18)
        .background(
            RoundedRectangle(cornerRadius: 12, style: .continuous)
                .fill(.dagrunBgRaised)
                .overlay(
                    RoundedRectangle(cornerRadius: 12, style: .continuous)
                        .stroke(.dagrunBorder)
                )
        )
    }
}

struct LiveStepRow: View {
    let index: Int
    let title: String
    let subtitle: String
    let state: StepState
    let role: StepRole
    let duration: String?

    var body: some View {
        HStack(spacing: 14) {
            Text("\(index)")
                .font(.dagrunMono(11))
                .foregroundStyle(.dagrunTextMuted)
                .frame(width: 28, height: 28)
                .background(Circle().fill(.dagrunBgSunken))

            VStack(alignment: .leading, spacing: 4) {
                HStack(spacing: 10) {
                    StatusDot(state: state)
                    Text(title).font(.dagrunDisplay(14, weight: .semibold))
                    RoleBadge(role: role)
                }
                Text(subtitle)
                    .font(.dagrunBody(12))
                    .foregroundStyle(.dagrunTextMuted)
            }

            Spacer()
            Text(duration ?? "—")
                .font(.dagrunMono(11))
                .foregroundStyle(.dagrunTextMuted)
        }
        .padding(.vertical, 14)
        .padding(.horizontal, 18)
        .background(
            RoundedRectangle(cornerRadius: 10, style: .continuous)
                .fill(.dagrunBgRaised)
        )
        .overlay(alignment: .leading) {
            Rectangle().fill(state.accentColor).frame(width: 3)
        }
        .overlay(
            RoundedRectangle(cornerRadius: 10, style: .continuous)
                .stroke(state == .running ? .dagrunSignal.opacity(0.35) : .dagrunBorder)
        )
        .shadow(
            color: state == .running ? .dagrunSignal.opacity(0.08) : .clear,
            radius: 3
        )
    }
}

struct ApprovalTableView: View {
    @Binding var items: [Proposal]
    var onApproveAll: () -> Void
    var onRejectAll: () -> Void

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 12) {
                IconDagrun.user.view(size: 14)
                Text("請確認命名提案")
                    .font(.dagrunDisplay(13, weight: .semibold))
                Text("· \(items.count) 項")
                    .font(.dagrunMono(11))
                    .foregroundStyle(.dagrunTextMuted)
                Spacer()
                Badge(text: "Awaiting approval", tone: .accent)
            }
            .padding(.horizontal, 18).padding(.vertical, 12)
            .background(.dagrunBgSunken)

            Divider()
            HeaderRow()
            ForEach($items) { \$item in
                ProposalRow(item: \$item) // inline TextField
                Divider().opacity(0.5)
            }

            HStack {
                Text("大部分情況下整批通過即可。")
                    .font(.dagrunMono(11))
                    .foregroundStyle(.dagrunTextMuted)
                Spacer()
                DagrunButton("Reject all", variant: .secondary, action: onRejectAll)
                DagrunButton("Approve all (⌘⏎)", variant: .accent, action: onApproveAll)
                    .keyboardShortcut(.return, modifiers: .command)
            }
            .padding(14)
        }
        .background(.dagrunBgRaised, in: RoundedRectangle(cornerRadius: 10, style: .continuous))
    }
}