feat(stage-ui,stage-web): Implement Comprehensive Module Settings Management with Frontend UI and Backend WebSocket Integration (#617)

--------- Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Co-authored-by: Neko Ayaka <neko@ayaka.moe>
2025-10-01 01:11:12 +08:00
parent de3f8d952c
commit b190122bf1
123 changed files with 2238 additions and 502 deletions
@@ -1,12 +1,6 @@
-import type { Plugin } from 'vue'
-
-import Tres from '@tresjs/core'
-
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { MotionPlugin } from '@vueuse/motion'
+import { initializeApp } from '@proj-airi/stage-ui/services'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
-import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'

@@ -38,12 +32,11 @@ const router = createRouter({
  routes: setupLayouts(routes),
 })

-createApp(App)
-  .use(MotionPlugin)
-  // TODO: Fix autoAnimatePlugin type error
-  .use(autoAnimatePlugin as unknown as Plugin)
-  .use(router)
-  .use(pinia)
-  .use(i18n)
-  .use(Tres)
-  .mount('#app')
+// Initialize and mount the app using the shared initialization logic
+initializeApp(App, {
+  router,
+  pinia,
+  i18n,
+}).then((app) => {
+  app.mount('#app')
+})
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingFactorio } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingFactorio />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingMinecraft } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingMinecraft />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -1,118 +1,12 @@
 <script setup lang="ts">
 import { IconStatusItem } from '@proj-airi/stage-ui/components'
-import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
-import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useModulesList } from '@proj-airi/stage-ui/composables/use-modules-list'

 import IconAnimation from '../../../components/IconAnimation.vue'

 import { useIconAnimation } from '../../../composables/icon-animation'

-const { t } = useI18n()
-
-interface Module {
-  id: string
-  name: string
-  description: string
-  icon?: string
-  iconColor?: string
-  iconImage?: string
-  to: string
-  configured: boolean
-}
-
-// TODO: categorize modules, such as essential, messaging, gaming, etc.
-const modulesList = computed<Module[]>(() => [
-  {
-    id: 'consciousness',
-    name: t('settings.pages.modules.consciousness.title'),
-    description: t('settings.pages.modules.consciousness.description'),
-    icon: 'i-solar:ghost-bold-duotone',
-    to: '/settings/modules/consciousness',
-    configured: useConsciousnessStore().configured,
-  },
-  {
-    id: 'speech',
-    name: t('settings.pages.modules.speech.title'),
-    description: t('settings.pages.modules.speech.description'),
-    icon: 'i-solar:user-speak-rounded-bold-duotone',
-    to: '/settings/modules/speech',
-    configured: useSpeechStore().configured,
-  },
-  {
-    id: 'hearing',
-    name: t('settings.pages.modules.hearing.title'),
-    description: t('settings.pages.modules.hearing.description'),
-    icon: 'i-solar:microphone-3-bold-duotone',
-    to: '/settings/modules/hearing',
-    configured: false,
-  },
-  {
-    id: 'vision',
-    name: t('settings.pages.modules.vision.title'),
-    description: t('settings.pages.modules.vision.description'),
-    icon: 'i-solar:eye-closed-bold-duotone',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'memory-short-term',
-    name: t('settings.pages.modules.memory-short-term.title'),
-    description: t('settings.pages.modules.memory-short-term.description'),
-    icon: 'i-solar:bookmark-bold-duotone',
-    to: '/settings/modules/memory-short-term',
-    configured: false,
-  },
-  {
-    id: 'memory-long-term',
-    name: t('settings.pages.modules.memory-long-term.title'),
-    description: t('settings.pages.modules.memory-long-term.description'),
-    icon: 'i-solar:book-bookmark-bold-duotone',
-    to: '/settings/modules/memory-long-term',
-    configured: false,
-  },
-  {
-    id: 'messaging-discord',
-    name: t('settings.pages.modules.messaging-discord.title'),
-    description: t('settings.pages.modules.messaging-discord.description'),
-    icon: 'i-simple-icons:discord',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'x',
-    name: t('settings.pages.modules.x.title'),
-    description: t('settings.pages.modules.x.description'),
-    icon: 'i-simple-icons:x',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-minecraft',
-    name: t('settings.pages.modules.gaming-minecraft.title'),
-    description: t('settings.pages.modules.gaming-minecraft.description'),
-    iconColor: 'i-vscode-icons:file-type-minecraft',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-factorio',
-    name: t('settings.pages.modules.gaming-factorio.title'),
-    description: t('settings.pages.modules.gaming-factorio.description'),
-    iconImage: '',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'mcp-server',
-    name: t('settings.pages.modules.mcp-server.title'),
-    description: t('settings.pages.modules.mcp-server.description'),
-    icon: 'i-solar:server-bold-duotone',
-    to: '/settings/modules/mcp',
-    configured: false,
-  },
-])
+const { modulesList } = useModulesList()

 const {
  iconAnimationStarted,
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { MessagingDiscord } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <MessagingDiscord />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { X } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <X />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -9,7 +9,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -9,7 +9,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
@@ -12,7 +12,7 @@ import {
  ProviderSettingsLayout,
  SpeechPlaygroundOpenAICompatible,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldRange } from '@proj-airi/ui'
@@ -12,7 +12,7 @@ import {
  ProviderSettingsLayout,
  TranscriptionPlayground,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldInput } from '@proj-airi/ui'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'together-ai'

@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'vllm'

@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'xai'

@@ -12,17 +12,15 @@ $ pnpm install

 ### Development

+Run from the project root:
+
 ```bash
-$ cd /apps/stage
 $ pnpm dev:tamagotchi
 ```

-Then open another terminal and run:
+This automatically starts both the WebSocket server and the Tamagotchi app.

-```bash
-$ cd /apps/tamagotchi
-$ pnpm dev:tamagotchi
-```
+> **Note:** The Tamagotchi app requires the WebSocket server (`@proj-airi/server-runtime`) running on port 6121. The `dev:tamagotchi` command handles this automatically. If you need to run components separately for debugging, use `pnpm dev:server` and `pnpm dev:tamagotchi:app-only`.

 ### Build

@@ -0,0 +1,124 @@
+#!/usr/bin/env tsx
+/**
+ * Development script to start both the WebSocket server and Tamagotchi app
+ * This ensures the server-runtime is running before starting the app
+ */
+
+import type { Buffer } from 'node:buffer'
+
+import process from 'node:process'
+
+import { spawn } from 'node:child_process'
+
+const isWindows = process.platform === 'win32'
+
+console.log('🚀 Starting AIRI WebSocket server and Tamagotchi app...\n')
+
+// Start the WebSocket server in the background
+console.log('📡 Starting WebSocket server on port 6121...')
+const serverProcess = spawn(
+  'pnpm',
+  ['-F', '@proj-airi/server-runtime', 'dev'],
+  {
+    stdio: ['pipe', 'pipe', 'pipe'], // Change from 'inherit' to capture output
+    shell: isWindows,
+  },
+)
+
+// Wait for the server to be ready by listening for a ready message
+console.log('⏳ Waiting for server to initialize...\n')
+const serverReady = new Promise<void>((resolve, reject) => {
+  // Listen typically outputs a URL when ready, looking for patterns like:
+  // "Listening on http://localhost:6121" or similar
+  const readyPatterns = [
+    /listening.*:6121/i,
+    /ready.*:6121/i,
+    /localhost:6121/i,
+    /http:\/\/localhost:6121/i,
+  ]
+
+  const timeout = setTimeout(() => {
+    console.log('⚠️ Server ready timeout reached, continuing anyway...')
+    resolve() // Resolve even if we don't see the message to avoid hanging
+  }, 10000) // 10 second timeout
+
+  // Handle errors from the server process
+  serverProcess.on('error', (error) => {
+    console.error('Failed to start server:', error)
+    clearTimeout(timeout)
+    reject(error)
+  })
+
+  const checkOutput = (data: Buffer) => {
+    const output = data.toString()
+    console.log(output) // Still output to console for visibility
+
+    if (readyPatterns.some(pattern => pattern.test(output))) {
+      clearTimeout(timeout)
+      resolve()
+    }
+  }
+
+  serverProcess.stdout?.on('data', checkOutput)
+  serverProcess.stderr?.on('data', checkOutput)
+})
+
+await serverReady
+
+// Start the Tamagotchi app
+console.log('🎮 Starting Tamagotchi app...\n')
+const tamagotchiProcess = spawn(
+  'pnpm',
+  ['-F', '@proj-airi/stage-tamagotchi', 'app:dev'],
+  {
+    stdio: 'inherit',
+    shell: isWindows,
+  },
+)
+
+let isCleaningUp = false
+
+// Handle cleanup on exit
+function cleanup() {
+  if (isCleaningUp)
+    return
+  isCleaningUp = true
+  console.log('\n🛑 Shutting down...')
+  try {
+    if (serverProcess && !serverProcess.killed) {
+      serverProcess.kill()
+    }
+  }
+  catch (error) {
+    console.error('Error killing server process:', error)
+  }
+  try {
+    if (tamagotchiProcess && !tamagotchiProcess.killed) {
+      tamagotchiProcess.kill()
+    }
+  }
+  catch (error) {
+    console.error('Error killing tamagotchi process:', error)
+  }
+}
+
+process.on('SIGINT', cleanup)
+process.on('SIGTERM', cleanup)
+
+// Wait for processes
+await Promise.race([
+  new Promise((_resolve) => {
+    serverProcess.on('exit', (code) => {
+      console.log(`Server process exited with code ${code}`)
+      cleanup()
+      process.exit(code || 0)
+    })
+  }),
+  new Promise((_resolve) => {
+    tamagotchiProcess.on('exit', (code) => {
+      console.log(`Tamagotchi process exited with code ${code}`)
+      cleanup()
+      process.exit(code || 0)
+    })
+  }),
+])
@@ -1,12 +1,6 @@
-import type { Plugin } from 'vue'
-
-import Tres from '@tresjs/core'
-
-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { MotionPlugin } from '@vueuse/motion'
+import { initializeApp } from '@proj-airi/stage-ui/services'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
-import { createApp } from 'vue'
 import { createRouter, createWebHashHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'

@@ -38,12 +32,11 @@ const router = createRouter({
  routes: setupLayouts(routes),
 })

-createApp(App)
-  .use(MotionPlugin)
-  // TODO: Fix autoAnimatePlugin type error
-  .use(autoAnimatePlugin as unknown as Plugin)
-  .use(router)
-  .use(pinia)
-  .use(i18n)
-  .use(Tres)
-  .mount('#app')
+// Initialize and mount the app using the shared initialization logic
+initializeApp(App, {
+  router,
+  pinia,
+  i18n,
+}).then((app) => {
+  app.mount('#app')
+})
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingFactorio } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingFactorio />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingMinecraft } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingMinecraft />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -1,118 +1,12 @@
 <script setup lang="ts">
 import { IconStatusItem } from '@proj-airi/stage-ui/components'
