@sriinnu/runic 1.0.0 → 2.0.0

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

@@ -4,19 +4,19 @@ import SwiftUI
 
 enum MenuContentMetrics {
     /// Horizontal padding for menu content
-    static let horizontalPadding: CGFloat = RunicSpacing.sm  // 12
+    static let horizontalPadding: CGFloat = RunicSpacing.sm // 12
 
     /// Vertical padding for menu content
-    static let verticalPadding: CGFloat = RunicSpacing.xs  // 8
+    static let verticalPadding: CGFloat = RunicSpacing.xs // 8
 
     /// Spacing between menu sections
-    static let sectionSpacing: CGFloat = RunicSpacing.xs  // 8
+    static let sectionSpacing: CGFloat = RunicSpacing.xs // 8
 
     /// Spacing between menu entries
-    static let entrySpacing: CGFloat = RunicSpacing.xxs  // 4
+    static let entrySpacing: CGFloat = RunicSpacing.xxs // 4
 
     /// Minimum menu width
-    static let minWidth: CGFloat = 260
+    static let minWidth: CGFloat = 290
 }
 
 @MainActor
@@ -52,6 +52,7 @@ struct MenuContent: View {
         .padding(.horizontal, MenuContentMetrics.horizontalPadding)
         .padding(.vertical, MenuContentMetrics.verticalPadding)
         .frame(minWidth: MenuContentMetrics.minWidth, alignment: .leading)
+        .runicTypography()
     }
 
     @ViewBuilder
