From 0c402b7552918cfefeda5ccdd05236d1fd6b5bd0 Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Wed, 3 Jun 2026 14:56:33 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20Config=20Sync=20page=20=E2=80=94=20?=
 =?UTF-8?q?promote=20platform=20config=20across=20environments?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a Config Sync screen (ADR 0003) to move definitional config
(permissions, roles, menus) from one environment to another:

- Export: snapshot this server's config as a code-keyed JSON bundle
  (view / download / copy).
- Import: paste or upload a bundle, preview the diff (dry-run, the
  default), then apply. Apply is gated on a fresh dry-run reflecting the
  current text — any edit clears the preview.
- merge / mirror modes. mirror deletes target entities absent from the
  bundle (needs a kit version that supports it; warned in the UI).
- Route + sidebar nav entry under Platform; ko/en i18n.

Talks to GET /config/export and POST /config/import (kit config-sync,
off by default, refused under a production profile).
---
 src/api/configSync.ts        |  44 +++++
 src/i18n/locales/en.ts       |  57 +++++++
 src/i18n/locales/ko.ts       |  57 +++++++
 src/layout/AppLayout.vue     |   1 +
 src/router/index.ts          |   5 +
 src/views/ConfigSyncView.vue | 309 +++++++++++++++++++++++++++++++++++
 6 files changed, 473 insertions(+)
 create mode 100644 src/api/configSync.ts
 create mode 100644 src/views/ConfigSyncView.vue

