From 4a29598037628b81d137d531dc81101c32db4382 Mon Sep 17 00:00:00 2001
From: Garfield Lee <Garfield550@users.noreply.github.com>
Date: Sun, 22 Mar 2026 04:39:46 +0800
Subject: [PATCH] feat(stage-*): refactor settings data page and add app data
 folder action (#1447)

------

Co-authored-by-agent: Codex
---
 apps/stage-tamagotchi/electron.vite.config.ts |   1 +
 .../src/main/services/electron/app.test.ts    |  59 ++++
 .../src/main/services/electron/app.ts         |  12 +-
 .../components/desktop-folder-section.vue     |  51 ++++
 .../data/components/desktop-reset-section.vue |  49 +++
 .../renderer/pages/settings/data/index.vue    |  38 +++
 apps/stage-tamagotchi/src/shared/eventa.ts    |   1 +
 apps/stage-tamagotchi/tsconfig.web.json       |   6 +
 packages/i18n/src/locales/en/settings.yaml    |   4 +
 .../i18n/src/locales/zh-Hans/settings.yaml    |   4 +
 packages/stage-pages/package.json             |   3 +-
 .../data/components/chats-section.vue         | 111 +++++++
 .../data/components/danger-section.vue        |  97 ++++++
 .../components/models-modules-section.vue     |  84 ++++++
 .../data/components/status-banner.vue         |  23 ++
 .../src/pages/settings/data/index.vue         | 283 +-----------------
 .../src/pages/settings/data/status.ts         |  47 +++
 17 files changed, 598 insertions(+), 275 deletions(-)
 create mode 100644 apps/stage-tamagotchi/src/main/services/electron/app.test.ts
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue
 create mode 100644 apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue
 create mode 100644 packages/stage-pages/src/pages/settings/data/components/chats-section.vue
 create mode 100644 packages/stage-pages/src/pages/settings/data/components/danger-section.vue
 create mode 100644 packages/stage-pages/src/pages/settings/data/components/models-modules-section.vue
 create mode 100644 packages/stage-pages/src/pages/settings/data/components/status-banner.vue
 create mode 100644 packages/stage-pages/src/pages/settings/data/status.ts

diff --git a/apps/stage-tamagotchi/electron.vite.config.ts b/apps/stage-tamagotchi/electron.vite.config.ts
index 86469dded..d4e2a88b7 100644
--- a/apps/stage-tamagotchi/electron.vite.config.ts
+++ b/apps/stage-tamagotchi/electron.vite.config.ts
@@ -207,6 +207,7 @@ export default defineConfig({
             exclude: base => [
               ...base,
               '**/settings/connection/index.vue',
+              '**/settings/data/index.vue',
               '**/settings/system/general.vue',
               '**/settings/modules/mcp.vue',
             ],
diff --git a/apps/stage-tamagotchi/src/main/services/electron/app.test.ts b/apps/stage-tamagotchi/src/main/services/electron/app.test.ts
new file mode 100644
index 000000000..e22178914
--- /dev/null
+++ b/apps/stage-tamagotchi/src/main/services/electron/app.test.ts
@@ -0,0 +1,59 @@
+import { createContext, defineInvoke } from '@moeru/eventa'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { electronAppOpenUserDataFolder } from '../../../shared/eventa'
+import { createAppService } from './app'
+
+const appMock = vi.hoisted(() => ({
+  getPath: vi.fn(),
+  quit: vi.fn(),
+}))
+
+const shellMock = vi.hoisted(() => ({
+  openPath: vi.fn(),
+}))
+
+vi.mock('electron', () => ({
+  app: appMock,
+  shell: shellMock,
+}))
+
+vi.mock('std-env', () => ({
+  isLinux: false,
+  isMacOS: false,
+  isWindows: true,
+}))
+
+describe('createAppService', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('opens the Electron userData folder and returns its path', async () => {
+    const context = createContext()
+    appMock.getPath.mockReturnValue('/tmp/airi-user-data')
+    shellMock.openPath.mockResolvedValue('')
+
+    createAppService({ context: context as never, window: {} as never })
+
+    const openUserDataFolder = defineInvoke(context, electronAppOpenUserDataFolder)
+
+    await expect(openUserDataFolder()).resolves.toEqual({ path: '/tmp/airi-user-data' })
+    expect(appMock.getPath).toHaveBeenCalledWith('userData')
+    expect(shellMock.openPath).toHaveBeenCalledWith('/tmp/airi-user-data')
+  })
+
+  it('throws when Electron fails to open the userData folder', async () => {
+    const context = createContext()
+    appMock.getPath.mockReturnValue('/tmp/airi-user-data')
+    shellMock.openPath.mockResolvedValue('Failed to open path')
+
+    createAppService({ context: context as never, window: {} as never })
+
+    const openUserDataFolder = defineInvoke(context, electronAppOpenUserDataFolder)
+
+    await expect(openUserDataFolder()).rejects.toThrow('Failed to open path')
+    expect(appMock.getPath).toHaveBeenCalledWith('userData')
+    expect(shellMock.openPath).toHaveBeenCalledWith('/tmp/airi-user-data')
+  })
+})
diff --git a/apps/stage-tamagotchi/src/main/services/electron/app.ts b/apps/stage-tamagotchi/src/main/services/electron/app.ts
index 8daab8dc7..94e445ddc 100644
--- a/apps/stage-tamagotchi/src/main/services/electron/app.ts
+++ b/apps/stage-tamagotchi/src/main/services/electron/app.ts
@@ -2,14 +2,22 @@ import type { createContext } from '@moeru/eventa/adapters/electron/main'
 import type { BrowserWindow } from 'electron'
 
 import { defineInvokeHandler } from '@moeru/eventa'
-import { app } from 'electron'
+import { app, shell } from 'electron'
 import { isLinux, isMacOS, isWindows } from 'std-env'
 
-import { electron, electronAppQuit } from '../../../shared/eventa'
+import { electron, electronAppOpenUserDataFolder, electronAppQuit } from '../../../shared/eventa'
 
 export function createAppService(params: { context: ReturnType<typeof createContext>['context'], window: BrowserWindow }) {
   defineInvokeHandler(params.context, electron.app.isMacOS, () => isMacOS)
   defineInvokeHandler(params.context, electron.app.isWindows, () => isWindows)
   defineInvokeHandler(params.context, electron.app.isLinux, () => isLinux)
+  defineInvokeHandler(params.context, electronAppOpenUserDataFolder, async () => {
+    const path = app.getPath('userData')
+    const openResult = await shell.openPath(path)
+    if (openResult) {
+      throw new Error(openResult)
+    }
+    return { path }
+  })
   defineInvokeHandler(params.context, electronAppQuit, () => app.quit())
 }
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue
new file mode 100644
index 000000000..3ab32857d
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { DataSettingsStatusEmits } from '@proj-airi/stage-pages/pages/settings/data/status'
+
+import { defineInvoke } from '@moeru/eventa'
+import { createContext } from '@moeru/eventa/adapters/electron/renderer'
+import { createDataSettingsStatusHelpers } from '@proj-airi/stage-pages/pages/settings/data/status'
+import { isElectronWindow } from '@proj-airi/stage-shared'
+import { Button } from '@proj-airi/ui'
+import { useI18n } from 'vue-i18n'
+
+import { electronAppOpenUserDataFolder } from '../../../../../shared/eventa'
+
+const emit = defineEmits<DataSettingsStatusEmits>()
+const { t } = useI18n()
+const { handleActionError } = createDataSettingsStatusHelpers(emit)
+
+async function triggerOpenDesktopUserDataFolder() {
+  if (typeof window === 'undefined' || !isElectronWindow(window))
+    return
+
+  try {
+    const { context } = createContext(window.electron.ipcRenderer)
+    const openUserDataFolder = defineInvoke(context, electronAppOpenUserDataFolder)
+
+    await openUserDataFolder()
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+</script>
+
+<template>
+  <div :class="['border-2 border-sky-200/80 rounded-xl bg-sky-50/80 p-4 shadow-sm', 'dark:border-sky-500/40 dark:bg-sky-500/10']">
+    <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+      <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+        <div :class="['text-lg text-sky-700 font-medium dark:text-sky-200']">
+          {{ t('settings.pages.data.sections.desktop-folder.title') }}
+        </div>
+        <p :class="['text-sm text-sky-700/80 dark:text-sky-200/80']">
+          {{ t('settings.pages.data.sections.desktop-folder.description') }}
+        </p>
+      </div>
+      <div :class="['flex flex-col items-start gap-2']">
+        <Button variant="secondary" @click="triggerOpenDesktopUserDataFolder">
+          {{ t('settings.pages.data.sections.desktop-folder.open') }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue
new file mode 100644
index 000000000..069f7a2fd
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { DataSettingsStatusEmits } from '@proj-airi/stage-pages/pages/settings/data/status'
+
+import { createDataSettingsStatusHelpers } from '@proj-airi/stage-pages/pages/settings/data/status'
+import { useDataMaintenance } from '@proj-airi/stage-ui/composables/use-data-maintenance'
+import { DoubleCheckButton } from '@proj-airi/ui'
+import { useI18n } from 'vue-i18n'
+
+const emit = defineEmits<DataSettingsStatusEmits>()
+const { t } = useI18n()
+const { resetDesktopApplicationState } = useDataMaintenance()
+const { emitStatus, handleActionError } = createDataSettingsStatusHelpers(emit)
+
+async function resetDesktopState() {
+  try {
+    await resetDesktopApplicationState()
+    emitStatus(t('settings.pages.data.status.desktop_reset'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+</script>
+
+<template>
+  <div :class="['border-2 border-amber-300/80 rounded-xl bg-amber-50/80 p-4 shadow-sm', 'dark:border-amber-500/60 dark:bg-amber-500/10']">
+    <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+      <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+        <div :class="['text-lg text-amber-700 font-medium dark:text-amber-200']">
+          {{ t('settings.pages.data.sections.desktop.title') }}
+        </div>
+        <p :class="['text-sm text-amber-700/80 dark:text-amber-200/80']">
+          {{ t('settings.pages.data.sections.desktop.description') }}
+        </p>
+      </div>
+      <div :class="['flex flex-col items-start gap-2']">
+        <DoubleCheckButton variant="caution" @confirm="resetDesktopState">
+          {{ t('settings.pages.data.sections.desktop.reset') }}
+          <template #confirm>
+            {{ t('settings.pages.data.confirmations.yes') }}
+          </template>
+          <template #cancel>
+            {{ t('settings.pages.card.cancel') }}
+          </template>
+        </DoubleCheckButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue
new file mode 100644
index 000000000..d075691c4
--- /dev/null
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import ChatsSection from '@proj-airi/stage-pages/pages/settings/data/components/chats-section.vue'
+import DangerSection from '@proj-airi/stage-pages/pages/settings/data/components/danger-section.vue'
+import ModelsModulesSection from '@proj-airi/stage-pages/pages/settings/data/components/models-modules-section.vue'
+import StatusBanner from '@proj-airi/stage-pages/pages/settings/data/components/status-banner.vue'
+
+import { createDataSettingsStatusState } from '@proj-airi/stage-pages/pages/settings/data/status'
+
+import DesktopFolderSection from './components/desktop-folder-section.vue'
+import DesktopResetSection from './components/desktop-reset-section.vue'
+
+const { statusMessage, statusTone, handleStatus } = createDataSettingsStatusState()
+</script>
+
+<template>
+  <div :class="['flex flex-col gap-4 pb-4']">
+    <StatusBanner v-if="statusMessage" :message="statusMessage" :tone="statusTone" />
+    <ChatsSection @status="handleStatus" />
+    <ModelsModulesSection @status="handleStatus" />
+    <DesktopFolderSection @status="handleStatus" />
+    <DesktopResetSection @status="handleStatus" />
+    <DangerSection @status="handleStatus" />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  titleKey: settings.pages.data.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.data.description
+  icon: i-solar:database-bold-duotone
+  settingsEntry: true
+  order: 7
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
diff --git a/apps/stage-tamagotchi/src/shared/eventa.ts b/apps/stage-tamagotchi/src/shared/eventa.ts
index 3a3ea5ef5..24a6b1cdd 100644
--- a/apps/stage-tamagotchi/src/shared/eventa.ts
+++ b/apps/stage-tamagotchi/src/shared/eventa.ts
@@ -226,6 +226,7 @@ export interface ElectronWindowLifecycleState {
 export const electronWindowLifecycleChanged = defineEventa<ElectronWindowLifecycleState>('eventa:event:electron:window:lifecycle-changed')
 export const electronGetWindowLifecycleState = defineInvokeEventa<ElectronWindowLifecycleState>('eventa:invoke:electron:window:get-lifecycle-state')
 export const electronWindowSetAlwaysOnTop = defineInvokeEventa<void, boolean>('eventa:invoke:electron:window:set-always-on-top')
+export const electronAppOpenUserDataFolder = defineInvokeEventa<{ path: string }>('eventa:invoke:electron:app:open-user-data-folder')
 export const electronAppQuit = defineInvokeEventa<void>('eventa:invoke:electron:app:quit')
 
 export type StageThreeRuntimeTraceEnvelope
diff --git a/apps/stage-tamagotchi/tsconfig.web.json b/apps/stage-tamagotchi/tsconfig.web.json
index dfc56acad..8dfa8ae0c 100644
--- a/apps/stage-tamagotchi/tsconfig.web.json
+++ b/apps/stage-tamagotchi/tsconfig.web.json
@@ -13,6 +13,12 @@
     "useDefineForClassFields": true,
     "baseUrl": "./src/renderer",
     "paths": {
+      "@proj-airi/stage-pages/*.vue": [
+        "../../packages/stage-pages/src/*.vue"
+      ],
+      "@proj-airi/stage-pages/*": [
+        "../../packages/stage-pages/src/*.ts"
+      ],
       "@proj-airi/stage-ui/*": [
         "../../packages/stage-ui/src/*"
       ],
diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml
index edd7f1940..51254091c 100644
--- a/packages/i18n/src/locales/en/settings.yaml
+++ b/packages/i18n/src/locales/en/settings.yaml
@@ -224,6 +224,10 @@ pages:
         title: Delete all data
         description: Wipe every local setting, provider config, and model.
         delete: Delete all data
+      desktop-folder:
+        title: Open app data folder
+        description: Open AIRI's data folder in your file manager.
+        open: Open folder
       desktop:
         title: Reset desktop settings & states
         description: Clear AIRI desktop settings and runtime state.
diff --git a/packages/i18n/src/locales/zh-Hans/settings.yaml b/packages/i18n/src/locales/zh-Hans/settings.yaml
index 51bfe4c8f..c38379984 100644
--- a/packages/i18n/src/locales/zh-Hans/settings.yaml
+++ b/packages/i18n/src/locales/zh-Hans/settings.yaml
@@ -217,6 +217,10 @@ pages:
         title: 删除所有数据
         description: 清除每个本地设置、提供商配置和模型。
         delete: 删除所有数据
+      desktop-folder:
+        title: 打开应用数据文件夹
+        description: 在文件管理器中打开 AIRI 的数据文件夹。
+        open: 打开文件夹
       desktop:
         title: 重置桌面设置和状态
         description: 清除 AIRI 桌面设置和运行状态。
diff --git a/packages/stage-pages/package.json b/packages/stage-pages/package.json
index 1230b7bac..6f469239c 100644
--- a/packages/stage-pages/package.json
+++ b/packages/stage-pages/package.json
@@ -15,7 +15,8 @@
     "directory": "packages/stage-pages"
   },
   "exports": {
-    "./*": "./src/*"
+    "./*.vue": "./src/*.vue",
+    "./*": "./src/*.ts"
   },
   "scripts": {
     "typecheck": "vue-tsc --noEmit"
diff --git a/packages/stage-pages/src/pages/settings/data/components/chats-section.vue b/packages/stage-pages/src/pages/settings/data/components/chats-section.vue
new file mode 100644
index 000000000..3093bee83
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/components/chats-section.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import type { DataSettingsStatusEmits } from '../status'
+
+import { useDataMaintenance } from '@proj-airi/stage-ui/composables/use-data-maintenance'
+import { Button, DoubleCheckButton } from '@proj-airi/ui'
+import { shallowRef, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import { createDataSettingsStatusHelpers } from '../status'
+
+const emit = defineEmits<DataSettingsStatusEmits>()
+const { t } = useI18n()
+const importFileInput = useTemplateRef<HTMLInputElement>('importFileInput')
+const importError = shallowRef('')
+const {
+  deleteAllChatSessions,
+  exportChatSessions,
+  importChatSessions,
+} = useDataMaintenance()
+const { emitStatus, handleActionError } = createDataSettingsStatusHelpers(emit)
+
+function triggerImportPicker() {
+  importFileInput.value?.click()
+}
+
+async function triggerExport() {
+  try {
+    const blob = await exportChatSessions()
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = `airi-chat-sessions-${new Date().toISOString()}.json`
+    anchor.click()
+    URL.revokeObjectURL(url)
+    emitStatus(t('settings.pages.data.status.exported'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+
+function deleteChats() {
+  try {
+    deleteAllChatSessions()
+    emitStatus(t('settings.pages.data.status.chats_deleted'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+
+async function handleImport(event: Event) {
+  const target = event.target as HTMLInputElement
+  const file = target.files?.[0]
+  if (!file)
+    return
+
+  try {
+    const raw = await file.text()
+    const parsed = JSON.parse(raw) as Record<string, unknown>
+    await importChatSessions(parsed)
+    importError.value = ''
+    emitStatus(t('settings.pages.data.status.imported'))
+  }
+  catch (error) {
+    importError.value = t('settings.pages.data.status.import_error')
+    handleActionError(error)
+  }
+  finally {
+    target.value = ''
+  }
+}
+</script>
+
+<template>
+  <div :class="['border-2 border-neutral-200/50 rounded-xl bg-white/70 p-4 shadow-sm', 'dark:border-neutral-800/60 dark:bg-neutral-900/60']">
+    <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+      <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+        <div :class="['text-lg font-medium']">
+          {{ t('settings.pages.data.sections.chats.title') }}
+        </div>
+        <p :class="['text-sm text-neutral-600 dark:text-neutral-400']">
+          {{ t('settings.pages.data.sections.chats.description') }}
+        </p>
+      </div>
+      <div :class="['flex flex-col items-start gap-2 sm:items-end']">
+        <div :class="['flex flex-wrap gap-2']">
+          <Button variant="secondary" @click="triggerExport">
+            {{ t('settings.pages.data.sections.chats.export') }}
+          </Button>
+          <Button variant="primary" @click="triggerImportPicker">
+            {{ t('settings.pages.data.sections.chats.import') }}
+          </Button>
+        </div>
+        <DoubleCheckButton variant="danger" @confirm="deleteChats">
+          {{ t('settings.pages.data.sections.chats.delete') }}
+          <template #confirm>
+            {{ t('settings.pages.data.confirmations.yes') }}
+          </template>
+          <template #cancel>
+            {{ t('settings.pages.card.cancel') }}
+          </template>
+        </DoubleCheckButton>
+      </div>
+    </div>
+    <input ref="importFileInput" type="file" accept="application/json" :class="['hidden']" @change="handleImport">
+    <p v-if="importError" :class="['text-sm text-red-500']">
+      {{ importError }}
+    </p>
+  </div>
+</template>
diff --git a/packages/stage-pages/src/pages/settings/data/components/danger-section.vue b/packages/stage-pages/src/pages/settings/data/components/danger-section.vue
new file mode 100644
index 000000000..228813cb0
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/components/danger-section.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { DataSettingsStatusEmits } from '../status'
+
+import { useDataMaintenance } from '@proj-airi/stage-ui/composables/use-data-maintenance'
+import { DoubleCheckButton } from '@proj-airi/ui'
+import { useI18n } from 'vue-i18n'
+
+import { createDataSettingsStatusHelpers } from '../status'
+
+const emit = defineEmits<DataSettingsStatusEmits>()
+const { t } = useI18n()
+const { deleteAllData, resetProvidersSettings } = useDataMaintenance()
+const { emitStatus, handleActionError } = createDataSettingsStatusHelpers(emit)
+
+async function resetProviders() {
+  try {
+    await resetProvidersSettings()
+    emitStatus(t('settings.pages.data.status.providers_reset'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+
+async function deleteAll() {
+  try {
+    await deleteAllData()
+    emitStatus(t('settings.pages.data.status.all_deleted'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+</script>
+
+<template>
+  <div :class="['border-2 border-red-300/80 rounded-xl bg-red-50/80 p-4 shadow-sm', 'dark:border-red-500/60 dark:bg-red-500/10']">
+    <div :class="['flex flex-col gap-3']">
+      <div>
+        <div :class="['text-lg text-red-600 font-semibold dark:text-red-300']">
+          {{ t('settings.pages.data.sections.danger.title') }}
+        </div>
+        <p :class="['text-sm text-red-600/80 dark:text-red-200/80']">
+          {{ t('settings.pages.data.sections.danger.description') }}
+        </p>
+      </div>
+
+      <div :class="['flex flex-col gap-3']">
+        <div :class="['grid gap-3 md:grid-cols-2']">
+          <div :class="['grid grid-cols-1 items-start gap-2 p-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+            <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+              <div :class="['text-sm text-red-700 font-medium dark:text-red-200']">
+                {{ t('settings.pages.data.sections.providers.title') }}
+              </div>
+              <p :class="['text-xs text-red-700/80 dark:text-red-200/80']">
+                {{ t('settings.pages.data.sections.providers.description') }}
+              </p>
+            </div>
+            <div :class="['flex flex-col items-start gap-2']">
+              <DoubleCheckButton variant="danger" @confirm="resetProviders">
+                {{ t('settings.pages.data.sections.providers.reset') }}
+                <template #confirm>
+                  {{ t('settings.pages.data.confirmations.yes') }}
+                </template>
+                <template #cancel>
+                  {{ t('settings.pages.card.cancel') }}
+                </template>
+              </DoubleCheckButton>
+            </div>
+          </div>
+
+          <div :class="['grid grid-cols-1 items-start gap-2 p-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+            <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+              <div :class="['text-sm text-red-700 font-medium dark:text-red-200']">
+                {{ t('settings.pages.data.sections.all.title') }}
+              </div>
+              <p :class="['text-xs text-red-700/80 dark:text-red-200/80']">
+                {{ t('settings.pages.data.sections.all.description') }}
+              </p>
+            </div>
+            <div :class="['flex flex-col items-start gap-2']">
+              <DoubleCheckButton variant="danger" @confirm="deleteAll">
+                {{ t('settings.pages.data.sections.all.delete') }}
+                <template #confirm>
+                  {{ t('settings.pages.data.confirmations.yes') }}
+                </template>
+                <template #cancel>
+                  {{ t('settings.pages.card.cancel') }}
+                </template>
+              </DoubleCheckButton>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/stage-pages/src/pages/settings/data/components/models-modules-section.vue b/packages/stage-pages/src/pages/settings/data/components/models-modules-section.vue
new file mode 100644
index 000000000..f717dbaea
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/components/models-modules-section.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { DataSettingsStatusEmits } from '../status'
+
+import { useDataMaintenance } from '@proj-airi/stage-ui/composables/use-data-maintenance'
+import { DoubleCheckButton } from '@proj-airi/ui'
+import { useI18n } from 'vue-i18n'
+
+import { createDataSettingsStatusHelpers } from '../status'
+
+const emit = defineEmits<DataSettingsStatusEmits>()
+const { t } = useI18n()
+const { deleteAllModels, resetModulesSettings } = useDataMaintenance()
+const { emitStatus, handleActionError } = createDataSettingsStatusHelpers(emit)
+
+async function deleteModels() {
+  try {
+    await deleteAllModels()
+    emitStatus(t('settings.pages.data.status.models_deleted'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+
+function resetModules() {
+  try {
+    resetModulesSettings()
+    emitStatus(t('settings.pages.data.status.modules_reset'))
+  }
+  catch (error) {
+    handleActionError(error)
+  }
+}
+</script>
+
+<template>
+  <div :class="['border-2 border-neutral-200/50 rounded-xl bg-white/70 p-4 shadow-sm', 'dark:border-neutral-800/60 dark:bg-neutral-900/60']">
+    <div :class="['flex flex-col gap-3']">
+      <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+        <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+          <div :class="['text-lg font-medium']">
+            {{ t('settings.pages.data.sections.models.title') }}
+          </div>
+          <p :class="['text-sm text-neutral-600 dark:text-neutral-400']">
+            {{ t('settings.pages.data.sections.models.description') }}
+          </p>
+        </div>
+        <div :class="['flex flex-col items-start gap-2']">
+          <DoubleCheckButton variant="danger" @confirm="deleteModels">
+            {{ t('settings.pages.data.sections.models.delete') }}
+            <template #confirm>
+              {{ t('settings.pages.data.confirmations.yes') }}
+            </template>
+            <template #cancel>
+              {{ t('settings.pages.card.cancel') }}
+            </template>
+          </DoubleCheckButton>
+        </div>
+      </div>
+
+      <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+        <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
+          <div :class="['text-lg font-medium']">
+            {{ t('settings.pages.data.sections.modules.title') }}
+          </div>
+          <p :class="['text-sm text-neutral-600 dark:text-neutral-400']">
+            {{ t('settings.pages.data.sections.modules.description') }}
+          </p>
+        </div>
+        <div :class="['flex flex-col items-start gap-2']">
+          <DoubleCheckButton variant="caution" @confirm="resetModules">
+            {{ t('settings.pages.data.sections.modules.reset') }}
+            <template #confirm>
+              {{ t('settings.pages.data.confirmations.yes') }}
+            </template>
+            <template #cancel>
+              {{ t('settings.pages.card.cancel') }}
+            </template>
+          </DoubleCheckButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/stage-pages/src/pages/settings/data/components/status-banner.vue b/packages/stage-pages/src/pages/settings/data/components/status-banner.vue
new file mode 100644
index 000000000..c226ec9a6
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/components/status-banner.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DataSettingsStatusTone } from '../status'
+
+interface Props {
+  message: string
+  tone: DataSettingsStatusTone
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    :class="[
+      'rounded-xl border px-4 py-3 text-sm shadow-sm',
+      tone === 'success' && 'border-emerald-300/80 bg-emerald-50/80 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200',
+      tone === 'error' && 'border-red-300/80 bg-red-50/80 text-red-700 dark:border-red-500/50 dark:bg-red-500/10 dark:text-red-200',
+      tone === 'neutral' && 'border-neutral-200/70 bg-white/70 text-neutral-700 dark:border-neutral-700/70 dark:bg-neutral-900/60 dark:text-neutral-200',
+    ]"
+  >
+    {{ message }}
+  </div>
+</template>
diff --git a/packages/stage-pages/src/pages/settings/data/index.vue b/packages/stage-pages/src/pages/settings/data/index.vue
index 410dad519..c51900edc 100644
--- a/packages/stage-pages/src/pages/settings/data/index.vue
+++ b/packages/stage-pages/src/pages/settings/data/index.vue
@@ -1,281 +1,20 @@
 <script setup lang="ts">
-import { isStageTamagotchi } from '@proj-airi/stage-shared'
-import { useDataMaintenance } from '@proj-airi/stage-ui/composables/use-data-maintenance'
-import { Button, DoubleCheckButton } from '@proj-airi/ui'
-import { computed, ref } from 'vue'
-import { useI18n } from 'vue-i18n'
+import ChatsSection from './components/chats-section.vue'
+import DangerSection from './components/danger-section.vue'
+import ModelsModulesSection from './components/models-modules-section.vue'
+import StatusBanner from './components/status-banner.vue'
 
-const { t } = useI18n()
-const {
-  deleteAllModels,
-  resetProvidersSettings,
-  resetModulesSettings,
-  deleteAllChatSessions,
-  exportChatSessions,
-  importChatSessions,
-  deleteAllData,
-  resetDesktopApplicationState,
-} = useDataMaintenance()
+import { createDataSettingsStatusState } from './status'
 
-const statusMessage = ref('')
-const statusTone = ref<'neutral' | 'success' | 'error'>('neutral')
-const importError = ref('')
-const importFileInput = ref<HTMLInputElement>()
-const isDesktop = computed(() => isStageTamagotchi())
-
-function setStatus(message: string, tone: 'neutral' | 'success' | 'error' = 'success') {
-  statusMessage.value = message
-  statusTone.value = tone
-}
-
-async function runAction(action: () => Promise<void> | void, successKey: string) {
-  try {
-    await action()
-    setStatus(t(successKey), 'success')
-  }
-  catch (error) {
-    console.error(error)
-    setStatus(error instanceof Error ? error.message : String(error), 'error')
-  }
-}
-
-async function triggerExport() {
-  try {
-    const blob = await exportChatSessions()
-    const url = URL.createObjectURL(blob)
-    const anchor = document.createElement('a')
-    anchor.href = url
-    anchor.download = `airi-chat-sessions-${new Date().toISOString()}.json`
-    anchor.click()
-    URL.revokeObjectURL(url)
-    setStatus(t('settings.pages.data.status.exported'))
-  }
-  catch (error) {
-    console.error(error)
-    setStatus(error instanceof Error ? error.message : String(error), 'error')
-  }
-}
-
-function triggerImportPicker() {
-  importError.value = ''
-  importFileInput.value?.click()
-}
-
-async function handleImport(event: Event) {
-  const target = event.target as HTMLInputElement
-  const file = target.files?.[0]
-  if (!file)
-    return
-
-  try {
-    const raw = await file.text()
-    const parsed = JSON.parse(raw) as Record<string, unknown>
-    await importChatSessions(parsed)
-    setStatus(t('settings.pages.data.status.imported'))
-    importError.value = ''
-  }
-  catch (error) {
-    console.error(error)
-    importError.value = t('settings.pages.data.status.import_error')
-    setStatus(error instanceof Error ? error.message : String(error), 'error')
-  }
-  finally {
-    target.value = ''
-  }
-}
+const { statusMessage, statusTone, handleStatus } = createDataSettingsStatusState()
 </script>
 
 <template>
-  <div class="flex flex-col gap-4 pb-4">
-    <div class="border-2 border-neutral-200/50 rounded-xl bg-white/70 p-4 shadow-sm dark:border-neutral-800/60 dark:bg-neutral-900/60">
-      <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
-        <div class="flex flex-col gap-1 md:max-w-[560px]">
-          <div class="text-lg font-medium">
-            {{ t('settings.pages.data.sections.chats.title') }}
-          </div>
-          <p class="text-sm text-neutral-600 dark:text-neutral-400">
-            {{ t('settings.pages.data.sections.chats.description') }}
-          </p>
-        </div>
-        <div class="flex flex-col items-start gap-2 sm:items-end">
-          <div class="flex flex-wrap gap-2">
-            <Button variant="secondary" @click="triggerExport">
-              {{ t('settings.pages.data.sections.chats.export') }}
-            </Button>
-            <Button variant="primary" @click="triggerImportPicker">
-              {{ t('settings.pages.data.sections.chats.import') }}
-            </Button>
-          </div>
-          <DoubleCheckButton
-            variant="danger"
-            @confirm="runAction(deleteAllChatSessions, 'settings.pages.data.status.chats_deleted')"
-          >
-            {{ t('settings.pages.data.sections.chats.delete') }}
-            <template #confirm>
-              {{ t('settings.pages.data.confirmations.yes') }}
-            </template>
-            <template #cancel>
-              {{ t('settings.pages.card.cancel') }}
-            </template>
-          </DoubleCheckButton>
-        </div>
-      </div>
-      <input ref="importFileInput" type="file" accept="application/json" class="hidden" @change="handleImport">
-      <p v-if="importError" class="text-sm text-red-500">
-        {{ importError }}
-      </p>
-    </div>
-
-    <div class="border-2 border-neutral-200/50 rounded-xl bg-white/70 p-4 shadow-sm dark:border-neutral-800/60 dark:bg-neutral-900/60">
-      <div class="flex flex-col gap-3">
-        <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
-          <div class="flex flex-col gap-1 md:max-w-[560px]">
-            <div class="text-lg font-medium">
-              {{ t('settings.pages.data.sections.models.title') }}
-            </div>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              {{ t('settings.pages.data.sections.models.description') }}
-            </p>
-          </div>
-          <div class="flex flex-col items-start gap-2">
-            <DoubleCheckButton
-              variant="danger"
-              @confirm="runAction(deleteAllModels, 'settings.pages.data.status.models_deleted')"
-            >
-              {{ t('settings.pages.data.sections.models.delete') }}
-              <template #confirm>
-                {{ t('settings.pages.data.confirmations.yes') }}
-              </template>
-              <template #cancel>
-                {{ t('settings.pages.card.cancel') }}
-              </template>
-            </DoubleCheckButton>
-          </div>
-        </div>
-
-        <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
-          <div class="flex flex-col gap-1 md:max-w-[560px]">
-            <div class="text-lg font-medium">
-              {{ t('settings.pages.data.sections.modules.title') }}
-            </div>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              {{ t('settings.pages.data.sections.modules.description') }}
-            </p>
-          </div>
-          <div class="flex flex-col items-start gap-2">
-            <DoubleCheckButton
-              variant="caution"
-              @confirm="runAction(resetModulesSettings, 'settings.pages.data.status.modules_reset')"
-            >
-              {{ t('settings.pages.data.sections.modules.reset') }}
-              <template #confirm>
-                {{ t('settings.pages.data.confirmations.yes') }}
-              </template>
-              <template #cancel>
-                {{ t('settings.pages.card.cancel') }}
-              </template>
-            </DoubleCheckButton>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div
-      v-if="isDesktop"
-      class="border-2 border-amber-300/80 rounded-xl bg-amber-50/80 p-4 shadow-sm dark:border-amber-500/60 dark:bg-amber-500/10"
-    >
-      <div class="grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]">
-        <div class="flex flex-col gap-1 md:max-w-[560px]">
-          <div class="text-lg text-amber-700 font-medium dark:text-amber-200">
-            {{ t('settings.pages.data.sections.desktop.title') }}
-          </div>
-          <p class="text-sm text-amber-700/80 dark:text-amber-200/80">
-            {{ t('settings.pages.data.sections.desktop.description') }}
-          </p>
-        </div>
-        <div class="flex flex-col items-start gap-2">
-          <DoubleCheckButton
-            variant="caution"
-            @confirm="runAction(resetDesktopApplicationState, 'settings.pages.data.status.desktop_reset')"
-          >
-            {{ t('settings.pages.data.sections.desktop.reset') }}
-            <template #confirm>
-              {{ t('settings.pages.data.confirmations.yes') }}
-            </template>
-            <template #cancel>
-              {{ t('settings.pages.card.cancel') }}
-            </template>
-          </DoubleCheckButton>
-        </div>
-      </div>
-    </div>
-
-    <div class="border-2 border-red-300/80 rounded-xl bg-red-50/80 p-4 shadow-sm dark:border-red-500/60 dark:bg-red-500/10">
-      <div class="flex flex-col gap-3">
-        <div>
-          <div class="text-lg text-red-600 font-semibold dark:text-red-300">
-            {{ t('settings.pages.data.sections.danger.title') }}
-          </div>
-          <p class="text-sm text-red-600/80 dark:text-red-200/80">
-            {{ t('settings.pages.data.sections.danger.description') }}
-          </p>
-        </div>
-
-        <div class="flex flex-col gap-3">
-          <div class="grid gap-3 md:grid-cols-2">
-            <div class="grid grid-cols-1 items-start gap-2 p-3 md:grid-cols-[minmax(0,1fr)_auto]">
-              <div class="flex flex-col gap-1 md:max-w-[560px]">
-                <div class="text-sm text-red-700 font-medium dark:text-red-200">
-                  {{ t('settings.pages.data.sections.providers.title') }}
-                </div>
-                <p class="text-xs text-red-700/80 dark:text-red-200/80">
-                  {{ t('settings.pages.data.sections.providers.description') }}
-                </p>
-              </div>
-              <div class="flex flex-col items-start gap-2">
-                <DoubleCheckButton
-                  variant="danger"
-                  @confirm="runAction(resetProvidersSettings, 'settings.pages.data.status.providers_reset')"
-                >
-                  {{ t('settings.pages.data.sections.providers.reset') }}
-                  <template #confirm>
-                    {{ t('settings.pages.data.confirmations.yes') }}
-                  </template>
-                  <template #cancel>
-                    {{ t('settings.pages.card.cancel') }}
-                  </template>
-                </DoubleCheckButton>
-              </div>
-            </div>
-
-            <div class="grid grid-cols-1 items-start gap-2 p-3 md:grid-cols-[minmax(0,1fr)_auto]">
-              <div class="flex flex-col gap-1 md:max-w-[560px]">
-                <div class="text-sm text-red-700 font-medium dark:text-red-200">
-                  {{ t('settings.pages.data.sections.all.title') }}
-                </div>
-                <p class="text-xs text-red-700/80 dark:text-red-200/80">
-                  {{ t('settings.pages.data.sections.all.description') }}
-                </p>
-              </div>
-              <div class="flex flex-col items-start gap-2">
-                <DoubleCheckButton
-                  variant="danger"
-                  @confirm="runAction(deleteAllData, 'settings.pages.data.status.all_deleted')"
-                >
-                  {{ t('settings.pages.data.sections.all.delete') }}
-                  <template #confirm>
-                    {{ t('settings.pages.data.confirmations.yes') }}
-                  </template>
-                  <template #cancel>
-                    {{ t('settings.pages.card.cancel') }}
-                  </template>
-                </DoubleCheckButton>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+  <div :class="['flex flex-col gap-4 pb-4']">
+    <StatusBanner v-if="statusMessage" :message="statusMessage" :tone="statusTone" />
+    <ChatsSection @status="handleStatus" />
+    <ModelsModulesSection @status="handleStatus" />
+    <DangerSection @status="handleStatus" />
   </div>
 </template>
 
diff --git a/packages/stage-pages/src/pages/settings/data/status.ts b/packages/stage-pages/src/pages/settings/data/status.ts
new file mode 100644
index 000000000..deb772e2f
--- /dev/null
+++ b/packages/stage-pages/src/pages/settings/data/status.ts
@@ -0,0 +1,47 @@
+import { errorMessageFrom } from '@moeru/std'
+import { shallowRef } from 'vue'
+
+export type DataSettingsStatusTone = 'neutral' | 'success' | 'error'
+
+export interface DataSettingsStatusPayload {
+  message: string
+  tone: DataSettingsStatusTone
+}
+
+export interface DataSettingsStatusEmits {
+  status: [payload: DataSettingsStatusPayload]
+}
+
+export type DataSettingsStatusEmit = (event: 'status', payload: DataSettingsStatusPayload) => void
+
+export function createDataSettingsStatusHelpers(emit: DataSettingsStatusEmit) {
+  function emitStatus(message: string, tone: DataSettingsStatusTone = 'success') {
+    emit('status', { message, tone })
+  }
+
+  function handleActionError(error: unknown) {
+    console.error(error)
+    emitStatus(errorMessageFrom(error) ?? 'Unknown error', 'error')
+  }
+
+  return {
+    emitStatus,
+    handleActionError,
+  }
+}
+
+export function createDataSettingsStatusState() {
+  const statusMessage = shallowRef('')
+  const statusTone = shallowRef<DataSettingsStatusTone>('neutral')
+
+  function handleStatus(payload: DataSettingsStatusPayload) {
+    statusMessage.value = payload.message
+    statusTone.value = payload.tone
+  }
+
+  return {
+    statusMessage,
+    statusTone,
+    handleStatus,
+  }
+}