-import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
-import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useModulesList } from '@proj-airi/stage-ui/composables/use-modules-list'

 import IconAnimation from '../../../components/IconAnimation.vue'

 import { useIconAnimation } from '../../../composables/icon-animation'

-const { t } = useI18n()
-
-interface Module {
-  id: string
-  name: string
-  description: string
-  icon?: string
-  iconColor?: string
-  iconImage?: string
-  to: string
-  configured: boolean
-}
-
-// TODO: categorize modules, such as essential, messaging, gaming, etc.
-const modulesList = computed<Module[]>(() => [
-  {
-    id: 'consciousness',
-    name: t('settings.pages.modules.consciousness.title'),
-    description: t('settings.pages.modules.consciousness.description'),
-    icon: 'i-solar:ghost-bold-duotone',
-    to: '/settings/modules/consciousness',
-    configured: useConsciousnessStore().configured,
-  },
-  {
-    id: 'speech',
-    name: t('settings.pages.modules.speech.title'),
-    description: t('settings.pages.modules.speech.description'),
-    icon: 'i-solar:user-speak-rounded-bold-duotone',
-    to: '/settings/modules/speech',
-    configured: useSpeechStore().configured,
-  },
-  {
-    id: 'hearing',
-    name: t('settings.pages.modules.hearing.title'),
-    description: t('settings.pages.modules.hearing.description'),
-    icon: 'i-solar:microphone-3-bold-duotone',
-    to: '/settings/modules/hearing',
-    configured: false,
-  },
-  {
-    id: 'vision',
-    name: t('settings.pages.modules.vision.title'),
-    description: t('settings.pages.modules.vision.description'),
-    icon: 'i-solar:eye-closed-bold-duotone',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'memory-short-term',
-    name: t('settings.pages.modules.memory-short-term.title'),
-    description: t('settings.pages.modules.memory-short-term.description'),
-    icon: 'i-solar:bookmark-bold-duotone',
-    to: '/settings/modules/memory-short-term',
-    configured: false,
-  },
-  {
-    id: 'memory-long-term',
-    name: t('settings.pages.modules.memory-long-term.title'),
-    description: t('settings.pages.modules.memory-long-term.description'),
-    icon: 'i-solar:book-bookmark-bold-duotone',
-    to: '/settings/modules/memory-long-term',
-    configured: false,
-  },
-  {
-    id: 'messaging-discord',
-    name: t('settings.pages.modules.messaging-discord.title'),
-    description: t('settings.pages.modules.messaging-discord.description'),
-    icon: 'i-simple-icons:discord',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'x',
-    name: t('settings.pages.modules.x.title'),
-    description: t('settings.pages.modules.x.description'),
-    icon: 'i-simple-icons:x',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-minecraft',
-    name: t('settings.pages.modules.gaming-minecraft.title'),
-    description: t('settings.pages.modules.gaming-minecraft.description'),
-    iconColor: 'i-vscode-icons:file-type-minecraft',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-factorio',
-    name: t('settings.pages.modules.gaming-factorio.title'),
-    description: t('settings.pages.modules.gaming-factorio.description'),
-    iconImage: '',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'mcp-server',
-    name: t('settings.pages.modules.mcp-server.title'),
-    description: t('settings.pages.modules.mcp-server.description'),
-    icon: 'i-solar:server-bold-duotone',
-    to: '/settings/modules/mcp',
-    configured: false,
-  },
-])
+const { modulesList } = useModulesList()

 const {
  iconAnimationStarted,
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { MessagingDiscord } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <MessagingDiscord />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { X } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <X />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -9,7 +9,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -9,7 +9,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
@@ -12,7 +12,7 @@ import {
  ProviderSettingsLayout,
  SpeechPlaygroundOpenAICompatible,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldRange } from '@proj-airi/ui'
@@ -12,7 +12,7 @@ import {
  ProviderSettingsLayout,
  TranscriptionPlayground,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldInput } from '@proj-airi/ui'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'together-ai'

@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'vllm'

@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'xai'

@@ -1,14 +1,11 @@
-import type { Plugin } from 'vue'
+import type { App as VueApp } from 'vue'
 import type { Router } from 'vue-router'

-import Tres from '@tresjs/core'
 import NProgress from 'nprogress'

-import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
-import { MotionPlugin } from '@vueuse/motion'
+import { initializeApp } from '@proj-airi/stage-ui/services'
 import { createPinia } from 'pinia'
 import { setupLayouts } from 'virtual:generated-layouts'
-import { createApp } from 'vue'
 import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'

@@ -40,26 +37,30 @@ router.afterEach(() => {
  NProgress.done()
 })

-router.isReady()
-  .then(async () => {
-    if (import.meta.env.SSR) {
-      return
-    }
-    if (import.meta.env.VITE_APP_TARGET_HUGGINGFACE_SPACE) {
-      return
-    }
+// Custom initialization callback for web-specific post-initialization
+async function onInitialized(_app: VueApp, router: Router) {
+  // Handle PWA registration after router is ready
+  router.isReady()
+    .then(async () => {
+      if (import.meta.env.SSR) {
+        return
+      }
+      if (import.meta.env.VITE_APP_TARGET_HUGGINGFACE_SPACE) {
+        return
+      }

-    const { registerSW } = await import('./modules/pwa')
-    registerSW({ immediate: true })
-  })
-  .catch(() => {})
+      const { registerSW } = await import('./modules/pwa')
+      registerSW({ immediate: true })
+    })
+    .catch(error => console.error('Failed during post-initialization:', error))
+}

-createApp(App)
-  .use(MotionPlugin)
-  // TODO: Fix autoAnimatePlugin type error
-  .use(autoAnimatePlugin as unknown as Plugin)
-  .use(router)
-  .use(pinia)
-  .use(i18n)
-  .use(Tres)
-  .mount('#app')
+// Initialize and mount the app using the shared initialization logic with web-specific options
+initializeApp(App, {
+  router,
+  pinia,
+  i18n,
+  onInitialized,
+}).then((app) => {
+  app.mount('#app')
+})
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingFactorio } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingFactorio />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { GamingMinecraft } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <GamingMinecraft />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -1,121 +1,12 @@
 <script setup lang="ts">
 import { IconStatusItem } from '@proj-airi/stage-ui/components'
