From 17debf3e96670e5bf9e37c48f73825a3be991d83 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sun, 18 Jan 2026 04:54:57 +0800
Subject: [PATCH] refactor(stage-*): de-centralize for route header

---
 .../src/renderer/layouts/settings.vue         | 165 +++++------------
 .../src/renderer/pages/devtools/index.vue     |   1 +
 .../pages/devtools/lag-visualizer.vue         |   2 +
 .../pages/devtools/screen-capture.vue         |   2 +
 .../devtools/use-electron-all-displays.vue    |   2 +
 .../devtools/use-electron-relative-mouse.vue  |   2 +
 .../pages/devtools/use-magic-keys.vue         |   2 +
 .../pages/devtools/use-window-mouse.vue       |   2 +
 .../pages/devtools/widgets-calling.vue        |   2 +
 .../pages/settings/connection/index.vue       |   6 +
 .../src/renderer/pages/settings/index.vue     |  63 ++-----
 .../pages/settings/system/developer.vue       |   2 +
 .../renderer/pages/settings/system/index.vue  |   6 +
 .../pages/devtools/performance-playground.vue |   2 +
 .../pages/devtools/performance-visualizer.vue |   2 +
 .../src/pages/settings/characters/index.vue   |   1 +
 .../src/pages/settings/system/developer.vue   |   2 +
 .../src/pages/settings/system/index.vue       |   6 +
 packages/stage-layouts/src/layouts/plain.vue  |   4 +
 .../stage-layouts/src/layouts/settings.vue    | 170 +++++-------------
 .../src/pages/devtools/beat-sync.vue          |   2 +
 .../src/pages/devtools/context-flow/index.vue |   2 +
 .../stage-pages/src/pages/devtools/image.vue  |   2 +
 .../src/pages/devtools/markdown-stress.vue    |   2 +
 ...ders-transcription-realtime-aliyun-nls.vue |   2 +
 .../src/pages/devtools/vibrant.vue            |   2 +
 .../pages/devtools/websocket-inspector.vue    |   2 +
 .../src/pages/settings/airi-card/index.vue    |   6 +
 .../src/pages/settings/connection/index.vue   |   6 +
 .../src/pages/settings/data/index.vue         |   6 +
 .../stage-pages/src/pages/settings/index.vue  |  69 ++-----
 .../src/pages/settings/memory/index.vue       |   6 +
 .../src/pages/settings/models/index.vue       |   6 +
 .../src/pages/settings/modules/beat-sync.vue  |   2 +
 .../pages/settings/modules/consciousness.vue  |   2 +
 .../settings/modules/gaming-factorio.vue      |   2 +
 .../settings/modules/gaming-minecraft.vue     |   2 +
 .../src/pages/settings/modules/hearing.vue    |   2 +
 .../src/pages/settings/modules/index.vue      |   6 +
 .../settings/modules/memory-long-term.vue     |   2 +
 .../settings/modules/memory-short-term.vue    |   2 +
 .../settings/modules/messaging-discord.vue    |   2 +
 .../src/pages/settings/modules/speech.vue     |   2 +
 .../src/pages/settings/modules/vision.vue     |   2 +
 .../src/pages/settings/modules/x.vue          |   2 +
 .../src/pages/settings/providers/index.vue    |   6 +
 .../src/pages/settings/scene/index.vue        |   6 +
 .../pages/settings/system/color-scheme.vue    |   2 +
 .../src/pages/settings/system/general.vue     |   2 +
 49 files changed, 242 insertions(+), 359 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/layouts/settings.vue b/apps/stage-tamagotchi/src/renderer/layouts/settings.vue
index b32b06bfd..ffc6b20e2 100644
--- a/apps/stage-tamagotchi/src/renderer/layouts/settings.vue
+++ b/apps/stage-tamagotchi/src/renderer/layouts/settings.vue
@@ -2,7 +2,6 @@
 import { isStageTamagotchi } from '@proj-airi/stage-shared'
 import { PageHeader } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
-import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView, useRoute } from 'vue-router'
@@ -14,140 +13,56 @@ import { useRestoreScroll } from '../composables/use-restore-scroll'
 const route = useRoute()
 const { t } = useI18n()
 const providersStore = useProvidersStore()
-const { allProvidersMetadata } = storeToRefs(providersStore)
 const scrollContainer = ref<HTMLElement>()
 useRestoreScroll(scrollContainer)
 
