@sriinnu/runic 1.0.0

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

@@ -0,0 +1,228 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+/// Bar chart showing today's hourly usage — inspired by Tokex "Today by Hour".
+@MainActor
+struct HourlyActivityChartMenuView: View {
+    private struct HourBar: Identifiable {
+        let id: Int // hour 0-23
+        let hour: Int
+        let totalTokens: Int
+        let isPeak: Bool
+
+        var label: String {
+            if self.hour == 0 { return "12A" }
+            if self.hour < 12 { return "\(self.hour)A" }
+            if self.hour == 12 { return "12P" }
+            return "\(self.hour - 12)P"
+        }
+    }
+
+    private let hourlySummaries: [UsageLedgerHourlySummary]
+    private let width: CGFloat
+    @State private var selectedHour: Int?
+
+    init(hourlySummaries: [UsageLedgerHourlySummary], width: CGFloat) {
+        self.hourlySummaries = hourlySummaries
+        self.width = width
+    }
+
+    private static let barColor = RunicColors.chartColor(at: 0)
+    private static let peakColor = Color(nsColor: .systemYellow)
+
+    var body: some View {
+        let model = Self.makeModel(from: self.hourlySummaries)
+
+        VStack(alignment: .leading, spacing: RunicSpacing.sm) {
+            // Header
+            HStack(alignment: .firstTextBaseline) {
+                Text("Today by Hour")
+                    .font(.system(.subheadline, design: .rounded))
+                    .fontWeight(.semibold)
+                Spacer()
+                if let peak = model.peakHour {
+                    Text("Peak \(peak.label)")
+                        .font(.system(.caption, design: .rounded))
+                        .foregroundStyle(.secondary)
+                }
+            }
+
+            if model.bars.allSatisfy({ $0.totalTokens == 0 }) {
+                Text("No usage recorded today.")
+                    .font(.system(.footnote, design: .rounded))
+                    .foregroundStyle(.secondary)
+                    .frame(height: 80)
+            } else {
+                Chart {
+                    ForEach(model.bars) { bar in
+                        BarMark(
+                            x: .value("Hour", bar.hour),
+                            y: .value("Tokens", bar.totalTokens))
+                            .foregroundStyle(bar.isPeak ? Self.peakColor : Self.barColor)
+                            .cornerRadius(RunicCornerRadius.xs)
+                    }
+                    if let selected = self.selectedHour,
+                       let bar = model.bars.first(where: { $0.hour == selected })
+                    {
+                        RuleMark(x: .value("Hour", selected))
+                            .lineStyle(StrokeStyle(lineWidth: 1, dash: [3, 2]))
+                            .foregroundStyle(Color(nsColor: .labelColor).opacity(0.3))
+                            .annotation(position: .top, spacing: 4) {
+                                Text(UsageFormatter.tokenCountString(bar.totalTokens))
+                                    .font(.system(.caption2, design: .rounded))
+                                    .fontWeight(.medium)
+                                    .padding(.horizontal, 6)
+                                    .padding(.vertical, 2)
+                                    .background(
+                                        RoundedRectangle(cornerRadius: RunicCornerRadius.xs)
+                                            .fill(.ultraThinMaterial))
+                            }
+                    }
+                }
+                .chartXAxis {
+                    AxisMarks(values: [0, 6, 12, 18, 23]) { value in
+                        AxisValueLabel {
+                            if let hour = value.as(Int.self) {
+                                Text(Self.hourAxisLabel(hour))
+                                    .font(.system(.caption2, design: .rounded))
+                                    .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                            }
+                        }
+                    }
+                }
+                .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))
+                            }
+                        }
+                    }
+                }
+                .chartLegend(.hidden)
+                .frame(height: RunicSpacing.chartHeight - 30)
+                .chartOverlay { proxy in
+                    GeometryReader { geo in
+                        MouseLocationReader { location in
+                            self.updateHourSelection(location: location, proxy: proxy, geo: geo)
+                        }
+                        .frame(maxWidth: .infinity, maxHeight: .infinity)
+                        .contentShape(Rectangle())
+                    }
+                }
+
+                // Summary stats
+                HStack(spacing: RunicSpacing.md) {
+                    VStack(alignment: .leading, spacing: RunicSpacing.xxxs) {
+                        Text("Today")
+                            .font(.system(.caption2, design: .rounded))
+                            .foregroundStyle(.tertiary)
+                        Text(UsageFormatter.tokenCountString(model.totalTokens))
+                            .font(.system(.caption, design: .rounded))
+                            .fontWeight(.medium)
+                    }
+                    VStack(alignment: .leading, spacing: RunicSpacing.xxxs) {
+                        Text("Active hours")
+                            .font(.system(.caption2, design: .rounded))
+                            .foregroundStyle(.tertiary)
+                        Text("\(model.activeHours)")
+                            .font(.system(.caption, design: .rounded))
+                            .fontWeight(.medium)
+                    }
+                    if model.totalRequests > 0 {
+                        VStack(alignment: .leading, spacing: RunicSpacing.xxxs) {
+                            Text("Requests")
+                                .font(.system(.caption2, design: .rounded))
+                                .foregroundStyle(.tertiary)
+                            Text("\(model.totalRequests)")
+                                .font(.system(.caption, design: .rounded))
+                                .fontWeight(.medium)
+                        }
+                    }
+                }
+            }
+        }
+        .chartPanelStyle(width: self.width)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel("Today by hour chart with \(model.activeHours) active hours")
+    }
+
+    // MARK: - Model
+
+    private struct HourlyModel {
+        let bars: [HourBar]
+        let peakHour: HourBar?
+        let totalTokens: Int
+        let activeHours: Int
+        let totalRequests: Int
+    }
+
+    private static func makeModel(from summaries: [UsageLedgerHourlySummary]) -> HourlyModel {
+        let calendar = Calendar.current
+        let todayStart = calendar.startOfDay(for: Date())
+
+        // Bucket by hour
+        var tokensByHour: [Int: Int] = [:]
+        var requestsByHour: [Int: Int] = [:]
+        for summary in summaries where summary.hourStart >= todayStart {
+            let hour = calendar.component(.hour, from: summary.hourStart)
+            tokensByHour[hour, default: 0] += summary.totals.totalTokens
+            requestsByHour[hour, default: 0] += summary.requestCount
+        }
+
+        let maxTokens = tokensByHour.values.max() ?? 0
+        var peakHour: HourBar?
+
+        let bars = (0..<24).map { hour in
+            let tokens = tokensByHour[hour] ?? 0
+            let isPeak = tokens > 0 && tokens == maxTokens
+            let bar = HourBar(id: hour, hour: hour, totalTokens: tokens, isPeak: isPeak)
+            if isPeak && tokens > 0 { peakHour = bar }
+            return bar
+        }
+
+        let totalTokens = tokensByHour.values.reduce(0, +)
+        let activeHours = tokensByHour.values.filter { $0 > 0 }.count
+        let totalRequests = requestsByHour.values.reduce(0, +)
+
+        return HourlyModel(
+            bars: bars,
+            peakHour: peakHour,
+            totalTokens: totalTokens,
+            activeHours: activeHours,
+            totalRequests: totalRequests)
+    }
+
+    private func updateHourSelection(
+        location: CGPoint?,
+        proxy: ChartProxy,
+        geo: GeometryProxy)
+    {
+        guard let location else {
+            if self.selectedHour != nil { self.selectedHour = nil }
+            return
+        }
+        guard let plotAnchor = proxy.plotFrame else { return }
+        let plotFrame = geo[plotAnchor]
+        guard plotFrame.contains(location) else {
+            if self.selectedHour != nil { self.selectedHour = nil }
+            return
+        }
+        let xInPlot = location.x - plotFrame.origin.x
+        guard let hour: Int = proxy.value(atX: xInPlot) else { return }
+        let clamped = max(0, min(23, hour))
+        if self.selectedHour != clamped { self.selectedHour = clamped }
+    }
+
+    private static func hourAxisLabel(_ hour: Int) -> String {
+        if hour == 0 { return "12AM" }
+        if hour < 12 { return "\(hour)AM" }
+        if hour == 12 { return "12PM" }
+        return "\(hour - 12)PM"
+    }
+}

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

