browser-cookie-bridge 1.1.0 → 1.3.0

package/macos-app/Sources/BraveCodexSyncApp/BraveCodexSyncApp.swift

@@ -35,6 +35,7 @@ final class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {
   weak var model: SyncModel?
   private weak var mainWindow: NSWindow?
   private var statusItem: NSStatusItem?
+  private var syncMenuItem: NSMenuItem?
   private var updateMenuItem: NSMenuItem?
 
   func applicationDidFinishLaunching(_ notification: Notification) {
@@ -56,6 +57,12 @@ final class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {
       name: .updateStateChanged,
       object: nil
     )
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(syncStateChanged(_:)),
+      name: .syncStateChanged,
+      object: nil
+    )
   }
 
   func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool { false }
@@ -94,7 +101,7 @@ final class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {
       item.button?.imageScaling = .scaleProportionallyDown
       let menu = NSMenu()
       menu.addItem(withTitle: "Show Browser Cookie Bridge", action: #selector(showMainWindowAction), keyEquivalent: "")
-      menu.addItem(withTitle: "Sync now", action: #selector(syncNowAction), keyEquivalent: "")
+      syncMenuItem = menu.addItem(withTitle: "Sync now", action: #selector(syncNowAction), keyEquivalent: "")
       let updateItem = menu.addItem(withTitle: "Check for Updates…", action: #selector(updateAction), keyEquivalent: "")
       updateMenuItem = updateItem
       addProjectLinks(to: menu)
@@ -106,6 +113,7 @@ final class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {
     } else if let statusItem {
       NSStatusBar.system.removeStatusItem(statusItem)
       self.statusItem = nil
+      syncMenuItem = nil
       updateMenuItem = nil
     }
   }
@@ -116,7 +124,10 @@ final class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {
   }
 
   @objc private func showMainWindowAction() { showMainWindow() }
-  @objc private func syncNowAction() { model?.syncNow(showMenuBarAlert: true) }
+  @objc private func syncNowAction() {
+    if model?.isBrowserlessTarget == true, model?.isSyncing == true { model?.cancelSync() }
+    else { model?.syncNow(showMenuBarAlert: true) }
+  }
   @objc private func updateAction() {
     if model?.availableUpdateVersion != nil { model?.installAvailableUpdate() }
     else { model?.checkForUpdates(showAlert: true) }
@@ -161,6 +172,20 @@ final class AppDelegate: NSObject, NSApplicationDelegate, NSWindowDelegate {
     }
   }
 
+  @objc private func syncStateChanged(_ notification: Notification) {
+    guard let payload = notification.object as? SyncMenuState else { return }
+    if payload.canceling {
+      syncMenuItem?.title = "Canceling upload…"
+      syncMenuItem?.isEnabled = false
+    } else if payload.uploading {
+      syncMenuItem?.title = "Cancel upload"
+      syncMenuItem?.isEnabled = true
+    } else {
+      syncMenuItem?.title = "Sync now"
+      syncMenuItem?.isEnabled = true
+    }
+  }
+
   private func showMainWindow() {
     NSApp.setActivationPolicy(.regular)
     mainWindow?.makeKeyAndOrderFront(nil)
@@ -213,6 +238,9 @@ struct ContentView: View {
     .sheet(isPresented: $showingSetup) {
       ExtensionSetupSheet().environmentObject(model)
     }
+    .sheet(isPresented: $model.showingBrowserlessSetup) {
+      BrowserlessSetupSheet().environmentObject(model)
+    }
   }
 
   private var header: some View {
@@ -238,7 +266,10 @@ struct ContentView: View {
 
   private var footer: some View {
     HStack(spacing: 10) {
-      Label("Data stays on this Mac", systemImage: "lock.shield.fill")
+      Label(
+        model.isBrowserlessTarget ? "Cloud upload only when you choose it" : "Data stays on this Mac",
+        systemImage: model.isBrowserlessTarget ? "cloud.fill" : "lock.shield.fill"
+      )
         .foregroundStyle(.secondary)
       Spacer()
       if let version = model.availableUpdateVersion {
@@ -262,7 +293,7 @@ struct ContentView: View {
       .buttonStyle(.plain)
       .foregroundStyle(.secondary)
       .help("Refresh status")
-      if model.selectedTargetID != "codex" {
+      if model.selectedTargetID != "codex" && !model.isBrowserlessTarget {
         Button("Extension setup…") { showingSetup = true }
           .controlSize(.small)
       }
@@ -284,37 +315,65 @@ struct SyncPanel: View {
           TargetPicker()
         }
         Divider().opacity(0.65)
-        HStack(spacing: 12) {
-          VStack(alignment: .leading, spacing: 2) {
-            Text(model.primaryStatus)
-              .font(.system(size: 13, weight: .semibold))
-            Text(model.secondaryStatus)
-              .font(.system(size: 10.5))
-              .foregroundStyle(.secondary)
-              .lineLimit(2)
-              .help(model.secondaryStatus)
+        VStack(spacing: 8) {
+          HStack(spacing: 12) {
+            VStack(alignment: .leading, spacing: 2) {
+              Text(model.primaryStatus)
+                .font(.system(size: 13, weight: .semibold))
+              Text(model.secondaryStatus)
+                .font(.system(size: 10.5))
+                .foregroundStyle(.secondary)
+                .lineLimit(2)
+                .help(model.secondaryStatus)
+            }
+            Spacer()
+            Button {
+              if model.isBrowserlessTarget && model.isSyncing {
+                model.cancelSync()
+              } else if model.isBrowserlessTarget && !model.browserlessConfigured {
+                model.showingBrowserlessSetup = true
+              } else {
+                model.syncNow()
+              }
+            } label: {
+              HStack(spacing: 7) {
+                if model.isSyncing && !model.isBrowserlessTarget { ProgressView().controlSize(.small) }
+                else { Image(systemName: syncButtonIcon) }
+                Text(syncButtonTitle)
+              }
+              .frame(minWidth: model.syncBlocked ? 116 : 92)
+            }
+            .buttonStyle(.borderedProminent)
+            .tint(model.isBrowserlessTarget && model.isSyncing ? Theme.active : Theme.accent)
+            .disabled(
+              model.uploadCanceling
+                || (model.isSyncing && !model.isBrowserlessTarget)
+                || (!model.isSyncing && model.syncBlocked && !(model.isBrowserlessTarget && !model.browserlessConfigured))
+            )
+            .keyboardShortcut(.return, modifiers: .command)
           }
-          Spacer()
-          Button { model.syncNow() } label: {
-            HStack(spacing: 7) {
-              if model.isSyncing { ProgressView().controlSize(.small) }
-              else { Image(systemName: model.codexBlocked ? "xmark.circle.fill" : "arrow.triangle.2.circlepath") }
-              Text(model.isSyncing ? "Syncing…" : (model.codexBlocked ? "Close Codex first" : "Sync now"))
+          if model.isBrowserlessTarget && model.isSyncing {
+            HStack(spacing: 9) {
+              ProgressView(value: model.uploadProgress, total: 1)
+                .progressViewStyle(.linear)
+                .tint(Theme.active)
+              Text(model.formattedUploadElapsed)
+                .font(.system(size: 9.5, weight: .semibold, design: .monospaced))
+                .foregroundStyle(.secondary)
+                .frame(width: 34, alignment: .trailing)
             }
-            .frame(minWidth: model.codexBlocked ? 116 : 92)
+            .accessibilityElement(children: .combine)
+            .accessibilityLabel("Browserless upload progress")
+            .accessibilityValue("\(Int(model.uploadProgress * 100)) percent, \(model.formattedUploadElapsed) elapsed")
           }
-          .buttonStyle(.borderedProminent)
-          .tint(Theme.accent)
-          .disabled(model.isSyncing || model.codexBlocked)
-          .keyboardShortcut(.return, modifiers: .command)
         }
-        .padding(model.codexBlocked ? 7 : 0)
+        .padding(model.syncBlocked ? 7 : 0)
         .background(
-          model.codexBlocked ? Theme.active.opacity(0.10) : Color.clear,
+          model.syncBlocked ? Theme.active.opacity(0.10) : Color.clear,
           in: RoundedRectangle(cornerRadius: 9, style: .continuous)
         )
         .overlay {
-          if model.codexBlocked {
+          if model.syncBlocked {
             RoundedRectangle(cornerRadius: 9, style: .continuous)
               .stroke(Theme.active.opacity(0.38), lineWidth: 1)
           }
@@ -323,6 +382,23 @@ struct SyncPanel: View {
     }
   }
 
+  private var syncButtonTitle: String {
+    if model.isBrowserlessTarget && model.uploadCanceling { return "Canceling…" }
+    if model.isBrowserlessTarget && model.isSyncing { return "Cancel upload" }
+    if model.isSyncing { return "Syncing…" }
+    if model.codexBlocked { return "Close Codex first" }
+    if model.isBrowserlessTarget && !model.browserlessConfigured { return "Connect Browserless" }
+    if model.isBrowserlessTarget && model.selectedSourceID == "comet" { return "Choose another browser" }
+    if model.isBrowserlessTarget && model.sourceBrowserRunning { return "Close \(model.selectedBrowser.name) first" }
+    return model.isBrowserlessTarget ? "Upload now" : "Sync now"
+  }
+
+  private var syncButtonIcon: String {
+    if model.isBrowserlessTarget && model.isSyncing { return "xmark.circle.fill" }
+    if model.syncBlocked { return model.isBrowserlessTarget && !model.browserlessConfigured ? "key.fill" : "xmark.circle.fill" }
+    return model.isBrowserlessTarget ? "icloud.and.arrow.up.fill" : "arrow.triangle.2.circlepath"
+  }
+
 }
 
 struct SourcePicker: View {
@@ -378,7 +454,12 @@ struct TargetPicker: View {
       VStack(spacing: 5) {
         HStack(spacing: 5) {
           ForEach(Array(model.browsers.prefix(4))) { browser in targetButton(browser) }
-          Color.clear.frame(width: 19, height: 40)
+          EndpointButton(
+            icon: model.browserlessIcon,
+            name: "Browserless Cloud",
+            selected: model.selectedTargetID == "browserless",
+            disabled: model.isWorking || model.isSyncing || model.selectedSourceID == "comet"
+          ) { model.selectTarget("browserless") }
         }
         HStack(spacing: 5) {
           ForEach(Array(model.browsers.dropFirst(4))) { browser in targetButton(browser) }
@@ -449,44 +530,84 @@ struct PreferencesPanel: View {
     Surface(padding: 0) {
       VStack(spacing: 0) {
         SectionLabel(title: "Sync data", detail: "Saved automatically")
-        PreferenceRow(icon: "network", color: Theme.accent, title: "Cookies", detail: "Site sessions and sign-ins") {
-          Toggle("", isOn: Binding(get: { model.cookiesEnabled }, set: { model.setCookiesEnabled($0) }))
-            .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
-        }
-        RowDivider()
-        PreferenceRow(icon: "clock.arrow.circlepath", color: Theme.accent, title: "History URLs", detail: "Original visit times are not preserved") {
-          Toggle("", isOn: Binding(get: { model.historyEnabled }, set: { model.setHistoryEnabled($0) }))
-            .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
-        }
-        RowDivider()
-        PreferenceRow(icon: "key.slash", color: .secondary, title: "Passwords", detail: "Browser extensions cannot access passwords", muted: true) {
-          Text("Unavailable")
-            .font(.system(size: 10, weight: .semibold))
-            .foregroundStyle(.tertiary)
-            .padding(.horizontal, 8).padding(.vertical, 4)
-            .background(Color.secondary.opacity(0.08), in: Capsule())
+        if model.isBrowserlessTarget {
+          PreferenceRow(icon: "person.crop.circle.badge.checkmark", color: Theme.accent, title: "Authenticated state", detail: "Cookies, local storage, and IndexedDB") {
+            FixedBadge("Included")
+          }
+          RowDivider()
+          PreferenceRow(icon: "clock.arrow.circlepath", color: .secondary, title: "History URLs", detail: "Not included in Browserless profiles", muted: true) {
+            FixedBadge("Excluded")
+          }
+          RowDivider()
+          PreferenceRow(icon: "key.slash", color: .secondary, title: "Saved passwords", detail: "Never read or uploaded", muted: true) {
+            FixedBadge("Excluded")
+          }
+          RowDivider()
+          PreferenceRow(icon: "cloud.fill", color: Theme.accent, title: "Browserless connection", detail: model.browserlessConfigured ? "\(model.browserlessProfileName) · \(model.browserlessRegion.uppercased()) · token in Keychain" : "Not connected") {
+            Button(model.browserlessConfigured ? "Configure…" : "Connect…") {
+              model.showingBrowserlessSetup = true
+            }
+            .controlSize(.small)
+          }
+          RowDivider()
+          PreferenceRow(icon: "externaldrive.badge.magnifyingglass", color: Theme.accent, title: "Local profile preflight", detail: browserlessPreflightDetail) {
+            HStack(spacing: 7) {
+              ProfileSizeBadge(severity: model.browserlessAssessment?.severity, scanning: model.isInspectingBrowserlessProfile)
+              Button {
+                model.refreshBrowserlessPreflight(force: true)
+              } label: {
+                Image(systemName: "arrow.clockwise")
+              }
+              .buttonStyle(.plain)
+              .foregroundStyle(.secondary)
+              .disabled(model.isInspectingBrowserlessProfile || model.isSyncing)
+              .help("Rescan local profile size")
+            }
+          }
+        } else {
+          PreferenceRow(icon: "network", color: Theme.accent, title: "Cookies", detail: "Site sessions and sign-ins") {
+            Toggle("", isOn: Binding(get: { model.cookiesEnabled }, set: { model.setCookiesEnabled($0) }))
+              .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
+          }
+          RowDivider()
+          PreferenceRow(icon: "clock.arrow.circlepath", color: Theme.accent, title: "History URLs", detail: "Original visit times are not preserved") {
+            Toggle("", isOn: Binding(get: { model.historyEnabled }, set: { model.setHistoryEnabled($0) }))
+              .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
+          }
+          RowDivider()
+          PreferenceRow(icon: "key.slash", color: .secondary, title: "Passwords", detail: "Browser extensions cannot access passwords", muted: true) {
+            FixedBadge("Unavailable")
+          }
         }
 
         SectionLabel(title: "Automation", detail: "Runs in the background", separated: true)
-        PreferenceRow(icon: "clock.badge.checkmark", color: Theme.accent, title: "Daily sync", detail: model.dailyEnabled ? "At the selected local time" : "Off") {
-          HStack(spacing: 8) {
-            DatePicker("", selection: $model.scheduleTime, displayedComponents: .hourAndMinute)
-              .labelsHidden()
-              .datePickerStyle(.field)
-              .controlSize(.regular)
-              .disabled(!model.dailyEnabled || model.isWorking)
-              .frame(width: 112, alignment: .center)
-              .onChange(of: model.scheduleTime) { _ in
-                if model.dailyEnabled && !model.isWorking { model.saveSchedule() }
-              }
-            Toggle("", isOn: Binding(get: { model.dailyEnabled }, set: { model.setDailyEnabled($0) }))
-              .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
+        PreferenceRow(icon: "clock.badge.checkmark", color: Theme.accent, title: "Daily sync", detail: model.isBrowserlessTarget ? "Unavailable for cloud uploads" : (model.dailyEnabled ? "At the selected local time" : "Off")) {
+          if model.isBrowserlessTarget {
+            FixedBadge("Manual only")
+          } else {
+            HStack(spacing: 8) {
+              DatePicker("", selection: $model.scheduleTime, displayedComponents: .hourAndMinute)
+                .labelsHidden()
+                .datePickerStyle(.field)
+                .controlSize(.regular)
+                .disabled(!model.dailyEnabled || model.isWorking)
+                .frame(width: 112, alignment: .center)
+                .onChange(of: model.scheduleTime) { _ in
+                  if model.dailyEnabled && !model.isWorking { model.saveSchedule() }
+                }
+              Toggle("", isOn: Binding(get: { model.dailyEnabled }, set: { model.setDailyEnabled($0) }))
+                .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
+            }
           }
         }
         RowDivider()
-        PreferenceRow(icon: "sunrise.fill", color: Theme.accent, title: "Sync at login", detail: model.loginSyncEnabled ? "Once whenever you sign in" : "Off") {
-          Toggle("", isOn: Binding(get: { model.loginSyncEnabled }, set: { model.setLoginSyncEnabled($0) }))
-            .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
+        PreferenceRow(icon: "sunrise.fill", color: Theme.accent, title: "Sync at login", detail: model.isBrowserlessTarget ? "Unavailable for cloud uploads" : (model.loginSyncEnabled ? "Once whenever you sign in" : "Off")) {
+          if model.isBrowserlessTarget {
+            FixedBadge("Manual only")
+          } else {
+            Toggle("", isOn: Binding(get: { model.loginSyncEnabled }, set: { model.setLoginSyncEnabled($0) }))
+              .labelsHidden().toggleStyle(.switch).tint(Theme.active).disabled(model.isWorking)
+          }
         }
         RowDivider()
         PreferenceRow(icon: "power", color: Theme.accent, title: "Open at login", detail: "Start the app after you sign in") {
@@ -523,6 +644,165 @@ struct PreferencesPanel: View {
       }
     }
   }
+
+  private var browserlessPreflightDetail: String {
+    if model.isInspectingBrowserlessProfile { return "Measuring profile, local storage, and IndexedDB without reading their contents" }
+    if let assessment = model.browserlessAssessment {
+      return assessment.temporarySpaceWarning
+        ? "\(assessment.summary) · free space may be too low for the temporary copy"
+        : assessment.summary
+    }
+    return "Calculated locally before upload; Browserless cloud artifacts are capped at 2 MB"
+  }
+}
+
+struct FixedBadge: View {
+  let title: String
+
+  init(_ title: String) { self.title = title }
+
+  var body: some View {
+    Text(title)
+      .font(.system(size: 10, weight: .semibold))
+      .foregroundStyle(.tertiary)
+      .padding(.horizontal, 8).padding(.vertical, 4)
+      .background(Color.secondary.opacity(0.08), in: Capsule())
+  }
+}
+
+struct ProfileSizeBadge: View {
+  let severity: String?
+  let scanning: Bool
+
+  var body: some View {
+    Text(label)
+      .font(.system(size: 9.5, weight: .semibold))
+      .foregroundStyle(color)
+      .padding(.horizontal, 8).padding(.vertical, 4)
+      .background(color.opacity(0.10), in: Capsule())
+  }
+
+  private var label: String {
+    if scanning { return "Scanning" }
+    switch severity {
+    case "elevated": return "Large"
+    case "high": return "Very large"
+    case "extreme": return "Extreme"
+    case "normal": return "Ready"
+    default: return "Not scanned"
+    }
+  }
+
+  private var color: Color {
+    if scanning { return .secondary }
+    switch severity {
+    case "elevated": return .orange
+    case "high", "extreme": return Theme.active
+    case "normal": return Theme.accent
+    default: return .secondary
+    }
+  }
+}
+
+struct BrowserlessSetupSheet: View {
+  @EnvironmentObject private var model: SyncModel
+  @Environment(\.dismiss) private var dismiss
+  @State private var token = ""
+  @State private var profileName = "browser-cookie-bridge"
+  @State private var region = "sfo"
+  @State private var onlyDomains = ""
+  @State private var cloudConsent = false
+
+  var body: some View {
+    VStack(alignment: .leading, spacing: 17) {
+      HStack(alignment: .top, spacing: 12) {
+        Image(nsImage: model.browserlessIcon)
+          .resizable()
+          .scaledToFit()
+          .frame(width: 24, height: 24)
+          .frame(width: 40, height: 40)
+          .background(Theme.accent.opacity(0.11), in: RoundedRectangle(cornerRadius: 11, style: .continuous))
+        VStack(alignment: .leading, spacing: 3) {
+          Text("Connect Browserless Cloud")
+            .font(.system(size: 18, weight: .bold, design: .rounded))
+          Text("Optional authenticated-profile upload")
+            .font(.system(size: 11.5)).foregroundStyle(.secondary)
+        }
+        Spacer()
+        FixedBadge(model.browserlessConfigured ? "Connected" : "Not connected")
+      }
+
+      VStack(alignment: .leading, spacing: 12) {
+        LabeledContent("API token") {
+          SecureField(model.browserlessConfigured ? "Saved in Keychain — leave blank to keep" : "Browserless API token", text: $token)
+            .textFieldStyle(.roundedBorder)
+            .frame(width: 270)
+        }
+        LabeledContent("Cloud profile") {
+          TextField("browser-cookie-bridge", text: $profileName)
+            .textFieldStyle(.roundedBorder)
+            .frame(width: 270)
+        }
+        LabeledContent("Region") {
+          Picker("", selection: $region) {
+            Text("San Francisco (SFO)").tag("sfo")
+            Text("London (LON)").tag("lon")
+            Text("Amsterdam (AMS)").tag("ams")
+          }
+          .labelsHidden()
+          .frame(width: 270)
+        }
+        LabeledContent("Only domains") {
+          TextField("Optional: example.com, app.example.com", text: $onlyDomains)
+            .textFieldStyle(.roundedBorder)
+            .frame(width: 270)
+        }
+      }
+      .font(.system(size: 11.5, weight: .medium))
+      .padding(14)
+      .background(Color(nsColor: .controlBackgroundColor).opacity(0.72), in: RoundedRectangle(cornerRadius: 12, style: .continuous))
+      .overlay(RoundedRectangle(cornerRadius: 12, style: .continuous).stroke(Color.primary.opacity(0.08)))
+
+      HStack(alignment: .top, spacing: 10) {
+        Image(systemName: "exclamationmark.cloud.fill")
+          .foregroundStyle(Theme.active)
+        Text("This destination is not local. Clicking Upload sends cookies, local storage, and IndexedDB from a temporary profile copy to Browserless. Upload only profiles you are authorized to share; use the domain allowlist for sensitive profiles. Background and login sync never perform cloud uploads. CLI telemetry is disabled.")
+          .font(.system(size: 10.5))
+          .foregroundStyle(.secondary)
+          .fixedSize(horizontal: false, vertical: true)
+      }
+      .padding(12)
+      .background(Theme.active.opacity(0.08), in: RoundedRectangle(cornerRadius: 10, style: .continuous))
+
+      Toggle("I understand the upload contents, have authority to share them, and accept responsibility for the Browserless copy.", isOn: $cloudConsent)
+        .toggleStyle(.checkbox)
+        .font(.system(size: 10.5, weight: .medium))
+
+      HStack {
+        Link("Get a Browserless API token", destination: URL(string: "https://www.browserless.io/account")!)
+          .font(.system(size: 10.5, weight: .medium))
+        Link("Privacy", destination: URL(string: "https://www.browserless.io/privacy-policy")!)
+          .font(.system(size: 10.5, weight: .medium))
+        if model.browserlessConfigured {
+          Button("Disconnect", role: .destructive) { model.disconnectBrowserless() }
+        }
+        Spacer()
+        Button("Cancel") { dismiss() }
+        Button("Save connection") {
+          model.saveBrowserlessSettings(token: token, profileName: profileName, region: region, onlyDomains: onlyDomains)
+        }
+        .keyboardShortcut(.defaultAction)
+        .disabled(profileName.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty || !cloudConsent)
+      }
+    }
+    .padding(22)
+    .frame(width: 520)
+    .onAppear {
+      profileName = model.browserlessProfileName
+      region = model.browserlessRegion
+      onlyDomains = model.browserlessOnlyDomains
+    }
+  }
 }
 
 struct ExtensionSetupSheet: View {
@@ -733,11 +1013,11 @@ struct StatusIndicator: View {
   }
 
   private var label: String {
-    switch state { case .ready: "Ready"; case .syncing: "Syncing"; case .success: "Synced"; case .warning: "Partial"; case .error: "Needs action" }
+    switch state { case .ready: "Ready"; case .syncing: "Syncing"; case .success: "Synced"; case .canceled: "Canceled"; case .warning: "Partial"; case .error: "Needs action" }
   }
 
   private var color: Color {
-    switch state { case .ready, .syncing, .success: Theme.accent; case .warning: .orange; case .error: .red }
+    switch state { case .ready, .syncing, .success: Theme.accent; case .canceled: .secondary; case .warning: .orange; case .error: .red }
   }
 }