-import { useBeatSyncStore } from '@proj-airi/stage-ui/stores/beat-sync'
-import { useConsciousnessStore } from '@proj-airi/stage-ui/stores/modules/consciousness'
-import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
+import { useModulesList } from '@proj-airi/stage-ui/composables/use-modules-list'

 import IconAnimation from '../../../components/IconAnimation.vue'

 import { useIconAnimation } from '../../../composables/icon-animation'

-const { t } = useI18n()
-
-interface Module {
-  id: string
-  name: string
-  description: string
-  icon?: string
-  iconColor?: string
-  iconImage?: string
-  to: string
-  configured: boolean
-}
-
-const beatSyncStore = useBeatSyncStore()
-
-// TODO: categorize modules, such as essential, messaging, gaming, etc.
-const modulesList = computed<Module[]>(() => [
-  {
-    id: 'consciousness',
-    name: t('settings.pages.modules.consciousness.title'),
-    description: t('settings.pages.modules.consciousness.description'),
-    icon: 'i-solar:ghost-bold-duotone',
-    to: '/settings/modules/consciousness',
-    configured: useConsciousnessStore().configured,
-  },
-  {
-    id: 'speech',
-    name: t('settings.pages.modules.speech.title'),
-    description: t('settings.pages.modules.speech.description'),
-    icon: 'i-solar:user-speak-rounded-bold-duotone',
-    to: '/settings/modules/speech',
-    configured: useSpeechStore().configured,
-  },
-  {
-    id: 'hearing',
-    name: t('settings.pages.modules.hearing.title'),
-    description: t('settings.pages.modules.hearing.description'),
-    icon: 'i-solar:microphone-3-bold-duotone',
-    to: '/settings/modules/hearing',
-    configured: false,
-  },
-  {
-    id: 'vision',
-    name: t('settings.pages.modules.vision.title'),
-    description: t('settings.pages.modules.vision.description'),
-    icon: 'i-solar:eye-closed-bold-duotone',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'memory-short-term',
-    name: t('settings.pages.modules.memory-short-term.title'),
-    description: t('settings.pages.modules.memory-short-term.description'),
-    icon: 'i-solar:bookmark-bold-duotone',
-    to: '/settings/modules/memory-short-term',
-    configured: false,
-  },
-  {
-    id: 'memory-long-term',
-    name: t('settings.pages.modules.memory-long-term.title'),
-    description: t('settings.pages.modules.memory-long-term.description'),
-    icon: 'i-solar:book-bookmark-bold-duotone',
-    to: '/settings/modules/memory-long-term',
-    configured: false,
-  },
-  {
-    id: 'messaging-discord',
-    name: t('settings.pages.modules.messaging-discord.title'),
-    description: t('settings.pages.modules.messaging-discord.description'),
-    icon: 'i-simple-icons:discord',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'x',
-    name: t('settings.pages.modules.x.title'),
-    description: t('settings.pages.modules.x.description'),
-    icon: 'i-simple-icons:x',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-minecraft',
-    name: t('settings.pages.modules.gaming-minecraft.title'),
-    description: t('settings.pages.modules.gaming-minecraft.description'),
-    iconColor: 'i-vscode-icons:file-type-minecraft',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'game-factorio',
-    name: t('settings.pages.modules.gaming-factorio.title'),
-    description: t('settings.pages.modules.gaming-factorio.description'),
-    iconImage: '',
-    to: '',
-    configured: false,
-  },
-  {
-    id: 'beat-sync',
-    name: t('settings.pages.modules.beat_sync.title'),
-    description: t('settings.pages.modules.beat_sync.description'),
-    icon: 'i-solar:music-notes-bold-duotone',
-    to: '/settings/modules/beat-sync',
-    configured: beatSyncStore.isActive,
-  },
-])
+const { modulesList } = useModulesList()

 const {
  iconAnimationStarted,
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { MessagingDiscord } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <MessagingDiscord />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { X } from '@proj-airi/stage-ui/components'
+</script>
+
+<template>
+  <X />
+</template>
+
+<route lang="yaml">
+meta:
+  layout: settings
+  stageTransition:
+    name: slide
+    pageSpecificAvailable: true
+</route>
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -9,7 +9,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -9,7 +9,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldKeyValues } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
@@ -12,7 +12,7 @@ import {
  ProviderSettingsLayout,
  SpeechPlaygroundOpenAICompatible,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useSpeechStore } from '@proj-airi/stage-ui/stores/modules/speech'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldRange } from '@proj-airi/ui'
