@sriinnu/runic 1.0.0

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

@@ -0,0 +1,398 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+@MainActor
+struct UsageBreakdownChartMenuView: View {
+    private struct Point: Identifiable {
+        let id: String
+        let date: Date
+        let service: String
+        let creditsUsed: Double
+
+        init(date: Date, service: String, creditsUsed: Double) {
+            self.date = date
+            self.service = service
+            self.creditsUsed = creditsUsed
+            self.id = "\(service)-\(Int(date.timeIntervalSince1970))- \(creditsUsed)"
+        }
+    }
+
+    private let breakdown: [OpenAIDashboardDailyBreakdown]
+    private let width: CGFloat
+    @State private var selectedDayKey: String?
+
+    init(breakdown: [OpenAIDashboardDailyBreakdown], width: CGFloat) {
+        self.breakdown = breakdown
+        self.width = width
+    }
+
+    var body: some View {
+        let model = Self.makeModel(from: self.breakdown)
+        VStack(alignment: .leading, spacing: RunicSpacing.sm) {
+            if model.points.isEmpty {
+                Text("No usage breakdown data.")
+                    .font(.footnote)
+                    .foregroundStyle(.secondary)
+            } else {
+                Chart {
+                    ForEach(model.points) { point in
+                        BarMark(
+                            x: .value("Day", point.date, unit: .day),
+                            y: .value("Credits used", point.creditsUsed))
+                            .foregroundStyle(by: .value("Service", point.service))
+                    }
+                    if let peak = model.peakPoint {
+                        let capStart = max(peak.creditsUsed - Self.capHeight(maxValue: model.maxCreditsUsed), 0)
+                        BarMark(
+                            x: .value("Day", peak.date, unit: .day),
+                            yStart: .value("Cap start", capStart),
+                            yEnd: .value("Cap end", peak.creditsUsed))
+                            .foregroundStyle(Color(nsColor: .systemYellow))
+                    }
+                }
+                .chartForegroundStyleScale(domain: model.services, range: model.serviceColors)
+                .chartYAxis(.hidden)
+                .chartXAxis {
+                    AxisMarks(values: model.axisDates) { _ in
+                        AxisGridLine().foregroundStyle(Color.clear)
+                        AxisTick().foregroundStyle(Color.clear)
+                        AxisValueLabel(format: .dateTime.month(.abbreviated).day())
+                            .font(.caption2)
+                            .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                    }
+                }
+                .chartLegend(.hidden)
+                .frame(height: RunicSpacing.chartHeight)
+                .accessibilityElement(children: .ignore)
+                .accessibilityLabel(self.chartAccessibilityLabel(model: model))
+                .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(.system(.caption, design: .rounded))
+                        .foregroundStyle(.secondary)
+                        .lineLimit(1)
+                        .truncationMode(.tail)
+                        .frame(height: 16, alignment: .leading)
+                    Text(detail.secondary ?? " ")
+                        .font(.system(.caption, design: .rounded))
+                        .foregroundStyle(.secondary)
+                        .lineLimit(1)
+                        .truncationMode(.tail)
+                        .frame(height: 16, alignment: .leading)
+                        .opacity(detail.secondary == nil ? 0 : 1)
+                }
+
+                LazyVGrid(
+                    columns: [GridItem(.adaptive(minimum: 110), alignment: .leading)],
+                    alignment: .leading,
+                    spacing: RunicSpacing.compact)
+                {
+                    ForEach(model.services, id: \.self) { service in
+                        HStack(spacing: RunicSpacing.compact) {
+                            Circle()
+                                .fill(model.color(for: service))
+                                .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
+                            Text(service)
+                                .font(.caption2)
+                                .foregroundStyle(.secondary)
+                                .lineLimit(1)
+                        }
+                    }
+                }
+            }
+        }
+        .padding(.horizontal, MenuCardMetrics.horizontalPadding)
+        .padding(.vertical, RunicSpacing.xs)
+        .frame(minWidth: self.width, maxWidth: .infinity, alignment: .leading)
+    }
+
+    private struct Model {
+        let points: [Point]
+        let breakdownByDayKey: [String: OpenAIDashboardDailyBreakdown]
+        let dayDates: [(dayKey: String, date: Date)]
+        let peakPoint: (date: Date, creditsUsed: Double)?
+        let services: [String]
+        let serviceColors: [Color]
+        let axisDates: [Date]
+        let maxCreditsUsed: Double
+
+        func color(for service: String) -> Color {
+            guard let idx = self.services.firstIndex(of: service), idx < self.serviceColors.count else {
+                return .secondary
+            }
+            return self.serviceColors[idx]
+        }
+    }
+
+    private static let selectionBandColor = Color(nsColor: .labelColor).opacity(0.1)
+
+    private static func makeModel(from breakdown: [OpenAIDashboardDailyBreakdown]) -> Model {
+        let sorted = breakdown
+            .sorted { lhs, rhs in lhs.day < rhs.day }
+
+        var points: [Point] = []
+        points.reserveCapacity(sorted.count * 2)
+
+        var breakdownByDayKey: [String: OpenAIDashboardDailyBreakdown] = [:]
+        breakdownByDayKey.reserveCapacity(sorted.count)
+
+        var dayDates: [(dayKey: String, date: Date)] = []
+        dayDates.reserveCapacity(sorted.count)
+
+        var peak: (date: Date, creditsUsed: Double)?
+        var maxCreditsUsed: Double = 0
+
+        for day in sorted {
+            guard let date = self.dateFromDayKey(day.day) else { continue }
+            breakdownByDayKey[day.day] = day
+            dayDates.append((dayKey: day.day, date: date))
+            if day.totalCreditsUsed > 0 {
+                if let cur = peak {
+                    if day.totalCreditsUsed > cur.creditsUsed { peak = (date, day.totalCreditsUsed) }
+                } else {
+                    peak = (date, day.totalCreditsUsed)
+                }
+                maxCreditsUsed = max(maxCreditsUsed, day.totalCreditsUsed)
+            }
+            for service in day.services where service.creditsUsed > 0 {
+                points.append(Point(date: date, service: service.service, creditsUsed: service.creditsUsed))
+            }
+        }
+
+        let services = Self.serviceOrder(from: sorted)
+        let colors = services.map { Self.colorForService($0) }
+        let axisDates = Self.axisDates(fromSortedDays: sorted)
+
+        return Model(
+            points: points,
+            breakdownByDayKey: breakdownByDayKey,
+            dayDates: dayDates,
+            peakPoint: peak,
+            services: services,
+            serviceColors: colors,
+            axisDates: axisDates,
+            maxCreditsUsed: maxCreditsUsed)
+    }
+
+    private static func capHeight(maxValue: Double) -> Double {
+        maxValue * 0.05
+    }
+
+    private static func serviceOrder(from breakdown: [OpenAIDashboardDailyBreakdown]) -> [String] {
+        var totals: [String: Double] = [:]
+        for day in breakdown {
+            for service in day.services {
+                totals[service.service, default: 0] += service.creditsUsed
+            }
+        }
+
+        return totals
+            .sorted { lhs, rhs in
+                if lhs.value == rhs.value { return lhs.key < rhs.key }
+                return lhs.value > rhs.value
+            }
+            .map(\.key)
+    }
+
+    private static func colorForService(_ service: String) -> Color {
+        let lower = service.lowercased()
+        if lower == "cli" {
+            return RunicColors.chartPalette[0]
+        }
+        if lower.contains("github"), lower.contains("review") {
+            return RunicColors.chartPalette[1]
+        }
+        let idx = abs(service.hashValue) % RunicColors.chartPalette.count
+        return RunicColors.chartPalette[idx]
+    }
+
+    private static func axisDates(fromSortedDays sortedDays: [OpenAIDashboardDailyBreakdown]) -> [Date] {
+        guard let first = sortedDays.first, let last = sortedDays.last else { return [] }
+        guard let firstDate = self.dateFromDayKey(first.day),
+              let lastDate = self.dateFromDayKey(last.day)
+        else {
+            return []
+        }
+        if Calendar.current.isDate(firstDate, inSameDayAs: lastDate) {
+            return [firstDate]
+        }
+        return [firstDate, lastDate]
+    }
+
+    private static func dateFromDayKey(_ key: String) -> Date? {
+        let parts = key.split(separator: "-")
+        guard parts.count == 3,
+              let year = Int(parts[0]),
+              let month = Int(parts[1]),
+              let day = Int(parts[2])
+        else {
+            return nil
+        }
+
+        var comps = DateComponents()
+        comps.calendar = Calendar.current
+        comps.timeZone = TimeZone.current
+        comps.year = year
+        comps.month = month
+        comps.day = day
+        // Noon avoids off-by-one-day shifts if anything ends up interpreted in UTC.
+        comps.hour = 12
+        return comps.date
+    }
+
+    private func selectionBandRect(model: Model, proxy: ChartProxy, geo: GeometryProxy) -> CGRect? {
+        guard let key = self.selectedDayKey else { return nil }
+        guard let plotAnchor = proxy.plotFrame else { return nil }
+        let plotFrame = geo[plotAnchor]
+        guard let index = model.dayDates.firstIndex(where: { $0.dayKey == key }) else { return nil }
+        let date = model.dayDates[index].date
+        guard let x = proxy.position(forX: date) else { return nil }
+
+        func xForIndex(_ idx: Int) -> CGFloat? {
+            guard idx >= 0, idx < model.dayDates.count else { return nil }
+            return proxy.position(forX: model.dayDates[idx].date)
+        }
+
+        let xPrev = xForIndex(index - 1)
+        let xNext = xForIndex(index + 1)
+
+        let leftInPlot: CGFloat = if let xPrev {
+            (xPrev + x) / 2
+        } else if let xNext {
+            x - (xNext - x) / 2
+        } else {
+            x - 8
+        }
+
+        let rightInPlot: CGFloat = if let xNext {
+            (xNext + x) / 2
+        } else if let xPrev {
+            x + (x - xPrev) / 2
+        } else {
+            x + 8
+        }
+
+        let left = plotFrame.origin.x + min(leftInPlot, rightInPlot)
+        let right = plotFrame.origin.x + max(leftInPlot, rightInPlot)
+        return CGRect(x: left, y: plotFrame.origin.y, width: right - left, height: plotFrame.height)
+    }
+
+    private func updateSelection(
+        location: CGPoint?,
+        model: Model,
+        proxy: ChartProxy,
+        geo: GeometryProxy)
+    {
+        guard let location else {
+            if self.selectedDayKey != nil { self.selectedDayKey = nil }
+            return
+        }
+
+        guard let plotAnchor = proxy.plotFrame else { return }
+        let plotFrame = geo[plotAnchor]
+        guard plotFrame.contains(location) else { return }
+
+        let xInPlot = location.x - plotFrame.origin.x
+        guard let date: Date = proxy.value(atX: xInPlot) else { return }
+        guard let nearest = self.nearestDayKey(to: date, model: model) else { return }
+
+        if self.selectedDayKey != nearest {
+            self.selectedDayKey = nearest
+        }
+    }
+
+    private func nearestDayKey(to date: Date, model: Model) -> String? {
+        guard !model.dayDates.isEmpty else { return nil }
+        var best: (key: String, distance: TimeInterval)?
+        for entry in model.dayDates {
+            let dist = abs(entry.date.timeIntervalSince(date))
+            if let cur = best {
+                if dist < cur.distance { best = (entry.dayKey, dist) }
+            } else {
+                best = (entry.dayKey, dist)
+            }
+        }
+        return best?.key
+    }
+
+    private func detailLines(model: Model) -> (primary: String, secondary: String?) {
+        guard let key = self.selectedDayKey,
+              let day = model.breakdownByDayKey[key],
+              let date = Self.dateFromDayKey(key)
+        else {
+            return ("Hover a bar for details", nil)
+        }
+
+        let dayLabel = date.formatted(.dateTime.month(.abbreviated).day())
+        let total = day.totalCreditsUsed.formatted(.number.precision(.fractionLength(0...2)))
+        if day.services.isEmpty {
+            return ("\(dayLabel): \(total)", nil)
+        }
+        if day.services.count <= 1, let first = day.services.first {
+            let used = first.creditsUsed.formatted(.number.precision(.fractionLength(0...2)))
+            return ("\(dayLabel): \(used)", first.service)
+        }
+
+        let services = day.services
+            .sorted { lhs, rhs in
+                if lhs.creditsUsed == rhs.creditsUsed { return lhs.service < rhs.service }
+                return lhs.creditsUsed > rhs.creditsUsed
+            }
+            .prefix(3)
+            .map { "\($0.service) \($0.creditsUsed.formatted(.number.precision(.fractionLength(0...2))))" }
+            .joined(separator: " · ")
+
+        return ("\(dayLabel): \(total)", services)
+    }
+
+    private func chartAccessibilityLabel(model: Model) -> String {
+        guard !model.points.isEmpty else { return "Usage breakdown chart, no data" }
+
+        let dayCount = model.dayDates.count
+
+        // Compute per-service totals
+        var serviceTotals: [String: Double] = [:]
+        for point in model.points {
+            serviceTotals[point.service, default: 0] += point.creditsUsed
+        }
+        let grandTotal = serviceTotals.values.reduce(0, +)
+
+        // Build percentage parts sorted by usage descending
+        let parts: [String] = serviceTotals
+            .sorted { lhs, rhs in
+                if lhs.value == rhs.value { return lhs.key < rhs.key }
+                return lhs.value > rhs.value
+            }
+            .prefix(5)
+            .map { service, total in
+                let pct = grandTotal > 0 ? (total / grandTotal) * 100 : 0
+                return "\(service) \(String(format: "%.0f", pct))%"
+            }
+
+        var label = "Usage breakdown: \(dayCount) day\(dayCount == 1 ? "" : "s")"
+        if !parts.isEmpty {
+            label += ", \(parts.joined(separator: ", "))"
+        }
+        return label
+    }
+}

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

