@logictan/dsh-config-manager 0.1.60

package/src/client/sync/SyncConfirmView.tsx

@@ -0,0 +1,379 @@
+/**
+ * 一键同步差异确认视图（方案 A §5 差异确认数据流）。
+ *
+ * 消费 POST /sync/sync 返回的 items[]，渲染逐项确认列表：
+ * - 每项：kindTag + description + severity + 「采用远端」复选框（默认勾选，可取消）；
+ * - Conflict 项：内联弹窗（用本地 / 用远端 / 跳过）；
+ * - 底部：「确认导入」（apply-items）+「取消」（cancel）。
+ *
+ * 全部渲染模型来自 ./sync-view.ts 纯函数（node 单测覆盖），组件只做装配 + 交互状态。
+ */
+import { useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+import { useEffect } from 'react'
+
+import { Badge, Banner, Button, Spinner } from '../common/ui.tsx'
+import { toast } from '../common/toast-store.ts'
+import type { SyncApi, SyncConfirmItem } from './sync-api.ts'
+import {
+  buildAdoptions, keepLocalAll, kindLabel, reviewItems, severityLabel,
+  summarizeConfirmItems, useRemoteAll, type SyncConflictResolution,
+} from './sync-view.ts'
+import type { ApplyItemsResponse } from './sync-api.ts'
+import type { TranslateNS } from '../client-types.ts'
+import type { SyncConfirmDecisions } from '../run-store.ts'
+import css from '../config-manager.module.css'
+
+export interface SyncConfirmViewProps {
+  api: SyncApi
+  /** 差异确认会话 id（apply-items / cancel 引用）。 */
+  syncSessionId: string
+  /** 被拉取的远端快照 id。 */
+  snapshotId: string
+  items: SyncConfirmItem[]
+  needsReview: boolean
+  /** 兼容性评级（可选展示）。 */
+  compatibility?: 'excellent' | 'good' | 'partial' | 'unsupported'
+  /** 翻译器。 */
+  t: TranslateNS<'config-manager-sync'>
+  /** 逐项决策（受控：来自 runStore.sync.confirmDecisions；null = 无持久化决策，按 defaultAdopt 初始化） */
+  decisions: SyncConfirmDecisions | null
+  /** 决策变更上抛（SyncSettingsView patch 镜像 runStore，切 tab/刷新不丢） */
+  onDecisionsChange: (decisions: SyncConfirmDecisions) => void
+  /** 用户取消确认后回调（复位到空闲态）。 */
+  onCancel: () => void
+  /** 回滚成功后回调（清空 lastRestoreId）。 */
+  onRollbackDone?: () => void
+}
+
+/** 冲突解决方式：与导入恢复向导一致的两项（保留当前 / 使用备份）。 */
+type ConflictResolution = SyncConflictResolution
+
+/** 单条差异项的可变决策状态。 */
+interface ItemState {
+  adopted: boolean
+  resolution?: ConflictResolution
+}
+
+export function SyncConfirmView(props: SyncConfirmViewProps): ReactNode {
+  const { api, syncSessionId, snapshotId, items, needsReview, compatibility, t, decisions, onDecisionsChange, onCancel, onRollbackDone } = props;
+  // 逐项决策状态（受控：来自 props.decisions；null 时按 defaultAdopt 初始化；持久化决策覆盖同名项）
+  const states = useMemo<Record<string, ItemState>>(() => {
+    const base: Record<string, ItemState> = {};
+    for (const it of items) base[it.itemId] = { adopted: it.defaultAdopt, resolution: undefined };
+    if (decisions === null) return base;
+    for (const [id, d] of Object.entries(decisions)) {
+      if (base[id] !== undefined) base[id] = { adopted: d.adopted, resolution: d.resolution };
+    }
+    return base;
+  }, [items, decisions]);
+  // 执行阶段：'idle' | 'applying' | 'done' | 'failed' | 'cancelling'
+  const [phase, setPhase] = useState<'idle' | 'applying' | 'done' | 'failed' | 'cancelling'>('idle');
+  const [applyResult, setApplyResult] = useState<ApplyItemsResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const summary = useMemo(() => summarizeConfirmItems(
+    items.map((it) => ({ ...it, adopt: states[it.itemId]?.adopted ?? it.defaultAdopt })),
+  ), [items, states]);
+
+  // 仅需人工决策的项进入确认列表；非决策项（Create/Update 等）默认自动采用，不逐项展示
+  const displayItems = useMemo(() => reviewItems(items), [items]);
+
+  const setAdopted = (itemId: string, adopted: boolean): void => {
+    const existing: ItemState = states[itemId] ?? { adopted: false, resolution: undefined };
+    onDecisionsChange({ ...(decisions ?? {}), [itemId]: { adopted, resolution: existing.resolution } });
+  };
+
+  const setResolution = (itemId: string, resolution: ConflictResolution): void => {
+    const existing: ItemState = states[itemId] ?? { adopted: false, resolution: undefined };
+    onDecisionsChange({ ...(decisions ?? {}), [itemId]: { adopted: existing.adopted, resolution } });
+  };
+
+  // 批量决策（仅作用于 Conflict 项；非 Conflict 项的 adopt 保持默认）
+  const applyBulkDecision = (bulk: readonly { itemId: string; resolution: ConflictResolution; adopt: boolean }[]): void => {
+    if (bulk.length === 0) return;
+    const next: SyncConfirmDecisions = { ...(decisions ?? {}) };
+    for (const d of bulk) {
+      const existing: ItemState = states[d.itemId] ?? { adopted: false, resolution: undefined };
+      next[d.itemId] = { ...existing, resolution: d.resolution, adopted: d.adopt };
+    }
+    onDecisionsChange(next);
+  };
+
+  const runApply = async (): Promise<void> => {
+    // 校验冲突项必须已解决（与 buildAdoptions 的强制先解决一致）
+    const unresolved = items.find(
+      (it) => it.kind === 'Conflict' && (states[it.itemId]?.adopted === true) && states[it.itemId]?.resolution === undefined,
+    );
+    if (unresolved !== undefined) {
+      setError(t('syncflow.conflictUnresolved', { itemId: unresolved.itemId }));
+      return;
+    }
+    setPhase('applying');
+    setError(null);
+    try {
+      const adoptedMap = new Map<string, boolean>();
+      for (const it of items) {
+        adoptedMap.set(it.itemId, states[it.itemId]?.adopted ?? false);
+      }
+      const resolutions = new Map<string, ConflictResolution>();
+      for (const it of items) {
+        const res = states[it.itemId]?.resolution;
+        if (res !== undefined) resolutions.set(it.itemId, res);
+      }
+      const adoptions = buildAdoptions(items, adoptedMap, resolutions);
+      const result = await api.applyItems({ syncSessionId, adoptions });
+      setPhase(result.ok ? 'done' : 'failed');
+      setApplyResult(result);
+      // R-05：导入成功改走 Toast —— 在此处（而非 ApplyResultCard 渲染期）触发，
+      // 保证每次 apply 恰好一次、且重渲染不会重复弹。失败分支**不**弹 Toast，
+      // 由 ApplyResultCard 的 error Banner 承载（K-06：同卡内还有 warnings 明细与
+      // 回滚危险按钮，用户必须停在此处决策）。
+      if (result.ok) {
+        toast.ok(t('syncflow.importDone', { n: String(result.applied.length) }));
+      }
+    } catch (err) {
+      setPhase('failed');
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const runCancel = async (): Promise<void> => {
+    setPhase('cancelling');
+    setError(null);
+    try {
+      await api.cancel(syncSessionId);
+    } catch { /* 取消失败无需打扰 */ }
+    onCancel();
+  };
+
+  const runRollback = async (restoreId: string): Promise<void> => {
+    setPhase('applying');
+    setError(null);
+    try {
+      await api.rollback({ restoreId });
+      setPhase('done');
+      setApplyResult(null);
+      // R-04：回滚成功改走 Toast（原 ok Banner 只在「回滚成功」这一条路径出现；
+      // 操作已完成、用户可离开，不需要停留阅读）。下方「关闭」按钮保留。
+      toast.ok(t('syncflow.rollbackDone'));
+      onRollbackDone?.();
+    } catch (err) {
+      setPhase('failed');
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  };
+
+  const busy = phase === 'applying' || phase === 'cancelling';
+
+  if (items.length === 0) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+        <Banner kind="ok">{t('syncflow.empty')}</Banner>
+        <div className={css.actionRow}>
+          <Button disabled={busy} onClick={() => { void runCancel() }}>
+            {t('common.close')}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
+      {compatibility !== undefined && (
+        <div className={css.statRow}>
+          <Badge kind="info">{compatibility}</Badge>
+        </div>
+      )}
+      <Banner kind={needsReview ? 'warn' : 'info'}>
+        {needsReview ? t('syncflow.needsReviewBadge') : t('syncflow.diffCount', { count: String(summary.total) })}
+      </Banner>
+      <div className={css.statRow}>
+        <Badge kind="info">{t('syncflow.diffCount', { count: String(summary.total) })}</Badge>
+        <Badge kind="ok">{t('syncflow.adoptRemote')} {summary.adopted}</Badge>
+        {summary.error > 0 && <Badge kind="error">{severityLabel('error', api.t)} × {summary.error}</Badge>}
+        {summary.warning > 0 && <Badge kind="warn">{severityLabel('warning', api.t)} × {summary.warning}</Badge>}
+      </div>
+      <span className={css.hint}>{t('syncflow.adoptHint')}</span>
+
+      {/* 批量决策（仅作用于 Conflict 项） */}
+      <div className={css.actionRow}>
+        <Button variant="ghost" disabled={busy || displayItems.filter((it) => it.kind === 'Conflict').length === 0} onClick={() => { applyBulkDecision(keepLocalAll(items)) }}>
+          {t('syncflow.keepLocalAll')}
+        </Button>
+        <Button variant="primary" disabled={busy || displayItems.filter((it) => it.kind === 'Conflict').length === 0} onClick={() => { applyBulkDecision(useRemoteAll(items)) }}>
+          {t('syncflow.useRemoteAll')}
+        </Button>
+        <span className={css.hint}>{t('syncflow.bulkHint')}</span>
+      </div>
+
+      {/* 逐项差异列表（仅需人工决策的项）；固定容器限高 + 内部滚动，防止整页被拉长 */}
+      <div className={css.confirmScroll}>
+        <div className={css.reportList}>
+          {displayItems.map((it) => {
+            const st = states[it.itemId] ?? { adopted: it.defaultAdopt };
+            const isConflict = it.kind === 'Conflict';
+            return (
+              <div key={it.itemId} className={css.statRow}>
+                <label className={css.checkboxRow}>
+                  <input
+                    type="checkbox"
+                    checked={st.adopted}
+                    disabled={busy}
+                    onChange={(e) => { setAdopted(it.itemId, e.target.checked) }}
+                  />
+                  <span>{kindLabel(it.kind, api.t)}</span>
+                </label>
+                <Badge kind={it.severity === 'error' ? 'error' : it.severity === 'warning' ? 'warn' : 'info'}>
+                  {severityLabel(it.severity, api.t)}
+                </Badge>
+                <span>{it.description}</span>
+                {isConflict && (
+                  <ConflictResolver
+                    item={it}
+                    resolution={st.resolution}
+                    busy={busy}
+                    t={t}
+                    onResolve={(r) => { setResolution(it.itemId, r) }}
+                  />
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+
+      {error !== null && <Banner kind="error">{error}</Banner>}
+
+      {/* 确认导入 / 取消 */}
+      {phase === 'idle' && (
+        <div className={css.actionRow}>
+          <Button variant="primary" disabled={busy || summary.adopted === 0} onClick={() => { void runApply() }}>
+            {t('syncflow.confirmImport')}
+          </Button>
+          <Button disabled={busy} onClick={() => { void runCancel() }}>
+            {t('syncflow.cancel')}
+          </Button>
+        </div>
+      )}
+
+      {/* 执行结果 */}
+      {(phase === 'done' || phase === 'failed') && applyResult !== null && (
+        <>
+          <ApplyResultCard result={applyResult} busy={busy} t={t} onRollback={runRollback} />
+          <div className={css.actionRow} style={{ marginTop: '12px' }}>
+            <Button variant="primary" disabled={busy} onClick={() => { onCancel() }}>
+              {t('common.close')}
+            </Button>
+          </div>
+        </>
+      )}
+      {(phase === 'done' || phase === 'failed') && applyResult === null && (
+        <>
+          {/* R-04：回滚成功的 ok Banner 已改为 Toast（见 runRollback）。此处仅保留收尾「关闭」按钮；
+             一并消除了原实现在 runApply 抛错（phase=failed 且 applyResult 仍为 null）时
+              误显示「已回滚到应用前」的问题 —— 那种情况下方 error Banner 才是唯一事实。 */}
+          <div className={css.actionRow} style={{ marginTop: '12px' }}>
+            <Button variant="primary" disabled={busy} onClick={() => { onCancel() }}>
+              {t('common.close')}
+            </Button>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------- 冲突内联解决 */
+
+interface ConflictResolverProps {
+  item: SyncConfirmItem
+  resolution?: ConflictResolution
+  busy: boolean
+  t: TranslateNS<'config-manager-sync'>
+  onResolve: (r: ConflictResolution) => void
+}
+
+function ConflictResolver({ item, resolution, busy, t, onResolve }: ConflictResolverProps): ReactNode {
+  const conflict = item.conflict;
+  const options: { value: ConflictResolution; label: string }[] = [
+    { value: 'keepLocal', label: t('syncflow.conflictUseLocal') },
+    { value: 'useRemote', label: t('syncflow.conflictUseRemote') },
+  ];
+  return (
+    <div className={css.conflictItem}>
+      {/* 变更详情（与导入恢复向导一致：如插件「当前 1.1 vs 备份 1.6」） */}
+      {item.detail !== undefined && item.detail !== '' && (
+        <pre className={css.conflictDetail}>{item.detail}</pre>
+      )}
+      {conflict?.diff !== undefined && (
+        <details className={css.conflictDetail}>
+          <summary>{t('syncflow.diff')}</summary>
+          <pre className={css.diffScroll}>{conflict.diff}</pre>
+        </details>
+      )}
+      {/* 与导入恢复向导 ConflictList 相同的两项单选（保留当前 / 使用备份） */}
+      <div className={css.conflictOptions}>
+        {options.map((opt) => (
+          <label key={opt.value} className={css.radioLabel}>
+            <input
+              type="radio"
+              name={`sync-conflict-${item.itemId}`}
+              checked={resolution === opt.value}
+              disabled={busy}
+              onChange={() => { onResolve(opt.value) }}
+            />
+            <span>{opt.label}</span>
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/* ---------------------------------------------------------------- 执行结果 */
+
+interface ApplyResultCardProps {
+  result: ApplyItemsResponse
+  busy: boolean
+  t: TranslateNS<'config-manager-sync'>
+  onRollback: (restoreId: string) => Promise<void>
+}
+
+function ApplyResultCard({ result, busy, t, onRollback }: ApplyResultCardProps): ReactNode {
+  const ok = result.ok;
+  return (
+    <>
+      {/* R-05：成功分支已改走 Toast（见 runApply）；此处只保留失败 Banner ——
+          K-06 要求失败后用户停留本卡阅读 warnings 明细并决定是否回滚，
+          自动消失的 Toast 无法承载这个决策入口。 */}
+      {!ok && <Banner kind="error">{t('syncflow.importFailed')}</Banner>}
+      {result.needsRestart && <Banner kind="warn">{t('syncflow.needsRestart')}</Banner>}
+      {result.applied.length > 0 && (
+        <div>
+          <span className={css.fieldLabel}>{t('syncflow.importedSections')}</span>
+          <div className={css.statRow}>
+            {result.applied.map((sid) => <Badge key={sid} kind="ok">{sid}</Badge>)}
+          </div>
+        </div>
+      )}
+      {result.warnings.length > 0 && (
+        <div>
+          <span className={css.fieldLabel}>{t('syncflow.importWarnings')}</span>
+          <ul className={css.warnList}>
+            {result.warnings.map((w, i) => <li key={i}>{w}</li>)}
+          </ul>
+        </div>
+      )}
+      {result.restoreId !== '' && (
+        <Button
+          variant="danger"
+          disabled={busy}
+          onClick={() => { void onRollback(result.restoreId) }}
+        >
+          {busy ? <Spinner label={t('syncflow.rollingBack')} /> : t('syncflow.rollback')}
+        </Button>
+      )}
+    </>
+  );
+}

package/src/client/sync/SyncHistoryView.test.ts

@@ -0,0 +1,40 @@
+/**
+ * P2b SyncHistoryView 纯函数测试：projectHistoryRows / formatDateTime。
+ */
+import test from 'node:test';
+import assert from 'node:assert/strict';
+
+import { projectHistoryRows, formatDateTime } from './history-model.ts';
+import type { SnapshotHistoryEntry } from './history-model.ts';
+
+const e = (id: string, createdAt: string, sectionCount = 1, reviewCount = 0): SnapshotHistoryEntry => ({
+  id, createdAt, sectionCount, reviewCount,
+});
+
+test('projectHistoryRows：按 createdAt 倒序', () => {
+  const rows = projectHistoryRows([
+    e('a', '2026-08-17T10:00:00.000Z'),
+    e('b', '2026-08-17T12:00:00.000Z'),
+    e('c', '2026-08-17T11:00:00.000Z'),
+  ]);
+  assert.equal(rows[0]!.id, 'b');
+  assert.equal(rows[1]!.id, 'c');
+  assert.equal(rows[2]!.id, 'a');
+});
+
+test('projectHistoryRows：空集合 → 空', () => {
+  assert.deepEqual(projectHistoryRows([]), []);
+});
+
+test('formatDateTime：合法 ISO → 本地可读格式', () => {
+  const s = formatDateTime('2026-08-17T10:30:00.000Z');
+  assert.match(s, /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/);
+});
+
+test('formatDateTime：空串 → 「—」', () => {
+  assert.equal(formatDateTime(''), '—');
+});
+
+test('formatDateTime：非法 ISO → 原样返回', () => {
+  assert.equal(formatDateTime('not-a-date'), 'not-a-date');
+});

package/src/client/sync/SyncHistoryView.tsx

@@ -0,0 +1,220 @@
+/**
+ * 同步历史视图（方案 A）：列出本地祖先快照目录（kind=apply）+ 自动同步执行记录
+ * （kind=autosync）。自动同步行显示时间/方向/状态/跳过冲突/应用分区，点开可看被跳过
+ * 冲突分区明细。
+ *
+ * 数据获取：GET /sync/history → { entries: SyncHistoryEntry[] }（按 createdAt 倒序合并）。
+ * 纯函数投影在 ./history-model.ts（node --test 可测），本组件只做装配。
+ */
+import { useEffect, useMemo, useState } from 'react'
+import type { ReactNode } from 'react'
+
+import { Badge, Card, SectionTitle, Spinner } from '../common/ui.tsx'
+import { ErrorBanner } from '../common/ErrorBanner.tsx'
+import type { SyncApi, SyncHistoryEntry, AutosyncHistoryEntry } from './sync-api.ts'
+import {
+  formatDateTime, formatDateTimeFull, midEllipsis, projectAutosyncEntry,
+  projectSyncHistoryEntries, summarizeSyncHistory,
+} from './history-model.ts'
+import type { SnapshotHistoryEntry } from './history-model.ts'
+import type { TranslateNS } from '../client-types.ts'
+import css from '../config-manager.module.css'
+
+/** 通道徽章：git → GitHub，webdav → WebDAV；未知/缺失不渲染。 */
+function ChannelBadge({ transport, t }: { transport?: string; t: TranslateNS<'config-manager-sync'> }): ReactNode {
+  if (transport === 'git') return <Badge kind="info">{t('history.channelGit')}</Badge>
+  if (transport === 'webdav') return <Badge kind="info">{t('history.channelWebdav')}</Badge>
+  return null
+}
+
+export interface SyncHistoryViewProps {
+  api: SyncApi
+  t: TranslateNS<'config-manager-sync'>
+}
+
+export function SyncHistoryView(props: SyncHistoryViewProps): ReactNode {
+  const { api, t } = props;
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [entries, setEntries] = useState<SyncHistoryEntry[]>([]);
+  /** 重试计数（错误态点「重试」递增 → 重新加载） */
+  const [reloadKey, setReloadKey] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    (async () => {
+      try {
+        const data = await api.history();
+        if (!cancelled) {
+          setEntries(data.entries);
+          setError(null);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setError(err instanceof Error ? err.message : String(err));
+          setLoading(false);
+        }
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [api, reloadKey]);
+
+  const rows = useMemo(() => projectSyncHistoryEntries(entries), [entries]);
+  const stats = useMemo(() => summarizeSyncHistory(rows), [rows]);
+  // 快照类条目（兼容旧投影；仅统计展示）
+  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={t('common.loading')} />;
+  if (error) {
+    return (
+      <ErrorBanner
+        error={error}
+        onRetry={() => { setReloadKey((k) => k + 1) }}
+        retrying={loading}
+        t={api.t}
+      />
+    );
+  }
+  if (rows.length === 0) {
+    return (
+      <Card>
+        <strong>{t('history.empty')}</strong>
+        <p>{t('history.emptyHint')}</p>
+      </Card>
+    );
+  }
+
+  return (
+    <Card>
+      <SectionTitle title={`${t('history.title')}（${rows.length}）`} />
+      {/* F：头部统计摘要（先扫结论）；失败/跳过仅在存在时出现，并给语义色 */}
+      <div className={css.statRow} aria-label={t('history.stats.summary')}>
+        <Badge kind="info">{t('history.stats.total', { count: String(stats.total) })}</Badge>
+        <Badge kind="info">{t('history.stats.snapshots', { count: String(stats.snapshots) })}</Badge>
+        <Badge kind="info">{t('history.stats.autosync', { count: String(stats.autosync) })}</Badge>
+        {stats.failed > 0 && <Badge kind="error">{t('history.stats.failed', { count: String(stats.failed) })}</Badge>}
+        {stats.skipped > 0 && <Badge kind="warn">{t('history.stats.skipped', { count: String(stats.skipped) })}</Badge>}
+      </div>
+      {/* A：改用设计系统数据表（.tableWrap > .tableScroll 限高内滚 + .dataTable/.tableFixed/.tableCompact） */}
+      <div className={css.tableWrap}>
+        <div className={css.tableScroll}>
+          <table className={`${css.dataTable} ${css.tableFixed} ${css.tableCompact}`}>
+            <thead>
+              <tr>
+                {/* 时间列 116px（非 92px）：11px 等宽下 "YYYY-MM-DD HH:mm" 实测 96.8px，
+                    加 .tableCompact 的左右各 8px padding 需 112.8px；92px 会把时间截成
+                    「2026-09-01…」（浏览器实测截图确认），反而比改前更不可读。 */}
+                <th style={{ width: 116 }}>{t('history.colTime')}</th>
+                <th style={{ width: 96 }}>{t('history.colKind')}</th>
+                <th>{t('history.colDetail')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {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}>
+                    {/* B：等宽 11px + 固定列宽 → 单行不换行；title 给完整本地时间（含秒） */}
+                    <td className={css.dim} title={formatDateTimeFull(r.createdAt)}>
+                      <span className={`${css.mono}`} style={{ fontSize: '11px' }}>{formatDateTime(r.createdAt)}</span>
+                    </td>
+                    <td><Badge kind="info">{t('history.kindSnapshot')}</Badge></td>
+                    <td>
+                      <div className={css.cellMain}>
+                        {/* C：UUID 中段省略（保留头尾，尾部才是区分信息），title 保留全文 */}
+                        <span className={`${css.cellTitle} ${css.mono}`} title={r.id}>{midEllipsis(r.id)}</span>
+                        <span className={css.cellMeta}>
+                          <ChannelBadge transport={r.transport} t={t} />
+                          {snap !== undefined && <>{snap.sectionCount} {t('history.sectionCount')}</>}
+                        </span>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </Card>
+  );
+}
+
+/* ---------------------------------------------------------------- 自动同步行 */
+
+interface AutosyncRowProps {
+  entry: AutosyncHistoryEntry
+  t: TranslateNS<'config-manager-sync'>
+}
+
+function AutosyncRow({ entry, t }: AutosyncRowProps): ReactNode {
+  const row = projectAutosyncEntry(entry);
+  return (
+    <tr>
+      {/* B：与快照行一致的时间呈现（等宽 11px 单行 + title 完整本地时间） */}
+      <td className={css.dim} title={formatDateTimeFull(row.createdAt)}>
+        <span className={`${css.mono}`} style={{ fontSize: '11px' }}>{formatDateTime(row.createdAt)}</span>
+      </td>
+      {/* D：类型徽章按实况给语义色（success=ok / failed=error / skipped、partial=warn） */}
+      <td><Badge kind={row.badgeKind}>{t('history.kindAutosync')}</Badge></td>
+      <td>
+        <div className={css.cellMain}>
+          {/* E：主行「方向 + 状态」徽章（原摘要串里的跳过原因下沉到第二行小字） */}
+          <span className={css.cellTitle}>
+            <ChannelBadge transport={entry.transport} t={t} />
+            {' '}
+            <Badge kind="info">{row.direction}</Badge>
+            {' '}
+            <Badge kind={row.badgeKind}>{row.status}</Badge>
+            {entry.pushedSnapshotId !== undefined && <>{' · '}{t('history.autosyncPush')} <span className={css.mono} title={entry.pushedSnapshotId}>{midEllipsis(entry.pushedSnapshotId)}</span></>}
+            {entry.pulledSnapshotId !== undefined && <>{' · '}{t('history.autosyncPull')} <span className={css.mono} title={entry.pulledSnapshotId}>{midEllipsis(entry.pulledSnapshotId)}</span></>}
+          </span>
+          {/* E：第二行小字——跳过原因 / 错误（信息保留，但不再挤在主行里） */}
+          {row.skipReasonText !== undefined && <span className={css.hint}>{row.skipReasonText}</span>}
+          {row.error !== undefined && <span className={css.hint} title={row.error}>{t('history.autosyncError', { error: '' })}{row.error}</span>}
+        </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>
+  );
+}