@@ -60,11 +61,11 @@ struct MenuContent: View {
         case let .text(text, style):
             switch style {
             case .headline:
-                Text(text).font(.headline)
+                Text(text).font(RunicFont.headline)
             case .primary:
                 Text(text)
             case .secondary:
-                Text(text).foregroundStyle(.secondary).font(.footnote)
+                Text(text).foregroundStyle(.secondary).font(RunicFont.footnote)
             }
         case let .action(title, action):
             Button {
@@ -89,7 +90,9 @@ struct MenuContent: View {
         }
     }
 
-    private func iconName(for action: MenuDescriptor.MenuAction) -> String? { action.systemImageName }
+    private func iconName(for action: MenuDescriptor.MenuAction) -> String? {
+        action.systemImageName
+    }
 
     private func perform(_ action: MenuDescriptor.MenuAction) {
         switch action {

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

@@ -1,5 +1,5 @@
-import RunicCore
 import Foundation
+import RunicCore
 
 @MainActor
 struct MenuDescriptor {
@@ -351,7 +351,9 @@ private enum AccountFormatter {
         return cleaned.isEmpty ? text : cleaned
     }
 
-    static func email(_ text: String) -> String { text }
+    static func email(_ text: String) -> String {
+        text
+    }
 }
 
 extension MenuDescriptor.MenuAction {

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

@@ -1,14 +1,7 @@
 import SwiftUI
 
-private struct MenuItemHighlightedKey: EnvironmentKey {
-    static let defaultValue = false
-}
-
 extension EnvironmentValues {
-    var menuItemHighlighted: Bool {
-        get { self[MenuItemHighlightedKey.self] }
-        set { self[MenuItemHighlightedKey.self] = newValue }
-    }
+    @Entry var menuItemHighlighted: Bool = false
 }
 
 enum MenuHighlightStyle {

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

@@ -20,16 +20,18 @@ struct ModelBreakdownMenuView: View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
             if model.items.isEmpty {
                 Text("No model data.")
-                    .font(.footnote)
+                    .font(RunicFont.footnote)
                     .foregroundStyle(.secondary)
             } else {
                 // MARK: - Title
+
                 Text("Models")
-                    .font(.caption)
+                    .font(RunicFont.caption)
                     .fontWeight(.semibold)
                     .foregroundStyle(.primary)
 
                 // MARK: - Donut chart
+
                 Chart {
                     ForEach(model.chartItems) { item in
                         SectorMark(
@@ -45,6 +47,7 @@ struct ModelBreakdownMenuView: View {
                 .accessibilityLabel(Self.chartAccessibilityLabel(model: model))
 
                 // MARK: - Model list
+
                 VStack(alignment: .leading, spacing: RunicSpacing.xxs) {
                     ForEach(model.chartItems) { item in
                         Self.modelRow(item: item)
@@ -52,28 +55,31 @@ struct ModelBreakdownMenuView: View {
                 }
 
                 // MARK: - Overflow note
+
                 if model.overflowCount > 0 {
                     Text("and \(model.overflowCount) more")
-                        .font(.caption2)
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
 
                 // MARK: - Cache hit rate
+
                 if let cacheRate = model.cacheHitRateText {
                     Divider()
                     HStack(spacing: RunicSpacing.xxs) {
                         Text("Cache hit rate")
-                            .font(.caption)
+                            .font(RunicFont.caption)
                             .foregroundStyle(.secondary)
                         Spacer(minLength: RunicSpacing.xxs)
                         Text(cacheRate)
-                            .font(.caption)
+                            .font(RunicFont.caption)
                             .fontWeight(.medium)
                             .foregroundStyle(.primary)
                     }
                 }
 
                 // MARK: - Total summary
+
                 Divider()
                 Self.totalRow(model: model)
             }
@@ -91,27 +97,27 @@ struct ModelBreakdownMenuView: View {
                 .fill(item.color)
                 .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
             Text(item.displayName)
-                .font(.caption)
+                .font(RunicFont.caption)
                 .foregroundStyle(.primary)
                 .lineLimit(1)
                 .truncationMode(.tail)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(item.totalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 if let context = UsageFormatter.modelContextLabel(for: item.model) {
                     Text(context)
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
                 HStack(spacing: RunicSpacing.xxxs) {
                     Text("\(item.requestCount) req\(item.requestCount == 1 ? "" : "s")")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                     if let cost = item.costText {
                         Text(cost)
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                 }
@@ -122,21 +128,21 @@ struct ModelBreakdownMenuView: View {
     private static func totalRow(model: ModelModel) -> some View {
         HStack {
             Text("Total")
-                .font(.caption)
+                .font(RunicFont.caption)
                 .fontWeight(.medium)
                 .foregroundStyle(.primary)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(model.grandTotalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 HStack(spacing: RunicSpacing.xxxs) {
                     Text("\(model.grandTotalRequests) requests")
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                     if let cost = model.grandTotalCostText {
                         Text(cost)
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                 }

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

@@ -3,7 +3,8 @@ import Charts
 import RunicCore
 import SwiftUI
 
-/// Overview showing all enabled providers at a glance — usage bars, today's tokens, and a combined chart.
+/// Overview dashboard showing all enabled providers at a glance.
+/// Inspired by Apple Activity app rings, Awwwards dashboard layouts, and Tokex stat cards.
 @MainActor
 struct OverviewMenuView: View {
     struct ProviderSummary: Identifiable {
@@ -15,6 +16,8 @@ struct OverviewMenuView: View {
         let todayTokens: Int
         let brandColor: Color
         let resetDescription: String?
+        let windowLabel: String? // e.g. "5h" or "Weekly"
+        let topModelContext: String? // e.g. "200K ctx"
     }
 
     struct DailyPoint: Identifiable {
@@ -22,82 +25,98 @@ struct OverviewMenuView: View {
         let date: Date
         let tokens: Int
         let provider: String
+        let color: Color
     }
 
     let summaries: [ProviderSummary]
     let chartPoints: [DailyPoint]
     let totalTodayTokens: Int
+    let totalProviders: Int
     let width: CGFloat
 
     var body: some View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
-            // Header
-            HStack(alignment: .firstTextBaseline) {
-                Text("Overview")
-                    .font(.system(.title3, design: .rounded))
-                    .fontWeight(.bold)
+            // MARK: - Hero header
+
+            HStack(alignment: .center, spacing: RunicSpacing.xs) {
+                // Ring indicator showing overall usage
+                ZStack {
+                    Circle()
+                        .stroke(Color(nsColor: .separatorColor).opacity(0.15), lineWidth: 3)
+                    Circle()
+                        .trim(from: 0, to: min(1, self.averageUsedPercent / 100))
+                        .stroke(
+                            AngularGradient(
+                                colors: [RunicColors.chartColor(at: 4), RunicColors.chartColor(at: 0)],
+                                center: .center),
+                            style: StrokeStyle(lineWidth: 3, lineCap: .round))
+                        .rotationEffect(.degrees(-90))
+                }
+                .frame(width: 32, height: 32)
+
+                VStack(alignment: .leading, spacing: 0) {
+                    Text(UsageFormatter.tokenCountString(self.totalTodayTokens))
+                        .font(RunicFont.system(size: 22, weight: .bold))
+                    Text("\(self.summaries.count) of \(self.totalProviders) active")
+                        .font(RunicFont.caption2)
+                        .foregroundStyle(.tertiary)
+                }
+
                 Spacer()
-                if self.totalTodayTokens > 0 {
-                    Text("\(UsageFormatter.tokenCountString(self.totalTodayTokens)) today")
-                        .font(.system(.caption, design: .rounded))
+
+                VStack(alignment: .trailing, spacing: 2) {
+                    Text("today")
+                        .font(RunicFont.caption2)
+                        .foregroundStyle(.tertiary)
+                    Text("\(Int(self.averageUsedPercent))% avg")
+                        .font(RunicFont.caption)
+                        .fontWeight(.medium)
                         .foregroundStyle(.secondary)
                 }
             }
 
-            // Provider rows
+            Divider().opacity(0.5)
+
+            // MARK: - Provider cards
+
             if self.summaries.isEmpty {
-                Text("No providers enabled.")
-                    .font(.system(.footnote, design: .rounded))
+                Text("No active providers.")
+                    .font(RunicFont.footnote)
                     .foregroundStyle(.secondary)
+                    .frame(maxWidth: .infinity, alignment: .center)
+                    .padding(.vertical, RunicSpacing.md)
             } else {
-                VStack(spacing: RunicSpacing.xs) {
+                VStack(spacing: RunicSpacing.compact) {
                     ForEach(self.summaries) { summary in
-                        HStack(spacing: RunicSpacing.xs) {
-                            // Provider icon
-                            if let icon = summary.icon {
-                                Image(nsImage: icon)
-                                    .resizable()
-                                    .aspectRatio(contentMode: .fit)
-                                    .frame(width: 16, height: 16)
-                            }
-
-                            // Name
-                            Text(summary.name)
-                                .font(.system(.caption, design: .rounded))
-                                .fontWeight(.medium)
-                                .frame(width: 60, alignment: .leading)
-                                .lineLimit(1)
-
-                            // Mini progress bar
-                            GeometryReader { geo in
-                                ZStack(alignment: .leading) {
-                                    Capsule()
-                                        .fill(Color(nsColor: .separatorColor).opacity(0.2))
-                                    Capsule()
-                                        .fill(summary.brandColor)
-                                        .frame(width: max(0, geo.size.width * min(1, summary.usedPercent / 100)))
-                                }
-                            }
-                            .frame(height: 6)
-
-                            // Percentage
-                            Text("\(Int(summary.usedPercent))%")
-                                .font(.system(size: 10, weight: .medium, design: .rounded))
-                                .foregroundStyle(.secondary)
-                                .frame(width: 30, alignment: .trailing)
-                        }
+                        ProviderRow(summary: summary)
                     }
                 }
             }
 
-            // Combined 7-day chart
+            // MARK: - Combined 7-day chart
+
             if !self.chartPoints.isEmpty {
-                Divider()
-                    .padding(.vertical, RunicSpacing.xxxs)
+                Divider().opacity(0.5)
 
-                Text("Last 7 days")
-                    .font(.system(.caption2, design: .rounded))
-                    .foregroundStyle(.tertiary)
+                HStack {
+                    Text("7-day activity")
+                        .font(RunicFont.caption2)
+                        .foregroundStyle(.tertiary)
+                    Spacer()
+                    // Mini legend dots
+                    HStack(spacing: RunicSpacing.xxs) {
+                        ForEach(self.summaries.prefix(4)) { s in
+                            Circle()
+                                .fill(s.brandColor)
+                                .frame(width: 5, height: 5)
+                        }
+                        if self.summaries.count > 4 {
+                            Text("+\(self.summaries.count - 4)")
+                                .font(RunicFont.system(size: 8))
+                                .foregroundStyle(.quaternary)
+                        }
+                    }
+                }
 
                 Chart {
                     ForEach(self.chartPoints) { point in
@@ -105,29 +124,32 @@ struct OverviewMenuView: View {
                             x: .value("Date", point.date, unit: .day),
                             y: .value("Tokens", point.tokens))
                             .foregroundStyle(by: .value("Provider", point.provider))
+                            .cornerRadius(2)
                     }
                 }
                 .chartForegroundStyleScale(range: self.chartColors)
                 .chartLegend(.hidden)
                 .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))
+                                    .font(RunicFont.system(size: 8))
                                     .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
                             }
                         }
                     }
                 }
                 .chartXAxis {
-                    AxisMarks(values: .automatic(desiredCount: 5)) { _ in
-                        AxisValueLabel(format: .dateTime.weekday(.short))
-                            .font(.system(size: 8, design: .rounded))
+                    AxisMarks(values: .automatic(desiredCount: 7)) { _ in
+                        AxisValueLabel(format: .dateTime.weekday(.narrow))
+                            .font(RunicFont.system(size: 8, weight: .medium))
                             .foregroundStyle(Color(nsColor: .tertiaryLabelColor))
                     }
                 }
-                .frame(height: 70)
+                .frame(height: 80)
             }
         }
         .padding(.horizontal, MenuCardMetrics.horizontalPadding)
@@ -135,7 +157,125 @@ struct OverviewMenuView: View {
         .frame(minWidth: self.width, maxWidth: .infinity, alignment: .leading)
     }
 
+    private var averageUsedPercent: Double {
+        let active = self.summaries.filter { $0.usedPercent > 0 }
+        guard !active.isEmpty else { return 0 }
+        return active.reduce(0) { $0 + $1.usedPercent } / Double(active.count)
+    }
+
     private var chartColors: [Color] {
         self.summaries.map(\.brandColor)
     }
 }
+
+// MARK: - Provider row
+
+private struct ProviderRow: View {
+    let summary: OverviewMenuView.ProviderSummary
+
+    var body: some View {
+        HStack(spacing: RunicSpacing.xs) {
+            // Icon with brand tint
+            if let icon = self.summary.icon {
+                Image(nsImage: icon)
+                    .resizable()
+                    .aspectRatio(contentMode: .fit)
+                    .frame(width: 14, height: 14)
+            }
+
+            // Name
+            Text(self.summary.name)
+                .font(RunicFont.caption)
+                .fontWeight(.medium)
+                .frame(width: 58, alignment: .leading)
+                .lineLimit(1)
+
+            // Progress bar with gradient fill
+            GeometryReader { geo in
+                let fillWidth = max(0, geo.size.width * min(1, self.summary.usedPercent / 100))
+                ZStack(alignment: .leading) {
+                    // Track
+                    Capsule()
+                        .fill(Color(nsColor: .separatorColor).opacity(0.12))
+
+                    // Fill with gradient
+                    Capsule()
+                        .fill(
+                            LinearGradient(
+                                colors: [
+                                    self.summary.brandColor.opacity(0.9),
+                                    self.summary.brandColor,
+                                ],
+                                startPoint: .leading,
+                                endPoint: .trailing))
+                        .frame(width: fillWidth)
+
+                    // Gloss overlay on fill
+                    Capsule()
+                        .fill(
+                            LinearGradient(
+                                stops: [
+                                    .init(color: .white.opacity(0.2), location: 0),
+                                    .init(color: .clear, location: 0.5),
+                                ],
+                                startPoint: .top,
+                                endPoint: .bottom))
+                        .frame(width: fillWidth)
+                }
+            }
+            .frame(height: 7)
+
+            // Percentage
+            Text("\(Int(self.summary.usedPercent))%")
+                .font(RunicFont.system(size: 9, weight: .semibold))
+                .foregroundStyle(self.summary.usedPercent > 80 ? .primary : .secondary)
+                .frame(width: 28, alignment: .trailing)
+
+            // Today's tokens (if any)
+            if self.summary.todayTokens > 0 {
+                Text(UsageFormatter.tokenCountString(self.summary.todayTokens))
+                    .font(RunicFont.system(size: 8))
+                    .foregroundStyle(.tertiary)
+                    .frame(width: 32, alignment: .trailing)
+            }
+        }
+
+        // Second line: window + reset + context
+        let hasSecondLine = self.summary.windowLabel != nil ||
+            self.summary.resetDescription != nil ||
+            self.summary.topModelContext != nil
+
+        if hasSecondLine {
+            HStack(spacing: RunicSpacing.xxs) {
+                // Spacer for icon + name width
+                Color.clear.frame(width: 14 + 58 + RunicSpacing.xs * 2, height: 0)
+
+                if let window = self.summary.windowLabel {
+                    InfoPill(text: window)
+                }
+                if let reset = self.summary.resetDescription {
+                    InfoPill(text: reset)
+                }
+                if let ctx = self.summary.topModelContext {
+                    InfoPill(text: ctx)
+                }
+                Spacer()
+            }
+        }
+    }
+}
+
+private struct InfoPill: View {
+    let text: String
+
+    var body: some View {
+        Text(self.text)
+            .font(RunicFont.system(size: 8, weight: .medium))
+            .foregroundStyle(.tertiary)
+            .padding(.horizontal, 4)
+            .padding(.vertical, 1)
+            .background(
+                Capsule(style: .continuous)
+                    .fill(Color(nsColor: .controlBackgroundColor).opacity(RunicColors.Opacity.subtle)))
+    }
+}

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

@@ -20,16 +20,18 @@ struct ProjectBreakdownMenuView: View {
         VStack(alignment: .leading, spacing: RunicSpacing.sm) {
             if model.items.isEmpty {
                 Text("No project data.")
-                    .font(.footnote)
+                    .font(RunicFont.footnote)
                     .foregroundStyle(.secondary)
             } else {
                 // MARK: - Title
+
                 Text("Projects")
-                    .font(.caption)
+                    .font(RunicFont.caption)
                     .fontWeight(.semibold)
                     .foregroundStyle(.primary)
 
                 // MARK: - Horizontal bar chart
+
                 Chart {
                     ForEach(model.chartItems) { item in
                         BarMark(
@@ -43,7 +45,7 @@ struct ProjectBreakdownMenuView: View {
                 .chartYAxis {
                     AxisMarks { _ in
                         AxisValueLabel()
-                            .font(.caption2)
+                            .font(RunicFont.caption2)
                             .foregroundStyle(Color(nsColor: .secondaryLabelColor))
                     }
                 }
@@ -53,6 +55,7 @@ struct ProjectBreakdownMenuView: View {
                 .accessibilityLabel(Self.chartAccessibilityLabel(model: model))
 
                 // MARK: - Project list
+
                 VStack(alignment: .leading, spacing: RunicSpacing.xxs) {
                     ForEach(model.chartItems) { item in
                         Self.projectRow(item: item)
@@ -60,13 +63,15 @@ struct ProjectBreakdownMenuView: View {
                 }
 
                 // MARK: - Overflow note
+
                 if model.overflowCount > 0 {
                     Text("and \(model.overflowCount) more")
-                        .font(.caption2)
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
 
                 // MARK: - Total summary
+
                 Divider()
                 Self.totalRow(model: model)
             }
@@ -84,24 +89,24 @@ struct ProjectBreakdownMenuView: View {
                 .fill(item.color)
                 .frame(width: RunicSpacing.chartLegendDot, height: RunicSpacing.chartLegendDot)
             Text(item.name)
-                .font(.caption)
+                .font(RunicFont.caption)
                 .foregroundStyle(.primary)
                 .lineLimit(1)
                 .truncationMode(.middle)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(item.totalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 HStack(spacing: RunicSpacing.xxxs) {
                     if let cost = item.costText {
                         Text(cost)
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                     if item.modelCount > 0 {
                         Text("\(item.modelCount) model\(item.modelCount == 1 ? "" : "s")")
-                            .font(.system(.caption2, design: .rounded))
+                            .font(RunicFont.caption2)
                             .foregroundStyle(.tertiary)
                     }
                 }
@@ -112,17 +117,17 @@ struct ProjectBreakdownMenuView: View {
     private static func totalRow(model: ProjectModel) -> some View {
         HStack {
             Text("Total")
-                .font(.caption)
+                .font(RunicFont.caption)
                 .fontWeight(.medium)
                 .foregroundStyle(.primary)
             Spacer(minLength: RunicSpacing.xxs)
             VStack(alignment: .trailing, spacing: 0) {
                 Text("\(UsageFormatter.tokenCountString(model.grandTotalTokens)) tokens")
-                    .font(.system(.caption2, design: .rounded))
+                    .font(RunicFont.caption2)
                     .foregroundStyle(.secondary)
                 if let cost = model.grandTotalCostText {
                     Text(cost)
-                        .font(.system(.caption2, design: .rounded))
+                        .font(RunicFont.caption2)
                         .foregroundStyle(.tertiary)
                 }
             }