Add color-coded menu bar icons and separator style option

Sources/CodexBar/MenuBarDisplayText.swift

@@ -23,6 +23,7 @@ enum MenuBarDisplayText {
         percentWindow: RateWindow?,
         paceWindow: RateWindow?,
         showUsed: Bool,
+        separatorStyle: MenuBarSeparatorStyle = .dot,
         now: Date = .init()) -> String?
     {
         switch mode {
@@ -33,7 +34,7 @@ enum MenuBarDisplayText {
         case .both:
             guard let percent = percentText(window: percentWindow, showUsed: showUsed) else { return nil }
             guard let pace = Self.paceText(provider: provider, window: paceWindow, now: now) else { return nil }
-            return "\(percent) · \(pace)"
+            return "\(percent)\(separatorStyle.separator)\(pace)"
         }
     }
 }

Sources/CodexBar/MenuBarSeparatorStyle.swift

@@ -0,0 +1,25 @@
+import Foundation
+
+/// Controls the separator character between percent and pace in the menu bar.
+enum MenuBarSeparatorStyle: String, CaseIterable, Identifiable {
+    case dot
+    case pipe
+
+    var id: String {
+        self.rawValue
+    }
+
+    var separator: String {
+        switch self {
+        case .dot: " · "
+        case .pipe: " | "
+        }
+    }
+
+    var label: String {
+        switch self {
+        case .dot: "Dot (·)"
+        case .pipe: "Pipe (|)"
+        }
+    }
+}

Sources/CodexBar/PreferencesAdvancedPane.swift

@@ -64,6 +64,10 @@ struct AdvancedPane: View {
                         title: "Surprise me",
                         subtitle: "Check if you like your agents having some fun up there.",
                         binding: self.$settings.randomBlinkEnabled)
+                    PreferenceToggleRow(
+                        title: "Color-coded icons",
+                        subtitle: "Tint menu bar icons green, yellow, or red based on session usage.",
+                        binding: self.$settings.colorCodedIcons)
                 }
 
                 Divider()

Sources/CodexBar/PreferencesDisplayPane.swift

@@ -52,6 +52,28 @@ struct DisplayPane: View {
                     }
                     .disabled(!self.settings.menuBarShowsBrandIconWithPercent)
                     .opacity(self.settings.menuBarShowsBrandIconWithPercent ? 1 : 0.5)
+                    HStack(alignment: .top, spacing: 12) {
+                        VStack(alignment: .leading, spacing: 4) {
+                            Text("Separator")
+                                .font(.body)
+                            Text("Character between percent and pace (e.g. 45% | +5%).")
+                                .font(.footnote)
+                                .foregroundStyle(.tertiary)
+                        }
+                        Spacer()
+                        Picker("Separator", selection: self.$settings.menuBarSeparatorStyle) {
+                            ForEach(MenuBarSeparatorStyle.allCases) { style in
+                                Text(style.label).tag(style)
+                            }
+                        }
+                        .labelsHidden()
+                        .pickerStyle(.menu)
+                        .frame(maxWidth: 200)
+                    }
+                    .disabled(!self.settings.menuBarShowsBrandIconWithPercent ||
+                        self.settings.menuBarDisplayMode != .both)
+                    .opacity(self.settings.menuBarShowsBrandIconWithPercent &&
+                        self.settings.menuBarDisplayMode == .both ? 1 : 0.5)
                 }
 
                 Divider()

Sources/CodexBar/SettingsStore+Defaults.swift

@@ -140,6 +140,23 @@ extension SettingsStore {
         set { self.menuBarDisplayModeRaw = newValue.rawValue }
     }
 
