[Init] Initial commit - NetMesh terminal manager

components/cloud-sync/CloudSyncDialogs.tsx

@@ -0,0 +1,940 @@
+import React, { type Dispatch, type MutableRefObject, type SetStateAction } from 'react';
+import { AlertTriangle, Cloud, Database, Download, History, Key, Loader2, ShieldCheck, Trash2 } from 'lucide-react';
+import type { CloudProvider, ConflictResolution, SyncPayload, SyncResult, WebDAVAuthType } from '../../domain/sync';
+import type { ShrinkFinding } from '../../domain/syncGuards';
+import { stripSyncPayloadEncryptedCredentials } from '../../domain/credentials';
+import type { useCloudSync } from '../../application/state/useCloudSync';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import { toast } from '../ui/toast';
+import { ConflictModal, GitHubDeviceFlowModal } from './CloudSyncControls';
+
+type SyncController = ReturnType<typeof useCloudSync>;
+type TextValues = Record<string, string | number>;
+type Translate = (key: string, values?: TextValues) => string;
+type StringSetter = Dispatch<SetStateAction<string>>;
+type BooleanSetter = Dispatch<SetStateAction<boolean>>;
+
+type HistoryPreview = {
+  sha: string;
+  payload: SyncPayload;
+  preview: {
+    hostCount: number;
+    keyCount: number;
+    snippetCount: number;
+    noteCount: number;
+    identityCount: number;
+    portForwardingRuleCount: number;
+  };
+  deviceName?: string;
+  version?: number;
+} | null;
+
+interface CloudSyncDialogsProps {
+  t: Translate;
+  sync: SyncController;
+  showGitHubModal: boolean;
+  gitHubUserCode: string;
+  gitHubVerificationUri: string;
+  isPollingGitHub: boolean;
+  activeGitHubAttemptIdRef: MutableRefObject<number | null>;
+  setShowGitHubModal: BooleanSetter;
+  setIsPollingGitHub: BooleanSetter;
+  endPendingConnect: (provider: CloudProvider) => void;
+  showConflictModal: boolean;
+  setShowConflictModal: BooleanSetter;
+  handleResolveConflict: (resolution: ConflictResolution) => Promise<void>;
+  showHistoryModal: boolean;
+  setShowHistoryModal: BooleanSetter;
+  historyError: string | null;
+  historyLoading: boolean;
+  historyPreview: HistoryPreview;
+  setHistoryPreview: Dispatch<SetStateAction<HistoryPreview>>;
+  historyPreviewLoading: boolean;
+  historyRevisions: Array<{ version: string; date: Date }>;
+  handlePreviewRevision: (sha: string) => Promise<void>;
+  handleRestoreRevision: () => Promise<void>;
+  showWebdavDialog: boolean;
+  setShowWebdavDialog: BooleanSetter;
+  webdavEndpoint: string;
+  setWebdavEndpoint: StringSetter;
+  webdavAuthType: WebDAVAuthType;
+  setWebdavAuthType: Dispatch<SetStateAction<WebDAVAuthType>>;
+  webdavUsername: string;
+  setWebdavUsername: StringSetter;
+  webdavPassword: string;
+  setWebdavPassword: StringSetter;
+  webdavToken: string;
+  setWebdavToken: StringSetter;
+  showWebdavSecret: boolean;
+  setShowWebdavSecret: BooleanSetter;
+  webdavAllowInsecure: boolean;
+  setWebdavAllowInsecure: BooleanSetter;
+  webdavError: string | null;
+  webdavErrorDetail: string | null;
+  isSavingWebdav: boolean;
+  handleSaveWebdav: () => Promise<void>;
+  showS3Dialog: boolean;
+  setShowS3Dialog: BooleanSetter;
+  s3Endpoint: string;
+  setS3Endpoint: StringSetter;
+  s3Region: string;
+  setS3Region: StringSetter;
+  s3Bucket: string;
+  setS3Bucket: StringSetter;
+  s3AccessKeyId: string;
+  setS3AccessKeyId: StringSetter;
+  s3SecretAccessKey: string;
+  setS3SecretAccessKey: StringSetter;
+  s3SessionToken: string;
+  setS3SessionToken: StringSetter;
+  s3Prefix: string;
+  setS3Prefix: StringSetter;
+  s3ForcePathStyle: boolean;
+  setS3ForcePathStyle: BooleanSetter;
+  s3AllowInsecure: boolean;
+  setS3AllowInsecure: BooleanSetter;
+  showS3Secret: boolean;
+  setShowS3Secret: BooleanSetter;
+  s3Error: string | null;
+  s3ErrorDetail: string | null;
+  isSavingS3: boolean;
+  handleSaveS3: () => Promise<void>;
+  showChangeKeyDialog: boolean;
+  setShowChangeKeyDialog: BooleanSetter;
+  currentMasterKey: string;
+  setCurrentMasterKey: StringSetter;
+  newMasterKey: string;
+  setNewMasterKey: StringSetter;
+  confirmNewMasterKey: string;
+  setConfirmNewMasterKey: StringSetter;
+  showMasterKey: boolean;
+  setShowMasterKey: BooleanSetter;
+  changeKeyError: string | null;
+  setChangeKeyError: Dispatch<SetStateAction<string | null>>;
+  isChangingKey: boolean;
+  setIsChangingKey: BooleanSetter;
+  showUnlockDialog: boolean;
+  setShowUnlockDialog: BooleanSetter;
+  unlockMasterKey: string;
+  setUnlockMasterKey: StringSetter;
+  showUnlockMasterKey: boolean;
+  setShowUnlockMasterKey: BooleanSetter;
+  unlockError: string | null;
+  setUnlockError: Dispatch<SetStateAction<string | null>>;
+  isUnlocking: boolean;
+  setIsUnlocking: BooleanSetter;
+  showClearLocalDialog: boolean;
+  setShowClearLocalDialog: BooleanSetter;
+  onBuildPayload: () => SyncPayload | Promise<SyncPayload>;
+  onApplyPayload: (payload: SyncPayload) => void | Promise<void>;
+  onApplyConvergentPayload: (
+    payload: SyncPayload,
+    commitReplica: () => Promise<void>,
+  ) => Promise<void>;
+  onClearLocalData?: () => void;
+  ensureSyncablePayload: (payload: SyncPayload) => boolean;
+  showForcePushConfirm: boolean;
+  setShowForcePushConfirm: BooleanSetter;
+  blockedFinding: Extract<ShrinkFinding, { suspicious: true }> | null;
+  setBlockedFinding: Dispatch<SetStateAction<Extract<ShrinkFinding, { suspicious: true }> | null>>;
+}
+
+export const CloudSyncDialogs: React.FC<CloudSyncDialogsProps> = ({
+  t,
+  sync,
+  showGitHubModal,
+  gitHubUserCode,
+  gitHubVerificationUri,
+  isPollingGitHub,
+  activeGitHubAttemptIdRef,
+  setShowGitHubModal,
+  setIsPollingGitHub,
+  endPendingConnect,
+  showConflictModal,
+  setShowConflictModal,
+  handleResolveConflict,
+  showHistoryModal,
+  setShowHistoryModal,
+  historyError,
+  historyLoading,
+  historyPreview,
+  setHistoryPreview,
+  historyPreviewLoading,
+  historyRevisions,
+  handlePreviewRevision,
+  handleRestoreRevision,
+  showWebdavDialog,
+  setShowWebdavDialog,
+  webdavEndpoint,
+  setWebdavEndpoint,
+  webdavAuthType,
+  setWebdavAuthType,
+  webdavUsername,
+  setWebdavUsername,
+  webdavPassword,
+  setWebdavPassword,
+  webdavToken,
+  setWebdavToken,
+  showWebdavSecret,
+  setShowWebdavSecret,
+  webdavAllowInsecure,
+  setWebdavAllowInsecure,
+  webdavError,
+  webdavErrorDetail,
+  isSavingWebdav,
+  handleSaveWebdav,
+  showS3Dialog,
+  setShowS3Dialog,
+  s3Endpoint,
+  setS3Endpoint,
+  s3Region,
+  setS3Region,
+  s3Bucket,
+  setS3Bucket,
+  s3AccessKeyId,
+  setS3AccessKeyId,
+  s3SecretAccessKey,
+  setS3SecretAccessKey,
+  s3SessionToken,
+  setS3SessionToken,
+  s3Prefix,
+  setS3Prefix,
+  s3ForcePathStyle,
+  setS3ForcePathStyle,
+  s3AllowInsecure,
+  setS3AllowInsecure,
+  showS3Secret,
+  setShowS3Secret,
+  s3Error,
+  s3ErrorDetail,
+  isSavingS3,
+  handleSaveS3,
+  showChangeKeyDialog,
+  setShowChangeKeyDialog,
+  currentMasterKey,
+  setCurrentMasterKey,
+  newMasterKey,
+  setNewMasterKey,
+  confirmNewMasterKey,
+  setConfirmNewMasterKey,
+  showMasterKey,
+  setShowMasterKey,
+  changeKeyError,
+  setChangeKeyError,
+  isChangingKey,
+  setIsChangingKey,
+  showUnlockDialog,
+  setShowUnlockDialog,
+  unlockMasterKey,
+  setUnlockMasterKey,
+  showUnlockMasterKey,
+  setShowUnlockMasterKey,
+  unlockError,
+  setUnlockError,
+  isUnlocking,
+  setIsUnlocking,
+  showClearLocalDialog,
+  setShowClearLocalDialog,
+  onBuildPayload,
+  onApplyPayload,
+  onApplyConvergentPayload,
+  onClearLocalData,
+  ensureSyncablePayload,
+  showForcePushConfirm,
+  setShowForcePushConfirm,
+  blockedFinding,
+  setBlockedFinding
+}) => (
+  <>
+            {/* Modals */}
+            <GitHubDeviceFlowModal
+                isOpen={showGitHubModal}
+                userCode={gitHubUserCode}
+                verificationUri={gitHubVerificationUri}
+                isPolling={isPollingGitHub}
+                onClose={() => {
+                    activeGitHubAttemptIdRef.current = null;
+                    setShowGitHubModal(false);
+                    setIsPollingGitHub(false);
+                    endPendingConnect('github');
+                    sync.cancelOAuthConnect();
+                }}
+            />
+
+            <ConflictModal
+                open={showConflictModal}
+                conflict={sync.currentConflict}
+                onResolve={handleResolveConflict}
+                onClose={() => setShowConflictModal(false)}
+            />
+
+            {/* Gist Revision History Modal (#679) */}
+            <Dialog open={showHistoryModal} onOpenChange={setShowHistoryModal}>
+                <DialogContent className="sm:max-w-[520px] max-h-[80vh] overflow-hidden flex flex-col z-[70]">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2">
+                            <History size={18} />
+                            {t('cloudSync.revisionHistory.title')}
+                        </DialogTitle>
+                        <DialogDescription>{t('cloudSync.revisionHistory.description')}</DialogDescription>
+                    </DialogHeader>
+
+                    {historyError && (
+                        <div className="rounded-lg bg-red-500/10 border border-red-500/20 p-3 text-sm text-red-500">
+                            {historyError}
+                        </div>
+                    )}
+
+                    {historyLoading ? (
+                        <div className="flex items-center justify-center py-8">
+                            <Loader2 size={24} className="animate-spin text-muted-foreground" />
+                        </div>
+                    ) : historyPreview ? (
+                        // Preview of a selected revision
+                        <div className="space-y-4 overflow-y-auto flex-1 min-h-0">
+                            <div className="rounded-lg border p-4 space-y-2">
+                                <div className="text-sm font-medium">{t('cloudSync.revisionHistory.revisionPreview')}</div>
+                                {historyPreview.deviceName && (
+                                    <div className="text-xs text-muted-foreground">
+                                        {t('cloudSync.revisionHistory.device')}: {historyPreview.deviceName}
+                                        {historyPreview.version != null && ` · v${historyPreview.version}`}
+                                    </div>
+                                )}
+                                <div className="grid grid-cols-2 gap-2 text-sm">
+                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
+                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.hosts')}</span>
+                                        <span className="font-medium">{historyPreview.preview.hostCount}</span>
+                                    </div>
+                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
+                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.keys')}</span>
+                                        <span className="font-medium">{historyPreview.preview.keyCount}</span>
+                                    </div>
+                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
+                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.snippets')}</span>
+                                        <span className="font-medium">{historyPreview.preview.snippetCount}</span>
+                                    </div>
+                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
+                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.notes')}</span>
+                                        <span className="font-medium">{historyPreview.preview.noteCount}</span>
+                                    </div>
+                                    <div className="flex justify-between px-2 py-1 bg-muted/30 rounded">
+                                        <span className="text-muted-foreground">{t('cloudSync.revisionHistory.identities')}</span>
+                                        <span className="font-medium">{historyPreview.preview.identityCount}</span>
+                                    </div>
+                                </div>
+                            </div>
+                            <DialogFooter className="gap-2">
+                                <Button variant="outline" onClick={() => setHistoryPreview(null)}>
+                                    {t('common.back')}
+                                </Button>
+                                <Button onClick={handleRestoreRevision} className="gap-1">
+                                    <Download size={14} />
+                                    {t('cloudSync.revisionHistory.restoreButton')}
+                                </Button>
+                            </DialogFooter>
+                        </div>
+                    ) : (
+                        // Revision list
+                        <div className="overflow-y-auto flex-1 min-h-0 -mx-1">
+                            {historyRevisions.length === 0 ? (
+                                <div className="text-sm text-muted-foreground text-center py-8">
+                                    {t('cloudSync.revisionHistory.empty')}
+                                </div>
+                            ) : (
+                                <div className="space-y-1 px-1">
+                                    {historyRevisions.map((rev, index) => (
+                                        <button
+                                            key={rev.version}
+                                            onClick={() => handlePreviewRevision(rev.version)}
+                                            disabled={historyPreviewLoading}
+                                            className={cn(
+                                                "w-full flex items-center justify-between p-2.5 rounded-lg text-left text-sm transition-colors",
+                                                "hover:bg-muted/50 border border-transparent hover:border-border",
+                                                index === 0 && "bg-primary/5 border-primary/20",
+                                            )}
+                                        >
+                                            <div>
+                                                <div className="font-medium">
+                                                    {index === 0 ? t('cloudSync.revisionHistory.current') : `${t('cloudSync.revisionHistory.revision')} #${historyRevisions.length - index}`}
+                                                </div>
+                                                <div className="text-xs text-muted-foreground">
+                                                    {rev.date.toLocaleString()}
+                                                </div>
+                                            </div>
+                                            <div className="text-xs text-muted-foreground font-mono">
+                                                {rev.version.slice(0, 7)}
+                                            </div>
+                                        </button>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    {historyPreviewLoading && (
+                        <div className="absolute inset-0 bg-background/50 flex items-center justify-center rounded-lg">
+                            <Loader2 size={24} className="animate-spin" />
+                        </div>
+                    )}
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={showWebdavDialog} onOpenChange={setShowWebdavDialog}>
+                <DialogContent className="sm:max-w-[460px] max-h-[80vh] overflow-y-auto z-[70]">
+                    <DialogHeader>
+                        <DialogTitle>{t('cloudSync.webdav.title')}</DialogTitle>
+                        <DialogDescription>{t('cloudSync.webdav.desc')}</DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.webdav.endpoint')}</Label>
+                            <Input
+                                value={webdavEndpoint}
+                                onChange={(e) => setWebdavEndpoint(e.target.value)}
+                                placeholder="https://dav.example.com/remote.php/webdav/"
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.webdav.authType')}</Label>
+                            <Select value={webdavAuthType} onValueChange={(value) => setWebdavAuthType(value as WebDAVAuthType)}>
+                                <SelectTrigger>
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="basic">{t('cloudSync.webdav.auth.basic')}</SelectItem>
+                                    <SelectItem value="digest">{t('cloudSync.webdav.auth.digest')}</SelectItem>
+                                    <SelectItem value="token">{t('cloudSync.webdav.auth.token')}</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {webdavAuthType !== 'token' ? (
+                            <>
+                                <div className="space-y-2">
+                                    <Label>{t('cloudSync.webdav.username')}</Label>
+                                    <Input
+                                        value={webdavUsername}
+                                        onChange={(e) => setWebdavUsername(e.target.value)}
+                                        autoComplete="username"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <Label>{t('cloudSync.webdav.password')}</Label>
+                                    <Input
+                                        type={showWebdavSecret ? 'text' : 'password'}
+                                        value={webdavPassword}
+                                        onChange={(e) => setWebdavPassword(e.target.value)}
+                                        autoComplete="current-password"
+                                    />
+                                </div>
+                            </>
+                        ) : (
+                            <div className="space-y-2">
+                                <Label>{t('cloudSync.webdav.token')}</Label>
+                                <Input
+                                    type={showWebdavSecret ? 'text' : 'password'}
+                                    value={webdavToken}
+                                    onChange={(e) => setWebdavToken(e.target.value)}
+                                />
+                            </div>
+                        )}
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={showWebdavSecret}
+                                onChange={(e) => setShowWebdavSecret(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.webdav.showSecret')}
+                        </label>
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={webdavAllowInsecure}
+                                onChange={(e) => setWebdavAllowInsecure(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.webdav.allowInsecure')}
+                        </label>
+
+                        {webdavError && (
+                            <p className="text-sm text-red-500">{webdavError}</p>
+                        )}
+                        {webdavErrorDetail && (
+                            <pre className="text-xs text-red-400 whitespace-pre-wrap rounded-md border border-red-500/30 bg-red-500/10 p-2">
+                                {webdavErrorDetail}
+                            </pre>
+                        )}
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setShowWebdavDialog(false)}
+                            disabled={isSavingWebdav}
+                        >
+                            {t('common.cancel')}
+                        </Button>
+                        <Button
+                            onClick={handleSaveWebdav}
+                            disabled={isSavingWebdav}
+                            className="gap-2"
+                        >
+                            {isSavingWebdav ? <Loader2 size={16} className="animate-spin" /> : <Cloud size={16} />}
+                            {t('common.save')}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={showS3Dialog} onOpenChange={setShowS3Dialog}>
+                <DialogContent className="sm:max-w-[520px] max-h-[80vh] overflow-y-auto z-[70]">
+                    <DialogHeader>
+                        <DialogTitle>{t('cloudSync.s3.title')}</DialogTitle>
+                        <DialogDescription>{t('cloudSync.s3.desc')}</DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.s3.endpoint')}</Label>
+                            <Input
+                                value={s3Endpoint}
+                                onChange={(e) => setS3Endpoint(e.target.value)}
+                                placeholder="https://s3.example.com"
+                            />
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-3">
+                            <div className="space-y-2">
+                                <Label>{t('cloudSync.s3.region')}</Label>
+                                <Input
+                                    value={s3Region}
+                                    onChange={(e) => setS3Region(e.target.value)}
+                                    placeholder="us-east-1"
+                                />
+                            </div>
+                            <div className="space-y-2">
+                                <Label>{t('cloudSync.s3.bucket')}</Label>
+                                <Input
+                                    value={s3Bucket}
+                                    onChange={(e) => setS3Bucket(e.target.value)}
+                                    placeholder="netcatty-backups"
+                                />
+                            </div>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.s3.accessKeyId')}</Label>
+                            <Input
+                                value={s3AccessKeyId}
+                                onChange={(e) => setS3AccessKeyId(e.target.value)}
+                                autoComplete="off"
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.s3.secretAccessKey')}</Label>
+                            <Input
+                                type={showS3Secret ? 'text' : 'password'}
+                                value={s3SecretAccessKey}
+                                onChange={(e) => setS3SecretAccessKey(e.target.value)}
+                                autoComplete="off"
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.s3.sessionToken')}</Label>
+                            <Input
+                                type={showS3Secret ? 'text' : 'password'}
+                                value={s3SessionToken}
+                                onChange={(e) => setS3SessionToken(e.target.value)}
+                                autoComplete="off"
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.s3.prefix')}</Label>
+                            <Input
+                                value={s3Prefix}
+                                onChange={(e) => setS3Prefix(e.target.value)}
+                                placeholder="backups/netcatty"
+                            />
+                        </div>
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={s3ForcePathStyle}
+                                onChange={(e) => setS3ForcePathStyle(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.s3.forcePathStyle')}
+                        </label>
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={s3AllowInsecure}
+                                onChange={(e) => setS3AllowInsecure(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.s3.allowInsecure')}
+                        </label>
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={showS3Secret}
+                                onChange={(e) => setShowS3Secret(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.s3.showSecret')}
+                        </label>
+
+                        {s3Error && (
+                            <p className="text-sm text-red-500">{s3Error}</p>
+                        )}
+                        {s3ErrorDetail && (
+                            <pre className="text-xs text-red-400 whitespace-pre-wrap rounded-md border border-red-500/30 bg-red-500/10 p-2">
+                                {s3ErrorDetail}
+                            </pre>
+                        )}
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setShowS3Dialog(false)}
+                            disabled={isSavingS3}
+                        >
+                            {t('common.cancel')}
+                        </Button>
+                        <Button
+                            onClick={handleSaveS3}
+                            disabled={isSavingS3}
+                            className="gap-2"
+                        >
+                            {isSavingS3 ? <Loader2 size={16} className="animate-spin" /> : <Database size={16} />}
+                            {t('common.save')}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={showChangeKeyDialog} onOpenChange={setShowChangeKeyDialog}>
+                <DialogContent className="sm:max-w-[420px]">
+                    <DialogHeader>
+                        <DialogTitle>{t('cloudSync.changeKey.title')}</DialogTitle>
+                        <DialogDescription>
+                            {t('cloudSync.changeKey.desc')}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.changeKey.current')}</Label>
+                            <Input
+                                type={showMasterKey ? 'text' : 'password'}
+                                value={currentMasterKey}
+                                onChange={(e) => setCurrentMasterKey(e.target.value)}
+                                placeholder={t('cloudSync.changeKey.currentPlaceholder')}
+                                autoFocus
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.changeKey.new')}</Label>
+                            <Input
+                                type={showMasterKey ? 'text' : 'password'}
+                                value={newMasterKey}
+                                onChange={(e) => setNewMasterKey(e.target.value)}
+                                placeholder={t('cloudSync.changeKey.newPlaceholder')}
+                            />
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.changeKey.confirmNew')}</Label>
+                            <Input
+                                type={showMasterKey ? 'text' : 'password'}
+                                value={confirmNewMasterKey}
+                                onChange={(e) => setConfirmNewMasterKey(e.target.value)}
+                                placeholder={t('cloudSync.changeKey.confirmPlaceholder')}
+                            />
+                        </div>
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={showMasterKey}
+                                onChange={(e) => setShowMasterKey(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.changeKey.showKeys')}
+                        </label>
+
+                        {changeKeyError && (
+                            <p className="text-sm text-red-500">{changeKeyError}</p>
+                        )}
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setShowChangeKeyDialog(false)}
+                            disabled={isChangingKey}
+                        >
+                            {t('common.cancel')}
+                        </Button>
+                        <Button
+                            onClick={async () => {
+                                setChangeKeyError(null);
+                                if (!currentMasterKey || !newMasterKey || !confirmNewMasterKey) {
+                                    setChangeKeyError(t('cloudSync.changeKey.fillAll'));
+                                    return;
+                                }
+                                if (newMasterKey.length < 8) {
+                                    setChangeKeyError(t('cloudSync.changeKey.minLength'));
+                                    return;
+                                }
+                                if (newMasterKey !== confirmNewMasterKey) {
+                                    setChangeKeyError(t('cloudSync.changeKey.notMatch'));
+                                    return;
+                                }
+
+                                let payloadForReencrypt: SyncPayload | null = null;
+                                if (sync.hasAnyConnectedProvider) {
+                                    const payload = await onBuildPayload();
+                                    if (!ensureSyncablePayload(payload)) {
+                                        setChangeKeyError(t('sync.credentialsUnavailable'));
+                                        return;
+                                    }
+                                    payloadForReencrypt = payload;
+                                }
+
+                                setIsChangingKey(true);
+                                try {
+                                    const ok = await sync.changeMasterKey(currentMasterKey, newMasterKey);
+                                    if (!ok) {
+                                        setChangeKeyError(t('cloudSync.changeKey.incorrectCurrent'));
+                                        return;
+                                    }
+
+                                    if (payloadForReencrypt) {
+                                        await sync.syncNow(payloadForReencrypt, {
+                                            applyConvergentPayload: onApplyConvergentPayload,
+                                        });
+                                    }
+
+                                    toast.success(t('cloudSync.changeKey.updatedToast'));
+                                    setShowChangeKeyDialog(false);
+                                } catch (error) {
+                                    setChangeKeyError(error instanceof Error ? error.message : t('cloudSync.changeKey.failed'));
+                                } finally {
+                                    setIsChangingKey(false);
+                                }
+                            }}
+                            disabled={isChangingKey}
+                            className="gap-2"
+                        >
+                            {isChangingKey ? <Loader2 size={16} className="animate-spin" /> : <Key size={16} />}
+                            {t('cloudSync.changeKey.updateButton')}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            <Dialog open={showUnlockDialog} onOpenChange={setShowUnlockDialog}>
+                <DialogContent className="sm:max-w-[420px]">
+                    <DialogHeader>
+                        <DialogTitle>{t('cloudSync.unlock.title')}</DialogTitle>
+                        <DialogDescription>
+                            {t('cloudSync.unlock.desc')}
+                        </DialogDescription>
+                    </DialogHeader>
+
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label>{t('cloudSync.unlock.masterKey')}</Label>
+                            <Input
+                                type={showUnlockMasterKey ? 'text' : 'password'}
+                                value={unlockMasterKey}
+                                onChange={(e) => setUnlockMasterKey(e.target.value)}
+                                placeholder={t('cloudSync.unlock.placeholder')}
+                                autoFocus
+                            />
+                        </div>
+
+                        <label className="flex items-center gap-2 text-sm text-muted-foreground select-none">
+                            <input
+                                type="checkbox"
+                                checked={showUnlockMasterKey}
+                                onChange={(e) => setShowUnlockMasterKey(e.target.checked)}
+                                className="accent-primary"
+                            />
+                            {t('cloudSync.unlock.showKey')}
+                        </label>
+
+                        {unlockError && (
+                            <p className="text-sm text-red-500">{unlockError}</p>
+                        )}
+                    </div>
+
+                    <DialogFooter>
+                        <Button
+                            variant="outline"
+                            onClick={() => setShowUnlockDialog(false)}
+                            disabled={isUnlocking}
+                        >
+                            {t('cloudSync.unlock.notNow')}
+                        </Button>
+                        <Button
+                            onClick={async () => {
+                                setUnlockError(null);
+                                if (!unlockMasterKey) {
+                                    setUnlockError(t('cloudSync.unlock.empty'));
+                                    return;
+                                }
+                                setIsUnlocking(true);
+                                try {
+                                    const ok = await sync.unlock(unlockMasterKey);
+                                    if (!ok) {
+                                        setUnlockError(t('cloudSync.unlock.incorrect'));
+                                        return;
+                                    }
+                                    toast.success(t('cloudSync.unlock.readyToast'));
+                                    setShowUnlockDialog(false);
+                                    setUnlockMasterKey('');
+                                } catch (error) {
+                                    setUnlockError(error instanceof Error ? error.message : t('cloudSync.unlock.failed'));
+                                } finally {
+                                    setIsUnlocking(false);
+                                }
+                            }}
+                            disabled={isUnlocking}
+                            className="gap-2"
+                        >
+                            {isUnlocking ? <Loader2 size={16} className="animate-spin" /> : <ShieldCheck size={16} />}
+                            {t('cloudSync.unlock.unlockButton')}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Clear Local Data Confirmation Dialog */}
+            <Dialog open={showClearLocalDialog} onOpenChange={setShowClearLocalDialog}>
+                <DialogContent className="sm:max-w-[400px] z-[70]">
+                    <DialogHeader>
+                        <DialogTitle className="flex items-center gap-2 text-destructive">
+                            <AlertTriangle size={20} />
+                            {t('cloudSync.clearLocal.dialog.title')}
+                        </DialogTitle>
+                        <DialogDescription>
+                            {t('cloudSync.clearLocal.dialog.desc')}
+                        </DialogDescription>
+                    </DialogHeader>
+                    <DialogFooter className="gap-2 sm:gap-0">
+                        <Button
+                            variant="outline"
+                            onClick={() => setShowClearLocalDialog(false)}
+                        >
+                            {t('cloudSync.clearLocal.dialog.cancel')}
+                        </Button>
+                        <Button
+                            variant="destructive"
+                            onClick={() => {
+                                onClearLocalData?.();
+                                sync.resetLocalVersion();
+                                setShowClearLocalDialog(false);
+                                toast.success(t('cloudSync.clearLocal.toast.desc'), t('cloudSync.clearLocal.toast.title'));
+                            }}
+                        >
+                            <Trash2 size={14} className="mr-1" />
+                            {t('cloudSync.clearLocal.dialog.confirm')}
+                        </Button>
+                    </DialogFooter>
+                </DialogContent>
+            </Dialog>
+
+            {/* Force-push confirmation modal (Task 8) */}
+            {showForcePushConfirm && blockedFinding && (
+                <Dialog open onOpenChange={(open) => !open && setShowForcePushConfirm(false)}>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{t('sync.forcePush.title')}</DialogTitle>
+                        </DialogHeader>
+                        <p className="text-sm">
+                            {t('sync.forcePush.body', {
+                                lost: blockedFinding.lost,
+                                entityType: t(`sync.entityType.${blockedFinding.entityType}`),
+                            })}
+                        </p>
+                        <DialogFooter>
+                            <Button variant="outline" onClick={() => setShowForcePushConfirm(false)}>
+                                {t('sync.forcePush.cancel')}
+                            </Button>
+                            <Button
+                                variant="destructive"
+                                onClick={async () => {
+                                    const localPayload = await onBuildPayload();
+                                    if (!ensureSyncablePayload(localPayload)) {
+                                        setShowForcePushConfirm(false);
+                                        return;
+                                    }
+                                    setShowForcePushConfirm(false);
+                                    try {
+                                        const results = await sync.syncNow(localPayload, {
+                                            overrideShrink: true,
+                                            applyConvergentPayload: onApplyConvergentPayload,
+                                        });
+
+                                        // Apply any merged payload BEFORE clearing the banner. If a merge happened
+                                        // during force-push (remote changed), the merged result is what the cloud
+                                        // now has — applying it to local state prevents the next sync from
+                                        // re-deleting the remote additions we just merged in.
+                                        for (const result of results.values()) {
+                                            if (result.mergedPayload && !result.mergedPayloadApplied) {
+                                                const portableMerged = stripSyncPayloadEncryptedCredentials(result.mergedPayload);
+                                                await Promise.resolve(onApplyPayload(portableMerged));
+                                                if (result.remoteFile) {
+                                                    await sync.commitRemoteInspection(result.provider, result.remoteFile, portableMerged, {
+                                                        recordDownload: true,
+                                                    });
+                                                }
+                                                break; // All providers share the same merged payload
+                                            }
+                                        }
+
+                                        const syncResults = Array.from(results.values()) as SyncResult[];
+                                        const allOk = syncResults.every((r) => r.success);
+                                        if (allOk) {
+                                            setBlockedFinding(null);
+                                        } else {
+                                            // Surface the failure but KEEP the banner so the user can retry or
+                                            // restore. Find the first error string to display.
+                                            const firstError = syncResults
+                                                .find((r) => !r.success)
+                                                ?.error ?? t('sync.toast.errorTitle');
+                                            toast.error(firstError, t('sync.toast.errorTitle'));
+                                        }
+                                    } catch (err) {
+                                        toast.error(String(err), t('sync.toast.errorTitle'));
+                                    }
+                                }}
+                            >
+                                {t('sync.forcePush.confirm')}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+  </>
+);