@@ -12,7 +12,7 @@ import {
  ProviderSettingsLayout,
  TranscriptionPlayground,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useHearingStore } from '@proj-airi/stage-ui/stores/modules/hearing'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { FieldInput } from '@proj-airi/ui'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -10,7 +10,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'together-ai'

@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'vllm'

@@ -8,7 +8,7 @@ import {
  ProviderSettingsContainer,
  ProviderSettingsLayout,
 } from '@proj-airi/stage-ui/components'
-import { useProviderValidation } from '@proj-airi/stage-ui/composables/useProviderValidation'
+import { useProviderValidation } from '@proj-airi/stage-ui/composables/use-provider-validation'

 const providerId = 'xai'

@@ -17,7 +17,9 @@
    "dev:docs": "pnpm -rF @proj-airi/docs run dev",
    "dev:ui": "pnpm -rF @proj-airi/stage-ui run story:dev",
    "dev:web": "pnpm -rF @proj-airi/stage-web run dev",
-    "dev:tamagotchi": "pnpm -rF @proj-airi/stage-tamagotchi run app:dev",
+    "dev:server": "pnpm -rF @proj-airi/server-runtime run dev",
+    "dev:tamagotchi": "tsx apps/stage-tamagotchi/scripts/dev-with-server.ts",
+    "dev:tamagotchi:app-only": "pnpm -rF @proj-airi/stage-tamagotchi run app:dev",
    "dev:tamagotchi-electron": "pnpm -rF @proj-airi/stage-tamagotchi-electron run app:dev",
    "dev:apps": "pnpm -rF=\"./apps/*\" run --parallel dev",
    "dev:packages": "pnpm -rF=\"./packages/*\" --parallel run dev",
@@ -1,3 +1,6 @@
+common:
+  save: Save
+
 animations:
  stage-transitions:
    title: Disable Stage Transitions
@@ -238,9 +241,31 @@ pages:
    gaming-factorio:
      description: Playing Factorio!
      title: Factorio
+      enable: Enable Factorio Integration
+      enable-description: Allow AIRI to interact with Factorio game
+      server-address: Server Address
+      server-address-description: The IP address or hostname of the Factorio server
+      server-address-placeholder: Enter server address (e.g., localhost or 192.168.1.100)
+      server-port: Server Port
+      server-port-description: The port number of the Factorio server (default 34197)
+      username: Username
+      username-description: Your username in the Factorio server
+      username-placeholder: Enter your Factorio username
+      configured: Factorio is properly configured!
    gaming-minecraft:
      description: Playing Minecraft!
      title: Minecraft
+      enable: Enable Minecraft Integration
+      enable-description: Allow AIRI to interact with Minecraft game
+      server-address: Server Address
+      server-address-description: The IP address or hostname of the Minecraft server
+      server-address-placeholder: Enter server address (e.g., localhost or play.example.com)
+      server-port: Server Port
+      server-port-description: The port number of the Minecraft server (default 25565)
+      username: Username
+      username-description: Your username in the Minecraft server
+      username-placeholder: Enter your Minecraft username
+      configured: Minecraft is properly configured!
    hearing:
      description: Configure how speech recognition works
      title: Hearing
@@ -257,6 +282,12 @@ pages:
    messaging-discord:
      description: Chat & voice chat over Discord
      title: Discord
+      enable: Enable Discord Integration
+      enable-description: Allow AIRI to interact through Discord
+      token: Bot Token
+      token-description: Your Discord bot token
+      token-placeholder: Enter your Discord bot token
+      configured: Discord is properly configured!
    speech:
      description: Speech synthesis
      sections:
@@ -305,6 +336,21 @@ pages:
    x:
      description: X / Twitter browsing and usage
      title: X / Twitter
+      enable: Enable X / Twitter Integration
+      enable-description: Allow AIRI to interact with X / Twitter
+      api-key: API Key
+      api-key-description: Your X / Twitter API key
+      api-key-placeholder: Enter your X / Twitter API key
+      api-secret: API Secret
+      api-secret-description: Your X / Twitter API secret
+      api-secret-placeholder: Enter your X / Twitter API secret
+      access-token: Access Token
+      access-token-description: Your X / Twitter access token
+      access-token-placeholder: Enter your X / Twitter access token
+      access-token-secret: Access Token Secret
+      access-token-secret-description: Your X / Twitter access token secret
+      access-token-secret-placeholder: Enter your X / Twitter access token secret
+      configured: X / Twitter is properly configured!
    mcp-server:
      description: Connect and manage MCP server and tools
      title: MCP Server