@@ -0,0 +1,232 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+@MainActor
+struct UsageHeatmapMenuView: View {
+    fileprivate struct HeatmapCell: Identifiable {
+        let id: String
+        let hourStart: Date
+        let weekday: Int // 0 = Sunday, 6 = Saturday
+        let hour: Int // 0-23
+        let totalTokens: Int
+        let intensity: Double // 0.0-1.0
+
+        init(hourStart: Date, weekday: Int, hour: Int, totalTokens: Int, maxTokens: Int) {
+            self.hourStart = hourStart
+            self.weekday = weekday
+            self.hour = hour
+            self.totalTokens = totalTokens
+            self.intensity = maxTokens > 0 ? Double(totalTokens) / Double(maxTokens) : 0.0
+            self.id = "\(weekday)-\(hour)"
+        }
+
+        var weekdayLabel: String {
+            ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][self.weekday]
+        }
+
+        var hourLabel: String {
+            if self.hour == 0 { return "12 AM" }
+            if self.hour < 12 { return "\(self.hour) AM" }
+            if self.hour == 12 { return "12 PM" }
+            return "\(self.hour - 12) PM"
+        }
+    }
+
+    private let hourlySummaries: [UsageLedgerHourlySummary]
+    private let width: CGFloat
+    @State private var selectedCellID: String?
+
+    init(hourlySummaries: [UsageLedgerHourlySummary], width: CGFloat) {
+        self.hourlySummaries = hourlySummaries
+        self.width = width
+    }
+
+    var body: some View {
+        let model = Self.makeModel(from: self.hourlySummaries)
+        VStack(alignment: .leading, spacing: RunicSpacing.sm) {
+            Text("Usage Heatmap (24×7)")
+                .font(.headline)
+                .fontWeight(.semibold)
+
+            if model.isEmpty {
+                Text("No heatmap data.")
+                    .font(.footnote)
+                    .foregroundStyle(.secondary)
+            } else {
+                ScrollView(.horizontal, showsIndicators: true) {
+                    VStack(alignment: .leading, spacing: RunicSpacing.xxs) {
+                        // Hour labels
+                        HStack(spacing: 0) {
+                            Text("")
+                                .frame(width: 40, alignment: .leading)
+                            ForEach(0..<24, id: \.self) { hour in
+                                Text(self.hourLabel(hour))
+                                    .font(.caption2)
+                                    .foregroundStyle(.secondary)
+                                    .frame(width: 40, alignment: .center)
+                                    .lineLimit(1)
+                            }
+                        }
+
+                        // Heatmap grid
+                        ForEach(0..<7, id: \.self) { weekday in
+                            HStack(spacing: 2) {
+                                Text(self.weekdayLabel(weekday))
+                                    .font(.caption)
+                                    .foregroundStyle(.secondary)
+                                    .frame(width: 38, alignment: .leading)
+
+                                ForEach(0..<24, id: \.self) { hour in
+                                    let cell = model.first { $0.weekday == weekday && $0.hour == hour }
+                                    HeatmapCellView(
+                                        cell: cell,
+                                        isSelected: self.selectedCellID == cell?.id)
+                                        .onTapGesture {
+                                            self.selectedCellID = cell?.id
+                                        }
+                                        .onHover { hovering in
+                                            if hovering {
+                                                self.selectedCellID = cell?.id
+                                            } else if self.selectedCellID == cell?.id {
+                                                self.selectedCellID = nil
+                                            }
+                                        }
+                                }
+                            }
+                        }
+
+                        // Legend
+                        HStack(spacing: RunicSpacing.xs) {
+                            Text("Low")
+                                .font(.caption2)
+                                .foregroundStyle(.secondary)
+                            HStack(spacing: 2) {
+                                ForEach(0..<5, id: \.self) { level in
+                                    Rectangle()
+                                        .fill(Self.colorForIntensity(Double(level) / 4.0))
+                                        .frame(width: 16, height: 16)
+                                        .cornerRadius(RunicCornerRadius.xs)
+                                }
+                            }
+                            Text("High")
+                                .font(.caption2)
+                                .foregroundStyle(.secondary)
+                        }
+                        .padding(.top, RunicSpacing.xs)
+                    }
+                    .padding(.horizontal, RunicSpacing.xxs)
+                }
+                .frame(height: 280)
+
+                let detail = self.detailText(model: model)
+                Text(detail)
+                    .font(.caption)
+                    .foregroundStyle(.secondary)
+                    .lineLimit(2)
+                    .frame(height: 32, alignment: .leading)
+            }
+        }
+        .padding(.horizontal, MenuCardMetrics.horizontalPadding)
+        .padding(.vertical, RunicSpacing.xs)
+        .frame(minWidth: self.width, maxWidth: .infinity, alignment: .leading)
+    }
+
+    private static func makeModel(from summaries: [UsageLedgerHourlySummary]) -> [HeatmapCell] {
+        let calendar = Calendar.current
+        var buckets: [String: Int] = [:]
+        var maxTokens = 0
+
+        for summary in summaries {
+            let weekday = calendar.component(.weekday, from: summary.hourStart) - 1 // Convert to 0-6
+            let hour = calendar.component(.hour, from: summary.hourStart)
+            let key = "\(weekday)-\(hour)"
+            buckets[key, default: 0] += summary.totals.totalTokens
+            maxTokens = max(maxTokens, buckets[key]!)
+        }
+
+        var cells: [HeatmapCell] = []
+        for weekday in 0..<7 {
+            for hour in 0..<24 {
+                let key = "\(weekday)-\(hour)"
+                let totalTokens = buckets[key] ?? 0
+                // Use a reference date for the hour start (doesn't matter for display)
+                let hourStart = calendar.date(from: DateComponents(hour: hour)) ?? Date()
+                cells.append(HeatmapCell(
+                    hourStart: hourStart,
+                    weekday: weekday,
+                    hour: hour,
+                    totalTokens: totalTokens,
+                    maxTokens: maxTokens))
+            }
+        }
+
+        return cells
+    }
+
+    fileprivate static func colorForIntensity(_ intensity: Double) -> Color {
+        if intensity == 0 {
+            return Color(nsColor: .separatorColor).opacity(0.3)
+        }
+        if intensity < 0.25 {
+            return Color(red: 0.46, green: 0.75, blue: 0.36).opacity(0.3)
+        } else if intensity < 0.5 {
+            return Color(red: 0.46, green: 0.75, blue: 0.36).opacity(0.6)
+        } else if intensity < 0.75 {
+            return Color(red: 0.94, green: 0.74, blue: 0.26).opacity(0.7)
+        } else {
+            return Color(red: 0.94, green: 0.36, blue: 0.36).opacity(0.8)
+        }
+    }
+
+    private func weekdayLabel(_ weekday: Int) -> String {
+        ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"][weekday]
+    }
+
+    private func hourLabel(_ hour: Int) -> String {
+        if hour == 0 { return "12a" }
+        if hour < 12 { return "\(hour)a" }
+        if hour == 12 { return "12p" }
+        return "\(hour - 12)p"
+    }
+
+    private func detailText(model: [HeatmapCell]) -> String {
+        guard let cellID = self.selectedCellID,
+              let cell = model.first(where: { $0.id == cellID })
+        else {
+            return "Hover a cell for details"
+        }
+
+        if cell.totalTokens == 0 {
+            return "\(cell.weekdayLabel) \(cell.hourLabel): No usage"
+        }
+
+        return "\(cell.weekdayLabel) \(cell.hourLabel): \(UsageFormatter.tokenCountString(cell.totalTokens)) tokens"
+    }
+}
+
+private struct HeatmapCellView: View {
+    let cell: UsageHeatmapMenuView.HeatmapCell?
+    let isSelected: Bool
+
+    var body: some View {
+        Group {
+            if let cell {
+                Rectangle()
+                    .fill(UsageHeatmapMenuView.colorForIntensity(cell.intensity))
+                    .overlay {
+                        if self.isSelected {
+                            Rectangle()
+                                .strokeBorder(Color.blue, lineWidth: 2)
+                        }
+                    }
+            } else {
+                Rectangle()
+                    .fill(Color(nsColor: .separatorColor).opacity(0.2))
+            }
+        }
+        .frame(width: 38, height: 30)
+        .cornerRadius(RunicCornerRadius.xs)
+    }
+}
+