dsh-config-manager 0.1.20 → 0.1.21

package/src/client/sync/SyncHistoryView.tsx

@@ -1,29 +1,34 @@
 /**
- * 同步历史视图（M6，P2b）：列出 localSnapshotsDir 各快照目录的 manifest.json
- * （id + createdAt + sectionHashes）；每行显示：快照 ID、时间、分区数、关联待审数（来自 sync-review-queue.json）。
+ * 同步历史视图（方案 A）：列出本地祖先快照目录（kind=apply）+ 自动同步执行记录
+ * （kind=autosync）。自动同步行显示时间/方向/状态/跳过冲突/应用分区，点开可看被跳过
+ * 冲突分区明细。
  *
- * 数据获取：通过 Host 的 IPC 端点（与 SyncSettingsView 同模式）。本组件只负责渲染；
- * 数据加载由宿主 API 提供（不在浏览器侧直接读 fs）。
+ * 数据获取：GET /sync/history → { entries: SyncHistoryEntry[] }（按 createdAt 倒序合并）。
+ * 纯函数投影在 ./history-model.ts（node --test 可测），本组件只做装配。
  */
 import { useEffect, useMemo, useState } from 'react'
 import type { ReactNode } from 'react'
 
-import { Card, SectionTitle, Spinner } from '../common/ui.tsx'
-import type { SyncApi } from './sync-api.ts'
-import { projectHistoryRows, formatDateTime } from './history-model.ts'
+import { Badge, Card, SectionTitle, Spinner } from '../common/ui.tsx'
+import type { SyncApi, SyncHistoryEntry, AutosyncHistoryEntry } from './sync-api.ts'
+import {
+  describeSkipReason, directionLabel, formatDateTime, projectAutosyncEntry,
+  projectSyncHistoryEntries,
+} from './history-model.ts'
 import type { SnapshotHistoryEntry } from './history-model.ts'