-const routeHeaderMetadataMap = computed(() => {
-  const map: Record<string, { subtitle?: string, title: string }> = {
-    '/settings/airi-card': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.card.title'),
-    },
-    '/settings/system': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.title'),
-    },
-    '/settings/system/general': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.general.title'),
-    },
-    '/settings/system/color-scheme': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.color-scheme.title'),
-    },
-    '/settings/system/window-shortcuts': {
-      subtitle: t('settings.title'),
-      title: t('tamagotchi.settings.pages.system.window-shortcuts.title'),
-    },
-    '/settings/system/developer': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.developer.title'),
-    },
-    '/settings/memory': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.memory.title'),
-    },
-    '/settings/models': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.models.title'),
-    },
-    '/settings/modules': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.title'),
-    },
-    '/settings/modules/consciousness': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.consciousness.title'),
-    },
-    '/settings/modules/speech': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.speech.title'),
-    },
-    '/settings/modules/hearing': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.hearing.title'),
-    },
-    '/settings/modules/memory-short-term': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.memory-short-term.title'),
-    },
-    '/settings/modules/memory-long-term': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.memory-long-term.title'),
-    },
-    '/settings/modules/messaging-discord': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.messaging-discord.title'),
-    },
-    '/settings/modules/x': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.x.title'),
-    },
-    '/settings/modules/gaming-minecraft': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.gaming-minecraft.title'),
-    },
-    '/settings/modules/gaming-factorio': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.gaming-factorio.title'),
-    },
-    '/settings/modules/beat-sync': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.beat_sync.title'),
-    },
-    '/settings/providers': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.providers.title'),
-    },
-    '/settings/data': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.data.title'),
-    },
-    '/settings/connection': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.connection.title'),
-    },
-    '/settings/scene': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.scene.title'),
-    },
-    '/settings': {
-      title: t('settings.title'),
-    },
+const routeMeta = computed(() => route.meta as {
+  titleKey?: string
+  subtitleKey?: string
+  title?: string
+  subtitle?: string
+})
 
