@sriinnu/runic 1.0.0

package/RuniciOS/Widgets/MediumWidget.swift

@@ -0,0 +1,370 @@
+import SwiftUI
+import WidgetKit
+import RunicCore
+
+// MARK: - Medium Widget Configuration
+
+/// Medium home screen widget showing 2-3 providers
+///
+/// Displays multiple providers with:
+/// - Horizontal progress bars
+/// - Provider names and icons
+/// - Remaining percentages
+/// - Summary status indicator
+struct RunicMediumWidget: Widget {
+    let kind: String = "RunicMediumWidget"
+
+    var body: some WidgetConfiguration {
+        StaticConfiguration(
+            kind: kind,
+            provider: RunicTimelineProvider()
+        ) { entry in
+            MediumWidgetView(entry: entry)
+        }
+        .configurationDisplayName("Runic Multi-Provider")
+        .description("Monitor multiple AI providers simultaneously.")
+        .supportedFamilies([.systemMedium])
+    }
+}
+
+// MARK: - Medium Widget View
+
+/// View implementation for medium widget
+///
+/// Shows up to 3 providers with compact horizontal bars.
+struct MediumWidgetView: View {
+    let entry: RunicWidgetEntry
+
+    var body: some View {
+        if entry.isPlaceholder {
+            placeholderView
+        } else if !providers.isEmpty {
+            contentView
+        } else {
+            emptyStateView
+        }
+    }
+
+    // MARK: - Content Views
+
+    /// Main content view with multiple providers
+    private var contentView: some View {
+        VStack(spacing: 0) {
+            // Header
+            headerView
+                .padding(.horizontal, 16)
+                .padding(.top, 14)
+                .padding(.bottom, 10)
+
+            Divider()
+                .background(Color.white.opacity(0.1))
+                .padding(.horizontal, 16)
+
+            // Provider list
+            VStack(spacing: 12) {
+                ForEach(providers) { provider in
+                    providerRow(for: provider)
+                }
+
+                if providers.count < 3 {
+                    Spacer()
+                }
+            }
+            .padding(.horizontal, 16)
+            .padding(.vertical, 12)
+        }
+    }
+
+    /// Header with status summary
+    private var headerView: some View {
+        HStack(spacing: 8) {
+            // Status icon
+            Image(systemName: entry.systemStatus.iconName)
+                .font(.system(size: 16, weight: .semibold))
+                .foregroundColor(statusColor)
+
+            Text("Runic")
+                .font(.system(size: 16, weight: .bold))
+                .foregroundColor(.white)
+
+            Spacer()
+
+            // Provider count
+            Text("\(providers.count) active")
+                .font(.system(size: 12, weight: .medium))
+                .foregroundColor(.white.opacity(0.7))
+        }
+    }
+
+    /// Individual provider row
+    private func providerRow(for provider: WidgetProviderData) -> some View {
+        VStack(spacing: 6) {
+            // Provider info
+            HStack(spacing: 8) {
+                Circle()
+                    .fill(Color(
+                        red: provider.color.red,
+                        green: provider.color.green,
+                        blue: provider.color.blue
+                    ))
+                    .frame(width: 10, height: 10)
+
+                Text(provider.displayName)
+                    .font(.system(size: 13, weight: .semibold))
+                    .foregroundColor(.white)
+
+                Spacer()
+
+                // Remaining percentage
+                Text("\(Int(provider.remainingPercent))%")
+                    .font(.system(size: 15, weight: .bold, design: .rounded))
+                    .foregroundColor(.white)
+
+                Text("left")
+                    .font(.system(size: 11, weight: .medium))
+                    .foregroundColor(.white.opacity(0.6))
+            }
+
+            // Progress bar
+            GeometryReader { geometry in
+                ZStack(alignment: .leading) {
+                    // Background
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(Color.white.opacity(0.1))
+
+                    // Progress
+                    RoundedRectangle(cornerRadius: 4)
+                        .fill(progressGradient(for: provider))
+                        .frame(width: geometry.size.width * (provider.usedPercent / 100))
+                }
+            }
+            .frame(height: 8)
+
+            // Reset countdown
+            if let countdown = provider.resetCountdown {
+                HStack {
+                    Text("Resets \(countdown)")
+                        .font(.system(size: 10, weight: .medium))
+                        .foregroundColor(.white.opacity(0.5))
+
+                    Spacer()
+                }
+            }
+        }
+    }
+
+    /// Placeholder view for loading state
+    private var placeholderView: some View {
+        VStack(spacing: 0) {
+            // Header placeholder
+            HStack(spacing: 8) {
+                RoundedRectangle(cornerRadius: 6)
+                    .fill(Color.white.opacity(0.2))
+                    .frame(width: 20, height: 20)
+
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(Color.white.opacity(0.2))
+                    .frame(width: 60, height: 14)
+
+                Spacer()
+
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(Color.white.opacity(0.15))
+                    .frame(width: 50, height: 12)
+            }
+            .padding(.horizontal, 16)
+            .padding(.top, 14)
+            .padding(.bottom, 10)
+
+            Divider()
+                .background(Color.white.opacity(0.1))
+                .padding(.horizontal, 16)
+
+            // Provider placeholders
+            VStack(spacing: 12) {
+                ForEach(0..<3, id: \.self) { _ in
+                    placeholderRow
+                }
+            }
+            .padding(.horizontal, 16)
+            .padding(.vertical, 12)
+        }
+    }
+
+    /// Placeholder for a single provider row
+    private var placeholderRow: some View {
+        VStack(spacing: 6) {
+            HStack(spacing: 8) {
+                Circle()
+                    .fill(Color.white.opacity(0.2))
+                    .frame(width: 10, height: 10)
+
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(Color.white.opacity(0.2))
+                    .frame(width: 70, height: 12)
+
+                Spacer()
+
+                RoundedRectangle(cornerRadius: 4)
+                    .fill(Color.white.opacity(0.2))
+                    .frame(width: 40, height: 14)
+            }
+
+            RoundedRectangle(cornerRadius: 4)
+                .fill(Color.white.opacity(0.1))
+                .frame(height: 8)
+
+            HStack {
+                RoundedRectangle(cornerRadius: 3)
+                    .fill(Color.white.opacity(0.1))
+                    .frame(width: 80, height: 10)
+
+                Spacer()
+            }
+        }
+    }
+
+    /// Empty state when no data available
+    private var emptyStateView: some View {
+        HStack(spacing: 12) {
+            Image(systemName: "chart.bar.xaxis")
+                .font(.system(size: 28))
+                .foregroundColor(.white.opacity(0.4))
+
+            VStack(alignment: .leading, spacing: 4) {
+                Text("No Providers Active")
+                    .font(.system(size: 14, weight: .semibold))
+                    .foregroundColor(.white.opacity(0.7))
+
+                Text("Open Runic to enable providers")
+                    .font(.system(size: 11))
+                    .foregroundColor(.white.opacity(0.5))
+            }
+
+            Spacer()
+        }
+        .padding()
+    }
+
+    // MARK: - Helper Properties
+
+    /// Get providers to display
+    private var providers: [WidgetProviderData] {
+        entry.providers(for: .systemMedium)
+    }
+
+    /// Status color based on system status
+    private var statusColor: Color {
+        switch entry.systemStatus {
+        case .normal:
+            return .green
+        case .warning:
+            return .orange
+        case .critical:
+            return .red
+        }
+    }
+
+    // MARK: - Helper Methods
+
+    /// Get progress gradient for provider severity
+    private func progressGradient(for provider: WidgetProviderData) -> LinearGradient {
+        let color: Color
+        switch provider.severity {
+        case .normal:
+            color = .green
+        case .elevated:
+            color = .yellow
+        case .high:
+            color = .orange
+        case .critical:
+            color = .red
+        }
+
+        return LinearGradient(
+            colors: [color, color.opacity(0.6)],
+            startPoint: .leading,
+            endPoint: .trailing
+        )
+    }
+}
+
+// MARK: - Preview Provider
+
+struct MediumWidget_Previews: PreviewProvider {
+    static var previews: some View {
+        let providers = [
+            WidgetSnapshot.ProviderEntry(
+                provider: .claude,
+                updatedAt: Date(),
+                primary: RateWindow(
+                    usedPercent: 75.0,
+                    windowMinutes: 300,
+                    resetsAt: Date().addingTimeInterval(3600),
+                    resetDescription: "in 1h"
+                ),
+                secondary: nil,
+                tertiary: nil,
+                creditsRemaining: nil,
+                codeReviewRemainingPercent: nil,
+                tokenUsage: nil,
+                dailyUsage: []
+            ),
+            WidgetSnapshot.ProviderEntry(
+                provider: .codex,
+                updatedAt: Date(),
+                primary: RateWindow(
+                    usedPercent: 45.0,
+                    windowMinutes: 300,
+                    resetsAt: Date().addingTimeInterval(7200),
+                    resetDescription: "in 2h"
+                ),
+                secondary: nil,
+                tertiary: nil,
+                creditsRemaining: nil,
+                codeReviewRemainingPercent: nil,
+                tokenUsage: nil,
+                dailyUsage: []
+            ),
+            WidgetSnapshot.ProviderEntry(
+                provider: .gemini,
+                updatedAt: Date(),
+                primary: RateWindow(
+                    usedPercent: 20.0,
+                    windowMinutes: 300,
+                    resetsAt: Date().addingTimeInterval(5400),
+                    resetDescription: "in 1h 30m"
+                ),
+                secondary: nil,
+                tertiary: nil,
+                creditsRemaining: nil,
+                codeReviewRemainingPercent: nil,
+                tokenUsage: nil,
+                dailyUsage: []
+            )
+        ]
+
+        let snapshot = WidgetSnapshot(
+            entries: providers,
+            enabledProviders: [.claude, .codex, .gemini],
+            generatedAt: Date()
+        )
+
+        let entry = RunicWidgetEntry(
+            date: Date(),
+            snapshot: snapshot,
+            configuration: .default,
+            isPlaceholder: false
+        )
+
+        Group {
+            MediumWidgetView(entry: entry)
+                .previewContext(WidgetPreviewContext(family: .systemMedium))
+                .previewDisplayName("Normal")
+
+            MediumWidgetView(entry: .placeholder())
+                .previewContext(WidgetPreviewContext(family: .systemMedium))
+                .previewDisplayName("Placeholder")
+        }
+    }
+}