@@ -1,3 +1,6 @@
+common:
+  save: Guardar
+
 animations:
  stage-transitions:
    title: Desactivar Transiciones del Escenario
@@ -190,9 +193,31 @@ pages:
    gaming-factorio:
      description: ¡Jugando Factorio!
      title: Factorio
+      enable: Habilitar integración con Factorio
+      enable-description: Permitir que AIRI interactúe con el juego Factorio
+      server-address: Dirección del servidor
+      server-address-description: La dirección IP o nombre de host del servidor de Factorio
+      server-address-placeholder: Ingrese la dirección del servidor (por ejemplo, localhost o 192.168.1.100)
+      server-port: Puerto del servidor
+      server-port-description: El número de puerto del servidor de Factorio (por defecto 34197)
+      username: Nombre de usuario
+      username-description: Su nombre de usuario en el servidor de Factorio
+      username-placeholder: Ingrese su nombre de usuario de Factorio
+      configured: ¡Factorio está configurado correctamente!
    gaming-minecraft:
      description: ¡Jugando Minecraft!
      title: Minecraft
+      enable: Habilitar integración con Minecraft
+      enable-description: Permitir que AIRI interactúe con el juego Minecraft
+      server-address: Dirección del servidor
+      server-address-description: La dirección IP o nombre de host del servidor de Minecraft
+      server-address-placeholder: Ingrese la dirección del servidor (por ejemplo, localhost o play.ejemplo.com)
+      server-port: Puerto del servidor
+      server-port-description: El número de puerto del servidor de Minecraft (por defecto 25565)
+      username: Nombre de usuario
+      username-description: Su nombre de usuario en el servidor de Minecraft
+      username-placeholder: Ingrese su nombre de usuario de Minecraft
+      configured: ¡Minecraft está configurado correctamente!
    hearing:
      description: Configurar cómo funciona el reconocimiento de voz
      title: Audición
@@ -205,6 +230,12 @@ pages:
    messaging-discord:
      description: Chat y chat de voz por Discord
      title: Discord
+      enable: Habilitar integración con Discord
+      enable-description: Permitir que AIRI interactúe a través de Discord
+      token: Token del bot
+      token-description: Su token de bot de Discord
+      token-placeholder: Ingrese su token de bot de Discord
+      configured: ¡Discord está configurado correctamente!
    speech:
      description: Síntesis de voz
      sections:
@@ -246,6 +277,21 @@ pages:
    x:
      description: Navegación y uso de X / Twitter
      title: X / Twitter
+      enable: Habilitar integración con X / Twitter
+      enable-description: Permitir que AIRI interactúe con X / Twitter
+      api-key: Clave API
+      api-key-description: Su clave API de X / Twitter
+      api-key-placeholder: Ingrese su clave API de X / Twitter
+      api-secret: Secreto API
+      api-secret-description: Su secreto API de X / Twitter
+      api-secret-placeholder: Ingrese su secreto API de X / Twitter
+      access-token: Token de acceso
+      access-token-description: Su token de acceso de X / Twitter
+      access-token-placeholder: Ingrese su token de acceso de X / Twitter
+      access-token-secret: Secreto de token de acceso
+      access-token-secret-description: Su secreto de token de acceso de X / Twitter
+      access-token-secret-placeholder: Ingrese su secreto de token de acceso de X / Twitter
+      configured: ¡X / Twitter está configurado correctamente!
    mcp-server:
      description: Conectar y gestionar servidor MCP y herramientas
      title: Servidor MCP
@@ -1,3 +1,6 @@
+common:
+  save: Sauvegarder
+
 animations:
  stage-transitions:
    title: Désactiver les transitions de scène
@@ -192,9 +195,31 @@ pages:
    gaming-factorio:
      description: Jouer à Factorio !
      title: Factorio
+      enable: Activer l'intégration Factorio
+      enable-description: Autoriser AIRI à interagir avec le jeu Factorio
+      server-address: Adresse du serveur
+      server-address-description: L'adresse IP ou le nom d'hôte du serveur Factorio
+      server-address-placeholder: Entrez l'adresse du serveur (ex. localhost ou 192.168.1.100)
+      server-port: Port du serveur
+      server-port-description: Le numéro de port du serveur Factorio (par défaut 34197)
+      username: Nom d'utilisateur
+      username-description: Votre nom d'utilisateur sur le serveur Factorio
+      username-placeholder: Entrez votre nom d'utilisateur Factorio
+      configured: Factorio est correctement configuré !
    gaming-minecraft:
      description: Jouer à Minecraft !
      title: Minecraft
+      enable: Activer l'intégration Minecraft
+      enable-description: Autoriser AIRI à interagir avec le jeu Minecraft
+      server-address: Adresse du serveur
+      server-address-description: L'adresse IP ou le nom d'hôte du serveur Minecraft
+      server-address-placeholder: Entrez l'adresse du serveur (ex. localhost ou play.exemple.com)
+      server-port: Port du serveur
+      server-port-description: Le numéro de port du serveur Minecraft (par défaut 25565)
+      username: Nom d'utilisateur
+      username-description: Votre nom d'utilisateur sur le serveur Minecraft
+      username-placeholder: Entrez votre nom d'utilisateur Minecraft
+      configured: Minecraft est correctement configuré !
    hearing:
      description: Configurer la reconnaissance vocale
      title: Audition
@@ -207,6 +232,12 @@ pages:
    messaging-discord:
      description: Chat et chat vocal via Discord
      title: Discord
+      enable: Activer l'intégration Discord
+      enable-description: Autoriser AIRI à interagir via Discord
+      token: Jeton du bot
+      token-description: Votre jeton de bot Discord
+      token-placeholder: Entrez votre jeton de bot Discord
+      configured: Discord est correctement configuré !
    speech:
      description: Synthèse vocale
      sections:
@@ -249,6 +280,21 @@ pages:
    x:
      description: Navigation et utilisation X / Twitter
      title: X / Twitter