-    // Tamagotchi specific
-    '/settings/modules/mcp': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.mcp-server.title'),
-    },
-    '/devtools/widgets-calling': {
-      subtitle: t('tamagotchi.settings.devtools.title'),
-      title: t('tamagotchi.settings.devtools.pages.widgets-calling.title'),
-    },
-    '/devtools/markdown-stress': {
-      subtitle: t('tamagotchi.settings.devtools.title'),
-      title: t('tamagotchi.settings.devtools.pages.markdown-stress.title'),
-    },
-    '/devtools/context-flow': {
-      subtitle: t('tamagotchi.settings.devtools.title'),
-      title: t('tamagotchi.settings.devtools.pages.context-flow.title'),
-    },
+const providerTitle = computed(() => {
+  if (!route.path.startsWith('/settings/providers/'))
+    return undefined
+
+  const segments = route.path.split('/').filter(Boolean)
+  const providerId = segments[3]
+
+  if (!providerId)
+    return undefined
+
+  try {
+    const metadata = providersStore.getProviderMetadata(providerId)
+    return t(metadata.nameKey)
   }
-
-  for (const metadata of allProvidersMetadata.value) {
-    map[`/settings/providers/${metadata.category}/${metadata.id}`] = {
-      subtitle: t('settings.title'),
-      title: t(metadata.nameKey),
-    }
+  catch {
+    return undefined
   }
-
-  return map
 })
 
 // const activeSettingsTutorial = ref('default')
 const routeHeaderMetadata = computed(() => {
-  return routeHeaderMetadataMap.value[route.path] || routeHeaderMetadataMap.value[`${route.path}/`]
+  const { titleKey, subtitleKey, title, subtitle } = routeMeta.value
+  const resolvedTitle = titleKey ? t(titleKey) : title
+  const resolvedSubtitle = subtitleKey ? t(subtitleKey) : subtitle
+
+  if (resolvedTitle || resolvedSubtitle) {
+    return {
+      title: resolvedTitle,
+      subtitle: resolvedSubtitle,
+    }
+  }
+
+  if (providerTitle.value) {
+    return {
+      title: providerTitle.value,
+      subtitle: t('settings.title'),
+    }
+  }
+
+  return undefined
 })
 </script>
 
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/index.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/index.vue
index a6e6be962..0b749bbf7 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/index.vue
@@ -9,4 +9,5 @@ import { RouterView } from 'vue-router'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/lag-visualizer.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/lag-visualizer.vue
index 284507e54..c8d4abb63 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/lag-visualizer.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/lag-visualizer.vue
@@ -21,4 +21,6 @@ const { t } = useI18n()
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: tamagotchi.settings.devtools.pages.lag-visualizer.title
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue
index 5c04a978e..a94c490f1 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/screen-capture.vue
@@ -387,4 +387,6 @@ onBeforeUnmount(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  title: Screen Capture
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-all-displays.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-all-displays.vue
index ff281dda2..5726ab6f2 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-all-displays.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-all-displays.vue
@@ -142,4 +142,6 @@ const containerDimensions = computed(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  title: useElectronAllDisplays
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-relative-mouse.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-relative-mouse.vue
index 79ca9036a..9e33a8aee 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-relative-mouse.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-electron-relative-mouse.vue
@@ -77,4 +77,6 @@ const windowBounds = useElectronWindowBounds()
 <route lang="yaml">
 meta:
   layout: settings
+  title: useElectronRelativeMouse
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-magic-keys.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-magic-keys.vue
index af6679933..e8834acd0 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-magic-keys.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-magic-keys.vue
@@ -139,4 +139,6 @@ const Key = defineComponent({
 <route lang="yaml">
 meta:
   layout: settings
+  title: useMagicKeys
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-window-mouse.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-window-mouse.vue
index 7649077ff..d6871ad00 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/use-window-mouse.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/use-window-mouse.vue
@@ -17,4 +17,6 @@ const { x, y } = useElectronMouse()
 <route lang="yaml">
 meta:
   layout: settings
+  title: useWindowMouse
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue b/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue
index 0f6c725af..3ee079bc7 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue
@@ -379,4 +379,6 @@ function applyMapPreset() {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: tamagotchi.settings.devtools.pages.widgets-calling.title
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/connection/index.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/connection/index.vue
index 5ac66f827..b9e492ab8 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/connection/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/connection/index.vue
@@ -11,6 +11,12 @@ import ConnectionSettings from '@proj-airi/stage-pages/pages/settings/connection
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.connection.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.connection.description
+  icon: i-solar:wi-fi-router-bold-duotone
+  settingsEntry: true
+  order: 8
   stageTransition:
     name: slide
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue
index e2ee630c4..19ce449eb 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/index.vue
@@ -23,56 +23,18 @@ const removeBeforeEach = router.beforeEach(async (_, __, next) => {
   next()
 })
 
-const settings = computed(() => [
-  {
-    title: t('settings.pages.card.title'),
-    description: t('settings.pages.card.description'),
-    icon: 'i-solar:emoji-funny-square-bold-duotone',
-    to: '/settings/airi-card',
-  },
-  {
-    title: t('settings.pages.modules.title'),
-    description: t('settings.pages.modules.description'),
-    icon: 'i-solar:layers-bold-duotone',
-    to: '/settings/modules',
-  },
-  {
-    title: t('settings.pages.scene.title'),
-    description: t('settings.pages.scene.description'),
-    icon: 'i-solar:armchair-2-bold-duotone',
-    to: '/settings/scene',
-  },
-  {
-    title: t('settings.pages.models.title'),
-    description: t('settings.pages.models.description'),
-    icon: 'i-solar:people-nearby-bold-duotone',
-    to: '/settings/models',
-  },
-  {
-    title: t('settings.pages.memory.title'),
-    description: t('settings.pages.memory.description'),
-    icon: 'i-solar:leaf-bold-duotone',
-    to: '/settings/memory',
-  },
-  {
-    title: t('settings.pages.providers.title'),
-    description: t('settings.pages.providers.description'),
-    icon: 'i-solar:box-minimalistic-bold-duotone',
-    to: '/settings/providers',
-  },
-  {
-    title: t('settings.pages.connection.title'),
-    description: t('settings.pages.connection.description'),
-    icon: 'i-solar:wi-fi-router-bold-duotone',
-    to: '/settings/connection',
-  },
-  {
-    title: t('settings.pages.system.title'),
-    description: t('settings.pages.system.description'),
-    icon: 'i-solar:filters-bold-duotone',
-    to: '/settings/system',
-  },
-])
+const settings = computed(() => {
+  return router
+    .getRoutes()
+    .filter(route => route.meta?.settingsEntry)
+    .sort((a, b) => (Number(a.meta?.order ?? 0) - Number(b.meta?.order ?? 0)))
+    .map(route => ({
+      title: route.meta?.titleKey ? t(route.meta.titleKey as string) : (route.meta?.title as string | undefined),
+      description: route.meta?.descriptionKey ? t(route.meta.descriptionKey as string) : (route.meta?.description as string | undefined) || '',
+      icon: route.meta?.icon as string | undefined,
+      to: route.path,
+    }))
+})
 </script>
 
 <template>
@@ -113,6 +75,7 @@ const settings = computed(() => [
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue
index 1993943b3..70813da16 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/system/developer.vue
@@ -169,6 +169,8 @@ const openMarkdownStressWindow = useElectronEventaInvoke(electronOpenDevtoolsWin
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.system.developer.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/system/index.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/system/index.vue
index 63c9ab361..1a37d6257 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/system/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/system/index.vue
@@ -71,6 +71,12 @@ const settings = computed(() => [
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.system.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.system.description
+  icon: i-solar:filters-bold-duotone
+  settingsEntry: true
+  order: 9
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/apps/stage-web/src/pages/devtools/performance-playground.vue b/apps/stage-web/src/pages/devtools/performance-playground.vue
index 68a58f46e..6a4f424ac 100644
--- a/apps/stage-web/src/pages/devtools/performance-playground.vue
+++ b/apps/stage-web/src/pages/devtools/performance-playground.vue
@@ -337,4 +337,6 @@ onUnmounted(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  title: Performance Playground
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-web/src/pages/devtools/performance-visualizer.vue b/apps/stage-web/src/pages/devtools/performance-visualizer.vue
index 0da779aff..eafa829ee 100644
--- a/apps/stage-web/src/pages/devtools/performance-visualizer.vue
+++ b/apps/stage-web/src/pages/devtools/performance-visualizer.vue
@@ -113,4 +113,6 @@ function exportCsv() {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: tamagotchi.settings.devtools.pages.performance-visualizer.title
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/apps/stage-web/src/pages/settings/characters/index.vue b/apps/stage-web/src/pages/settings/characters/index.vue
index 091b1f14d..345f61716 100644
--- a/apps/stage-web/src/pages/settings/characters/index.vue
+++ b/apps/stage-web/src/pages/settings/characters/index.vue
@@ -127,4 +127,5 @@ function handleActivate(char: Character) {
 meta:
   layout: settings
   title: Characters
+  subtitleKey: settings.title
 </route>
diff --git a/apps/stage-web/src/pages/settings/system/developer.vue b/apps/stage-web/src/pages/settings/system/developer.vue
index 9de17ad06..c412baaa1 100644
--- a/apps/stage-web/src/pages/settings/system/developer.vue
+++ b/apps/stage-web/src/pages/settings/system/developer.vue
@@ -170,6 +170,8 @@ const menu = computed(() => [
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.system.developer.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/apps/stage-web/src/pages/settings/system/index.vue b/apps/stage-web/src/pages/settings/system/index.vue
index 8b14d1d55..92ff372aa 100644
--- a/apps/stage-web/src/pages/settings/system/index.vue
+++ b/apps/stage-web/src/pages/settings/system/index.vue
@@ -68,6 +68,12 @@ const settings = computed(() => [
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.system.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.system.description
+  icon: i-solar:filters-bold-duotone
+  settingsEntry: true
+  order: 9
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-layouts/src/layouts/plain.vue b/packages/stage-layouts/src/layouts/plain.vue
index 7c2aa3f3e..a78fb6fd3 100644
--- a/packages/stage-layouts/src/layouts/plain.vue
+++ b/packages/stage-layouts/src/layouts/plain.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router'
+</script>
+
 <template>
   <RouterView />
 </template>
diff --git a/packages/stage-layouts/src/layouts/settings.vue b/packages/stage-layouts/src/layouts/settings.vue
index 32a883071..f40efb786 100644
--- a/packages/stage-layouts/src/layouts/settings.vue
+++ b/packages/stage-layouts/src/layouts/settings.vue
@@ -2,7 +2,6 @@
 import { PageHeader } from '@proj-airi/stage-ui/components'
 import { useProvidersStore } from '@proj-airi/stage-ui/stores/providers'
 import { useTheme } from '@proj-airi/ui'
-import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView, useRoute } from 'vue-router'
@@ -15,139 +14,54 @@ const route = useRoute()
 const { isDark: dark } = useTheme()
 const { t } = useI18n()
 const providersStore = useProvidersStore()
-const { allProvidersMetadata } = storeToRefs(providersStore)
+const routeMeta = computed(() => route.meta as {
+  titleKey?: string
+  subtitleKey?: string
+  title?: string
+  subtitle?: string
+})
 
-const routeHeaderMetadataMap = computed(() => {
-  const map: Record<string, { subtitle?: string, title: string }> = {
-    '/settings/airi-card': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.card.title'),
-    },
-    '/settings/characters': {
-      subtitle: t('settings.title'),
-      title: 'Characters',
-    },
-    '/settings/system': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.title'),
-    },
-    '/settings/system/general': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.general.title'),
-    },
-    '/settings/system/color-scheme': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.color-scheme.title'),
-    },
-    '/settings/system/developer': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.developer.title'),
-    },
-    '/settings/memory': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.memory.title'),
-    },
-    '/settings/models': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.models.title'),
-    },
-    '/settings/modules': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.title'),
-    },
-    '/settings/modules/consciousness': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.consciousness.title'),
-    },
-    '/settings/modules/speech': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.speech.title'),
-    },
-    '/settings/modules/hearing': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.hearing.title'),
-    },
-    '/settings/modules/vision': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.vision.title'),
-    },
-    '/settings/modules/memory-short-term': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.memory-short-term.title'),
-    },
-    '/settings/modules/memory-long-term': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.memory-long-term.title'),
-    },
-    '/settings/modules/messaging-discord': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.messaging-discord.title'),
-    },
-    '/settings/modules/x': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.x.title'),
-    },
-    '/settings/modules/gaming-minecraft': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.gaming-minecraft.title'),
-    },
-    '/settings/modules/gaming-factorio': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.modules.gaming-factorio.title'),
-    },
-    '/settings/providers': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.providers.title'),
-    },
-    '/settings/data': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.data.title'),
-    },
-    '/settings/connection': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.connection.title'),
-    },
-    '/settings/scene': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.scene.title'),
-    },
-    '/settings': {
-      title: t('settings.title'),
-    },
-    '/devtools/context-flow': {
-      subtitle: t('tamagotchi.settings.devtools.title'),
-      title: t('tamagotchi.settings.devtools.pages.context-flow.title'),
-    },
-    '/devtools/websocket-inspector': {
-      subtitle: t('tamagotchi.settings.devtools.title'),
-      title: 'WebSocket Inspector',
-    },
-    '/devtools/performance-visualizer': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.sections.section.developer.sections.section.performance-visualizer.title'),
-    },
-    '/devtools/markdown-stress': {
-      subtitle: t('settings.title'),
-      title: t('settings.pages.system.sections.section.developer.sections.section.markdown-stress.title'),
-    },
-    '/devtools/screen-capture': {
-      subtitle: t('settings.title'),
-      title: 'Screen Capture',
-    },
+const providerTitle = computed(() => {
+  if (!route.path.startsWith('/settings/providers/'))
+    return undefined
+
+  const segments = route.path.split('/').filter(Boolean)
+  const providerId = segments[3]
+
+  if (!providerId)
+    return undefined
+
+  try {
+    const metadata = providersStore.getProviderMetadata(providerId)
+    return t(metadata.nameKey)
   }
-
-  for (const metadata of allProvidersMetadata.value) {
-    map[`/settings/providers/${metadata.category}/${metadata.id}`] = {
-      subtitle: t('settings.title'),
-      title: t(metadata.nameKey),
-    }
+  catch {
+    return undefined
   }
-
-  return map
 })
 
 // const activeSettingsTutorial = ref('default')
-const routeHeaderMetadata = computed(() => routeHeaderMetadataMap.value[route.path])
+const routeHeaderMetadata = computed(() => {
+  const { titleKey, subtitleKey, title, subtitle } = routeMeta.value
+  const resolvedTitle = titleKey ? t(titleKey) : title
+  const resolvedSubtitle = subtitleKey ? t(subtitleKey) : subtitle
+
+  if (resolvedTitle || resolvedSubtitle) {
+    return {
+      title: resolvedTitle,
+      subtitle: resolvedSubtitle,
+    }
+  }
+
+  if (providerTitle.value) {
+    return {
+      title: providerTitle.value,
+      subtitle: t('settings.title'),
+    }
+  }
+
+  return undefined
+})
 
 const { updateThemeColor } = useThemeColor(themeColorFromValue({ light: 'rgb(255 255 255)', dark: 'rgb(18 18 18)' }))
 watch(dark, () => updateThemeColor(), { immediate: true })
diff --git a/packages/stage-pages/src/pages/devtools/beat-sync.vue b/packages/stage-pages/src/pages/devtools/beat-sync.vue
index 86cc26a7d..553e12772 100644
--- a/packages/stage-pages/src/pages/devtools/beat-sync.vue
+++ b/packages/stage-pages/src/pages/devtools/beat-sync.vue
@@ -347,4 +347,6 @@ function hitVSequence() {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.beat_sync.title
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/devtools/context-flow/index.vue b/packages/stage-pages/src/pages/devtools/context-flow/index.vue
index c56b7be5a..7e7ef3928 100644
--- a/packages/stage-pages/src/pages/devtools/context-flow/index.vue
+++ b/packages/stage-pages/src/pages/devtools/context-flow/index.vue
@@ -586,4 +586,6 @@ onUnmounted(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: tamagotchi.settings.devtools.pages.context-flow.title
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/devtools/image.vue b/packages/stage-pages/src/pages/devtools/image.vue
index a1b8df4f6..6296fb20a 100644
--- a/packages/stage-pages/src/pages/devtools/image.vue
+++ b/packages/stage-pages/src/pages/devtools/image.vue
@@ -62,4 +62,6 @@ async function handleFileChange(event: Event) {
 <route lang="yaml">
 meta:
   layout: settings
+  title: Image
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/devtools/markdown-stress.vue b/packages/stage-pages/src/pages/devtools/markdown-stress.vue
index 2308e71a4..352454d18 100644
--- a/packages/stage-pages/src/pages/devtools/markdown-stress.vue
+++ b/packages/stage-pages/src/pages/devtools/markdown-stress.vue
@@ -157,4 +157,6 @@ function toggleMode() {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: tamagotchi.settings.devtools.pages.markdown-stress.title
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue b/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue
index 8656c5889..cb56f10b7 100644
--- a/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue
+++ b/packages/stage-pages/src/pages/devtools/providers-transcription-realtime-aliyun-nls.vue
@@ -503,4 +503,6 @@ onBeforeUnmount(async () => {
 <route lang="yaml">
 meta:
   layout: settings
+  title: Aliyun NLS Realtime Transcription
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/devtools/vibrant.vue b/packages/stage-pages/src/pages/devtools/vibrant.vue
index b03738ec0..1e135c737 100644
--- a/packages/stage-pages/src/pages/devtools/vibrant.vue
+++ b/packages/stage-pages/src/pages/devtools/vibrant.vue
@@ -65,4 +65,6 @@ watch(files, (files) => {
 <route lang="yaml">
 meta:
   layout: settings
+  title: Vibrant
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/devtools/websocket-inspector.vue b/packages/stage-pages/src/pages/devtools/websocket-inspector.vue
index 9e1309152..da778f7e2 100644
--- a/packages/stage-pages/src/pages/devtools/websocket-inspector.vue
+++ b/packages/stage-pages/src/pages/devtools/websocket-inspector.vue
@@ -188,4 +188,6 @@ function payloadClasses(direction: 'incoming' | 'outgoing') {
 <route lang="yaml">
 meta:
   layout: settings
+  title: WebSocket Inspector
+  subtitleKey: tamagotchi.settings.devtools.title
 </route>
diff --git a/packages/stage-pages/src/pages/settings/airi-card/index.vue b/packages/stage-pages/src/pages/settings/airi-card/index.vue
index 085dc64ef..e0e10f2ec 100644
--- a/packages/stage-pages/src/pages/settings/airi-card/index.vue
+++ b/packages/stage-pages/src/pages/settings/airi-card/index.vue
@@ -331,6 +331,12 @@ function getModuleShortName(id: string, module: 'consciousness' | 'voice') {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.card.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.card.description
+  icon: i-solar:emoji-funny-square-bold-duotone
+  settingsEntry: true
+  order: 1
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/connection/index.vue b/packages/stage-pages/src/pages/settings/connection/index.vue
index a1fee00be..3498e2547 100644
--- a/packages/stage-pages/src/pages/settings/connection/index.vue
+++ b/packages/stage-pages/src/pages/settings/connection/index.vue
@@ -9,6 +9,12 @@ import ConnectionSettings from './ConnectionSettings.vue'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.connection.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.connection.description
+  icon: i-solar:wi-fi-router-bold-duotone
+  settingsEntry: true
+  order: 8
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/data/index.vue b/packages/stage-pages/src/pages/settings/data/index.vue
index 344e23f55..ce0f8fb77 100644
--- a/packages/stage-pages/src/pages/settings/data/index.vue
+++ b/packages/stage-pages/src/pages/settings/data/index.vue
@@ -286,6 +286,12 @@ async function handleImport(event: Event) {
 <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
diff --git a/packages/stage-pages/src/pages/settings/index.vue b/packages/stage-pages/src/pages/settings/index.vue
index 783b78f5c..0fa5886bc 100644
--- a/packages/stage-pages/src/pages/settings/index.vue
+++ b/packages/stage-pages/src/pages/settings/index.vue
@@ -26,62 +26,18 @@ const removeBeforeEach = router.beforeEach(async (_, __, next) => {
   next()
 })
 
-const settings = computed(() => [
-  {
-    title: t('settings.pages.card.title'),
-    description: t('settings.pages.card.description'),
-    icon: 'i-solar:emoji-funny-square-bold-duotone',
-    to: '/settings/airi-card',
-  },
-  {
-    title: t('settings.pages.modules.title'),
-    description: t('settings.pages.modules.description'),
-    icon: 'i-solar:layers-bold-duotone',
-    to: '/settings/modules',
-  },
-  {
-    title: t('settings.pages.scene.title'),
-    description: t('settings.pages.scene.description'),
-    icon: 'i-solar:armchair-2-bold-duotone',
-    to: '/settings/scene',
-  },
-  {
-    title: t('settings.pages.models.title'),
-    description: t('settings.pages.models.description'),
-    icon: 'i-solar:people-nearby-bold-duotone',
-    to: '/settings/models',
-  },
-  {
-    title: t('settings.pages.memory.title'),
-    description: t('settings.pages.memory.description'),
-    icon: 'i-solar:leaf-bold-duotone',
-    to: '/settings/memory',
-  },
-  {
-    title: t('settings.pages.providers.title'),
-    description: t('settings.pages.providers.description'),
-    icon: 'i-solar:box-minimalistic-bold-duotone',
-    to: '/settings/providers',
-  },
-  {
-    title: t('settings.pages.data.title'),
-    description: t('settings.pages.data.description'),
-    icon: 'i-solar:database-bold-duotone',
-    to: '/settings/data',
-  },
-  {
-    title: t('settings.pages.connection.title'),
-    description: t('settings.pages.connection.description'),
-    icon: 'i-solar:wi-fi-router-bold-duotone',
-    to: '/settings/connection',
-  },
-  {
-    title: t('settings.pages.system.title'),
-    description: t('settings.pages.system.description'),
-    icon: 'i-solar:filters-bold-duotone',
-    to: '/settings/system',
-  },
-])
+const settings = computed(() => {
+  return router
+    .getRoutes()
+    .filter(route => route.meta?.settingsEntry)
+    .sort((a, b) => (Number(a.meta?.order ?? 0) - Number(b.meta?.order ?? 0)))
+    .map(route => ({
+      title: route.meta?.titleKey ? t(route.meta.titleKey as string) : (route.meta?.title as string | undefined),
+      description: route.meta?.descriptionKey ? t(route.meta.descriptionKey as string) : (route.meta?.description as string | undefined) || '',
+      icon: route.meta?.icon as string | undefined,
+      to: route.path,
+    }))
+})
 </script>
 
 <template>
@@ -122,6 +78,7 @@ const settings = computed(() => [
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/memory/index.vue b/packages/stage-pages/src/pages/settings/memory/index.vue
index fef970984..b0ddd24a0 100644
--- a/packages/stage-pages/src/pages/settings/memory/index.vue
+++ b/packages/stage-pages/src/pages/settings/memory/index.vue
@@ -9,6 +9,12 @@ import { WIP } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.memory.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.memory.description
+  icon: i-solar:leaf-bold-duotone
+  settingsEntry: true
+  order: 5
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/models/index.vue b/packages/stage-pages/src/pages/settings/models/index.vue
index d6ca6c095..87ee8ab09 100644
--- a/packages/stage-pages/src/pages/settings/models/index.vue
+++ b/packages/stage-pages/src/pages/settings/models/index.vue
@@ -59,6 +59,12 @@ async function extractColorsFromModel() {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.models.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.models.description
+  icon: i-solar:people-nearby-bold-duotone
+  settingsEntry: true
+  order: 4
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/modules/beat-sync.vue b/packages/stage-pages/src/pages/settings/modules/beat-sync.vue
index 72fcea5ea..5ccd0fb3e 100644
--- a/packages/stage-pages/src/pages/settings/modules/beat-sync.vue
+++ b/packages/stage-pages/src/pages/settings/modules/beat-sync.vue
@@ -350,6 +350,8 @@ onUnmounted(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.beat_sync.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/modules/consciousness.vue b/packages/stage-pages/src/pages/settings/modules/consciousness.vue
index f229907fa..1e43a24b5 100644
--- a/packages/stage-pages/src/pages/settings/modules/consciousness.vue
+++ b/packages/stage-pages/src/pages/settings/modules/consciousness.vue
@@ -249,6 +249,8 @@ function handleDeleteProvider(providerId: string) {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.consciousness.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/modules/gaming-factorio.vue b/packages/stage-pages/src/pages/settings/modules/gaming-factorio.vue
index e7b6383fe..ac004c81f 100644
--- a/packages/stage-pages/src/pages/settings/modules/gaming-factorio.vue
+++ b/packages/stage-pages/src/pages/settings/modules/gaming-factorio.vue
@@ -9,6 +9,8 @@ import { GamingFactorio } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.gaming-factorio.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/modules/gaming-minecraft.vue b/packages/stage-pages/src/pages/settings/modules/gaming-minecraft.vue
index 2a17631c5..5e7b6080a 100644
--- a/packages/stage-pages/src/pages/settings/modules/gaming-minecraft.vue
+++ b/packages/stage-pages/src/pages/settings/modules/gaming-minecraft.vue
@@ -9,6 +9,8 @@ import { GamingMinecraft } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.gaming-minecraft.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/modules/hearing.vue b/packages/stage-pages/src/pages/settings/modules/hearing.vue
index 41f1e94ba..6262242d3 100644
--- a/packages/stage-pages/src/pages/settings/modules/hearing.vue
+++ b/packages/stage-pages/src/pages/settings/modules/hearing.vue
@@ -919,6 +919,8 @@ onUnmounted(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.hearing.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/modules/index.vue b/packages/stage-pages/src/pages/settings/modules/index.vue
index 78741db4e..b9861d1ce 100644
--- a/packages/stage-pages/src/pages/settings/modules/index.vue
+++ b/packages/stage-pages/src/pages/settings/modules/index.vue
@@ -45,6 +45,12 @@ const { lastClickedIndex, setLastClickedIndex } = useRippleGridState()
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.modules.description
+  icon: i-solar:layers-bold-duotone
+  settingsEntry: true
+  order: 2
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue b/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue
index fef970984..564d1eb0f 100644
--- a/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue
+++ b/packages/stage-pages/src/pages/settings/modules/memory-long-term.vue
@@ -9,6 +9,8 @@ import { WIP } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.memory-long-term.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue b/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue
index fef970984..6bba2e29e 100644
--- a/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue
+++ b/packages/stage-pages/src/pages/settings/modules/memory-short-term.vue
@@ -9,6 +9,8 @@ import { WIP } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.memory-short-term.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/modules/messaging-discord.vue b/packages/stage-pages/src/pages/settings/modules/messaging-discord.vue
index 7e3e3df94..698d41d4f 100644
--- a/packages/stage-pages/src/pages/settings/modules/messaging-discord.vue
+++ b/packages/stage-pages/src/pages/settings/modules/messaging-discord.vue
@@ -9,6 +9,8 @@ import { MessagingDiscord } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.messaging-discord.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/modules/speech.vue b/packages/stage-pages/src/pages/settings/modules/speech.vue
index a9c7095bc..2bb4ab7c3 100644
--- a/packages/stage-pages/src/pages/settings/modules/speech.vue
+++ b/packages/stage-pages/src/pages/settings/modules/speech.vue
@@ -593,6 +593,8 @@ function updateCustomModelName(value: string | undefined) {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.speech.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/modules/vision.vue b/packages/stage-pages/src/pages/settings/modules/vision.vue
index 376c623d2..277790453 100644
--- a/packages/stage-pages/src/pages/settings/modules/vision.vue
+++ b/packages/stage-pages/src/pages/settings/modules/vision.vue
@@ -9,6 +9,8 @@ import { WIP } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.vision.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/modules/x.vue b/packages/stage-pages/src/pages/settings/modules/x.vue
index f3b856294..93c6c951e 100644
--- a/packages/stage-pages/src/pages/settings/modules/x.vue
+++ b/packages/stage-pages/src/pages/settings/modules/x.vue
@@ -9,6 +9,8 @@ import { X } from '@proj-airi/stage-ui/components'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.modules.x.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/providers/index.vue b/packages/stage-pages/src/pages/settings/providers/index.vue
index 395ceaa54..ddb327e70 100644
--- a/packages/stage-pages/src/pages/settings/providers/index.vue
+++ b/packages/stage-pages/src/pages/settings/providers/index.vue
@@ -137,6 +137,12 @@ useScrollToHash(() => route.hash, {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.providers.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.providers.description
+  icon: i-solar:box-minimalistic-bold-duotone
+  settingsEntry: true
+  order: 6
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/scene/index.vue b/packages/stage-pages/src/pages/settings/scene/index.vue
index 54d9b53d1..ed7d5c2a6 100644
--- a/packages/stage-pages/src/pages/settings/scene/index.vue
+++ b/packages/stage-pages/src/pages/settings/scene/index.vue
@@ -31,6 +31,12 @@ import { Callout } from '@proj-airi/ui'
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.scene.title
+  subtitleKey: settings.title
+  descriptionKey: settings.pages.scene.description
+  icon: i-solar:armchair-2-bold-duotone
+  settingsEntry: true
+  order: 3
   stageTransition:
     name: slide
     pageSpecificAvailable: true
diff --git a/packages/stage-pages/src/pages/settings/system/color-scheme.vue b/packages/stage-pages/src/pages/settings/system/color-scheme.vue
index d7a958431..90e092a2c 100644
--- a/packages/stage-pages/src/pages/settings/system/color-scheme.vue
+++ b/packages/stage-pages/src/pages/settings/system/color-scheme.vue
@@ -227,6 +227,8 @@ const themePresets = computed(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.system.color-scheme.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>
diff --git a/packages/stage-pages/src/pages/settings/system/general.vue b/packages/stage-pages/src/pages/settings/system/general.vue
index 7bcdf5f5a..3f8f5044d 100644
--- a/packages/stage-pages/src/pages/settings/system/general.vue
+++ b/packages/stage-pages/src/pages/settings/system/general.vue
@@ -87,6 +87,8 @@ const languages = computed(() => {
 <route lang="yaml">
 meta:
   layout: settings
+  titleKey: settings.pages.system.general.title
+  subtitleKey: settings.title
   stageTransition:
     name: slide
 </route>