@sriinnu/runic 1.0.0

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

@@ -0,0 +1,417 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+@MainActor
+struct UsageTimelineChartMenuView: View {
+    enum TimeRange: String, CaseIterable {
+        case oneHour = "1h"
+        case sixHours = "6h"
+        case oneDay = "1d"
+        case sevenDays = "7d"
+        case thirtyDays = "30d"
+
+        var cutoffInterval: TimeInterval {
+            switch self {
+            case .oneHour: return -3600
+            case .sixHours: return -21600
+            case .oneDay: return -86400
+            case .sevenDays: return -604800
+            case .thirtyDays: return -2592000
+            }
+        }
+
+        var usesHourlyData: Bool {
+            switch self {
+            case .oneHour, .sixHours, .oneDay: return true
+            default: return false
+            }
+        }
+
+        var label: String { self.rawValue }
+    }
+
+    private struct Point: Identifiable {
+        let id: String
+        let date: Date
+        let totalTokens: Int
+        let key: String
+
+        init(date: Date, totalTokens: Int, key: String) {
+            self.date = date
+            self.totalTokens = totalTokens
+            self.key = key
+            self.id = key
+        }
+    }
+
+    private let dailySummaries: [UsageLedgerDailySummary]
+    private let hourlySummaries: [UsageLedgerHourlySummary]
+    private let width: CGFloat
+    @State private var selectedTimeRange: TimeRange = .oneDay
+    @State private var selectedKey: String?
+
+    init(
+        dailySummaries: [UsageLedgerDailySummary],
+        hourlySummaries: [UsageLedgerHourlySummary] = [],
+        width: CGFloat)
+    {
+        self.dailySummaries = dailySummaries
+        self.hourlySummaries = hourlySummaries
+        self.width = width
+    }
+
+    private static let lineColor = RunicColors.chartColor(at: 0)
+    private static let selectionBandColor = Color(nsColor: .labelColor).opacity(0.1)
+
+    var body: some View {
+        let model = self.selectedTimeRange.usesHourlyData
+            ? Self.makeHourlyModel(from: self.hourlySummaries, timeRange: self.selectedTimeRange)
+            : Self.makeDailyModel(from: self.dailySummaries, timeRange: self.selectedTimeRange)
+
+        VStack(alignment: .leading, spacing: RunicSpacing.xs) {
+            // Header on its own line
+            Text("Timeline")
+                .font(.system(.subheadline, design: .rounded))
+                .fontWeight(.semibold)
+
+            // Range picker on its own line
+            Picker("", selection: self.$selectedTimeRange) {
+                ForEach(TimeRange.allCases, id: \.self) { range in
+                    Text(range.label).tag(range)
+                }
+            }
+            .pickerStyle(.segmented)
+
+            if model.points.isEmpty {
+                Text("No data for selected range.")
+                    .font(.system(.footnote, design: .rounded))
+                    .foregroundStyle(.secondary)
+                    .frame(height: 100)
+            } else {
+                // Line chart
+                Chart {
+                    ForEach(model.points) { point in
+                        AreaMark(
+                            x: .value("Time", point.date),
+                            y: .value("Tokens", point.totalTokens))
+                            .foregroundStyle(
+                                LinearGradient(
+                                    colors: [
+                                        Self.lineColor.opacity(0.25),
+                                        Self.lineColor.opacity(0.03),
+                                    ],
+                                    startPoint: .top,
+                                    endPoint: .bottom))
+                            .interpolationMethod(.catmullRom)
+                        LineMark(
+                            x: .value("Time", point.date),
+                            y: .value("Tokens", point.totalTokens))
+                            .foregroundStyle(Self.lineColor)
+                            .lineStyle(StrokeStyle(lineWidth: 2))
+                            .interpolationMethod(.catmullRom)
+                    }
+                    if let peak = model.peakPoint {
+                        PointMark(
+                            x: .value("Time", peak.date),
+                            y: .value("Tokens", peak.totalTokens))
+                            .foregroundStyle(Color(nsColor: .systemYellow))
+                            .symbolSize(60)
+                            .annotation(position: .top, spacing: 4) {
+                                Text("Peak")
+                                    .font(.system(.caption2, design: .rounded))
+                                    .foregroundStyle(Color(nsColor: .systemYellow))
+                            }
+                    }
+                }
+                .chartYAxis {
+                    AxisMarks(position: .trailing) { value in
+                        AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5, dash: [4, 3]))
+                            .foregroundStyle(Color(nsColor: .separatorColor).opacity(0.5))
+                        AxisValueLabel {
+                            if let tokens = value.as(Int.self) {
+                                Text(UsageFormatter.tokenCountString(tokens))
+                                    .font(.system(.caption2, design: .rounded))
+                                    .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                            }
+                        }
+                    }
+                }
+                .chartXAxis {
+                    AxisMarks(values: .automatic(desiredCount: model.desiredAxisCount)) { _ in
+                        AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5, dash: [4, 3]))
+                            .foregroundStyle(Color(nsColor: .separatorColor).opacity(0.3))
+                        AxisValueLabel(format: model.xAxisFormat)
+                            .font(.system(.caption2, design: .rounded))
+                            .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                    }
+                }
+                .chartLegend(.hidden)
+                .frame(height: RunicSpacing.chartHeight + 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())
+                        }
+                    }
+                }
+
+                // Detail line
+                let detail = self.detailText(model: model)
+                Text(detail)
+                    .font(.system(.caption, design: .rounded))
+                    .foregroundStyle(.secondary)
+                    .lineLimit(1)
+                    .truncationMode(.tail)
+                    .frame(height: 16, alignment: .leading)
+
+                // Stats row
+                HStack(spacing: RunicSpacing.md) {
+                    StatCell(label: "Total", value: UsageFormatter.tokenCountString(model.totalTokens))
+                    StatCell(
+                        label: self.selectedTimeRange.usesHourlyData ? "Avg/hr" : "Avg/day",
+                        value: UsageFormatter.tokenCountString(model.averagePerPeriod))
+                    StatCell(label: "Peak", value: UsageFormatter.tokenCountString(model.peakTokens))
+                    if let cost = model.totalCostUSD, cost > 0 {
+                        StatCell(label: "Cost", value: UsageFormatter.usdString(cost))
+                    }
+                }
+            }
+        }
+        .chartPanelStyle(width: self.width)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel("Usage timeline chart showing \(model.points.count) data points over \(self.selectedTimeRange.label)")
+    }
+
+    // MARK: - Stat cell
+
+    private struct StatCell: View {
+        let label: String
+        let value: String
+
+        var body: some View {
+            VStack(alignment: .leading, spacing: RunicSpacing.xxxs) {
+                Text(self.label)
+                    .font(.system(.caption2, design: .rounded))
+                    .foregroundStyle(.tertiary)
+                Text(self.value)
+                    .font(.system(.caption, design: .rounded))
+                    .fontWeight(.medium)
+            }
+        }
+    }
+
+    // MARK: - Model
+
+    private struct Model {
+        let points: [Point]
+        let pointsByKey: [String: Point]
+        let dateKeys: [(key: String, date: Date)]
+        let peakPoint: Point?
+        let totalTokens: Int
+        let averagePerPeriod: Int
+        let peakTokens: Int
+        let totalCostUSD: Double?
+        let desiredAxisCount: Int
+        let xAxisFormat: Date.FormatStyle
+        let isHourly: Bool
+    }
+
+    // MARK: - Daily model
+
+    private static func makeDailyModel(from summaries: [UsageLedgerDailySummary], timeRange: TimeRange) -> Model {
+        let now = Date()
+        let cutoffDate = now.addingTimeInterval(timeRange.cutoffInterval)
+        let filtered = summaries.filter { $0.dayStart >= cutoffDate }
+        let sorted = filtered.sorted { $0.dayStart < $1.dayStart }
+
+        var points: [Point] = []
+        var pointsByKey: [String: Point] = [:]
+        var dateKeys: [(key: String, date: Date)] = []
+        var peak: Point?
+        var totalTokens = 0
+        var totalCost: Double = 0
+        var hasCost = false
+
+        for summary in sorted {
+            let tokens = summary.totals.totalTokens
+            totalTokens += tokens
+            if let cost = summary.totals.costUSD {
+                totalCost += cost
+                hasCost = true
+            }
+            let point = Point(date: summary.dayStart, totalTokens: tokens, key: summary.dayKey)
+            points.append(point)
+            pointsByKey[summary.dayKey] = point
+            dateKeys.append((summary.dayKey, summary.dayStart))
+
+            if peak == nil || tokens > (peak?.totalTokens ?? 0) {
+                peak = point
+            }
+        }
+
+        let desiredAxisCount: Int = switch timeRange {
+        case .oneHour, .sixHours, .oneDay: 4
+        case .sevenDays: 5
+        case .thirtyDays: 6
+        }
+
+        return Model(
+            points: points,
+            pointsByKey: pointsByKey,
+            dateKeys: dateKeys,
+            peakPoint: peak,
+            totalTokens: totalTokens,
+            averagePerPeriod: points.isEmpty ? 0 : totalTokens / max(1, points.count),
+            peakTokens: peak?.totalTokens ?? 0,
+            totalCostUSD: hasCost ? totalCost : nil,
+            desiredAxisCount: desiredAxisCount,
+            xAxisFormat: .dateTime.month(.abbreviated).day(),
+            isHourly: false)
+    }
+
+    // MARK: - Hourly model
+
+    private static func makeHourlyModel(from summaries: [UsageLedgerHourlySummary], timeRange: TimeRange) -> Model {
+        let now = Date()
+        let cutoffDate = now.addingTimeInterval(timeRange.cutoffInterval)
+        let filtered = summaries.filter { $0.hourStart >= cutoffDate }
+        let sorted = filtered.sorted { $0.hourStart < $1.hourStart }
+
+        var points: [Point] = []
+        var pointsByKey: [String: Point] = [:]
+        var dateKeys: [(key: String, date: Date)] = []
+        var peak: Point?
+        var totalTokens = 0
+
+        for summary in sorted {
+            let tokens = summary.totals.totalTokens
+            totalTokens += tokens
+            let point = Point(date: summary.hourStart, totalTokens: tokens, key: summary.hourKey)
+            points.append(point)
+            pointsByKey[summary.hourKey] = point
+            dateKeys.append((summary.hourKey, summary.hourStart))
+
+            if peak == nil || tokens > (peak?.totalTokens ?? 0) {
+                peak = point
+            }
+        }
+
+        let desiredAxisCount: Int = switch timeRange {
+        case .oneHour: 4
+        case .sixHours: 6
+        case .oneDay: 8
+        default: 6
+        }
+
+        return Model(
+            points: points,
+            pointsByKey: pointsByKey,
+            dateKeys: dateKeys,
+            peakPoint: peak,
+            totalTokens: totalTokens,
+            averagePerPeriod: points.isEmpty ? 0 : totalTokens / max(1, points.count),
+            peakTokens: peak?.totalTokens ?? 0,
+            totalCostUSD: nil,
+            desiredAxisCount: desiredAxisCount,
+            xAxisFormat: .dateTime.hour(.defaultDigits(amPM: .narrow)),
+            isHourly: true)
+    }
+
+    // MARK: - Interaction
+
+    private func selectionBandRect(model: Model, proxy: ChartProxy, geo: GeometryProxy) -> CGRect? {
+        guard let key = self.selectedKey else { return nil }
+        guard let plotAnchor = proxy.plotFrame else { return nil }
+        let plotFrame = geo[plotAnchor]
+        guard let index = model.dateKeys.firstIndex(where: { $0.key == key }) else { return nil }
+        let date = model.dateKeys[index].date
+        guard let x = proxy.position(forX: date) else { return nil }
+
+        func xForIndex(_ idx: Int) -> CGFloat? {
+            guard idx >= 0, idx < model.dateKeys.count else { return nil }
+            return proxy.position(forX: model.dateKeys[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.selectedKey != nil { self.selectedKey = 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 }
+
+        var bestKey: String?
+        var bestDistance: TimeInterval = .greatestFiniteMagnitude
+        for entry in model.dateKeys {
+            let dist = abs(entry.date.timeIntervalSince(date))
+            if dist < bestDistance {
+                bestDistance = dist
+                bestKey = entry.key
+            }
+        }
+
+        if let bestKey, self.selectedKey != bestKey {
+            self.selectedKey = bestKey
+        }
+    }
+
+    private func detailText(model: Model) -> String {
+        guard let key = self.selectedKey, let point = model.pointsByKey[key] else {
+            return "Hover for details"
+        }
+        let tokens = UsageFormatter.tokenCountString(point.totalTokens)
+        if model.isHourly {
+            let timeLabel = point.date.formatted(.dateTime.hour(.defaultDigits(amPM: .abbreviated)).minute())
+            return "\(timeLabel): \(tokens) tokens"
+        } else {
+            let dayLabel = point.date.formatted(.dateTime.month(.abbreviated).day())
+            return "\(dayLabel): \(tokens) tokens"
+        }
+    }
+}

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

@@ -0,0 +1,190 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+/// Multi-line chart overlaying session and weekly usage % — inspired by Tokex dual-line chart.
+/// Y-axis 0-100%, two colored lines for different rate windows.
+@MainActor
+struct UsageWindowComparisonChartMenuView: View {
+    private struct PercentPoint: Identifiable {
+        let id: String
+        let date: Date
+        let percent: Double
+        let series: String
+    }
+
+    private let dailySummaries: [UsageLedgerDailySummary]
+    private let primaryLabel: String
+    private let secondaryLabel: String?
+    private let primaryPercent: Double
+    private let secondaryPercent: Double?
+    private let width: CGFloat
+
+    init(
+        dailySummaries: [UsageLedgerDailySummary],
+        primaryLabel: String,
+        secondaryLabel: String?,
+        primaryPercent: Double,
+        secondaryPercent: Double?,
+        width: CGFloat)
+    {
+        self.dailySummaries = dailySummaries
+        self.primaryLabel = primaryLabel
+        self.secondaryLabel = secondaryLabel
+        self.primaryPercent = primaryPercent
+        self.secondaryPercent = secondaryPercent
+        self.width = width
+    }
+
+    private static let primaryColor = RunicColors.chartColor(at: 0)
+    private static let secondaryColor = RunicColors.chartColor(at: 1)
+
+    var body: some View {
+        let model = Self.makeModel(
+            from: self.dailySummaries,
+            primaryLabel: self.primaryLabel,
+            secondaryLabel: self.secondaryLabel,
+            primaryPercent: self.primaryPercent,
+            secondaryPercent: self.secondaryPercent)
+
+        VStack(alignment: .leading, spacing: RunicSpacing.xs) {
+            Text("Windows")
+                .font(.system(.subheadline, design: .rounded))
+                .fontWeight(.semibold)
+
+            if model.points.isEmpty {
+                Text("No usage window data available.")
+                    .font(.system(.footnote, design: .rounded))
+                    .foregroundStyle(.secondary)
+                    .frame(height: 80)
+            } else {
+                Chart {
+                    ForEach(model.points) { point in
+                        LineMark(
+                            x: .value("Date", point.date),
+                            y: .value("%", point.percent),
+                            series: .value("Window", point.series))
+                            .foregroundStyle(point.series == self.primaryLabel ? Self.primaryColor : Self.secondaryColor)
+                            .lineStyle(StrokeStyle(lineWidth: 2))
+                            .interpolationMethod(.catmullRom)
+                    }
+                }
+                .chartYScale(domain: 0...100)
+                .chartYAxis {
+                    AxisMarks(values: [0, 25, 50, 75, 100]) { value in
+                        AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5, dash: [4, 3]))
+                            .foregroundStyle(Color(nsColor: .separatorColor).opacity(0.5))
+                        AxisValueLabel {
+                            if let pct = value.as(Int.self) {
+                                Text("\(pct)%")
+                                    .font(.system(.caption2, design: .rounded))
+                                    .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                            }
+                        }
+                    }
+                }
+                .chartXAxis {
+                    AxisMarks(values: .automatic(desiredCount: 5)) { _ in
+                        AxisGridLine(stroke: StrokeStyle(lineWidth: 0.5, dash: [4, 3]))
+                            .foregroundStyle(Color(nsColor: .separatorColor).opacity(0.3))
+                        AxisValueLabel(format: .dateTime.month(.abbreviated).day())
+                            .font(.system(.caption2, design: .rounded))
+                            .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                    }
+                }
+                .chartLegend(.hidden)
+                .frame(height: RunicSpacing.chartHeight + 20)
+
+                // Legend
+                HStack(spacing: RunicSpacing.md) {
+                    HStack(spacing: RunicSpacing.xxs) {
+                        Circle()
+                            .fill(Self.primaryColor)
+                            .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
+                        Text(self.primaryLabel)
+                            .font(.system(.caption2, design: .rounded))
+                            .foregroundStyle(.secondary)
+                    }
+                    if let secondaryLabel = self.secondaryLabel {
+                        HStack(spacing: RunicSpacing.xxs) {
+                            Circle()
+                                .fill(Self.secondaryColor)
+                                .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
+                            Text(secondaryLabel)
+                                .font(.system(.caption2, design: .rounded))
+                                .foregroundStyle(.secondary)
+                        }
+                    }
+                }
+            }
+        }
+        .chartPanelStyle(width: self.width)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel("Usage window comparison chart")
+    }
+
+    // MARK: - Model
+
+    private struct ComparisonModel {
+        let points: [PercentPoint]
+    }
+
+    private static func makeModel(
+        from summaries: [UsageLedgerDailySummary],
+        primaryLabel: String,
+        secondaryLabel: String?,
+        primaryPercent: Double,
+        secondaryPercent: Double?) -> ComparisonModel
+    {
+        let calendar = Calendar.current
+        let todayStart = calendar.startOfDay(for: Date())
+        let cutoff = calendar.date(byAdding: .day, value: -7, to: todayStart) ?? todayStart
+
+        // Get last 7 days of daily token totals
+        var tokensByDay: [String: Int] = [:]
+        let formatter = DateFormatter()
+        formatter.dateFormat = "yyyy-MM-dd"
+        formatter.timeZone = TimeZone.current
+
+        for summary in summaries where summary.dayStart >= cutoff {
+            tokensByDay[summary.dayKey, default: 0] += summary.totals.totalTokens
+        }
+
+        // Today's tokens for scaling
+        let todayKey = formatter.string(from: todayStart)
+        let todayTokens = tokensByDay[todayKey] ?? 0
+
+        // Scale: today's tokens maps to primaryPercent
+        let primaryScale: Double = todayTokens > 0 ? primaryPercent / Double(todayTokens) : 0
+        let secondaryScale: Double = if let secondaryPercent, todayTokens > 0 {
+            secondaryPercent / Double(todayTokens)
+        } else {
+            0
+        }
+
+        var points: [PercentPoint] = []
+        for offset in stride(from: -6, through: 0, by: 1) {
+            guard let date = calendar.date(byAdding: .day, value: offset, to: todayStart) else { continue }
+            let key = formatter.string(from: date)
+            let tokens = tokensByDay[key] ?? 0
+
+            let primaryPct = min(100, Double(tokens) * primaryScale)
+            points.append(PercentPoint(
+                id: "\(key)-primary",
+                date: date,
+                percent: primaryPct,
+                series: primaryLabel))
+
+            if secondaryLabel != nil {
+                let secondaryPct = min(100, Double(tokens) * secondaryScale)
+                points.append(PercentPoint(
+                    id: "\(key)-secondary",
+                    date: date,
+                    percent: secondaryPct,
+                    series: secondaryLabel ?? ""))
+            }
+        }
+
+        return ComparisonModel(points: points)
+    }
+}