package/RuniciOS/Widgets/RunicWidget.swift

@@ -0,0 +1,274 @@
+import SwiftUI
+import WidgetKit
+import RunicCore
+
+// MARK: - Widget Bundle
+
+/// Main widget bundle containing all Runic widgets
+///
+/// Provides the entry point for WidgetKit and bundles all widget types together.
+@main
+struct RunicWidgets: WidgetBundle {
+    var body: some Widget {
+        RunicSmallWidget()
+        RunicMediumWidget()
+        RunicLargeWidget()
+        RunicLockScreenWidget()
+    }
+}
+
+// MARK: - Shared Widget View
+
+/// Base widget view that routes to appropriate size-specific view
+///
+/// Provides consistent styling and handles deep linking for all widget sizes.
+struct RunicWidgetView: View {
+    @Environment(\.widgetFamily) var family
+    let entry: RunicWidgetEntry
+
+    var body: some View {
+        Group {
+            switch family {
+            case .systemSmall:
+                SmallWidgetView(entry: entry)
+
+            case .systemMedium:
+                MediumWidgetView(entry: entry)
+
+            case .systemLarge, .systemExtraLarge:
+                LargeWidgetView(entry: entry)
+
+            case .accessoryCircular:
+                LockScreenCircularView(entry: entry)
+
+            case .accessoryRectangular:
+                LockScreenRectangularView(entry: entry)
+
+            case .accessoryInline:
+                LockScreenInlineView(entry: entry)
+
+            @unknown default:
+                SmallWidgetView(entry: entry)
+            }
+        }
+        .widgetURL(deepLink)
+        .containerBackground(backgroundGradient, for: .widget)
+    }
+
+    /// Deep link URL to open the app
+    private var deepLink: URL {
+        // Open to main usage view
+        URL(string: "runic://usage")!
+    }
+
+    /// Background gradient based on overall usage
+    private var backgroundGradient: some View {
+        Group {
+            if entry.isPlaceholder {
+                LinearGradient(
+                    colors: [
+                        Color(red: 0.1, green: 0.1, blue: 0.15),
+                        Color(red: 0.05, green: 0.05, blue: 0.1)
+                    ],
+                    startPoint: .topLeading,
+                    endPoint: .bottomTrailing
+                )
+            } else {
+                let status = entry.systemStatus
+                switch status {
+                case .normal:
+                    LinearGradient(
+                        colors: [
+                            Color(red: 0.05, green: 0.15, blue: 0.1),
+                            Color(red: 0.02, green: 0.08, blue: 0.05)
+                        ],
+                        startPoint: .topLeading,
+                        endPoint: .bottomTrailing
+                    )
+                case .warning:
+                    LinearGradient(
+                        colors: [
+                            Color(red: 0.2, green: 0.15, blue: 0.05),
+                            Color(red: 0.1, green: 0.08, blue: 0.02)
+                        ],
+                        startPoint: .topLeading,
+                        endPoint: .bottomTrailing
+                    )
+                case .critical:
+                    LinearGradient(
+                        colors: [
+                            Color(red: 0.2, green: 0.05, blue: 0.05),
+                            Color(red: 0.1, green: 0.02, blue: 0.02)
+                        ],
+                        startPoint: .topLeading,
+                        endPoint: .bottomTrailing
+                    )
+                }
+            }
+        }
+    }
+}
+
+// MARK: - Shared Components
+
+/// Progress ring component for usage display
+///
+/// Shows circular progress with color-coded severity.
+struct UsageProgressRing: View {
+    let provider: WidgetProviderData
+    let size: CGFloat
+
+    var body: some View {
+        ZStack {
+            // Background circle
+            Circle()
+                .stroke(
+                    Color.white.opacity(0.1),
+                    lineWidth: size * 0.08
+                )
+
+            // Progress circle
+            Circle()
+                .trim(from: 0, to: provider.usedPercent / 100)
+                .stroke(
+                    severityColor,
+                    style: StrokeStyle(
+                        lineWidth: size * 0.08,
+                        lineCap: .round
+                    )
+                )
+                .rotationEffect(.degrees(-90))
+
+            // Center content
+            VStack(spacing: size * 0.05) {
+                Text("\(Int(provider.remainingPercent))%")
+                    .font(.system(size: size * 0.25, weight: .bold, design: .rounded))
+                    .foregroundColor(.white)
+
+                Text("left")
+                    .font(.system(size: size * 0.12, weight: .medium))
+                    .foregroundColor(.white.opacity(0.7))
+            }
+        }
+        .frame(width: size, height: size)
+    }
+
+    private var severityColor: Color {
+        switch provider.severity {
+        case .normal:
+            return Color.green
+        case .elevated:
+            return Color.yellow
+        case .high:
+            return Color.orange
+        case .critical:
+            return Color.red
+        }
+    }
+}
+
+/// Provider header with icon and name
+struct ProviderHeader: View {
+    let provider: WidgetProviderData
+    let iconSize: CGFloat
+
+    var body: some View {
+        HStack(spacing: 8) {
+            // Provider color indicator
+            Circle()
+                .fill(Color(
+                    red: provider.color.red,
+                    green: provider.color.green,
+                    blue: provider.color.blue
+                ))
+                .frame(width: iconSize, height: iconSize)
+
+            Text(provider.displayName)
+                .font(.system(size: iconSize * 0.8, weight: .semibold))
+                .foregroundColor(.white)
+
+            Spacer()
+        }
+    }
+}
+
+/// Compact usage bar for list displays
+struct CompactUsageBar: View {
+    let provider: WidgetProviderData
+    let height: CGFloat
+
+    var body: some View {
+        VStack(alignment: .leading, spacing: 4) {
+            HStack {
+                Text(provider.displayName)
+                    .font(.system(size: 12, weight: .medium))
+                    .foregroundColor(.white)
+
+                Spacer()
+
+                Text("\(Int(provider.remainingPercent))%")
+                    .font(.system(size: 12, weight: .bold, design: .rounded))
+                    .foregroundColor(.white)
+            }
+
+            GeometryReader { geometry in
+                ZStack(alignment: .leading) {
+                    // Background
+                    RoundedRectangle(cornerRadius: height / 2)
+                        .fill(Color.white.opacity(0.1))
+
+                    // Progress
+                    RoundedRectangle(cornerRadius: height / 2)
+                        .fill(severityGradient)
+                        .frame(width: geometry.size.width * (provider.usedPercent / 100))
+                }
+            }
+            .frame(height: height)
+        }
+    }
+
+    private var severityGradient: LinearGradient {
+        let color: Color
+        switch provider.severity {
+        case .normal:
+            color = .green
+        case .elevated:
+            color = .yellow
+        case .high:
+            color = .orange
+        case .critical:
+            color = .red
+        }
+
+        return LinearGradient(
+            colors: [color, color.opacity(0.7)],
+            startPoint: .leading,
+            endPoint: .trailing
+        )
+    }
+}
+
+// MARK: - Preview Provider
+
+struct RunicWidget_Previews: PreviewProvider {
+    static var previews: some View {
+        let entry = RunicWidgetEntry.placeholder()
+
+        Group {
+            // Small widget preview
+            RunicWidgetView(entry: entry)
+                .previewContext(WidgetPreviewContext(family: .systemSmall))
+                .previewDisplayName("Small")
+
+            // Medium widget preview
+            RunicWidgetView(entry: entry)
+                .previewContext(WidgetPreviewContext(family: .systemMedium))
+                .previewDisplayName("Medium")
+
+            // Large widget preview
+            RunicWidgetView(entry: entry)
+                .previewContext(WidgetPreviewContext(family: .systemLarge))
+                .previewDisplayName("Large")
+        }
+    }
+}