+      enable: Activer l'intégration X / Twitter
+      enable-description: Autoriser AIRI à interagir avec X / Twitter
+      api-key: Clé API
+      api-key-description: Votre clé API X / Twitter
+      api-key-placeholder: Entrez votre clé API X / Twitter
+      api-secret: Secret API
+      api-secret-description: Votre secret API X / Twitter
+      api-secret-placeholder: Entrez votre secret API X / Twitter
+      access-token: Jeton d'accès
+      access-token-description: Votre jeton d'accès X / Twitter
+      access-token-placeholder: Entrez votre jeton d'accès X / Twitter
+      access-token-secret: Secret du jeton d'accès
+      access-token-secret-description: Votre secret de jeton d'accès X / Twitter
+      access-token-secret-placeholder: Entrez votre secret de jeton d'accès X / Twitter
+      configured: X / Twitter est correctement configuré !
    mcp-server:
      description: Connecter et gérer le serveur MCP et ses outils
      title: Serveur MCP
@@ -1,3 +1,6 @@
+common:
+  save: Сохранить
+
 animations:
  stage-transitions:
    title: Отключить переходы между сценами
@@ -183,9 +186,31 @@ pages:
    gaming-factorio:
      description: Играем в Factorio!
      title: Factorio
+      enable: Включить интеграцию Factorio
+      enable-description: Разрешить AIRI взаимодействовать с игрой Factorio
+      server-address: Адрес сервера
+      server-address-description: IP-адрес или имя хоста сервера Factorio
+      server-address-placeholder: Введите адрес сервера (например, localhost или 192.168.1.100)
+      server-port: Порт сервера
+      server-port-description: Номер порта сервера Factorio (по умолчанию 34197)
+      username: Имя пользователя
+      username-description: Ваше имя пользователя на сервере Factorio
+      username-placeholder: Введите ваше имя пользователя Factorio
+      configured: Factorio настроен правильно!
    gaming-minecraft:
      description: Играем в Minecraft!
      title: Minecraft
+      enable: Включить интеграцию Minecraft
+      enable-description: Разрешить AIRI взаимодействовать с игрой Minecraft
+      server-address: Адрес сервера
+      server-address-description: IP-адрес или имя хоста сервера Minecraft
+      server-address-placeholder: Введите адрес сервера (например, localhost или play.example.com)
+      server-port: Порт сервера
+      server-port-description: Номер порта сервера Minecraft (по умолчанию 25565)
+      username: Имя пользователя
+      username-description: Ваше имя пользователя на сервере Minecraft
+      username-placeholder: Введите ваше имя пользователя Minecraft
+      configured: Minecraft настроен правильно!
    hearing:
      description: Настройка распознавания речи
      title: Слух
@@ -198,6 +223,12 @@ pages:
    messaging-discord:
      description: Чат и голосовой чат через Discord
      title: Discord
+      enable: Включить интеграцию Discord
+      enable-description: Разрешить AIRI взаимодействовать через Discord
+      token: Токен бота
+      token-description: Ваш токен бота Discord
+      token-placeholder: Введите токен бота Discord
+      configured: Discord настроен правильно!
    speech:
      description: Синтез речи
      sections:
@@ -239,6 +270,21 @@ pages:
    x:
      description: Просмотр и использование X / Twitter
      title: X / Twitter
+      enable: Включить интеграцию X / Twitter
+      enable-description: Разрешить AIRI взаимодействовать с X / Twitter
+      api-key: API-ключ
+      api-key-description: Ваш API-ключ X / Twitter
+      api-key-placeholder: Введите ваш API-ключ X / Twitter
+      api-secret: API-секрет
+      api-secret-description: Ваш API-секрет X / Twitter
+      api-secret-placeholder: Введите ваш API-секрет X / Twitter
+      access-token: Токен доступа
+      access-token-description: Ваш токен доступа X / Twitter
+      access-token-placeholder: Введите ваш токен доступа X / Twitter
+      access-token-secret: Секрет токена доступа
+      access-token-secret-description: Ваш секрет токена доступа X / Twitter
+      access-token-secret-placeholder: Введите ваш секрет токена доступа X / Twitter
+      configured: X / Twitter настроен правильно!
    mcp-server:
      description: Подключение и управление MCP-сервером и инструментами
      title: MCP-сервер
@@ -1,3 +1,6 @@
+common:
+  save: Lưu
+
 animations:
  stage-transitions:
    title: Tắt hiệu ứng chuyển cảnh
@@ -189,9 +192,31 @@ pages:
    gaming-factorio:
      description: Chơi Factorio!
      title: Factorio
+      enable: Bật tích hợp Factorio
+      enable-description: Cho phép AIRI tương tác với trò chơi Factorio
+      server-address: Địa chỉ máy chủ
+      server-address-description: Địa chỉ IP hoặc tên máy chủ của máy chủ Factorio
+      server-address-placeholder: Nhập địa chỉ máy chủ (ví dụ localhost hoặc 192.168.1.100)
+      server-port: Cổng máy chủ
+      server-port-description: Số cổng của máy chủ Factorio (mặc định 34197)
+      username: Tên người dùng
+      username-description: Tên người dùng của bạn trên máy chủ Factorio
+      username-placeholder: Nhập tên người dùng Factorio của bạn
+      configured: Đã cấu hình Factorio thành công!
    gaming-minecraft:
      description: Chơi Minecraft!
      title: Minecraft
+      enable: Bật tích hợp Minecraft
+      enable-description: Cho phép AIRI tương tác với trò chơi Minecraft
+      server-address: Địa chỉ máy chủ
+      server-address-description: Địa chỉ IP hoặc tên máy chủ của máy chủ Minecraft
+      server-address-placeholder: Nhập địa chỉ máy chủ (ví dụ localhost hoặc play.example.com)
+      server-port: Cổng máy chủ
+      server-port-description: Số cổng của máy chủ Minecraft (mặc định 25565)
+      username: Tên người dùng
+      username-description: Tên người dùng của bạn trên máy chủ Minecraft
+      username-placeholder: Nhập tên người dùng Minecraft của bạn
+      configured: Đã cấu hình Minecraft thành công!
    hearing:
      description: Cấu hình nhận diện giọng nói
      title: Nghe
@@ -202,8 +227,14 @@ pages:
      description: Cài đặt và quản lý trí nhớ ngắn hạn
      title: Trí nhớ ngắn hạn
    messaging-discord:
-      description: Chat & Gọi thoại qua Discord
+      description: Trò chuyện & gọi thoại qua Discord
      title: Discord
+      enable: Bật tích hợp Discord
+      enable-description: Cho phép AIRI tương tác qua Discord
+      token: Mã token của bot
+      token-description: Mã token bot Discord của bạn
+      token-placeholder: Nhập mã token bot Discord của bạn
+      configured: Đã cấu hình Discord thành công!
    speech:
      description: Tổng hợp giọng nói
      sections:
@@ -245,6 +276,21 @@ pages:
    x:
      description: Sử Dụng Twitter
      title: X / Twitter