@@ -0,0 +1,162 @@
+import Charts
+import RunicCore
+import SwiftUI
+
+/// Compact inline line chart displayed directly in the main menu card.
+/// Shows recent usage with a time-range segmented picker — inspired by Tokex.
+@MainActor
+struct InlineUsageChartView: 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
+            }
+        }
+    }
+
+    private struct ChartPoint: Identifiable {
+        let id: String
+        let date: Date
+        let tokens: Int
+    }
+
+    let dailySummaries: [UsageLedgerDailySummary]
+    let hourlySummaries: [UsageLedgerHourlySummary]
+    let width: CGFloat
+    @State private var selectedRange: TimeRange = .oneDay
+    @Environment(\.menuItemHighlighted) private var isHighlighted
+
+    private static let lineColor = RunicColors.chartColor(at: 0)
+
+    var body: some View {
+        let points = self.selectedRange.usesHourlyData
+            ? Self.hourlyPoints(from: self.hourlySummaries, range: self.selectedRange)
+            : Self.dailyPoints(from: self.dailySummaries, range: self.selectedRange)
+
+        VStack(alignment: .leading, spacing: RunicSpacing.xs) {
+            // Time range picker
+            Picker("", selection: self.$selectedRange) {
+                ForEach(TimeRange.allCases, id: \.self) { range in
+                    Text(range.rawValue).tag(range)
+                }
+            }
+            .pickerStyle(.segmented)
+            .frame(maxWidth: .infinity)
+
+            // Chart area
+            if points.isEmpty {
+                HStack {
+                    Spacer()
+                    Text("No data")
+                        .font(.system(.caption2, design: .rounded))
+                        .foregroundStyle(.tertiary)
+                    Spacer()
+                }
+                .frame(height: 70)
+            } else {
+                ZStack(alignment: .topTrailing) {
+                    Chart {
+                        ForEach(points) { point in
+                            AreaMark(
+                                x: .value("Time", point.date),
+                                y: .value("Tokens", point.tokens))
+                                .foregroundStyle(
+                                    LinearGradient(
+                                        colors: [
+                                            Self.lineColor.opacity(0.2),
+                                            Self.lineColor.opacity(0.02),
+                                        ],
+                                        startPoint: .top,
+                                        endPoint: .bottom))
+                                .interpolationMethod(.catmullRom)
+                            LineMark(
+                                x: .value("Time", point.date),
+                                y: .value("Tokens", point.tokens))
+                                .foregroundStyle(Self.lineColor)
+                                .lineStyle(StrokeStyle(lineWidth: 1.5))
+                                .interpolationMethod(.catmullRom)
+                        }
+                    }
+                    .chartYAxis {
+                        AxisMarks(position: .trailing, values: .automatic(desiredCount: 3)) { value in
+                            AxisGridLine(stroke: StrokeStyle(lineWidth: 0.3, dash: [3, 3]))
+                                .foregroundStyle(Color(nsColor: .separatorColor).opacity(0.3))
+                            AxisValueLabel {
+                                if let tokens = value.as(Int.self) {
+                                    Text(UsageFormatter.tokenCountString(tokens))
+                                        .font(.system(size: 8, design: .rounded))
+                                        .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                                }
+                            }
+                        }
+                    }
+                    .chartXAxis {
+                        AxisMarks(values: .automatic(desiredCount: 4)) { _ in
+                            AxisValueLabel(format: self.xAxisFormat)
+                                .font(.system(size: 8, design: .rounded))
+                                .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
+                        }
+                    }
+                    .chartLegend(.hidden)
+                    .frame(height: 70)
+
+                    // Peak badge
+                    if let peak = points.max(by: { $0.tokens < $1.tokens }), peak.tokens > 0 {
+                        Text("Peak \(UsageFormatter.tokenCountString(peak.tokens))")
+                            .font(.system(size: 8, weight: .medium, design: .rounded))
+                            .foregroundStyle(.secondary)
+                            .padding(.horizontal, 4)
+                            .padding(.vertical, 1)
+                            .background(
+                                Capsule(style: .continuous)
+                                    .fill(.ultraThinMaterial))
+                            .padding(4)
+                    }
+                }
+            }
+        }
+        .padding(.horizontal, MenuCardMetrics.horizontalPadding)
+        .padding(.vertical, RunicSpacing.xs)
+        .frame(minWidth: self.width, maxWidth: .infinity, alignment: .leading)
+        .accessibilityElement(children: .ignore)
+        .accessibilityLabel("Usage chart, \(self.selectedRange.rawValue) range, \(points.count) data points")
+    }
+
+    private var xAxisFormat: Date.FormatStyle {
+        if self.selectedRange.usesHourlyData {
+            return .dateTime.hour(.defaultDigits(amPM: .abbreviated))
+        }
+        return .dateTime.month(.abbreviated).day()
+    }
+
+    // MARK: - Data
+
+    private static func hourlyPoints(from summaries: [UsageLedgerHourlySummary], range: TimeRange) -> [ChartPoint] {
+        let cutoff = Date().addingTimeInterval(range.cutoffInterval)
+        let filtered = summaries.filter { $0.hourStart >= cutoff }.sorted { $0.hourStart < $1.hourStart }
+        return filtered.map { ChartPoint(id: $0.hourKey, date: $0.hourStart, tokens: $0.totals.totalTokens) }
+    }
+
+    private static func dailyPoints(from summaries: [UsageLedgerDailySummary], range: TimeRange) -> [ChartPoint] {
+        let cutoff = Date().addingTimeInterval(range.cutoffInterval)
+        let filtered = summaries.filter { $0.dayStart >= cutoff }.sorted { $0.dayStart < $1.dayStart }
+        return filtered.map { ChartPoint(id: $0.dayKey, date: $0.dayStart, tokens: $0.totals.totalTokens) }
+    }
+}

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