-
-// 纯函数（项目排序、ISO 格式化）放在 ./history-model.ts（node --test 可测）。
+import type { TranslateNS } from '../client-types.ts'
+import css from '../config-manager.module.css'
 
 export interface SyncHistoryViewProps {
   api: SyncApi
+  t: TranslateNS<'config-manager-sync'>
 }
 
 export function SyncHistoryView(props: SyncHistoryViewProps): ReactNode {
-  const { api } = props;
+  const { api, t } = props;
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [entries, setEntries] = useState<SnapshotHistoryEntry[]>([]);
+  const [entries, setEntries] = useState<SyncHistoryEntry[]>([]);
 
   useEffect(() => {
     let cancelled = false;
@@ -31,7 +36,7 @@ export function SyncHistoryView(props: SyncHistoryViewProps): ReactNode {
       try {
         const data = await api.history();
         if (!cancelled) {
-          setEntries(data);
+          setEntries(data.entries);
           setLoading(false);
         }
       } catch (err) {
@@ -44,30 +49,107 @@ export function SyncHistoryView(props: SyncHistoryViewProps): ReactNode {
     return () => { cancelled = true; };
   }, [api]);
 
-  const rows = useMemo(() => projectHistoryRows(entries), [entries]);
+  const rows = useMemo(() => projectSyncHistoryEntries(entries), [entries]);
+  // 快照类条目（兼容旧投影；仅统计展示）
+  const snapshotRows = useMemo<SnapshotHistoryEntry[]>(
+    () => rows
+      .filter((r) => r.kind === 'apply' || r.kind === 'push' || r.kind === 'pull' || r.kind === 'rollback')
+      .map((r) => ({
+        id: r.id,
+        createdAt: r.createdAt,
+        sectionCount: r.sectionCount ?? 0,
+        reviewCount: r.reviewCount ?? 0,
+      })),
+    [rows],
+  );
 
-  if (loading) return <Spinner label="加载同步历史…" />;
+  if (loading) return <Spinner label={t('common.loading')} />;
   if (error) return <Card><span className="error">{error}</span></Card>;
-  if (rows.length === 0) return <Card><strong>尚无同步历史</strong><p>完成首次 push/pull 后这里会显示快照记录。</p></Card>;
+  if (rows.length === 0) {
+    return (
+      <Card>
+        <strong>{t('history.empty')}</strong>
+        <p>{t('history.emptyHint')}</p>
+      </Card>
+    );
+  }
 
   return (
     <Card>
-      <SectionTitle title={`同步历史（${rows.length}）`} />
+      <SectionTitle title={`${t('history.title')}（${rows.length}）`} />
       <table className="sync-history-table">
         <thead>
-          <tr><th>快照 ID</th><th>时间</th><th>分区</th><th>待审</th></tr>
+          <tr><th>{t('history.colTime')}</th><th>{t('history.colKind')}</th><th>{t('history.colDetail')}</th></tr>
         </thead>
         <tbody>
-          {rows.map((r) => (
-            <tr key={r.id}>
-              <td><code>{r.id}</code></td>
-              <td>{formatDateTime(r.createdAt)}</td>
-              <td>{r.sectionCount}</td>
-              <td>{r.reviewCount > 0 ? <strong>{r.reviewCount}</strong> : 0}</td>
-            </tr>
-          ))}
+          {rows.map((r) => {
+            if (r.kind === 'autosync' && r.autosync !== undefined) {
+              return <AutosyncRow key={r.id} entry={r.autosync} t={t} />;
+            }
+            const snap = snapshotRows.find((s) => s.id === r.id);
+            return (
+              <tr key={r.id}>
+                <td>{formatDateTime(r.createdAt)}</td>
+                <td><Badge kind="info">{t('history.kindSnapshot')}</Badge></td>
+                <td>
+                  <code>{r.id}</code>
+                  {snap !== undefined && <> · {snap.sectionCount} {t('history.sectionCount')}</>}
+                </td>
+              </tr>
+            );
+          })}
         </tbody>
       </table>
     </Card>
   );
 }
+
+/* ---------------------------------------------------------------- 自动同步行 */
+
+interface AutosyncRowProps {
+  entry: AutosyncHistoryEntry
+  t: TranslateNS<'config-manager-sync'>
+}
+
+function AutosyncRow({ entry, t }: AutosyncRowProps): ReactNode {
+  const row = projectAutosyncEntry(entry);
+  return (
+    <tr>
+      <td>{formatDateTime(row.createdAt)}</td>
+      <td><Badge kind="info">{t('history.kindAutosync')}</Badge></td>
+      <td>
+        <div>
+          {row.summary}
+          {entry.pushedSnapshotId !== undefined && <> · {t('history.autosyncPush')} {entry.pushedSnapshotId}</>}
+          {entry.pulledSnapshotId !== undefined && <> · {t('history.autosyncPull')} {entry.pulledSnapshotId}</>}
+        </div>
+        {row.hasDetail && (
+          <details>
+            <summary>{t('history.detail')}</summary>
+            <div className={css.reportList}>
+              {row.conflictedSections !== undefined && row.conflictedSections.length > 0 && (
+                <div>
+                  <span className={css.fieldLabel}>{t('history.autosyncConflicted', { sections: '' })}</span>
+                  <div className={css.statRow}>
+                    {row.conflictedSections.map((sid) => <Badge key={sid} kind="warn">{sid}</Badge>)}
+                  </div>
+                </div>
+              )}
+              {row.appliedSections !== undefined && row.appliedSections.length > 0 && (
+                <div>
+                  <span className={css.fieldLabel}>{t('history.autosyncApplied', { sections: '' })}</span>
+                  <div className={css.statRow}>
+                    {row.appliedSections.map((sid) => <Badge key={sid} kind="ok">{sid}</Badge>)}
+                  </div>
+                </div>
+              )}
+              {row.error !== undefined && (
+                <div><span className={css.fieldLabel}>{t('history.autosyncError', { error: '' })}</span>{row.error}</div>
+              )}
+            </div>
+          </details>
+        )}
+      </td>
+    </tr>
+  );
+}

package/src/client/sync/SyncSettingsView.tsx

@@ -7,8 +7,10 @@
  *   + gitBin（可选）；
  * - 私有仓库强制提示横幅（常驻）；
  * - 推送按钮 → SyncPushReport（快照 id / 分区 / 告警）；
- * - 拉取按钮 → SyncPullReport.changes 差异摘要（description/kind/severity）+
- *   「预览不执行导入」提示；needsReview 高亮（v1 不做完整导入接线）；
+ * - 拉取按钮 → SyncPullReport.changes 差异摘要（description/kind/severity）；
+ * - 【方案 A】一键同步主按钮：拉取 → 差异确认会话（SyncConfirmView 逐项确认）→
+ *   确认导入（apply-items）→ 执行结果 + 一键回滚（restoreId）；「选择历史快照」下拉；
+ * - 【方案 A】自动同步设置区块：总开关 + 间隔下拉 + 状态（上次运行 / 下次倒计时）；
  * - 状态行：凭据配置 + 上次同步时间 + 通道（来自 GET /sync/status，组件挂载时加载）。
  *
  * 全部渲染模型来自 ./sync-view.ts 纯函数（node 单测覆盖），组件只做装配；
@@ -18,19 +20,22 @@
 import { useEffect, useRef, useState } from 'react'
 import type { ChangeEvent } from 'react'
 import type { TranslateNS } from '../client-types.ts'
-import type { ApplyReport, SyncPullReport, SyncPushReport } from '../../sync/sync-engine.ts'
+import type { SyncPullReport, SyncPushReport } from '../../sync/sync-engine.ts'
 import { Badge, Banner, Button, Card, SectionTitle, Spinner } from '../common/ui.tsx'
 import { ErrorBanner } from '../common/ErrorBanner.tsx'
 import { SYNC_CREDENTIAL_REF } from './sync-api.ts'
-import type { SyncApi, SyncStatusResponse } from './sync-api.ts'
+import type {
+  AutosyncInterval, AutosyncStatusResponse, SyncApi, SyncSnapshotLite, SyncStartResponse,
+  SyncStatusResponse,
+} from './sync-api.ts'
 import {
-  computeGithubLoginView, computeSyncButtons, computeSyncStatus, githubPollMessage,
-  kindLabel, privateRepoHint, pullReportView, pushReportView, severityLabel,
+  autosyncIntervalMs, autosyncStatusText, computeAutosyncCountdown, computeGithubLoginView,
+  computeSyncButtons, computeSyncStatus, formatIntervalDuration, githubPollMessage, kindLabel,
+  privateRepoHint, pullReportView, pushReportView, severityLabel,
 } from './sync-view.ts'
 import type { GithubLoginPhase } from './sync-view.ts'
 import { SyncHistoryView } from './SyncHistoryView.tsx'
-import { SyncPullPreviewView } from './SyncPullPreviewView.tsx'
-import type { SyncApplyPlan } from '../../sync/risk.ts'
+import { SyncConfirmView } from './SyncConfirmView.tsx'
 import css from '../config-manager.module.css'
 
 export interface SyncSettingsViewProps {
@@ -46,10 +51,23 @@ interface SyncUiState {
   gitBin: string
   /** 仅内存：成功后清空（已写入 DSH credentials），绝不持久化 */
   token: string
-  busy: 'push' | 'pull' | 'apply' | 'rollback' | null
+  busy: 'sync' | 'push' | 'pull' | 'rollback' | null
   pushReport: SyncPushReport | null
   pullReport: SyncPullReport | null
-  applyReport: ApplyReport | null
+  /** 一键同步差异确认会话（POST /sync/sync 结果；非空时渲染 SyncConfirmView） */
+  confirmSession: SyncStartResponse | null
+  /** 远端历史快照列表（「选择历史快照」下拉数据源） */
+  snapshots: SyncSnapshotLite[]
+  /** 当前选中的历史快照 id（'' = 最新） */
+  selectedSnapshotId: string
+  /** 自动同步状态 */
+  autosync: AutosyncStatusResponse | null
+  /** 自动同步开关（回填自 autosync） */
+  autosyncEnabled: boolean
+  /** 自动同步间隔（回填自 autosync） */
+  autosyncInterval: AutosyncInterval
+  /** 最近一次一键同步执行结果（回滚入口） */
+  lastRestoreId: string | null
   error: string | null
   /** GitHub OAuth device flow 状态（flowId/userCode 仅内存，token 只存宿主） */
   github: GithubUiState
@@ -69,6 +87,8 @@ const initialGithub: GithubUiState = {
   phase: 'idle', flowId: '', userCode: '', verificationUri: '', interval: 5, error: null,
 }
 
+const AUTOSYNC_INTERVAL_OPTIONS: AutosyncInterval[] = ['5m', '15m', '30m', '60m', '6h', '12h', '24h'];
+
 const initial: SyncUiState = {
   loading: true,
   loadError: null,
@@ -79,7 +99,13 @@ const initial: SyncUiState = {
   busy: null,
   pushReport: null,
   pullReport: null,
-  applyReport: null,
+  confirmSession: null,
+  snapshots: [],
+  selectedSnapshotId: '',
+  autosync: null,
+  autosyncEnabled: false,
+  autosyncInterval: '30m',
+  lastRestoreId: null,
   error: null,
   github: initialGithub,
 }
@@ -92,17 +118,53 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
   /** GitHub 轮询定时器（卸载/取消时清理，防止泄漏与跨流程串扰） */
   const githubPollTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
 
-  /** 挂载时读取同步状态（配置回填 + 上次同步时间 + 凭据状态） */
+  /** 挂载时读取同步状态（配置回填 + 上次同步时间 + 凭据状态 + autosync） */
   const loadStatus = async (): Promise<void> => {
     patch({ loading: true, loadError: null })
     try {
       const info = await api.status()
-      patch({ loading: false, statusInfo: info, repoUrl: info.repoUrl ?? '', gitBin: info.gitBin ?? '' })
+      patch({
+        loading: false,
+        statusInfo: info,
+        repoUrl: info.repoUrl ?? '',
+        gitBin: info.gitBin ?? '',
+        ...(info.autosync !== undefined
+          ? {
+              autosync: info.autosync,
+              autosyncEnabled: info.autosync.enabled,
+              autosyncInterval: info.autosync.interval,
+            }
+          : {}),
+      })
+      // 独立拉取 autosync（若 status 未带则补一次）
+      if (info.autosync === undefined) {
+        void loadAutosync()
+      }
     } catch (err) {
       patch({ loading: false, loadError: err instanceof Error ? err.message : String(err) })
     }
   }
 
+  /** 读取自动同步状态（GET /sync/autosync）。 */
+  const loadAutosync = async (): Promise<void> => {
+    try {
+      const autosync = await api.autosyncStatus()
+      patch({ autosync, autosyncEnabled: autosync.enabled, autosyncInterval: autosync.interval })
+    } catch (err) {
+      patch({ error: err instanceof Error ? err.message : String(err) })
+    }
+  }
+
+  /** 读取远端历史快照列表（「选择历史快照」下拉数据源）。 */
+  const loadSnapshots = async (): Promise<void> => {
+    try {
+      const res = await api.snapshotsList(payload())
+      patch({ snapshots: res.snapshots })
+    } catch {
+      // 拉取失败不阻断主流程（下拉留空，用户可重试）
+    }
+  }
+
   useEffect(() => {
     void loadStatus()
     // api 为注入单例（注册时创建），生命周期内稳定；仅挂载时加载一次
@@ -204,25 +266,57 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
     }
   }
 
-  /** P2：自动应用（Host 端 engine.merge + classifyMergePlan + applyMergePlan 走完整链路） */
-  const runApply = async (): Promise<void> => {
-    patch({ busy: 'apply', error: null, applyReport: null })
+  /* ------------------------------------------------ 一键同步（方案 A） */
+
+  /** 一键同步：拉取 → 差异确认会话（先取消旧会话，再发起新会话）。 */
+  const runSync = async (snapshotId?: string): Promise<void> => {
+    // 清理旧的差异确认会话（避免残留临时 ZIP / 同 key 冲突）
+    if (state.confirmSession !== null) {
+      try { await api.cancel(state.confirmSession.syncSessionId) } catch { /* 尽力清理 */ }
+    }
+    patch({ busy: 'sync', error: null, confirmSession: null, lastRestoreId: null })
     try {
-      const report = await api.apply(payload())
-      patch({ busy: null, applyReport: report })
+      const session = await api.sync({ ...payload(), ...(snapshotId !== undefined && snapshotId !== '' ? { snapshotId } : {}) })
+      if (!session.ok) {
+        patch({ busy: null, error: session.message ?? t('syncflow.syncFailed') })
+        return
+      }
+      patch({ busy: null, confirmSession: session, token: '' })
+      void loadSnapshots()
     } catch (err) {
       patch({ busy: null, error: err instanceof Error ? err.message : String(err) })
     }
   }
 
-  /** P2：一键回滚（按 apply 返回的 restoreId 调 Host /sync/rollback） */
-  const runRollback = async (restoreId: string): Promise<void> => {
-    patch({ busy: 'rollback', error: null })
+  /** 用户取消差异确认：清除会话，复位到空闲。 */
+  const cancelConfirm = (): void => {
+    patch({ confirmSession: null })
+  }
+
+  /** 从 SyncConfirmView 透传的一键回滚完成信号。 */
+  const onRollbackApplied = (): void => {
+    patch({ lastRestoreId: null })
+  }
+
+  /* ------------------------------------------------ 自动同步（方案 A） */
+
+  const toggleAutosync = async (enabled: boolean): Promise<void> => {
+    patch({ autosyncEnabled: enabled, error: null })
     try {
-      await api.rollback({ restoreId })
-      patch({ busy: null, applyReport: null })
+      const updated = await api.autosyncUpdate({ enabled, interval: state.autosyncInterval })
+      patch({ autosync: updated, autosyncEnabled: updated.enabled, autosyncInterval: updated.interval })
     } catch (err) {
-      patch({ busy: null, error: err instanceof Error ? err.message : String(err) })
+      patch({ error: err instanceof Error ? err.message : String(err) })
+    }
+  }
+
+  const updateAutosyncInterval = async (interval: AutosyncInterval): Promise<void> => {
+    patch({ autosyncInterval: interval, error: null })
+    try {
+      const updated = await api.autosyncUpdate({ enabled: state.autosyncEnabled, interval })
+      patch({ autosync: updated, autosyncEnabled: updated.enabled, autosyncInterval: updated.interval })
+    } catch (err) {
+      patch({ error: err instanceof Error ? err.message : String(err) })
     }
   }
 
@@ -237,6 +331,11 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
   const githubBusy =
     state.github.phase === 'starting' || state.github.phase === 'waiting' || state.github.phase === 'polling'
 
+  const autosyncText = state.autosync !== null ? autosyncStatusText(state.autosync, uiT) : t('autosync.statusNever')
+  const autosyncCountdown = state.autosync !== null && state.autosync.elapsedMs >= 0
+    ? formatIntervalDuration(computeAutosyncCountdown(state.autosync.elapsedMs, autosyncIntervalMs(state.autosync.interval)), uiT)
+    : null
+
   return (
     <div className={css.viewBody}>
       <SectionTitle title={t('section.label')} subtitle={t('section.description')} />
@@ -270,7 +369,7 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
                 className={css.input}
                 value={state.token}
                 autoComplete="off"
-                placeholder="ghp_…（可选）"
+                placeholder={t('config.tokenPlaceholder')}
                 disabled={state.busy !== null}
                 onChange={(e: ChangeEvent<HTMLInputElement>) => { patch({ token: e.target.value }) }}
               />
@@ -339,9 +438,16 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
             </div>
           </Card>
 
-          {/* 操作 */}
+          {/* 一键同步 + 手动推送/拉取 */}
           <div className={css.actionRow}>
-            <Button variant="primary" disabled={!buttons.canPush || githubBusy} onClick={() => { void runPush() }}>
+            <Button
+              variant="primary"
+              disabled={state.busy !== null || state.repoUrl.trim() === ''}
+              onClick={() => { void runSync() }}
+            >
+              {state.busy === 'sync' ? <Spinner label={t('syncflow.syncing')} /> : t('syncflow.button')}
+            </Button>
+            <Button disabled={!buttons.canPush || githubBusy} onClick={() => { void runPush() }}>
               {state.busy === 'push' ? <Spinner label={buttons.pushLabel} /> : buttons.pushLabel}
             </Button>
             <Button disabled={!buttons.canPull || githubBusy} onClick={() => { void runPull() }}>
@@ -349,8 +455,48 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
             </Button>
           </div>
 
+          {/* 选择历史快照下拉 */}
+          <div className={css.statRow}>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{t('syncflow.selectSnapshot')}</span>
+              <select
+                className={css.input}
+                value={state.selectedSnapshotId}
+                disabled={state.busy !== null}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+                  const id = e.target.value
+                  patch({ selectedSnapshotId: id })
+                  void runSync(id === '' ? undefined : id)
+                }}
+              >
+                <option value="">{t('syncflow.latestSnapshot')}</option>
+                {state.snapshots.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.id}{t('syncflow.snapshotOption', { date: s.createdAt.slice(0, 10), count: String(s.sectionCount) })}
+                  </option>
+                ))}
+              </select>
+              {state.snapshots.length === 0 && <span className={css.hint}>{t('syncflow.noSnapshots')}</span>}
+            </label>
+          </div>
+
           {state.error !== null && <ErrorBanner error={state.error} />}
 
+          {/* 一键同步差异确认（拉取 → 逐项确认 → 导入） */}
+          {state.confirmSession !== null && (
+            <SyncConfirmView
+              api={api}
+              syncSessionId={state.confirmSession.syncSessionId}
+              snapshotId={state.confirmSession.snapshotId}
+              items={state.confirmSession.items}
+              needsReview={state.confirmSession.needsReview}
+              compatibility={state.confirmSession.compatibility}
+              t={t}
+              onCancel={cancelConfirm}
+              onRollbackDone={onRollbackApplied}
+            />
+          )}
+
           {/* 推送结果 */}
           {pushView !== null && (
             <Card>
@@ -406,64 +552,61 @@ export function SyncSettingsView({ api, t }: SyncSettingsViewProps) {
             </Card>
           )}
 
-          {/* P2：自动应用（拉取后可触发；Host 端合并 + 写本地 + 失败回滚） */}
-          <div className={css.actionRow}>
-            <Button
-              variant="primary"
-              disabled={state.busy !== null || state.pullReport === null}
-              onClick={() => { void runApply() }}
-            >
-              {state.busy === 'apply' ? <Spinner label="自动应用中…" /> : '自动应用（合并 + 写本地）'}
-            </Button>
-          </div>
-
-          {/* P2：自动应用结果 */}
-          {state.applyReport !== null && (
-            <Card>
-              <span className={css.groupLabel}>自动应用结果</span>
-              <Banner kind={state.applyReport.ok ? 'ok' : 'error'}>
-                {state.applyReport.ok
-                  ? `已应用 ${state.applyReport.applied.length} 个分区（restoreId=${state.applyReport.restoreId}）`
-                  : `自动应用失败（已整体回滚，restoreId=${state.applyReport.restoreId}）`}
-              </Banner>
-              {state.applyReport.applied.length > 0 && (
-                <div>
-                  <span className={css.fieldLabel}>已写入</span>
-                  <div className={css.statRow}>
-                    {state.applyReport.applied.map((sid) => <Badge key={sid} kind="ok">{sid}</Badge>)}
-                  </div>
-                </div>
-              )}
-              {state.applyReport.warnings.length > 0 && (
-                <div>
-                  <span className={css.fieldLabel}>告警</span>
-                  <ul className={css.warnList}>
-                    {state.applyReport.warnings.map((w, i) => <li key={i}>{w}</li>)}
-                  </ul>
-                </div>
-              )}
-              {state.applyReport.review.length > 0 && (
-                <div>
-                  <span className={css.fieldLabel}>待审（已入 sync-review-queue.json）</span>
-                  <ul className={css.warnList}>
-                    {state.applyReport.review.map((r, i) => <li key={i}>{r.sectionId} — {r.description}</li>)}
-                  </ul>
-                </div>
-              )}
-              {!state.applyReport.ok && state.applyReport.restoreId !== '' && (
-                <Button
-                  variant="danger"
-                  disabled={state.busy !== null}
-                  onClick={() => { void runRollback(state.applyReport!.restoreId) }}
-                >
-                  {state.busy === 'rollback' ? <Spinner label="回滚中…" /> : '回滚到应用前'}
-                </Button>
+          {/* 自动同步设置（方案 A） */}
+          <Card>
+            <span className={css.groupLabel}>{t('autosync.title')}</span>
+            <span className={css.hint}>{t('autosync.description')}</span>
+            <label className={css.checkboxRow}>
+              <input
+                type="checkbox"
+                checked={state.autosyncEnabled}
+                disabled={state.busy !== null}
+                onChange={(e: ChangeEvent<HTMLInputElement>) => { void toggleAutosync(e.target.checked) }}
+              />
+              <span>{t('autosync.enable')}</span>
+            </label>
+            <label className={css.field}>
+              <span className={css.fieldLabel}>{t('autosync.interval')}</span>
+              <select
+                className={css.input}
+                value={state.autosyncInterval}
+                disabled={state.busy !== null}
+                onChange={(e: ChangeEvent<HTMLSelectElement>) => {
+                  void updateAutosyncInterval(e.target.value as AutosyncInterval)
+                }}
+              >
+                {AUTOSYNC_INTERVAL_OPTIONS.map((iv) => (
+                  <option key={iv} value={iv}>{intervalLabel(iv, t)}</option>
+                ))}
+              </select>
+              <span className={css.hint}>{t('autosync.intervalHint')}</span>
+            </label>
+            <div className={css.statRow}>
+              <Badge kind={state.autosync?.lastRunStatus === 'failed' ? 'error' : state.autosync?.lastRunStatus === 'skipped' ? 'warn' : 'info'}>
+                {autosyncText}
+              </Badge>
+              {autosyncCountdown !== null && state.autosyncEnabled && (
+                <Badge kind="info">{t('autosync.nextRun', { time: autosyncCountdown })}</Badge>
               )}
-            </Card>
-          )}
+            </div>
+          </Card>
 
           {/* P2：同步历史视图（Host /sync/history 端点） */}
-          <SyncHistoryView api={api} />
+          <SyncHistoryView api={api} t={t} />
     </div>
   )
-}
+}
+
+/** AutosyncInterval → 可读标签（复用 i18n interval 键）。 */
+function intervalLabel(iv: AutosyncInterval, t: TranslateNS<'config-manager-sync'>): string {
+  switch (iv) {
+    case '5m': return t('autosync.interval5m');
+    case '15m': return t('autosync.interval15m');
+    case '30m': return t('autosync.interval30m');
+    case '60m': return t('autosync.interval60m');
+    case '6h': return t('autosync.interval6h');
+    case '12h': return t('autosync.interval12h');
+    case '24h': return t('autosync.interval24h');
+    default: return iv;
+  }
+}