dsh-config-manager 0.1.78 → 0.1.80

package/src/client/sync/AutosyncCard.tsx

@@ -11,11 +11,12 @@ import { Badge, Card } from '../common/ui.tsx'
 import { Select } from '../common/Select.tsx'
 import { InfoHint } from '../common/InfoHint.tsx'
 import {
-  autosyncIntervalMs, autosyncSkipDetail, autosyncStatusText, computeAutosyncCountdown, formatIntervalDuration,
+  autosyncFailureMessage, autosyncIntervalMs, autosyncSkipDetail, autosyncStatusText, computeAutosyncCountdown,
+  formatIntervalDuration,
 } from './sync-view.ts'
 // 展示文本渲染前统一脱敏（与 ErrorBanner/ReportView 同规矩）
 import { redact } from '../../security/redaction.ts'
-import type { AutosyncInterval } from './sync-api.ts'
+import type { AutosyncAutoApplyTier, AutosyncConflictPolicy, AutosyncInterval } from './sync-api.ts'
 import type { ChannelSyncState } from './sync-view.ts'
 import { autosyncIntervalKey } from '../../ui/sync-settings-view.ts'
 import type { SyncAutosyncIntervalKey } from '../../ui/sync-settings-view.ts'
@@ -33,14 +34,20 @@ function intervalLabel(iv: AutosyncInterval, t: TranslateNS<'config-manager-sync
 /* ------------------------------------------- 拆分出的 render 段（t42，同文件内子组件） */
 
 /** 自动同步设置（当前通道）：总开关 + 间隔下拉 + 状态徽章（文案/倒计时在卡内派生）。 */
-export function AutosyncCard({ t, uiT, settings, busy, onToggleAutosync, onUpdateInterval }: {
+export function AutosyncCard({ t, uiT, settings, busy, onToggleAutosync, onUpdateInterval, onUpdateOptions }: {
   t: TranslateNS<'config-manager-sync'>
   uiT: UiT
   settings: Pick<ChannelSyncState, 'autosync' | 'autosyncEnabled' | 'autosyncInterval'>
   busy: boolean
   onToggleAutosync: (enabled: boolean) => void
   onUpdateInterval: (interval: AutosyncInterval) => void
+  /** 真·自动同步的三个策略项（realtime / 自动应用等级 / 冲突策略）；只传要改的字段 */
+  onUpdateOptions: (patch: { realtime?: boolean; autoApplyTier?: AutosyncAutoApplyTier; conflictPolicy?: AutosyncConflictPolicy }) => void
 }) {
+  // 三件套读自宿主状态（缺省值集中在这里，与宿主 DEFAULT_AUTOSYNC_* 的口径一致）
+  const realtime = settings.autosync?.realtime ?? true
+  const autoApplyTier: AutosyncAutoApplyTier = settings.autosync?.autoApplyTier ?? 'medium'
+  const conflictPolicy: AutosyncConflictPolicy = settings.autosync?.conflictPolicy ?? 'local'
   const autosyncText = settings.autosync !== null ? autosyncStatusText(settings.autosync, uiT) : t('autosync.statusNever')
   /** 距下次自动同步剩余 ms（null = 从未运行；0 = 已到期） */
   const autosyncCountdownMs = settings.autosync !== null && settings.autosync.elapsedMs >= 0
@@ -49,9 +56,10 @@ export function AutosyncCard({ t, uiT, settings, busy, onToggleAutosync, onUpdat
   // issue #79：本轮为什么没同步 / 失败了什么，必须看得见 —— 此前只写进 info 级日志
   // （默认日志级别 warn），界面恒无提示，用户只能去翻 sync-autosync.json。
   const skipDetail = settings.autosync !== null ? autosyncSkipDetail(settings.autosync, t) : null
-  const lastMessage = settings.autosync?.lastRunMessage !== undefined && settings.autosync.lastRunMessage !== ''
-    ? redact(settings.autosync.lastRunMessage)
-    : null
+  // issue #105：只有本轮真的失败才渲染错误原文。此前只看「非空」，于是上一轮（甚至十天前）
+  // 的旧错误会被当成当前结论继续展示；判据现在收在 autosyncFailureMessage 一处。
+  const failureMessage = settings.autosync !== null ? autosyncFailureMessage(settings.autosync) : null
+  const lastMessage = failureMessage === null ? null : redact(failureMessage)
   return (
     <Card>
       <span className={css.groupLabel}>{t('autosync.title')} <InfoHint text={t('autosync.description')} label={t('common.infoHint')} /></span>
@@ -74,6 +82,41 @@ export function AutosyncCard({ t, uiT, settings, busy, onToggleAutosync, onUpdat
           options={AUTOSYNC_INTERVAL_OPTIONS.map((iv) => ({ value: iv, label: intervalLabel(iv, t) }))}
         />
       </label>
+      <label className={css.checkboxRow}>
+        <input
+          type="checkbox"
+          checked={realtime}
+          disabled={busy}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => { onUpdateOptions({ realtime: e.target.checked }) }}
+        />
+        <span>{t('autosync.realtime')} <InfoHint text={t('autosync.realtimeHint')} label={t('common.infoHint')} /></span>
+      </label>
+      <label className={css.field}>
+        <span className={css.fieldLabel}>{t('autosync.autoApplyTier')} <InfoHint text={t('autosync.autoApplyTierHint')} label={t('common.infoHint')} /></span>
+        <Select
+          value={autoApplyTier}
+          disabled={busy}
+          ariaLabel={t('autosync.autoApplyTier')}
+          onChange={(next) => { onUpdateOptions({ autoApplyTier: next as AutosyncAutoApplyTier }) }}
+          options={[
+            { value: 'low', label: t('autosync.tierLow') },
+            { value: 'medium', label: t('autosync.tierMedium') },
+          ]}
+        />
+      </label>
+      <label className={css.field}>
+        <span className={css.fieldLabel}>{t('autosync.conflictPolicy')} <InfoHint text={t('autosync.conflictPolicyHint')} label={t('common.infoHint')} /></span>
+        <Select
+          value={conflictPolicy}
+          disabled={busy}
+          ariaLabel={t('autosync.conflictPolicy')}
+          onChange={(next) => { onUpdateOptions({ conflictPolicy: next as AutosyncConflictPolicy }) }}
+          options={[
+            { value: 'local', label: t('autosync.conflictLocal') },
+            { value: 'ask', label: t('autosync.conflictAsk') },
+          ]}
+        />
+      </label>
       <div className={css.statRow}>
         <Badge kind={settings.autosync?.lastRunStatus === 'failed' ? 'error' : settings.autosync?.lastRunStatus === 'skipped' ? 'warn' : 'info'}>
           {autosyncText}

package/src/client/sync/MergeModal.tsx

@@ -0,0 +1,220 @@
+/**
+ * 远程合并弹窗（T-ui-merge 的装配层）—— 弹窗壳 + 状态 + 请求都在这一个文件里：
+ *   - 预览 / 裁决草稿 / 执行结果 / 三个进行中标志 / 错误 → 组件自持（不持久化）；
+ *   - 视觉与列表渲染 → `MergePreviewView.tsx`（纯展示）；
+ *   - **底部动作走 Modal.Footer（DESIGN UI-23）**：「执行合并」是写操作 + 过 mutation gate，
+ *     必须与「关闭」同处底栏，正文里不制造第二条执行通道。
+ *
+ * 为什么把状态搬到这里：裁决结果只能由弹窗底栏触发执行，而底栏在 Modal.Body 之外 ——
+ * 状态若留在视图里，就要靠 ref / render-prop 把按钮递出去，反而更脆。
+ *
+ * 方案 A（一键同步命中合并路径）：预览由父级那一次 /sync/merge-preview 预置（seed），
+ * 打开即渲染、**不再二次请求**；「重新预览」/错误重试才显式再拉一次（只读）。
+ */
+import { useEffect, useState } from 'react'
+import type { TranslateNS } from '../client-types.ts'
+import { Modal } from '../common/Modal.tsx'
+import { Button } from '../common/ui.tsx'
+import { toast } from '../common/toast-store.ts'
+import { redact } from '../../security/redaction.ts'
+import type {
+  MergeApplyResponse, MergePreviewPayload, MergePreviewResponse, SyncApi, SyncPushPayload,
+} from './sync-api.ts'
+import type { SyncChannel } from './sync-view.ts'
+import {
+  applyBulkResolution, buildMergeResolutions, hasApplicableSections, initialResolutionDraft,
+  mergeDecisionCounts, mergeResultView, mergeSectionRows,
+} from './merge-view.ts'
+import type { MergeBulkAction, MergeResolutionAction, MergeResolutionDraft } from './merge-view.ts'
+import { MergePreviewView } from './MergePreviewView.tsx'
+import css from '../config-manager.module.css'
+
+/**
+ * 预览/执行共用的请求体：**通道请求体在前**（transport / 地址 / 凭据引用，与 push/pull 同源），
+ * 再叠加预览可选字段（decryptPassword / pathMappings / snapshotId）。
+ * 宿主侧契约是 MergePreviewPayload，但实际请求一直带着通道字段（见 sync-entry.ts 的同款写法的原因）——
+ * 两者取交集才是真实形状。
+ */
+type MergeRequestBody = SyncPushPayload & MergePreviewPayload
+
+/** 一键同步分派命中合并路径时递进来的种子（预览已取到，通道 = 该次请求用的通道）。 */
+export interface MergeSeed {
+  channel: SyncChannel
+  preview: MergePreviewResponse
+}
+
+export interface MergeModalProps {
+  /** 打开态（种子的有无即开关：null = 关闭）。关闭时保留壳，交给 Radix 播退场动画。 */
+  seed: MergeSeed | null
+  onClose: () => void
+  api: SyncApi
+  t: TranslateNS<'config-manager-sync'>
+  /** 该通道的请求体（父级用当次表单快照构造；弹窗不读通道状态、不拼 URL） */
+  channelBody: (channel: SyncChannel) => SyncPushPayload
+  /** 分区 id → 本地化名称 */
+  sectionName: (id: string) => string
+  /** 该通道的解密密码（可选，仅内存；留空 = 用本机已存凭据） */
+  decryptPasswordOf: (channel: SyncChannel) => string
+  /** 父级忙碌（其它同步操作进行中）→ 禁止并发写 */
+  busy?: boolean
+  /** 执行成功后通知父级刷新同步状态 */
+  onApplied?: () => void
+  /** 回滚完成后通知父级刷新同步状态 */
+  onRolledBack?: () => void
+}
+
+/**
+ * 远程合并弹窗：概览 → 分区裁决 → 执行（底栏）→ 结果（含一键回滚）。
+ *
+ * 草稿**不持久化**：裁决是当次操作的一部分，刷新页面等于放弃本次裁决，
+ * 不会静默留下半套选择（与旧行为一致）。
+ */
+export function MergeModal({
+  seed, onClose, api, t, channelBody, sectionName, decryptPasswordOf, busy = false,
+  onApplied, onRolledBack,
+}: MergeModalProps) {
+  const [preview, setPreview] = useState<MergePreviewResponse | null>(seed?.preview ?? null)
+  const [draft, setDraft] = useState<MergeResolutionDraft>(() => initialResolutionDraft(seed?.preview ?? null))
+  const [result, setResult] = useState<MergeApplyResponse | null>(null)
+  const [loading, setLoading] = useState(false)
+  const [applying, setApplying] = useState(false)
+  const [rollingBack, setRollingBack] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // 新的种子 = 新的远端快照：旧裁决属于上一份快照，必须整体丢弃（不做「尽量保留」）。
+  useEffect(() => {
+    if (seed === null) return
+    setPreview(seed.preview)
+    setDraft(initialResolutionDraft(seed.preview))
+    setResult(null)
+    setError(null)
+  }, [seed])
+
+  /** 该通道的请求体（解密密码只进请求体，不落任何状态）。 */
+  const requestBody = (channel: SyncChannel): MergeRequestBody => {
+    const password = decryptPasswordOf(channel)
+    return { ...channelBody(channel), ...(password !== '' ? { decryptPassword: password } : {}) }
+  }
+
+  /** 只读预览：拉远端快照做三方合并（宿主侧零写入），并按结果重建裁决草稿。 */
+  const reload = async (): Promise<void> => {
+    if (seed === null) return
+    setLoading(true)
+    setError(null)
+    try {
+      const next = await api.mergePreview(requestBody(seed.channel))
+      setPreview(next)
+      setDraft(initialResolutionDraft(next))
+      setResult(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err))
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const setAction = (sectionId: string, action: MergeResolutionAction): void => {
+    setDraft((cur) => ({ ...cur, [sectionId]: action }))
+  }
+
+  const bulk = (action: MergeBulkAction): void => {
+    setDraft((cur) => applyBulkResolution(preview, cur, action))
+  }
+
+  /** 执行合并（写动作，过宿主 mutation gate）；结果如实展示，包括 pendingConflicts。 */
+  const apply = async (): Promise<void> => {
+    if (seed === null) return
+    setApplying(true)
+    setError(null)
+    try {
+      const report = await api.applyMerge({ ...requestBody(seed.channel), resolutions: buildMergeResolutions(draft) })
+      setResult(report)
+      if (report.ok) toast.ok(t('merge.toast.applied'))
+      else toast.error(t('merge.toast.applyFailed'))
+      onApplied?.()
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err)
+      setError(message)
+      toast.error(t('merge.toast.applyFailed') + t('common.labelSeparator') + redact(message))
+    } finally {
+      setApplying(false)
+    }
+  }
+
+  /** 一键回滚：复用既有 /sync/rollback 数据流（restoreId 来自本次执行）。 */
+  const rollback = async (): Promise<void> => {
+    const view = mergeResultView(result)
+    if (view === null || view.restoreId === null) return
+    setRollingBack(true)
+    try {
+      const report = await api.rollback({ restoreId: view.restoreId })
+      if (report.full) toast.ok(t('merge.result.rolledBackTo', { id: view.restoreId }))
+      else toast.error(t('merge.result.rollbackIncomplete'))
+      onRolledBack?.()
+    } catch (err) {
+      toast.error(t('merge.toast.rollbackFailed') + t('common.labelSeparator') + redact(err instanceof Error ? err.message : String(err)))
+    } finally {
+      setRollingBack(false)
+    }
+  }
+
+  const rows = mergeSectionRows(preview)
+  const counts = mergeDecisionCounts(preview, draft)
+  // issue #106：门控必须把裁决草稿算进来，否则「0 可自动应用 + 全是冲突」时裁决完也点不动
+  const applicable = hasApplicableSections(preview, draft)
+  const blocked = busy || loading || preview === null || rows.length === 0
+
+  return (
+    <Modal
+      open={seed !== null}
+      onClose={onClose}
+      title={t('merge.title')}
+      wide
+      busy={busy || applying}
+      cardStyle={{ width: 'min(860px, 100%)', maxHeight: '88vh' }}
+    >
+      <Modal.Header
+        title={t('merge.title')}
+        closeLabel={t('common.close')}
+        onClose={onClose}
+        closeDisabled={busy || applying}
+      />
+      <Modal.Body scroll style={{ maxHeight: '72vh' }}>
+        <MergePreviewView
+          api={api}
+          t={t}
+          preview={preview}
+          draft={draft}
+          result={result}
+          loading={loading}
+          rollingBack={rollingBack}
+          error={error}
+          busy={busy || applying}
+          sectionName={sectionName}
+          onReload={() => { void reload() }}
+          onAction={setAction}
+          onBulk={bulk}
+          onRollback={() => { void rollback() }}
+          showTitle={false}
+        />
+      </Modal.Body>
+      {/* 底栏：裁决进度（左）+ 关闭 / 执行合并（右）。执行是唯一写入口。 */}
+      <Modal.Footer>
+        <span className={css.mergeFooterSummary}>
+          {t('merge.apply.summary', { decided: String(counts.decided), needs: String(counts.needsDecision) })}
+          {counts.applicable > 0 ? ' · ' + t('merge.apply.willApply', { n: String(counts.applicable) }) : ''}
+        </span>
+        <span className={css.statusSpacer} />
+        <Button variant="ghost" disabled={applying} onClick={onClose}>{t('common.close')}</Button>
+        <Button
+          variant="primary"
+          loading={applying}
+          disabled={blocked || !applicable}
+          onClick={() => { void apply() }}
+        >
+          {applying ? t('merge.applying') : t('merge.apply')}
+        </Button>
+      </Modal.Footer>
+    </Modal>
+  )
+}

package/src/client/sync/MergePreviewView.tsx

@@ -0,0 +1,306 @@
+/**
+ * 远程合并裁决视图（T-ui-merge）—— **纯展示组件**：
+ *   - 列表投影 / 决策标签 / 计数 / 待裁决提示 → `./merge-view.ts` 纯函数（node 单测覆盖）；
+ *   - 状态（预览 / 裁决草稿 / 执行结果 / 进行中标志）与请求由 `MergeModal.tsx` 持有：
+ *     弹窗把「执行合并」放进 Modal.Footer（DESIGN UI-23），因此这里不自持任何写状态。
+ *
+ * 交互契约（Lead 2026-10-18 冻结）：**裁决粒度 = 分区**。
+ *   分区卡承载动作按钮（采用本地 / 采用远端 / 采用自动合并），冲突明细只做展示；
+ *   因此界面常驻写明「冲突按分区整体裁决（本版不做逐条裁决）」—— 走 ⓘ，不占正文。
+ *
+ * 两个按钮口径（2026-10-21 用户裁决后）：
+ *   - **「采用自动合并」只在真有自动合并结果时才出现**（decision === 'merge'）；
+ *     以前常驻一个永远灰着的按钮，用户分不清「没有结果」还是「坏了」；
+ *   - **没有「跳过」按钮**：它既不是解决、又与「什么都不点」等价（未点名的分区引擎不会应用），
+ *     留着只会让人以为已经处理过。
+ *
+ * 诚实性三条（都由本组件兑现）：
+ *   ① 待裁决的分区本次不会被应用，且下次同步仍会出现 —— 用一行常驻提示说明；
+ *   ② 执行结果里的 pendingConflicts 必须显示出来，不得把「还有冲突」说成「已解决」；
+ *   ③ 所有展示文本（含引擎回传的三列预览）渲染前过 redact（merge-view.ts 已做一次，
+ *      这里对原始错误/告警再过一次）。
+ */
+import type { TranslateNS } from '../client-types.ts'
+import { Badge, Banner, Button, SectionTitle } from '../common/ui.tsx'
+import { CheckIcon, RefreshIcon } from '../common/Icon.tsx'
+import { Skeleton } from '../common/Skeleton.tsx'
+import { ErrorBanner } from '../common/ErrorBanner.tsx'
+import { InfoHint } from '../common/InfoHint.tsx'
+import { redact } from '../../security/redaction.ts'
+import type { MergeApplyResponse, MergePreviewResponse, SyncApi } from './sync-api.ts'
+import {
+  hasApplicableSections, mergeDecisionCounts, mergeResultView, mergeSectionRows, mergeSummaryItems,
+  needsNoAncestorNotice,
+} from './merge-view.ts'
+import type { MergeBulkAction, MergeResolutionAction, MergeResolutionDraft } from './merge-view.ts'
+import css from '../config-manager.module.css'
+
+export interface MergePreviewViewProps {
+  /** 展示层翻译器（`config-manager-sync` 字典） */
+  api: SyncApi
+  t: TranslateNS<'config-manager-sync'>
+  /** 预览结果（null = 还没取到；父级持有点位） */
+  preview: MergePreviewResponse | null
+  /** 裁决草稿（分区 id → 动作；缺省 = 本次不动，由父级初始化） */
+  draft: MergeResolutionDraft
+  /** 执行结果（null = 本次还没执行过） */
+  result: MergeApplyResponse | null
+  /** 预览请求在途 */
+  loading: boolean
+  /** 回滚在途 */
+  rollingBack: boolean
+  /** 预览/执行错误（原文，渲染前 redact） */
+  error: string | null
+  /** 父级忙碌（其它同步操作进行中）→ 禁用裁决与批量按钮 */
+  busy?: boolean
+  /** 分区 id → 本地化名称（父级用 sectionLabeler(cmT) 提供，与同步页其它位置同源） */
+  sectionName: (id: string) => string
+  /** 重新拉取只读预览（父级负责请求，本组件只发信号） */
+  onReload: () => void
+  /** 分区级裁决 */
+  onAction: (sectionId: string, action: MergeResolutionAction) => void
+  /** 批量裁决（对全部分区生效） */
+  onBulk: (action: MergeBulkAction) => void
+  /** 一键回滚（restoreId 取自本次执行结果） */
+  onRollback: () => void
+  /** 是否渲染自带标题（默认 true；放进弹窗时由 Modal 提供标题，避免同一个标题出现两次） */
+  showTitle?: boolean
+}
+
+/**
+ * 远程合并预览 + 裁决 + 结果展示。
+ *
+ * 版式（2026-10 重做）：概览指标块 → 工具栏（批量 / 重新预览）→ 分区卡（裁决片 + 冲突卡）
+ * → 语义提示 → 结果卡。执行按钮在弹窗 Footer，故列表结束后不再堆一排按钮。
+ */
+export function MergePreviewView({
+  api, t, preview, draft, result, loading, rollingBack, error, busy = false,
+  sectionName, onReload, onAction, onBulk, onRollback, showTitle = true,
+}: MergePreviewViewProps) {
+  const rows = mergeSectionRows(preview)
+  const summary = mergeSummaryItems(preview)
+  const counts = mergeDecisionCounts(preview, draft)
+  const applicable = hasApplicableSections(preview, draft)
+  const anyMerged = rows.some((row) => row.canUseMerged)
+  const resultView = mergeResultView(result)
+
+  return (
+    <div className={css.mergeView}>
+      {showTitle && (
+        <SectionTitle
+          title={t('merge.title')}
+          info={<InfoHint text={t('merge.subtitle')} label={t('common.infoHint')} />}
+        />
+      )}
+
+      {/* 概览：四个指标块。色只表达语义（可自动应用 / 待裁决 / 冲突 / 无变化），不做装饰。 */}
+      <div className={css.mergeOverview}>
+        {summary.map((item) => (
+          <div key={item.labelKey} className={css.mergeTile} data-tone={item.tone}>
+            <span className={css.mergeTileValue}>{String(item.value)}</span>
+            <span className={css.mergeTileLabel}>{t(item.labelKey)}</span>
+          </div>
+        ))}
+      </div>
+
+      {preview !== null && needsNoAncestorNotice(preview) && <Banner kind="warn">{t('merge.noAncestor')}</Banner>}
+
+      {/* 工具栏：批量裁决（一次改全部分区的草稿）+ 重新预览（只读）。
+          「全部采用自动合并」「留到下次」只在有意义时出现（见 MERGE_BULK_BUTTONS 的 filter）。 */}
+      <div className={css.mergeToolbar}>
+        <span className={css.mergeToolbarLabel}>{t('merge.bulk.title')}</span>
+        {MERGE_BULK_BUTTONS.filter((btn) => (
+          (btn.action !== 'useMerged' || anyMerged) && (btn.action !== 'leavePending' || counts.needsDecision > 0)
+        )).map((btn) => (
+          <Button
+            key={btn.action}
+            size="sm"
+            disabled={busy || loading || rows.length === 0}
+            onClick={() => { onBulk(btn.action) }}
+          >
+            {t(btn.key)}
+          </Button>
+        ))}
+        <span className={css.statusSpacer} />
+        <InfoHint text={t('merge.scopeNotice') + ' ' + t('merge.bulk.hint')} label={t('common.infoHint')} />
+        <Button size="sm" disabled={busy || loading} onClick={onReload}>
+          <span className={css.mergeIconLabel}>
+            <RefreshIcon size={12} />
+            {t('merge.reload')}
+          </span>
+        </Button>
+      </div>
+
+      {loading && <Skeleton count={3} label={t('merge.loading')} />}
+      {error !== null && (
+        <ErrorBanner
+          error={t('merge.error.previewFailed') + t('common.labelSeparator') + redact(error)}
+          onRetry={onReload}
+          retrying={loading}
+          t={api.t}
+        />
+      )}
+
+      {preview !== null && !loading && rows.length === 0 && (
+        <div className={css.hint}>
+          {t('merge.empty')}
+          <br />
+          {t('merge.emptyHint')}
+        </div>
+      )}
+
+      {rows.length > 0 && (
+        <>
+          <span className={css.groupLabel}>{t('merge.section.title')}</span>
+          <div className={css.mergeScroll} data-fit="modal">
+            {rows.map((row) => {
+              const current = draft[row.id] ?? (row.needsDecision ? 'skip' : null)
+              return (
+                <div key={row.id} className={css.mergeSection}>
+                  <div className={css.mergeSectionHead}>
+                    <span className={css.mergeSectionName}>{sectionName(row.id)}</span>
+                    <Badge kind={row.tone}>{t(row.decisionKey)}</Badge>
+                    <span className={css.statusSpacer} />
+                    {row.conflictCount > 0 && (
+                      <span className={css.mergeMeta}>{t('merge.conflictCount', { n: String(row.conflictCount) })}</span>
+                    )}
+                    {row.autoMerged !== null && row.autoMerged > 0 && (
+                      <span className={css.mergeMeta}>{t('merge.autoMergedCount', { n: String(row.autoMerged) })}</span>
+                    )}
+                  </div>
+
+                  <div className={css.mergeActions} role="group" aria-label={sectionName(row.id)}>
+                    {MERGE_ACTION_BUTTONS.filter((btn) => btn.action !== 'useMerged' || row.canUseMerged).map((btn) => {
+                      const active = current === btn.action
+                      return (
+                        <Button
+                          key={btn.action}
+                          size="sm"
+                          disabled={busy}
+                          className={active ? css.mergeActionActive : undefined}
+                          title={active ? t('merge.action.current') : undefined}
+                          onClick={() => { onAction(row.id, btn.action) }}
+                        >
+                          <span className={css.mergeIconLabel}>
+                            {active && <CheckIcon size={12} />}
+                            {t(btn.key)}
+                          </span>
+                        </Button>
+                      )
+                    })}
+                  </div>
+
+                  {row.conflicts.map((conflict) => (
+                    <div key={conflict.path} className={css.mergeConflictRow}>
+                      <div className={css.mergeConflictPath}>
+                        <span className={css.mergeKind}>{t(conflict.kindKey)}</span>
+                        {conflict.path}
+                      </div>
+                      <div className={css.mergeConflictReason}>{t(conflict.reasonKey)}</div>
+                      <div className={css.mergeCols}>
+                        {MERGE_PREVIEW_COLUMNS.map((col) => {
+                          const value = col.of(conflict)
+                          return (
+                            <div key={col.key} className={css.mergeCol}>
+                              <span className={css.mergeColLabel}>{t(col.key)}</span>
+                              <pre className={css.mergeColValue}>{value === '' ? t('merge.preview.empty') : value}</pre>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )
+            })}
+          </div>
+
+          {/* 「待裁决的分区本次不会应用、下次还会出现」是决定性的语义（决定用户敢不敢点执行），压成一行常驻提示。 */}
+          {counts.undecided > 0 && (
+            <div className={css.hint}>{t('merge.apply.pendingHint', { n: String(counts.undecided) })}</div>
+          )}
+          {!applicable && <div className={css.hint}>{t('merge.apply.nothingPending')}</div>}
+        </>
+      )}
+
+      {resultView !== null && (
+        <div className={css.mergeResult}>
+          <span className={css.groupLabel}>{t('merge.result.title')}</span>
+          <div className={css.kvRow}>
+            <span className={css.kvKey}>{t('merge.result.applied')}</span>
+            <span className={css.kvValue}>{String(resultView.applied.length)}</span>
+          </div>
+          <div className={css.kvRow}>
+            <span className={css.kvKey}>{t('merge.result.skipped')}</span>
+            <span className={css.kvValue}>{String(resultView.skipped.length)}</span>
+          </div>
+          {resultView.warnings.length > 0 && (
+            <div className={css.kvRow}>
+              <span className={css.kvKey}>{t('merge.result.warnings')}</span>
+              <span className={css.kvValue}>
+                {resultView.warnings.map((w) => <div key={w} className={css.hint}>{redact(w)}</div>)}
+              </span>
+            </div>
+          )}
+          {resultView.restoreId !== null && (
+            <div className={css.kvRow}>
+              <span className={css.kvKey}>{t('merge.result.restoreId')}</span>
+              <span className={css.kvValue}><span className={css.mono}>{resultView.restoreId}</span></span>
+            </div>
+          )}
+          {resultView.applied.length === 0 && resultView.skipped.length === 0 && (
+            <div className={css.hint}>{t('merge.result.none')}</div>
+          )}
+          {resultView.failedCount > 0 && <div className={css.hint}>{t('merge.result.failed', { n: String(resultView.failedCount) })}</div>}
+          {resultView.ineffectiveCount > 0 && <div className={css.hint}>{t('merge.result.ineffective', { n: String(resultView.ineffectiveCount) })}</div>}
+          {resultView.rolledBack && (
+            <Banner kind="info">
+              {resultView.rollbackFull === false ? t('merge.result.rollbackIncomplete') : t('merge.result.rolledBack')}
+            </Banner>
+          )}
+          {resultView.hasPendingConflicts && (
+            <Banner kind="warn">{t('merge.result.pending', { n: String(resultView.pendingConflicts.length) })}</Banner>
+          )}
+          {resultView.restoreId !== null && !resultView.rolledBack && (
+            <div className={css.actionRow}>
+              <Button loading={rollingBack} disabled={busy} onClick={onRollback}>{t('merge.result.rollback')}</Button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 分区级动作按钮（顺序即界面顺序）。
+ *
+ * 「采用自动合并」**只在真有 merged 载荷的分区上渲染**（row.canUseMerged）—— 常驻禁用态
+ * 让用户以为功能坏了，而不是「这个分区没东西可自动合成」。
+ */
+const MERGE_ACTION_BUTTONS: ReadonlyArray<{
+  action: MergeResolutionAction
+  key: 'merge.action.useLocal' | 'merge.action.useRemote' | 'merge.action.useMerged'
+}> = [
+  { action: 'keepLocal', key: 'merge.action.useLocal' },
+  { action: 'useRemote', key: 'merge.action.useRemote' },
+  { action: 'useMerged', key: 'merge.action.useMerged' },
+]
+
+/** 批量动作（对全部分区生效；纯函数保证「留到下次」口径不在这里重算）。 */
+const MERGE_BULK_BUTTONS: ReadonlyArray<{
+  action: MergeBulkAction
+  key: 'merge.bulk.keepLocal' | 'merge.bulk.useRemote' | 'merge.bulk.useMerged' | 'merge.bulk.leavePending'
+}> = [
+  { action: 'keepLocal', key: 'merge.bulk.keepLocal' },
+  { action: 'useRemote', key: 'merge.bulk.useRemote' },
+  { action: 'useMerged', key: 'merge.bulk.useMerged' },
+  { action: 'leavePending', key: 'merge.bulk.leavePending' },
+]
+
+/** 三列对照（本地 / 远端 / 基准）。 */
+const MERGE_PREVIEW_COLUMNS = [
+  { key: 'merge.col.local', of: (c: { localPreview: string }) => c.localPreview },
+  { key: 'merge.col.remote', of: (c: { remotePreview: string }) => c.remotePreview },
+  { key: 'merge.col.ancestor', of: (c: { ancestorPreview: string }) => c.ancestorPreview },
+] as const

package/src/client/sync/SyncActivityBar.tsx

@@ -0,0 +1,31 @@
+/**
+ * 一键同步的在途活动条（阶段文案 + 不定态进度）。
+ *
+ * 单独成文件的理由：主文件有行数棘轮（t42），而这 8 行是**纯展示**——没有状态、没有调用，
+ * 抽出去既守住棘轮，也让「在途反馈」这件事只有一个实现。
+ *
+ * 为什么按钮上的 Spinner 不够：一键同步最慢的一步是拉远端快照做只读合并预览，
+ * Spinner 只在按钮内部、且按钮在卡片右侧；整卡可见的活动条才能让用户确认「点了、在动」。
+ * 不定态进度是**状态**而非装饰：prefers-reduced-motion 下仍保留（DESIGN §5）。
+ */
+import type { TranslateNS } from '../client-types.ts'
+import css from '../config-manager.module.css'
+
+export interface SyncActivityBarProps {
+  /** 'preview' = 正在拉远端快照做合并预览（最慢）；'sync' = 正在导入/同步。 */
+  phase: 'preview' | 'sync'
+  t: TranslateNS<'config-manager-sync'>
+}
+
+export function SyncActivityBar({ phase, t }: SyncActivityBarProps) {
+  return (
+    <div className={css.syncActivity} role="status" aria-live="polite">
+      <span className={`${css.progressTrack} ${css.syncActivityTrack}`}>
+        <span className={`${css.progressBar} ${css.progressIndeterminate}`} />
+      </span>
+      <span className={css.syncActivityLabel}>
+        {phase === 'preview' ? t('syncflow.checkingRemote') : t('syncflow.syncing')}
+      </span>
+    </div>
+  )
+}

package/src/client/sync/SyncConfirmView.tsx

@@ -14,6 +14,7 @@ import { useEffect } from 'react'
 
 import { redact } from '../../security/redaction.ts'
 import { Badge, Banner, Button, Spinner } from '../common/ui.tsx'
+import { Skeleton } from '../common/Skeleton.tsx'
 import { toast } from '../common/toast-store.ts'
 import { ConsultCard } from '../consult/ConsultCard.tsx'
 import type { ConsultReport } from '../../core/migration-consult.ts'
@@ -318,7 +319,7 @@ export function SyncConfirmView(props: SyncConfirmViewProps): ReactNode {
       </div>
 
       {/* Phase 7 迁移前咨询卡（只读健康评分 + 建议） */}
-      {consultLoading && <Spinner label={api.t('consult.loading')} />}
+      {consultLoading && <Skeleton shape="line" count={5} label={api.t('consult.loading')} />}
       {consultReport !== null && <ConsultCard report={consultReport} t={api.t} />}
 
       {error !== null && <Banner kind="error">{error}</Banner>}