@@ -0,0 +1,64 @@
+import SwiftUI
+
+/// Staggered fade+slide entrance animation for menu card sections.
+/// Each section slides up from a slight offset and fades in, with a delay
+/// proportional to its index for a cascading "liquid" reveal.
+struct MenuCardEntranceModifier: ViewModifier {
+    let index: Int
+    @State private var appeared = false
+
+    func body(content: Content) -> some View {
+        content
+            .opacity(self.appeared ? 1 : 0)
+            .offset(y: self.appeared ? 0 : 8)
+            .scaleEffect(self.appeared ? 1 : 0.97, anchor: .top)
+            .onAppear {
+                withAnimation(
+                    RunicAnimation.cardEntrance.delay(Double(self.index) * RunicAnimation.cardEntranceStagger)
+                ) {
+                    self.appeared = true
+                }
+            }
+    }
+}
+
+/// Subtle continuous shimmer sweep on glass surfaces.
+struct GlassShimmerModifier: ViewModifier {
+    @State private var shimmerPhase: CGFloat = -1
+
+    func body(content: Content) -> some View {
+        content
+            .overlay(
+                GeometryReader { geo in
+                    LinearGradient(
+                        stops: [
+                            .init(color: .clear, location: max(0, self.shimmerPhase - 0.15)),
+                            .init(color: .white.opacity(0.06), location: self.shimmerPhase),
+                            .init(color: .clear, location: min(1, self.shimmerPhase + 0.15)),
+                        ],
+                        startPoint: .leading,
+                        endPoint: .trailing)
+                        .frame(width: geo.size.width, height: geo.size.height)
+                        .allowsHitTesting(false)
+                }
+                .clipShape(RoundedRectangle(cornerRadius: RunicCornerRadius.lg, style: .continuous))
+            )
+            .onAppear {
+                withAnimation(.easeInOut(duration: 2.0).delay(0.5)) {
+                    self.shimmerPhase = 1.2
+                }
+            }
+    }
+}
+
+extension View {
+    /// Apply staggered entrance animation. `index` controls the delay.
+    func menuCardEntrance(index: Int) -> some View {
+        self.modifier(MenuCardEntranceModifier(index: index))
+    }
+
+    /// Apply a single shimmer sweep across a glass surface.
+    func glassShimmer() -> some View {
+        self.modifier(GlassShimmerModifier())
+    }
+}