diff --git a/src/api/configSync.ts b/src/api/configSync.ts
new file mode 100644
index 0000000..7a4b648
--- /dev/null
+++ b/src/api/configSync.ts
@@ -0,0 +1,44 @@
+import { client } from './client'
+
+export interface ConfigBundle {
+  version: number
+  tenantId: string
+  permissions: Array<{ code: string; description: string | null }>
+  roles: Array<{ code: string; name: string; permissionCodes: string[] }>
+  menus: Array<{
+    code: string
+    parentCode: string | null
+    label: string
+    path: string | null
+    icon: string | null
+    requiredPermissionCode: string | null
+    displayOrder: number
+  }>
+}
+
+export interface ImportSection {
+  created: string[]
+  updated: string[]
+}
+
+export interface ImportResult {
+  dryRun: boolean
+  mode: string
+  permissions: ImportSection
+  roles: ImportSection
+  menus: ImportSection
+}
+
+const base = '/config'
+
+export const configSyncApi = {
+  export(tenantId: string) {
+    return client.get<ConfigBundle>(`${base}/export`, { params: { tenantId } }).then((r) => r.data)
+  },
+  // `import` is awkward as a method name; the backend endpoint is POST /config/import.
+  apply(bundle: ConfigBundle, dryRun: boolean, mode = 'merge') {
+    return client
+      .post<ImportResult>(`${base}/import`, bundle, { params: { mode, dryRun } })
+      .then((r) => r.data)
+  },
+}
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 8b25a28..2333075 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -30,6 +30,63 @@ export default {
     dashboard: 'Dashboard',
     diagnostics: 'Diagnostics',
     auditLogs: 'Audit Logs',
+    configSync: 'Config Sync',
+  },
+  configSync: {
+    title: 'Config Sync',
+    intro:
+      'Promote definitional config (permissions, roles, menus) from this environment to another. Export a code-keyed bundle here, then import it on the target. Requires devslab.kit.config-sync.enabled=true on both servers; it is refused under a production profile.',
+    counts: {
+      permissions: '{n} permissions',
+      roles: '{n} roles',
+      menus: '{n} menus',
+    },
+    export: {
+      title: 'Export',
+      desc: "Snapshot this environment's permissions, roles and menus as a portable, code-keyed bundle.",
+      run: 'Export',
+      download: 'Download JSON',
+      copy: 'Copy',
+      empty: 'No bundle yet — click Export to generate one.',
+    },
+    import: {
+      title: 'Import',
+      desc: 'Paste or upload a bundle, preview the changes (dry-run), then apply.',
+      placeholder: 'Paste a config bundle JSON here…',
+      pickFile: 'Choose file',
+      mode: 'Mode',
+      modes: {
+        merge: 'Merge (add & update)',
+        mirror: 'Mirror (delete extras)',
+      },
+      mirrorWarn:
+        'Mirror deletes target entities that are absent from the bundle. Always review the dry-run before applying. Requires a kit version that supports mirror.',
+      dryRun: 'Preview (dry-run)',
+      apply: 'Apply',
+      invalidJson: 'Invalid JSON — could not parse the bundle.',
+      needDryRun: 'Run a preview first; apply unlocks once the dry-run reflects the current bundle.',
+    },
+    result: {
+      dryRunTitle: 'Preview (dry-run) — nothing was written',
+      appliedTitle: 'Applied',
+      created: 'Created',
+      updated: 'Updated',
+      none: 'None',
+      section: {
+        permissions: 'Permissions',
+        roles: 'Roles',
+        menus: 'Menus',
+      },
+    },
+    toasts: {
+      exported: 'Config exported',
+      exportFailed: 'Export failed',
+      dryRunDone: 'Preview ready',
+      applied: 'Config applied',
+      importFailed: 'Import failed',
+      copied: 'Copied to clipboard',
+      copyFailed: 'Copy failed',
+    },
   },
   login: {
     tenant: 'Tenant',
diff --git a/src/i18n/locales/ko.ts b/src/i18n/locales/ko.ts
index aac581e..67524ab 100644
--- a/src/i18n/locales/ko.ts
+++ b/src/i18n/locales/ko.ts
@@ -30,6 +30,63 @@ export default {
     dashboard: '대시보드',
     diagnostics: '진단',
     auditLogs: '감사 로그',
+    configSync: '설정 동기화',
+  },
+  configSync: {
+    title: '설정 동기화',
+    intro:
+      '정의성 설정(권한·역할·메뉴)을 이 환경에서 다른 환경으로 배포합니다. 여기서 코드 기준 번들을 내보낸 뒤 대상 서버에서 가져오면 됩니다. 양쪽 모두 devslab.kit.config-sync.enabled=true 가 필요하며, 운영(prod) 프로파일에서는 거부됩니다.',
+    counts: {
+      permissions: '권한 {n}개',
+      roles: '역할 {n}개',
+      menus: '메뉴 {n}개',
+    },
+    export: {
+      title: '내보내기',
+      desc: '이 환경의 권한·역할·메뉴를 코드 기준의 이식 가능한 번들로 스냅샷합니다.',
+      run: '내보내기',
+      download: 'JSON 다운로드',
+      copy: '복사',
+      empty: '아직 번들이 없습니다 — 내보내기를 눌러 생성하세요.',
+    },
+    import: {
+      title: '가져오기',
+      desc: '번들을 붙여넣거나 업로드하고, 변경 내용을 미리보기(dry-run)한 뒤 적용합니다.',
+      placeholder: '설정 번들 JSON 을 여기에 붙여넣으세요…',
+      pickFile: '파일 선택',
+      mode: '모드',
+      modes: {
+        merge: '병합 (추가·수정)',
+        mirror: '미러 (없는 항목 삭제)',
+      },
+      mirrorWarn:
+        '미러 모드는 번들에 없는 대상 항목을 삭제합니다. 적용 전 반드시 미리보기를 확인하세요. 미러를 지원하는 kit 버전이 필요합니다.',
+      dryRun: '미리보기 (dry-run)',
+      apply: '적용',
+      invalidJson: '잘못된 JSON — 번들을 파싱할 수 없습니다.',
+      needDryRun: '먼저 미리보기를 실행하세요. 미리보기가 현재 번들과 일치하면 적용이 활성화됩니다.',
+    },
+    result: {
+      dryRunTitle: '미리보기 (dry-run) — 아무것도 기록되지 않았습니다',
+      appliedTitle: '적용 완료',
+      created: '생성',
+      updated: '수정',
+      none: '없음',
+      section: {
+        permissions: '권한',
+        roles: '역할',
+        menus: '메뉴',
+      },
+    },
+    toasts: {
+      exported: '설정을 내보냈습니다',
+      exportFailed: '내보내기 실패',
+      dryRunDone: '미리보기 준비됨',
+      applied: '설정을 적용했습니다',
+      importFailed: '가져오기 실패',
+      copied: '클립보드에 복사됨',
+      copyFailed: '복사 실패',
+    },
   },
   login: {
     tenant: '테넌트',
diff --git a/src/layout/AppLayout.vue b/src/layout/AppLayout.vue
index 3d63b92..9f0295a 100644
--- a/src/layout/AppLayout.vue
+++ b/src/layout/AppLayout.vue
@@ -51,6 +51,7 @@ const navGroups = computed(() => [
       { label: t('nav.tenants'), icon: 'pi pi-building', route: 'tenants' },
       { label: t('nav.policies'), icon: 'pi pi-shield', route: 'policies' },
       { label: t('nav.settings'), icon: 'pi pi-cog', route: 'settings' },
+      { label: t('nav.configSync'), icon: 'pi pi-sync', route: 'config-sync' },
     ],
   },
   {
diff --git a/src/router/index.ts b/src/router/index.ts
index 8fee041..3d928b3 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -76,6 +76,11 @@ const routes: RouteRecordRaw[] = [
         name: 'settings',
         component: () => import('@/views/SettingsView.vue'),
       },
+      {
+        path: 'config-sync',
+        name: 'config-sync',
+        component: () => import('@/views/ConfigSyncView.vue'),
+      },
       {
         // Voluntary self-service password change, inside the layout. The same
         // ChangePasswordView also serves the forced standalone route above; it
diff --git a/src/views/ConfigSyncView.vue b/src/views/ConfigSyncView.vue
new file mode 100644
index 0000000..60b624b
--- /dev/null
+++ b/src/views/ConfigSyncView.vue
@@ -0,0 +1,309 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import Card from 'primevue/card'
+import Button from 'primevue/button'
+import Textarea from 'primevue/textarea'
+import Select from 'primevue/select'
+import Message from 'primevue/message'
+import Tag from 'primevue/tag'
+import { useToast } from 'primevue/usetoast'
+import { useAuthStore } from '@/stores/auth'
+import { configSyncApi, type ConfigBundle, type ImportResult } from '@/api/configSync'
+
+const toast = useToast()
+const { t } = useI18n()
+const auth = useAuthStore()
+
+// ── Export ────────────────────────────────────────────────────────────────
+const exported = ref<ConfigBundle | null>(null)
+const exportedJson = ref('')
+const exporting = ref(false)
+
+async function runExport() {
+  exporting.value = true
+  try {
+    const tenantId = auth.user?.tenantId ?? 'default'
+    const bundle = await configSyncApi.export(tenantId)
+    exported.value = bundle
+    exportedJson.value = JSON.stringify(bundle, null, 2)
+    toast.add({ severity: 'success', summary: t('configSync.toasts.exported'), life: 3000 })
+  } catch (e) {
+    toast.add({ severity: 'error', summary: t('configSync.toasts.exportFailed'), detail: msg(e), life: 6000 })
+  } finally {
+    exporting.value = false
+  }
+}
+
+function downloadExport() {
+  if (!exported.value) return
+  const blob = new Blob([exportedJson.value], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `config-bundle-${exported.value.tenantId}.json`
+  a.click()
+  URL.revokeObjectURL(url)
+}
+
+async function copyExport() {
+  if (!exportedJson.value) return
+  try {
+    await navigator.clipboard.writeText(exportedJson.value)
+    toast.add({ severity: 'success', summary: t('configSync.toasts.copied'), life: 2000 })
+  } catch {
+    toast.add({ severity: 'warn', summary: t('configSync.toasts.copyFailed'), life: 3000 })
+  }
+}
+
+// ── Import ────────────────────────────────────────────────────────────────
+const importText = ref('')
+const mode = ref<'merge' | 'mirror'>('merge')
+const modeOptions = computed(() => [
+  { label: t('configSync.import.modes.merge'), value: 'merge' },
+  { label: t('configSync.import.modes.mirror'), value: 'mirror' },
+])
+const result = ref<ImportResult | null>(null)
+const importing = ref(false)
+const fileInput = ref<HTMLInputElement | null>(null)
+
+// Any edit to the bundle text or the mode invalidates a prior dry-run: the
+// "Apply" button is gated on a fresh preview matching exactly what will run.
+watch([importText, mode], () => {
+  result.value = null
+})
+
+function pickFile() {
+  fileInput.value?.click()
+}
+function onFileChosen(event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file) return
+  const reader = new FileReader()
+  reader.onload = () => {
+    importText.value = String(reader.result ?? '')
+  }
+  reader.readAsText(file)
+  input.value = '' // allow re-picking the same file
+}
+
+function parseBundle(): ConfigBundle | null {
+  try {
+    return JSON.parse(importText.value) as ConfigBundle
+  } catch {
+    toast.add({ severity: 'error', summary: t('configSync.import.invalidJson'), life: 4000 })
+    return null
+  }
+}
+
+async function runDryRun() {
+  const bundle = parseBundle()
+  if (!bundle) return
+  importing.value = true
+  try {
+    result.value = await configSyncApi.apply(bundle, true, mode.value)
+    toast.add({ severity: 'info', summary: t('configSync.toasts.dryRunDone'), life: 3000 })
+  } catch (e) {
+    result.value = null
+    toast.add({ severity: 'error', summary: t('configSync.toasts.importFailed'), detail: msg(e), life: 6000 })
+  } finally {
+    importing.value = false
+  }
+}
+
+async function runApply() {
+  const bundle = parseBundle()
+  if (!bundle) return
+  importing.value = true
+  try {
+    result.value = await configSyncApi.apply(bundle, false, mode.value)
+    toast.add({ severity: 'success', summary: t('configSync.toasts.applied'), life: 4000 })
+  } catch (e) {
+    toast.add({ severity: 'error', summary: t('configSync.toasts.importFailed'), detail: msg(e), life: 6000 })
+  } finally {
+    importing.value = false
+  }
+}
+
+// A dry-run must precede apply, and it must reflect the current text (the watch
+// above clears `result` on any edit, so a present result is always fresh).
+const canApply = computed(() => result.value?.dryRun === true && !importing.value)
+
+const sections = computed(() => {
+  const r = result.value
+  if (!r) return []
+  return [
+    { key: 'permissions', label: t('configSync.result.section.permissions'), data: r.permissions },
+    { key: 'roles', label: t('configSync.result.section.roles'), data: r.roles },
+    { key: 'menus', label: t('configSync.result.section.menus'), data: r.menus },
+  ]
+})
+
+function msg(e: unknown): string {
+  if (e && typeof e === 'object' && 'response' in e) {
+    const r = (e as { response?: { data?: { message?: string } } }).response
+    return r?.data?.message ?? String(e)
+  }
+  return String(e)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex items-center justify-between">
+      <h1 class="text-xl font-semibold">{{ t('configSync.title') }}</h1>
+    </div>
+
+    <Message severity="info" :closable="false">
+      {{ t('configSync.intro') }}
+    </Message>
+
+    <!-- Export: snapshot this environment's definitional config as a code-keyed bundle. -->
+    <Card>
+      <template #title>
+        <span class="flex items-center gap-2"><i class="pi pi-download" />{{ t('configSync.export.title') }}</span>
+      </template>
+      <template #content>
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ t('configSync.export.desc') }}</p>
+        <div class="flex flex-wrap items-center gap-2 mb-3">
+          <Button :label="t('configSync.export.run')" icon="pi pi-download" :loading="exporting" @click="runExport" />
+          <Button
+            :label="t('configSync.export.download')"
+            icon="pi pi-file-export"
+            severity="secondary"
+            outlined
+            :disabled="!exported"
+            @click="downloadExport"
+          />
+          <Button
+            :label="t('configSync.export.copy')"
+            icon="pi pi-copy"
+            severity="secondary"
+            outlined
+            :disabled="!exported"
+            @click="copyExport"
+          />
+          <span v-if="exported" class="flex flex-wrap items-center gap-2 text-sm">
+            <Tag severity="info" :value="t('configSync.counts.permissions', { n: exported.permissions.length })" />
+            <Tag severity="info" :value="t('configSync.counts.roles', { n: exported.roles.length })" />
+            <Tag severity="info" :value="t('configSync.counts.menus', { n: exported.menus.length })" />
+          </span>
+        </div>
+        <Textarea
+          v-if="exported"
+          :model-value="exportedJson"
+          readonly
+          :rows="14"
+          class="w-full font-mono text-xs"
+          spellcheck="false"
+        />
+        <p v-else class="text-sm text-surface-500">{{ t('configSync.export.empty') }}</p>
+      </template>
+    </Card>
+
+    <!-- Import: paste/upload a bundle, preview the diff (dry-run), then apply. -->
+    <Card>
+      <template #title>
+        <span class="flex items-center gap-2"><i class="pi pi-upload" />{{ t('configSync.import.title') }}</span>
+      </template>
+      <template #content>
+        <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ t('configSync.import.desc') }}</p>
+
+        <div class="flex flex-wrap items-end gap-3 mb-3">
+          <div class="flex flex-col gap-1">
+            <label class="text-xs font-medium text-surface-600 dark:text-surface-400">
+              {{ t('configSync.import.mode') }}
+            </label>
+            <Select v-model="mode" :options="modeOptions" option-label="label" option-value="value" class="w-48" />
+          </div>
+          <Button
+            :label="t('configSync.import.pickFile')"
+            icon="pi pi-folder-open"
+            severity="secondary"
+            outlined
+            @click="pickFile"
+          />
+          <input ref="fileInput" type="file" accept="application/json,.json" class="hidden" @change="onFileChosen" />
+        </div>
+
+        <Message v-if="mode === 'mirror'" severity="warn" :closable="false" class="mb-3">
+          {{ t('configSync.import.mirrorWarn') }}
+        </Message>
+
+        <Textarea
+          v-model="importText"
+          :rows="12"
+          class="w-full font-mono text-xs"
+          spellcheck="false"
+          :placeholder="t('configSync.import.placeholder')"
+        />
+
+        <div class="flex flex-wrap items-center gap-2 mt-3">
+          <Button
+            :label="t('configSync.import.dryRun')"
+            icon="pi pi-eye"
+            severity="secondary"
+            :loading="importing"
+            :disabled="!importText.trim()"
+            @click="runDryRun"
+          />
+          <Button
+            :label="t('configSync.import.apply')"
+            icon="pi pi-check"
+            severity="danger"
+            :loading="importing"
+            :disabled="!canApply"
+            @click="runApply"
+          />
+          <span v-if="!canApply && importText.trim()" class="text-xs text-surface-500">
+            {{ t('configSync.import.needDryRun') }}
+          </span>
+        </div>
+      </template>
+    </Card>
+
+    <!-- Result: the dry-run / applied diff, per section. Big and readable. -->
+    <Card v-if="result">
+      <template #title>
+        <span class="flex items-center gap-2">
+          <i :class="result.dryRun ? 'pi pi-eye text-primary' : 'pi pi-check-circle text-green-500'" />
+          {{ result.dryRun ? t('configSync.result.dryRunTitle') : t('configSync.result.appliedTitle') }}
+          <Tag :severity="result.dryRun ? 'info' : 'success'" :value="result.mode" />
+        </span>
+      </template>
+      <template #content>
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+          <div v-for="s in sections" :key="s.key" class="border border-surface-200 dark:border-surface-800 rounded-lg p-4">
+            <div class="font-semibold mb-3 flex items-center justify-between">
+              <span>{{ s.label }}</span>
+              <span class="text-xs font-normal text-surface-500">
+                +{{ s.data.created.length }} / ~{{ s.data.updated.length }}
+              </span>
+            </div>
+
+            <div class="mb-3">
+              <div class="text-xs font-medium text-green-600 dark:text-green-400 mb-1">
+                {{ t('configSync.result.created') }} ({{ s.data.created.length }})
+              </div>
+              <div v-if="s.data.created.length" class="flex flex-wrap gap-1">
+                <Tag v-for="code in s.data.created" :key="code" severity="success" :value="code" />
+              </div>
+              <div v-else class="text-xs text-surface-400">{{ t('configSync.result.none') }}</div>
+            </div>
+
+            <div>
+              <div class="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1">
+                {{ t('configSync.result.updated') }} ({{ s.data.updated.length }})
+              </div>
+              <div v-if="s.data.updated.length" class="flex flex-wrap gap-1">
+                <Tag v-for="code in s.data.updated" :key="code" severity="info" :value="code" />
+              </div>
+              <div v-else class="text-xs text-surface-400">{{ t('configSync.result.none') }}</div>
+            </div>
+          </div>
+        </div>
+      </template>
+    </Card>
+  </div>
+</template>

From 68b9ada5d44f4082cb386b73873cab5f2238a0d6 Mon Sep 17 00:00:00 2001
From: Sin-Kang <jlc488@gmail.com>
Date: Wed, 3 Jun 2026 15:17:35 +0900
Subject: [PATCH 2/2] feat: surface mirror deletes + opt-in user sync on the
 Config Sync page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follows the kit's config-sync PR (mirror mode + user sync) so the page
exposes the full surface:

- Import/Export gain an "include users" toggle (export carries users with
  no password; import is create-only and never overwrites existing users)
  with an inline hint.
- The diff now renders Deleted (red, mirror only) and Skipped (gray —
  a role still in use, or a user that already exists) alongside
  Created/Updated, plus a Users section when user sync ran.
- Editing the bundle, mode, or the users toggle re-gates Apply behind a
  fresh dry-run.

Built green (vue-tsc + vite).
---
 src/api/configSync.ts        | 15 ++++++--
 src/i18n/locales/en.ts       |  8 ++++
 src/i18n/locales/ko.ts       |  8 ++++
 src/views/ConfigSyncView.vue | 75 +++++++++++++++++++++++++++++++-----
 4 files changed, 92 insertions(+), 14 deletions(-)

diff --git a/src/api/configSync.ts b/src/api/configSync.ts
index 7a4b648..c95d937 100644
--- a/src/api/configSync.ts
+++ b/src/api/configSync.ts
@@ -14,11 +14,15 @@ export interface ConfigBundle {
     requiredPermissionCode: string | null
     displayOrder: number
   }>
+  // Present only when exported with includeUsers=true. Never carries a password.
+  users?: Array<{ loginId: string; email: string | null; status: string; roleCodes: string[] }>
 }
 
 export interface ImportSection {
   created: string[]
   updated: string[]
+  deleted: string[]
+  skipped: string[]
 }
 
 export interface ImportResult {
@@ -27,18 +31,21 @@ export interface ImportResult {
   permissions: ImportSection
   roles: ImportSection
   menus: ImportSection
+  users: ImportSection
 }
 
 const base = '/config'
 
 export const configSyncApi = {
-  export(tenantId: string) {
-    return client.get<ConfigBundle>(`${base}/export`, { params: { tenantId } }).then((r) => r.data)
+  export(tenantId: string, includeUsers = false) {
+    return client
+      .get<ConfigBundle>(`${base}/export`, { params: { tenantId, includeUsers } })
+      .then((r) => r.data)
   },
   // `import` is awkward as a method name; the backend endpoint is POST /config/import.
-  apply(bundle: ConfigBundle, dryRun: boolean, mode = 'merge') {
+  apply(bundle: ConfigBundle, dryRun: boolean, mode = 'merge', includeUsers = false) {
     return client
-      .post<ImportResult>(`${base}/import`, bundle, { params: { mode, dryRun } })
+      .post<ImportResult>(`${base}/import`, bundle, { params: { mode, dryRun, includeUsers } })
       .then((r) => r.data)
   },
 }
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 2333075..65a26f0 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -40,6 +40,7 @@ export default {
       permissions: '{n} permissions',
       roles: '{n} roles',
       menus: '{n} menus',
+      users: '{n} users',
     },
     export: {
       title: 'Export',
@@ -47,6 +48,7 @@ export default {
       run: 'Export',
       download: 'Download JSON',
       copy: 'Copy',
+      includeUsers: 'Include users (no passwords)',
       empty: 'No bundle yet — click Export to generate one.',
     },
     import: {
@@ -65,17 +67,23 @@ export default {
       apply: 'Apply',
       invalidJson: 'Invalid JSON — could not parse the bundle.',
       needDryRun: 'Run a preview first; apply unlocks once the dry-run reflects the current bundle.',
+      includeUsers: 'Sync users',
+      usersHint:
+        'User sync creates missing users only — no passwords are carried (created users must have one set by an admin) and existing users are never overwritten.',
     },
     result: {
       dryRunTitle: 'Preview (dry-run) — nothing was written',
       appliedTitle: 'Applied',
       created: 'Created',
       updated: 'Updated',
+      deleted: 'Deleted',
+      skipped: 'Skipped',
       none: 'None',
       section: {
         permissions: 'Permissions',
         roles: 'Roles',
         menus: 'Menus',
+        users: 'Users',
       },
     },
     toasts: {
diff --git a/src/i18n/locales/ko.ts b/src/i18n/locales/ko.ts
index 67524ab..bb270b6 100644
--- a/src/i18n/locales/ko.ts
+++ b/src/i18n/locales/ko.ts
@@ -40,6 +40,7 @@ export default {
       permissions: '권한 {n}개',
       roles: '역할 {n}개',
       menus: '메뉴 {n}개',
+      users: '사용자 {n}명',
     },
     export: {
       title: '내보내기',
@@ -47,6 +48,7 @@ export default {
       run: '내보내기',
       download: 'JSON 다운로드',
       copy: '복사',
+      includeUsers: '사용자 포함 (비밀번호 제외)',
       empty: '아직 번들이 없습니다 — 내보내기를 눌러 생성하세요.',
     },
     import: {
@@ -65,17 +67,23 @@ export default {
       apply: '적용',
       invalidJson: '잘못된 JSON — 번들을 파싱할 수 없습니다.',
       needDryRun: '먼저 미리보기를 실행하세요. 미리보기가 현재 번들과 일치하면 적용이 활성화됩니다.',
+      includeUsers: '사용자 동기화',
+      usersHint:
+        '사용자 동기화는 없는 사용자만 생성합니다 — 비밀번호는 전송되지 않으며(생성된 사용자는 관리자가 비밀번호를 설정해야 함) 기존 사용자는 절대 덮어쓰지 않습니다.',
     },
     result: {
       dryRunTitle: '미리보기 (dry-run) — 아무것도 기록되지 않았습니다',
       appliedTitle: '적용 완료',
       created: '생성',
       updated: '수정',
+      deleted: '삭제',
+      skipped: '건너뜀',
       none: '없음',
       section: {
         permissions: '권한',
         roles: '역할',
         menus: '메뉴',
+        users: '사용자',
       },
     },
     toasts: {
diff --git a/src/views/ConfigSyncView.vue b/src/views/ConfigSyncView.vue
index 60b624b..28c8073 100644
--- a/src/views/ConfigSyncView.vue
+++ b/src/views/ConfigSyncView.vue
@@ -7,9 +7,10 @@ import Textarea from 'primevue/textarea'
 import Select from 'primevue/select'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
+import Checkbox from 'primevue/checkbox'
 import { useToast } from 'primevue/usetoast'
 import { useAuthStore } from '@/stores/auth'
-import { configSyncApi, type ConfigBundle, type ImportResult } from '@/api/configSync'
+import { configSyncApi, type ConfigBundle, type ImportResult, type ImportSection } from '@/api/configSync'
 
 const toast = useToast()
 const { t } = useI18n()
@@ -19,12 +20,13 @@ const auth = useAuthStore()
 const exported = ref<ConfigBundle | null>(null)
 const exportedJson = ref('')
 const exporting = ref(false)
+const exportIncludeUsers = ref(false)
 
 async function runExport() {
   exporting.value = true
   try {
     const tenantId = auth.user?.tenantId ?? 'default'
-    const bundle = await configSyncApi.export(tenantId)
+    const bundle = await configSyncApi.export(tenantId, exportIncludeUsers.value)
     exported.value = bundle
     exportedJson.value = JSON.stringify(bundle, null, 2)
     toast.add({ severity: 'success', summary: t('configSync.toasts.exported'), life: 3000 })
@@ -63,13 +65,14 @@ const modeOptions = computed(() => [
   { label: t('configSync.import.modes.merge'), value: 'merge' },
   { label: t('configSync.import.modes.mirror'), value: 'mirror' },
 ])
+const importIncludeUsers = ref(false)
 const result = ref<ImportResult | null>(null)
 const importing = ref(false)
 const fileInput = ref<HTMLInputElement | null>(null)
 
-// Any edit to the bundle text or the mode invalidates a prior dry-run: the
-// "Apply" button is gated on a fresh preview matching exactly what will run.
-watch([importText, mode], () => {
+// Any edit to the bundle text, mode or the users toggle invalidates a prior
+// dry-run: "Apply" is gated on a fresh preview matching exactly what will run.
+watch([importText, mode, importIncludeUsers], () => {
   result.value = null
 })
 
@@ -102,7 +105,7 @@ async function runDryRun() {
   if (!bundle) return
   importing.value = true
   try {
-    result.value = await configSyncApi.apply(bundle, true, mode.value)
+    result.value = await configSyncApi.apply(bundle, true, mode.value, importIncludeUsers.value)
     toast.add({ severity: 'info', summary: t('configSync.toasts.dryRunDone'), life: 3000 })
   } catch (e) {
     result.value = null
@@ -117,7 +120,7 @@ async function runApply() {
   if (!bundle) return
   importing.value = true
   try {
-    result.value = await configSyncApi.apply(bundle, false, mode.value)
+    result.value = await configSyncApi.apply(bundle, false, mode.value, importIncludeUsers.value)
     toast.add({ severity: 'success', summary: t('configSync.toasts.applied'), life: 4000 })
   } catch (e) {
     toast.add({ severity: 'error', summary: t('configSync.toasts.importFailed'), detail: msg(e), life: 6000 })
@@ -130,16 +133,28 @@ async function runApply() {
 // above clears `result` on any edit, so a present result is always fresh).
 const canApply = computed(() => result.value?.dryRun === true && !importing.value)
 
+function hasAny(s: ImportSection) {
+  return s.created.length + s.updated.length + s.deleted.length + s.skipped.length > 0
+}
+
 const sections = computed(() => {
   const r = result.value
   if (!r) return []
-  return [
+  const list = [
     { key: 'permissions', label: t('configSync.result.section.permissions'), data: r.permissions },
     { key: 'roles', label: t('configSync.result.section.roles'), data: r.roles },
     { key: 'menus', label: t('configSync.result.section.menus'), data: r.menus },
   ]
+  // Only surface the users section when user sync actually ran or produced something.
+  if (importIncludeUsers.value || hasAny(r.users)) {
+    list.push({ key: 'users', label: t('configSync.result.section.users'), data: r.users })
+  }
+  return list
 })
 
+// Mirror is the only mode that deletes; show the deleted block when relevant.
+const showDeletes = computed(() => result.value?.mode === 'mirror')
+
 function msg(e: unknown): string {
   if (e && typeof e === 'object' && 'response' in e) {
     const r = (e as { response?: { data?: { message?: string } } }).response
@@ -166,6 +181,12 @@ function msg(e: unknown): string {
       </template>
       <template #content>
         <p class="text-sm text-surface-600 dark:text-surface-400 mb-3">{{ t('configSync.export.desc') }}</p>
+        <div class="flex items-center gap-2 mb-3">
+          <Checkbox v-model="exportIncludeUsers" binary input-id="exportIncludeUsers" />
+          <label for="exportIncludeUsers" class="text-sm cursor-pointer">
+            {{ t('configSync.export.includeUsers') }}
+          </label>
+        </div>
         <div class="flex flex-wrap items-center gap-2 mb-3">
           <Button :label="t('configSync.export.run')" icon="pi pi-download" :loading="exporting" @click="runExport" />
           <Button
@@ -188,6 +209,11 @@ function msg(e: unknown): string {
             <Tag severity="info" :value="t('configSync.counts.permissions', { n: exported.permissions.length })" />
             <Tag severity="info" :value="t('configSync.counts.roles', { n: exported.roles.length })" />
             <Tag severity="info" :value="t('configSync.counts.menus', { n: exported.menus.length })" />
+            <Tag
+              v-if="exported.users"
+              severity="info"
+              :value="t('configSync.counts.users', { n: exported.users.length })"
+            />
           </span>
         </div>
         <Textarea
@@ -225,11 +251,20 @@ function msg(e: unknown): string {
             @click="pickFile"
           />
           <input ref="fileInput" type="file" accept="application/json,.json" class="hidden" @change="onFileChosen" />
+          <div class="flex items-center gap-2 pb-1">
+            <Checkbox v-model="importIncludeUsers" binary input-id="importIncludeUsers" />
+            <label for="importIncludeUsers" class="text-sm cursor-pointer">
+              {{ t('configSync.import.includeUsers') }}
+            </label>
+          </div>
         </div>
 
         <Message v-if="mode === 'mirror'" severity="warn" :closable="false" class="mb-3">
           {{ t('configSync.import.mirrorWarn') }}
         </Message>
+        <Message v-if="importIncludeUsers" severity="info" :closable="false" class="mb-3">
+          {{ t('configSync.import.usersHint') }}
+        </Message>
 
         <Textarea
           v-model="importText"
@@ -278,7 +313,8 @@ function msg(e: unknown): string {
             <div class="font-semibold mb-3 flex items-center justify-between">
               <span>{{ s.label }}</span>
               <span class="text-xs font-normal text-surface-500">
-                +{{ s.data.created.length }} / ~{{ s.data.updated.length }}
+                +{{ s.data.created.length }} / ~{{ s.data.updated.length
+                }}<template v-if="showDeletes"> / −{{ s.data.deleted.length }}</template>
               </span>
             </div>
 
@@ -292,7 +328,7 @@ function msg(e: unknown): string {
               <div v-else class="text-xs text-surface-400">{{ t('configSync.result.none') }}</div>
             </div>
 
-            <div>
+            <div class="mb-3">
               <div class="text-xs font-medium text-blue-600 dark:text-blue-400 mb-1">
                 {{ t('configSync.result.updated') }} ({{ s.data.updated.length }})
               </div>
@@ -301,6 +337,25 @@ function msg(e: unknown): string {
               </div>
               <div v-else class="text-xs text-surface-400">{{ t('configSync.result.none') }}</div>
             </div>
+
+            <div v-if="showDeletes" class="mb-3">
+              <div class="text-xs font-medium text-red-600 dark:text-red-400 mb-1">
+                {{ t('configSync.result.deleted') }} ({{ s.data.deleted.length }})
+              </div>
+              <div v-if="s.data.deleted.length" class="flex flex-wrap gap-1">
+                <Tag v-for="code in s.data.deleted" :key="code" severity="danger" :value="code" />
+              </div>
+              <div v-else class="text-xs text-surface-400">{{ t('configSync.result.none') }}</div>
+            </div>
+
+            <div v-if="s.data.skipped.length">
+              <div class="text-xs font-medium text-surface-500 mb-1">
+                {{ t('configSync.result.skipped') }} ({{ s.data.skipped.length }})
+              </div>
+              <div class="flex flex-wrap gap-1">
+                <Tag v-for="code in s.data.skipped" :key="code" severity="secondary" :value="code" />
+              </div>
+            </div>
           </div>
         </div>
       </template>