+      enable: Bật tích hợp X / Twitter
+      enable-description: Cho phép AIRI tương tác với X / Twitter
+      api-key: Khóa API
+      api-key-description: Khóa API X / Twitter của bạn
+      api-key-placeholder: Nhập khóa API X / Twitter của bạn
+      api-secret: Bí mật API
+      api-secret-description: Bí mật API X / Twitter của bạn
+      api-secret-placeholder: Nhập bí mật API X / Twitter của bạn
+      access-token: Mã truy cập
+      access-token-description: Mã truy cập X / Twitter của bạn
+      access-token-placeholder: Nhập mã truy cập X / Twitter của bạn
+      access-token-secret: Bí mật mã truy cập
+      access-token-secret-description: Bí mật mã truy cập X / Twitter của bạn
+      access-token-secret-placeholder: Nhập bí mật mã truy cập X / Twitter của bạn
+      configured: Đã cấu hình X / Twitter thành công!
    mcp-server:
      description: Kết nối, quản lý máy chủ MCP và công cụ
      title: Máy chủ MCP
@@ -1,3 +1,6 @@
+common:
+  save: 保存
+
 animations:
  stage-transitions:
    title: 是否开启舞台动画
@@ -182,9 +185,31 @@ pages:
    gaming-factorio:
      description: 一起玩 Factorio！
      title: 异星工厂 Factorio
+      enable: 启用异星工厂集成
+      enable-description: 允许AIRI与异星工厂游戏互动
+      server-address: 服务器地址
+      server-address-description: 异星工厂服务器的IP地址或主机名
+      server-address-placeholder: 输入服务器地址（例如：localhost或192.168.1.100）
+      server-port: 服务器端口
+      server-port-description: 异星工厂服务器的端口号（默认 34197）
+      username: 用户名
+      username-description: 您在异星工厂服务器中的用户名
+      username-placeholder: 输入您的异星工厂用户名
+      configured: 异星工厂已正确配置！
    gaming-minecraft:
      description: 一起玩 Minecraft！
      title: 我的世界 Minecraft
+      enable: 启用我的世界集成
+      enable-description: 允许AIRI与我的世界游戏互动
+      server-address: 服务器地址
+      server-address-description: 我的世界服务器的IP地址或主机名
+      server-address-placeholder: 输入服务器地址（例如：localhost或play.example.com）
+      server-port: 服务器端口
+      server-port-description: 我的世界服务器的端口号（默认 25565）
+      username: 用户名
+      username-description: 您在我的世界服务器中的用户名
+      username-placeholder: 输入您的我的世界用户名
+      configured: 我的世界已正确配置！
    hearing:
      description: 语音识别
      title: 听觉
@@ -201,6 +226,12 @@ pages:
    messaging-discord:
      description: Discord 发消息和语音聊天
      title: Discord
+      enable: 启用Discord集成
+      enable-description: 允许AIRI通过Discord进行互动
+      token: 机器人令牌
+      token-description: 您的Discord机器人令牌
+      token-placeholder: 输入您的Discord机器人令牌
+      configured: Discord已正确配置！
    speech:
      description: 语音合成
      sections:
@@ -247,6 +278,21 @@ pages:
    x:
      description: X / Twitter 的浏览和使用
      title: X / Twitter
+      enable: 启用X / Twitter集成
+      enable-description: 允许AIRI与X / Twitter互动
+      api-key: API密钥
+      api-key-description: 您的X / Twitter API密钥
+      api-key-placeholder: 输入您的X / Twitter API密钥
+      api-secret: API密钥密文
+      api-secret-description: 您的X / Twitter API密钥密文
+      api-secret-placeholder: 输入您的X / Twitter API密钥密文
+      access-token: 访问令牌
+      access-token-description: 您的X / Twitter访问令牌
+      access-token-placeholder: 输入您的X / Twitter访问令牌
+      access-token-secret: 访问令牌密文
+      access-token-secret-description: 您的X / Twitter访问令牌密文
+      access-token-secret-placeholder: 输入您的X / Twitter访问令牌密文
+      configured: X / Twitter已正确配置！
    mcp-server:
      description: 连接和管理 MCP 服务器及工具
      title: MCP 服务器
@@ -1,3 +1,6 @@
+common:
+  save: 儲存
+
 animations:
  stage-transitions:
    title: 是否開啟舞台動畫
@@ -174,9 +177,31 @@ pages:
    gaming-factorio:
      description: 一起玩 Factorio！
      title: 異星工廠 Factorio
+      enable: 啟用異星工廠集成
+      enable-description: 允許 AIRI 與異星工廠遊戲互動
+      server-address: 伺服器地址
+      server-address-description: 異星工廠伺服器的 IP 地址或主機名稱
+      server-address-placeholder: 輸入伺服器地址（例如：localhost 或 192.168.1.100）
+      server-port: 伺服器端口
+      server-port-description: 異星工廠伺服器的端口號（預設 34197）
+      username: 使用者名稱
+      username-description: 您在異星工廠伺服器中的使用者名稱
+      username-placeholder: 輸入您的異星工廠使用者名稱
+      configured: 異星工廠已正確設定！
    gaming-minecraft:
      description: 一起玩 Minecraft！
      title: 我的世界 Minecraft
+      enable: 啟用我的世界集成
+      enable-description: 允許 AIRI 與我的世界遊戲互動
+      server-address: 伺服器地址
+      server-address-description: 我的世界伺服器的 IP 地址或主機名稱
+      server-address-placeholder: 輸入伺服器地址（例如：localhost 或 play.example.com）
+      server-port: 伺服器端口
+      server-port-description: 我的世界伺服器的端口號（預設 25565）
+      username: 使用者名稱
+      username-description: 您在我的世界伺服器中的使用者名稱
+      username-placeholder: 輸入您的我的世界使用者名稱
+      configured: 我的世界已正確設定！
    hearing:
      description: 語音辨識
      title: 聽覺
@@ -189,6 +214,12 @@ pages:
    messaging-discord:
      description: Discord 訊息與語音聊天
      title: Discord
+      enable: 啟用 Discord 集成
+      enable-description: 允許 AIRI 透過 Discord 進行互動
+      token: 機器人權杖
+      token-description: 您的 Discord 機器人权杖
+      token-placeholder: 輸入您的 Discord 機器人权杖
+      configured: Discord 已正確設定！
    speech:
      description: 語音合成
      sections:
@@ -230,6 +261,21 @@ pages:
    x:
      description: X / Twitter 的瀏覽與使用
      title: X / Twitter
