[Init] Initial commit - NetMesh terminal manager

components/cloud-sync/CloudSyncDashboardTabs.tsx

@@ -0,0 +1,691 @@
+import React, { useEffect, useState, type Dispatch, type RefObject, type SetStateAction } from 'react';
+import { Database, Github, History, Plug, Server, Trash2 } from 'lucide-react';
+import type {
+  CloudProvider,
+  ConvergentFieldConflict,
+  ConvergentMigrationPreview,
+  SyncPayload,
+} from '../../domain/sync';
+import { isBuiltinCloudProvider } from '../../domain/sync';
+import { isPluginCloudProviderId } from '../../domain/cloudProviderIds';
+import { planPluginSyncConnect, hasPluginProviderStoredConfig } from '../../domain/pluginSyncConnect';
+import { planPluginSyncCredential, syncConfigurationSchemaWithoutSecretRequirements } from '../../domain/pluginSyncCredential';
+import { pluginConfigurationMatchesSchema } from '../../domain/pluginConfigurationSchema';
+import type { useCloudSync } from '../../application/state/useCloudSync';
+import { storePluginSyncSecretsThenConnect } from '../../application/pluginSyncConnectWithSecrets';
+import { cleanOneDriveErrorMessage, isProviderReadyForSync } from '../../domain/sync';
+import { pluginExtensionBridge } from '../../application/state/pluginExtensionBridge';
+import { cn } from '../../lib/utils';
+import { Button } from '../ui/button';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '../ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '../ui/select';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../ui/tabs';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { toast } from '../ui/toast';
+import { GoogleDriveIcon, OneDriveIcon, ProviderCard, Toggle } from './CloudSyncControls';
+import { LocalBackupsPanel } from './CloudSyncLocalBackupsPanel';
+import { ConvergentSyncPanel } from './ConvergentSyncPanel';
+import { SettingsAnchor } from '../settings/settings-ui';
+
+type SyncController = ReturnType<typeof useCloudSync>;
+type Translate = (key: string, values?: Record<string, string | number>) => string;
+
+interface CloudSyncDashboardTabsProps {
+  activeTab: 'providers' | 'status';
+  setActiveTab: Dispatch<SetStateAction<'providers' | 'status'>>;
+  t: Translate;
+  sync: SyncController;
+  resolvedLocale: string | null;
+  localBackupsRef: RefObject<HTMLDivElement | null>;
+  isConnectDisabled: (provider: CloudProvider) => boolean;
+  handleConnectGitHub: () => Promise<void>;
+  handleConnectGoogle: () => Promise<void>;
+  handleConnectOneDrive: () => Promise<void>;
+  openWebdavDialog: () => void;
+  openS3Dialog: () => void;
+  handleOpenHistory: () => Promise<void>;
+  handleSync: (provider: CloudProvider) => Promise<void>;
+  onApplyPayload: (payload: SyncPayload) => void | Promise<void>;
+  onApplyLocalPayload?: (payload: SyncPayload) => void | Promise<void>;
+  setShowClearLocalDialog: Dispatch<SetStateAction<boolean>>;
+  convergentConfig: { enabled: boolean; initialized: boolean };
+  convergentPreview: ConvergentMigrationPreview | null;
+  convergentBusy: boolean;
+  convergentError: string | null;
+  convergentConflicts: ConvergentFieldConflict[];
+  onToggleConvergent: (enabled: boolean) => void | Promise<void>;
+  onConfirmConvergentMigration: () => void | Promise<void>;
+  onCancelConvergentMigration: () => void;
+  onResolveConvergentConflict: (addressKey: string, candidateDot: string) => void | Promise<void>;
+  onDowngradeConvergent: () => void | Promise<void>;
+  /** Disconnect other legacy providers before connecting a plugin backend. */
+  disconnectOtherProviders?: (current: CloudProvider) => Promise<void>;
+}
+
+export const CloudSyncDashboardTabs: React.FC<CloudSyncDashboardTabsProps> = ({
+  activeTab,
+  setActiveTab,
+  t,
+  sync,
+  resolvedLocale,
+  localBackupsRef,
+  isConnectDisabled,
+  handleConnectGitHub,
+  handleConnectGoogle,
+  handleConnectOneDrive,
+  openWebdavDialog,
+  openS3Dialog,
+  handleOpenHistory,
+  handleSync,
+  onApplyPayload,
+  onApplyLocalPayload,
+  setShowClearLocalDialog,
+  convergentConfig,
+  convergentPreview,
+  convergentBusy,
+  convergentError,
+  convergentConflicts,
+  onToggleConvergent,
+  onConfirmConvergentMigration,
+  onCancelConvergentMigration,
+  onResolveConvergentConflict,
+  onDowngradeConvergent,
+  disconnectOtherProviders,
+}) => {
+  const [pluginSyncProviders, setPluginSyncProviders] = useState<Array<{
+    id: string;
+    title: string;
+    configurationSchema?: unknown;
+  }>>([]);
+  const [pluginConnectBusy, setPluginConnectBusy] = useState<string | null>(null);
+  const [pluginConfigDialog, setPluginConfigDialog] = useState<{
+    providerId: string;
+    title: string;
+    configurationSchema?: unknown;
+  } | null>(null);
+  const [pluginConfigText, setPluginConfigText] = useState('{}');
+  const [pluginConfigError, setPluginConfigError] = useState<string | null>(null);
+  const [pluginConfigSaving, setPluginConfigSaving] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    const refresh = async () => {
+      try {
+        const listed = await pluginExtensionBridge.listProviders('sync');
+        if (cancelled) return;
+        setPluginSyncProviders(
+          (listed ?? []).map((entry) => {
+            const nested = (entry as {
+              provider?: {
+                id?: string;
+                label?: string;
+                configurationSchema?: unknown;
+              };
+              pluginDisplayName?: string;
+            }).provider;
+            const id = String(nested?.id ?? '');
+            return {
+              id,
+              title: String(
+                nested?.label
+                ?? (entry as { pluginDisplayName?: string }).pluginDisplayName
+                ?? id
+                ?? 'Plugin sync',
+              ),
+              configurationSchema: nested?.configurationSchema,
+            };
+          }).filter((entry) => entry.id.length > 0 && isPluginCloudProviderId(entry.id)),
+        );
+      } catch {
+        if (!cancelled) setPluginSyncProviders([]);
+      }
+    };
+    void refresh();
+    const unsubscribe = pluginExtensionBridge.onContributionsChanged(() => {
+      void refresh();
+    });
+    return () => {
+      cancelled = true;
+      unsubscribe?.();
+    };
+  }, []);
+
+  const openPluginConfigDialog = (
+    providerId: string,
+    title: string,
+    configurationSchema: unknown | undefined,
+  ) => {
+    const connection = sync.providers[providerId];
+    // Include falsy scalars and JSON null so Edit can re-save them.
+    const seed = hasPluginProviderStoredConfig(connection) ? connection!.config : {};
+    setPluginConfigText(JSON.stringify(seed, null, 2));
+    setPluginConfigError(null);
+    setPluginConfigDialog({ providerId, title, configurationSchema });
+  };
+
+  const runPluginConnect = async (providerId: string, configuration: unknown): Promise<boolean> => {
+    setPluginConnectBusy(providerId);
+    try {
+      if (disconnectOtherProviders) {
+        await disconnectOtherProviders(providerId as CloudProvider);
+      }
+      const credentialPlan = planPluginSyncCredential(configuration, {
+        configurationSchema: pluginSyncProviders.find((entry) => entry.id === providerId)
+          ?.configurationSchema,
+      });
+      const stored = sync.providers[providerId]?.credential;
+      const existingCredential =
+        stored
+        && typeof stored === 'object'
+        && stored.kind === 'secret'
+        && typeof stored.id === 'string'
+          ? stored as { kind: 'secret'; id: string; key: string }
+          : undefined;
+      if (credentialPlan.secrets.length > 0) {
+        const { putPluginSyncSecret, deletePluginSyncSecrets, restorePluginSyncSecrets } = await import(
+          '../../infrastructure/services/adapters/pluginSyncIpcHost'
+        );
+        // Put secrets before connect; roll back just-created keys if connect fails
+        // so a rejected password/token is not left readable in plugin_secrets.
+        // Overwrites restore the previous plaintext from the host stash.
+        await storePluginSyncSecretsThenConnect({
+          providerId,
+          secrets: credentialPlan.secrets.map((secret) => ({
+            secretKey: secret.secretKey,
+            value: secret.value,
+          })),
+          putSecret: putPluginSyncSecret,
+          deleteSecrets: deletePluginSyncSecrets,
+          restoreSecrets: restorePluginSyncSecrets,
+          connect: async (credential) => {
+            await sync.connectPluginProvider(
+              providerId,
+              credentialPlan.configuration,
+              credential,
+            );
+          },
+        });
+      } else {
+        await sync.connectPluginProvider(
+          providerId,
+          credentialPlan.configuration,
+          existingCredential,
+        );
+      }
+      toast.success(t('cloudSync.connect.plugin.success'));
+      return true;
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      toast.error(message, t('cloudSync.connect.plugin.failedTitle'));
+      return false;
+    } finally {
+      setPluginConnectBusy(null);
+    }
+  };
+
+  const handlePluginConnect = async (providerId: string) => {
+    const listed = pluginSyncProviders.find((entry) => entry.id === providerId);
+    const connection = sync.providers[providerId];
+    // Config may be a valid falsy scalar or JSON null — property presence, not truthiness.
+    const hasStoredConfig = hasPluginProviderStoredConfig(connection);
+    const plan = planPluginSyncConnect({
+      configurationSchema: listed?.configurationSchema,
+      storedConfig: connection?.config,
+      hasStoredConfig,
+    });
+    if (plan.action === 'prompt') {
+      openPluginConfigDialog(
+        providerId,
+        listed?.title ?? providerId,
+        listed?.configurationSchema,
+      );
+      return;
+    }
+    await runPluginConnect(providerId, plan.configuration);
+  };
+
+  const handleSavePluginConfig = async () => {
+    if (!pluginConfigDialog) return;
+    let configuration: unknown;
+    try {
+      configuration = JSON.parse(pluginConfigText) as unknown;
+    } catch {
+      setPluginConfigError(t('cloudSync.pluginConfig.invalidJson'));
+      return;
+    }
+    if (pluginConfigDialog.configurationSchema !== undefined) {
+      const connection = sync.providers[pluginConfigDialog.providerId];
+      const hasStoredSecret = connection?.credential != null
+        && typeof connection.credential === 'object'
+        && (connection.credential as { kind?: string }).kind === 'secret';
+      // Edit seeds stripped config; required secret fields stay satisfied by the
+      // durable SecretRef until the user re-enters plaintext secrets.
+      const schema = hasStoredSecret
+        ? syncConfigurationSchemaWithoutSecretRequirements(pluginConfigDialog.configurationSchema)
+        : pluginConfigDialog.configurationSchema;
+      if (!pluginConfigurationMatchesSchema(schema, configuration)) {
+        setPluginConfigError(t('cloudSync.pluginConfig.schemaInvalid'));
+        return;
+      }
+    }
+    setPluginConfigError(null);
+    setPluginConfigSaving(true);
+    try {
+      const ok = await runPluginConnect(pluginConfigDialog.providerId, configuration);
+      if (ok) setPluginConfigDialog(null);
+      // On failure toast already shown; keep dialog open for correction.
+    } finally {
+      setPluginConfigSaving(false);
+    }
+  };
+
+  const pluginProviderIds = new Set<string>([
+    ...pluginSyncProviders.map((entry) => entry.id),
+    ...Object.keys(sync.providers).filter((id) => !isBuiltinCloudProvider(id)),
+  ]);
+
+  return (
+            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as 'providers' | 'status')} className="space-y-4">
+                <TabsList className="grid w-full grid-cols-2">
+                    <TabsTrigger value="providers">{t('cloudSync.providers.title')}</TabsTrigger>
+                    <TabsTrigger value="status">{t('cloudSync.status.title')}</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="providers" className="space-y-3">
+                    <SettingsAnchor anchorId="sync-providers" className="space-y-3">
+                    <ProviderCard
+                        provider="github"
+                        name="GitHub Gist"
+                        icon={<Github size={24} />}
+                        isConnected={isProviderReadyForSync(sync.providers.github)}
+                        isSyncing={sync.providers.github.status === 'syncing'}
+                        isConnecting={sync.providers.github.status === 'connecting'}
+                        account={sync.providers.github.account}
+                        lastSync={sync.providers.github.lastSync}
+                        error={sync.providers.github.error}
+                        disabled={isConnectDisabled('github')}
+                        onConnect={handleConnectGitHub}
+                        onDisconnect={() => sync.disconnectProvider('github')}
+                        onSync={() => handleSync('github')}
+                        extraActions={
+                            isProviderReadyForSync(sync.providers.github) ? (
+                                <Button size="sm" variant="ghost" onClick={handleOpenHistory} className="gap-1">
+                                    <History size={14} />
+                                    {t('cloudSync.revisionHistory.viewButton')}
+                                </Button>
+                            ) : undefined
+                        }
+                    />
+
+                    <ProviderCard
+                        provider="google"
+                        name="Google Drive"
+                        icon={<GoogleDriveIcon className="w-6 h-6" />}
+                        isConnected={isProviderReadyForSync(sync.providers.google)}
+                        isSyncing={sync.providers.google.status === 'syncing'}
+                        isConnecting={
+                            sync.providers.google.status === 'connecting' ||
+                            sync.pendingBrowserAuthProvider === 'google'
+                        }
+                        account={sync.providers.google.account}
+                        lastSync={sync.providers.google.lastSync}
+                        error={sync.providers.google.error}
+                        disabled={isConnectDisabled('google')}
+                        onConnect={handleConnectGoogle}
+                        onCancelConnect={sync.cancelOAuthConnect}
+                        onDisconnect={() => sync.disconnectProvider('google')}
+                        onSync={() => handleSync('google')}
+                    />
+
+                    <ProviderCard
+                        provider="onedrive"
+                        name="Microsoft OneDrive"
+                        icon={<OneDriveIcon className="w-6 h-6" />}
+                        isConnected={isProviderReadyForSync(sync.providers.onedrive)}
+                        isSyncing={sync.providers.onedrive.status === 'syncing'}
+                        isConnecting={
+                            sync.providers.onedrive.status === 'connecting' ||
+                            sync.pendingBrowserAuthProvider === 'onedrive'
+                        }
+                        account={sync.providers.onedrive.account}
+                        lastSync={sync.providers.onedrive.lastSync}
+                        error={
+                            sync.providers.onedrive.error
+                                ? cleanOneDriveErrorMessage(sync.providers.onedrive.error)
+                                : undefined
+                        }
+                        disabled={isConnectDisabled('onedrive')}
+                        onConnect={handleConnectOneDrive}
+                        onCancelConnect={sync.cancelOAuthConnect}
+                        onDisconnect={() => sync.disconnectProvider('onedrive')}
+                        onSync={() => handleSync('onedrive')}
+                    />
+
+                    <ProviderCard
+                        provider="webdav"
+                        name={t('cloudSync.provider.webdav')}
+                        icon={<Server size={24} />}
+                        isConnected={isProviderReadyForSync(sync.providers.webdav)}
+                        isSyncing={sync.providers.webdav.status === 'syncing'}
+                        isConnecting={sync.providers.webdav.status === 'connecting'}
+                        account={sync.providers.webdav.account}
+                        lastSync={sync.providers.webdav.lastSync}
+                        error={sync.providers.webdav.error}
+                        disabled={isConnectDisabled('webdav')}
+                        onEdit={openWebdavDialog}
+                        onConnect={openWebdavDialog}
+                        onDisconnect={() => sync.disconnectProvider('webdav')}
+                        onSync={() => handleSync('webdav')}
+                    />
+
+                    <ProviderCard
+                        provider="s3"
+                        name={t('cloudSync.provider.s3')}
+                        icon={<Database size={24} />}
+                        isConnected={isProviderReadyForSync(sync.providers.s3)}
+                        isSyncing={sync.providers.s3.status === 'syncing'}
+                        isConnecting={sync.providers.s3.status === 'connecting'}
+                        account={sync.providers.s3.account}
+                        lastSync={sync.providers.s3.lastSync}
+                        error={sync.providers.s3.error}
+                        disabled={isConnectDisabled('s3')}
+                        onEdit={openS3Dialog}
+                        onConnect={openS3Dialog}
+                        onDisconnect={() => sync.disconnectProvider('s3')}
+                        onSync={() => handleSync('s3')}
+                    />
+
+                    {[...pluginProviderIds].sort().map((providerId) => {
+                        const connection = sync.providers[providerId];
+                        const listed = pluginSyncProviders.find((entry) => entry.id === providerId);
+                        const title = listed?.title ?? providerId;
+                        const connected = connection ? isProviderReadyForSync(connection) : false;
+                        const hasStoredConfig = hasPluginProviderStoredConfig(connection);
+                        const needsConfig = planPluginSyncConnect({
+                          configurationSchema: listed?.configurationSchema,
+                          storedConfig: connection?.config,
+                          hasStoredConfig,
+                        }).action === 'prompt';
+                        return (
+                            <ProviderCard
+                                key={providerId}
+                                provider={providerId as CloudProvider}
+                                name={title}
+                                icon={<Plug size={24} />}
+                                isConnected={connected}
+                                isSyncing={connection?.status === 'syncing'}
+                                isConnecting={
+                                    connection?.status === 'connecting'
+                                    || pluginConnectBusy === providerId
+                                }
+                                account={connection?.account
+                                  ? {
+                                      // Never load plugin-supplied avatar URLs in the main
+                                      // renderer (offline plugin network boundary).
+                                      id: connection.account.id,
+                                      name: connection.account.name,
+                                      email: connection.account.email,
+                                    }
+                                  : undefined}
+                                lastSync={connection?.lastSync}
+                                error={connection?.error}
+                                disabled={isConnectDisabled(providerId as CloudProvider)}
+                                onEdit={
+                                  connected || needsConfig || hasStoredConfig
+                                    ? () => openPluginConfigDialog(
+                                      providerId,
+                                      title,
+                                      listed?.configurationSchema,
+                                    )
+                                    : undefined
+                                }
+                                onConnect={() => {
+                                  void handlePluginConnect(providerId);
+                                }}
+                                onDisconnect={() => sync.disconnectProvider(providerId as CloudProvider)}
+                                onSync={() => handleSync(providerId as CloudProvider)}
+                            />
+                        );
+                    })}
+
+                    <Dialog
+                      open={pluginConfigDialog != null}
+                      onOpenChange={(open) => {
+                        if (!open && !pluginConfigSaving) setPluginConfigDialog(null);
+                      }}
+                    >
+                      <DialogContent className="sm:max-w-[480px]">
+                        <DialogHeader>
+                          <DialogTitle>
+                            {t('cloudSync.pluginConfig.title', {
+                              name: pluginConfigDialog?.title ?? '',
+                            })}
+                          </DialogTitle>
+                          <DialogDescription>
+                            {t('cloudSync.pluginConfig.desc')}
+                          </DialogDescription>
+                        </DialogHeader>
+                        <textarea
+                          value={pluginConfigText}
+                          onChange={(event) => {
+                            setPluginConfigText(event.target.value);
+                            if (pluginConfigError) setPluginConfigError(null);
+                          }}
+                          spellCheck={false}
+                          disabled={pluginConfigSaving}
+                          className="min-h-40 w-full resize-y rounded-md border border-border bg-background px-3 py-2 font-mono text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                          aria-label={t('cloudSync.pluginConfig.label')}
+                        />
+                        {pluginConfigError ? (
+                          <p role="alert" className="text-xs text-destructive">{pluginConfigError}</p>
+                        ) : null}
+                        <DialogFooter>
+                          <Button
+                            type="button"
+                            variant="outline"
+                            disabled={pluginConfigSaving}
+                            onClick={() => setPluginConfigDialog(null)}
+                          >
+                            {t('common.cancel')}
+                          </Button>
+                          <Button
+                            type="button"
+                            disabled={pluginConfigSaving}
+                            onClick={() => { void handleSavePluginConfig(); }}
+                          >
+                            {pluginConfigSaving
+                              ? t('cloudSync.provider.connecting')
+                              : t('cloudSync.provider.connect')}
+                          </Button>
+                        </DialogFooter>
+                      </DialogContent>
+                    </Dialog>
+                    </SettingsAnchor>
+                </TabsContent>
+
+                <TabsContent value="status" className="space-y-4">
+                    <ConvergentSyncPanel
+                        t={t}
+                        resolvedLocale={resolvedLocale}
+                        config={convergentConfig}
+                        preview={convergentPreview}
+                        busy={convergentBusy}
+                        error={convergentError}
+                        conflicts={convergentConflicts}
+                        onToggle={onToggleConvergent}
+                        onConfirmMigration={onConfirmConvergentMigration}
+                        onCancelMigration={onCancelConvergentMigration}
+                        onResolveConflict={onResolveConvergentConflict}
+                        onDowngrade={onDowngradeConvergent}
+                    />
+
+                    <SettingsAnchor anchorId="sync-auto-sync" className="p-4 rounded-lg border bg-card">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <div className="text-sm font-medium">{t('cloudSync.autoSync.title')}</div>
+                                <div className="text-xs text-muted-foreground">
+                                    {t('cloudSync.autoSync.desc')}
+                                </div>
+                            </div>
+                            <Toggle
+                                checked={sync.autoSyncEnabled}
+                                onChange={(enabled) => sync.setAutoSync(enabled)}
+                                disabled={!sync.hasAnyConnectedProvider}
+                            />
+                        </div>
+                    </SettingsAnchor>
+
+                    <SettingsAnchor anchorId="sync-strategy" className="p-4 rounded-lg border bg-card space-y-3">
+                        <div>
+                            <div className="text-sm font-medium">{t('cloudSync.strategy.title')}</div>
+                            <div className="text-xs text-muted-foreground">
+                                {t('cloudSync.strategy.desc')}
+                            </div>
+                        </div>
+                        <Select
+                            value={sync.syncStrategy}
+                            onValueChange={(value) => sync.setSyncStrategy(value as typeof sync.syncStrategy)}
+                        >
+                            <SelectTrigger
+                                aria-label={t('cloudSync.strategy.title')}
+                                className="h-10"
+                            >
+                                {sync.syncStrategy === 'preferCloud'
+                                    ? t('cloudSync.strategy.preferCloud')
+                                    : sync.syncStrategy === 'preferLocal'
+                                        ? t('cloudSync.strategy.preferLocal')
+                                        : t('cloudSync.strategy.smartMerge')}
+                            </SelectTrigger>
+                            <SelectContent className="max-w-[min(520px,var(--radix-select-trigger-width))]">
+                                <SelectItem value="smartMerge" className="items-start py-2">
+                                    <div className="space-y-0.5">
+                                        <div>{t('cloudSync.strategy.smartMerge')}</div>
+                                        <div className="text-xs text-muted-foreground leading-snug">
+                                            {t('cloudSync.strategy.smartMergeDesc')}
+                                        </div>
+                                    </div>
+                                </SelectItem>
+                                <SelectItem value="preferCloud" className="items-start py-2">
+                                    <div className="space-y-0.5">
+                                        <div>{t('cloudSync.strategy.preferCloud')}</div>
+                                        <div className="text-xs text-muted-foreground leading-snug">
+                                            {t('cloudSync.strategy.preferCloudDesc')}
+                                        </div>
+                                    </div>
+                                </SelectItem>
+                                <SelectItem value="preferLocal" className="items-start py-2">
+                                    <div className="space-y-0.5">
+                                        <div>{t('cloudSync.strategy.preferLocal')}</div>
+                                        <div className="text-xs text-muted-foreground leading-snug">
+                                            {t('cloudSync.strategy.preferLocalDesc')}
+                                        </div>
+                                    </div>
+                                </SelectItem>
+                            </SelectContent>
+                        </Select>
+                    </SettingsAnchor>
+
+                    {sync.hasAnyConnectedProvider && (
+                        <div className="space-y-3">
+                            {/* Version Info Cards */}
+                            <div className="grid grid-cols-2 gap-3">
+                                <div className="p-3 rounded-lg border bg-card">
+                                    <div className="text-xs text-muted-foreground mb-1">{t('cloudSync.status.localVersion')}</div>
+                                    <div className="text-lg font-semibold">v{sync.localVersion}</div>
+                                    <div className="text-xs text-muted-foreground">
+                                        {sync.localUpdatedAt
+                                            ? new Date(sync.localUpdatedAt).toLocaleString(resolvedLocale || undefined)
+                                            : t('cloudSync.lastSync.never')}
+                                    </div>
+                                </div>
+                                <div className="p-3 rounded-lg border bg-card">
+                                    <div className="text-xs text-muted-foreground mb-1">{t('cloudSync.status.remoteVersion')}</div>
+                                    <div className="text-lg font-semibold">v{sync.remoteVersion}</div>
+                                    <div className="text-xs text-muted-foreground">
+                                        {sync.remoteUpdatedAt
+                                            ? new Date(sync.remoteUpdatedAt).toLocaleString(resolvedLocale || undefined)
+                                            : t('cloudSync.lastSync.never')}
+                                    </div>
+                                </div>
+                            </div>
+
+                            {/* Sync History */}
+                            {sync.syncHistory.length > 0 && (
+                                <div className="rounded-lg border bg-card">
+                                    <div className="px-3 py-2 border-b border-border/60">
+                                        <div className="text-sm font-medium">{t('cloudSync.history.title')}</div>
+                                    </div>
+                                    <div className="max-h-48 overflow-y-auto">
+                                        {sync.syncHistory.slice(0, 10).map((entry) => (
+                                            <div key={entry.id} className="px-3 py-2 flex items-center gap-2 border-b border-border/30 last:border-b-0">
+                                                <div className={cn(
+                                                    "w-2 h-2 rounded-full shrink-0",
+                                                    entry.success ? "bg-green-500" : "bg-red-500"
+                                                )} />
+                                                <div className="flex-1 min-w-0">
+                                                    <div className="flex items-center gap-2">
+                                                        <span className="text-xs font-medium capitalize">
+                                                            {entry.action === 'upload'
+                                                                ? t('cloudSync.history.upload')
+                                                                : entry.action === 'download'
+                                                                    ? t('cloudSync.history.download')
+                                                                    : t('cloudSync.history.resolved')}
+                                                        </span>
+                                                        <span className="text-xs text-muted-foreground">
+                                                            v{entry.localVersion}
+                                                        </span>
+                                                    </div>
+                                                    <div className="text-[10px] text-muted-foreground truncate">
+                                                        {new Date(entry.timestamp).toLocaleString(resolvedLocale || undefined)}
+                                                        {entry.deviceName && ` · ${entry.deviceName}`}
+                                                    </div>
+                                                </div>
+                                                {entry.error && (
+                                                    <Tooltip>
+                                                        <TooltipTrigger asChild>
+                                                            <span className="text-xs text-red-500 truncate max-w-24 cursor-default">
+                                                                {t('cloudSync.history.error')}
+                                                            </span>
+                                                        </TooltipTrigger>
+                                                        <TooltipContent>{entry.error}</TooltipContent>
+                                                    </Tooltip>
+                                                )}
+                                            </div>
+                                        ))}
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    )}
+
+                    <SettingsAnchor anchorId="sync-local-backups">
+                    <div ref={localBackupsRef}>
+                        <LocalBackupsPanel
+                            onApplyPayload={onApplyLocalPayload ?? onApplyPayload}
+                        />
+                    </div>
+                    </SettingsAnchor>
+
+                    {/* Clear Local Data */}
+                    <SettingsAnchor anchorId="sync-clear-local" className="p-4 rounded-lg border border-destructive/30 bg-destructive/5">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <div className="text-sm font-medium">{t('cloudSync.clearLocal.title')}</div>
+                                <div className="text-xs text-muted-foreground">
+                                    {t('cloudSync.clearLocal.desc')}
+                                </div>
+                            </div>
+                            <Button
+                                variant="destructive"
+                                size="sm"
+                                onClick={() => setShowClearLocalDialog(true)}
+                            >
+                                <Trash2 size={14} className="mr-1" />
+                                {t('cloudSync.clearLocal.button')}
+                            </Button>
+                        </div>
+                    </SettingsAnchor>
+                </TabsContent>
+            </Tabs>
+  );
+};