@sriinnu/runic 1.0.0

package/Sources/Runic/Views/Menu/AlertsMenuView.swift

@@ -0,0 +1,256 @@
+import AppKit
+import RunicCore
+import SwiftUI
+
+/// Menu view displaying active alerts with severity indicators and acknowledgement
+@MainActor
+struct AlertsMenuView: View {
+
+    // MARK: - Types
+
+    typealias AlertEntry = AlertRuleStore.AlertHistoryEntry
+    typealias Severity = AlertRuleStore.AlertSeverity
+
+    // MARK: - State
+
+    @State private var alerts: [AlertEntry] = []
+    @State private var isRefreshing = false
+    private let width: CGFloat
+    @Environment(\.menuItemHighlighted) private var isHighlighted
+
+    // MARK: - Initialization
+
+    init(width: CGFloat = 320) {
+        self.width = width
+    }
+
+    // MARK: - Body
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: MenuCardMetrics.sectionSpacing) {
+            self.headerSection
+
+            if self.alerts.isEmpty {
+                self.emptyStateView
+            } else {
+                self.alertsList
+            }
+        }
+        .padding(.horizontal, MenuCardMetrics.horizontalPadding)
+        .padding(.vertical, MenuCardMetrics.sectionTopPadding)
+        .frame(width: self.width, alignment: .leading)
+        .task {
+            await self.loadAlerts()
+        }
+    }
+
+    // MARK: - Header Section
+
+    private var headerSection: some View {
+        HStack(alignment: .firstTextBaseline) {
+            Text("Alerts")
+                .font(.headline)
+                .fontWeight(.semibold)
+
+            if self.unacknowledgedCount > 0 {
+                self.unacknowledgedBadge
+            }
+
+            Spacer()
+
+            if self.isRefreshing {
+                ProgressView()
+                    .controlSize(.small)
+                    .frame(width: 14, height: 14)
+            } else {
+                Button {
+                    Task { await self.loadAlerts() }
+                } label: {
+                    Image(systemName: "arrow.clockwise")
+                        .font(.caption)
+                        .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted))
+                }
+                .buttonStyle(.plain)
+                .accessibilityLabel("Refresh alerts")
+            }
+        }
+    }
+
+    private var unacknowledgedBadge: some View {
+        Text("\(self.unacknowledgedCount)")
+            .font(.caption2)
+            .fontWeight(.semibold)
+            .foregroundStyle(.white)
+            .padding(.horizontal, RunicSpacing.compact)
+            .padding(.vertical, RunicSpacing.xxxs)
+            .background(Capsule().fill(Color.red))
+            .accessibilityLabel("\(self.unacknowledgedCount) unacknowledged alert\(self.unacknowledgedCount == 1 ? "" : "s")")
+    }
+
+    private var unacknowledgedCount: Int {
+        self.alerts.filter { !$0.acknowledged }.count
+    }
+
+    // MARK: - Alerts List
+
+    private var alertsList: some View {
+        VStack(alignment: .leading, spacing: MenuCardMetrics.lineSpacing) {
+            ForEach(self.alerts) { alert in
+                AlertRow(alert: alert) {
+                    await self.acknowledgeAlert(alert.id)
+                }
+            }
+        }
+    }
+
+    // MARK: - Empty State
+
+    private var emptyStateView: some View {
+        VStack(spacing: RunicSpacing.xs) {
+            Image(systemName: "checkmark.shield")
+                .font(.title2)
+                .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted))
+
+            Text("No active alerts")
+                .font(.subheadline)
+                .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted))
+        }
+        .frame(maxWidth: .infinity)
+        .padding(.vertical, RunicSpacing.sm)
+    }
+
+    // MARK: - Data Loading
+
+    private func loadAlerts() async {
+        self.isRefreshing = true
+
+        // Simulate async delay for UI smoothness
+        try? await Task.sleep(for: .milliseconds(100))
+
+        // Load alerts from storage
+        self.alerts = AlertRuleStore.getRecentHistory(limit: 20)
+
+        self.isRefreshing = false
+    }
+
+    private func acknowledgeAlert(_ id: String) async {
+        do {
+            try AlertRuleStore.acknowledgeAlert(id: id)
+            await self.loadAlerts()
+        } catch {
+            print("[AlertsMenuView] Failed to acknowledge alert: \(error)")
+        }
+    }
+}
+
+// MARK: - Alert Row
+
+private struct AlertRow: View {
+    let alert: AlertsMenuView.AlertEntry
+    let onAcknowledge: () async -> Void
+
+    @State private var isAcknowledging = false
+    @Environment(\.menuItemHighlighted) private var isHighlighted
+
+    var body: some View {
+        HStack(alignment: .top, spacing: RunicSpacing.xs) {
+            self.severityIcon
+
+            VStack(alignment: .leading, spacing: 2) {
+                Text(self.alert.message)
+                    .font(.footnote)
+                    .foregroundStyle(MenuHighlightStyle.primary(self.isHighlighted))
+                    .lineLimit(3)
+                    .fixedSize(horizontal: false, vertical: true)
+
+                Text(self.timeAgo(from: self.alert.triggeredAt))
+                    .font(.caption2)
+                    .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted))
+            }
+
+            Spacer()
+
+            if !self.alert.acknowledged {
+                self.acknowledgeButton
+            }
+        }
+        .padding(RunicSpacing.xs)
+        .background(self.backgroundStyle)
+        .clipShape(RoundedRectangle(cornerRadius: RunicCornerRadius.sm))
+    }
+
+    private var severityIcon: some View {
+        let icon = self.severityIconName
+        let color = self.severityColor
+
+        return Image(systemName: icon)
+            .font(.caption)
+            .foregroundStyle(color)
+            .frame(width: 16, alignment: .center)
+    }
+
+    private var severityIconName: String {
+        switch self.alert.severity {
+        case .info: return "info.circle.fill"
+        case .warning: return "exclamationmark.triangle.fill"
+        case .critical: return "exclamationmark.octagon.fill"
+        }
+    }
+
+    private var severityColor: Color {
+        switch self.alert.severity {
+        case .info: return .green
+        case .warning: return .yellow
+        case .critical: return .red
+        }
+    }
+
+    private var backgroundStyle: some View {
+        let baseColor = self.alert.acknowledged
+            ? Color(nsColor: .controlBackgroundColor).opacity(0.5)
+            : Color(nsColor: .controlBackgroundColor)
+
+        return baseColor
+    }
+
+    private var acknowledgeButton: some View {
+        Button {
+            Task {
+                self.isAcknowledging = true
+                await self.onAcknowledge()
+                self.isAcknowledging = false
+            }
+        } label: {
+            if self.isAcknowledging {
+                ProgressView()
+                    .controlSize(.small)
+                    .frame(width: 12, height: 12)
+            } else {
+                Image(systemName: "checkmark.circle")
+                    .font(.caption)
+                    .foregroundStyle(MenuHighlightStyle.secondary(self.isHighlighted))
+            }
+        }
+        .buttonStyle(.plain)
+        .disabled(self.isAcknowledging)
+        .accessibilityLabel("Acknowledge alert")
+    }
+
+    private func timeAgo(from date: Date) -> String {
+        let now = Date()
+        let interval = now.timeIntervalSince(date)
+
+        if interval < 60 {
+            return "Just now"
+        } else if interval < 3600 {
+            let minutes = Int(interval / 60)
+            return "\(minutes)m ago"
+        } else if interval < 86400 {
+            let hours = Int(interval / 3600)
+            return "\(hours)h ago"
+        } else {
+            let days = Int(interval / 86400)
+            return "\(days)d ago"
+        }
+    }
+}

