+ {/* Header */}
+
+
+ {/* Setup guide when nothing is configured */}
+ {neitherConfigured && (
+
+
+
+ Setup required
+
+ Create OAuth credentials and add them to{' '}
+
+ .env.local
+ {' '}
+ in the project root:
+
+
+{`# Google — console.cloud.google.com
+TASK_SYNC_PROVIDER_A=google
+TASK_SYNC_PROVIDER_B=microsoft
+TASK_SYNC_GOOGLE_CLIENT_ID=your-client-id
+TASK_SYNC_GOOGLE_CLIENT_SECRET=your-client-secret
+
+# Microsoft — portal.azure.com
+TASK_SYNC_MS_CLIENT_ID=your-client-id
+TASK_SYNC_MS_TENANT_ID=consumers`}
+
+
+ After saving, restart the dev server.
+
+
+
+ )}
+
+ {/* Provider cards */}
+
+
handleDisconnect('google')}
+ />
+ handleDisconnect('microsoft')}
+ />
+
+
+
+
+ {/* Sync section */}
+
+
+ Sync
+
+ {bothConnected
+ ? 'Both providers connected. Ready to sync.'
+ : 'Connect both providers to enable sync.'}
+
+
+
+ {/* Sync Now button */}
+
+
+
+
+ {/* Auto-sync polling selector */}
+ {bothConnected && (
+
+
+
+ Auto-sync
+
+
+ {POLL_OPTIONS.map((opt) => (
+
+ ))}
+
+ {pollMinutes > 0 && (
+
+ {syncing ? (
+ <>
+
+ Syncing…
+
+ ) : (
+ <>
+
+ Next sync in {formatCountdown(secondsLeft)}
+
+ )}
+
+ )}
+
+ Last synced:{' '}
+ {new Date(status.lastSync.at).toLocaleString(undefined, {
+ dateStyle: 'medium',
+ timeStyle: 'short',
+ })}
+ {' · '}
+ {status.lastSync.mappings} task
+ {status.lastSync.mappings !== 1 ? 's' : ''} tracked
+
+ )}
+
+ {lastReport && }
+
+
+
+ {/* Footer */}
+
+
+
+ Sync Report
+ {report.durationMs}ms
+
+
+
+
+
+ {report.counts.create ?? 0}
+
+
Created
+
+
+
+ {report.counts.update ?? 0}
+
+
Updated
+
+
+
+ {report.counts.delete ?? 0}
+
+
Deleted
+
+
+
+ {report.counts.noop ?? 0}
+
+
Unchanged
+
+
+
+ {report.errors.length > 0 && (
+
+
+
+ {report.errors.map((e, i) => (
+
+ {e.provider} ({e.stage}): {e.error}
+
+ ))}
+
+
+ )}
+
+ {report.actions.length > 0 && (
+
+
+ {total} action{total !== 1 ? 's' : ''} performed
+
+
+ {report.actions.map((a, i) => (
+ -
+ [{a.kind}] {a.target.provider}
+ {a.title ? ` "${a.title}"` : ''}
+
+ ))}
+
+
+ )}
+
+ 
+ 
+ 
+ 
+