+    private var menuBarSeparatorStyleRaw: String? {
+        get { self.defaultsState.menuBarSeparatorStyleRaw }
+        set {
+            self.defaultsState.menuBarSeparatorStyleRaw = newValue
+            if let raw = newValue {
+                self.userDefaults.set(raw, forKey: "menuBarSeparatorStyle")
+            } else {
+                self.userDefaults.removeObject(forKey: "menuBarSeparatorStyle")
+            }
+        }
+    }
+
+    var menuBarSeparatorStyle: MenuBarSeparatorStyle {
+        get { MenuBarSeparatorStyle(rawValue: self.menuBarSeparatorStyleRaw ?? "") ?? .dot }
+        set { self.menuBarSeparatorStyleRaw = newValue.rawValue }
+    }
+
     var showAllTokenAccountsInMenu: Bool {
         get { self.defaultsState.showAllTokenAccountsInMenu }
         set {
@@ -231,6 +248,14 @@ extension SettingsStore {
         }
     }
 
+    var colorCodedIcons: Bool {
+        get { self.defaultsState.colorCodedIcons }
+        set {
+            self.defaultsState.colorCodedIcons = newValue
+            self.userDefaults.set(newValue, forKey: "colorCodedIcons")
+        }
+    }
+
     var mergeIcons: Bool {
         get { self.defaultsState.mergeIcons }
         set {

Sources/CodexBar/SettingsStore+MenuObservation.swift

@@ -36,6 +36,8 @@ extension SettingsStore {
         _ = self.kimiCookieSource
         _ = self.augmentCookieSource
         _ = self.ampCookieSource
+        _ = self.colorCodedIcons
+        _ = self.menuBarSeparatorStyle
         _ = self.mergeIcons
         _ = self.switcherShowsIcons
         _ = self.zaiAPIToken

Sources/CodexBar/SettingsStore.swift

@@ -189,6 +189,8 @@ extension SettingsStore {
             forKey: "menuBarShowsBrandIconWithPercent") as? Bool ?? false
         let menuBarDisplayModeRaw = userDefaults.string(forKey: "menuBarDisplayMode")
             ?? MenuBarDisplayMode.percent.rawValue
+        let menuBarSeparatorStyleRaw = userDefaults.string(forKey: "menuBarSeparatorStyle")
+            ?? MenuBarSeparatorStyle.dot.rawValue
         let showAllTokenAccountsInMenu = userDefaults.object(forKey: "showAllTokenAccountsInMenu") as? Bool ?? false
         let storedPreferences = userDefaults.dictionary(forKey: "menuBarMetricPreferences") as? [String: String] ?? [:]
         var resolvedPreferences = storedPreferences
@@ -211,6 +213,7 @@ extension SettingsStore {
         let openAIWebAccessEnabled = openAIWebAccessDefault ?? true
         if openAIWebAccessDefault == nil { userDefaults.set(true, forKey: "openAIWebAccessEnabled") }
         let jetbrainsIDEBasePath = userDefaults.string(forKey: "jetbrainsIDEBasePath") ?? ""
+        let colorCodedIcons = userDefaults.object(forKey: "colorCodedIcons") as? Bool ?? true
         let mergeIcons = userDefaults.object(forKey: "mergeIcons") as? Bool ?? true
         let switcherShowsIcons = userDefaults.object(forKey: "switcherShowsIcons") as? Bool ?? true
         let selectedMenuProviderRaw = userDefaults.string(forKey: "selectedMenuProvider")
@@ -231,6 +234,7 @@ extension SettingsStore {
             resetTimesShowAbsolute: resetTimesShowAbsolute,
             menuBarShowsBrandIconWithPercent: menuBarShowsBrandIconWithPercent,
             menuBarDisplayModeRaw: menuBarDisplayModeRaw,
+            menuBarSeparatorStyleRaw: menuBarSeparatorStyleRaw,
             showAllTokenAccountsInMenu: showAllTokenAccountsInMenu,
             menuBarMetricPreferencesRaw: resolvedPreferences,
             costUsageEnabled: costUsageEnabled,
@@ -241,6 +245,7 @@ extension SettingsStore {
             showOptionalCreditsAndExtraUsage: showOptionalCreditsAndExtraUsage,
             openAIWebAccessEnabled: openAIWebAccessEnabled,
             jetbrainsIDEBasePath: jetbrainsIDEBasePath,
+            colorCodedIcons: colorCodedIcons,
             mergeIcons: mergeIcons,
             switcherShowsIcons: switcherShowsIcons,
             selectedMenuProviderRaw: selectedMenuProviderRaw,

Sources/CodexBar/SettingsStoreState.swift

@@ -15,6 +15,7 @@ struct SettingsDefaultsState: Sendable {
     var resetTimesShowAbsolute: Bool
     var menuBarShowsBrandIconWithPercent: Bool
     var menuBarDisplayModeRaw: String?
+    var menuBarSeparatorStyleRaw: String?
     var showAllTokenAccountsInMenu: Bool
     var menuBarMetricPreferencesRaw: [String: String]
     var costUsageEnabled: Bool
@@ -25,6 +26,7 @@ struct SettingsDefaultsState: Sendable {
     var showOptionalCreditsAndExtraUsage: Bool
     var openAIWebAccessEnabled: Bool
     var jetbrainsIDEBasePath: String
+    var colorCodedIcons: Bool
     var mergeIcons: Bool
     var switcherShowsIcons: Bool
     var selectedMenuProviderRaw: String?

Sources/CodexBar/StatusItemController+Animation.swift

@@ -250,19 +250,26 @@ extension StatusItemController {
             return .none
         }()
 
+        let usageColor: NSColor? = {
+            guard self.settings.colorCodedIcons, !needsAnimation else { return nil }
+            return UsageColorLevel.tintColor(for: snapshot?.primary?.usedPercent)
+        }()
+
         if showBrandPercent,
            let brand = ProviderBrandIcon.image(for: primaryProvider)
         {
             let displayText = self.menuBarDisplayText(for: primaryProvider, snapshot: snapshot)
             self.setButtonImage(brand, for: button)
             self.setButtonTitle(displayText, for: button)
+            self.setButtonTintColor(usageColor, for: button)
             return
         }
 
         self.setButtonTitle(nil, for: button)
         if let morphProgress {
             let image = IconRenderer.makeMorphIcon(progress: morphProgress, style: style)
             self.setButtonImage(image, for: button)
+            self.setButtonTintColor(nil, for: button)
         } else {
             let image = IconRenderer.makeIcon(
                 primaryRemaining: primary,
@@ -275,6 +282,7 @@ extension StatusItemController {
                 tilt: tilt,
                 statusIndicator: statusIndicator)
             self.setButtonImage(image, for: button)
+            self.setButtonTintColor(usageColor, for: button)
         }
     }
 
@@ -285,13 +293,20 @@ extension StatusItemController {
         // user setting we pass either "percent left" or "percent used".
         let showUsed = self.settings.usageBarsShowUsed
         let showBrandPercent = self.settings.menuBarShowsBrandIconWithPercent
+        let isAnimating = phase != nil && self.shouldAnimate(provider: provider)
+
+        let usageColor: NSColor? = {
+            guard self.settings.colorCodedIcons, !isAnimating else { return nil }
+            return UsageColorLevel.tintColor(for: snapshot?.primary?.usedPercent)
+        }()
 
         if showBrandPercent,
            let brand = ProviderBrandIcon.image(for: provider)
         {
             let displayText = self.menuBarDisplayText(for: provider, snapshot: snapshot)
             self.setButtonImage(brand, for: button)
             self.setButtonTitle(displayText, for: button)
+            self.setButtonTintColor(usageColor, for: button)
             return
         }
         var primary = showUsed ? snapshot?.primary?.usedPercent : snapshot?.primary?.remainingPercent
@@ -317,21 +332,21 @@ extension StatusItemController {
         var stale = self.store.isStale(provider: provider)
         var morphProgress: Double?
 
-        if let phase, self.shouldAnimate(provider: provider) {
+        if isAnimating {
             var pattern = self.animationPattern
             if provider == .claude, pattern == .unbraid {
                 pattern = .cylon
             }
             if pattern == .unbraid {
-                morphProgress = pattern.value(phase: phase) / 100
+                morphProgress = pattern.value(phase: phase!) / 100
                 primary = nil
                 weekly = nil
                 credits = nil
                 stale = false
             } else {
                 // Keep loading animation layout stable: IconRenderer switches layouts at `weeklyRemaining == 0`.
-                primary = max(pattern.value(phase: phase), Self.loadingPercentEpsilon)
-                weekly = max(pattern.value(phase: phase + pattern.secondaryOffset), Self.loadingPercentEpsilon)
+                primary = max(pattern.value(phase: phase!), Self.loadingPercentEpsilon)
+                weekly = max(pattern.value(phase: phase! + pattern.secondaryOffset), Self.loadingPercentEpsilon)
                 credits = nil
                 stale = false
             }
@@ -351,6 +366,7 @@ extension StatusItemController {
         if let morphProgress {
             let image = IconRenderer.makeMorphIcon(progress: morphProgress, style: style)
             self.setButtonImage(image, for: button)
+            self.setButtonTintColor(nil, for: button)
         } else {
             self.setButtonTitle(nil, for: button)
             let image = IconRenderer.makeIcon(
@@ -364,6 +380,7 @@ extension StatusItemController {
                 tilt: tilt,
                 statusIndicator: self.store.statusIndicator(for: provider))
             self.setButtonImage(image, for: button)
+            self.setButtonTintColor(usageColor, for: button)
         }
     }
 
@@ -372,6 +389,11 @@ extension StatusItemController {
         button.image = image
     }
 
+    private func setButtonTintColor(_ color: NSColor?, for button: NSStatusBarButton) {
+        if button.contentTintColor == color { return }
+        button.contentTintColor = color
+    }
+
     private func setButtonTitle(_ title: String?, for button: NSStatusBarButton) {
         let value = title ?? ""
         if button.title != value {
@@ -389,7 +411,8 @@ extension StatusItemController {
             provider: provider,
             percentWindow: self.menuBarPercentWindow(for: provider, snapshot: snapshot),
             paceWindow: snapshot?.secondary,
-            showUsed: self.settings.usageBarsShowUsed)
+            showUsed: self.settings.usageBarsShowUsed,
+            separatorStyle: self.settings.menuBarSeparatorStyle)
     }
 
     private func menuBarPercentWindow(for provider: UsageProvider, snapshot: UsageSnapshot?) -> RateWindow? {

Sources/CodexBar/UsageColorLevel.swift

@@ -0,0 +1,23 @@
+import AppKit
+
+enum UsageColorLevel: Sendable {
+    /// Returns a smoothly interpolated tint color based on usage percentage.
+    /// - 0-70%: green blending toward orange
+    /// - 70-90%: orange blending toward red
+    /// - >= 90%: red
+    /// - nil usage: returns nil (monochrome fallback)
+    static func tintColor(for usedPercent: Double?) -> NSColor? {
+        guard let pct = usedPercent else { return nil }
+        let clamped = min(max(pct, 0), 100)
+
+        if clamped < 70 {
+            let fraction = CGFloat(clamped / 70)
+            return NSColor.systemGreen.blended(withFraction: fraction, of: .systemOrange)
+        } else if clamped < 90 {
+            let fraction = CGFloat((clamped - 70) / 20)
+            return NSColor.systemOrange.blended(withFraction: fraction, of: .systemRed)
+        } else {
+            return .systemRed
+        }
+    }
+}