+      enable: 啟用 X / Twitter 集成
+      enable-description: 允許 AIRI 與 X / Twitter 互動
+      api-key: API 金鑰
+      api-key-description: 您的 X / Twitter API 金鑰
+      api-key-placeholder: 輸入您的 X / Twitter API 金鑰
+      api-secret: API 金鑰密文
+      api-secret-description: 您的 X / Twitter API 金鑰密文
+      api-secret-placeholder: 輸入您的 X / Twitter API 金鑰密文
+      access-token: 存取權杖
+      access-token-description: 您的 X / Twitter 存取權杖
+      access-token-placeholder: 輸入您的 X / Twitter 存取權杖
+      access-token-secret: 存取權杖密文
+      access-token-secret-description: 您的 X / Twitter 存取權杖密文
+      access-token-secret-placeholder: 輸入您的 X / Twitter 存取權杖密文
+      configured: X / Twitter 已正確設定！
    mcp-server:
      description: 連線與管理 MCP 伺服器及工具
      title: MCP 伺服器
@@ -26,6 +26,8 @@
    "./constants": "./src/constants/index.ts",
    "./libs/*": "./src/libs/*.ts",
    "./libs": "./src/libs/index.ts",
+    "./services/*": "./src/services/*.ts",
+    "./services": "./src/services/index.ts",
    "./stores/*": "./src/stores/*.ts",
    "./stores": "./src/stores/index.ts",
    "./utils": "./src/utils/index.ts"
@@ -5,6 +5,7 @@ export * from './layouts'
 export * from './markdown'
 export * from './menu'
 export * from './misc'
+export * from './modules'
 export * from './physics'
 export * from './scenarios'
 export * from './widgets'
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import GamingModuleSettings from './GamingModuleSettings.vue'
+
+import { useFactorioStore } from '../../stores/modules/gaming-factorio'
+
+const factorioStore = useFactorioStore()
+</script>
+
+<template>
+  <GamingModuleSettings
+    :store="factorioStore"
+    i18n-key-prefix="settings.pages.modules.gaming-factorio"
+  />
+</template>
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import GamingModuleSettings from './GamingModuleSettings.vue'
+
+import { useMinecraftStore } from '../../stores/modules/gaming-minecraft'
+
+const minecraftStore = useMinecraftStore()
+</script>
+
+<template>
+  <GamingModuleSettings
+    :store="minecraftStore"
+    i18n-key-prefix="settings.pages.modules.gaming-minecraft"
+  />
+</template>
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { StoreGeneric } from 'pinia'
+
+import { FieldCheckbox, FieldInput } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+import { Button } from '../../components'
+import { useNumberString } from '../../composables/use-number-string'
+
+interface GamingModuleStore extends StoreGeneric {
+  enabled: boolean
+  serverAddress: string
+  serverPort: number | null
+  username: string
+  configured: boolean
+  saveSettings: () => void
+}
+
+interface Props {
+  // The gaming store instance with the expected interface (enabled, serverAddress, serverPort, username, configured, saveSettings)
+  store: GamingModuleStore
+  // Prefix for i18n translation keys (e.g., 'settings.pages.modules.gaming-minecraft')
+  i18nKeyPrefix: string
+}
+
+const props = defineProps<Props>()
+const { t } = useI18n()
+
+// Extract reactive references from the store
+const { enabled, serverAddress, serverPort, username, configured } = storeToRefs(props.store)
+
+// Create computed property to handle number to string conversion for the input field
+const serverPortString = useNumberString(serverPort)
+
+function saveSettings() {
+  props.store.saveSettings()
+}
+</script>
+
+<template>
+  <div flex="~ col gap-6">
+    <FieldCheckbox
+      v-model="enabled"
+      :label="t(`${i18nKeyPrefix}.enable`)"
+      :description="t(`${i18nKeyPrefix}.enable-description`)"
+    />
+
+    <FieldInput
+      v-model="serverAddress"
+      :label="t(`${i18nKeyPrefix}.server-address`)"
+      :description="t(`${i18nKeyPrefix}.server-address-description`)"
+      :placeholder="t(`${i18nKeyPrefix}.server-address-placeholder`)"
+    />
+
+    <FieldInput
+      v-model="serverPortString"
+      type="number"
+      :min="1"
+      :max="65535"
+      :step="1"
+      :label="t(`${i18nKeyPrefix}.server-port`)"
+      :description="t(`${i18nKeyPrefix}.server-port-description`)"
+    />
+
+    <FieldInput
+      v-model="username"
+      :label="t(`${i18nKeyPrefix}.username`)"
+      :description="t(`${i18nKeyPrefix}.username-description`)"
+      :placeholder="t(`${i18nKeyPrefix}.username-placeholder`)"
+    />
+
+    <div>
+      <Button
+        :label="t('settings.common.save')"
+        variant="primary"
+        @click="saveSettings"
+      />
+    </div>
+
+    <div v-if="configured" class="mt-4 rounded-lg bg-green-100 p-4 text-green-800">
+      {{ t(`${i18nKeyPrefix}.configured`) }}
+    </div>
+  </div>
+</template>
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { Button } from '@proj-airi/stage-ui/components'
+import { useDiscordStore } from '@proj-airi/stage-ui/stores/modules/discord'
+import { FieldCheckbox, FieldInput } from '@proj-airi/ui'
+import { storeToRefs } from 'pinia'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const discordStore = useDiscordStore()
+const { enabled, token, configured } = storeToRefs(discordStore)
+
+function saveSettings() {
+  discordStore.saveSettings()
+}
+</script>
+
+<template>
+  <div flex="~ col gap-6">
+    <FieldCheckbox
+      v-model="enabled"
+      :label="t('settings.pages.modules.messaging-discord.enable')"
+      :description="t('settings.pages.modules.messaging-discord.enable-description')"
+    />
+
+    <FieldInput
+      v-model="token"
+      type="password"
+      :label="t('settings.pages.modules.messaging-discord.token')"
+      :description="t('settings.pages.modules.messaging-discord.token-description')"
+      :placeholder="t('settings.pages.modules.messaging-discord.token-placeholder')"
+    />
+
+    <div>
+      <Button
+        :label="t('settings.common.save')"
+        variant="primary"
+        @click="saveSettings"
+      />
+    </div>
+
+    <div v-if="configured" class="mt-4 rounded-lg bg-green-100 p-4 text-green-800">
+      {{ t('settings.pages.modules.messaging-discord.configured') }}
+    </div>
+  </div>
+</template>
--- a/Show More
+++ b/Show More