package/Sources/Runic/Views/Menu/ChartPanelStyle.swift

@@ -0,0 +1,22 @@
+import SwiftUI
+
+/// Clean style for chart panels in NSMenu submenus.
+/// The NSMenu window provides its own chrome — we just add content padding
+/// and a subtle top-edge gloss for polish without creating a double-border.
+struct ChartPanelStyle: ViewModifier {
+    let width: CGFloat
+
+    func body(content: Content) -> some View {
+        content
+            .padding(.horizontal, MenuCardMetrics.horizontalPadding)
+            .padding(.top, RunicSpacing.sm)
+            .padding(.bottom, RunicSpacing.xs)
+            .frame(minWidth: self.width, maxWidth: .infinity, alignment: .leading)
+    }
+}
+
+extension View {
+    func chartPanelStyle(width: CGFloat) -> some View {
+        self.modifier(ChartPanelStyle(width: width))
+    }
+}

package/Sources/Runic/Views/Menu/CostComparativeChartMenuView.swift

@@ -0,0 +1,275 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+@MainActor
+struct CostComparativeChartMenuView: View {
+    private struct ModelCostData: Identifiable {
+        let id: String
+        let modelName: String
+        let costPerToken: Double
+        let totalTokens: Int
+        let totalCost: Double
+        let relativeExpensiveness: Double // multiplier vs average
+
+        init(modelName: String, totalTokens: Int, totalCost: Double, averageCostPerToken: Double) {
+            self.id = modelName
+            self.modelName = modelName
+            self.totalTokens = totalTokens
+            self.totalCost = totalCost
+            self.costPerToken = totalTokens > 0 ? totalCost / Double(totalTokens) : 0
+            self.relativeExpensiveness = averageCostPerToken > 0 ? (self.costPerToken / averageCostPerToken) : 1.0
+        }
+    }
+
+    private let modelSummaries: [UsageLedgerModelSummary]
+    private let width: CGFloat
+    @State private var selectedModelID: String?
+
+    init(modelSummaries: [UsageLedgerModelSummary], width: CGFloat) {
+        self.modelSummaries = modelSummaries
+        self.width = width
+    }
+
+    var body: some View {
+        let model = Self.makeModel(from: self.modelSummaries)
+        VStack(alignment: .leading, spacing: RunicSpacing.sm) {
+            if model.isEmpty {
+                Text("No cost comparison data.")
+                    .font(.footnote)
+                    .foregroundStyle(.secondary)
+            } else {
+                Chart {
+                    ForEach(model) { data in
+                        BarMark(
+                            x: .value("Cost per token", data.costPerToken * 1_000_000),
+                            y: .value("Model", UsageFormatter.modelDisplayName(data.modelName)))
+                            .foregroundStyle(Self.colorForExpensiveness(data.relativeExpensiveness))
+                    }
+                }
+                .chartXAxisLabel("Cost per 1M tokens (USD)")
+                .chartXAxis {
+                    AxisMarks { value in
+                        AxisGridLine()
+                        AxisTick()
+                        AxisValueLabel {
+                            if let cost = value.as(Double.self) {
+                                Text(UsageFormatter.usdString(cost))
+                                    .font(.caption2)
+                                    .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                            }
+                        }
+                    }
+                }
+                .chartYAxis {
+                    AxisMarks { _ in
+                        AxisGridLine().foregroundStyle(Color.clear)
+                        AxisTick().foregroundStyle(Color.clear)
+                        AxisValueLabel()
+                            .font(.caption2)
+                            .foregroundStyle(Color(nsColor: .labelColor))
+                    }
+                }
+                .chartLegend(.hidden)
+                .frame(height: CGFloat(min(300, max(150, model.count * 30))))
+                .chartOverlay { proxy in
+                    GeometryReader { geo in
+                        ZStack(alignment: .topLeading) {
+                            if let rect = self.selectionBandRect(model: model, proxy: proxy, geo: geo) {
+                                Rectangle()
+                                    .fill(Self.selectionBandColor)
+                                    .frame(width: rect.width, height: rect.height)
+                                    .position(x: rect.midX, y: rect.midY)
+                                    .allowsHitTesting(false)
+                            }
+                            MouseLocationReader { location in
+                                self.updateSelection(location: location, model: model, proxy: proxy, geo: geo)
+                            }
+                            .frame(maxWidth: .infinity, maxHeight: .infinity)
+                            .contentShape(Rectangle())
+                        }
+                    }
+                }
+
+                let detail = self.detailLines(model: model)
+                VStack(alignment: .leading, spacing: 0) {
+                    Text(detail.primary)
+                        .font(.caption)
+                        .foregroundStyle(.secondary)
+                        .lineLimit(2)
+                        .truncationMode(.tail)
+                        .frame(height: 32, alignment: .leading)
+                    if let secondary = detail.secondary {
+                        Text(secondary)
+                            .font(.caption)
+                            .foregroundStyle(.secondary)
+                            .lineLimit(1)
+                            .truncationMode(.tail)
+                            .frame(height: 16, alignment: .leading)
+                    }
+                }
+
+                // Legend
+                HStack(spacing: RunicSpacing.md) {
+                    HStack(spacing: RunicSpacing.xxs) {
+                        Circle()
+                            .fill(Self.cheapColor)
+                            .frame(width: 8, height: 8)
+                        Text("Low cost")
+                            .font(.caption2)
+                            .foregroundStyle(.secondary)
+                    }
+                    HStack(spacing: RunicSpacing.xxs) {
+                        Circle()
+                            .fill(Self.mediumColor)
+                            .frame(width: 8, height: 8)
+                        Text("Medium cost")
+                            .font(.caption2)
+                            .foregroundStyle(.secondary)
+                    }
+                    HStack(spacing: RunicSpacing.xxs) {
+                        Circle()
+                            .fill(Self.expensiveColor)
+                            .frame(width: 8, height: 8)
+                        Text("High cost")
+                            .font(.caption2)
+                            .foregroundStyle(.secondary)
+                    }
+                }
+            }
+        }
+        .padding(.horizontal, MenuCardMetrics.horizontalPadding)
+        .padding(.vertical, RunicSpacing.xs)
+        .frame(minWidth: self.width, maxWidth: .infinity, alignment: .leading)
+    }
+
+    private static let selectionBandColor = Color(nsColor: .labelColor).opacity(0.1)
+    private static let cheapColor = Color(red: 0.46, green: 0.75, blue: 0.36)
+    private static let mediumColor = Color(red: 0.94, green: 0.74, blue: 0.26)
+    private static let expensiveColor = Color(red: 0.94, green: 0.36, blue: 0.36)
+
+    private static func makeModel(from summaries: [UsageLedgerModelSummary]) -> [ModelCostData] {
+        let withCost = summaries.compactMap { summary -> ModelCostData? in
+            guard let cost = summary.totals.costUSD, cost > 0,
+                  summary.totals.totalTokens > 0 else {
+                return nil
+            }
+            // Calculate average cost per token across all models
+            let totalCost = summaries.compactMap { $0.totals.costUSD }.reduce(0, +)
+            let totalTokens = summaries.map { $0.totals.totalTokens }.reduce(0, +)
+            let averageCostPerToken = totalTokens > 0 ? totalCost / Double(totalTokens) : 0
+
+            return ModelCostData(
+                modelName: summary.model,
+                totalTokens: summary.totals.totalTokens,
+                totalCost: cost,
+                averageCostPerToken: averageCostPerToken)
+        }
+
+        return withCost.sorted { $0.costPerToken > $1.costPerToken }
+    }
+
+    private static func colorForExpensiveness(_ relative: Double) -> Color {
+        if relative < 0.7 {
+            return cheapColor
+        } else if relative < 1.5 {
+            return mediumColor
+        } else {
+            return expensiveColor
+        }
+    }
+
+    private func selectionBandRect(model: [ModelCostData], proxy: ChartProxy, geo: GeometryProxy) -> CGRect? {
+        guard let modelID = self.selectedModelID else { return nil }
+        guard let plotAnchor = proxy.plotFrame else { return nil }
+        let plotFrame = geo[plotAnchor]
+        guard let index = model.firstIndex(where: { $0.id == modelID }) else { return nil }
+        let modelName = UsageFormatter.modelDisplayName(model[index].modelName)
+        guard let y = proxy.position(forY: modelName) else { return nil }
+
+        func yForIndex(_ idx: Int) -> CGFloat? {
+            guard idx >= 0, idx < model.count else { return nil }
+            return proxy.position(forY: UsageFormatter.modelDisplayName(model[idx].modelName))
+        }
+
+        let yPrev = yForIndex(index - 1)
+        let yNext = yForIndex(index + 1)
+
+        let topInPlot: CGFloat = if let yPrev {
+            (yPrev + y) / 2
+        } else if let yNext {
+            y - (yNext - y) / 2
+        } else {
+            y - 8
+        }
+
+        let bottomInPlot: CGFloat = if let yNext {
+            (yNext + y) / 2
+        } else if let yPrev {
+            y + (y - yPrev) / 2
+        } else {
+            y + 8
+        }
+
+        let top = plotFrame.origin.y + min(topInPlot, bottomInPlot)
+        let bottom = plotFrame.origin.y + max(topInPlot, bottomInPlot)
+        return CGRect(x: plotFrame.origin.x, y: top, width: plotFrame.width, height: bottom - top)
+    }
+
+    private func updateSelection(
+        location: CGPoint?,
+        model: [ModelCostData],
+        proxy: ChartProxy,
+        geo: GeometryProxy)
+    {
+        guard let location else {
+            if self.selectedModelID != nil { self.selectedModelID = nil }
+            return
+        }
+
+        guard let plotAnchor = proxy.plotFrame else { return }
+        let plotFrame = geo[plotAnchor]
+        guard plotFrame.contains(location) else { return }
+
+        let yInPlot = location.y - plotFrame.origin.y
+        guard let modelName: String = proxy.value(atY: yInPlot) else { return }
+        guard let nearest = self.nearestModelID(to: modelName, model: model) else { return }
+
+        if self.selectedModelID != nearest {
+            self.selectedModelID = nearest
+        }
+    }
+
+    private func nearestModelID(to modelName: String, model: [ModelCostData]) -> String? {
+        model.first { UsageFormatter.modelDisplayName($0.modelName) == modelName }?.id
+    }
+
+    private func detailLines(model: [ModelCostData]) -> (primary: String, secondary: String?) {
+        guard let modelID = self.selectedModelID,
+              let data = model.first(where: { $0.id == modelID })
+        else {
+            return ("Hover a bar for details", nil)
+        }
+
+        let displayName = UsageFormatter.modelDisplayName(data.modelName)
+        let costPer1M = data.costPerToken * 1_000_000
+        let primary = "\(displayName): \(UsageFormatter.usdString(costPer1M)) per 1M tokens"
+
+        let relativeText: String
+        if data.relativeExpensiveness > 1.1 {
+            relativeText = String(format: "%.1fx more expensive than average", data.relativeExpensiveness)
+        } else if data.relativeExpensiveness < 0.9 {
+            relativeText = String(format: "%.1fx cheaper than average", 1.0 / data.relativeExpensiveness)
+        } else {
+            relativeText = "Close to average cost"
+        }
+
+        let tokens = UsageFormatter.tokenCountString(data.totalTokens)
+        var secondary = "\(tokens) tokens · \(relativeText)"
+        if let context = UsageFormatter.modelContextLabel(for: data.modelName) {
+            secondary += " · \(context)"
+        }
+
+        return (primary, secondary)
+    }
+}